logitude-dashboard-library 1.4.77 → 1.4.78

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

@@ -713,6 +713,72 @@ $dark-grey: #717585;
     place-content: flex-start;
     align-items: flex-start;
 }
+
+.dl-table-chart-container {
+    overflow: auto;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    height: calc(100% - 15px);
+    width: calc(100% - 25px);
+    margin: 0 auto;
+
+    table {
+        border-collapse: collapse;
+        width: 100%;
+        height: auto;
+        max-height: 100%;
+    }
+
+    td,
+    th {
+        border: 1px solid #ddd;
+        padding: 8px;
+    }
+
+    th {
+        text-align: left;
+        font-weight: bold;
+        font-size: 14px;
+        white-space: nowrap;
+    }
+
+    td {
+        border: 1px solid #ddd;
+        padding: 8px;
+        max-width: 1px;
+        min-width: 140px;
+        line-height: normal;
+        word-break: break-all;
+        white-space: normal;
+    }
+
+    tr {
+        width: auto;
+        min-width: 150px;
+        height: 1px;
+        line-height: 10px;
+    }
+
+    tbody tr td{
+        font-size: 14px;
+    }
+
+    tr:nth-child(even) {
+        background-color: #f2f2f2;
+    }
+
+    tr:hover {
+        background-color: #ddd;
+    }
+}
+
+.margin-auto {
+    margin: auto;
+}
+
 .dl-kpi-prev-container {
     display: flex;
     align-content: flex-start;

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

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

package/dist/index.js

@@ -203,6 +203,10 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
     return this._ApiServices.post("/api/" + this.controller + "/PostGetKpiData", widget);
   };
 
+  _proto.getTableData = function getTableData(widget) {
+    return this._ApiServices.post("/api/" + this.controller + "/PostGetTableData", widget);
+  };
+
   return DashboardAnalyticsService;
 }();
 
@@ -517,7 +521,142 @@ var KpiChart = function KpiChart(props) {
   }, error)));
 };
 
+var TableChart = function TableChart(props) {
+  var _useState = React.useState(true),
+      isLoading = _useState[0],
+      setIsLoading = _useState[1];
+
+  var _useState2 = React.useState(),
+      error = _useState2[0],
+      setError = _useState2[1];
+
+  var _useState3 = React.useState(),
+      setWidget = _useState3[1];
+
+  var _useState4 = React.useState([]),
+      tableData = _useState4[0],
+      setTableData = _useState4[1];
+
+  React.useEffect(function () {
+    if (props.customChartProps && props.customChartProps.widget) {
+      setWidget(props.customChartProps.widget);
+      getTableData(props.customChartProps.widget);
+    }
+  }, []);
+
+  var getTableData = function getTableData(widget) {
+    if (Session.Tenant == 0) {
+      setTableData([]);
+      setIsLoading(false);
+      return;
+    }
+
+    var dashboardAnalyticsService = new DashboardAnalyticsService();
+    widget.onChange = undefined;
+    widget.PageIndex = 0;
+    widget.PageSize = 50;
+    dashboardAnalyticsService.getTableData(widget).then(function (res) {
+      if (res && res.data) {
+        fillTableData(res.data);
+      }
+
+      setIsLoading(false);
+    })["catch"](function (error) {
+      var _error$response, _error$response$data, _error$response2, _error$response2$data;
+
+      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);
+      setIsLoading(false);
+    });
+  };
+
+  var getDateTimeValue = function getDateTimeValue(value) {
+    if (!value) return value;
+
+    var _date = moment(value);
+
+    if (!_date || !_date.isValid()) return value;
+    return _date.format("DD MMM YYYY");
+  };
+
+  var fillTableData = function fillTableData(tableData) {
+    var tableRecoreds = [];
+    var tableRow = [];
+
+    if (tableData.Fields) {
+      tableData.Fields.forEach(function (item) {
+        tableRow.push(_extends({}, item, {
+          value: item.DisplayName ? item.DisplayName : "",
+          isHeader: true
+        }));
+      });
+    }
+
+    tableRecoreds.push(tableRow);
+
+    if (tableData.Result) {
+      tableData.Result.forEach(function (item) {
+        var _tableRow = [];
+        tableData.Fields.forEach(function (field) {
+          var key = field.FieldCode;
+          var valueType = field.DataTypeCode;
+
+          var _value = valueType && (valueType == "Date" || valueType == "DateTime") ? getDateTimeValue(item[key]) : item[key];
+
+          _tableRow.push({
+            value: _value
+          });
+        });
+        tableRecoreds.push(_tableRow);
+      });
+    }
+
+    setTableData([].concat(tableRecoreds));
+  };
+
+  var getTableTemplate = function getTableTemplate() {
+    return tableData.length == 0 ? React__default.createElement("div", {
+      className: "dl-kpi-no-data margin-auto"
+    }, "No data to display.") : React__default.createElement("table", null, React__default.createElement("thead", null, React__default.createElement("tr", null, tableData[0].map(function (el) {
+      return React__default.createElement("th", {
+        key: el.value
+      }, el.value ? el.value : '');
+    }))), React__default.createElement("tbody", null, tableData.map(function (el, index) {
+      return index == 0 ? null : React__default.createElement("tr", {
+        key: index
+      }, el.map(function (item, index2) {
+        return React__default.createElement("td", {
+          key: index2 + "_" + el.value
+        }, item.value ? item.value : '');
+      }));
+    })));
+  };
+
+  return 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"
+  })) : error ? React__default.createElement("div", {
+    className: "dl-flex-content-center dl-full-hight",
+    style: {
+      width: '100%'
+    }
+  }, React__default.createElement("div", {
+    className: "dl-tooltip"
+  }, React__default.createElement(SvgRedWarning, {
+    className: "red-warning-icon"
+  }), React__default.createElement("span", {
+    className: "dl-tooltiptext"
+  }, error))) : getTableTemplate();
+};
+
 var CustomChart = function CustomChart(props) {
+  var _props$widget2;
+
   var project = function project() {
     var _props$widget;
 
@@ -527,13 +666,18 @@ var CustomChart = function CustomChart(props) {
           customChartProps: props
         });
 
+      case "table":
+        return React__default.createElement(TableChart, {
+          customChartProps: props
+        });
+
       default:
         return React__default.createElement("div", null, "Invalid Type");
     }
   };
 
   return React__default.createElement("div", {
-    className: "dl-custom-chart-container"
+    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"
   }, project());
 };
 
@@ -1485,7 +1629,7 @@ function SvgCopyIcon(props) {
 }
 
 var WidgetCard = React.forwardRef(function (props, comRef) {
-  var _widget$current5, _widget$current6, _widget$current7, _widget$current8, _widget$current9, _widget$current10, _widget$current11;
+  var _widget$current6, _widget$current7, _widget$current8, _widget$current9, _widget$current10, _widget$current11, _widget$current12;
 
   var widget = React.useRef();
 
@@ -1547,10 +1691,10 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
   };
 
   var GetChartComponent = function GetChartComponent() {
-    var _widget$current3, _widget$current4;
+    var _widget$current3, _widget$current4, _widget$current5;
 
     if (isLoading || !((_widget$current3 = widget.current) !== null && _widget$current3 !== void 0 && _widget$current3.TypeCode)) return "";
-    if (((_widget$current4 = widget.current) === null || _widget$current4 === void 0 ? void 0 : _widget$current4.TypeCode) == "kpi") return React__default.createElement(CustomChart, {
+    if (((_widget$current4 = widget.current) === null || _widget$current4 === void 0 ? void 0 : _widget$current4.TypeCode) == "kpi" || ((_widget$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.TypeCode) == "table") return React__default.createElement(CustomChart, {
       isPreviewModeActive: props.isPreviewModeActive,
       dataBinding: props.dataBinding,
       widget: widget.current,
@@ -1598,7 +1742,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$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.Title),
+    }, (_widget$current6 = widget.current) === null || _widget$current6 === void 0 ? void 0 : _widget$current6.Title),
     position: ['top center'],
     arrowStyle: {
       color: '#262626'
@@ -1607,15 +1751,15 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     on: ['hover', 'focus']
   }, React__default.createElement("span", {
     className: "widget-title-tooltip-text"
-  }, (_widget$current6 = widget.current) === null || _widget$current6 === void 0 ? void 0 : _widget$current6.Title))), React__default.createElement("div", {
-    className: (_widget$current7 = widget.current) !== null && _widget$current7 !== void 0 && _widget$current7.Subtitle && ((_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.Subtitle.length) > 0 ? "subtitle" : "subtitle margin-top-4",
+  }, (_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.Title))), React__default.createElement("div", {
+    className: (_widget$current8 = widget.current) !== null && _widget$current8 !== void 0 && _widget$current8.Subtitle && ((_widget$current9 = widget.current) === null || _widget$current9 === void 0 ? void 0 : _widget$current9.Subtitle.length) > 0 ? "subtitle" : "subtitle margin-top-4",
     style: {
       fontSize: getCSSPropertyValue(widget.current, 'SubtitleFontSize', 'px'),
       textAlign: getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined),
       color: getCSSPropertyValue(widget.current, 'SubtitleFontColor', '')
     }
-  }, (_widget$current9 = widget.current) === null || _widget$current9 === void 0 ? void 0 : _widget$current9.Subtitle)), React__default.createElement("div", {
-    className: (_widget$current10 = widget.current) !== null && _widget$current10 !== void 0 && _widget$current10.Title && ((_widget$current11 = widget.current) === null || _widget$current11 === void 0 ? void 0 : _widget$current11.Title.length) > 0 ? "widget-options-container" : "widget-options-container margin-top-6"
+  }, (_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.Subtitle)), React__default.createElement("div", {
+    className: (_widget$current11 = widget.current) !== null && _widget$current11 !== void 0 && _widget$current11.Title && ((_widget$current12 = widget.current) === null || _widget$current12 === void 0 ? void 0 : _widget$current12.Title.length) > 0 ? "widget-options-container" : "widget-options-container margin-top-6"
   }, props.isInEditMode && isWidgetHovered ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SvgEditIcon, {
     onClick: function onClick() {
       return editWidget();