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

src/qqq/components/DashboardWidgets.tsx

@@ -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] ? (
+                  widgetData && widgetData[i] && widgetData[i].chartData && widgetData[i].chartData?.datasets ? (
-                     <LineChart
+                     <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>
                ))

src/qqq/pages/dashboards/Widgets/Configs/HorizontalBarChartConfigs.ts

@@ -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;

src/qqq/pages/dashboards/Widgets/DefaultLineChart.tsx

@@ -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;

src/qqq/pages/dashboards/Widgets/HorizontalBarChart.tsx

@@ -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]
+         backgroundColor: dataset?.color
-            ? colors[dataset.color || "dark"].main
+            ? dataset.color
-            : colors.dark.main,
+            : 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>
             ),

src/qqq/pages/dashboards/Widgets/ParentWidget.tsx

@@ -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>
    );

src/qqq/pages/dashboards/Widgets/SimpleStatisticsCard.tsx

@@ -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">
+                           isCurrency ? (
-                              {count.toLocaleString()}
+                              <MDTypography variant="h5" fontWeight="bold">
-                           </MDTypography>
+                                 {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>