@asaleh37/ui-base 1.2.29 → 25.1.9

package/src/components/templates/visuals/WidgetViewer.tsx

@@ -1,198 +1,208 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { WidgetType } from "../../administration/dev/WidgetGrid";
-import { Backdrop, Box, CircularProgress, Grid2 } from "@mui/material";
-import { useEffect, useState } from "react";
-import LoadingMask from "../../common/LoadingMask";
-import { useTranslation } from "react-i18next";
-import { useSelector } from "react-redux";
-import { useAxios } from "../../../hooks";
-import TemplateLineChart from "./charts/TemplateLineChart";
-import TemplateBarChart from "./charts/TemplateBarChart";
-import TemplatePieChart from "./charts/TemplatePieChart";
-import TemplateDataCard from "./charts/TemplateDataCard";
-import TemplateGauge from "./charts/TemplateGauge";
-import TemplateLineProgress from "./charts/TemplateLineProgress";
-
-export type Widget = {
-  widgetName: string;
-  widgetDescription: string;
-  title: string;
-  icon: any;
-  dataQueryId: number;
-  widgetType: WidgetType;
-  width: any;
-  height: any;
-  horizontalAxisField: any;
-  horizontalAxisLabel: any;
-  verticalAxisField: string;
-  verticalAxisLabel: string;
-  seriesKeys: any;
-  parameterValues: {
-    [key: string]: any;
-  };
-};
-
-const WidgetViewer: React.FC<Widget> = (props) => {
-  const [isWidgetLoading, setWidgetLoading] = useState(true);
-  const [data, setData] = useState([]);
-  const { handleGetRequest } = useAxios();
-  const getWidgetData = async () => {
-    setWidgetLoading(true);
-    await handleGetRequest({
-      endPointURI: "api/v1/dev/query/result",
-      showMask: false,
-      parameters: {
-        queryId: props.dataQueryId,
-        ...props.parameterValues,
-      },
-      successCallBkFn: (response) => {
-        setWidgetLoading(false);
-        setData(response.data);
-      },
-      failureCallBkFn: () => {
-        setWidgetLoading(false);
-        setData(null);
-      },
-    });
-  };
-  useEffect(() => {
-    getWidgetData();
-  }, [props.parameterValues]);
-
-  let total = 0;
-  if (data.length == 1) {
-    total = 100;
-  }
-  if (
-    props.widgetType === "CircularProgress" ||
-    props.widgetType === "LinearProgress"
-  ) {
-    for (const record of data) {
-      total += record[props.verticalAxisField];
-    }
-  }
-  return (
-    <>
-      {props.widgetType === "LineChart" ||
-      props.widgetType === "PieChart" ||
-      props.widgetType === "ColumnChart" ? (
-        <Box>
-          <FontAwesomeIcon
-            style={{ marginRight: 10, marginLeft: 10 }}
-            icon={props?.icon || "chart-pie"}
-          />
-          {props?.title}
-        </Box>
-      ) : (
-        <></>
-      )}
-
-      <Box
-        sx={{
-          flex: 1,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: "100%",
-        }}
-      >
-        {isWidgetLoading ? (
-          <>
-            <FontAwesomeIcon
-              icon={{ prefix: "fas", iconName: "arrows-spin" }}
-              style={{ marginRight: 10, marginLeft: 10 }}
-              spin
-              size="2x"
-            />
-            <div>Loading</div>
-          </>
-        ) : props.widgetType === "ColumnChart" ? (
-          <TemplateBarChart
-            data={data}
-            widgetTitle={props.title}
-            labelField={props.verticalAxisField}
-            valueField={props.horizontalAxisField}
-            valueLabel={props.horizontalAxisLabel}
-            widgetType="Line"
-          />
-        ) : props.widgetType === "LineChart" ? (
-          <TemplateLineChart
-            data={data}
-            widgetTitle={props.title}
-            labelField={props.verticalAxisField}
-            valueField={props.horizontalAxisField}
-            valueLabel={props.horizontalAxisLabel}
-            widgetType="Line"
-          />
-        ) : props.widgetType === "PieChart" ? (
-          <TemplatePieChart
-            data={data}
-            widgetTitle={props.title}
-            labelField={props.horizontalAxisField}
-            valueField={props.verticalAxisField}
-            widgetType="Line"
-          />
-        ) : (
-          <Grid2
-            container
-            sx={{
-              width: "100%",
-              alignItems: "flex-start",
-              justifyContent: "flex-start",
-            }}
-            spacing={2}
-            size={{ xs: 12 }}
-          >
-            <Grid2 size={{ xs: 12 }} sx={{ textAlign: "center" }}>
-              {props.title}
-            </Grid2>
-
-            {data.map((record, index) => {
-              if (props.widgetType === "Card") {
-                return (
-                  <Grid2 size={{ md: 3, xs: 12 }}>
-                    <TemplateDataCard
-                      key={index}
-                      widgetTitle={""}
-                      record={record}
-                      labelField={props.verticalAxisField}
-                      valueField={props.horizontalAxisField}
-                    />
-                  </Grid2>
-                );
-              } else if (props.widgetType === "CircularProgress") {
-                return (
-                  <Grid2 size={{ md: 3, xs: 12 }}>
-                    <TemplateGauge
-                      key={index}
-                      widgetTitle={""}
-                      record={record}
-                      labelField={props.horizontalAxisField}
-                      valueField={props.verticalAxisField}
-                      total={total}
-                    />
-                  </Grid2>
-                );
-              } else if (props.widgetType === "LinearProgress") {
-                return (
-                  <Grid2 size={{ md: 3, xs: 12 }}>
-                    <TemplateLineProgress
-                      key={index}
-                      widgetTitle={""}
-                      record={record}
-                      labelField={props.horizontalAxisField}
-                      valueField={props.verticalAxisField}
-                      total={total}
-                    />
-                  </Grid2>
-                );
-              }
-            })}
-          </Grid2>
-        )}
-      </Box>
-    </>
-  );
-};
-
-export default WidgetViewer;
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { WidgetType } from "../../administration/dev/WidgetGrid";
+import { Backdrop, Box, CircularProgress, Grid2 } from "@mui/material";
+import { useEffect, useState } from "react";
+import LoadingMask from "../../common/LoadingMask";
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import { useAxios } from "../../../hooks";
+import TemplateLineChart from "./charts/TemplateLineChart";
+import TemplateBarChart from "./charts/TemplateBarChart";
+import TemplatePieChart from "./charts/TemplatePieChart";
+import TemplateDataCard from "./charts/TemplateDataCard";
+import TemplateGauge from "./charts/TemplateGauge";
+import TemplateLineProgress from "./charts/TemplateLineProgress";
+
+export type Widget = {
+  loadWidget: boolean;
+  loadCounter: number;
+  widgetName: string;
+  widgetDescription: string;
+  title: string;
+  icon: any;
+  dataQueryId: number;
+  widgetType: WidgetType;
+  width: any;
+  height: any;
+  horizontalAxisField: any;
+  horizontalAxisLabel: any;
+  verticalAxisField: string;
+  verticalAxisLabel: string;
+  seriesKeys: any;
+  parameterValues: {
+    [key: string]: any;
+  };
+};
+
+const WidgetViewer: React.FC<Widget> = (props) => {
+  const [isWidgetLoading, setWidgetLoading] = useState(true);
+  const [data, setData] = useState([]);
+  const { handleGetRequest } = useAxios();
+  const getWidgetData = async () => {
+    setWidgetLoading(true);
+    await handleGetRequest({
+      endPointURI: "api/v1/dev/query/result",
+      showMask: false,
+      parameters: {
+        queryId: props.dataQueryId,
+        ...props.parameterValues,
+      },
+      successCallBkFn: (response) => {
+        setWidgetLoading(false);
+        setData(response.data);
+      },
+      failureCallBkFn: () => {
+        setWidgetLoading(false);
+        setData([]);
+      },
+    });
+  };
+  useEffect(() => {
+    if (props.loadWidget) {
+      getWidgetData();
+    } else {
+      setWidgetLoading(false);
+    }
+  }, [props.loadWidget, props.loadCounter]);
+
+  let total = 0;
+  if (data.length == 1) {
+    total = 100;
+  } else {
+    if (
+      props.widgetType === "CircularProgress" ||
+      props.widgetType === "LinearProgress"
+    ) {
+      for (const record of data) {
+        total += record[props.verticalAxisField];
+      }
+    }
+  }
+
+  return (
+    <>
+      {props.widgetType === "LineChart" ||
+      props.widgetType === "PieChart" ||
+      props.widgetType === "ColumnChart" ? (
+        <Box>
+          <FontAwesomeIcon
+            style={{ marginRight: 10, marginLeft: 10 }}
+            icon={props?.icon || "chart-pie"}
+          />
+          {props?.title}
+        </Box>
+      ) : (
+        <></>
+      )}
+
+      <Box
+        sx={{
+          flex: 1,
+          padding: 1,
+          height: "90%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "90%",
+        }}
+      >
+        {isWidgetLoading ? (
+          <>
+            <FontAwesomeIcon
+              icon={{ prefix: "fas", iconName: "arrows-spin" }}
+              style={{ marginRight: 10, marginLeft: 10 }}
+              spin
+              size="2x"
+            />
+            <div>Loading</div>
+          </>
+        ) : props.widgetType === "ColumnChart" ? (
+          <TemplateBarChart
+            data={data}
+            widgetTitle={props.title}
+            labelField={props.verticalAxisField}
+            valueField={props.horizontalAxisField}
+            valueLabel={props.horizontalAxisLabel}
+            widgetType="Line"
+          />
+        ) : props.widgetType === "LineChart" ? (
+          <TemplateLineChart
+            data={data}
+            widgetTitle={props.title}
+            labelField={props.verticalAxisField}
+            valueField={props.horizontalAxisField}
+            valueLabel={props.horizontalAxisLabel}
+            widgetType="Line"
+          />
+        ) : props.widgetType === "PieChart" ? (
+          <TemplatePieChart
+            data={data}
+            widgetTitle={props.title}
+            labelField={props.horizontalAxisField}
+            valueField={props.verticalAxisField}
+            widgetType="Pie"
+          />
+        ) : (
+          <Grid2
+            container
+            sx={{
+              width: "100%",
+              alignItems: "flex-start",
+              justifyContent: "flex-start",
+            }}
+            spacing={2}
+            size={{ xs: 12 }}
+          >
+            <Grid2 size={{ xs: 12 }} sx={{ textAlign: "center" }}>
+              {props.title}
+            </Grid2>
+
+            {data.map((record, index) => {
+              if (props.widgetType === "Card") {
+                return (
+                  <Grid2 size={{ md: 3, xs: 12 }}>
+                    <TemplateDataCard
+                      key={index}
+                      widgetTitle={""}
+                      record={record}
+                      labelField={props.horizontalAxisField}
+                      valueField={props.verticalAxisField}
+                    />
+                  </Grid2>
+                );
+              } else if (props.widgetType === "CircularProgress") {
+                return (
+                  <Grid2 size={{ md: 3, xs: 12 }}>
+                    <TemplateGauge
+                      key={index}
+                      widgetTitle={""}
+                      record={record}
+                      labelField={props.horizontalAxisField}
+                      valueField={props.verticalAxisField}
+                      total={total}
+                    />
+                  </Grid2>
+                );
+              } else if (props.widgetType === "LinearProgress") {
+                return (
+                  <Grid2 size={{ md: 3, xs: 12 }}>
+                    <TemplateLineProgress
+                      key={index}
+                      widgetTitle={""}
+                      record={record}
+                      labelField={props.horizontalAxisField}
+                      valueField={props.verticalAxisField}
+                      total={total}
+                    />
+                  </Grid2>
+                );
+              }
+            })}
+          </Grid2>
+        )}
+      </Box>
+    </>
+  );
+};
+
+export default WidgetViewer;

package/src/components/templates/visuals/charts/TemplateBarChart.tsx

@@ -1,23 +1,23 @@
-import { BarChart } from "@mui/x-charts";
-import { WidgetProps } from "../DashboardViewer";
-
-
-const TemplateBarChart: React.FC<WidgetProps> = (props) => {
-  return (
-    <BarChart
-      dataset={props.data}
-      xAxis={[
-        {
-          dataKey: props.valueField,
-          scaleType: "band",
-          label: props.valueLabel,
-        },
-      ]}
-      series={props.labelField?.split(",").map((labelField) => {
-        return { dataKey: labelField, label: labelField };
-      })}
-    />
-  );
-};
-
-export default TemplateBarChart;
+import { BarChart } from "@mui/x-charts";
+import { WidgetProps } from "../DashboardViewer";
+
+
+const TemplateBarChart: React.FC<WidgetProps> = (props) => {
+  return (
+    <BarChart
+      dataset={props.data}
+      xAxis={[
+        {
+          dataKey: props.valueField,
+          scaleType: "band",
+          label: props.valueLabel,
+        },
+      ]}
+      series={props.labelField?.split(",").map((labelField) => {
+        return { dataKey: labelField, label: labelField };
+      })}
+    />
+  );
+};
+
+export default TemplateBarChart;

package/src/components/templates/visuals/charts/TemplateDataCard.tsx

@@ -1,35 +1,35 @@
-import { Box, Paper, Typography } from "@mui/material";
-import { SingleRecordWidgetProps } from "../DashboardViewer";
-
-
-const TemplateDataCard: React.FC<SingleRecordWidgetProps> = (props: any) => {
-  return (
-    <Paper
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        height: 150,
-        padding: 1,
-        flexGrow: 1,
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <Box
-        sx={{
-          display: "flex",
-          width: "100%",
-          justifyContent: "space-evenly",
-          alignItems: "center",
-        }}
-      >
-        <div>{props.record[props.valueField]}</div>
-      </Box>
-      <Typography sx={{ fontSize: 16, fontWeight: "bold" }}>
-        {props.record[props.labelField]}
-      </Typography>
-    </Paper>
-  );
-};
-
-export default TemplateDataCard;
+import { Box, Paper, Typography } from "@mui/material";
+import { SingleRecordWidgetProps } from "../DashboardViewer";
+
+
+const TemplateDataCard: React.FC<SingleRecordWidgetProps> = (props: any) => {
+  return (
+    <Paper
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        height: 150,
+        padding: 1,
+        flexGrow: 1,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          width: "100%",
+          justifyContent: "space-evenly",
+          alignItems: "center",
+        }}
+      >
+        <div>{props.record[props.valueField]}</div>
+      </Box>
+      <Typography sx={{ fontSize: 16, fontWeight: "bold" }}>
+        {props.record[props.labelField]}
+      </Typography>
+    </Paper>
+  );
+};
+
+export default TemplateDataCard;

package/src/components/templates/visuals/charts/TemplateGauge.tsx

@@ -1,21 +1,21 @@
-import { Gauge } from "@mui/x-charts";
-import { SingleRecordWidgetProps } from "../DashboardViewer";
-import { Typography } from "@mui/material";
-
-const TemplateGauge: React.FC<SingleRecordWidgetProps> = (props: any) => {
-  return (
-    <>
-      <Typography sx={{ fontSize: 16, fontWeight: "bold" }}>
-        {props.record[props.labelField]}
-      </Typography>
-      <Gauge
-        width={200}
-        height={200}
-        value={props.record[props.valueField]}
-        valueMax={props.total}
-      />
-    </>
-  );
-};
-
-export default TemplateGauge;
+import { Gauge } from "@mui/x-charts";
+import { SingleRecordWidgetProps } from "../DashboardViewer";
+import { Typography } from "@mui/material";
+
+const TemplateGauge: React.FC<SingleRecordWidgetProps> = (props: any) => {
+  return (
+    <>
+      <Typography sx={{ fontSize: 16, fontWeight: "bold" }}>
+        {props.record[props.labelField]}
+      </Typography>
+      <Gauge
+        width={200}
+        height={200}
+        value={props.record[props.valueField]}
+        valueMax={props.total}
+      />
+    </>
+  );
+};
+
+export default TemplateGauge;

package/src/components/templates/visuals/charts/TemplateLineChart.tsx

@@ -1,22 +1,22 @@
-import { LineChart } from "@mui/x-charts";
-import { WidgetProps } from "../DashboardViewer";
-
-const TemplateLineChart: React.FC<WidgetProps> = (props) => {
-  return (
-    <LineChart
-      dataset={props.data}
-      xAxis={[
-        {
-          dataKey: props.valueField,
-          scaleType: "band",
-          label: props.valueLabel,
-        },
-      ]}
-      series={props.labelField?.split(",").map((labelField) => {
-        return { dataKey: labelField, label: labelField };
-      })}
-    />
-  );
-};
-
-export default TemplateLineChart;
+import { LineChart } from "@mui/x-charts";
+import { WidgetProps } from "../DashboardViewer";
+
+const TemplateLineChart: React.FC<WidgetProps> = (props) => {
+  return (
+    <LineChart
+      dataset={props.data}
+      xAxis={[
+        {
+          dataKey: props.valueField,
+          scaleType: "band",
+          label: props.valueLabel,
+        },
+      ]}
+      series={props.labelField?.split(",").map((labelField) => {
+        return { dataKey: labelField, label: labelField };
+      })}
+    />
+  );
+};
+
+export default TemplateLineChart;