logitude-dashboard-library 3.1.34 → 3.1.35

package/dist/features/Dashboard/ChartsComponents/FusionCharts/FusionChartObjectBuilder.d.ts

@@ -2,3 +2,4 @@ import { ChartObject } from "fusioncharts";
 import { SeriesMeasure } from "../../../../types/SeriesMeasure";
 import { ReactWidgetPM } from "../../../../types/widget";
 export declare function BuildFusionChartObject(seriesMeasures: SeriesMeasure[], widget: ReactWidgetPM): ChartObject;
+export declare const getGaugeObject: (data: any, widget: ReactWidgetPM) => ChartObject;

package/dist/features/Dashboard/ChartsComponents/FusionCharts/FusionChartObjectHelper.d.ts

@@ -90,6 +90,9 @@ export interface ChartInfo {
     decimalSeparator: string | null;
     thousandSeparator: string | null;
     formatNumberScale: string | null;
+    manageResize: string | null;
+    valueBelowPivot: string | null;
+    showValue: string | null;
 }
 export declare function getSeriesPositionColor(position: number): string | null;
 export declare function getSeriesHoverPositionColor(position: number): string | null;

package/dist/features/Dashboard/ChartsComponents/FusionCharts/GaugeChart.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { DashboardDataBinding } from "../../../../types/DashboardDataBinding";
+import { DataPointSelection } from "../../../../types/SeriesMeasure";
+import { ReactWidgetPM } from "../../../../types/widget";
+export declare type FusionChartProps = {
+    widget: ReactWidgetPM | undefined;
+    widgetRef: ReactWidgetPM | undefined;
+    dataBinding: DashboardDataBinding;
+    onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
+};
+declare const FusionChart: React.ForwardRefExoticComponent<FusionChartProps & React.RefAttributes<unknown>>;
+export default FusionChart;

package/dist/index.js

@@ -15,6 +15,7 @@ var Charts = _interopDefault(require('fusioncharts/fusioncharts.charts'));
 var FusionTheme = _interopDefault(require('fusioncharts/themes/fusioncharts.theme.fusion'));
 var useResizeObserver = _interopDefault(require('use-resize-observer'));
 var Popup = _interopDefault(require('reactjs-popup'));
+var Charts$1 = _interopDefault(require('fusioncharts/fusioncharts.widgets'));
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -219,6 +220,14 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
     return this._ApiServices.post("/api/" + this.controller + "/PostGetTableData", widget);
   };
 
+  _proto.getGaugeData = function getGaugeData(widget, signal) {
+    if (signal === void 0) {
+      signal = undefined;
+    }
+
+    return this._ApiServices.post("/api/" + this.controller + "/PostGetGaugeData", widget, signal);
+  };
+
   return DashboardAnalyticsService;
 }();
 
@@ -1389,6 +1398,42 @@ function BuildFusionChartObject(seriesMeasures, widget) {
   }
 }
 
+var getWidgetRanges = function getWidgetRanges(widget, value) {
+  var gaugeRanges = widget.GaugeRanges && widget.GaugeRanges.length > 0 ? JSON.parse(widget.GaugeRanges) : null;
+  if (gaugeRanges == null || isNullOrUndefinedOrEmpty(value)) return [];
+
+  if (value < gaugeRanges[0].minValue) {
+    gaugeRanges[0].minValue = value;
+  }
+
+  if (value > gaugeRanges[2].maxValue) {
+    gaugeRanges[2].maxValue = value;
+  }
+
+  return gaugeRanges;
+};
+
+var getGaugeObject = function getGaugeObject(data, widget) {
+  var fusionObject = getDefaultChartobject();
+  fusionObject.type = 'angulargauge';
+  var chartInfo = getDefaultChartInfo(widget);
+  chartInfo.manageResize = "1";
+  chartInfo.valueBelowPivot = "1";
+  chartInfo.showValue = "1";
+  fusionObject.dataSource = {
+    "chart": chartInfo,
+    "colorRange": {
+      "color": getWidgetRanges(widget, data === null || data === void 0 ? void 0 : data.Value)
+    },
+    "dials": {
+      "dial": [{
+        "value": data.Value
+      }]
+    }
+  };
+  return fusionObject;
+};
+
 function getBarObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = isGroupByFieldDateTime(widget.GroupByFieldDataType) ? "msbar2d" : "scrollbar2d";
@@ -2197,8 +2242,177 @@ function SvgCopyIcon(props) {
   })));
 }
 
+ReactFC.fcRoot(FusionCharts, Charts$1, FusionTheme);
+FusionCharts.options['license']({
+  key: 'prD4C-8eiA7A3A3C7E6G4B4A3J4C7B2D3D2nyqE1C3fd1npaE4D4tlA-21D7E4F4F1F1E1F4F1A10A8C2C5F5E2F2D1hwqD1B5D1aG4A19A32twbC6D3G4lhJ-7A9C11A5B-13ddA2I3A1B9B3D7A2B4G2H3H1F-7smC8B2XB4cetB8A7A5mxD3SG4F2tvgB2A3B2E4C3I3C7B3A4A3A2D3D2G4J-7==',
+  creditLabel: false
+});
+var FusionChart$1 = React.forwardRef(function (props, comRef) {
+  var _useState = React.useState(false),
+      dataLoaded = _useState[0],
+      setDataLoaded = _useState[1];
+
+  var _useState2 = React.useState(),
+      error = _useState2[0],
+      setError = _useState2[1];
+
+  var _useState3 = React.useState(uuid.v4()),
+      fusionKey = _useState3[0],
+      setFusionKey = _useState3[1];
+
+  var chartData = React.useRef(null);
+
+  var _useState4 = React.useState(null),
+      resizeTimer = _useState4[0],
+      setResizeTimer = _useState4[1];
+
+  var axiosController = React.useRef(new AbortController());
+  var widget = React.useRef();
+
+  var _useState5 = React.useState({}),
+      args = _useState5[0],
+      setArgs = _useState5[1];
+
+  var _useState6 = React.useState(uuid.v4()),
+      chartContainerId = _useState6[0];
+
+  var progressRef = React.useRef(null);
+  var fusionRef = React.useRef(null);
+  var isDummyChangesActive = React.useRef(false);
+  React.useEffect(function () {
+    var _props$dataBinding;
+
+    axiosController.current = new AbortController();
+    widget.current = props.widget;
+    getChartData();
+    (_props$dataBinding = props.dataBinding) === null || _props$dataBinding === void 0 ? void 0 : _props$dataBinding.widgetUpdated.subscribe(function (updatedWidget) {
+      var _widget$current;
+
+      if ((updatedWidget === null || updatedWidget === void 0 ? void 0 : updatedWidget.key) != ((_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.key)) return;
+      widget.current = _extends({}, updatedWidget);
+
+      if (chartData && chartData.current) {
+        var _data = JSON.parse(JSON.stringify(chartData.current));
+
+        isDummyChangesActive.current = true;
+        handleData(_data, true);
+      }
+    });
+    window.addEventListener("resize", handleResize);
+    return function () {
+      var _axiosController$curr;
+
+      window.removeEventListener("resize", handleResize);
+      setDataLoaded(false);
+
+      if (axiosController && axiosController !== null && axiosController !== void 0 && (_axiosController$curr = axiosController.current) !== null && _axiosController$curr !== void 0 && _axiosController$curr.abort) {
+        var _axiosController$curr2;
+
+        axiosController === null || axiosController === void 0 ? void 0 : (_axiosController$curr2 = axiosController.current) === null || _axiosController$curr2 === void 0 ? void 0 : _axiosController$curr2.abort();
+      }
+    };
+  }, []);
+
+  var handleResize = function handleResize() {
+    clearTimeout(resizeTimer);
+    setResizeTimer(setTimeout(function () {
+      setFusionKey(uuid.v4());
+    }, 200));
+  };
+
+  React.useImperativeHandle(comRef, function () {
+    return {
+      onResizeFinish: function onResizeFinish() {
+        setFusionKey(uuid.v4());
+      }
+    };
+  });
+
+  var getChartData = function getChartData() {
+    if (Session.Tenant == 0) {
+      handleData(null);
+      return;
+    }
+
+    var dashboardAnalyticsService = new DashboardAnalyticsService();
+
+    var postWidget = _extends({}, widget.current);
+
+    postWidget.onChange = undefined;
+    var signal = undefined;
+
+    if (axiosController) {
+      var _axiosController$curr3;
+
+      axiosController === null || axiosController === void 0 ? void 0 : (_axiosController$curr3 = axiosController.current) === null || _axiosController$curr3 === void 0 ? void 0 : _axiosController$curr3.abort();
+      var updatedAxiosController = new AbortController();
+      axiosController.current = updatedAxiosController;
+      signal = updatedAxiosController === null || updatedAxiosController === void 0 ? void 0 : updatedAxiosController.signal;
+    }
+
+    dashboardAnalyticsService.getGaugeData(postWidget, signal).then(function (result) {
+      handleData(result === null || result === void 0 ? void 0 : result.data);
+      chartData.current = result === null || result === void 0 ? void 0 : result.data;
+      setDataLoaded(true);
+    }, 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) setError(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 setError(error.message);
+      setDataLoaded(true);
+    });
+  };
+
+  var handleData = function handleData(data, isDummyChange) {
+    if (isDummyChange === void 0) {
+      isDummyChange = false;
+    }
+
+    var chart = getGaugeObject(data, widget.current);
+    setArgs(chart);
+
+    if (!isDummyChange) {
+      setDataLoaded(true);
+    } else {
+      setTimeout(function () {
+        isDummyChangesActive.current = false;
+      }, 100);
+    }
+  };
+
+  return !dataLoaded ? React__default.createElement("div", {
+    ref: progressRef,
+    className: 'dl-full-hight dl-flex-content-center spinner-custome'
+  }, React__default.createElement(progressspinner.ProgressSpinner, {
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    strokeWidth: "4",
+    animationDuration: "2s"
+  })) : !error ? React__default.createElement("div", {
+    className: 'db-fc-parent-container',
+    ref: fusionRef
+  }, React__default.createElement("div", {
+    className: 'db-fc-container',
+    key: fusionKey,
+    id: chartContainerId
+  }, React__default.createElement(ReactFC, Object.assign({}, args)))) : React__default.createElement("div", {
+    className: "dl-flex-content-center dl-full-hight",
+    style: {
+      width: '100%'
+    }
+  }, React__default.createElement("div", {
+    className: "dl-tooltip"
+  }, React__default.createElement(SvgRedWarning, {
+    className: "red-warning-icon"
+  }), React__default.createElement("span", {
+    className: "dl-tooltiptext"
+  }, error)));
+});
+
 var WidgetCard = React.forwardRef(function (props, comRef) {
-  var _widget$current11, _widget$current12, _widget$current13;
+  var _widget$current12, _widget$current13, _widget$current14;
 
   var widget = React.useRef();
 
@@ -2267,7 +2481,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
   };
 
   var GetChartComponent = function GetChartComponent() {
-    var _widget$current4, _widget$current5, _widget$current6;
+    var _widget$current4, _widget$current5, _widget$current6, _widget$current7;
 
     if (isLoading || !((_widget$current4 = widget.current) !== null && _widget$current4 !== void 0 && _widget$current4.TypeCode)) return "";
     if (((_widget$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.TypeCode) == "kpi" || ((_widget$current6 = widget.current) === null || _widget$current6 === void 0 ? void 0 : _widget$current6.TypeCode) == "table") return React__default.createElement(CustomChart, {
@@ -2278,6 +2492,13 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
       widgetRef: props.widgetRef,
       onSelectDataPoint: props.onSelectDataPoint
     });
+    if (((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.TypeCode) == "gauge") return React__default.createElement(FusionChart$1, {
+      ref: fusionChartRef,
+      dataBinding: props.dataBinding,
+      widget: widget.current,
+      widgetRef: props.widgetRef,
+      onSelectDataPoint: props.onSelectDataPoint
+    });
     return React__default.createElement(FusionChart, {
       ref: fusionChartRef,
       dataBinding: props.dataBinding,
@@ -2307,15 +2528,15 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
   };
 
   var isThereTitle = function isThereTitle() {
-    var _widget$current7, _widget$current8;
+    var _widget$current8, _widget$current9;
 
-    return ((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.Title) && ((_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.Title.length) > 0;
+    return ((_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.Title) && ((_widget$current9 = widget.current) === null || _widget$current9 === void 0 ? void 0 : _widget$current9.Title.length) > 0;
   };
 
   var isThereSubtitle = function isThereSubtitle() {
-    var _widget$current9, _widget$current10;
+    var _widget$current10, _widget$current11;
 
-    return ((_widget$current9 = widget.current) === null || _widget$current9 === void 0 ? void 0 : _widget$current9.Subtitle) && ((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.Subtitle.length) > 0;
+    return ((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.Subtitle) && ((_widget$current11 = widget.current) === null || _widget$current11 === void 0 ? void 0 : _widget$current11.Subtitle.length) > 0;
   };
 
   var tableHintMessage = function tableHintMessage() {
@@ -2360,7 +2581,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
         color: getCSSPropertyValue(widget.current, 'TitleFontColor', ''),
         textAlign: getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined)
       }
-    }, (_widget$current11 = widget.current) === null || _widget$current11 === void 0 ? void 0 : _widget$current11.Title),
+    }, (_widget$current12 = widget.current) === null || _widget$current12 === void 0 ? void 0 : _widget$current12.Title),
     position: ['top center'],
     arrowStyle: {
       color: '#262626'
@@ -2369,7 +2590,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     on: ['hover', 'focus']
   }, React__default.createElement("span", {
     className: "widget-title-tooltip-text"
-  }, (_widget$current12 = widget.current) === null || _widget$current12 === void 0 ? void 0 : _widget$current12.Title))), isTableWidget() && isThereTitle() && isThereSubtitle() && React__default.createElement("div", {
+  }, (_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Title))), isTableWidget() && isThereTitle() && isThereSubtitle() && React__default.createElement("div", {
     className: "titles-vertical-seeparator"
   }), React__default.createElement("div", {
     className: isThereSubtitle() ? "subtitle" : "subtitle margin-top-4",
@@ -2379,7 +2600,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
       color: getCSSPropertyValue(widget.current, 'SubtitleFontColor', ''),
       minWidth: isThereSubtitle() && isTableWidget() ? '5%' : undefined
     }
-  }, (_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Subtitle)), !isTitleAligmentRight() && isTableWidget() && tableHintMessage(), props.isInEditMode && React__default.createElement("div", {
+  }, (_widget$current14 = widget.current) === null || _widget$current14 === void 0 ? void 0 : _widget$current14.Subtitle)), !isTitleAligmentRight() && isTableWidget() && tableHintMessage(), props.isInEditMode && React__default.createElement("div", {
     className: isThereTitle() ? "widget-options-container" : "widget-options-container margin-top-6"
   }, React__default.createElement(SvgEditIcon, {
     onClick: function onClick() {