mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-19 05:40:44 +00:00
SPRINT-18: fixed to dashboards, removed and moved around all the things
This commit is contained in:
Tim Chamberlain
275
src/qqq/components/widgets/charts/linechart/DefaultLineChart.tsx
Normal file
275
src/qqq/components/widgets/charts/linechart/DefaultLineChart.tsx
Normal file
@ -0,0 +1,275 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
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 //
|
||||
//////////////////////////////////////////
|
||||
export interface DefaultLineChartData
|
||||
{
|
||||
labels: string[];
|
||||
lineLabels?: string[];
|
||||
datasets: {
|
||||
label: string;
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
data: number[];
|
||||
}[];
|
||||
};
|
||||
|
||||
/////////////////////
|
||||
// display options //
|
||||
/////////////////////
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
callbacks: {
|
||||
label: function(context:any)
|
||||
{
|
||||
return(" " + Number(context.parsed.y).toLocaleString());
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: "index",
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
color: "#c1c4ce5c",
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
padding: 10,
|
||||
color: "#9ca2b7",
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
callback: function(value: any, index: any, values: any)
|
||||
{
|
||||
return value.toLocaleString();
|
||||
}
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: true,
|
||||
borderDash: [5, 5],
|
||||
color: "#c1c4ce5c",
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: "#9ca2b7",
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
/////////////////////////
|
||||
// inputs and defaults //
|
||||
/////////////////////////
|
||||
interface Props
|
||||
{
|
||||
icon?: {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
component: ReactNode;
|
||||
};
|
||||
title?: string;
|
||||
height?: string | number;
|
||||
isYAxisCurrency?: boolean;
|
||||
isChild?: boolean;
|
||||
data: DefaultLineChartData;
|
||||
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
DefaultLineChart.defaultProps = {
|
||||
icon: {color: "info", component: ""},
|
||||
title: "",
|
||||
height: "19.125rem",
|
||||
};
|
||||
|
||||
|
||||
function DefaultLineChart({icon, title, height, data, isYAxisCurrency, isChild}: Props): JSX.Element
|
||||
{
|
||||
const allBackgroundColors = ["info", "warning", "primary", "success", "error", "secondary", "dark"];
|
||||
if (data && data.datasets)
|
||||
{
|
||||
data.datasets.forEach((ds, index) =>
|
||||
{
|
||||
// @ts-ignore
|
||||
ds.color = allBackgroundColors[index];
|
||||
});
|
||||
}
|
||||
|
||||
const chartDatasets = data && data.datasets
|
||||
? data.datasets.map((dataset) => ({
|
||||
...dataset,
|
||||
tension: 0,
|
||||
pointRadius: 3,
|
||||
borderWidth: 4,
|
||||
backgroundColor: "transparent",
|
||||
fill: true,
|
||||
pointBackgroundColor: colors[dataset.color]
|
||||
? colors[dataset.color || "dark"].main
|
||||
: colors.dark.main,
|
||||
borderColor: colors[dataset.color]
|
||||
? colors[dataset.color || "dark"].main
|
||||
: colors.dark.main,
|
||||
maxBarThickness: 6,
|
||||
}))
|
||||
: [];
|
||||
|
||||
let customOptions = options;
|
||||
if(isYAxisCurrency)
|
||||
{
|
||||
customOptions.scales.y.ticks =
|
||||
{
|
||||
... customOptions.scales.y.ticks,
|
||||
callback: function(value: any, index: any, values: any)
|
||||
{
|
||||
return value.toLocaleString("en-US", {style: "currency", currency: "USD", minimumFractionDigits: 0});
|
||||
}
|
||||
}
|
||||
customOptions.plugins.tooltip.callbacks =
|
||||
{
|
||||
... customOptions.plugins.tooltip.callbacks,
|
||||
label: function(context:any)
|
||||
{
|
||||
return " " + context.parsed.y.toLocaleString("en-US", {style: "currency", currency: "USD", minimumFractionDigits: 2});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let fullData = {};
|
||||
if (data)
|
||||
{
|
||||
fullData = {
|
||||
labels: data.labels,
|
||||
datasets: chartDatasets
|
||||
};
|
||||
}
|
||||
|
||||
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}
|
||||
{useMemo(
|
||||
() => (
|
||||
<Box height={height}>
|
||||
<Line data={fullData} options={options} />
|
||||
</Box>
|
||||
),
|
||||
|
||||
[data, height]
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
|
||||
return title ?
|
||||
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
{renderChart}
|
||||
</Card>
|
||||
: renderChart;
|
||||
}
|
||||
|
||||
export default DefaultLineChart;
|
||||
104
src/qqq/components/widgets/charts/linechart/LineChartConfigs.ts
Normal file
104
src/qqq/components/widgets/charts/linechart/LineChartConfigs.ts
Normal file
@ -0,0 +1,104 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
function configs(labels: any, datasets: any)
|
||||
{
|
||||
return {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: datasets.label,
|
||||
tension: 0,
|
||||
pointRadius: 5,
|
||||
pointBorderColor: "transparent",
|
||||
pointBackgroundColor: "rgba(255, 255, 255, .8)",
|
||||
borderColor: "rgba(255, 255, 255, .8)",
|
||||
borderWidth: 4,
|
||||
backgroundColor: "transparent",
|
||||
fill: true,
|
||||
data: datasets.data,
|
||||
maxBarThickness: 6,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: "index",
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
color: "rgba(255, 255, 255, .2)",
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: "#f8f9fa",
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: "#f8f9fa",
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
||||
@ -0,0 +1,98 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import Box from "@mui/material/Box";
|
||||
import Card from "@mui/material/Card";
|
||||
import parse from "html-react-parser";
|
||||
import {useMemo} from "react";
|
||||
import {Line} from "react-chartjs-2";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
import configs from "qqq/components/widgets/charts/linechart/LineChartConfigs";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
|
||||
//////////////////////////////////////////
|
||||
// structure of expected bar chart data //
|
||||
//////////////////////////////////////////
|
||||
export interface SmallLineChartData
|
||||
{
|
||||
labels: string[];
|
||||
dataset: {
|
||||
label: string;
|
||||
data: number[];
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
interface Props
|
||||
{
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
title: string;
|
||||
description?: string;
|
||||
date: string;
|
||||
chart: SmallLineChartData;
|
||||
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function SmallLineChart({color, title, description, date, chart}: Props): JSX.Element
|
||||
{
|
||||
const {data, options} = configs(chart?.labels || [], chart?.dataset || {});
|
||||
|
||||
return (
|
||||
|
||||
<Box mt={3} sx={{flexGrow: 1, display: "flex"}}>
|
||||
<Card sx={{height: "100%", flexGrow: 1, display: "flex"}}>
|
||||
<Box padding="1rem">
|
||||
|
||||
{useMemo(
|
||||
() => (
|
||||
<Box
|
||||
py={2}
|
||||
pr={0.5}
|
||||
mt={-5}
|
||||
height="12.5rem"
|
||||
sx={{borderRadius: "10px", backgroundColor: colors.dark.focus}}
|
||||
>
|
||||
<Line data={data} options={options} />
|
||||
</Box>
|
||||
),
|
||||
[chart, color]
|
||||
)}
|
||||
<Box pt={3} pb={1} px={1}>
|
||||
<MDTypography variant="h5" textTransform="capitalize">
|
||||
{title}
|
||||
</MDTypography>
|
||||
<MDTypography component="div" variant="button" color="text" fontWeight="light">
|
||||
{parse(description)}
|
||||
</MDTypography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
SmallLineChart.defaultProps = {
|
||||
color: "dark",
|
||||
description: "",
|
||||
};
|
||||
|
||||
export default SmallLineChart;
|
||||
Reference in New Issue
Block a user