logitude-dashboard-library 1.2.75 → 1.2.78

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

@@ -28,17 +28,55 @@ $dark-grey: #717585;
     justify-content: space-between;
 
 }
-.dl-flex-row{
+
+.dl-flex-row {
     display: flex;
-    
+
     flex-direction: row;
 }
-.dl-flex-row-end{
+
+.dl-flex-row-end {
     display: flex;
     justify-content: flex-end;
 
 }
-.dl-title-1{
+
+.dl-flex-content-center {
+    display: flex;
+    align-content: center;
+    align-items: center;
+
+}
+
+.spinner-custome {
+
+    @keyframes p-progress-spinner-color {
+
+        100%,
+        0% {
+            stroke: #6EB2D6;
+        }
+
+        40% {
+            stroke: #6EB2D6;
+        }
+
+        66% {
+            stroke: #6EB2D6;
+        }
+
+        80%,
+        90% {
+            stroke :#6EB2D6;
+        }
+    }
+
+}
+
+
+
+
+.dl-title-1 {
     text-transform: capitalize;
     font-size: 20px;
     font-family: "Roboto Flex";
@@ -49,14 +87,15 @@ $dark-grey: #717585;
     font-weight: bolder;
     padding: 0px 0px 0 13px;
 }
-.dl-heder-row{
+
+.dl-heder-row {
     width: 100%;
     display: flex;
     padding: 0px 11px;
     flex-direction: row-reverse;
 }
 
-.dl-full-hight{
+.dl-full-hight {
     height: 100%;
 }
 
@@ -74,6 +113,7 @@ $dark-grey: #717585;
     }
 
 }
+
 .dl-grid-container {
     position: relative;
 
@@ -83,19 +123,20 @@ $dark-grey: #717585;
         width: 100%;
     }
 }
-.dl-custom-btn{
-    .p-button.p-button-lg{
-        
-    }
+
+.dl-custom-btn {
+    .p-button.p-button-lg {}
 }
-.dl-relativ-container{
-    
+
+.dl-relativ-container {
+
     position: relative;
     width: 100%;
     height: 100%;
 
 }
-.dl-scroll-container{
+
+.dl-scroll-container {
     position: absolute;
     left: 0;
     top: 0;
@@ -104,7 +145,7 @@ $dark-grey: #717585;
     overflow-y: scroll;
 }
 
-.dl-flex-stretch{
+.dl-flex-stretch {
     height: 100%;
     flex-direction: row;
     box-sizing: border-box;
@@ -118,27 +159,27 @@ $dark-grey: #717585;
     display: flex;
     flex-flow: column;
     height: 100%;
-  }
-  
+}
+
+
 
-  
-  .dl-box .dl-row.dl-header {
+.dl-box .dl-row.dl-header {
     flex: 0 1 auto;
     /* The above is shorthand for:
     flex-grow: 0,
     flex-shrink: 1,
     flex-basis: auto
     */
-  }
-  
-  .dl-box .dl-row.dl-content {
+}
+
+.dl-box .dl-row.dl-content {
     flex: 1 1 auto;
     overflow-y: scroll;
-  }
-  
-  .dl-box .dl-row.dl-footer {
+}
+
+.dl-box .dl-row.dl-footer {
     flex: 0 1 40px;
-  }
+}
 
 
 
@@ -266,7 +307,7 @@ $dark-grey: #717585;
     height: calc(100% - 40px);
     box-sizing: border-box;
 
-    
+
 }
 
 
@@ -294,25 +335,27 @@ $dark-grey: #717585;
     display: none;
 }
 
-.dl-dashboard-add{
+.dl-dashboard-add {
     //height: 40px !important;
     margin: 3px 3px 0px 8px !important;
     //width: 40px !important ;
 }
 
-.dl-card{
+.dl-card {
     border-radius: 19px;
     background-color: #f5f6fb;
     padding: 6px 0px 0px 0px;
     margin: 0px 0px 10px 0px;
 }
 
-.dl-m-t-s{
+.dl-m-t-s {
     margin-top: 10px;
 }
-.dl-m-r-s{
+
+.dl-m-r-s {
     margin-right: 10px;
 }
-.dl-m-t-8{
+
+.dl-m-t-8 {
     margin-top: 8px;
 }

package/dist/index.js

@@ -7,6 +7,7 @@ var reactGridLayout = require('react-grid-layout');
 var ReactApexChart = _interopDefault(require('react-apexcharts'));
 var axios = _interopDefault(require('axios'));
 var overlaypanel = require('primereact/overlaypanel');
+var progressspinner = require('primereact/progressspinner');
 var dropdown = require('primereact/dropdown');
 var dialog = require('primereact/dialog');
 var ripple = require('primereact/ripple');
@@ -129,21 +130,40 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
 var ApexChart = function ApexChart(props) {
   var _props$widget, _props$widget2, _props$widget3, _props$widget5;
 
-  var _useState = React.useState({
+  var _useState = React.useState(false),
+      isView = _useState[0],
+      setisView = _useState[1];
+
+  var isDataLoaded = React.useRef(false);
+
+  var _useState2 = React.useState({
     series: [],
     options: {}
   }),
-      args = _useState[0],
-      serArgs = _useState[1];
+      args = _useState2[0],
+      serArgs = _useState2[1];
 
+  var isLoadingDrow = React.useRef(true);
+  React.useEffect(function () {
+    setTimeout(function () {
+      isLoadingDrow.current = false;
+      updateView();
+    }, 500);
+  }, []);
   React.useEffect(function () {
     console.log('useEffect ApexChart', props.widget);
     var dashboardAnalyticsService = new DashboardAnalyticsService();
     dashboardAnalyticsService.getData(props.widget).then(function (result) {
       var data = getChartOptions(result.data);
       serArgs(data);
+      isDataLoaded.current = true;
+      updateView();
     });
-  }, [props.widget, (_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.EntityId, (_props$widget2 = props.widget) === null || _props$widget2 === void 0 ? void 0 : _props$widget2.Filters, (_props$widget3 = props.widget) === null || _props$widget3 === void 0 ? void 0 : _props$widget3.WidgetMeasures]);
+  }, [(_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.EntityId, (_props$widget2 = props.widget) === null || _props$widget2 === void 0 ? void 0 : _props$widget2.Filters, (_props$widget3 = props.widget) === null || _props$widget3 === void 0 ? void 0 : _props$widget3.WidgetMeasures]);
+
+  var updateView = function updateView() {
+    if (isDataLoaded.current && !isLoadingDrow.current) setisView(true);
+  };
 
   var lineOptoins = function lineOptoins(values) {
     var series = [];
@@ -296,12 +316,18 @@ var ApexChart = function ApexChart(props) {
       });
     }
 
-    return {
+    var result = {
       series: series,
       options: {
         chart: {
           width: 380,
-          type: 'donut'
+          type: 'donut',
+          events: {
+            markerClick: markerClick,
+            legendClick: legendClick,
+            click: chartClick,
+            dataPointSelection: dataPointSelection
+          }
         },
         dataLabels: {
           enabled: false
@@ -325,6 +351,7 @@ var ApexChart = function ApexChart(props) {
         labels: labels
       }
     };
+    return result;
   };
 
   var handelNullLabels = function handelNullLabels(values) {
@@ -335,6 +362,22 @@ var ApexChart = function ApexChart(props) {
     });
   };
 
+  var markerClick = function markerClick(e, chart, options) {
+    console.log('markerClick e: any, chart?: any, options?: any', e, chart, options);
+  };
+
+  var chartClick = function chartClick(e, chart, options) {
+    console.log('chartClick e: any, chart?: any, options?: any', e, chart, options);
+  };
+
+  var legendClick = function legendClick(chart, seriesIndex, options) {
+    console.log('legendClick chart: any, seriesIndex?: number, options?: any', chart, seriesIndex, options);
+  };
+
+  var dataPointSelection = function dataPointSelection(e, chart, options) {
+    console.log('dataPointSelection e: any, chart?: any, options?: any', e, chart, options);
+  };
+
   var getChartOptions = function getChartOptions(values) {
     var _props$widget4;
 
@@ -357,13 +400,22 @@ var ApexChart = function ApexChart(props) {
     return barOptoins(values);
   };
 
-  return React__default.createElement(ReactApexChart, {
+  return isView ? React__default.createElement(ReactApexChart, {
     options: args === null || args === void 0 ? void 0 : args.options,
     series: args === null || args === void 0 ? void 0 : args.series,
     type: (_props$widget5 = props.widget) === null || _props$widget5 === void 0 ? void 0 : _props$widget5.TypeCode,
     height: "100%",
     width: "100%"
-  });
+  }) : 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"
+  }));
 };
 
 var WidgetCard = function WidgetCard(props, state) {
@@ -371,16 +423,6 @@ var WidgetCard = function WidgetCard(props, state) {
 
   var moreBtnToggle = React.useRef(null);
 
-  var _useState = React.useState(true),
-      loading = _useState[0],
-      setLoading = _useState[1];
-
-  React.useEffect(function () {
-    setTimeout(function () {
-      setLoading(false);
-    }, 500);
-  }, []);
-
   var editWidget = function editWidget() {
     var _moreBtnToggle$curren;
 
@@ -414,7 +456,7 @@ var WidgetCard = function WidgetCard(props, state) {
     }
   }, "Remove")))), React__default.createElement("div", {
     className: "dl-dashboard-widget"
-  }, loading ? null : React__default.createElement(ApexChart, {
+  }, React__default.createElement(ApexChart, {
     widget: props.widget
   })));
 };
@@ -458,7 +500,6 @@ var DashboardDesigner = function DashboardDesigner(props) {
 
   React.useEffect(function () {
     setFirstChange(true);
-    console.log('useEffect setLayouts');
     setLayouts({});
     setLayouts(createLayout());
     setWidgets(props.dashboardLayouts);
@@ -478,11 +519,10 @@ var DashboardDesigner = function DashboardDesigner(props) {
 
   React.useEffect(function () {
     setisInEditMode(props.editMode);
+    console.log(' setisInEditMode(props.editMode);');
   }, [props.editMode]);
 
   function _onLayoutChange(layout, changedLayouts) {
-    console.log(layout, layouts);
-
     if (firstChange) {
       setFirstChange(false);
       return;
@@ -494,7 +534,6 @@ var DashboardDesigner = function DashboardDesigner(props) {
   }
 
   function deletePanel(id) {
-    console.log('deletePanel(id)', id);
     var newLayouts = {
       lg: layouts.lg.filter(function (e) {
         return e.i != id;
@@ -518,7 +557,6 @@ var DashboardDesigner = function DashboardDesigner(props) {
   function UpdatePlaceholderDimensions() {
     var _gridLayout$;
 
-    console.log('UpdatePlaceholderDimensions', layouts);
     var gridLayout = document.getElementsByClassName('react-grid-layout');
     if (!gridLayout) return;
     var gridElementHeight = (_gridLayout$ = gridLayout[0]) === null || _gridLayout$ === void 0 ? void 0 : _gridLayout$.clientHeight;
@@ -539,7 +577,7 @@ var DashboardDesigner = function DashboardDesigner(props) {
     className: "dl-grid-container"
   }, React__default.createElement("div", {
     className: "dl-grid dl-grid--bordered"
-  }, props.editMode ? placeholderRowsArray.map(function (e, i) {
+  }, isInEditMode ? placeholderRowsArray.map(function (e, i) {
     return array12.map(function (e, i) {
       return React__default.createElement("div", {
         key: i,
@@ -548,7 +586,7 @@ var DashboardDesigner = function DashboardDesigner(props) {
         }
       });
     });
-  }) : null), React__default.createElement(ResponsiveReactGridLayout, Object.assign({}, layoutGridProps, {
+  }) : React__default.createElement("div", null, "no layout")), React__default.createElement(ResponsiveReactGridLayout, Object.assign({}, layoutGridProps, {
     layouts: layouts,
     compactType: "vertical",
     isDraggable: isInEditMode,