logitude-dashboard-library 1.3.86 → 1.3.89

package/dist/index.js

@@ -10,7 +10,7 @@ var overlaypanel = require('primereact/overlaypanel');
 var progressspinner = require('primereact/progressspinner');
 var ReactFC = _interopDefault(require('react-fusioncharts'));
 var FusionCharts = _interopDefault(require('fusioncharts'));
-var Column2D = _interopDefault(require('fusioncharts/fusioncharts.charts'));
+var Charts = _interopDefault(require('fusioncharts/fusioncharts.charts'));
 var FusionTheme = _interopDefault(require('fusioncharts/themes/fusioncharts.theme.fusion'));
 var useResizeObserver = _interopDefault(require('use-resize-observer'));
 
@@ -203,51 +203,51 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
 
 var KpiChart = function KpiChart(props) {
   var _useState = React.useState(false),
-      isView = _useState[0],
-      setisView = _useState[1];
+      dataLoaded = _useState[0],
+      setDataLoaded = _useState[1];
 
-  var _useState2 = React.useState(false),
-      viewError = _useState2[0],
-      setViewError = _useState2[1];
+  var _useState2 = React.useState(),
+      error = _useState2[0],
+      setError = _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 _useState3 = React.useState(),
+      data = _useState3[0],
+      setData = _useState3[1];
 
   var _useState4 = React.useState(),
-      data = _useState4[0],
-      setData = _useState4[1];
-
-  var _useState5 = React.useState(),
-      title = _useState5[0],
-      setTitle = _useState5[1];
+      title = _useState4[0],
+      setTitle = _useState4[1];
 
   React.useEffect(function () {
+    widget.current = props.customChartProps.widget;
+    onRefresh();
+  }, []);
+
+  var onRefresh = function onRefresh() {
     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)) {
+        setDataLoaded(false);
         Tools.Map(e, widget.current);
-        RefreshData();
+        setTimeout(function () {
+          RefreshData();
+        }, 500);
       }
     });
-  }, []);
+  };
+
   React.useEffect(function () {
     widgetRef.current = props.customChartProps.widgetRef;
-    RefreshData();
+    setTimeout(function () {
+      RefreshData();
+    }, 500);
   }, []);
   React.useEffect(function () {
     widgetRef.current = props.customChartProps.widgetRef;
@@ -264,32 +264,16 @@ var KpiChart = function KpiChart(props) {
     postWidget.onChange = undefined;
     dashboardAnalyticsService.getKpiData(postWidget).then(function (result) {
       setData(result.data);
-      isDataLoaded.current = true;
-      hasDataError.current = false;
-      updateView();
+      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) 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();
+      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 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);
-    }
-  };
-
   var kpiClick = function kpiClick() {
     var _props$customChartPro4, _props$customChartPro5, _props$customChartPro6, _props$customChartPro7, _props$customChartPro8;
 
@@ -301,7 +285,7 @@ var KpiChart = function KpiChart(props) {
     });
   };
 
-  return !isView && !viewError ? React__default.createElement("div", {
+  return !dataLoaded ? React__default.createElement("div", {
     className: 'dl-full-hight dl-flex-content-center spinner-custome'
   }, React__default.createElement(progressspinner.ProgressSpinner, {
     style: {
@@ -310,7 +294,7 @@ var KpiChart = function KpiChart(props) {
     },
     strokeWidth: "4",
     animationDuration: "2s"
-  })) : isView ? React__default.createElement("div", {
+  })) : !error ? React__default.createElement("div", {
     className: "kpIcontainer",
     onClick: kpiClick
   }, React__default.createElement("div", {
@@ -349,57 +333,229 @@ var CustomChart = function CustomChart(props) {
   }, project());
 };
 
-ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);
-var chartData = [{
-  label: "Venezuela",
-  value: "290"
-}, {
-  label: "Saudi",
-  value: "260"
-}, {
-  label: "Canada",
-  value: "180"
-}, {
-  label: "Iran",
-  value: "140"
-}, {
-  label: "Russia",
-  value: "115"
-}, {
-  label: "UAE",
-  value: "100"
-}, {
-  label: "US",
-  value: "30"
-}, {
-  label: "China",
-  value: "30"
-}];
-var chartConfigs = {
-  type: "column2d",
-  width: "100%",
-  height: "80%",
-  dataFormat: "json",
-  dataSource: {
-    chart: {
-      caption: "Countries With Most Oil Reserves [2017-18]",
-      subCaption: "In MMbbl = One Million barrels",
-      xAxisName: "Country",
-      yAxisName: "Reserves (MMbbl)",
-      numberSuffix: "K",
-      theme: "fusion"
-    },
-    data: chartData
+function BuildFusionChartObject(seriesMeasures, props, id) {
+  var _props$widget;
+
+  handelNullLabels(seriesMeasures);
+  var defaultChart = getDefaultChartobject(seriesMeasures, props);
+
+  switch ((_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.TypeCode) {
+    case 'bar':
+      return getBarObject(seriesMeasures, defaultChart);
+
+    case 'line':
+      return getLineObject(seriesMeasures, defaultChart);
+
+    case 'pie':
+      return getPieObject(seriesMeasures, defaultChart);
+
+    case 'donut':
+      return getDonutObject(seriesMeasures, defaultChart);
+
+    default:
+      return defaultChart;
   }
-};
+}
+
+function handelNullLabels(seriesMeasures) {
+  seriesMeasures.forEach(function (element) {
+    element.SeriesMeasureVulues.forEach(function (value) {
+      if (!value.Label || value.Label == '') value.Label = 'Not defined';
+    });
+  });
+}
+
+function getBarObject(seriesMeasures, chart) {
+  chart.type = "scrollbar2d";
+  return chart;
+}
+
+function getLineObject(seriesMeasures, chart) {
+  chart.type = "scrollline2d";
+  return chart;
+}
+
+function getDonutObject(seriesMeasures, chart) {
+  chart.type = "doughnut2d";
+  return chart;
+}
+
+function getPieObject(seriesMeasures, chart) {
+  chart.type = "pie2d";
+  return chart;
+}
+
+function getDefaultChartobject(seriesMeasures, props, id) {
+  var chart = {};
+  chart.type = "column2d";
+  chart.width = "100%";
+  chart.height = "80%";
+  chart.dataFormat = "json";
+  buildChartDataSource(chart, props, seriesMeasures);
+  return chart;
+}
+
+function buildChartDataSource(chart, props, seriesMeasures) {
+  var _props$widget2, _props$widget3, _props$widget4, _props$widget5;
+
+  if (!seriesMeasures || !seriesMeasures[0]) return;
+  var chartinfo = {
+    theme: "fusion",
+    scrollHeight: "5",
+    scrollWidth: "5",
+    scrollPadding: "8",
+    flatScrollBars: "1",
+    enableSlicing: "0",
+    showLegend: ((_props$widget2 = props.widget) === null || _props$widget2 === void 0 ? void 0 : _props$widget2.TypeCode) == "bar" || ((_props$widget3 = props.widget) === null || _props$widget3 === void 0 ? void 0 : _props$widget3.TypeCode) == "line" ? "1" : "0"
+  };
+
+  if (((_props$widget4 = props.widget) === null || _props$widget4 === void 0 ? void 0 : _props$widget4.TypeCode) == "bar" || ((_props$widget5 = props.widget) === null || _props$widget5 === void 0 ? void 0 : _props$widget5.TypeCode) == "line") {
+    chart.dataSource = {
+      chart: chartinfo,
+      categories: buildCategories(seriesMeasures),
+      dataset: buildDataSet(seriesMeasures)
+    };
+    return;
+  }
+
+  chart.dataSource = {
+    chart: chartinfo,
+    data: buildDataSource(seriesMeasures)
+  };
+}
+
+function buildDataSource(values) {
+  var data = [];
+  if (!values || !values[0]) return data;
+  data = values[0].SeriesMeasureVulues.map(function (e) {
+    return {
+      value: e.Value,
+      label: e.Label,
+      id: {
+        GroupById: e.GroupById,
+        MeasureFieldId: values[0].MeasureFieldId
+      }
+    };
+  });
+  return data;
+}
+
+function buildDataSet(seriesMeasures) {
+  var dataSet = [];
+  var position = 1;
+  seriesMeasures.forEach(function (seriesMeasure) {
+    var datas = seriesMeasure.SeriesMeasureVulues.map(function (e) {
+      return {
+        value: e.Value,
+        id: {
+          GroupById: e.GroupById,
+          MeasureFieldId: seriesMeasure.MeasureFieldId
+        }
+      };
+    });
+    dataSet.push({
+      data: datas,
+      seriesname: "series-" + position
+    });
+    position++;
+  });
+  return dataSet;
+}
+
+function buildCategories(seriesMeasures) {
+  var categories = seriesMeasures[0].SeriesMeasureVulues.map(function (e) {
+    return {
+      label: e.Label
+    };
+  });
+  var result = [];
+  result.push({
+    category: categories
+  });
+  return result;
+}
 
-function FusionChartTest() {
-  var _useState = React.useState({}),
-      fChart = _useState[0],
-      setFchart = _useState[1];
+ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
+
+var FusionChart = function FusionChart(props) {
+  var _useState = React.useState(false),
+      dataLoaded = _useState[0],
+      setDataLoaded = _useState[1];
+
+  var _useState2 = React.useState(),
+      error = _useState2[0],
+      setError = _useState2[1];
+
+  var widget = React.useRef();
+  var widgetRef = React.useRef();
+
+  var _useState3 = React.useState({}),
+      args = _useState3[0],
+      setArgs = _useState3[1];
+
+  var _useState4 = React.useState({}),
+      fChart = _useState4[0],
+      setFchart = _useState4[1];
 
   var entered = React.useRef(false);
   var id = (Math.random() + 1).toString(36).substring(7);
+  React.useEffect(function () {
+    widget.current = props.widget;
+    onRefresh();
+  }, []);
+
+  var onRefresh = function onRefresh() {
+    var _props$dataBinding;
+
+    (_props$dataBinding = props.dataBinding) === null || _props$dataBinding === void 0 ? void 0 : _props$dataBinding.onEditWidget.subscribe(function (e) {
+      var _widget$current;
+
+      if (e.key == ((_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.key)) {
+        setDataLoaded(false);
+        Tools.Map(e, widget.current);
+        setTimeout(function () {
+          RefreshData();
+        }, 500);
+      }
+    });
+  };
+
+  React.useEffect(function () {
+    widgetRef.current = props.widgetRef;
+    setTimeout(function () {
+      RefreshData();
+    }, 500);
+  }, []);
+  React.useEffect(function () {
+    widgetRef.current = props.widgetRef;
+  }, [props.widgetRef]);
+
+  var RefreshData = function RefreshData() {
+    var dashboardAnalyticsService = new DashboardAnalyticsService();
+
+    var postWidget = _extends({}, widget.current);
+
+    postWidget.onChange = undefined;
+    dashboardAnalyticsService.getData(postWidget).then(function (result) {
+      var chart = BuildFusionChartObject(result.data, props);
+      setArgs(chart);
+      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 dataplotClick = function dataplotClick(eventObj, dataObj) {
+    props.onSelectDataPoint({
+      GroupById: dataObj.id.groupbyid,
+      MeasureFieldId: dataObj.id.measurefieldid,
+      Widget: props.widget
+    });
+  };
 
   var renderComplete = function renderComplete(chart) {
     setFchart(chart);
@@ -420,17 +576,36 @@ function FusionChartTest() {
   }),
       ref = _useResizeObserver.ref;
 
-  return React__default.createElement("div", {
+  return !dataLoaded ? 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"
+  })) : !error ? React__default.createElement("div", {
     className: 'db-fc-container',
     ref: ref,
     id: id
-  }, React__default.createElement(ReactFC, Object.assign({}, chartConfigs, {
+  }, React__default.createElement(ReactFC, Object.assign({}, args, {
+    "fcEvent-dataplotClick": dataplotClick,
     onRender: renderComplete
-  })));
-}
+  }))) : 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 WidgetCard = function WidgetCard(props, state) {
-  var _props$widget2;
+  var _props$widget, _props$widget2, _props$widget4;
 
   var moreBtnToggle = React.useRef(null);
 
@@ -448,7 +623,7 @@ var WidgetCard = function WidgetCard(props, state) {
     style: {
       paddingLeft: "5px"
     }
-  }, React__default.createElement("h1", null), props.isInEditMode ? React__default.createElement(button.Button, {
+  }, React__default.createElement("h1", null, (props === null || props === void 0 ? void 0 : (_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.TypeCode) == "kpi" ? null : (_props$widget2 = props.widget) === null || _props$widget2 === void 0 ? void 0 : _props$widget2.Title), props.isInEditMode ? React__default.createElement(button.Button, {
     icon: "pi pi-ellipsis-v",
     className: "p-button-lg p-button-rounded p-button-text",
     onClick: function onClick(e) {
@@ -465,18 +640,23 @@ var WidgetCard = function WidgetCard(props, state) {
     onClick: editWidget
   }, " Edit "), React__default.createElement("div", {
     onClick: function onClick() {
-      var _props$widget;
+      var _props$widget3;
 
-      return props.deleteBtnClicked((_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.key);
+      return props.deleteBtnClicked((_props$widget3 = props.widget) === null || _props$widget3 === void 0 ? void 0 : _props$widget3.key);
     }
   }, "Remove")))), React__default.createElement("div", {
     className: "dl-dashboard-widget"
-  }, (props === null || props === void 0 ? void 0 : (_props$widget2 = props.widget) === null || _props$widget2 === void 0 ? void 0 : _props$widget2.TypeCode) == "kpi" ? React__default.createElement(CustomChart, {
+  }, (props === null || props === void 0 ? void 0 : (_props$widget4 = props.widget) === null || _props$widget4 === void 0 ? void 0 : _props$widget4.TypeCode) == "kpi" ? React__default.createElement(CustomChart, {
+    dataBinding: props.dataBinding,
+    widget: props.widget,
+    widgetRef: props.widgetRef,
+    onSelectDataPoint: props.onSelectDataPoint
+  }) : React__default.createElement(FusionChart, {
     dataBinding: props.dataBinding,
     widget: props.widget,
     widgetRef: props.widgetRef,
     onSelectDataPoint: props.onSelectDataPoint
-  }) : React__default.createElement(FusionChartTest, null)));
+  })));
 };
 
 function deepClone(obj) {