logitude-dashboard-library 1.3.64 → 1.3.65

package/dist/assets/styles/dl-dashboard.scss

@@ -64,7 +64,7 @@ $dark-grey: #717585;
 
         80%,
         90% {
-            stroke :#6EB2D6;
+            stroke: #6EB2D6;
         }
     }
 
@@ -378,9 +378,9 @@ $dark-grey: #717585;
     position: relative;
     flex-direction: column;
     align-items: center;
-  }
-  
-  .dl-tooltip .dl-tooltiptext {
+}
+
+.dl-tooltip .dl-tooltiptext {
     visibility: hidden;
     background-color: #eaeaea;
     color: #c40505;
@@ -393,8 +393,23 @@ $dark-grey: #717585;
     max-width: 400px;
     white-space: pre-wrap;
 
-  }
-  
-  .dl-tooltip:hover .dl-tooltiptext {
+}
+
+.dl-tooltip:hover .dl-tooltiptext {
     visibility: visible;
-  }
+}
+
+
+.kpIcontainer {
+    height: 100%;
+    flex-direction: column;
+    box-sizing: border-box;
+    display: flex;
+    place-content: center;
+    align-items: center;
+    gap: 20px;
+}
+
+.kpIHeader {
+    font-weight: bold;
+}

package/dist/features/Dashboard/ChartsComponents/ApexChart.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ReactWidgetPM } from "../../../types/widget";
 import { DataPointSelection } from '../../../types/SeriesMeasure';
 import { ApexOptions } from "apexcharts";

package/dist/features/Dashboard/ChartsComponents/CustomChart.d.ts

@@ -0,0 +1,11 @@
+import { DashboardDataBinding } from "../../../types/DashboardDataBinding";
+import { DataPointSelection } from "../../../types/SeriesMeasure";
+import { ReactWidgetPM } from "../../../types/widget";
+declare type CustomChartProps = {
+    widget: ReactWidgetPM | undefined;
+    widgetRef: ReactWidgetPM | undefined;
+    dataBinding: DashboardDataBinding;
+    onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
+};
+declare const CustomChart: (props: CustomChartProps) => JSX.Element;
+export default CustomChart;

package/dist/features/Dashboard/ChartsComponents/CustomCharts/CustomChart.d.ts

@@ -0,0 +1,11 @@
+import { DashboardDataBinding } from "../../../../types/DashboardDataBinding";
+import { DataPointSelection } from "../../../../types/SeriesMeasure";
+import { ReactWidgetPM } from "../../../../types/widget";
+export declare type CustomChartProps = {
+    widget: ReactWidgetPM | undefined;
+    widgetRef: ReactWidgetPM | undefined;
+    dataBinding: DashboardDataBinding;
+    onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
+};
+declare const CustomChart: (props: CustomChartProps) => JSX.Element;
+export default CustomChart;

package/dist/features/Dashboard/ChartsComponents/CustomCharts/KpiChart.d.ts

@@ -0,0 +1,7 @@
+import { KpiChart } from "../../../../types/KpiChart";
+import { CustomChartProps } from "./CustomChart";
+declare type KpiChartProps = {
+    customChartProps: CustomChartProps;
+};
+declare const KpiChart: (props: KpiChartProps) => JSX.Element;
+export default KpiChart;

package/dist/features/Dashboard/DashboardDesigner.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Layouts } from "react-grid-layout";
 import ColumnChartComponent from "./ChartsComponents/ColumnChartComponent";
 import { ReactWidgetPM } from "../../types/widget";

package/dist/features/Dashboard/WidgetCard.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DataPointSelection } from "../../types/SeriesMeasure";
 import { ReactWidgetPM } from "../../types/widget";
 import { DashboardDataBinding } from '../../types/DashboardDataBinding';

package/dist/features/Dashboard/dashboard-dialog/dashboard-dialog-component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type DashboardDialogProps = {
     display: boolean;
     onClose: () => void;

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./styles.module.css";
 import { ReactWidgetPM } from './types/widget';
 import { DashboardDataBinding } from './types/DashboardDataBinding';

package/dist/index.js

@@ -189,6 +189,10 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
     return this._ApiServices.post("/api/" + this.controller + "/PostGetDataAnalytic", widget);
   };
 
+  _proto.getKpiData = function getKpiData(widget) {
+    return this._ApiServices.post("/api/" + this.controller + "/PostGetKpiData", widget);
+  };
+
   return DashboardAnalyticsService;
 }();
 
@@ -722,8 +726,137 @@ var ApexChart = function ApexChart(props) {
   }, error)));
 };
 
+var KpiChart = function KpiChart(props) {
+  var _useState = React.useState(false),
+      isView = _useState[0],
+      setisView = _useState[1];
+
+  var _useState2 = React.useState(false),
+      viewError = _useState2[0],
+      setViewError = _useState2[1];
+
+  var isLoadingDrow = React.useRef(true);
+  var widget = React.useRef();
+  var widgetRef = React.useRef();
+  var isDataLoaded = React.useRef(false);
+  var hasDataError = React.useRef(false);
+
+  var _useState3 = React.useState(''),
+      error = _useState3[0],
+      setEror = _useState3[1];
+
+  var _useState4 = React.useState(),
+      data = _useState4[0],
+      setData = _useState4[1];
+
+  React.useEffect(function () {
+    var _props$customChartPro;
+
+    setTimeout(function () {
+      isLoadingDrow.current = false;
+      updateView();
+    }, 500);
+    widget.current = props.customChartProps.widget;
+    (_props$customChartPro = props.customChartProps.dataBinding) === null || _props$customChartPro === void 0 ? void 0 : _props$customChartPro.onEditWidget.subscribe(function (e) {
+      var _widget$current;
+
+      if (e.key == ((_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.key)) {
+        Tools.Map(e, widget.current);
+        RefreshData();
+      }
+    });
+  }, []);
+  React.useEffect(function () {
+    widgetRef.current = props.customChartProps.widgetRef;
+    RefreshData();
+  }, []);
+  React.useEffect(function () {
+    widgetRef.current = props.customChartProps.widgetRef;
+  }, [props.customChartProps.widgetRef]);
+
+  var RefreshData = function RefreshData() {
+    var dashboardAnalyticsService = new DashboardAnalyticsService();
+
+    var postWidget = _extends({}, widget.current);
+
+    postWidget.onChange = undefined;
+    dashboardAnalyticsService.getKpiData(postWidget).then(function (result) {
+      setData(result.data);
+      isDataLoaded.current = true;
+      hasDataError.current = false;
+      updateView();
+    }, function (error) {
+      var _error$response, _error$response$data, _error$response2, _error$response2$data;
+
+      console.log('error', error);
+      if (error !== null && error !== void 0 && (_error$response = error.response) !== null && _error$response !== void 0 && (_error$response$data = _error$response.data) !== null && _error$response$data !== void 0 && _error$response$data.ErrorMessage) setEror(error === null || error === void 0 ? void 0 : (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : (_error$response2$data = _error$response2.data) === null || _error$response2$data === void 0 ? void 0 : _error$response2$data.ErrorMessage);else setEror(error.message);
+      isDataLoaded.current = true;
+      hasDataError.current = true;
+      updateView();
+    });
+  };
+
+  var updateView = function updateView() {
+    if (isDataLoaded.current && !isLoadingDrow.current && !hasDataError.current) {
+      setisView(true);
+      setViewError(false);
+    }
+
+    if (isDataLoaded.current && !isLoadingDrow.current && hasDataError.current) {
+      setisView(false);
+      setViewError(true);
+    }
+  };
+
+  return !isView && !viewError ? React__default.createElement("div", {
+    className: 'dl-full-hight dl-flex-content-center spinner-custome'
+  }, React__default.createElement(progressspinner.ProgressSpinner, {
+    style: {
+      width: '100px',
+      height: '100px'
+    },
+    strokeWidth: "4",
+    animationDuration: "2s"
+  })) : isView ? React__default.createElement("div", {
+    className: "kpIcontainer"
+  }, React__default.createElement("div", {
+    className: "kpIHeader"
+  }, data === null || data === void 0 ? void 0 : data.MeasureLabel), React__default.createElement("div", null, data === null || data === void 0 ? void 0 : data.Value, " ")) : React__default.createElement("div", {
+    className: "dl-flex-content-center dl-full-hight "
+  }, React__default.createElement("div", {
+    className: "dl-tooltip"
+  }, React__default.createElement("img", {
+    width: 100,
+    src: "https://www.seekpng.com/png/full/334-3345964_error-icon-png.png"
+  }), React__default.createElement("span", {
+    className: "dl-tooltiptext"
+  }, error)));
+};
+
+var CustomChart = function CustomChart(props) {
+  var project = function project() {
+    var _props$widget;
+
+    switch ((_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.TypeCode) {
+      case "kpi":
+        return React__default.createElement(KpiChart, {
+          customChartProps: props
+        });
+
+      default:
+        return React__default.createElement("div", null, "Invalid Type");
+    }
+  };
+
+  return React__default.createElement("div", {
+    style: {
+      height: '100%'
+    }
+  }, project());
+};
+
 var WidgetCard = function WidgetCard(props, state) {
-  var _props$widget;
+  var _props$widget, _props$widget3;
 
   var moreBtnToggle = React.useRef(null);
 
@@ -764,7 +897,12 @@ var WidgetCard = function WidgetCard(props, state) {
     }
   }, "Remove")))), React__default.createElement("div", {
     className: "dl-dashboard-widget"
-  }, React__default.createElement(ApexChart, {
+  }, (props === null || props === void 0 ? void 0 : (_props$widget3 = props.widget) === null || _props$widget3 === void 0 ? void 0 : _props$widget3.TypeCode) == "kpi" ? React__default.createElement(CustomChart, {
+    dataBinding: props.dataBinding,
+    widget: props.widget,
+    widgetRef: props.widgetRef,
+    onSelectDataPoint: props.onSelectDataPoint
+  }) : React__default.createElement(ApexChart, {
     dataBinding: props.dataBinding,
     widget: props.widget,
     widgetRef: props.widgetRef,
@@ -972,6 +1110,7 @@ var Dashboard = function Dashboard(props) {
   var _useState = React.useState({
     lg: []
   });
+
   var Widgetlayouts = React.useRef({
     lg: []
   });