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

SPRINT-19: minor updates for dashboards

Browse Source
This commit is contained in:
Tim Chamberlain
2023-01-30 12:01:14 -06:00
parent 1b2512daa1
commit 0c8827cc57
2 changed files with 9 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,7 +22,7 @@
import Box from "@mui/material/Box";
import {BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip,} from "chart.js";
import React, {useEffect} from "react";
import React, {useEffect, useState} from "react";
import {Bar} from "react-chartjs-2";
import {useNavigate} from "react-router-dom";
import colors from "qqq/assets/theme/base/colors";
@ -39,6 +39,9 @@ ChartJS.register(
export const options = {
responsive: true,
animation: {
duration: 0
},
scales: {
x: {
stacked: true,
@ -59,6 +62,9 @@ function StackedBarChart({data}: Props): JSX.Element
{
const navigate = useNavigate();
const [stateData, setStateData] = useState(data);
const handleClick = (e: Array<{}>) =>
{
if(e && e.length > 0 && data?.urls && data?.urls.length)
@ -80,12 +86,13 @@ function StackedBarChart({data}: Props): JSX.Element
dataset.backgroundColor = gradients[chartColors[index]].state;
}
});
setStateData(stateData);
}
}, [data]);
return data ? (
<Box p={3}><Bar data={data} options={options} getElementsAtEvent={handleClick} /></Box>
<Box p={3}><Bar data={data} options={options} /></Box>
) : null;
}