@asaleh37/ui-base 1.2.3 → 1.2.5

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

@@ -0,0 +1,148 @@
+import { Box, Grid2, IconButton } from "@mui/material";
+import { useEffect, useState } from "react";
+import { useAxios } from "../../../hooks";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import WidgetViewer, { Widget } from "./WidgetViewer";
+import { useNavigate } from "react-router-dom";
+
+type DashboardViewerProps = {
+  dashboardCode: string;
+  parameters?: { [key: string]: any };
+};
+
+export interface WidgetProps {
+  widgetTitle?: string;
+  widgetType: "Line" | "Bar" | "Pie" | "Card" | "Gauge" | "Progress";
+  data: any;
+  valueLabel?: string;
+  valueField: string; //x-axis field in case of line/bar chart
+  labelField: string; //y-axis field in case of line/bar chart, it can also be a comma separated string for multiple series
+}
+
+export interface SingleRecordWidgetProps {
+  widgetTitle?: string;
+  record: object;
+  valueField: string;
+  labelField: string;
+  total?: number;
+}
+
+type DashboardInfo = {
+  dashboardCode: string;
+  dashboardName: string;
+  dashboardTitle: string;
+  widgets: Array<Widget>;
+  dashboardParameters: Array<any>;
+};
+
+const DashboardViewer: React.FC<DashboardViewerProps> = (props) => {
+  const [dashboardInfo, setDashboardInfo] = useState<DashboardInfo>({
+    dashboardCode: "",
+    dashboardName: "",
+    dashboardTitle: "",
+    dashboardParameters: [],
+    widgets: [],
+  });
+  const [dashboardParameterValues, setDashboardParameterValues] = useState<{
+    [key: string]: any;
+  }>(props?.parameters || {});
+  const navigate = useNavigate();
+  const { handleGetRequest, handlePostRequest } = useAxios();
+  const loadDashboardInfo = async () => {
+    await handleGetRequest({
+      endPointURI: "api/v1/dev/dashboard/metadata",
+      showMask: true,
+      parameters: {
+        dashboardCode: props.dashboardCode,
+      },
+      successCallBkFn: (response) => {
+        setDashboardInfo(response.data);
+      },
+      failureCallBkFn: () => {
+        setDashboardInfo(null);
+      },
+    });
+  };
+  useEffect(() => {
+    if (props.dashboardCode) {
+      loadDashboardInfo();
+    }
+  }, [props.dashboardCode, props.parameters]);
+  return (
+    <>
+      {dashboardInfo ? (
+        <>
+          <Box
+            sx={{
+              fontSize: 20,
+              fontWeight: "bold",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <IconButton
+              onClick={() => {
+                navigate(-1, { replace: true });
+              }}
+            >
+              <FontAwesomeIcon icon="arrow-left" />
+            </IconButton>
+            <Box sx={{ flex: 1 }}></Box>
+            <FontAwesomeIcon
+              style={{ marginLeft: 10, marginRight: 10 }}
+              icon={"square-poll-vertical"}
+            />
+            <Box>{dashboardInfo?.dashboardTitle}</Box>
+            <Box sx={{ flex: 1 }}></Box>
+          </Box>
+          <Grid2
+            container
+            spacing={1}
+            sx={{
+              flexGrow: 1,
+              overflowY: "auto",
+              padding: 1,
+            }}
+          >
+            {dashboardInfo?.widgets.map((widget, index) => {
+              return (
+                <Grid2
+                  key={index}
+                  sx={{
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: 1,
+                    display: "flex",
+                    overflow: "auto",
+                    flexDirection:
+                      widget.widgetType != "Card" ? "column" : undefined,
+                    height: widget?.height || 300,
+                  }}
+                  size={{ md: widget?.width, sm: 12 }}
+                >
+                  <WidgetViewer {...widget} />
+                </Grid2>
+              );
+            })}
+          </Grid2>
+        </>
+      ) : (
+        <Box
+          sx={{
+            flex: 1,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 24,
+            fontWeight: "bold",
+          }}
+        >
+          No Dashboard Found
+        </Box>
+      )}
+    </>
+  );
+};
+
+export default DashboardViewer;

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

@@ -0,0 +1,198 @@
+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;

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

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

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

@@ -1,5 +1,6 @@
 import { Box, Paper, Typography } from "@mui/material";
-import { SingleRecordWidgetProps } from "../TemplateDashboard";
+import { SingleRecordWidgetProps } from "../DashboardViewer";
+
 
 const TemplateDataCard: React.FC<SingleRecordWidgetProps> = (props: any) => {
   return (
@@ -22,37 +23,11 @@ const TemplateDataCard: React.FC<SingleRecordWidgetProps> = (props: any) => {
           alignItems: "center",
         }}
       >
-        <Typography sx={{ fontSize: 16, fontWeight: "bold" }}>
-          {props.widgetTitle}
-        </Typography>
-      </Box>
-      <Box
-        sx={{
-          flex: 1,
-          display: "flex",
-          width: "100%",
-          justifyContent: "space-evenly",
-          alignItems: "center",
-        }}
-      >
-        {/* <div>left</div> */}
-        <div>{`${props.record[props.labelField]} : ${
-          props.record[props.valueField]
-        }`}</div>
-        {/* <div>right</div> */}
-      </Box>
-      <Box
-        sx={{
-          display: "flex",
-          width: "100%",
-          justifyContent: "space-evenly",
-          alignItems: "center",
-        }}
-      >
-        {/* <div>left</div>
-        <div>center</div>
-        <div>right</div> */}
+        <div>{props.record[props.valueField]}</div>
       </Box>
+      <Typography sx={{ fontSize: 16, fontWeight: "bold" }}>
+        {props.record[props.labelField]}
+      </Typography>
     </Paper>
   );
 };

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

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

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

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

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

@@ -4,7 +4,7 @@ import LinearProgress, {
 } from "@mui/material/LinearProgress";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
-import { SingleRecordWidgetProps } from "../TemplateDashboard";
+import { SingleRecordWidgetProps } from "../DashboardViewer";
 
 function LinearProgressWithLabel(
   props: LinearProgressProps & { value: number }
@@ -30,9 +30,11 @@ const TemplateLineProgress: React.FC<SingleRecordWidgetProps> = (
   return (
     <Box sx={{ width: "100%" }}>
       <Typography sx={{ fontSize: 16, fontWeight: "bold" }}>
-        {props.widgetTitle} - {props.record[props.labelField]}
+        {props.record[props.labelField]}
       </Typography>
-      <LinearProgressWithLabel value={props.record[props.valueField]} />
+      <LinearProgressWithLabel
+        value={100 * (props.record[props.valueField] / props.total)}
+      />
     </Box>
   );
 };

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

@@ -1,5 +1,5 @@
 import { PieChart } from "@mui/x-charts/PieChart";
-import { WidgetProps } from "../TemplateDashboard";
+import { WidgetProps } from "../DashboardViewer";
 
 const TemplatePieChart: React.FC<WidgetProps> = (props) => {
   // construct data object
@@ -10,7 +10,6 @@ const TemplatePieChart: React.FC<WidgetProps> = (props) => {
       label: record[props.labelField] + "",
     };
   });
-  console.log("chartData", chartData);
   return (
     <PieChart
       series={[