logitude-dashboard-library 3.2.43 → 3.2.45

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

@@ -312,7 +312,7 @@ $dark-grey: #717585;
                     font-family: 'Manrope', sans-serif;
                     font-style: normal;
                     color: #292D30;
-                    padding-top: 6px;
+                    padding-top: 9px;
                     margin-top: 0;
                     margin-bottom: 0;
                     font-size: 12px;
@@ -666,6 +666,15 @@ $dark-grey: #717585;
 .db-fc-container {
     width: 100%;
     height: calc(100% - 5px);
+    padding-left: 0.12rem;
+    padding-right: 0.12rem;
+    padding-top: 0.05rem;
+}
+
+.db-fc-container-error {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    padding-top: 0 !important;
 }
 
 .db-fc-container text {
@@ -1237,9 +1246,14 @@ $dark-grey: #717585;
     text-decoration: underline;
 }
 
+
 .table-cell-datetime {
+    
     font-family: 'Manrope';
     font-weight: 500;
+    padding: 0px 6px;
+    border-radius: 4px;
+    width: fit-content;
 }
 
 .date-time-value-container {

package/dist/index.js

@@ -1444,12 +1444,23 @@ var TableChart = function TableChart(props) {
     var updatedWidgetColumnsData = JSON.parse(updatedWidgetColumns);
     var _updatedTableColumns = [];
     updatedWidgetColumnsData.forEach(function (c) {
-      var col = tableColumns.find(function (f) {
+      var columns = tableColumns.filter(function (f) {
         return f.Id == c.Id;
       });
 
-      if (col) {
-        _updatedTableColumns.push(col);
+      if (columns && columns.length == 1) {
+        _updatedTableColumns.push(columns[0]);
+      } else if (columns && columns.length > 1) {
+        var isCalculatedColumn = c.ColumnVariableType === "CalculatedColumn";
+        var dataTypeCode = c.ColumnVariableDataType;
+        var dateDisplayMode = c.DateTimeDisplayMode || "Date";
+        var column = columns.find(function (f) {
+          return f.IsCalculatedColumn === isCalculatedColumn && f.DataTypeCode === dataTypeCode && f.DateTimeDisplayMode === dateDisplayMode;
+        });
+
+        if (column) {
+          _updatedTableColumns.push(column);
+        }
       }
     });
     setTableColumns([].concat(_updatedTableColumns));
@@ -1699,6 +1710,79 @@ var TableChart = function TableChart(props) {
     }
   };
 
+  function stripTime(date) {
+    if (!date) return null;
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  }
+
+  function parseLocalDate(dateStr) {
+    try {
+      if (!dateStr) return null;
+
+      var _dateStr$split$0$spli = dateStr.split('T')[0].split('-').map(Number),
+          year = _dateStr$split$0$spli[0],
+          month = _dateStr$split$0$spli[1],
+          day = _dateStr$split$0$spli[2];
+
+      return new Date(year, month - 1, day);
+    } catch (error) {
+      return null;
+    }
+  }
+
+  function parseCustomDateLocalDate(dateStr) {
+    try {
+      if (!dateStr || dateStr.length < 8) return null;
+      var year = Number(dateStr.substring(0, 4));
+      var month = Number(dateStr.substring(4, 6));
+      var day = Number(dateStr.substring(6, 8));
+      return new Date(year, month - 1, day);
+    } catch (error) {
+      return null;
+    }
+  }
+
+  function isDateValidRule(rule, value) {
+    var _rule$RuleOperator;
+
+    var operator = rule === null || rule === void 0 ? void 0 : (_rule$RuleOperator = rule.RuleOperator) === null || _rule$RuleOperator === void 0 ? void 0 : _rule$RuleOperator.Code;
+    if (!operator) return null;
+    var ruleValue1 = stripTime(parseCustomDateLocalDate(rule.RuleValue1));
+    var ruleValue2 = stripTime(parseCustomDateLocalDate(rule.RuleValue2));
+    var actualValue = stripTime(parseLocalDate(value));
+
+    switch (operator) {
+      case "Equal":
+      case "Between":
+        return !isValueEmpty(ruleValue1) && !isValueEmpty(ruleValue2) && !isValueEmpty(actualValue) && ruleValue1 <= actualValue && actualValue <= ruleValue2;
+
+      case "NotEqual":
+      case "NotBetween":
+        return !isValueEmpty(ruleValue1) && !isValueEmpty(ruleValue2) && !isValueEmpty(actualValue) && (ruleValue1 > actualValue || actualValue > ruleValue2);
+
+      case "GreaterThan":
+        return !isValueEmpty(ruleValue2) && !isValueEmpty(actualValue) && actualValue > ruleValue2;
+
+      case "GreaterThanOrEqual":
+        return !isValueEmpty(ruleValue2) && !isValueEmpty(actualValue) && actualValue >= ruleValue2;
+
+      case "LessThan":
+        return !isValueEmpty(ruleValue2) && !isValueEmpty(actualValue) && actualValue < ruleValue2;
+
+      case "LessThanOrEqual":
+        return !isValueEmpty(ruleValue2) && !isValueEmpty(actualValue) && actualValue <= ruleValue2;
+
+      case "IsEmpty":
+        return isValueEmpty(actualValue);
+
+      case "IsNotEmpty":
+        return !isValueEmpty(actualValue);
+
+      default:
+        return null;
+    }
+  }
+
   var getCellPropertyByRule = function getCellPropertyByRule(column, cellValue, propertyName, defaultValue) {
     if (defaultValue === void 0) {
       defaultValue = null;
@@ -1710,12 +1794,20 @@ var TableChart = function TableChart(props) {
       return el.FieldId == column.Id && el.FieldType == columnType;
     });
 
-    if (!columnData || !columnData.FieldRules || columnData.FieldRules.length == 0) {
+    if (!columnData || !columnData.FieldRules || columnData.FieldRules.length == 0 || columnData.FieldDataType != (column === null || column === void 0 ? void 0 : column.DataTypeCode)) {
       return defaultValue ? getTableFormattingPropertyValue(defaultValue) : undefined;
     }
-    var firstValidRule = columnData.FieldRules.find(function (rule) {
-      return IsValidRule(rule, cellValue);
-    });
+    var firstValidRule = null;
+
+    if (FieldDataType.isDateOrDateTimeType(column === null || column === void 0 ? void 0 : column.DataTypeCode)) {
+      firstValidRule = columnData.FieldRules.find(function (rule) {
+        return isDateValidRule(rule, cellValue);
+      });
+    } else {
+      firstValidRule = columnData.FieldRules.find(function (rule) {
+        return IsValidRule(rule, cellValue);
+      });
+    }
 
     if (!firstValidRule) {
       return defaultValue ? getTableFormattingPropertyValue(defaultValue) : undefined;
@@ -1790,12 +1882,12 @@ var TableChart = function TableChart(props) {
     if (!column || !column.FieldCode) return "";
 
     if (column.DataTypeCode == "DateTime" || column.DataTypeCode == "Date") {
+      var dateTimeDisplayMode = column.DateTimeDisplayMode;
       var fontColor = getTableFormattingPropertyValue("TableCellFontColor");
       var fontSizeWithoutUnit = getTableFormattingPropertyValue("TableCellFontSize");
       var fontSizeWitUnit = getTableFormattingPropertyValue("TableCellFontSize", "px");
-      var width = fontSizeWithoutUnit ? fontSizeWithoutUnit * 6 + "px" : 70 + "px";
       return React__default.createElement("div", {
-        title: getDateTimeValue(data[column.FieldCode]),
+        title: dateTimeDisplayMode === 'DateTime' ? getDateTimeValue(data[column.FieldCode]) : getDateTimeValue(data[column.FieldCode], 'Date'),
         className: "date-time-value-container",
         style: {
           color: fontColor
@@ -1804,15 +1896,10 @@ var TableChart = function TableChart(props) {
         className: "table-cell-datetime",
         style: {
           fontSize: fontSizeWitUnit,
-          width: width,
-          display: 'inline-block'
-        }
-      }, getDateTimeValue(data[column.FieldCode], 'Date')), React__default.createElement("span", {
-        className: "table-cell-datetime",
-        style: {
-          fontSize: fontSizeWitUnit
+          display: 'inline-block',
+          backgroundColor: getCellPropertyByRule(column, data[column.FieldCode], 'RuleBackgroundColor')
         }
-      }, getDateTimeValue(data[column.FieldCode], 'Time')));
+      }, getDateTimeValue(data[column.FieldCode], 'Date'), dateTimeDisplayMode === 'DateTime' && ' ' + getDateTimeValue(data[column.FieldCode], 'Time')));
     } else {
       return React__default.createElement("span", {
         onClick: function onClick() {
@@ -3529,7 +3616,15 @@ var FusionChart = React.forwardRef(function (props, comRef) {
     }
   };
 
-  return !dataLoaded ? React__default.createElement("div", {
+  return React__default.createElement("div", {
+    className: 'db-fc-parent-container',
+    ref: fusionRef
+  }, React__default.createElement("div", {
+    className: 'db-fc-container' + (dataLoaded && error ? " db-fc-container-error" : ""),
+    key: fusionKey,
+    ref: ref,
+    id: chartContainerId
+  }, !dataLoaded && React__default.createElement("div", {
     ref: progressRef,
     className: 'dl-full-hight dl-flex-content-center spinner-custome'
   }, React__default.createElement(progressspinner.ProgressSpinner, {
@@ -3539,19 +3634,11 @@ var FusionChart = React.forwardRef(function (props, comRef) {
     },
     strokeWidth: "4",
     animationDuration: "2s"
-  })) : !error ? React__default.createElement("div", {
-    className: 'db-fc-parent-container',
-    ref: fusionRef
-  }, React__default.createElement("div", {
-    className: 'db-fc-container',
-    key: fusionKey,
-    ref: ref,
-    id: chartContainerId
-  }, React__default.createElement(ReactFC, Object.assign({}, args, {
+  })), dataLoaded && !error && React__default.createElement(ReactFC, Object.assign({}, args, {
     "fcEvent-dataplotClick": dataplotClick,
     "fcEvent-loaded": loaded,
     onRender: renderComplete
-  })))) : React__default.createElement("div", {
+  })), dataLoaded && error && React__default.createElement("div", {
     className: "dl-flex-content-center dl-full-hight",
     style: {
       width: '100%'
@@ -3562,7 +3649,7 @@ var FusionChart = React.forwardRef(function (props, comRef) {
     className: "red-warning-icon"
   }), React__default.createElement("span", {
     className: "dl-tooltiptext"
-  }, error)));
+  }, error)))));
 });
 
 var _path$1;