logitude-dashboard-library 3.1.43 → 3.1.44

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

@@ -811,6 +811,36 @@ $dark-grey: #717585;
     align-items: flex-start;
 }
 
+.dl-pivot-chart-container {
+    overflow: auto;
+    position: absolute;
+    top: -1px;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    height: calc(100% - 10px);
+    width: 100%;
+    margin: 0 auto;
+
+    &::-webkit-scrollbar {
+        width: 10px;
+        height: 10px
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border: 1px solid rgba(0, 0, 0, 0);
+        background-clip: padding-box;
+        border-radius: 9999px;
+        background-color: #D9D9D9;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: #F3F3F3;
+        border: 1px solid white;
+        border-radius: 9999px;
+    }
+}
+
 .dl-table-chart-container {
     overflow: auto;
     position: absolute;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CustomChartProps } from './CustomChart';
+declare type PivotChartProps = {
+    customChartProps: CustomChartProps;
+};
+declare const PivotTable: (props: PivotChartProps) => React.JSX.Element;
+export default PivotTable;

package/dist/index.js

@@ -9,6 +9,9 @@ var moment = _interopDefault(require('moment'));
 var uuid = require('uuid');
 var datatable = require('primereact/datatable');
 var column = require('primereact/column');
+var PivotGrid = require('devextreme-react/pivot-grid');
+var PivotGrid__default = _interopDefault(PivotGrid);
+var CustomStore = _interopDefault(require('devextreme/data/custom_store'));
 var ReactFC = _interopDefault(require('react-fusioncharts'));
 var FusionCharts = _interopDefault(require('fusioncharts'));
 var Charts = _interopDefault(require('fusioncharts/fusioncharts.charts'));
@@ -232,6 +235,10 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
     return this._ApiServices.get("/api/analyticsfactsmetadatas/getsingle?id=" + entityId);
   };
 
+  _proto.getPivotData = function getPivotData(widget) {
+    return this._ApiServices.post("/api/DashboardAnalytics/PostGetPivotData", widget);
+  };
+
   return DashboardAnalyticsService;
 }();
 
@@ -1476,8 +1483,123 @@ var TableChart = function TableChart(props) {
   }));
 };
 
+var PivotTable = function PivotTable(props) {
+  var pivotGridRef = React.useRef(null);
+  var tabledata = React.useRef();
+  var customizeCells = React.useCallback(function (e) {
+    if (e.cell.rowPath && e.cell.rowPath[0] === "Germany" && e.cell.columnPath && e.cell.columnPath[0] === "Export" && e.cell.columnPath[1] === "Air") {
+      e.cellElement.children[0].style.padding = "6px";
+      e.cellElement.children[0].style.borderRadius = "6px";
+      e.cellElement.children[0].style.backgroundColor = "#f4433673";
+    }
+
+    if (e.cell.rowPath && e.cell.rowPath[0] === "USA" && e.cell.columnPath && e.cell.columnPath[0] === "Import" && e.cell.columnPath[1] === "Inland") {
+      e.cellElement.children[0].style.padding = "6px";
+      e.cellElement.children[0].style.borderRadius = "6px";
+      e.cellElement.children[0].style.backgroundColor = "#03a9f4ad";
+    }
+  }, []);
+  var onCellClick = React.useCallback(function (e) {
+    if (e.area === 'data') {
+      console.log("Pivot Cell Data", e);
+    }
+  }, []);
+
+  var getColumnNameByColumnId = function getColumnNameByColumnId(fieldName, dataField, datafieldValue) {
+    var data = tabledata.current.PivotData.find(function (el) {
+      return el[dataField] == datafieldValue;
+    });
+    return data ? data[fieldName] : '---';
+  };
+
+  var setPivotDataSourceFields = function setPivotDataSourceFields() {
+    if (tabledata.current && tabledata.current.PivoFields && tabledata.current.PivotMeasures) {
+      var _pivotGridRef$current;
+
+      var pivotRowsAndColumnsFields = tabledata.current.PivoFields.map(function (field) {
+        return {
+          dataField: field.PivotCode,
+          caption: field.DisplayName,
+          name: field.PivotName,
+          width: 150,
+          allowSorting: false,
+          allowFiltering: false,
+          area: field.PivotCode && field.PivotCode.includes('Row') ? 'row' : 'column',
+          expanded: true,
+          customizeText: function customizeText(cellInfo) {
+            return getColumnNameByColumnId(field.PivotName, field.PivotCode, cellInfo.value);
+          }
+        };
+      });
+      var pivotDataCellsFields = tabledata.current.PivotMeasures.map(function (measure) {
+        return {
+          dataField: measure.PivotMeasureCode,
+          dataType: 'string',
+          area: 'data',
+          caption: measure.DisplayName
+        };
+      });
+      var fakeCellDataObject = {
+        dataField: '',
+        dataType: 'string',
+        area: 'data',
+        caption: "",
+        visible: false
+      };
+      pivotDataCellsFields.push(fakeCellDataObject);
+      var AllfieldsData = [].concat(pivotRowsAndColumnsFields, pivotDataCellsFields);
+      (_pivotGridRef$current = pivotGridRef.current) === null || _pivotGridRef$current === void 0 ? void 0 : _pivotGridRef$current.instance.getDataSource().fields(AllfieldsData);
+    }
+  };
+
+  var dataStore = new CustomStore({
+    load: function load() {
+      var dashboardAnalyticsService = new DashboardAnalyticsService();
+      return dashboardAnalyticsService.getPivotData(props.customChartProps.widget).then(function (res) {
+        tabledata.current = res.data;
+        setPivotDataSourceFields();
+        return [].concat(res.data.PivotData);
+      })["catch"](function (err) {
+        return console.log("Error while Getting Pivot Table Data: ", err);
+      });
+    }
+  });
+  var dataSource = {
+    store: dataStore,
+    fields: []
+  };
+  return React__default.createElement(PivotGrid__default, {
+    ref: pivotGridRef,
+    id: "pivotGridId",
+    dataSource: dataSource,
+    allowExpandAll: true,
+    showBorders: true,
+    width: "100%",
+    style: {
+      margin: "0 auto"
+    },
+    onCellClick: onCellClick,
+    showRowGrandTotals: false,
+    showColumnGrandTotals: false,
+    showRowTotals: false,
+    showColumnTotals: false
+  }, React__default.createElement(PivotGrid.FieldPanel, {
+    showColumnFields: false,
+    showDataFields: false,
+    showFilterFields: false,
+    showRowFields: true,
+    allowFieldDragging: false,
+    visible: true
+  }), React__default.createElement(PivotGrid.FieldChooser, {
+    enabled: false
+  }), React__default.createElement(PivotGrid.Scrolling, {
+    mode: "virtual",
+    useNative: true
+  }));
+};
+
 var CustomChart = function CustomChart(props) {
-  var _props$widget2;
+  var _props$widget2, _props$widget3;
 
   var project = function project() {
     var _props$widget;
@@ -1493,13 +1615,18 @@ var CustomChart = function CustomChart(props) {
           customChartProps: props
         });
 
+      case "pivot":
+        return React__default.createElement(PivotTable, {
+          customChartProps: props
+        });
+
       default:
         return React__default.createElement("div", null, "Invalid Type");
     }
   };
 
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: props.widget && ((_props$widget2 = props.widget) === null || _props$widget2 === void 0 ? void 0 : _props$widget2.TypeCode) == 'table' ? "dl-custom-chart-container dl-table-chart-container" : "dl-custom-chart-container"
+    className: "dl-custom-chart-container " + (props.widget && ((_props$widget2 = props.widget) === null || _props$widget2 === void 0 ? void 0 : _props$widget2.TypeCode) == 'table' ? 'dl-table-chart-container' : '') + " " + (props.widget && ((_props$widget3 = props.widget) === null || _props$widget3 === void 0 ? void 0 : _props$widget3.TypeCode) == 'pivot' ? 'dl-pivot-chart-container' : '')
   }, project()));
 };
 
@@ -2837,7 +2964,7 @@ var FusionChart$1 = React.forwardRef(function (props, comRef) {
 });
 
 var WidgetCard = React.forwardRef(function (props, comRef) {
-  var _widget$current12, _widget$current13, _widget$current14;
+  var _widget$current13, _widget$current14, _widget$current15;
 
   var widget = React.useRef();
 
@@ -2906,18 +3033,18 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
   };
 
   var GetChartComponent = function GetChartComponent() {
-    var _widget$current4, _widget$current5, _widget$current6, _widget$current7;
+    var _widget$current4, _widget$current5, _widget$current6, _widget$current7, _widget$current8;
 
     if (isLoading || !((_widget$current4 = widget.current) !== null && _widget$current4 !== void 0 && _widget$current4.TypeCode)) return "";
-    if (((_widget$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.TypeCode) == "kpi" || ((_widget$current6 = widget.current) === null || _widget$current6 === void 0 ? void 0 : _widget$current6.TypeCode) == "table") return React__default.createElement(CustomChart, {
-      isInEditMode: props.isInEditMode,
+    if (((_widget$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.TypeCode) == "kpi" || ((_widget$current6 = widget.current) === null || _widget$current6 === void 0 ? void 0 : _widget$current6.TypeCode) == "table" || ((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.TypeCode) == "pivot") return React__default.createElement(CustomChart, {
+      isInEditMode: false,
       isPreviewModeActive: props.isPreviewModeActive,
       dataBinding: props.dataBinding,
       widget: widget.current,
       widgetRef: props.widgetRef,
       onSelectDataPoint: props.onSelectDataPoint
     });
-    if (((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.TypeCode) == "gauge") return React__default.createElement(FusionChart$1, {
+    if (((_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.TypeCode) == "gauge") return React__default.createElement(FusionChart$1, {
       ref: fusionChartRef,
       dataBinding: props.dataBinding,
       widget: widget.current,
@@ -2937,8 +3064,12 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     return widget && widget.current && widget.current.TypeCode == 'table';
   };
 
+  var isTableOrPivotWidget = function isTableOrPivotWidget() {
+    return widget && widget.current && (widget.current.TypeCode == 'table' || widget.current.TypeCode == 'pivot');
+  };
+
   var getwidgetTitlesContainer = function getwidgetTitlesContainer() {
-    return isTableWidget() ? "widget-table-titles-container" : "widget-titles-container";
+    return isTableOrPivotWidget() ? "widget-table-titles-container" : "widget-titles-container";
   };
 
   var drilldownToTableData = function drilldownToTableData() {
@@ -2953,21 +3084,21 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
   };
 
   var isThereTitle = function isThereTitle() {
-    var _widget$current8, _widget$current9;
+    var _widget$current9, _widget$current10;
 
-    return ((_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.Title) && ((_widget$current9 = widget.current) === null || _widget$current9 === void 0 ? void 0 : _widget$current9.Title.length) > 0;
+    return ((_widget$current9 = widget.current) === null || _widget$current9 === void 0 ? void 0 : _widget$current9.Title) && ((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.Title.length) > 0;
   };
 
   var isThereSubtitle = function isThereSubtitle() {
-    var _widget$current10, _widget$current11;
+    var _widget$current11, _widget$current12;
 
-    return ((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.Subtitle) && ((_widget$current11 = widget.current) === null || _widget$current11 === void 0 ? void 0 : _widget$current11.Subtitle.length) > 0;
+    return ((_widget$current11 = widget.current) === null || _widget$current11 === void 0 ? void 0 : _widget$current11.Subtitle) && ((_widget$current12 = widget.current) === null || _widget$current12 === void 0 ? void 0 : _widget$current12.Subtitle.length) > 0;
   };
 
   var tableHintMessage = function tableHintMessage() {
     return React__default.createElement("span", {
       className: "table-hint-container " + (isTitleAligmentRight() ? "padding-left-12" : "")
-    }, React__default.createElement("span", null, "Showing the first 100 rows"), !props.isInEditMode && !props.isPreviewModeActive && React__default.createElement(React__default.Fragment, null, React__default.createElement("span", null, "("), React__default.createElement("span", {
+    }, React__default.createElement("span", null, "Showing the first 100 rows"), !props.isInEditMode && !props.isPreviewModeActive && isTableWidget() && React__default.createElement(React__default.Fragment, null, React__default.createElement("span", null, "("), React__default.createElement("span", {
       onClick: drilldownToTableData,
       className: "show-more-records"
     }, " Show More Records "), React__default.createElement("span", null, ")")));
@@ -2984,11 +3115,11 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     key: triggerId,
     className: "widget-header"
   }, React__default.createElement("div", {
-    className: "header-contents " + (isTableWidget() ? "border-bottom-light-white" : "")
-  }, isTitleAligmentRight() && isTableWidget() && tableHintMessage(), React__default.createElement("div", {
+    className: "header-contents " + (isTableOrPivotWidget() ? "border-bottom-light-white" : "")
+  }, isTitleAligmentRight() && isTableOrPivotWidget() && tableHintMessage(), React__default.createElement("div", {
     style: {
       cursor: props.isInEditMode ? "move" : "default",
-      justifyContent: isTableWidget() ? getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined) : undefined,
+      justifyContent: isTableOrPivotWidget() ? getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined) : undefined,
       flexDirection: isTitleAligmentRight() ? "row-reverse" : "row"
     },
     className: getwidgetTitlesContainer()
@@ -3006,7 +3137,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
         color: getCSSPropertyValue(widget.current, 'TitleFontColor', ''),
         textAlign: getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined)
       }
-    }, (_widget$current12 = widget.current) === null || _widget$current12 === void 0 ? void 0 : _widget$current12.Title),
+    }, (_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Title),
     position: ['top center'],
     arrowStyle: {
       color: '#262626'
@@ -3015,7 +3146,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     on: ['hover', 'focus']
   }, React__default.createElement("span", {
     className: "widget-title-tooltip-text"
-  }, (_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Title))), isTableWidget() && isThereTitle() && isThereSubtitle() && React__default.createElement("div", {
+  }, (_widget$current14 = widget.current) === null || _widget$current14 === void 0 ? void 0 : _widget$current14.Title))), isTableOrPivotWidget() && isThereTitle() && isThereSubtitle() && React__default.createElement("div", {
     className: "titles-vertical-seeparator"
   }), React__default.createElement("div", {
     className: isThereSubtitle() ? "subtitle" : "subtitle margin-top-4",
@@ -3023,9 +3154,9 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
       fontSize: getCSSPropertyValue(widget.current, 'SubtitleFontSize', 'px'),
       textAlign: getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined),
       color: getCSSPropertyValue(widget.current, 'SubtitleFontColor', ''),
-      minWidth: isThereSubtitle() && isTableWidget() ? '5%' : undefined
+      minWidth: isThereSubtitle() && isTableOrPivotWidget() ? '5%' : undefined
     }
-  }, (_widget$current14 = widget.current) === null || _widget$current14 === void 0 ? void 0 : _widget$current14.Subtitle)), !isTitleAligmentRight() && isTableWidget() && tableHintMessage(), props.isInEditMode && React__default.createElement("div", {
+  }, (_widget$current15 = widget.current) === null || _widget$current15 === void 0 ? void 0 : _widget$current15.Subtitle)), !isTitleAligmentRight() && isTableOrPivotWidget() && tableHintMessage(), props.isInEditMode && React__default.createElement("div", {
     className: isThereTitle() ? "widget-options-container" : "widget-options-container margin-top-6"
   }, React__default.createElement(SvgEditIcon, {
     onClick: function onClick() {