logitude-dashboard-library 3.1.26 → 3.1.27

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

@@ -278,7 +278,7 @@ $dark-grey: #717585;
 
     .header-contents {
         display: flex;
-        
+    
         .widget-titles-container {
             display: flex;
             flex-wrap: wrap;
@@ -326,12 +326,90 @@ $dark-grey: #717585;
                 width: 100%;
             }
         }
+
+        .widget-table-titles-container {
+            display: flex;
+            flex: 1;
+            align-items: center;
+            justify-content: flex-start;
+            width: calc(100% - 70px);
+            padding: 0px 12px;
+            min-height: 40px;
     
+            .title-container {
+                display: flex;
+                align-items: center;
+                justify-content: left;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: auto;
+                max-width: 35%;
+        
+                .title {
+                    text-transform: capitalize;
+                    font-family: 'Manrope', sans-serif;
+                    font-style: normal;
+                    color: #292D30;
+                    font-size: 12px;
+                    font-weight: 600;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    width: auto;
+                }
+            }
+        
+            .subtitle {
+                font-family: "Manrope", sans-serif;
+                font-style: normal;
+                color: #A4A4A4;
+                font-size: 12px;
+                font-weight: 600;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: auto;
+                flex: 1;
+            }
+
+            .titles-vertical-seeparator {
+                width: 1px;
+                height: 14px;
+                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;
+                }
+
+                & > span {
+                    font-size: 12px;
+                }
+            }
+        }
+
         .widget-options-container {
             display: flex;
             align-items: center;
             width: 68px;
             column-gap: 6px;
+            padding-top: 6px;
     
             svg {
                 width: 20px;
@@ -388,25 +466,6 @@ $dark-grey: #717585;
     align-items: flex-start;
 }
 
-.table-hint-container {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-
-    .table-rows-number-indicator {
-        margin: 4px 0px 2px 0px;
-        color: #939393;
-        font-size: 11px;
-        padding-left: 12px;
-    }
-    .show-more-records {
-        font-size: 11px;
-        color: #1967d2;
-        cursor: pointer;
-        margin: 3px 0px 2px 4px;
-    }
-}
-
 .filter-label {
     font-size: 12px;
     color: $dark-grey;
@@ -688,9 +747,10 @@ $dark-grey: #717585;
     display: flex;
     width: 100%;
     height: 100%;
-    padding: 0.5rem 1rem;
-    white-space: normal;
+    padding: 7px 12px;
     align-items: center;
+    word-break: break-word;
+    white-space: pre-line;
 }
 
 .dl-kpi-abbreviationSymbol {
@@ -748,12 +808,12 @@ $dark-grey: #717585;
 .dl-table-chart-container {
     overflow: auto;
     position: absolute;
-    top: 22px;
+    top: -1px;
     right: 0;
     left: 0;
     bottom: 0;
-    height: calc(100% - 35px);
-    width: calc(100% - 25px);
+    height: calc(100% - 10px);
+    width: 100%;
     margin: 0 auto;
 
     &::-webkit-scrollbar {
@@ -785,7 +845,7 @@ $dark-grey: #717585;
 
     td,
     th {
-        border: 1px solid #ddd;
+        border-bottom: 1px solid #E7E7E6 !important;
         padding: 8px;
     }
 
@@ -810,10 +870,14 @@ $dark-grey: #717585;
             display: flex;
             align-items: center;
             cursor: pointer;
-            padding: 1rem 1rem;
+            padding: 11px 12px;
         }
     }
 
+    th:not(:last-child) .header-content {
+        border-right: 1px solid #E7E7E6;
+    }
+
     td {
         border: 1px solid #ddd;
         padding: 0px !important;
@@ -832,16 +896,16 @@ $dark-grey: #717585;
         line-height: 10px;
     }
 
-    tbody tr td{
-        font-size: 14px;
+    tbody tr:last-child td {
+        border: 0px !important
     }
 
-    tr:nth-child(even) {
-        background-color: #f2f2f2;
+    tbody tr td{
+        font-size: 14px;
     }
 
     tr:hover {
-        background-color: #ddd;
+        background-color: #f3f3f3;
     }
 
     .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover,
@@ -925,4 +989,8 @@ $dark-grey: #717585;
 
 .fc__tooltip {
     max-width: 350px !important;
+}
+
+.border-bottom-light-white {
+    border-bottom: 1px solid #E7E7E6;
 }

package/dist/index.js

@@ -729,6 +729,7 @@ var TableChart = function TableChart(props) {
   };
 
   var sortTableData = function sortTableData(sortedField) {
+    if (!canSort()) return;
     setSortField(sortedField);
 
     var _sortOrder = sortOrder == 1 ? -1 : sortOrder == -1 ? 1 : 1;
@@ -853,6 +854,14 @@ var TableChart = function TableChart(props) {
     return !isNullOrUndefinedOrEmpty(firstValidRule[propertyName]) ? firstValidRule[propertyName] : defaultValue ? getTableFormattingPropertyValue(defaultValue) : undefined;
   };
 
+  var getCellContentAlignment = function getCellContentAlignment(column) {
+    if (column.DataTypeCode == 'Decimal' || column.DataTypeCode == 'Integer' || column.DataTypeCode == 'Double' || column.DataTypeCode == 'SigDouble') {
+      return "flex-end";
+    }
+
+    return "flex-start";
+  };
+
   var cellTemplateBody = function cellTemplateBody(data, column) {
     if (!column || !column.FieldCode) return "";
     return column.DataTypeCode == "DateTime" || column.DataTypeCode == "Date" ? React__default.createElement("span", {
@@ -866,13 +875,13 @@ var TableChart = function TableChart(props) {
       style: {
         color: getCellPropertyByRule(column, data[column.FieldCode], 'RuleFontColor', 'TableCellFontColor'),
         backgroundColor: getCellPropertyByRule(column, data[column.FieldCode], 'RuleBackgroundColor'),
-        fontSize: getTableFormattingPropertyValue("TableCellFontSize", "px")
+        fontSize: getTableFormattingPropertyValue("TableCellFontSize", "px"),
+        justifyContent: getCellContentAlignment(column)
       }
     }, data[column.FieldCode]);
   };
 
   var headerTemplate = function headerTemplate(column) {
-    var sortClassIcon = "";
 
     if (sortField != column.FieldCode) {
       return React__default.createElement("div", {
@@ -889,22 +898,7 @@ var TableChart = function TableChart(props) {
           fontSize: getTableFormattingPropertyValue("TableHeaderFontSize", "px")
         },
         className: "p-column-title"
-      }, column.DisplayName, canSort() && React__default.createElement("span", {
-        style: {
-          fontSize: getTableFormattingPropertyValue("TableHeaderFontSize", "px"),
-          width: getTableFormattingPropertyValue("TableHeaderFontSize", "px"),
-          height: getTableFormattingPropertyValue("TableHeaderFontSize", "px")
-        },
-        className: "p-sortable-column-icon p-ml-2 pi pi-fw pi-sort-alt"
-      })));
-    }
-
-    if (sortOrder == 1) {
-      sortClassIcon = "p-sortable-column-icon p-ml-2 pi pi-fw pi-sort-amount-up-alt";
-    } else if (sortOrder == -1) {
-      sortClassIcon = "p-sortable-column-icon p-ml-2 pi pi-fw pi-sort-amount-down";
-    } else {
-      sortClassIcon = "p-sortable-column-icon p-ml-2 pi pi-fw pi-sort-alt";
+      }, column.DisplayName));
     }
 
     return React__default.createElement("div", {
@@ -921,14 +915,7 @@ var TableChart = function TableChart(props) {
         fontSize: getTableFormattingPropertyValue("TableHeaderFontSize", "px")
       },
       className: "p-column-title"
-    }, column.DisplayName, canSort() && React__default.createElement("span", {
-      style: {
-        fontSize: getTableFormattingPropertyValue("TableHeaderFontSize", "px"),
-        width: getTableFormattingPropertyValue("TableHeaderFontSize", "px"),
-        height: getTableFormattingPropertyValue("TableHeaderFontSize", "px")
-      },
-      className: sortClassIcon
-    })));
+    }, column.DisplayName));
   };
 
   return isLoading ? React__default.createElement("div", {
@@ -969,7 +956,7 @@ var TableChart = function TableChart(props) {
 };
 
 var CustomChart = function CustomChart(props) {
-  var _props$widget2, _props$widget3, _props$widget4;
+  var _props$widget2;
 
   var project = function project() {
     var _props$widget;
@@ -990,26 +977,8 @@ var CustomChart = function CustomChart(props) {
     }
   };
 
-  var drilldownToTableData = function drilldownToTableData() {
-    props.onSelectDataPoint({
-      GroupById: undefined,
-      MeasureFieldId: undefined,
-      MeasureCode: undefined,
-      Formula: undefined,
-      Widget: props.widget,
-      GroupByIdSec: undefined
-    });
-  };
-
-  return React__default.createElement(React__default.Fragment, null, ((_props$widget2 = props.widget) === null || _props$widget2 === void 0 ? void 0 : _props$widget2.TypeCode) && ((_props$widget3 = props.widget) === null || _props$widget3 === void 0 ? void 0 : _props$widget3.TypeCode) == 'table' && React__default.createElement("div", {
-    className: "table-hint-container"
-  }, React__default.createElement("div", {
-    className: "table-rows-number-indicator"
-  }, "Showing the first 100 rows"), !props.isInEditMode && !props.isPreviewModeActive && React__default.createElement("div", {
-    onClick: drilldownToTableData,
-    className: "show-more-records"
-  }, "( Show More Records )")), React__default.createElement("div", {
-    className: props.widget && ((_props$widget4 = props.widget) === null || _props$widget4 === void 0 ? void 0 : _props$widget4.TypeCode) == 'table' ? "dl-custom-chart-container dl-table-chart-container" : "dl-custom-chart-container"
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: props.widget && ((_props$widget2 = props.widget) === null || _props$widget2 === void 0 ? void 0 : _props$widget2.TypeCode) == 'table' ? "dl-custom-chart-container dl-table-chart-container" : "dl-custom-chart-container"
   }, project()));
 };
 
@@ -2154,7 +2123,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;
+  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 = React.useRef();
 
@@ -2243,6 +2212,25 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     });
   };
 
+  var isTableWidget = function isTableWidget() {
+    return widget && widget.current && widget.current.TypeCode == 'table';
+  };
+
+  var getwidgetTitlesContainer = function getwidgetTitlesContainer() {
+    return isTableWidget() ? "widget-table-titles-container" : "widget-titles-container";
+  };
+
+  var drilldownToTableData = function drilldownToTableData() {
+    props.onSelectDataPoint({
+      GroupById: undefined,
+      MeasureFieldId: undefined,
+      MeasureCode: undefined,
+      Formula: undefined,
+      Widget: widget.current,
+      GroupByIdSec: undefined
+    });
+  };
+
   return React__default.createElement("div", {
     className: "dl-panel",
     key: props.el.i
@@ -2250,12 +2238,12 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     key: triggerId,
     className: "widget-header"
   }, React__default.createElement("div", {
-    className: "header-contents"
+    className: "header-contents " + (isTableWidget() ? "border-bottom-light-white" : "")
   }, React__default.createElement("div", {
     style: {
       cursor: props.isInEditMode ? "move" : "default"
     },
-    className: "widget-titles-container"
+    className: getwidgetTitlesContainer()
   }, React__default.createElement("div", {
     className: "title-container",
     style: {
@@ -2279,16 +2267,24 @@ 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))), React__default.createElement("div", {
-    className: (_widget$current9 = widget.current) !== null && _widget$current9 !== void 0 && _widget$current9.Subtitle && ((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.Subtitle.length) > 0 ? "subtitle" : "subtitle margin-top-4",
+  }, (_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", {
+    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",
     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', '')
+      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
     }
-  }, (_widget$current11 = widget.current) === null || _widget$current11 === void 0 ? void 0 : _widget$current11.Subtitle)), React__default.createElement("div", {
-    className: (_widget$current12 = widget.current) !== null && _widget$current12 !== void 0 && _widget$current12.Title && ((_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Title.length) > 0 ? "widget-options-container" : "widget-options-container margin-top-6"
-  }, props.isInEditMode ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SvgEditIcon, {
+  }, (_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"
+  }, React__default.createElement(SvgEditIcon, {
     onClick: function onClick() {
       return editWidget();
     }
@@ -2302,7 +2298,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
 
       return props.deleteBtnClicked((_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.key);
     }
-  })) : null))), React__default.createElement("div", {
+  })))), React__default.createElement("div", {
     className: "dl-dashboard-widget"
   }, GetChartComponent()));
 });