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

SPRINT-20: several widget updates, saved filters updates, updates unified widget/view/edit record screen section/widget headers

Browse Source
This commit is contained in:
Tim Chamberlain
2023-02-08 22:42:21 -06:00
parent 54e3b82ad5
commit 60cd1c190d
22 changed files with 398 additions and 633 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,6 +20,7 @@
*/
import {Skeleton} from "@mui/material";
import Box from "@mui/material/Box";
import {BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip,} from "chart.js";
import React, {useEffect, useState} from "react";
@ -92,8 +93,8 @@ function StackedBarChart({data}: Props): JSX.Element
return data ? (
<Box p={3}><Bar data={data} options={options} /></Box>
) : null;
<Box p={3}><Bar data={data} options={options} getElementsAtEvent={handleClick} /></Box>
) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "200px"}} /> ;
}
export default StackedBarChart;

2
src/qqq/components/widgets/charts/barchart/BarChart.tsx
View File

@ -161,7 +161,7 @@ function BarChart({color, title, description, date, data}: Props): JSX.Element
[data, color]
)}
<Box pt={3} pb={1} px={1}>
<MDTypography variant="h5" textTransform="capitalize">
<MDTypography variant="h6" textTransform="capitalize">
{title}
</MDTypography>
<MDTypography component="div" variant="button" color="text" fontWeight="light">

80
src/qqq/components/widgets/charts/linechart/DefaultLineChart.tsx
View File

@ -20,13 +20,10 @@
*/
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import Icon from "@mui/material/Icon";
import React, {ReactNode, useMemo} from "react";
import {Line} from "react-chartjs-2";
import colors from "qqq/assets/theme/base/colors";
import MDBadgeDot from "qqq/components/legacy/MDBadgeDot";
import MDTypography from "qqq/components/legacy/MDTypography";
//////////////////////////////////////////
// structure of default line chart data //
@ -128,10 +125,9 @@ interface Props
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
component: ReactNode;
};
title?: string;
height?: string | number;
description?: any;
isYAxisCurrency?: boolean;
isChild?: boolean;
data: DefaultLineChartData;
[key: string]: any;
@ -139,12 +135,11 @@ interface Props
DefaultLineChart.defaultProps = {
icon: {color: "info", component: ""},
title: "",
height: "19.125rem",
};
function DefaultLineChart({icon, title, height, data, isYAxisCurrency, isChild}: Props): JSX.Element
function DefaultLineChart({data, height, isYAxisCurrency}: Props): JSX.Element
{
const allBackgroundColors = ["info", "warning", "primary", "success", "error", "secondary", "dark"];
if (data && data.datasets)
@ -156,6 +151,19 @@ function DefaultLineChart({icon, title, height, data, isYAxisCurrency, isChild}:
});
}
const description= (
<Box display="flex" justifyContent="space-between">
<Box display="flex" ml={-1}>
{
data?.datasets?.map((dataSet: any) => (
<MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
))
}
</Box>
<Box mt={-4} mr={-1} position="absolute" right="1.5rem" />
</Box>
);
const chartDatasets = data && data.datasets
? data.datasets.map((dataset) => ({
...dataset,
@ -204,55 +212,9 @@ function DefaultLineChart({icon, title, height, data, isYAxisCurrency, isChild}:
};
}
const renderChart = (
<Box py={2} pr={2} pl={icon.component ? 1 : 2}>
{title ? (
<Box display="flex" px={0} pt={0}>
{icon.component && (
<Box
width="4rem"
height="4rem"
borderRadius="xl"
display="flex"
justifyContent="center"
alignItems="center"
color="white"
mt={-5}
mr={2}
sx={{backgroundColor: icon.color || "info"}}
>
<Icon fontSize="medium">{icon.component}</Icon>
</Box>
)}
<Box mt={icon.component ? -2 : 0}>
{isChild ? (
title && <MDTypography variant="h6">{title}</MDTypography>
) : (
title && <MDTypography variant="h5">{title}</MDTypography>
)
}
<Box mb={2}>
<MDTypography component="div" variant="button" color="text">
<Box display="flex" justifyContent="space-between">
<Box display="flex" ml={-1}>
{
data && data.lineLabels ? (
(data.lineLabels.map((label: string, index: number) => (
<Box key={index}>
<MDBadgeDot color={allBackgroundColors[index]} size="sm" badgeContent={label} />
</Box>
)
))) : null
}
</Box>
</Box>
</MDTypography>
</Box>
</Box>
</Box>
) : null}
return (
<Box py={2} pr={2} pl={2}>
{description}
{useMemo(
() => (
<Box height={height}>
@ -264,12 +226,6 @@ function DefaultLineChart({icon, title, height, data, isYAxisCurrency, isChild}:
)}
</Box>
);
return title ?
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
{renderChart}
</Card>
: renderChart;
}
export default DefaultLineChart;

2
src/qqq/components/widgets/charts/linechart/SmallLineChart.tsx
View File

@ -77,7 +77,7 @@ function SmallLineChart({color, title, description, date, chart}: Props): JSX.El
[chart, color]
)}
<Box pt={3} pb={1} px={1}>
<MDTypography variant="h5" textTransform="capitalize">
<MDTypography variant="h6" textTransform="capitalize">
{title}
</MDTypography>
<MDTypography component="div" variant="button" color="text" fontWeight="light">

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

@ -19,12 +19,12 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {Card} from "@mui/material";
import {Card, Skeleton} from "@mui/material";
import Box from "@mui/material/Box";
import Divider from "@mui/material/Divider";
import Grid from "@mui/material/Grid";
import parse from "html-react-parser";
import React, {useMemo} from "react";
import React, {useEffect, useMemo, useState} from "react";
import {Pie} from "react-chartjs-2";
import {useNavigate} from "react-router-dom";
import MDTypography from "qqq/components/legacy/MDTypography";
@ -59,14 +59,22 @@ interface Props
function PieChart({description, chartData}: Props): JSX.Element
{
const navigate = useNavigate();
const [dataLoaded, setDataLoaded] = useState(false);
if (chartData && chartData.dataset)
{
chartData.dataset.backgroundColors = chartColors;
}
const {data, options} = configs(chartData?.labels || [], chartData?.dataset || {});
useEffect(() =>
{
if(chartData)
{
setDataLoaded(true);
}
}, [chartData]);
const handleClick = (e: Array<{}>) =>
{
if(e && e.length > 0 && chartData?.dataset?.urls && chartData?.dataset?.urls.length)
@ -89,6 +97,19 @@ function PieChart({description, chartData}: Props): JSX.Element
[chartData]
)}
</Box>
{
! chartData && (
<Box sx={{
position: "absolute",
top: "40%",
left: "50%",
transform: "translate(-50%, -50%)",
display: "flex",
justifyContent: "center"}}>
<Skeleton sx={{width: "150px", height: "150px"}} variant="circular"/>
</Box>
)
}
</Grid>
</Grid>
<Divider />