QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-17 21:00:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add cursor:pointer to PieChart and StackedBarChart

Browse Source
This commit is contained in:
darin.kelkhoff
2024-02-21 19:18:34 -06:00
parent d6c9bf79b1
commit fa65d6c0ad
3 changed files with 81 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/qqq/components/widgets/charts/StackedBarChart.tsx
View File

@ -39,7 +39,9 @@ ChartJS.register(
Legend
);
export const options = {
export const makeOptions = (data: DefaultChartData) =>
{
return({
maintainAspectRatio: false,
responsive: true,
animation: {
@ -50,6 +52,17 @@ export const options = {
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: {
tooltip: {
// todo - some configs around this
@ -97,7 +110,8 @@ export const options = {
ticks: {precision: 0}
},
},
};
});
}
interface Props
{
@ -149,9 +163,9 @@ function StackedBarChart({data, chartSubheaderData}: Props): JSX.Element
return data ? (
<Box>
{chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} />)}
{chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} layout="inline" />)}
<Box width="100%" height="300px">
<Bar data={data} options={options} getElementsAtEvent={handleClick} />
<Bar data={data} options={makeOptions(data)} getElementsAtEvent={handleClick} />
</Box>
</Box>
) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "200px"}} />;

2
src/qqq/components/widgets/charts/piechart/PieChart.tsx
View File

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

13
src/qqq/components/widgets/charts/piechart/PieChartConfigs.ts
View File

@ -23,7 +23,7 @@ import colors from "qqq/assets/theme/base/colors";
const {gradients, dark} = colors;
function configs(labels: any, datasets: any)
function configs(labels: any, datasets: any, urls: string[] | undefined)
{
const backgroundColors = [];
@ -66,6 +66,17 @@ function configs(labels: any, datasets: any)
options: {
maintainAspectRatio: false,
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: {
tooltip: {
callbacks: {