logitude-dashboard-library 3.1.23 → 3.1.25

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

@@ -667,16 +667,32 @@ $dark-grey: #717585;
     color: #292D30;
 }
 
-.dl-kpi-unit {
+.dl-kpi-unit, .comparison-value-dl-kpi-unit {
     font-family: 'Manrope';
     font-style: normal;
     font-weight: 600;
-    font-size: 20px;
     line-height: 125%;
     color: #292D30;
     margin-left: 5px;
 }
 
+.dl-kpi-unit {
+    font-size: 20px;
+}
+
+.comparison-value-dl-kpi-unit {
+    font-size: 12px;
+}
+
+.table-cell {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding: 0.5rem 1rem;
+    white-space: normal;
+    align-items: center;
+}
+
 .dl-kpi-abbreviationSymbol {
     font-family: 'Manrope';
     font-style: normal;
@@ -778,26 +794,29 @@ $dark-grey: #717585;
         font-weight: bold;
         font-size: 14px;
         white-space: nowrap;
+        padding: 0px !important;
+
+        .p-column-header-content {
+            padding: 0;
+        }
 
         .p-column-title {
             font-weight: bold !important;
-            font-size: 14px !important;
-
-            .pi {
-                font-size: 14px !important;
-            }
+            font-size: 14px;
+            flex: 1;
         }
 
         .header-content {
             display: flex;
             align-items: center;
             cursor: pointer;
+            padding: 1rem 1rem;
         }
     }
 
     td {
         border: 1px solid #ddd;
-        padding: 0.5rem 1rem !important;
+        padding: 0px !important;
         max-width: 1px;
         height: 36px;
         min-width: 140px;
@@ -836,6 +855,10 @@ $dark-grey: #717585;
     }
 }
 
+.header-content > .p-column-title > .pi::before {
+    font-size: inherit !important;
+}
+
 .margin-auto {
     margin: auto;
 }

package/dist/index.js

@@ -441,7 +441,7 @@ var KpiChart = function KpiChart(props) {
         color: getKPIFormattingPropertyValue("ComparisonValueFontColor"),
         fontSize: getKPIFormattingPropertyValue("ComparisonValueFontSize", "px")
       },
-      className: "dl-kpi-unit"
+      className: "comparison-value-dl-kpi-unit"
     }, data === null || data === void 0 ? void 0 : data.Unit));
   }
 
@@ -580,6 +580,7 @@ var TableChart = function TableChart(props) {
       setError = _useState3[1];
 
   var _useState4 = React.useState(),
+      widget = _useState4[0],
       setWidget = _useState4[1];
 
   var _useState5 = React.useState([]),
@@ -599,11 +600,22 @@ var TableChart = function TableChart(props) {
       setSortOrder = _useState8[1];
 
   var isDefaultSortOptionsUsed = React.useRef(false);
+  var widgetRefData = React.useRef(null);
   React.useEffect(function () {
+    var _props$customChartPro;
+
     if (props.customChartProps && props.customChartProps.widget) {
       setWidget(props.customChartProps.widget);
+      widgetRefData.current = props.customChartProps.widget;
       getTableData(props.customChartProps.widget);
     }
+
+    (_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));
+    });
   }, []);
 
   var getTableData = function getTableData(widget) {
@@ -753,9 +765,110 @@ var TableChart = function TableChart(props) {
     return false;
   };
 
+  var getTableFormattingData = function getTableFormattingData() {
+    return widget && isNullOrUndefinedOrEmpty(widget.TableFormatSettings) ? {} : JSON.parse(widget === null || widget === void 0 ? void 0 : widget.TableFormatSettings);
+  };
+
+  var getTableFormattingPropertyValue = function getTableFormattingPropertyValue(propertyName, unit) {
+    if (unit === void 0) {
+      unit = "";
+    }
+
+    var tableFormattingData = getTableFormattingData();
+    return tableFormattingData && tableFormattingData[propertyName] ? tableFormattingData[propertyName] + unit : undefined;
+  };
+
+  var getTableConditionalRulesData = function getTableConditionalRulesData() {
+    return widget && isNullOrUndefinedOrEmpty(widget.TableConditionalRules) ? [] : JSON.parse(widget === null || widget === void 0 ? void 0 : widget.TableConditionalRules);
+  };
+
+  var isValueEmpty = function isValueEmpty(val) {
+    return val === null || val === undefined || val === "";
+  };
+
+  var IsValidRule = function IsValidRule(rule, value) {
+    var operator = rule && rule.RuleOperator ? rule.RuleOperator.Code : null;
+    if (!operator) return null;
+    var ruleValue1 = rule.RuleValue1;
+    var ruleValue2 = rule.RuleValue2;
+
+    switch (operator) {
+      case "Equal":
+        return ruleValue1 == value;
+
+      case "NotEqual":
+        return ruleValue1 != value;
+
+      case "Between":
+        return !isValueEmpty(ruleValue1) && !isValueEmpty(ruleValue2) && ruleValue1 <= value && value <= ruleValue2;
+
+      case "GreaterThan":
+        return !isValueEmpty(ruleValue1) && value > ruleValue1;
+
+      case "GreaterThanOrEqual":
+        return !isValueEmpty(ruleValue1) && value >= ruleValue1;
+
+      case "LessThan":
+        return !isValueEmpty(ruleValue1) && value < ruleValue1;
+
+      case "LessThanOrEqual":
+        return !isValueEmpty(ruleValue1) && value <= ruleValue1;
+
+      case "IsEmpty":
+        return isValueEmpty(value);
+
+      case "IsNotEmpty":
+        return !isValueEmpty(value);
+
+      default:
+        return null;
+    }
+  };
+
+  var getCellPropertyByRule = function getCellPropertyByRule(column, cellValue, propertyName, defaultValue) {
+    if (propertyName === void 0) {
+      propertyName = 'RuleFontColor';
+    }
+
+    if (defaultValue === void 0) {
+      defaultValue = null;
+    }
+
+    var tableFormattingData = getTableConditionalRulesData();
+    var columnData = tableFormattingData.find(function (el) {
+      return el.FieldId == column.Id;
+    });
+
+    if (!columnData || !columnData.FieldRules || columnData.FieldRules.length == 0) {
+      return defaultValue ? getTableFormattingPropertyValue(defaultValue) : undefined;
+    }
+    var firstValidRule = columnData.FieldRules.find(function (rule) {
+      return IsValidRule(rule, cellValue);
+    });
+
+    if (!firstValidRule) {
+      return defaultValue ? getTableFormattingPropertyValue(defaultValue) : undefined;
+    }
+
+    return !isNullOrUndefinedOrEmpty(firstValidRule[propertyName]) ? firstValidRule[propertyName] : defaultValue ? getTableFormattingPropertyValue(defaultValue) : undefined;
+  };
+
   var cellTemplateBody = function cellTemplateBody(data, column) {
     if (!column || !column.FieldCode) return "";
-    return column.DataTypeCode == "DateTime" || column.DataTypeCode == "Date" ? getDateTimeValue(data[column.FieldCode]) : data[column.FieldCode];
+    return column.DataTypeCode == "DateTime" || column.DataTypeCode == "Date" ? React__default.createElement("span", {
+      className: "table-cell",
+      style: {
+        color: getTableFormattingPropertyValue("TableCellFontColor"),
+        fontSize: getTableFormattingPropertyValue("TableCellFontSize", "px")
+      }
+    }, getDateTimeValue(data[column.FieldCode])) : React__default.createElement("span", {
+      className: "table-cell",
+      style: {
+        color: getCellPropertyByRule(column, data[column.FieldCode], 'RuleFontColor', 'TableCellFontColor'),
+        backgroundColor: getCellPropertyByRule(column, data[column.FieldCode], 'RuleBackgroundColor'),
+        fontSize: getTableFormattingPropertyValue("TableCellFontSize", "px")
+      }
+    }, data[column.FieldCode]);
   };
 
   var headerTemplate = function headerTemplate(column) {
@@ -763,15 +876,27 @@ var TableChart = function TableChart(props) {
 
     if (sortField != column.FieldCode) {
       return React__default.createElement("div", {
+        style: {
+          backgroundColor: getTableFormattingPropertyValue("TableHeaderBackgroundColor")
+        },
         onClick: function onClick() {
           return sortTableData(column.FieldCode);
         },
         className: "header-content"
       }, React__default.createElement("span", {
+        style: {
+          color: getTableFormattingPropertyValue("TableHeaderFontColor"),
+          fontSize: getTableFormattingPropertyValue("TableHeaderFontSize", "px")
+        },
         className: "p-column-title"
-      }, column.DisplayName), canSort() && React__default.createElement("span", {
+      }, column.DisplayName, canSort() && React__default.createElement("span", {
+        style: {
+          fontSize: getTableFormattingPropertyValue("TableHeaderFontSize", "px"),
+          width: getTableFormattingPropertyValue("TableHeaderFontSize", "px"),
+          height: getTableFormattingPropertyValue("TableHeaderFontSize", "px")
+        },
         className: "p-sortable-column-icon p-ml-2 pi pi-fw pi-sort-alt"
-      }));
+      })));
     }
 
     if (sortOrder == 1) {
@@ -783,15 +908,27 @@ var TableChart = function TableChart(props) {
     }
 
     return React__default.createElement("div", {
+      style: {
+        backgroundColor: getTableFormattingPropertyValue("TableHeaderBackgroundColor")
+      },
       onClick: function onClick() {
         return sortTableData(column.FieldCode);
       },
       className: "header-content"
     }, React__default.createElement("span", {
+      style: {
+        color: getTableFormattingPropertyValue("TableHeaderFontColor"),
+        fontSize: getTableFormattingPropertyValue("TableHeaderFontSize", "px")
+      },
       className: "p-column-title"
-    }, column.DisplayName), canSort() && React__default.createElement("span", {
+    }, column.DisplayName, canSort() && React__default.createElement("span", {
+      style: {
+        fontSize: getTableFormattingPropertyValue("TableHeaderFontSize", "px"),
+        width: getTableFormattingPropertyValue("TableHeaderFontSize", "px"),
+        height: getTableFormattingPropertyValue("TableHeaderFontSize", "px")
+      },
       className: sortClassIcon
-    }));
+    })));
   };
 
   return isLoading ? React__default.createElement("div", {