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

SPRINT-17: checkpoint commit of freight study optimization dashboard widgets

Browse Source
This commit is contained in:
Tim Chamberlain
2022-12-07 15:27:50 -06:00
parent 3ac7fcf3f6
commit 0057fdf3ea
6 changed files with 155 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/qqq/components/DashboardWidgets.tsx
View File

@ -31,17 +31,20 @@ import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
import LineChart from "qqq/pages/dashboards/Widgets/LineChart";
import DefaultLineChart from "qqq/pages/dashboards/Widgets/DefaultLineChart";
import HorizontalBarChart from "qqq/pages/dashboards/Widgets/HorizontalBarChart";
import MultiStatisticsCard from "qqq/pages/dashboards/Widgets/MultiStatisticsCard";
import ParentWidget from "qqq/pages/dashboards/Widgets/ParentWidget";
import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart";
import RecordGridWidget from "qqq/pages/dashboards/Widgets/RecordGridWidget";
import SimpleStatisticsCard from "qqq/pages/dashboards/Widgets/SimpleStatisticsCard";
import StepperCard from "qqq/pages/dashboards/Widgets/StepperCard";
import TableCard from "qqq/pages/dashboards/Widgets/TableCard";
import Widget from "qqq/pages/dashboards/Widgets/Widget";
import ProcessRun from "qqq/pages/process-run";
import QClient from "qqq/utils/QClient";
const qController = QClient.getInstance();
interface Props
@ -49,7 +52,7 @@ interface Props
widgetMetaDataList: QWidgetMetaData[];
entityPrimaryKey?: string;
omitWrappingGridContainer: boolean;
areChildren?: boolean;
areChildren?: boolean
childUrlParams?: string
}
@ -118,10 +121,11 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
{
return (
<MDBox key={i} sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%", height: "100%"}}>
<MDBox key={`${widgetMetaData.name}-${i}`} sx={{alignItems: "center", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%", height: "100%"}}>
{
widgetMetaData.type === "parentWidget" && (
<ParentWidget
entityPrimaryKey={entityPrimaryKey}
widgetIndex={i}
label={widgetMetaData.label}
data={widgetData[i]}
@ -189,6 +193,18 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
/>
)
}
{
widgetMetaData.type === "statistics" && (
widgetData && widgetData[i] && (
<SimpleStatisticsCard
title={widgetMetaData.label}
data={widgetData[i]}
increaseIsGood={true}
isCurrency={widgetData[i].isCurrency}
/>
)
)
}
{
widgetMetaData.type === "quickSightChart" && (
<QuickSightChart url={widgetData[i]?.url} label={widgetMetaData.label} />
@ -204,16 +220,28 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
/>
)
}
{
widgetMetaData.type === "horizontalBarChart" && (
widgetData && widgetData[i] && widgetData[i].chartData && (
<HorizontalBarChart
height={widgetData[i].height}
title={widgetMetaData.label}
data={widgetData[i]?.chartData}
isCurrency={widgetData[i].isCurrency}
/>
)
)
}
{
widgetMetaData.type === "lineChart" && (
widgetData && widgetData[i] ? (
<LineChart
widgetData && widgetData[i] && widgetData[i].chartData && widgetData[i].chartData?.datasets ? (
<DefaultLineChart sx={{alignItems: "center"}}
title={widgetData[i].title}
description={(
<MDBox display="flex" justifyContent="space-between">
<MDBox display="flex" ml={-1}>
{
widgetData[i].lineChartData.datasets.map((dataSet: any) => (
widgetData[i].chartData.datasets.map((dataSet: any) => (
<MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
))
}
@ -221,7 +249,9 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
<MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
</MDBox>
)}
chart={widgetData[i].lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
data={widgetData[i].chartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
isYAxisCurrency={widgetData[i].isYAxisCurrency}
isChild={areChildren}
/>
) : null
)
@ -248,7 +278,7 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
omitWrappingGridContainer
? renderWidget(widgetMetaData, i)
:
<Grid id={widgetMetaData.name} key={`${i}`} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
<Grid id={widgetMetaData.name} key={`${widgetMetaData.name}-${i}`} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
{renderWidget(widgetMetaData, i)}
</Grid>
))

87
src/qqq/pages/dashboards/Widgets/Configs/HorizontalBarChartConfigs.ts
View File

@ -1,87 +0,0 @@
/*
* 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: [...datasets],
},
options: {
indexAxis: "y",
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
y: {
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,
},
},
},
x: {
grid: {
drawBorder: false,
display: false,
drawOnChartArea: true,
drawTicks: true,
color: "#c1c4ce5c",
},
ticks: {
display: true,
color: "#9ca2b7",
padding: 10,
font: {
size: 14,
weight: 300,
family: "Roboto",
style: "normal",
lineHeight: 2,
},
},
},
},
},
};
}
export default configs;

52
src/qqq/pages/dashboards/Widgets/DefaultLineChart.tsx
View File

@ -52,6 +52,15 @@ const options = {
legend: {
display: false,
},
tooltip: {
enabled: true,
callbacks: {
label: function(context:any)
{
return(context.parsed.x);
}
}
}
},
interaction: {
intersect: false,
@ -78,6 +87,10 @@ const options = {
style: "normal",
lineHeight: 2,
},
callback: function(value: any, index: any, values: any)
{
return value;
}
},
},
x: {
@ -116,6 +129,8 @@ interface Props
};
title?: string;
height?: string | number;
isYAxisCurrency?: boolean;
isChild?: boolean;
data: DefaultLineChartData;
[key: string]: any;
@ -128,7 +143,7 @@ DefaultLineChart.defaultProps = {
};
function DefaultLineChart({icon, title, height, data}: Props): JSX.Element
function DefaultLineChart({icon, title, height, data, isYAxisCurrency, isChild}: Props): JSX.Element
{
const allBackgroundColors = ["info", "warning", "primary", "success", "error", "secondary", "dark"];
if (data && data.datasets)
@ -158,6 +173,27 @@ function DefaultLineChart({icon, title, height, data}: Props): JSX.Element
}))
: [];
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)
{
@ -169,6 +205,7 @@ function DefaultLineChart({icon, title, height, data}: Props): JSX.Element
const renderChart = (
<MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
{title ? (
<MDBox display="flex" px={0} pt={0}>
{icon.component && (
@ -190,7 +227,12 @@ function DefaultLineChart({icon, title, height, data}: Props): JSX.Element
</MDBox>
)}
<MDBox mt={icon.component ? -2 : 0}>
{title && <MDTypography variant="h5">{title}</MDTypography>}
{isChild ? (
title && <MDTypography variant="h6">{title}</MDTypography>
) : (
title && <MDTypography variant="h5">{title}</MDTypography>
)
}
<MDBox mb={2}>
<MDTypography component="div" variant="button" color="text">
<MDBox display="flex" justifyContent="space-between">
@ -224,7 +266,11 @@ function DefaultLineChart({icon, title, height, data}: Props): JSX.Element
</MDBox>
);
return title ? <Card>{renderChart}</Card> : renderChart;
return title ?
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
{renderChart}
</Card>
: renderChart;
}
export default DefaultLineChart;

54
src/qqq/pages/dashboards/Widgets/HorizontalBarChart.tsx
View File

@ -40,6 +40,15 @@ const options = {
legend: {
display: false,
},
tooltip: {
enabled: true,
callbacks: {
label: function(context:any)
{
return(context.parsed.x);
}
}
}
},
scales: {
y: {
@ -75,7 +84,7 @@ const options = {
ticks: {
display: true,
color: "#9ca2b7",
padding: 10,
padding: 0,
font: {
size: 14,
weight: 300,
@ -83,6 +92,10 @@ const options = {
style: "normal",
lineHeight: 2,
},
callback: function(value: any, index: any, values: any)
{
return value;
}
},
},
},
@ -101,12 +114,13 @@ interface Props
title?: string;
description?: string | ReactNode;
height?: string | number;
isCurrency?: boolean;
data: GenericChartData;
[key: string]: any;
}
function HorizontalBarChart({icon, title, description, height, data}: Props): JSX.Element
function HorizontalBarChart({icon, title, description, height, data, isCurrency}: Props): JSX.Element
{
const chartDatasets = data.datasets
? data.datasets.map((dataset) => ({
@ -114,11 +128,11 @@ function HorizontalBarChart({icon, title, description, height, data}: Props): JS
weight: 5,
borderWidth: 0,
borderRadius: 4,
backgroundColor: colors[dataset.color]
? colors[dataset.color || "dark"].main
: colors.dark.main,
backgroundColor: dataset?.color
? dataset.color
: colors.info.main,
fill: false,
maxBarThickness: 35,
maxBarThickness: 15,
}))
: [];
@ -131,10 +145,32 @@ function HorizontalBarChart({icon, title, description, height, data}: Props): JS
};
}
let customOptions = options;
if(isCurrency)
{
customOptions.scales.x.ticks =
{
... customOptions.scales.x.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.x.toLocaleString("en-US", {style: "currency", currency: "USD", minimumFractionDigits: 0});
}
}
}
const renderChart = (
<MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
<MDBox py={2} pr={2} pl={icon.component ? 1 : 2} sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
{title || description ? (
<MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
<MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0} sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
{icon.component && (
<MDBox
width="4rem"
@ -165,7 +201,7 @@ function HorizontalBarChart({icon, title, description, height, data}: Props): JS
) : null}
{useMemo(
() => (
<MDBox height={height}>
<MDBox height={height} sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<Bar data={fullData} options={options} />
</MDBox>
),

9
src/qqq/pages/dashboards/Widgets/ParentWidget.tsx
View File

@ -54,11 +54,12 @@ interface Props
label: string;
data: ParentWidgetData;
reloadWidgetCallback?: (widgetIndex: number, params: string) => void;
entityPrimaryKey?: string;
}
const qController = QClient.getInstance();
function ParentWidget({widgetIndex, label, data, reloadWidgetCallback}: Props, ): JSX.Element
function ParentWidget({widgetIndex, label, data, reloadWidgetCallback, entityPrimaryKey}: Props, ): JSX.Element
{
const [childUrlParams, setChildUrlParams] = useState("");
const [qInstance, setQInstance] = useState(null as QInstance);
@ -154,7 +155,7 @@ function ParentWidget({widgetIndex, label, data, reloadWidgetCallback}: Props, )
<Card className="parentWidgetCard" sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<Grid container>
<Grid item xs={3}>
<Grid item xs={4}>
<Box pt={3} px={3}>
{
label && (
@ -165,7 +166,7 @@ function ParentWidget({widgetIndex, label, data, reloadWidgetCallback}: Props, )
}
</Box>
</Grid>
<Grid item xs={9}>
<Grid item xs={8}>
<Box mb={3} p={3}>
{
data?.dropdownDataList?.map((dropdownData: any, index: number) =>
@ -182,7 +183,7 @@ function ParentWidget({widgetIndex, label, data, reloadWidgetCallback}: Props, )
</Grid>
</Grid>
<Box pr={3} pl={3}>
<DashboardWidgets widgetMetaDataList={widgets} areChildren={true} childUrlParams={childUrlParams}/>
<DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} childUrlParams={childUrlParams} areChildren={true}/>
</Box>
</Card>
);

28
src/qqq/pages/dashboards/Widgets/SimpleStatisticsCard.tsx
View File

@ -31,6 +31,7 @@ interface Props
title: string;
data: StatisticsCardData;
increaseIsGood: boolean;
isCurrency?: boolean;
dropdown?: {
action: (...args: any) => void;
menu: ReactNode;
@ -40,7 +41,7 @@ interface Props
[key: string]: any;
}
function SimpleStatisticsCard({title, data, increaseIsGood, dropdown}: Props): JSX.Element
function SimpleStatisticsCard({title, data, increaseIsGood, isCurrency, dropdown}: Props): JSX.Element
{
const {count, percentageAmount, percentageLabel} = data;
@ -65,10 +66,10 @@ function SimpleStatisticsCard({title, data, increaseIsGood, dropdown}: Props): J
}
return (
<Card>
<Card sx={{height: "fit-content", alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<MDBox p={2}>
<Grid container>
<Grid item xs={7}>
<Grid item xs={12}>
<MDBox mb={0.5} lineHeight={1}>
<MDTypography
variant="button"
@ -82,9 +83,16 @@ function SimpleStatisticsCard({title, data, increaseIsGood, dropdown}: Props): J
<MDBox lineHeight={1}>
{
count ? (
<MDTypography variant="h5" fontWeight="bold">
{count.toLocaleString()}
</MDTypography>
isCurrency ? (
<MDTypography variant="h5" fontWeight="bold">
{count.toLocaleString("en-US", {style: "currency", currency: "USD"})}
</MDTypography>
) : (
<MDTypography variant="h5" fontWeight="bold">
{count.toLocaleString("en-US", {style: "currency", currency: "USD"})}
</MDTypography>
)
) : null
}
<MDTypography variant="button" fontWeight="bold" color={percentColor}>
@ -99,8 +107,8 @@ function SimpleStatisticsCard({title, data, increaseIsGood, dropdown}: Props): J
</MDTypography>
</MDBox>
</Grid>
<Grid item xs={5}>
{dropdown && (
{dropdown && (
<Grid item xs={5}>
<MDBox width="100%" textAlign="right" lineHeight={1}>
<MDTypography
variant="caption"
@ -113,8 +121,8 @@ function SimpleStatisticsCard({title, data, increaseIsGood, dropdown}: Props): J
</MDTypography>
{dropdown.menu}
</MDBox>
)}
</Grid>
</Grid>
)}
</Grid>
</MDBox>
</Card>