logitude-dashboard-library 3.2.4 → 3.2.5

package/dist/index.modern.js

@@ -567,21 +567,34 @@ var TableChart = function TableChart(props) {
       isLoading = _useState[0],
       setIsLoading = _useState[1];
 
-  var _useState2 = useState(),
-      error = _useState2[0],
-      setError = _useState2[1];
+  var _useState2 = useState(false),
+      isTableLoading = _useState2[0],
+      setIsTableLoading = _useState2[1];
 
   var _useState3 = useState(),
-      setWidget = _useState3[1];
+      error = _useState3[0],
+      setError = _useState3[1];
 
-  var _useState4 = useState([]),
-      tableData = _useState4[0],
-      setTableData = _useState4[1];
+  var _useState4 = useState(),
+      setWidget = _useState4[1];
 
   var _useState5 = useState([]),
-      tableColumns = _useState5[0],
-      setTableColumns = _useState5[1];
+      tableData = _useState5[0],
+      setTableData = _useState5[1];
+
+  var _useState6 = useState([]),
+      tableColumns = _useState6[0],
+      setTableColumns = _useState6[1];
+
+  var _useState7 = useState(null),
+      sortField = _useState7[0],
+      setSortField = _useState7[1];
 
+  var _useState8 = useState(null),
+      sortOrder = _useState8[0],
+      setSortOrder = _useState8[1];
+
+  var isDefaultSortOptionsUsed = useRef(false);
   useEffect(function () {
     if (props.customChartProps && props.customChartProps.widget) {
       setWidget(props.customChartProps.widget);
@@ -637,6 +650,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) {
@@ -658,6 +672,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, {
@@ -679,10 +767,15 @@ var TableChart = function TableChart(props) {
   }), React__default.createElement("span", {
     className: "dl-tooltiptext"
   }, error))) : React__default.createElement(DataTable, {
+    loading: isTableLoading,
+    sortField: sortField,
+    sortOrder: sortOrder,
+    onSort: sortTableData,
     value: tableData,
     responsiveLayout: "scroll"
   }, tableColumns.map(function (column, index) {
     return React__default.createElement(Column, {
+      sortable: canSort(),
       key: column.FieldCode + "_" + index,
       field: column.FieldCode,
       header: column.DisplayName
@@ -712,9 +805,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()));
 };
@@ -1868,6 +1977,7 @@ var WidgetCard = 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,