logitude-dashboard-library 3.1.28 → 3.1.30

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

@@ -332,9 +332,12 @@ $dark-grey: #717585;
             flex: 1;
             align-items: center;
             justify-content: flex-start;
-            width: calc(100% - 70px);
             padding: 0px 12px;
             min-height: 40px;
+            min-width: 100px;
+            width: 100%;
+            max-width: calc(100% - 170px);
+            overflow: hidden;
     
             .title-container {
                 display: flex;
@@ -344,7 +347,7 @@ $dark-grey: #717585;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 width: auto;
-                max-width: 35%;
+                max-width: 60%;
         
                 .title {
                     text-transform: capitalize;
@@ -370,7 +373,7 @@ $dark-grey: #717585;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 width: auto;
-                flex: 1;
+                max-width: 40%;
             }
 
             .titles-vertical-seeparator {
@@ -379,28 +382,30 @@ $dark-grey: #717585;
                 background: #D9D9D9;
                 margin: 0px 6px;
             }
+        }
 
-            .table-hint-container {
-                width: auto;
-                max-width: 300px;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-                min-width: 1px;
-                padding-top: 2px;
-                line-height: 11px;
-                font-size: 11px;
-                color: #A4A4A4;
-                padding-left: 12px;
-
-                .show-more-records {
-                    color: #5FAFDA;
-                    cursor: pointer;
-                }
+        .table-hint-container {
+            font-family: "Manrope";
+            width: auto;
+            max-width: 300px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            min-width: 1px;
+            padding-top: 2px;
+            line-height: 11px;
+            font-size: 11px;
+            color: #A4A4A4;
+            padding-right: 12px;
+            align-self: center;
+
+            .show-more-records {
+                color: #5FAFDA;
+                cursor: pointer;
+            }
 
-                & > span {
-                    font-size: 12px;
-                }
+            & > span {
+                font-size: 12px;
             }
         }
 
@@ -744,6 +749,7 @@ $dark-grey: #717585;
 }
 
 .table-cell {
+    font-family: 'Manrope';
     padding: 0px 6px;
     border-radius: 4px;
     white-space: nowrap;
@@ -843,27 +849,27 @@ $dark-grey: #717585;
         overflow-x: inherit;
     }
 
-
-    td,
-    th {
-        border-bottom: 1px solid #E7E7E6 !important;
-        padding: 8px;
-    }
-
     th {
         text-align: left;
         font-weight: bold;
         font-size: 14px;
         white-space: nowrap;
         padding: 0px !important;
+        position: sticky;
+        top: 0px;
+        z-index: 1;
+        border: 0px !important;
 
         .p-column-header-content {
             padding: 0;
+            border: 1px solid #E7E7E6;
+            border-width: 0 0 1px 0;
         }
 
         .p-column-title {
-            font-weight: bold !important;
-            font-size: 14px;
+            font-family: 'Manrope';
+            font-weight: 600 !important;
+            font-size: 13px;
             flex: 1;
         }
 
@@ -880,7 +886,8 @@ $dark-grey: #717585;
     }
 
     td {
-        border: 1px solid #ddd;
+        border: 1px solid #E7E7E6 !important;
+        border-width: 0 0 1px 0 !important;
         padding: 0px 6px !important;
         max-width: 1px;
         height: 36px;
@@ -994,4 +1001,8 @@ $dark-grey: #717585;
 
 .border-bottom-light-white {
     border-bottom: 1px solid #E7E7E6;
+}
+
+.padding-left-12 {
+    padding-left: 12px !important;
 }

package/dist/index.js

@@ -645,11 +645,14 @@ var TableChart = function TableChart(props) {
   };
 
   var getBooleanStringValue = function getBooleanStringValue(value) {
-    if (isNullOrUndefined(value)) return "";
+    if (isNullOrUndefined(value) || isNullOrUndefined(value.Label)) return "";
 
-    var _value = value + "";
+    var _value = value.Label + "";
 
-    return _value.charAt(0).toUpperCase() + _value.slice(1);
+    return {
+      Label: _value.charAt(0).toUpperCase() + _value.slice(1),
+      Value: _value.charAt(0).toUpperCase() + _value.slice(1)
+    };
   };
 
   var getDateTimeValue = function getDateTimeValue(value) {
@@ -679,7 +682,7 @@ var TableChart = function TableChart(props) {
 
           var _value = valueType && valueType == "Boolean" ? getBooleanStringValue(item[key]) : item[key];
 
-          _tableRow[key] = isNullOrUndefined(_value) ? "" : _value;
+          _tableRow[key] = isNullOrUndefined(_value) || isNullOrUndefined(_value.Value) && isNullOrUndefined(_value.Label) ? "" : _value;
         });
         tableRecords.push(_tableRow);
       });
@@ -859,22 +862,26 @@ var TableChart = function TableChart(props) {
   };
 
   var cellTemplateBody = function cellTemplateBody(data, column) {
+    var _data$column$FieldCod, _data$column$FieldCod2, _data$column$FieldCod3, _data$column$FieldCod4, _data$column$FieldCod5;
+
     if (!column || !column.FieldCode) return "";
     return column.DataTypeCode == "DateTime" || column.DataTypeCode == "Date" ? React__default.createElement("span", {
+      title: getDateTimeValue((_data$column$FieldCod = data[column.FieldCode]) === null || _data$column$FieldCod === void 0 ? void 0 : _data$column$FieldCod.Label),
       className: "table-cell",
       style: {
         color: getTableFormattingPropertyValue("TableCellFontColor"),
         fontSize: getTableFormattingPropertyValue("TableCellFontSize", "px")
       }
-    }, getDateTimeValue(data[column.FieldCode])) : React__default.createElement("span", {
+    }, getDateTimeValue((_data$column$FieldCod2 = data[column.FieldCode]) === null || _data$column$FieldCod2 === void 0 ? void 0 : _data$column$FieldCod2.Label)) : React__default.createElement("span", {
+      title: (_data$column$FieldCod3 = data[column.FieldCode]) === null || _data$column$FieldCod3 === void 0 ? void 0 : _data$column$FieldCod3.Label,
       className: "table-cell",
       style: {
         color: getTableFormattingPropertyValue("TableCellFontColor"),
-        backgroundColor: getCellPropertyByRule(column, data[column.FieldCode], 'RuleBackgroundColor'),
+        backgroundColor: getCellPropertyByRule(column, (_data$column$FieldCod4 = data[column.FieldCode]) === null || _data$column$FieldCod4 === void 0 ? void 0 : _data$column$FieldCod4.Value, 'RuleBackgroundColor'),
         fontSize: getTableFormattingPropertyValue("TableCellFontSize", "px"),
         "float": getCellFloatAlignment(column)
       }
-    }, data[column.FieldCode]);
+    }, (_data$column$FieldCod5 = data[column.FieldCode]) === null || _data$column$FieldCod5 === void 0 ? void 0 : _data$column$FieldCod5.Label);
   };
 
   var headerTemplate = function headerTemplate(column) {
@@ -2119,7 +2126,7 @@ function SvgCopyIcon(props) {
 }
 
 var WidgetCard = React.forwardRef(function (props, comRef) {
-  var _widget$current7, _widget$current8, _widget$current9, _widget$current10, _widget$current11, _widget$current12, _widget$current13, _widget$current14, _widget$current15, _widget$current16, _widget$current17;
+  var _widget$current11, _widget$current12, _widget$current13;
 
   var widget = React.useRef();
 
@@ -2227,6 +2234,31 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     });
   };
 
+  var isThereTitle = function isThereTitle() {
+    var _widget$current7, _widget$current8;
+
+    return ((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.Title) && ((_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.Title.length) > 0;
+  };
+
+  var isThereSubtitle = function isThereSubtitle() {
+    var _widget$current9, _widget$current10;
+
+    return ((_widget$current9 = widget.current) === null || _widget$current9 === void 0 ? void 0 : _widget$current9.Subtitle) && ((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.Subtitle.length) > 0;
+  };
+
+  var tableHintMessage = function tableHintMessage() {
+    return React__default.createElement("span", {
+      className: "table-hint-container " + (isTitleAligmentRight() ? "padding-left-12" : "")
+    }, React__default.createElement("span", null, "Showing the first 100 rows"), !props.isInEditMode && !props.isPreviewModeActive && React__default.createElement(React__default.Fragment, null, React__default.createElement("span", null, "("), React__default.createElement("span", {
+      onClick: drilldownToTableData,
+      className: "show-more-records"
+    }, " Show More Records "), React__default.createElement("span", null, ")")));
+  };
+
+  var isTitleAligmentRight = function isTitleAligmentRight() {
+    return widget && widget.current && widget.current.TitleAlignment && widget.current.TitleAlignment.toLowerCase() == 'right';
+  };
+
   return React__default.createElement("div", {
     className: "dl-panel",
     key: props.el.i
@@ -2235,9 +2267,11 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     className: "widget-header"
   }, React__default.createElement("div", {
     className: "header-contents " + (isTableWidget() ? "border-bottom-light-white" : "")
-  }, React__default.createElement("div", {
+  }, isTitleAligmentRight() && isTableWidget() && tableHintMessage(), React__default.createElement("div", {
     style: {
-      cursor: props.isInEditMode ? "move" : "default"
+      cursor: props.isInEditMode ? "move" : "default",
+      justifyContent: isTableWidget() ? getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined) : undefined,
+      flexDirection: isTitleAligmentRight() ? "row-reverse" : "row"
     },
     className: getwidgetTitlesContainer()
   }, React__default.createElement("div", {
@@ -2254,7 +2288,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
         color: getCSSPropertyValue(widget.current, 'TitleFontColor', ''),
         textAlign: getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined)
       }
-    }, (_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.Title),
+    }, (_widget$current11 = widget.current) === null || _widget$current11 === void 0 ? void 0 : _widget$current11.Title),
     position: ['top center'],
     arrowStyle: {
       color: '#262626'
@@ -2263,23 +2297,18 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     on: ['hover', 'focus']
   }, React__default.createElement("span", {
     className: "widget-title-tooltip-text"
-  }, (_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.Title))), isTableWidget() && ((_widget$current9 = widget.current) === null || _widget$current9 === void 0 ? void 0 : _widget$current9.Title) && ((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.Title.length) > 0 && React__default.createElement("div", {
+  }, (_widget$current12 = widget.current) === null || _widget$current12 === void 0 ? void 0 : _widget$current12.Title))), isTableWidget() && isThereTitle() && isThereSubtitle() && React__default.createElement("div", {
     className: "titles-vertical-seeparator"
   }), React__default.createElement("div", {
-    className: (_widget$current11 = widget.current) !== null && _widget$current11 !== void 0 && _widget$current11.Subtitle && ((_widget$current12 = widget.current) === null || _widget$current12 === void 0 ? void 0 : _widget$current12.Subtitle.length) > 0 ? "subtitle" : "subtitle margin-top-4",
+    className: isThereSubtitle() ? "subtitle" : "subtitle margin-top-4",
     style: {
       fontSize: getCSSPropertyValue(widget.current, 'SubtitleFontSize', 'px'),
       textAlign: getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined),
       color: getCSSPropertyValue(widget.current, 'SubtitleFontColor', ''),
-      minWidth: (_widget$current13 = widget.current) !== null && _widget$current13 !== void 0 && _widget$current13.Subtitle && ((_widget$current14 = widget.current) === null || _widget$current14 === void 0 ? void 0 : _widget$current14.Subtitle.length) > 0 && isTableWidget() ? '5%' : undefined
+      minWidth: isThereSubtitle() && isTableWidget() ? '5%' : undefined
     }
-  }, (_widget$current15 = widget.current) === null || _widget$current15 === void 0 ? void 0 : _widget$current15.Subtitle), isTableWidget() && React__default.createElement("span", {
-    className: "table-hint-container"
-  }, React__default.createElement("span", null, "Showing the first 100 rows"), !props.isInEditMode && !props.isPreviewModeActive && React__default.createElement(React__default.Fragment, null, React__default.createElement("span", null, "("), React__default.createElement("span", {
-    onClick: drilldownToTableData,
-    className: "show-more-records"
-  }, " Show More Records "), React__default.createElement("span", null, ")")))), props.isInEditMode && React__default.createElement("div", {
-    className: (_widget$current16 = widget.current) !== null && _widget$current16 !== void 0 && _widget$current16.Title && ((_widget$current17 = widget.current) === null || _widget$current17 === void 0 ? void 0 : _widget$current17.Title.length) > 0 ? "widget-options-container" : "widget-options-container margin-top-6"
+  }, (_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Subtitle)), !isTitleAligmentRight() && isTableWidget() && tableHintMessage(), props.isInEditMode && React__default.createElement("div", {
+    className: isThereTitle() ? "widget-options-container" : "widget-options-container margin-top-6"
   }, React__default.createElement(SvgEditIcon, {
     onClick: function onClick() {
       return editWidget();