logitude-dashboard-library 3.2.4 → 3.2.5

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

@@ -388,12 +388,25 @@ $dark-grey: #717585;
     align-items: flex-start;
 }
 
-.table-rows-number-indicator {
-    margin: 4px 0px 2px 0px;
-    color: #939393;
-    font-size: 11px;
-    padding-left: 12px;
+.table-hint-container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    .table-rows-number-indicator {
+        margin: 4px 0px 2px 0px;
+        color: #939393;
+        font-size: 11px;
+        padding-left: 12px;
+    }
+    .show-more-records {
+        font-size: 11px;
+        color: #1967d2;
+        cursor: pointer;
+        margin: 3px 0px 2px 4px;
+    }
 }
+
 .filter-label {
     font-size: 12px;
     color: $dark-grey;
@@ -805,6 +818,16 @@ $dark-grey: #717585;
     tr:hover {
         background-color: #ddd;
     }
+
+    .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover,
+    .p-datatable .p-sortable-column.p-highlight {
+        background: #f8f9fa !important;
+        color: #343a40 !important;
+    }
+
+    .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon::before {
+        color: #343a40 !important;
+    }
 }
 
 .margin-auto {

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

@@ -7,6 +7,7 @@ export declare type CustomChartProps = {
     widgetRef: ReactWidgetPM | undefined;
     dataBinding: DashboardDataBinding;
     isPreviewModeActive?: boolean;
+    isInEditMode?: boolean;
     onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
 };
 declare const CustomChart: (props: CustomChartProps) => React.JSX.Element;

package/dist/index.js

@@ -570,21 +570,34 @@ var TableChart = function TableChart(props) {
       isLoading = _useState[0],
       setIsLoading = _useState[1];
 
-  var _useState2 = React.useState(),
-      error = _useState2[0],
-      setError = _useState2[1];
+  var _useState2 = React.useState(false),
+      isTableLoading = _useState2[0],
+      setIsTableLoading = _useState2[1];
 
   var _useState3 = React.useState(),
-      setWidget = _useState3[1];
+      error = _useState3[0],
+      setError = _useState3[1];
 
-  var _useState4 = React.useState([]),
-      tableData = _useState4[0],
-      setTableData = _useState4[1];
+  var _useState4 = React.useState(),
+      setWidget = _useState4[1];
 
   var _useState5 = React.useState([]),
-      tableColumns = _useState5[0],
-      setTableColumns = _useState5[1];
+      tableData = _useState5[0],
+      setTableData = _useState5[1];
+
+  var _useState6 = React.useState([]),
+      tableColumns = _useState6[0],
+      setTableColumns = _useState6[1];
+
+  var _useState7 = React.useState(null),
+      sortField = _useState7[0],
+      setSortField = _useState7[1];
 
+  var _useState8 = React.useState(null),
+      sortOrder = _useState8[0],
+      setSortOrder = _useState8[1];
+
+  var isDefaultSortOptionsUsed = React.useRef(false);
   React.useEffect(function () {
     if (props.customChartProps && props.customChartProps.widget) {
       setWidget(props.customChartProps.widget);
@@ -640,6 +653,7 @@ var TableChart = function TableChart(props) {
 
     if (tableData.Fields && tableData.Fields.length) {
       setTableColumns([].concat(tableData.Fields));
+      setDefaultSortOptions(tableData.Fields);
     }
 
     if (tableData.Result && tableData.Result.length) {
@@ -661,6 +675,80 @@ var TableChart = function TableChart(props) {
     setTableData([].concat(tableRecords));
   };
 
+  var setDefaultSortOptions = function setDefaultSortOptions(tableCols) {
+    if (tableCols === void 0) {
+      tableCols = [];
+    }
+
+    if (isDefaultSortOptionsUsed && isDefaultSortOptionsUsed.current) return;
+    isDefaultSortOptionsUsed.current = true;
+
+    var _widget = props.customChartProps ? props.customChartProps.widget : null;
+
+    if (!_widget) return;
+
+    var _sortFieldCode = getSortFieldCodeBySortFieldId(_widget.DefaultSortBy, tableCols);
+
+    var _sortDirection = _widget.DefaultSortDirection ? _widget.DefaultSortDirection == 'asc' ? 1 : _widget.DefaultSortDirection == 'desc' ? -1 : 0 : null;
+
+    setSortField(_sortFieldCode);
+    setSortOrder(_sortDirection);
+  };
+
+  var getSortFieldCodeBySortFieldId = function getSortFieldCodeBySortFieldId(sortFieldId, tableCols) {
+    if (tableCols === void 0) {
+      tableCols = [];
+    }
+
+    if (!sortFieldId) return null;
+    var field = tableCols.find(function (col) {
+      return col.Id == sortFieldId;
+    });
+    return field ? field.FieldCode : null;
+  };
+
+  var getSortFieldIdBySortFieldCode = function getSortFieldIdBySortFieldCode(sortFieldCode) {
+    if (!sortFieldCode) return null;
+    var field = tableColumns.find(function (col) {
+      return col.FieldCode == sortFieldCode;
+    });
+    return field ? field.Id : null;
+  };
+
+  var sortTableData = function sortTableData(e) {
+    setSortField(e.sortField);
+    setSortOrder(e.sortOrder);
+    var _widget = props.customChartProps.widget;
+    var dashboardAnalyticsService = new DashboardAnalyticsService();
+    _widget.onChange = undefined;
+    _widget.PageIndex = 0;
+    _widget.PageSize = 100;
+    _widget.ScreenSortBy = getSortFieldIdBySortFieldCode(e.sortField);
+    _widget.ScreenSortDirection = e.sortOrder == 1 ? 'asc' : e.sortOrder == -1 ? 'desc' : null;
+    _widget.EntityId = !isNullOrUndefinedOrEmpty(_widget.RelatedToEntityId) ? _widget.RelatedToEntityId : _widget.EntityId;
+    setIsTableLoading(true);
+    dashboardAnalyticsService.getTableData(_widget).then(function (res) {
+      if (res && res.data) {
+        fillTableData(res.data);
+      }
+
+      setIsTableLoading(false);
+    })["catch"](function (error) {
+      var _error$response3, _error$response3$data, _error$response4, _error$response4$data;
+
+      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);
+      setIsTableLoading(false);
+    });
+  };
+
+  var canSort = function canSort() {
+    if (props.customChartProps) {
+      return !props.customChartProps.isInEditMode && !props.customChartProps.isPreviewModeActive;
+    }
+
+    return false;
+  };
+
   return isLoading ? React__default.createElement("div", {
     className: 'dl-full-hight dl-flex-content-center spinner-custome'
   }, React__default.createElement(progressspinner.ProgressSpinner, {
@@ -682,10 +770,15 @@ var TableChart = function TableChart(props) {
   }), React__default.createElement("span", {
     className: "dl-tooltiptext"
   }, error))) : React__default.createElement(datatable.DataTable, {
+    loading: isTableLoading,
+    sortField: sortField,
+    sortOrder: sortOrder,
+    onSort: sortTableData,
     value: tableData,
     responsiveLayout: "scroll"
   }, tableColumns.map(function (column$1, index) {
     return React__default.createElement(column.Column, {
+      sortable: canSort(),
       key: column$1.FieldCode + "_" + index,
       field: column$1.FieldCode,
       header: column$1.DisplayName
@@ -715,9 +808,25 @@ var CustomChart = function CustomChart(props) {
     }
   };
 
+  var drilldownToTableData = function drilldownToTableData() {
+    props.onSelectDataPoint({
+      GroupById: undefined,
+      MeasureFieldId: undefined,
+      MeasureCode: undefined,
+      Formula: undefined,
+      Widget: props.widget,
+      GroupByIdSec: undefined
+    });
+  };
+
   return React__default.createElement(React__default.Fragment, null, ((_props$widget2 = props.widget) === null || _props$widget2 === void 0 ? void 0 : _props$widget2.TypeCode) && ((_props$widget3 = props.widget) === null || _props$widget3 === void 0 ? void 0 : _props$widget3.TypeCode) == 'table' && React__default.createElement("div", {
+    className: "table-hint-container"
+  }, React__default.createElement("div", {
     className: "table-rows-number-indicator"
-  }, "Showing the first 100 rows"), React__default.createElement("div", {
+  }, "Showing the first 100 rows"), !props.isInEditMode && !props.isPreviewModeActive && React__default.createElement("div", {
+    onClick: drilldownToTableData,
+    className: "show-more-records"
+  }, "( Show More Records )")), React__default.createElement("div", {
     className: props.widget && ((_props$widget4 = props.widget) === null || _props$widget4 === void 0 ? void 0 : _props$widget4.TypeCode) == 'table' ? "dl-custom-chart-container dl-table-chart-container" : "dl-custom-chart-container"
   }, project()));
 };
@@ -1871,6 +1980,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") return React__default.createElement(CustomChart, {
+      isInEditMode: props.isInEditMode,
       isPreviewModeActive: props.isPreviewModeActive,
       dataBinding: props.dataBinding,
       widget: widget.current,