logitude-dashboard-library 1.4.4 → 1.4.5

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/CustomCharts/CustomChart.d.ts

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { KpiChart } from "../../../../types/KpiChart";
 import { CustomChartProps } from "./CustomChart";
 declare type KpiChartProps = {

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

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

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

@@ -1,4 +1,4 @@
 import { ChartObject } from "fusioncharts";
 import { SeriesMeasure } from "../../../types/SeriesMeasure";
-import { FusionChartProps } from "./FusionChart";
-export declare function BuildFusionChartObject(seriesMeasures: SeriesMeasure[], props: FusionChartProps): ChartObject;
+import { ReactWidgetPM } from "../../../types/widget";
+export declare function BuildFusionChartObject(seriesMeasures: SeriesMeasure[], widget: ReactWidgetPM): ChartObject;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare function FusionChartTest(): JSX.Element;
 export default FusionChartTest;

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

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

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

@@ -202,7 +202,7 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
 }();
 
 var KpiChart = function KpiChart(props) {
-  var _widget$current8;
+  var _widget$current7;
 
   var _useState = React.useState(false),
       dataLoaded = _useState[0],
@@ -233,28 +233,12 @@ var KpiChart = function KpiChart(props) {
   var prev = "";
   React.useEffect(function () {
     widget.current = props.customChartProps.widget;
-    onRefresh();
+    setDataLoaded(false);
     setTimeout(function () {
       RefreshData();
     }, 500);
   }, []);
 
-  var onRefresh = function onRefresh() {
-    var _props$customChartPro;
-
-    (_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);
-        widget.current = e;
-        setTimeout(function () {
-          RefreshData();
-        }, 500);
-      }
-    });
-  };
-
   var RefreshData = function RefreshData() {
     var dashboardAnalyticsService = new DashboardAnalyticsService();
 
@@ -277,10 +261,10 @@ var KpiChart = function KpiChart(props) {
   };
 
   var kpiClick = function kpiClick() {
-    var _widget$current2, _widget$current3, _widget$current3$Widg;
+    var _widget$current, _widget$current2, _widget$current2$Widg;
 
     var measureFieldId;
-    if (widget !== null && widget !== void 0 && (_widget$current2 = widget.current) !== null && _widget$current2 !== void 0 && _widget$current2.WidgetMeasures) measureFieldId = widget === null || widget === void 0 ? void 0 : (_widget$current3 = widget.current) === null || _widget$current3 === void 0 ? void 0 : (_widget$current3$Widg = _widget$current3.WidgetMeasures[0]) === null || _widget$current3$Widg === void 0 ? void 0 : _widget$current3$Widg.MeasureFieldId;
+    if (widget !== null && widget !== void 0 && (_widget$current = widget.current) !== null && _widget$current !== void 0 && _widget$current.WidgetMeasures) measureFieldId = widget === null || widget === void 0 ? void 0 : (_widget$current2 = widget.current) === null || _widget$current2 === void 0 ? void 0 : (_widget$current2$Widg = _widget$current2.WidgetMeasures[0]) === null || _widget$current2$Widg === void 0 ? void 0 : _widget$current2$Widg.MeasureFieldId;
     props.customChartProps.onSelectDataPoint({
       MeasureFieldId: measureFieldId,
       Widget: widget.current
@@ -288,9 +272,9 @@ var KpiChart = function KpiChart(props) {
   };
 
   var setTimeOverTimeImage = function setTimeOverTimeImage(data) {
-    var _widget$current4;
+    var _widget$current3;
 
-    if (!(widget !== null && widget !== void 0 && (_widget$current4 = widget.current) !== null && _widget$current4 !== void 0 && _widget$current4.TimeOverTime)) return;
+    if (!(widget !== null && widget !== void 0 && (_widget$current3 = widget.current) !== null && _widget$current3 !== void 0 && _widget$current3.TimeOverTime)) return;
     var ratio = data === null || data === void 0 ? void 0 : data.Ratio;
     if (!ratio) return;
     if (ratio >= 1) setArrowColorDirection(React__default.createElement("span", {
@@ -301,19 +285,19 @@ var KpiChart = function KpiChart(props) {
   };
 
   var checkValues = function checkValues(data) {
-    var _widget$current5, _widget$current6;
+    var _widget$current4, _widget$current5;
 
     setCheckValuesValidity(false);
-    if (!(widget !== null && widget !== void 0 && (_widget$current5 = widget.current) !== null && _widget$current5 !== void 0 && _widget$current5.TimeOverTime)) return;
-    if (widget !== null && widget !== void 0 && (_widget$current6 = widget.current) !== null && _widget$current6 !== void 0 && _widget$current6.TimeOverTime && (data === null || data === void 0 ? void 0 : data.ComparisonValue) == 0 && (data === null || data === void 0 ? void 0 : data.Value) === 0) return;
+    if (!(widget !== null && widget !== void 0 && (_widget$current4 = widget.current) !== null && _widget$current4 !== void 0 && _widget$current4.TimeOverTime)) return;
+    if (widget !== null && widget !== void 0 && (_widget$current5 = widget.current) !== null && _widget$current5 !== void 0 && _widget$current5.TimeOverTime && (data === null || data === void 0 ? void 0 : data.ComparisonValue) == 0 && (data === null || data === void 0 ? void 0 : data.Value) === 0) return;
     setCheckValuesValidity(true);
   };
 
   var checkUnitVisible = function checkUnitVisible(data) {
-    var _widget$current7;
+    var _widget$current6;
 
     setVisibilityUnit(false);
-    if (!(widget !== null && widget !== void 0 && (_widget$current7 = widget.current) !== null && _widget$current7 !== void 0 && _widget$current7.TimeOverTime) || (data === null || data === void 0 ? void 0 : data.ComparisonValue) == 0) return;
+    if (!(widget !== null && widget !== void 0 && (_widget$current6 = widget.current) !== null && _widget$current6 !== void 0 && _widget$current6.TimeOverTime) || (data === null || data === void 0 ? void 0 : data.ComparisonValue) == 0) return;
     setVisibilityUnit(true);
   };
 
@@ -337,7 +321,7 @@ var KpiChart = function KpiChart(props) {
     className: "dl-kpi-same-line"
   }, React__default.createElement("div", {
     className: "dl-kpi-margin"
-  }, arrowColorDirection), React__default.createElement("div", null, data === null || data === void 0 ? void 0 : data.Ratio)) : null, widget !== null && widget !== void 0 && (_widget$current8 = widget.current) !== null && _widget$current8 !== void 0 && _widget$current8.TimeOverTime ? React__default.createElement("div", {
+  }, arrowColorDirection), React__default.createElement("div", null, data === null || data === void 0 ? void 0 : data.Ratio)) : null, widget !== null && widget !== void 0 && (_widget$current7 = widget.current) !== null && _widget$current7 !== void 0 && _widget$current7.TimeOverTime ? React__default.createElement("div", {
     className: "dl-kpi-same-line"
   }, React__default.createElement("div", {
     className: "dl-kpi-margin"
@@ -377,13 +361,11 @@ var CustomChart = function CustomChart(props) {
   }, project());
 };
 
-function BuildFusionChartObject(seriesMeasures, props) {
-  var _props$widget;
-
+function BuildFusionChartObject(seriesMeasures, widget) {
   handelNullLabels(seriesMeasures);
-  var defaultChart = getDefaultChartobject(seriesMeasures, props);
+  var defaultChart = getDefaultChartobject(seriesMeasures, widget);
 
-  switch ((_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.TypeCode) {
+  switch (widget === null || widget === void 0 ? void 0 : widget.TypeCode) {
     case 'bar':
       return getBarObject(seriesMeasures, defaultChart);
 
@@ -429,19 +411,17 @@ function getPieObject(seriesMeasures, chart) {
   return chart;
 }
 
-function getDefaultChartobject(seriesMeasures, props) {
+function getDefaultChartobject(seriesMeasures, widget) {
   var chart = {};
   chart.type = "column2d";
   chart.width = "100%";
   chart.height = "100%";
   chart.dataFormat = "json";
-  buildChartDataSource(chart, props, seriesMeasures);
+  buildChartDataSource(chart, widget, seriesMeasures);
   return chart;
 }
 
-function buildChartDataSource(chart, props, seriesMeasures) {
-  var _props$widget2, _props$widget3, _props$widget4, _props$widget5, _props$widget6, _props$widget7, _props$widget8, _props$widget9;
-
+function buildChartDataSource(chart, widget, seriesMeasures) {
   if (!seriesMeasures || !seriesMeasures[0]) return;
   var chartinfo = {
     theme: "fusion",
@@ -454,12 +434,12 @@ function buildChartDataSource(chart, props, seriesMeasures) {
     chartTopMargin: "20",
     chartRightMargin: "20",
     chartBottomMargin: "20",
-    showPercentValues: ((_props$widget2 = props.widget) === null || _props$widget2 === void 0 ? void 0 : _props$widget2.TypeCode) == "donut" || ((_props$widget3 = props.widget) === null || _props$widget3 === void 0 ? void 0 : _props$widget3.TypeCode) == "pie" ? "0" : "1",
-    showValues: ((_props$widget4 = props.widget) === null || _props$widget4 === void 0 ? void 0 : _props$widget4.TypeCode) == "donut" || ((_props$widget5 = props.widget) === null || _props$widget5 === void 0 ? void 0 : _props$widget5.TypeCode) == "pie" ? "0" : "1",
-    showLegend: (((_props$widget6 = props.widget) === null || _props$widget6 === void 0 ? void 0 : _props$widget6.TypeCode) == "bar" || ((_props$widget7 = props.widget) === null || _props$widget7 === void 0 ? void 0 : _props$widget7.TypeCode) == "line") && (seriesMeasures === null || seriesMeasures === void 0 ? void 0 : seriesMeasures.length) > 1 ? "1" : "0"
+    showPercentValues: (widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "donut" || (widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "pie" ? "0" : "1",
+    showValues: (widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "donut" || (widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "pie" ? "0" : "1",
+    showLegend: ((widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "bar" || (widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "line") && (seriesMeasures === null || seriesMeasures === void 0 ? void 0 : seriesMeasures.length) > 1 ? "1" : "0"
   };
 
-  if (((_props$widget8 = props.widget) === null || _props$widget8 === void 0 ? void 0 : _props$widget8.TypeCode) == "bar" || ((_props$widget9 = props.widget) === null || _props$widget9 === void 0 ? void 0 : _props$widget9.TypeCode) == "line") {
+  if ((widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "bar" || (widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "line") {
     chart.dataSource = {
       chart: chartinfo,
       categories: buildCategories(seriesMeasures),
@@ -566,27 +546,11 @@ var FusionChart = function FusionChart(props) {
 
   React.useEffect(function () {
     widget.current = props.widget;
-    onRefresh();
     setTimeout(function () {
       RefreshData();
     }, 500);
   }, []);
 
-  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)) return;
-      setDataLoaded(false);
-      widget.current = e;
-      setTimeout(function () {
-        RefreshData();
-      }, 500);
-    });
-  };
-
   var RefreshData = function RefreshData() {
     var dashboardAnalyticsService = new DashboardAnalyticsService();
 
@@ -594,7 +558,7 @@ var FusionChart = function FusionChart(props) {
 
     postWidget.onChange = undefined;
     dashboardAnalyticsService.getData(postWidget).then(function (result) {
-      var chart = BuildFusionChartObject(result.data, props);
+      var chart = BuildFusionChartObject(result.data, widget.current);
       setArgs(chart);
       setDataLoaded(true);
       if (widgetHeight && widgetWidth && fChart) fChart.resizeTo(widgetWidth, widgetHeight);
@@ -659,25 +623,33 @@ var FusionChart = function FusionChart(props) {
 };
 
 var WidgetCard = function WidgetCard(props, state) {
+  var _widget$current2, _widget$current3;
+
   var moreBtnToggle = React.useRef(null);
+  var widget = React.useRef();
 
-  var _useState = React.useState(),
-      widget = _useState[0],
-      setWidget = _useState[1];
+  var _useState = React.useState(false),
+      isLoading = _useState[0],
+      setIsLoading = _useState[1];
 
   var editWidget = function editWidget() {
     var _moreBtnToggle$curren;
 
     (_moreBtnToggle$curren = moreBtnToggle.current) === null || _moreBtnToggle$curren === void 0 ? void 0 : _moreBtnToggle$curren.hide();
-    props.editBtnClicked(widget);
+    props.editBtnClicked(widget.current);
   };
 
   React.useEffect(function () {
     var _props$dataBinding;
 
-    setWidget(props.widget);
+    widget.current = props.widget;
     (_props$dataBinding = props.dataBinding) === null || _props$dataBinding === void 0 ? void 0 : _props$dataBinding.onEditWidget.subscribe(function (e) {
-      setWidget(e);
+      var _widget$current;
+
+      if ((e === null || e === void 0 ? void 0 : e.key) != ((_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.key)) return;
+      setIsLoading(true);
+      widget.current = _extends({}, e);
+      setIsLoading(false);
     });
   }, []);
   return React__default.createElement("div", {
@@ -689,10 +661,10 @@ var WidgetCard = function WidgetCard(props, state) {
   }, React__default.createElement("header", null, React__default.createElement(tooltip.Tooltip, {
     target: ".h-tool-tip"
   }), React__default.createElement("h1", {
-    "data-pr-tooltip": widget === null || widget === void 0 ? void 0 : widget.Title,
+    "data-pr-tooltip": (_widget$current2 = widget.current) === null || _widget$current2 === void 0 ? void 0 : _widget$current2.Title,
     "data-pr-position": "top",
     className: "h-tool-tip"
-  }, widget === null || widget === void 0 ? void 0 : widget.Title), props.isInEditMode ? React__default.createElement(button.Button, {
+  }, (_widget$current3 = widget.current) === null || _widget$current3 === void 0 ? void 0 : _widget$current3.Title), props.isInEditMode ? React__default.createElement(button.Button, {
     icon: "pi pi-ellipsis-v",
     className: "p-button-rounded p-button-text",
     onClick: function onClick(e) {
@@ -723,16 +695,18 @@ var WidgetCard = function WidgetCard(props, state) {
   }, " ", GetChartComponent(), " "));
 
   function GetChartComponent() {
-    if (!(widget !== null && widget !== void 0 && widget.TypeCode)) return null;
-    if ((widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "kpi") return React__default.createElement(CustomChart, {
+    var _widget$current4, _widget$current5;
+
+    if (isLoading || !((_widget$current4 = widget.current) !== null && _widget$current4 !== void 0 && _widget$current4.TypeCode)) return null;
+    if (((_widget$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.TypeCode) == "kpi") return React__default.createElement(CustomChart, {
       dataBinding: props.dataBinding,
-      widget: widget,
+      widget: widget.current,
       widgetRef: props.widgetRef,
       onSelectDataPoint: props.onSelectDataPoint
     });
     return React__default.createElement(FusionChart, {
       dataBinding: props.dataBinding,
-      widget: widget,
+      widget: widget.current,
       widgetRef: props.widgetRef,
       onSelectDataPoint: props.onSelectDataPoint
     });