logitude-dashboard-library 3.1.46 → 3.1.48

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,17 +818,109 @@ $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: -1px;
+    top: 0;
     right: 0;
     left: 0;
     bottom: 0;
-    height: calc(100% - 10px);
-    width: 100%;
-    margin: 0 auto;
 
+    .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 {
@@ -829,6 +928,7 @@ $dark-grey: #717585;
             }
         }
     }
+
     &::-webkit-scrollbar {
         width: 10px;
         height: 10px
@@ -1043,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

@@ -3,5 +3,5 @@ import { CustomChartProps } from './CustomChart';
 declare type PivotChartProps = {
     customChartProps: CustomChartProps;
 };
-declare const PivotTable: (props: PivotChartProps) => React.JSX.Element;
+declare const PivotTable: React.ForwardRefExoticComponent<PivotChartProps & React.RefAttributes<unknown>>;
 export default PivotTable;

package/dist/index.js

@@ -1492,7 +1492,7 @@ var TableChart = function TableChart(props) {
   }));
 };
 
-var PivotTable = function PivotTable(props) {
+var PivotTable = React.forwardRef(function (props, comRef) {
   var _useState = React.useState(),
       setWidget = _useState[1];
 
@@ -1502,6 +1502,7 @@ var PivotTable = function PivotTable(props) {
 
   var widgetRefData = React.useRef(null);
   var tabledata = React.useRef();
+  var pivotGridRef = React.useRef(null);
 
   var _useState3 = React.useState(new PivotGridDataSource({
     store: [],
@@ -1525,7 +1526,40 @@ var PivotTable = function PivotTable(props) {
       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) {
@@ -1585,6 +1619,7 @@ var PivotTable = function PivotTable(props) {
           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);
           }
@@ -1593,19 +1628,13 @@ var PivotTable = function PivotTable(props) {
       var pivotDataCellsFields = tabledata.current.PivotMeasures.map(function (measure) {
         return {
           dataField: measure.PivotMeasureCode,
-          dataType: 'string',
           area: 'data',
+          dataType: 'number',
+          summaryType: 'sum',
+          wordWrapEnabled: true,
           caption: measure.DisplayName
         };
       });
-      var fakeCellDataObject = {
-        dataField: 'PivotData0',
-        dataType: 'string',
-        area: 'data',
-        caption: "",
-        visible: false
-      };
-      pivotDataCellsFields.push(fakeCellDataObject);
       var AllfieldsData = [].concat(pivotRowsAndColumnsFields, pivotDataCellsFields);
       setDataSource(new PivotGridDataSource({
         store: tabledata.current.PivotData,
@@ -1625,32 +1654,33 @@ var PivotTable = function PivotTable(props) {
     animationDuration: "2s"
   })) : React__default.createElement(PivotGrid__default, {
     id: "pivotGridId",
+    ref: pivotGridRef,
     dataSource: dataSource,
     allowExpandAll: true,
     showBorders: true,
-    width: "100%",
-    style: {
-      margin: "0 auto"
-    },
+    className: 'pivot-grid-element',
     onCellClick: onCellClick,
     showRowGrandTotals: false,
     showColumnGrandTotals: false,
     showRowTotals: false,
-    showColumnTotals: 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",
-    useNative: true
+    mode: "virtual"
   })));
-};
+});
 
 var CustomChart = function CustomChart(props) {
   var _props$widget2, _props$widget3;
@@ -3111,7 +3141,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
 
     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" || ((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.TypeCode) == "pivot") return React__default.createElement(CustomChart, {
-      isInEditMode: false,
+      isInEditMode: props.isInEditMode,
       isPreviewModeActive: props.isPreviewModeActive,
       dataBinding: props.dataBinding,
       widget: widget.current,
@@ -3138,6 +3168,10 @@ 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');
   };
@@ -3171,8 +3205,12 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
 
   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 && isTableWidget() && 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, ")")));
@@ -3187,9 +3225,9 @@ 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 " + (isTableOrPivotWidget() ? "border-bottom-light-white" : "")
+    className: "header-contents " + (isTableWidget() ? "border-bottom-light-white" : "")
   }, isTitleAligmentRight() && isTableOrPivotWidget() && tableHintMessage(), React__default.createElement("div", {
     style: {
       cursor: props.isInEditMode ? "move" : "default",
@@ -3356,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);