logitude-dashboard-library 3.1.106 → 3.1.108

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

@@ -1237,9 +1237,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,71 @@ var TableChart = function TableChart(props) {
     }
   };
 
+  function stripTime(date) {
+    if (!date) return null;
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  }
+
+  function parseLocalDate(dateStr) {
+    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);
+  }
+
+  function parseCustomDateLocalDate(dateStr) {
+    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);
+  }
+
+  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;
@@ -1713,9 +1789,17 @@ var TableChart = function TableChart(props) {
     if (!columnData || !columnData.FieldRules || columnData.FieldRules.length == 0) {
       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 +1874,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 +1888,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() {