logitude-dashboard-library 3.2.42 → 3.2.44

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

@@ -289,14 +289,14 @@ $dark-grey: #717585;
 
     .header-contents {
         display: flex;
-    
+
         .widget-titles-container {
             display: flex;
             flex-wrap: wrap;
             width: calc(100% - 70px);
             padding: 0px 12px 6px 12px;
             min-height: 28px;
-    
+
             .title-container {
                 display: flex;
                 align-items: center;
@@ -306,7 +306,7 @@ $dark-grey: #717585;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 min-width: 1px;
-        
+
                 .title {
                     text-transform: capitalize;
                     font-family: 'Manrope', sans-serif;
@@ -323,7 +323,7 @@ $dark-grey: #717585;
                     width: auto;
                 }
             }
-        
+
             .subtitle {
                 font-family: 'Manrope', sans-serif;
                 font-style: normal;
@@ -350,7 +350,7 @@ $dark-grey: #717585;
             min-width: 1px;
             padding-top: 4px;
         }
-        
+
         .widget-table-titles-container {
             display: flex;
             flex: 1;
@@ -362,7 +362,7 @@ $dark-grey: #717585;
             width: 100%;
             max-width: calc(100% - 170px);
             overflow: hidden;
-    
+
             .title-container {
                 display: flex;
                 align-items: center;
@@ -372,7 +372,7 @@ $dark-grey: #717585;
                 text-overflow: ellipsis;
                 width: auto;
                 max-width: 60%;
-        
+
                 .title {
                     text-transform: capitalize;
                     font-family: 'Manrope', sans-serif;
@@ -386,7 +386,7 @@ $dark-grey: #717585;
                     width: auto;
                 }
             }
-        
+
             .subtitle {
                 font-family: "Manrope", sans-serif;
                 font-style: normal;
@@ -427,7 +427,7 @@ $dark-grey: #717585;
                 cursor: pointer;
             }
 
-            & > span {
+            &>span {
                 font-size: 12px;
             }
         }
@@ -438,12 +438,12 @@ $dark-grey: #717585;
             width: 68px;
             column-gap: 6px;
             padding-top: 6px;
-    
+
             svg {
                 width: 20px;
                 height: 20px;
                 transform: scale(1.2);
-    
+
                 &:hover {
                     cursor: pointer;
                 }
@@ -638,11 +638,11 @@ $dark-grey: #717585;
     max-width: 100%;
 }
 
-.dl-kpi-label-container{
+.dl-kpi-label-container {
     line-height: 100%;
 }
 
-.dl-kpi-label-span{
+.dl-kpi-label-span {
     font-family: "Manrope";
     font-style: normal;
     font-size: 16px;
@@ -726,6 +726,7 @@ $dark-grey: #717585;
     margin-right: 12px;
     position: relative;
 }
+
 .dl-kpi-no-data {
     font-family: 'Manrope' !important;
     font-size: 10px !important;
@@ -783,7 +784,8 @@ $dark-grey: #717585;
     color: #292D30;
 }
 
-.dl-kpi-unit, .comparison-value-dl-kpi-unit {
+.dl-kpi-unit,
+.comparison-value-dl-kpi-unit {
     font-family: 'Manrope';
     font-style: normal;
     font-weight: 600;
@@ -895,7 +897,7 @@ $dark-grey: #717585;
     }
 
     .dx-scrollbar-hoverable .dx-scrollable-scroll.dx-state-invisible .dx-scrollable-scroll-content {
-        background-color: rgba(191,191,191,.7);
+        background-color: rgba(191, 191, 191, .7);
     }
 
     .dx-pivotgrid-fields-area-head td .dx-area-field,
@@ -934,17 +936,17 @@ $dark-grey: #717585;
         background: #FFFFFF;
     }
 
-    .dx-pivotgrid .dx-column-header, 
-    .dx-pivotgrid .dx-data-header, 
+    .dx-pivotgrid .dx-column-header,
+    .dx-pivotgrid .dx-data-header,
     .dx-pivotgrid .dx-total {
         background-color: rgba(221, 221, 221, .2) !important;
     }
-    
+
     .dx-pivotgrid .dx-grandtotal {
         background-color: #f5f5f5 !important;
     }
 
-    .dx-pivotgrid .dx-pivotgrid-vertical-headers td > span {
+    .dx-pivotgrid .dx-pivotgrid-vertical-headers td>span {
         font-family: "Manrope";
         font-size: 12px;
         font-weight: 500;
@@ -952,12 +954,12 @@ $dark-grey: #717585;
         color: #46494A;
     }
 
-    .dx-pivotgrid .dx-pivotgrid-vertical-headers td div > span {
+    .dx-pivotgrid .dx-pivotgrid-vertical-headers td div>span {
         font-weight: 600 !important;
         color: #46494A !important;
     }
 
-    .dx-pivotgrid .dx-pivotgrid-area-data tbody td > span {
+    .dx-pivotgrid .dx-pivotgrid-area-data tbody td>span {
         font-family: "Manrope";
         font-size: 12px;
         font-weight: 500;
@@ -971,21 +973,21 @@ $dark-grey: #717585;
             width: 10px;
             height: 10px
         }
-    
+
         &::-webkit-scrollbar-thumb {
             border: 1px solid rgba(0, 0, 0, 0);
             background-clip: padding-box;
             border-radius: 9999px;
             background-color: #D9D9D9;
         }
-    
+
         &::-webkit-scrollbar-track {
             background: #F3F3F3;
             border: 1px solid white;
             border-radius: 9999px;
         }
     }
-    
+
     .dx-area-field-container {
         .dx-pivotgrid-fields-area-head {
             td {
@@ -1024,13 +1026,6 @@ $dark-grey: #717585;
     width: 100%;
     margin: 0 auto;
 
-    * {
-        -webkit-text-transform: capitalize !important;
-        -moz-text-transform: capitalize !important;
-        -ms-text-transform: capitalize !important;
-        -o-text-transform: capitalize !important;
-        text-transform: capitalize !important;
-    }
 
     &::-webkit-scrollbar {
         width: 10px;
@@ -1054,7 +1049,7 @@ $dark-grey: #717585;
         width: 100%;
     }
 
-    .p-datatable > .p-datatable-wrapper {
+    .p-datatable>.p-datatable-wrapper {
         overflow-x: inherit;
     }
 
@@ -1117,7 +1112,7 @@ $dark-grey: #717585;
         border: 0px !important
     }
 
-    tbody tr td{
+    tbody tr td {
         font-size: 14px;
     }
 
@@ -1140,7 +1135,17 @@ $dark-grey: #717585;
     }
 }
 
-.header-content > .p-column-title > .pi::before {
+.dl-table-chart-header-container {
+
+    -webkit-text-transform: capitalize !important;
+    -moz-text-transform: capitalize !important;
+    -ms-text-transform: capitalize !important;
+    -o-text-transform: capitalize !important;
+    text-transform: capitalize !important;
+
+}
+
+.header-content>.p-column-title>.pi::before {
     font-size: inherit !important;
 }
 
@@ -1176,7 +1181,7 @@ $dark-grey: #717585;
     margin-left: 1px;
 }
 
-.red-warning-icon{
+.red-warning-icon {
     width: 100%;
     height: 100%;
     min-height: 25px;
@@ -1187,7 +1192,8 @@ $dark-grey: #717585;
 }
 
 
-.widget-title-tooltip-text, .header-message-error-tooltip-text {
+.widget-title-tooltip-text,
+.header-message-error-tooltip-text {
     text-transform: capitalize;
     font-family: 'Manrope';
     font-weight: 500;
@@ -1203,8 +1209,8 @@ $dark-grey: #717585;
     white-space: normal;
 }
 
-.title-tooltip-container-content > div,
-.header-message-error-tooltip-container-content > div {
+.title-tooltip-container-content>div,
+.header-message-error-tooltip-container-content>div {
     width: 8px !important;
     height: 4px !important;
 }
@@ -1231,12 +1237,17 @@ $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{
+.date-time-value-container {
     display: flex;
     flex-direction: row;
     gap: 10px;

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;
@@ -1783,19 +1875,19 @@ var TableChart = function TableChart(props) {
       return !isNullOrUndefined(columnValue) ? getNumberInSystemLocalFormat(Number(columnValue), decimalPlaces, decimalPlaces, true, isAbbreviationApplied) : "";
     }
 
-    return ConvertStringToPascalCaseHelper(columnValue);
+    return columnValue;
   };
 
   var cellTemplateBody = function cellTemplateBody(data, column) {
     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() {
@@ -1842,7 +1929,7 @@ var TableChart = function TableChart(props) {
         onClick: function onClick() {
           return sortTableData(column.FieldCode, column.IsCalculatedColumn);
         },
-        className: "header-content"
+        className: "header-content dl-table-chart-header-container"
       }, React__default.createElement("span", {
         style: {
           color: getTableFormattingPropertyValue("TableHeaderFontColor"),
@@ -1859,7 +1946,7 @@ var TableChart = function TableChart(props) {
       onClick: function onClick() {
         return sortTableData(column.FieldCode, column.IsCalculatedColumn);
       },
-      className: "header-content"
+      className: "header-content dl-table-chart-header-container"
     }, React__default.createElement("span", {
       style: {
         color: getTableFormattingPropertyValue("TableHeaderFontColor"),