PRDONE-94: updated dashboards, new styles everywhere, moved 90% of codes we are using under qqq directory

2025-07-18 21:30:45 +00:00 · 2022-09-01 16:19:03 -05:00
parent b8cc274af4
commit 7b3dca9843
170 changed files with 11114 additions and 141 deletions
--- a/src/qqq/pages/dashboards/Widgets/LineChart.tsx
+++ b/src/qqq/pages/dashboards/Widgets/LineChart.tsx
@ -0,0 +1,125 @@
+/*
+ * 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 Card from "@mui/material/Card";
+import Icon from "@mui/material/Icon";
+import {useMemo, ReactNode} from "react";
+import {Line} from "react-chartjs-2";
+import colors from "qqq/components/Temporary/colors";
+import MDBox from "qqq/components/Temporary/MDBox";
+import MDTypography from "qqq/components/Temporary/MDTypography";
+import configs from "qqq/pages/dashboards/Widgets/Configs/LineChartConfigs";
+
+interface Props {
+  icon?: {
+    color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+    component: ReactNode;
+  };
+  title?: string;
+  description?: string | ReactNode;
+  height?: string | number;
+  chart: {
+    labels: string[];
+    datasets: {
+      label: string;
+      color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
+      data: number[];
+    }[];
+  };
+  [key: string]: any;
+}
+
+function LineChart({icon, title, description, height, chart}: Props): JSX.Element
+{
+   const chartDatasets = chart.datasets
+      ? chart.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,
+      }))
+      : [];
+
+   const {data, options} = configs(chart.labels || [], chartDatasets);
+
+   const renderChart = (
+      <MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
+         {title || description ? (
+            <MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
+               {icon.component && (
+                  <MDBox
+                     width="4rem"
+                     height="4rem"
+                     bgColor={icon.color || "info"}
+                     variant="gradient"
+                     coloredShadow={icon.color || "info"}
+                     borderRadius="xl"
+                     display="flex"
+                     justifyContent="center"
+                     alignItems="center"
+                     color="white"
+                     mt={-5}
+                     mr={2}
+                  >
+                     <Icon fontSize="medium">{icon.component}</Icon>
+                  </MDBox>
+               )}
+               <MDBox mt={icon.component ? -2 : 0}>
+                  {title && <MDTypography variant="h6">{title}</MDTypography>}
+                  <MDBox mb={2}>
+                     <MDTypography component="div" variant="button" color="text">
+                        {description}
+                     </MDTypography>
+                  </MDBox>
+               </MDBox>
+            </MDBox>
+         ) : null}
+         {useMemo(
+            () => (
+               <MDBox height={height}>
+                  <Line data={data} options={options} />
+               </MDBox>
+            ),
+            [chart, height]
+         )}
+      </MDBox>
+   );
+
+   return title || description ? <Card>{renderChart}</Card> : renderChart;
+}
+
+LineChart.defaultProps = {
+   icon: {color: "info", component: ""},
+   title: "",
+   description: "",
+   height: "19.125rem",
+};
+
+export default LineChart;