logitude-dashboard-library 1.4.2 → 1.4.4

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

@@ -129,6 +129,7 @@ $dark-grey: #717585;
     >div {
         box-sizing: border-box;
         border-radius: 7px;
+
     }
 
 }
@@ -469,4 +470,33 @@ $dark-grey: #717585;
     margin-left: 12px;
     margin-right: 12px;
     margin-bottom: 12px;
+}
+
+.dl-kpi-arrow-pic {
+
+    display: inline-block;
+    vertical-align: middle;
+    width: 0;
+    height: 0;
+}
+
+.dl-kpi-arrow-up {
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid greenyellow;
+}
+
+.dl-kpi-arrow-down {
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid red;
+}
+
+.dl-kpi-same-line {
+    display: flex;
+    flex-direction: row;
+}
+
+.dl-kpi-margin {
+    margin-right: 4px;
 }

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { Layouts } from "react-grid-layout";
-import ColumnChartComponent from "./ChartsComponents/ColumnChartComponent";
 import { ReactWidgetPM } from "../../types/widget";
 import { DataPointSelection } from "../../types/SeriesMeasure";
 import { DashboardDataBinding } from "../../types/DashboardDataBinding";
@@ -27,12 +26,4 @@ export declare const layoutGridProps: {
     };
     useCSSTransforms: boolean;
 };
-export declare const WidgetTypes: {
-    Name: string;
-    Disabled: boolean;
-}[];
-export declare const widgetComponents: {
-    type: string;
-    component: typeof ColumnChartComponent;
-}[];
 export default DashboardDesigner;

package/dist/index.js

@@ -3,11 +3,10 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 var reactGridLayout = require('react-grid-layout');
-require('react-apexcharts');
-var axios = _interopDefault(require('axios'));
 var button = require('primereact/button');
 var overlaypanel = require('primereact/overlaypanel');
 var progressspinner = require('primereact/progressspinner');
+var axios = _interopDefault(require('axios'));
 var ReactFC = _interopDefault(require('react-fusioncharts'));
 var FusionCharts = _interopDefault(require('fusioncharts'));
 var Charts = _interopDefault(require('fusioncharts/fusioncharts.charts'));
@@ -203,7 +202,7 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
 }();
 
 var KpiChart = function KpiChart(props) {
-  var _widget$current6, _widget$current7;
+  var _widget$current8;
 
   var _useState = React.useState(false),
       dataLoaded = _useState[0],
@@ -214,32 +213,30 @@ var KpiChart = function KpiChart(props) {
       setError = _useState2[1];
 
   var widget = React.useRef();
-  var widgetRef = React.useRef();
-  var hasDataError = React.useRef(false);
 
   var _useState3 = React.useState(),
       data = _useState3[0],
       setData = _useState3[1];
 
   var _useState4 = React.useState(),
-      setTitle = _useState4[1];
+      arrowColorDirection = _useState4[0],
+      setArrowColorDirection = _useState4[1];
 
-  var _useState5 = React.useState(),
-      arrowColorDirection = _useState5[0],
-      setArrowColorDirection = _useState5[1];
+  var _useState5 = React.useState(false),
+      checkValuesValidity = _useState5[0],
+      setCheckValuesValidity = _useState5[1];
 
   var _useState6 = React.useState(false),
-      checkValuesValidity = _useState6[0],
-      setCheckValuesValidity = _useState6[1];
-
-  var _useState7 = React.useState(false),
-      checkVisibleUnit = _useState7[0],
-      setVisibilityUnit = _useState7[1];
+      checkVisibleUnit = _useState6[0],
+      setVisibilityUnit = _useState6[1];
 
-  var prev = "prev: ";
+  var prev = "";
   React.useEffect(function () {
     widget.current = props.customChartProps.widget;
     onRefresh();
+    setTimeout(function () {
+      RefreshData();
+    }, 500);
   }, []);
 
   var onRefresh = function onRefresh() {
@@ -250,7 +247,7 @@ var KpiChart = function KpiChart(props) {
 
       if (e.key == ((_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.key)) {
         setDataLoaded(false);
-        Tools.Map(e, widget.current);
+        widget.current = e;
         setTimeout(function () {
           RefreshData();
         }, 500);
@@ -258,20 +255,7 @@ var KpiChart = function KpiChart(props) {
     });
   };
 
-  React.useEffect(function () {
-    widgetRef.current = props.customChartProps.widgetRef;
-    setTimeout(function () {
-      RefreshData();
-    }, 500);
-  }, []);
-  React.useEffect(function () {
-    widgetRef.current = props.customChartProps.widgetRef;
-  }, [props.customChartProps.widgetRef]);
-
   var RefreshData = function RefreshData() {
-    var _props$customChartPro2, _props$customChartPro3;
-
-    setTitle(props === null || props === void 0 ? void 0 : (_props$customChartPro2 = props.customChartProps) === null || _props$customChartPro2 === void 0 ? void 0 : (_props$customChartPro3 = _props$customChartPro2.widget) === null || _props$customChartPro3 === void 0 ? void 0 : _props$customChartPro3.Title);
     var dashboardAnalyticsService = new DashboardAnalyticsService();
 
     var postWidget = _extends({}, widget.current);
@@ -293,20 +277,20 @@ var KpiChart = function KpiChart(props) {
   };
 
   var kpiClick = function kpiClick() {
-    var _props$customChartPro4, _props$customChartPro5, _props$customChartPro6, _props$customChartPro7, _props$customChartPro8;
+    var _widget$current2, _widget$current3, _widget$current3$Widg;
 
     var measureFieldId;
-    if ((_props$customChartPro4 = props.customChartProps) !== null && _props$customChartPro4 !== void 0 && (_props$customChartPro5 = _props$customChartPro4.widgetRef) !== null && _props$customChartPro5 !== void 0 && _props$customChartPro5.WidgetMeasures) measureFieldId = (_props$customChartPro6 = props.customChartProps) === null || _props$customChartPro6 === void 0 ? void 0 : (_props$customChartPro7 = _props$customChartPro6.widgetRef) === null || _props$customChartPro7 === void 0 ? void 0 : (_props$customChartPro8 = _props$customChartPro7.WidgetMeasures[0]) === null || _props$customChartPro8 === void 0 ? void 0 : _props$customChartPro8.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;
     props.customChartProps.onSelectDataPoint({
       MeasureFieldId: measureFieldId,
-      Widget: props.customChartProps.widget
+      Widget: widget.current
     });
   };
 
   var setTimeOverTimeImage = function setTimeOverTimeImage(data) {
-    var _widget$current2;
+    var _widget$current4;
 
-    if (!(widget !== null && widget !== void 0 && (_widget$current2 = widget.current) !== null && _widget$current2 !== void 0 && _widget$current2.TimeOverTime)) return;
+    if (!(widget !== null && widget !== void 0 && (_widget$current4 = widget.current) !== null && _widget$current4 !== void 0 && _widget$current4.TimeOverTime)) return;
     var ratio = data === null || data === void 0 ? void 0 : data.Ratio;
     if (!ratio) return;
     if (ratio >= 1) setArrowColorDirection(React__default.createElement("span", {
@@ -317,17 +301,19 @@ var KpiChart = function KpiChart(props) {
   };
 
   var checkValues = function checkValues(data) {
-    var _widget$current3, _widget$current4;
+    var _widget$current5, _widget$current6;
 
-    if (!(widget !== null && widget !== void 0 && (_widget$current3 = widget.current) !== null && _widget$current3 !== void 0 && _widget$current3.TimeOverTime)) return;
-    if (widget !== null && widget !== void 0 && (_widget$current4 = widget.current) !== null && _widget$current4 !== void 0 && _widget$current4.TimeOverTime && (data === null || data === void 0 ? void 0 : data.ComparisonValue) == 0 && (data === null || data === void 0 ? void 0 : data.Value) === 0) return;
+    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;
     setCheckValuesValidity(true);
   };
 
   var checkUnitVisible = function checkUnitVisible(data) {
-    var _widget$current5;
+    var _widget$current7;
 
-    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) return;
+    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;
     setVisibilityUnit(true);
   };
 
@@ -343,23 +329,21 @@ var KpiChart = function KpiChart(props) {
   })) : !error ? React__default.createElement("div", {
     className: "kpIcontainer",
     onClick: kpiClick
-  }, React__default.createElement("div", null, React__default.createElement("td", null, data === null || data === void 0 ? void 0 : data.Value, " "), React__default.createElement("td", {
-    style: {
-      width: '4px'
-    }
-  }, React__default.createElement("div", null)), React__default.createElement("td", null, (data === null || data === void 0 ? void 0 : data.Value) != 0 && (data === null || data === void 0 ? void 0 : data.Unit))), React__default.createElement("div", null, React__default.createElement("td", null, checkValuesValidity && arrowColorDirection), React__default.createElement("td", {
-    style: {
-      width: '4px'
-    }
-  }, React__default.createElement("div", null)), React__default.createElement("td", null, checkValuesValidity && (data === null || data === void 0 ? void 0 : data.Ratio))), React__default.createElement("div", null, React__default.createElement("td", null, (widget === null || widget === void 0 ? void 0 : (_widget$current6 = widget.current) === null || _widget$current6 === void 0 ? void 0 : _widget$current6.TimeOverTime) && prev), React__default.createElement("td", {
-    style: {
-      width: '4px'
-    }
-  }, React__default.createElement("div", null)), React__default.createElement("td", null, (widget === null || widget === void 0 ? void 0 : (_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.TimeOverTime) && (data === null || data === void 0 ? void 0 : data.ComparisonValue)), React__default.createElement("td", {
-    style: {
-      width: '4px'
-    }
-  }, React__default.createElement("div", null)), React__default.createElement("td", null, checkVisibleUnit && (data === null || data === void 0 ? void 0 : data.Unit)))) : React__default.createElement("div", {
+  }, React__default.createElement("div", {
+    className: "dl-kpi-same-line"
+  }, React__default.createElement("div", {
+    className: "dl-kpi-margin"
+  }, data === null || data === void 0 ? void 0 : data.Value, " "), React__default.createElement("div", null, (data === null || data === void 0 ? void 0 : data.Value) != 0 && (data === null || data === void 0 ? void 0 : data.Unit))), checkValuesValidity ? React__default.createElement("div", {
+    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", {
+    className: "dl-kpi-same-line"
+  }, React__default.createElement("div", {
+    className: "dl-kpi-margin"
+  }, prev), React__default.createElement("div", {
+    className: "dl-kpi-margin"
+  }, data === null || data === void 0 ? void 0 : data.ComparisonValue), React__default.createElement("div", null, checkVisibleUnit && (data === null || data === void 0 ? void 0 : data.Unit))) : null) : React__default.createElement("div", {
     className: "dl-flex-content-center dl-full-hight "
   }, React__default.createElement("div", {
     className: "dl-tooltip"
@@ -496,7 +480,7 @@ function buildDataSource(values) {
   data = values[0].SeriesMeasureVulues.map(function (e) {
     return {
       value: e.Value,
-      label: e.Label.substring(0, 20),
+      label: getTrimedLabelText(e.Label),
       id: {
         GroupById: e.GroupById,
         MeasureFieldId: values[0].MeasureFieldId
@@ -507,6 +491,11 @@ function buildDataSource(values) {
   return data;
 }
 
+function getTrimedLabelText(label) {
+  if (!label || label.length <= 20) return label;
+  return label.substring(0, 17) + "...";
+}
+
 function buildDataSet(seriesMeasures) {
   var dataSet = [];
   seriesMeasures.forEach(function (seriesMeasure) {
@@ -591,7 +580,7 @@ var FusionChart = function FusionChart(props) {
 
       if (e.key != ((_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.key)) return;
       setDataLoaded(false);
-      Tools.Map(e, widget.current);
+      widget.current = e;
       setTimeout(function () {
         RefreshData();
       }, 500);
@@ -670,17 +659,27 @@ var FusionChart = function FusionChart(props) {
 };
 
 var WidgetCard = function WidgetCard(props, state) {
-  var _props$widget, _props$widget2, _props$widget4;
-
   var moreBtnToggle = React.useRef(null);
 
+  var _useState = React.useState(),
+      widget = _useState[0],
+      setWidget = _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(props.widget);
+    props.editBtnClicked(widget);
   };
 
+  React.useEffect(function () {
+    var _props$dataBinding;
+
+    setWidget(props.widget);
+    (_props$dataBinding = props.dataBinding) === null || _props$dataBinding === void 0 ? void 0 : _props$dataBinding.onEditWidget.subscribe(function (e) {
+      setWidget(e);
+    });
+  }, []);
   return React__default.createElement("div", {
     className: "panel",
     key: props.el.i,
@@ -690,10 +689,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": (_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.Title,
+    "data-pr-tooltip": widget === null || widget === void 0 ? void 0 : widget.Title,
     "data-pr-position": "top",
     className: "h-tool-tip"
-  }, (_props$widget2 = props.widget) === null || _props$widget2 === void 0 ? void 0 : _props$widget2.Title), props.isInEditMode ? React__default.createElement(button.Button, {
+  }, widget === null || widget === void 0 ? void 0 : widget.Title), props.isInEditMode ? React__default.createElement(button.Button, {
     icon: "pi pi-ellipsis-v",
     className: "p-button-rounded p-button-text",
     onClick: function onClick(e) {
@@ -713,25 +712,31 @@ var WidgetCard = function WidgetCard(props, state) {
     onClick: editWidget
   }, " Edit "), React__default.createElement("div", {
     onClick: function onClick() {
-      var _props$widget3;
+      var _props$widget;
 
-      return props.deleteBtnClicked((_props$widget3 = props.widget) === null || _props$widget3 === void 0 ? void 0 : _props$widget3.key);
+      return props.deleteBtnClicked((_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.key);
     }
   }, "Remove")))), React__default.createElement("div", {
     className: "dl-line"
   }), React__default.createElement("div", {
     className: "dl-dashboard-widget"
-  }, (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
-  })));
+  }, " ", 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, {
+      dataBinding: props.dataBinding,
+      widget: widget,
+      widgetRef: props.widgetRef,
+      onSelectDataPoint: props.onSelectDataPoint
+    });
+    return React__default.createElement(FusionChart, {
+      dataBinding: props.dataBinding,
+      widget: widget,
+      widgetRef: props.widgetRef,
+      onSelectDataPoint: props.onSelectDataPoint
+    });
+  }
 };
 
 function deepClone(obj) {