logitude-dashboard-library 3.2.27 → 3.2.29

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

@@ -1200,4 +1200,18 @@ $dark-grey: #717585;
     color: #1E4AC4 !important;
     cursor: pointer;
     text-decoration: underline;
+}
+
+.table-cell-datetime {
+    font-family: 'Manrope';
+    font-weight: 500;
+}
+
+.date-time-value-container{
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

package/dist/index.js

@@ -1332,13 +1332,26 @@ var TableChart = function TableChart(props) {
     return _value.charAt(0).toUpperCase() + _value.slice(1);
   };
 
-  var getDateTimeValue = function getDateTimeValue(value) {
+  var getDateTimeValue = function getDateTimeValue(value, datePart) {
+    if (datePart === void 0) {
+      datePart = null;
+    }
+
     if (!value) return value;
 
     var _date = moment(value);
 
     if (!_date || !_date.isValid()) return value;
-    return _date.format("DD MMM YYYY");
+
+    if (!datePart) {
+      return _date.format("DD MMM YYYY") + "  " + _date.format("HH:mm");
+    }
+
+    if (datePart == 'Date') {
+      return "" + _date.format("DD MMM YYYY");
+    } else {
+      return "" + _date.format("HH:mm");
+    }
   };
 
   var fillTableData = function fillTableData(tableData) {
@@ -1577,26 +1590,46 @@ var TableChart = function TableChart(props) {
 
   var cellTemplateBody = function cellTemplateBody(data, column) {
     if (!column || !column.FieldCode) return "";
-    return column.DataTypeCode == "DateTime" || column.DataTypeCode == "Date" ? React__default.createElement("span", {
-      title: getDateTimeValue(data[column.FieldCode]),
-      className: "table-cell",
-      style: {
-        color: getTableFormattingPropertyValue("TableCellFontColor"),
-        fontSize: getTableFormattingPropertyValue("TableCellFontSize", "px")
-      }
-    }, getDateTimeValue(data[column.FieldCode])) : React__default.createElement("span", {
-      onClick: function onClick() {
-        return tableCellClicked(data, column.FieldCode);
-      },
-      title: getCellValue(data, column),
-      className: "table-cell " + (isClickableCell(column.FieldCode) ? 'table-link-cell' : ''),
-      style: {
-        color: getTableFormattingPropertyValue("TableCellFontColor"),
-        backgroundColor: getCellPropertyByRule(column, data[column.FieldCode], 'RuleBackgroundColor'),
-        fontSize: getTableFormattingPropertyValue("TableCellFontSize", "px"),
-        "float": getCellFloatAlignment(column)
-      }
-    }, getCellValue(data, column));
+
+    if (column.DataTypeCode == "DateTime" || column.DataTypeCode == "Date") {
+      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]),
+        className: "date-time-value-container",
+        style: {
+          color: fontColor
+        }
+      }, React__default.createElement("span", {
+        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
+        }
+      }, getDateTimeValue(data[column.FieldCode], 'Time')));
+    } else {
+      return React__default.createElement("span", {
+        onClick: function onClick() {
+          return tableCellClicked(data, column.FieldCode);
+        },
+        title: getCellValue(data, column),
+        className: "table-cell " + (isClickableCell(column.FieldCode) ? 'table-link-cell' : ''),
+        style: {
+          color: getTableFormattingPropertyValue("TableCellFontColor"),
+          backgroundColor: getCellPropertyByRule(column, data[column.FieldCode], 'RuleBackgroundColor'),
+          fontSize: getTableFormattingPropertyValue("TableCellFontSize", "px"),
+          "float": getCellFloatAlignment(column)
+        }
+      }, getCellValue(data, column));
+    }
   };
 
   var headerTemplate = function headerTemplate(column) {