Merge branch 'main' into feature/CE-878-make-the-operations-dashboard

This commit is contained in:
Tim Chamberlain
2024-02-22 10:55:26 -06:00
5 changed files with 84 additions and 57 deletions

View File

@ -354,8 +354,7 @@ const CommandMenu = ({metaData}: Props) =>
<Grid container columnSpacing={5} rowSpacing={1}> <Grid container columnSpacing={5} rowSpacing={1}>
<Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>n</span>Create a New Record</Grid> <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>n</span>Create a New Record</Grid>
<Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>r</span>Refresh the Query</Grid> <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>r</span>Refresh the Query</Grid>
<Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>c</span>Open the Columns Panel</Grid> <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>f</span>Open the Filter Builder (Advanced mode only)</Grid>
<Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>f</span>Open the Filter Panel</Grid>
</Grid> </Grid>
<Typography variant="h6" pt={3}>Record View</Typography> <Typography variant="h6" pt={3}>Record View</Typography>

View File

@ -39,7 +39,9 @@ ChartJS.register(
Legend Legend
); );
export const options = { export const makeOptions = (data: DefaultChartData) =>
{
return({
maintainAspectRatio: false, maintainAspectRatio: false,
responsive: true, responsive: true,
animation: { animation: {
@ -50,6 +52,17 @@ export const options = {
borderRadius: 4 borderRadius: 4
} }
}, },
onHover: function (event: any, elements: any[], chart: any)
{
if(event.type == "mousemove" && elements.length > 0 && data.urls && data.urls.length > elements[0].index && data.urls[elements[0].index])
{
chart.canvas.style.cursor = "pointer";
}
else
{
chart.canvas.style.cursor = "default";
}
},
plugins: { plugins: {
tooltip: { tooltip: {
// todo - some configs around this // todo - some configs around this
@ -97,7 +110,8 @@ export const options = {
ticks: {precision: 0} ticks: {precision: 0}
}, },
}, },
}; });
}
interface Props interface Props
{ {
@ -151,7 +165,7 @@ function StackedBarChart({data, chartSubheaderData}: Props): JSX.Element
<Box> <Box>
{chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} />)} {chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} />)}
<Box width="100%" height="300px"> <Box width="100%" height="300px">
<Bar data={data} options={options} getElementsAtEvent={handleClick} /> <Bar data={data} options={makeOptions(data)} getElementsAtEvent={handleClick} />
</Box> </Box>
</Box> </Box>
) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "200px"}} />; ) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "200px"}} />;

View File

@ -70,7 +70,7 @@ function PieChart({description, chartData, chartSubheaderData}: Props): JSX.Elem
chartData.dataset.backgroundColors = chartColors; chartData.dataset.backgroundColors = chartColors;
} }
} }
const {data, options} = configs(chartData?.labels || [], chartData?.dataset || {}); const {data, options} = configs(chartData?.labels || [], chartData?.dataset || {}, chartData?.dataset?.urls);
useEffect(() => useEffect(() =>
{ {

View File

@ -23,7 +23,7 @@ import colors from "qqq/assets/theme/base/colors";
const {gradients, dark} = colors; const {gradients, dark} = colors;
function configs(labels: any, datasets: any) function configs(labels: any, datasets: any, urls: string[] | undefined)
{ {
const backgroundColors = []; const backgroundColors = [];
@ -66,6 +66,17 @@ function configs(labels: any, datasets: any)
options: { options: {
maintainAspectRatio: false, maintainAspectRatio: false,
responsive: true, responsive: true,
onHover: function (event: any, elements: any[], chart: any)
{
if(event.type == "mousemove" && elements.length > 0 && urls && urls.length > elements[0].index && urls[elements[0].index])
{
chart.canvas.style.cursor = "pointer";
}
else
{
chart.canvas.style.cursor = "default";
}
},
plugins: { plugins: {
tooltip: { tooltip: {
callbacks: { callbacks: {

View File

@ -610,11 +610,14 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
e.preventDefault() e.preventDefault()
updateTable("'r' keyboard event"); updateTable("'r' keyboard event");
} }
/*
// disable until we add a ... ref down to let us programmatically open Columns button
else if (! e.metaKey && e.key === "c") else if (! e.metaKey && e.key === "c")
{ {
e.preventDefault() e.preventDefault()
gridApiRef.current.showPreferences(GridPreferencePanelsValue.columns) gridApiRef.current.showPreferences(GridPreferencePanelsValue.columns)
} }
*/
else if (! e.metaKey && e.key === "f") else if (! e.metaKey && e.key === "f")
{ {
e.preventDefault() e.preventDefault()