logitude-dashboard-library 3.2.14 → 3.2.16

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

@@ -276,6 +276,13 @@ $dark-grey: #717585;
         }
     }
 
+    .pivot-header {
+        &::after {
+            content: "";
+            border-bottom: 0px !important;
+        }
+    }
+
     .header-contents {
         display: flex;
     
@@ -811,6 +818,136 @@ $dark-grey: #717585;
     align-items: flex-start;
 }
 
+.force-overflow-hidden {
+    overflow: hidden !important;
+}
+
+.dl-pivot-chart-container {
+    overflow: auto;
+    height: calc(100% - 12px);
+    width: 100%;
+    margin: 0 auto;
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+
+    .pivot-grid-element {
+        width: 100%;
+        height: 100%;
+        margin: 0 auto;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-color: initial;
+    }
+
+    .dx-scrollbar-hoverable .dx-scrollable-scroll.dx-state-invisible .dx-scrollable-scroll-content {
+        background-color: rgba(191,191,191,.7);
+    }
+
+    .dx-pivotgrid-fields-area-head td .dx-area-field,
+    .dx-pivotgrid-horizontal-headers td,
+    .dx-pivotgrid .dx-area-description-cell.dx-pivotgrid-background {
+        background-color: #F1F1F1;
+    }
+
+    .dx-pivotgrid-horizontal-headers td {
+        text-align: left;
+    }
+
+    .dx-pivotgrid-fields-area-head td .dx-area-field {
+        border-bottom: 0;
+        border-right: 0;
+    }
+
+    .dx-pivotgrid .dx-pivotgrid-area td {
+        padding: 4px 8px;
+    }
+
+    .dx-pivotgrid-fields-area-head .dx-area-field-content,
+    .dx-pivotgrid-horizontal-headers tr td span {
+        font-family: "Manrope";
+        font-size: 13px;
+        font-weight: 600;
+        text-align: left;
+        color: #222222;
+    }
+
+    .dx-pivotgrid .dx-pivotgrid-vertical-headers td {
+        background: #FAFAFA;
+    }
+
+    .dx-pivotgrid .dx-pivotgrid-vertical-headers td > span {
+        font-family: "Manrope";
+        font-size: 13px;
+        font-weight: 500;
+        text-align: left;
+        color: #46494A;
+    }
+
+    .dx-pivotgrid .dx-pivotgrid-vertical-headers td div > span {
+        font-weight: 600 !important;
+        color: #46494A !important;
+    }
+
+    .dx-pivotgrid .dx-pivotgrid-area-data tbody td {
+        font-family: "Manrope";
+        font-size: 13px;
+        font-weight: 500;
+        text-align: right;
+        color: #46494A;
+        border-left: 0px !important;
+    }
+
+    .dx-widget {
+        &::-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;
+        }
+    }
+    
+    .dx-area-field-container {
+        .dx-pivotgrid-fields-area-head {
+            td {
+                padding: 0px !important;
+            }
+        }
+    }
+
+    &::-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;
@@ -1006,6 +1143,10 @@ $dark-grey: #717585;
     padding-left: 12px !important;
 }
 
+.min-width-105 {
+    min-width: 105px !important;
+}
+
 .table-link-cell {
     color: #1E4AC4 !important;
     cursor: pointer;

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: React.ForwardRefExoticComponent<PivotChartProps & React.RefAttributes<unknown>>;
+export default PivotTable;

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import "./styles.module.css";
 import { ReactWidgetPM } from './types/widget';
 import { DashboardDataBinding } from './types/DashboardDataBinding';
 import { DataPointSelection } from './types/SeriesMeasure';
+import 'devextreme/dist/css/dx.light.css';
 declare type DashboardProps = {
     token: string;
     tenant: number;

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 PivotGridDataSource = _interopDefault(require('devextreme/ui/pivot_grid/data_source'));
 var ReactFC = _interopDefault(require('react-fusioncharts'));
 var FusionCharts = _interopDefault(require('fusioncharts'));
 var Charts = _interopDefault(require('fusioncharts/fusioncharts.charts'));
@@ -16,6 +19,7 @@ var FusionTheme = _interopDefault(require('fusioncharts/themes/fusioncharts.them
 var useResizeObserver = _interopDefault(require('use-resize-observer'));
 var Popup = _interopDefault(require('reactjs-popup'));
 var Charts$1 = _interopDefault(require('fusioncharts/fusioncharts.widgets'));
+require('devextreme/dist/css/dx.light.css');
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -212,6 +216,14 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
     return this._ApiServices.post("/api/" + this.controller + "/PostGetDataAnalytic", widget, signal);
   };
 
+  _proto.getTargetAnalyticsData = function getTargetAnalyticsData(widget, signal) {
+    if (signal === void 0) {
+      signal = undefined;
+    }
+
+    return this._ApiServices.post("/api/" + this.controller + "/PostGetTargetDataAnalytic", widget, signal);
+  };
+
   _proto.getKpiData = function getKpiData(widget) {
     return this._ApiServices.post("/api/" + this.controller + "/PostGetKpiData", widget);
   };
@@ -232,6 +244,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;
 }();
 
@@ -1320,6 +1336,12 @@ var TableChart = function TableChart(props) {
       case "IsNotEmpty":
         return !isValueEmpty(value);
 
+      case "Contains":
+        return !isValueEmpty(value) && !isValueEmpty(ruleValue1) && value.includes(ruleValue1);
+
+      case "NotContains":
+        return !isValueEmpty(value) && !isValueEmpty(ruleValue1) && !value.includes(ruleValue1);
+
       default:
         return null;
     }
@@ -1470,8 +1492,198 @@ var TableChart = function TableChart(props) {
   }));
 };
 
+var PivotTable = React.forwardRef(function (props, comRef) {
+  var _useState = React.useState(),
+      setWidget = _useState[1];
+
+  var _useState2 = React.useState(true),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+
+  var widgetRefData = React.useRef(null);
+  var tabledata = React.useRef();
+  var pivotGridRef = React.useRef(null);
+
+  var _useState3 = React.useState(new PivotGridDataSource({
+    store: [],
+    fields: []
+  })),
+      dataSource = _useState3[0],
+      setDataSource = _useState3[1];
+
+  React.useEffect(function () {
+    var _props$customChartPro;
+
+    if (props.customChartProps && props.customChartProps.widget) {
+      setWidget(props.customChartProps.widget);
+      widgetRefData.current = props.customChartProps.widget;
+      getPivotTableData();
+    }
+
+    (_props$customChartPro = props.customChartProps.dataBinding) === null || _props$customChartPro === void 0 ? void 0 : _props$customChartPro.widgetUpdated.subscribe(function (updatedWidget) {
+      var _widgetRefData$curren;
+
+      if ((updatedWidget === null || updatedWidget === void 0 ? void 0 : updatedWidget.key) != ((_widgetRefData$curren = widgetRefData.current) === null || _widgetRefData$curren === void 0 ? void 0 : _widgetRefData$curren.key)) return;
+      setWidget(_extends({}, updatedWidget));
+    });
+    document.addEventListener("resizeStop", handleResize);
+    return function () {
+      document.removeEventListener("resizeStop", handleResize);
+    };
+  }, []);
+  React.useEffect(function () {
+    if (props.customChartProps.isInEditMode) {
+      var _pivotGridRef$current;
+
+      if (pivotGridRef.current && (_pivotGridRef$current = pivotGridRef.current) !== null && _pivotGridRef$current !== void 0 && _pivotGridRef$current.instance && pivotGridRef.current.instance.element && pivotGridRef.current.instance.element().classList) {
+        pivotGridRef.current.instance.element().classList.add('force-overflow-hidden');
+      }
+
+      setTimeout(function () {
+        var _pivotGridRef$current2;
+
+        handleResize();
+
+        if (pivotGridRef.current && (_pivotGridRef$current2 = pivotGridRef.current) !== null && _pivotGridRef$current2 !== void 0 && _pivotGridRef$current2.instance && pivotGridRef.current.instance.element && pivotGridRef.current.instance.element().classList) {
+          pivotGridRef.current.instance.element().classList.remove('force-overflow-hidden');
+        }
+      }, 5);
+    }
+  }, [props.customChartProps.isInEditMode]);
+
+  var handleResize = function handleResize() {
+    var _pivotGridRef$current3, _pivotGridRef$current4;
+
+    if (pivotGridRef.current && (_pivotGridRef$current3 = pivotGridRef.current) !== null && _pivotGridRef$current3 !== void 0 && _pivotGridRef$current3.instance && (_pivotGridRef$current4 = pivotGridRef.current) !== null && _pivotGridRef$current4 !== void 0 && _pivotGridRef$current4.instance.repaint) {
+      var _pivotGridRef$current5;
+
+      (_pivotGridRef$current5 = pivotGridRef.current) === null || _pivotGridRef$current5 === void 0 ? void 0 : _pivotGridRef$current5.instance.repaint();
+    }
+  };
+
+  var getPivotTableData = function getPivotTableData(widget) {
+    if (Session.Tenant == 0) {
+      tabledata.current = [];
+      setIsLoading(false);
+      return;
+    }
+
+    var dashboardAnalyticsService = new DashboardAnalyticsService();
+    dashboardAnalyticsService.getPivotData(props.customChartProps.widget).then(function (res) {
+      tabledata.current = res.data;
+      setPivotDataSourceFields();
+      setIsLoading(false);
+    })["catch"](function (err) {
+      console.log("Error while Getting Pivot Table Data: ", err);
+      tabledata.current = null;
+      setPivotDataSourceFields();
+      setIsLoading(false);
+    });
+  };
+
+  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 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,
+          wordWrapEnabled: 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,
+          area: 'data',
+          dataType: 'number',
+          summaryType: 'sum',
+          wordWrapEnabled: true,
+          caption: measure.DisplayName
+        };
+      });
+      var AllfieldsData = [].concat(pivotRowsAndColumnsFields, pivotDataCellsFields);
+      setDataSource(new PivotGridDataSource({
+        store: tabledata.current.PivotData,
+        fields: AllfieldsData
+      }));
+    }
+  };
+
+  return React__default.createElement(React__default.Fragment, null, isLoading ? React__default.createElement("div", {
+    className: 'dl-full-hight dl-flex-content-center spinner-custome'
+  }, React__default.createElement(progressspinner.ProgressSpinner, {
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    strokeWidth: "4",
+    animationDuration: "2s"
+  })) : React__default.createElement(PivotGrid__default, {
+    id: "pivotGridId",
+    ref: pivotGridRef,
+    dataSource: dataSource,
+    allowExpandAll: true,
+    showBorders: true,
+    className: 'pivot-grid-element',
+    onCellClick: onCellClick,
+    showRowGrandTotals: false,
+    showColumnGrandTotals: false,
+    showRowTotals: false,
+    showColumnTotals: false,
+    wordWrapEnabled: true
+  }, React__default.createElement(PivotGrid.FieldPanel, {
+    showColumnFields: false,
+    showDataFields: false,
+    showFilterFields: false,
+    showRowFields: true,
+    texts: {
+      rowFieldArea: ""
+    },
+    allowFieldDragging: false,
+    visible: true
+  }), React__default.createElement(PivotGrid.FieldChooser, {
+    enabled: false
+  }), React__default.createElement(PivotGrid.Scrolling, {
+    mode: "virtual"
+  })));
+});
+
 var CustomChart = function CustomChart(props) {
-  var _props$widget2;
+  var _props$widget2, _props$widget3;
 
   var project = function project() {
     var _props$widget;
@@ -1487,13 +1699,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()));
 };
 
@@ -2415,6 +2632,10 @@ var FusionChart = React.forwardRef(function (props, comRef) {
     }, 100);
   };
 
+  var isTargetWidget = function isTargetWidget(postWidget) {
+    return postWidget && (postWidget.TypeCode == 'column' || postWidget.TypeCode == 'bar' || postWidget.TypeCode == 'line');
+  };
+
   var RefreshData = function RefreshData() {
     if (Session.Tenant == 0) {
       handleData(null);
@@ -2437,17 +2658,33 @@ var FusionChart = React.forwardRef(function (props, comRef) {
       signal = updatedAxiosController === null || updatedAxiosController === void 0 ? void 0 : updatedAxiosController.signal;
     }
 
-    dashboardAnalyticsService.getData(postWidget, signal).then(function (result) {
-      handleData(result === null || result === void 0 ? void 0 : result.data);
-      chartData.current = result === null || result === void 0 ? void 0 : result.data;
-      setDataLoaded(true);
-    }, function (error) {
-      var _error$response, _error$response$data, _error$response2, _error$response2$data;
+    var isTargetUsed = isTargetWidget(postWidget) && postWidget.WidgetMeasures && postWidget.WidgetMeasures[1] && postWidget.WidgetMeasures[1].MeasureCode == 'Target';
 
-      console.log('error', error);
-      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) setError(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 setError(error.message);
-      setDataLoaded(true);
-    });
+    if (isTargetUsed) {
+      dashboardAnalyticsService.getTargetAnalyticsData(postWidget, signal).then(function (result) {
+        handleData(result === null || result === void 0 ? void 0 : result.data);
+        chartData.current = result === null || result === void 0 ? void 0 : result.data;
+        setDataLoaded(true);
+      }, function (error) {
+        var _error$response, _error$response$data, _error$response2, _error$response2$data;
+
+        console.log('error', error);
+        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) setError(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 setError(error.message);
+        setDataLoaded(true);
+      });
+    } else {
+      dashboardAnalyticsService.getData(postWidget, signal).then(function (result) {
+        handleData(result === null || result === void 0 ? void 0 : result.data);
+        chartData.current = result === null || result === void 0 ? void 0 : result.data;
+        setDataLoaded(true);
+      }, function (error) {
+        var _error$response3, _error$response3$data, _error$response4, _error$response4$data;
+
+        console.log('error', error);
+        if (error !== null && error !== void 0 && (_error$response3 = error.response) !== null && _error$response3 !== void 0 && (_error$response3$data = _error$response3.data) !== null && _error$response3$data !== void 0 && _error$response3$data.ErrorMessage) setError(error === null || error === void 0 ? void 0 : (_error$response4 = error.response) === null || _error$response4 === void 0 ? void 0 : (_error$response4$data = _error$response4.data) === null || _error$response4$data === void 0 ? void 0 : _error$response4$data.ErrorMessage);else setError(error.message);
+        setDataLoaded(true);
+      });
+    }
   };
 
   var handleData = function handleData(data, isDummyChange) {
@@ -2831,7 +3068,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();
 
@@ -2900,10 +3137,10 @@ 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, {
+    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: props.isInEditMode,
       isPreviewModeActive: props.isPreviewModeActive,
       dataBinding: props.dataBinding,
@@ -2911,7 +3148,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
       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,
@@ -2931,8 +3168,16 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     return widget && widget.current && widget.current.TypeCode == 'table';
   };
 
+  var isPivotWidget = function isPivotWidget() {
+    return widget && widget.current && widget.current.TypeCode == 'pivot';
+  };
+
+  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() {
@@ -2947,21 +3192,25 @@ 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", {
+      className: "table-hint-container " + (isPivotWidget() ? "min-width-105" : "") + " " + (isTitleAligmentRight() ? "padding-left-12" : "")
+    }, React__default.createElement("span", {
+      style: {
+        visibility: isTableWidget() ? "visible" : "hidden"
+      }
+    }, isTableWidget() ? "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, ")")));
@@ -2976,13 +3225,13 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     key: props.el.i
   }, React__default.createElement("header", {
     key: triggerId,
-    className: "widget-header"
+    className: "widget-header " + (isPivotWidget() ? "pivot-header" : "")
   }, React__default.createElement("div", {
     className: "header-contents " + (isTableWidget() ? "border-bottom-light-white" : "")
-  }, isTitleAligmentRight() && isTableWidget() && tableHintMessage(), React__default.createElement("div", {
+  }, 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()
@@ -3000,7 +3249,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'
@@ -3009,7 +3258,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",
@@ -3017,9 +3266,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() {
@@ -3145,6 +3394,7 @@ var DashboardDesigner = function DashboardDesigner(props) {
   function onResizeStop(event, oldItem) {
     var _widgetCardRef$curren, _widgetCardRef$curren2;
 
+    document.dispatchEvent(new CustomEvent("resizeStop", {}));
     widgetCardRef === null || widgetCardRef === void 0 ? void 0 : (_widgetCardRef$curren = widgetCardRef.current) === null || _widgetCardRef$curren === void 0 ? void 0 : (_widgetCardRef$curren2 = _widgetCardRef$curren.find(function (x) {
       return x.i == oldItem.i;
     })) === null || _widgetCardRef$curren2 === void 0 ? void 0 : _widgetCardRef$curren2.ref.onResizeFinish(widgetsDictionaryRef.current[oldItem.i].key);