QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-19 05:40:44 +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

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>