logitude-dashboard-library 1.2.87 → 1.2.90

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

@@ -378,6 +378,9 @@ $dark-grey: #717585;
     margin: 4px 0;
     width: max-content;
     z-index: 1;
+    max-width: 400px;
+    white-space: pre-wrap;
+
   }
   
   .dl-tooltip:hover .dl-tooltiptext {

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

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { ReactWidgetPM } from "../../../types/widget";
+import { DataPointSelection } from '../../../types/SeriesMeasure';
 declare type ApexChartProps = {
     widget: ReactWidgetPM | null;
+    onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
 };
 declare const ApexChart: (props: ApexChartProps) => JSX.Element;
 export declare type ApexChartArgs = {

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

@@ -2,6 +2,7 @@
 import { Layouts } from "react-grid-layout";
 import ColumnChartComponent from "./ChartsComponents/ColumnChartComponent";
 import { ReactWidgetPM } from "../../types/widget";
+import { DataPointSelection } from "../../types/SeriesMeasure";
 declare type DashboardDesignerProps = {
     editMode: boolean;
     dashboardLayouts: {
@@ -9,6 +10,7 @@ declare type DashboardDesignerProps = {
     };
     openEditWidget: (widget: ReactWidgetPM) => void;
     onLayoutChange: (layouts: Layouts) => void;
+    onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
 };
 declare const DashboardDesigner: (props: DashboardDesignerProps) => JSX.Element;
 export declare const layoutGridProps: {

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { DataPointSelection } from "../../types/SeriesMeasure";
 import { ReactWidgetPM } from "../../types/widget";
 declare type WidgetCardProps = {
     editBtnClicked(widget: any): any;
@@ -7,6 +8,7 @@ declare type WidgetCardProps = {
     el: any;
     dateFilter: any;
     isInEditMode: boolean;
+    onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
 };
 declare const WidgetCard: (props: WidgetCardProps, state: any) => JSX.Element;
 export default WidgetCard;

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import "./styles.module.css";
 import { ReactDashboardPM } from './types/Dashboard';
 import { ReactWidgetPM } from './types/widget';
 import { DashboardDataBinding } from './types/DashboardDataBinding';
+import { DataPointSelection } from './types/SeriesMeasure';
 declare type DashboardProps = {
     token: string;
     tenant: number;
@@ -12,6 +13,7 @@ declare type DashboardProps = {
     openAddEditDashboard: (dashboard: ReactDashboardPM | undefined) => void;
     onChangeDashboard: (dashboard: ReactDashboardPM | undefined) => void;
     onSaveDashboard: (dashboard: ReactDashboardPM | undefined) => void;
+    onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
 };
 declare const Dashboard: (props: DashboardProps) => JSX.Element;
 export default Dashboard;

package/dist/index.js

@@ -13,6 +13,44 @@ var dialog = require('primereact/dialog');
 var ripple = require('primereact/ripple');
 var uuid = require('uuid');
 
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
 var Tools = /*#__PURE__*/function () {
   function Tools() {}
 
@@ -134,23 +172,31 @@ var ApexChart = function ApexChart(props) {
       error = _useState[0],
       setEror = _useState[1];
 
-  var _useState2 = React.useState(false),
-      isView = _useState2[0],
-      setisView = _useState2[1];
+  var _useState2 = React.useState([]),
+      MeasuresIds = _useState2[0],
+      setMeasuresIds = _useState2[1];
+
+  var _useState3 = React.useState([]),
+      GroupByIds = _useState3[0],
+      setGroupByIds = _useState3[1];
 
-  var _useState3 = React.useState(false),
-      viewError = _useState3[0],
-      setViewError = _useState3[1];
+  var _useState4 = React.useState(false),
+      isView = _useState4[0],
+      setisView = _useState4[1];
+
+  var _useState5 = React.useState(false),
+      viewError = _useState5[0],
+      setViewError = _useState5[1];
 
   var isDataLoaded = React.useRef(false);
   var hasDataError = React.useRef(false);
 
-  var _useState4 = React.useState({
+  var _useState6 = React.useState({
     series: [],
     options: {}
   }),
-      args = _useState4[0],
-      serArgs = _useState4[1];
+      args = _useState6[0],
+      serArgs = _useState6[1];
 
   var isLoadingDrow = React.useRef(true);
   React.useEffect(function () {
@@ -163,19 +209,46 @@ var ApexChart = function ApexChart(props) {
     console.log('useEffect ApexChart', props.widget);
     var dashboardAnalyticsService = new DashboardAnalyticsService();
     dashboardAnalyticsService.getData(props.widget).then(function (result) {
+      fillIds(result.data);
       var data = getChartOptions(result.data);
       serArgs(data);
       isDataLoaded.current = true;
       hasDataError.current = false;
       updateView();
     }, function (error) {
+      var _error$response, _error$response$data, _error$response2, _error$response2$data;
+
       console.log('error', error);
-      setEror(error.message);
+      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;
     });
   }, [(_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 fillIds = function fillIds(datas) {
+    var measuresIds = [];
+    var groupByIds = [];
+
+    for (var _iterator = _createForOfIteratorHelperLoose(datas), _step; !(_step = _iterator()).done;) {
+      var seriesMeasure = _step.value;
+      measuresIds.push(seriesMeasure.MeasureId);
+    }
+
+    for (var _iterator2 = _createForOfIteratorHelperLoose(datas), _step2; !(_step2 = _iterator2()).done;) {
+      var _seriesMeasure = _step2.value;
+
+      for (var _iterator3 = _createForOfIteratorHelperLoose(_seriesMeasure.SeriesMeasureVulues), _step3; !(_step3 = _iterator3()).done;) {
+        var vulue = _step3.value;
+        groupByIds.push(vulue.GroupById);
+      }
+
+      break;
+    }
+
+    setMeasuresIds(measuresIds);
+    setGroupByIds(groupByIds);
+  };
+
   var updateView = function updateView() {
     if (isDataLoaded.current && !isLoadingDrow.current && !hasDataError.current) {
       setisView(true);
@@ -193,9 +266,6 @@ var ApexChart = function ApexChart(props) {
     var categories = [];
 
     if (values && values[0]) {
-      var s = values[0].SeriesMeasureVulues.map(function (z) {
-        return z.Value;
-      });
       series = values.map(function (e) {
         return {
           data: e.SeriesMeasureVulues.map(function (z) {
@@ -216,6 +286,9 @@ var ApexChart = function ApexChart(props) {
           type: 'line',
           zoom: {
             enabled: false
+          },
+          events: {
+            click: dataPointSelection
           }
         },
         dataLabels: {
@@ -248,9 +321,6 @@ var ApexChart = function ApexChart(props) {
     var categories = [];
 
     if (values && values[0]) {
-      var s = values[0].SeriesMeasureVulues.map(function (z) {
-        return z.Value;
-      });
       series = values.map(function (e) {
         return {
           data: e.SeriesMeasureVulues.map(function (z) {
@@ -268,7 +338,10 @@ var ApexChart = function ApexChart(props) {
       options: {
         chart: {
           type: 'bar',
-          height: 430
+          height: 430,
+          events: {
+            dataPointSelection: dataPointSelection
+          }
         },
         plotOptions: {
           bar: {
@@ -319,7 +392,10 @@ var ApexChart = function ApexChart(props) {
       series: series,
       options: {
         chart: {
-          type: 'pie'
+          type: 'pie',
+          events: {
+            dataPointSelection: dataPointSelection
+          }
         },
         labels: labels
       }
@@ -346,9 +422,6 @@ var ApexChart = function ApexChart(props) {
           width: 380,
           type: 'donut',
           events: {
-            markerClick: markerClick,
-            legendClick: legendClick,
-            click: chartClick,
             dataPointSelection: dataPointSelection
           }
         },
@@ -385,20 +458,11 @@ 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);
+    props.onSelectDataPoint({
+      GroupById: GroupByIds[options.dataPointIndex],
+      MeasureId: MeasuresIds[options.seriesIndex]
+    });
   };
 
   var getChartOptions = function getChartOptions(values) {
@@ -489,7 +553,8 @@ var WidgetCard = function WidgetCard(props, state) {
   }, "Remove")))), React__default.createElement("div", {
     className: "dl-dashboard-widget"
   }, React__default.createElement(ApexChart, {
-    widget: props.widget
+    widget: props.widget,
+    onSelectDataPoint: props.onSelectDataPoint
   })));
 };
 
@@ -644,7 +709,8 @@ var DashboardDesigner = function DashboardDesigner(props) {
       el: widget,
       dateFilter: dateFilter,
       editBtnClicked: editWidget,
-      deleteBtnClicked: deletePanel
+      deleteBtnClicked: deletePanel,
+      onSelectDataPoint: props.onSelectDataPoint
     }));
   }))))));
 };
@@ -1035,6 +1101,7 @@ var Dashboard = function Dashboard(props) {
   }))) : null)), React.createElement("div", {
     className: 'dl-dashboard-body'
   }, React.createElement(DashboardDesigner, {
+    onSelectDataPoint: props.onSelectDataPoint,
     editMode: isInEditMode,
     onLayoutChange: updateWidgets,
     dashboardLayouts: layouts,