logitude-dashboard-library 3.2.6 → 3.2.8

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

@@ -348,11 +348,11 @@ $dark-grey: #717585;
 }
 
 .kpi-custom-size {
-    -webkit-transform: scale(0.7);
-    -ms-transform: scale(0.7);
-    -o-transform: scale(0.7);
-    transform: scale(0.7);
-    margin-top: -4px;
+    -webkit-transform: scale(0.62);
+    -ms-transform: scale(0.62);
+    -o-transform: scale(0.62);
+    transform: scale(0.62);
+    margin-top: -12px;
 }
 
 .margin-top-6 {
@@ -547,7 +547,7 @@ $dark-grey: #717585;
     box-sizing: border-box;
     display: flex;
     place-content: flex-end flex-start;
-    align-items: flex-end;
+    align-items: center;
     max-width: 100%;
 }
 
@@ -558,7 +558,6 @@ $dark-grey: #717585;
 .dl-kpi-label-span{
     font-family: "Manrope";
     font-style: normal;
-    font-weight: 700;
     font-size: 16px;
     line-height: 120%;
     color: #292D30;
@@ -702,8 +701,7 @@ $dark-grey: #717585;
     font-size: 11px;
     line-height: 15px;
     color: #A4A4A4;
-    margin-left: 4.5px;
-    margin-bottom: 6px;
+    margin-left: 5px;
     flex-shrink: 0;
 }
 
@@ -786,6 +784,16 @@ $dark-grey: #717585;
         .p-column-title {
             font-weight: bold !important;
             font-size: 14px !important;
+
+            .pi {
+                font-size: 14px !important;
+            }
+        }
+
+        .header-content {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
         }
     }
 
@@ -836,10 +844,8 @@ $dark-grey: #717585;
 
 .dl-kpi-prev-container {
     display: flex;
-    align-content: flex-start;
-    align-items: flex-end;
-    place-content: flex-end flex-start;
-    justify-content: flex-start;
+    align-items: center;
+    justify-content: center;
     font-family: 'Manrope';
     font-style: normal;
     font-weight: 500;
@@ -852,7 +858,6 @@ $dark-grey: #717585;
     font-style: normal;
     font-weight: 500;
     font-size: 12px;
-    line-height: 15px;
     color: #292D30;
 }
 

package/dist/index.js

@@ -5,8 +5,8 @@ var React__default = _interopDefault(React);
 var reactGridLayout = require('react-grid-layout');
 var progressspinner = require('primereact/progressspinner');
 var axios = _interopDefault(require('axios'));
-var moment = _interopDefault(require('moment'));
 var uuid = require('uuid');
+var moment = _interopDefault(require('moment'));
 var datatable = require('primereact/datatable');
 var column = require('primereact/column');
 var ReactFC = _interopDefault(require('react-fusioncharts'));
@@ -253,70 +253,6 @@ function SvgRedWarning(props) {
   })));
 }
 
-var DateGroupCodes = {
-  Full_Date: 'Full Date',
-  Month: 'Month',
-  Quarter: 'Quarter',
-  Year: 'Year',
-  Month_Year: 'Month & Year',
-  Quarter_Year: 'Quarter & Year'
-};
-
-var getDateFormat = function getDateFormat(label, _format) {
-  if (!label) return label;
-
-  var _date = moment(label);
-
-  if (!_date || !_date.isValid()) return label;
-  return _date.format(_format);
-};
-
-var getQuarterYearFormat = function getQuarterYearFormat(label) {
-  if (!label) return label;
-
-  if (label.includes("/")) {
-    var result = label.split("/");
-    var quarterVal = result && result[1] ? result[1] : "";
-    var yearVal = result && result[0] ? result[0] : "";
-    return quarterVal + " " + yearVal;
-  }
-
-  return label;
-};
-
-var getLabelFormatByDateGroupType = function getLabelFormatByDateGroupType(label, widget, isSecondGrouping) {
-  if (isSecondGrouping === void 0) {
-    isSecondGrouping = false;
-  }
-
-  if (!widget) return label;
-  var groupFieldDataType = isSecondGrouping ? widget.SecondaryDateGroupCode : widget.DateGroupCode;
-  if (!groupFieldDataType) return label;
-
-  switch (groupFieldDataType) {
-    case DateGroupCodes.Full_Date:
-      return getDateFormat(label, "DD MMM YYYY");
-
-    case DateGroupCodes.Month:
-      return getDateFormat(label, "MMM");
-
-    case DateGroupCodes.Quarter:
-      return label;
-
-    case DateGroupCodes.Year:
-      return getDateFormat(label, "YYYY");
-
-    case DateGroupCodes.Month_Year:
-      return getDateFormat(label, "MMM YYYY");
-
-    case DateGroupCodes.Quarter_Year:
-      return getQuarterYearFormat(label);
-
-    default:
-      return label;
-  }
-};
-
 var isNullOrUndefined = function isNullOrUndefined(val) {
   return val == null || val == undefined;
 };
@@ -326,7 +262,7 @@ var isNullOrUndefinedOrEmpty = function isNullOrUndefinedOrEmpty(val) {
 };
 
 var KpiChart = function KpiChart(props) {
-  var _widget$current18;
+  var _widget$current16;
 
   var _useState = React.useState(true),
       isLoading = _useState[0],
@@ -437,6 +373,9 @@ var KpiChart = function KpiChart(props) {
     return React__default.createElement("div", {
       className: "dl-kpi-ratio-container"
     }, getArrowComponent(), React__default.createElement("div", {
+      style: {
+        fontSize: getKPIFormattingPropertyValue("PercentageFontSize", "px")
+      },
       className: 'dl-kpi-ratio-text'
     }, data === null || data === void 0 ? void 0 : data.Ratio, " %"));
   }
@@ -480,14 +419,22 @@ var KpiChart = function KpiChart(props) {
 
   function getPreviousValueComponent() {
     if (isNullOrUndefined(data) || isNullOrUndefined(data === null || data === void 0 ? void 0 : data.ComparisonValue) || isNullOrUndefined(data === null || data === void 0 ? void 0 : data.ComparisonLabel)) return "";
-    var labelFormatByDateGroupType = getLabelFormatByDateGroupType(data.ComparisonLabel, widget.current, false);
-    var labelFormated = !isNullOrUndefined(labelFormatByDateGroupType) ? labelFormatByDateGroupType : null;
-    var prevtext = labelFormated ? labelFormated + ": " + (data === null || data === void 0 ? void 0 : data.ComparisonValue) : "";
+    var formatedValue = data ? data.ComparisonLabel : "";
+    var comparisonValue = data ? data === null || data === void 0 ? void 0 : data.ComparisonValue : "";
     return React__default.createElement("div", {
       className: "dl-kpi-prev-container"
     }, React__default.createElement("div", {
+      style: {
+        color: getKPIFormattingPropertyValue("ComparisonValueFontColor"),
+        fontSize: getKPIFormattingPropertyValue("ComparisonValueFontSize", "px")
+      },
+      title: formatedValue,
       className: "dl-kpi-prev-text"
-    }, prevtext), (data === null || data === void 0 ? void 0 : data.ComparisonAbbreviationSymbol) && React__default.createElement("div", {
+    }, comparisonValue), (data === null || data === void 0 ? void 0 : data.ComparisonAbbreviationSymbol) && React__default.createElement("div", {
+      style: {
+        color: getKPIFormattingPropertyValue("ComparisonValueFontColor"),
+        fontSize: getKPIFormattingPropertyValue("ComparisonValueFontSize", "px")
+      },
       className: "dl-kpi-prev-abbreviationSymbol"
     }, data === null || data === void 0 ? void 0 : data.ComparisonAbbreviationSymbol));
   }
@@ -497,6 +444,10 @@ var KpiChart = function KpiChart(props) {
       className: "dl-kpi-no-data"
     }, "No data to display.");
     return React__default.createElement("div", {
+      style: {
+        color: getKPIFormattingPropertyValue("MainValueFontColor"),
+        fontSize: getKPIFormattingPropertyValue("MainValueFontSize", "px")
+      },
       className: "dl-kpi-value dl-kpi-textTrimming"
     }, data === null || data === void 0 ? void 0 : data.Value);
   }
@@ -505,19 +456,66 @@ var KpiChart = function KpiChart(props) {
     return React__default.createElement("div", {
       className: "dl-kpi-sub-container"
     }, getValueData(), (data === null || data === void 0 ? void 0 : data.AbbreviationSymbol) && React__default.createElement("div", {
+      style: {
+        color: getKPIFormattingPropertyValue("MainValueFontColor"),
+        fontSize: getKPIFormattingPropertyValue("MainValueFontSize", "px")
+      },
       className: "dl-kpi-abbreviationSymbol"
     }, data === null || data === void 0 ? void 0 : data.AbbreviationSymbol), widget.current && widget.current.ShowMeasureUnit && (data === null || data === void 0 ? void 0 : data.Unit) && React__default.createElement("div", {
+      style: {
+        color: getKPIFormattingPropertyValue("MainValueFontColor"),
+        fontSize: getKPIFormattingPropertyValue("MainValueFontSize", "px")
+      },
       className: "dl-kpi-unit"
     }, data === null || data === void 0 ? void 0 : data.Unit), getRatioComponent());
   }
 
+  var getPeriodLabelByPeriodCode = function getPeriodLabelByPeriodCode(code) {
+    if (!isNullOrUndefinedOrEmpty(code)) {
+      return code.replaceAll("_", " ");
+    }
+
+    return "";
+  };
+
+  var getLabelFromKPISettings = function getLabelFromKPISettings() {
+    if (widget.current && widget.current.KPIComparisonSettings && widget.current.KPIComparisonSettings.length) {
+      var kpiSettings = JSON.parse(widget.current.KPIComparisonSettings);
+      var PeriodDateFilter = kpiSettings ? kpiSettings.PeriodDateFilter : null;
+      return PeriodDateFilter && PeriodDateFilter.DateTimeValueCode ? getPeriodLabelByPeriodCode(PeriodDateFilter.DateTimeValueCode) : "";
+    }
+
+    return "";
+  };
+
+  var getKPIFormattingData = function getKPIFormattingData() {
+    var _widget$current14, _widget$current15;
+
+    return isNullOrUndefinedOrEmpty((_widget$current14 = widget.current) === null || _widget$current14 === void 0 ? void 0 : _widget$current14.KPIFormatSettings) ? {} : JSON.parse((_widget$current15 = widget.current) === null || _widget$current15 === void 0 ? void 0 : _widget$current15.KPIFormatSettings);
+  };
+
+  var getKPIFormattingPropertyValue = function getKPIFormattingPropertyValue(propertyName, unit) {
+    if (unit === void 0) {
+      unit = "";
+    }
+
+    var kpiFormattingData = getKPIFormattingData();
+    return kpiFormattingData && kpiFormattingData[propertyName] ? kpiFormattingData[propertyName] + unit : undefined;
+  };
+
   function getLabel() {
-    var labelFormated = getLabelFormatByDateGroupType(data.Label, widget.current, false);
+    var formatedValue = data ? data.Label : "";
+    var label = getLabelFromKPISettings();
     return React__default.createElement("div", {
       className: "dl-kpi-label-container"
     }, React__default.createElement("span", {
+      style: {
+        color: getKPIFormattingPropertyValue("MainPeriodFontColor"),
+        fontSize: getKPIFormattingPropertyValue("MainPeriodFontSize", "px")
+      },
+      title: formatedValue,
       className: "dl-kpi-label-span dl-kpi-textTrimming"
-    }, labelFormated));
+    }, label));
   }
 
   var getIsKPIHasSmallestHeight = function getIsKPIHasSmallestHeight() {
@@ -527,13 +525,9 @@ var KpiChart = function KpiChart(props) {
   };
 
   var isKPICustomResizeNeeded = function isKPICustomResizeNeeded() {
-    var _widget$current14, _widget$current15, _widget$current16, _widget$current17;
-
     if (!widget || !widget.current) return;
-    var isThereTitle = !isNullOrUndefined((_widget$current14 = widget.current) === null || _widget$current14 === void 0 ? void 0 : _widget$current14.Title) && ((_widget$current15 = widget.current) === null || _widget$current15 === void 0 ? void 0 : _widget$current15.Title.length) > 0;
-    var isThereSubTitle = !isNullOrUndefined((_widget$current16 = widget.current) === null || _widget$current16 === void 0 ? void 0 : _widget$current16.Subtitle) && ((_widget$current17 = widget.current) === null || _widget$current17 === void 0 ? void 0 : _widget$current17.Subtitle.length) > 0;
     var isKPIHasSmallestHeight = getIsKPIHasSmallestHeight();
-    return isThereTitle && isThereSubTitle && isKPIHasSmallestHeight;
+    return isKPIHasSmallestHeight;
   };
 
   return isLoading || !widget.current ? React__default.createElement("div", {
@@ -548,7 +542,7 @@ var KpiChart = function KpiChart(props) {
   })) : !error && widget.current ? React__default.createElement("div", {
     key: triggerId,
     onClick: kpiClick,
-    className: ((_widget$current18 = widget.current) === null || _widget$current18 === void 0 ? void 0 : _widget$current18.Alighnment) == "Left" ? "dl-kpi-container-click db-justify-content-flex-start" : "dl-kpi-container-click"
+    className: ((_widget$current16 = widget.current) === null || _widget$current16 === void 0 ? void 0 : _widget$current16.Alighnment) == "Left" ? "dl-kpi-container-click db-justify-content-flex-start" : "dl-kpi-container-click"
   }, React__default.createElement("div", {
     className: isKPICustomSizeNeeded ? "dl-kpi-container kpi-custom-size" : "dl-kpi-container"
   }, getLabel(), getValueComponent(), getPreviousValueComponent())) : React__default.createElement("div", {
@@ -664,7 +658,7 @@ var TableChart = function TableChart(props) {
           var key = field.FieldCode;
           var valueType = field.DataTypeCode;
 
-          var _value = valueType && (valueType == "Date" || valueType == "DateTime") ? getDateTimeValue(item[key]) : valueType == "Boolean" ? getBooleanStringValue(item[key]) : item[key];
+          var _value = valueType && valueType == "Boolean" ? getBooleanStringValue(item[key]) : item[key];
 
           _tableRow[key] = isNullOrUndefined(_value) ? "" : _value;
         });
@@ -715,16 +709,19 @@ var TableChart = function TableChart(props) {
     return field ? field.Id : null;
   };
 
-  var sortTableData = function sortTableData(e) {
-    setSortField(e.sortField);
-    setSortOrder(e.sortOrder);
+  var sortTableData = function sortTableData(sortedField) {
+    setSortField(sortedField);
+
+    var _sortOrder = sortOrder == 1 ? -1 : sortOrder == -1 ? 1 : 1;
+
+    setSortOrder(_sortOrder);
     var _widget = props.customChartProps.widget;
     var dashboardAnalyticsService = new DashboardAnalyticsService();
     _widget.onChange = undefined;
     _widget.PageIndex = 0;
     _widget.PageSize = 100;
-    _widget.ScreenSortBy = getSortFieldIdBySortFieldCode(e.sortField);
-    _widget.ScreenSortDirection = e.sortOrder == 1 ? 'asc' : e.sortOrder == -1 ? 'desc' : null;
+    _widget.ScreenSortBy = getSortFieldIdBySortFieldCode(sortedField);
+    _widget.ScreenSortDirection = _sortOrder == 1 ? 'asc' : _sortOrder == -1 ? 'desc' : null;
     _widget.EntityId = !isNullOrUndefinedOrEmpty(_widget.RelatedToEntityId) ? _widget.RelatedToEntityId : _widget.EntityId;
     setIsTableLoading(true);
     dashboardAnalyticsService.getTableData(_widget).then(function (res) {
@@ -749,6 +746,47 @@ var TableChart = function TableChart(props) {
     return false;
   };
 
+  var cellTemplateBody = function cellTemplateBody(data, column) {
+    if (!column || !column.FieldCode) return "";
+    return column.DataTypeCode == "DateTime" || column.DataTypeCode == "Date" ? getDateTimeValue(data[column.FieldCode]) : data[column.FieldCode];
+  };
+
+  var headerTemplate = function headerTemplate(column) {
+    var sortClassIcon = "";
+
+    if (sortField != column.FieldCode) {
+      return React__default.createElement("div", {
+        onClick: function onClick() {
+          return sortTableData(column.FieldCode);
+        },
+        className: "header-content"
+      }, React__default.createElement("span", {
+        className: "p-column-title"
+      }, column.DisplayName), canSort() && React__default.createElement("span", {
+        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";
+    }
+
+    return React__default.createElement("div", {
+      onClick: function onClick() {
+        return sortTableData(column.FieldCode);
+      },
+      className: "header-content"
+    }, React__default.createElement("span", {
+      className: "p-column-title"
+    }, column.DisplayName), canSort() && React__default.createElement("span", {
+      className: sortClassIcon
+    }));
+  };
+
   return isLoading ? React__default.createElement("div", {
     className: 'dl-full-hight dl-flex-content-center spinner-custome'
   }, React__default.createElement(progressspinner.ProgressSpinner, {
@@ -771,17 +809,17 @@ var TableChart = function TableChart(props) {
     className: "dl-tooltiptext"
   }, error))) : React__default.createElement(datatable.DataTable, {
     loading: isTableLoading,
-    sortField: sortField,
-    sortOrder: sortOrder,
-    onSort: sortTableData,
     value: tableData,
     responsiveLayout: "scroll"
   }, tableColumns.map(function (column$1, index) {
     return React__default.createElement(column.Column, {
-      sortable: canSort(),
       key: column$1.FieldCode + "_" + index,
-      field: column$1.FieldCode,
-      header: column$1.DisplayName
+      header: function header() {
+        return headerTemplate(column$1);
+      },
+      body: function body(data) {
+        return cellTemplateBody(data, column$1);
+      }
     });
   }));
 };
@@ -831,6 +869,70 @@ var CustomChart = function CustomChart(props) {
   }, project()));
 };
 
+var DateGroupCodes = {
+  Full_Date: 'Full Date',
+  Month: 'Month',
+  Quarter: 'Quarter',
+  Year: 'Year',
+  Month_Year: 'Month & Year',
+  Quarter_Year: 'Quarter & Year'
+};
+
+var getDateFormat = function getDateFormat(label, _format) {
+  if (!label) return label;
+
+  var _date = moment(label);
+
+  if (!_date || !_date.isValid()) return label;
+  return _date.format(_format);
+};
+
+var getQuarterYearFormat = function getQuarterYearFormat(label) {
+  if (!label) return label;
+
+  if (label.includes("/")) {
+    var result = label.split("/");
+    var quarterVal = result && result[1] ? result[1] : "";
+    var yearVal = result && result[0] ? result[0] : "";
+    return quarterVal + " " + yearVal;
+  }
+
+  return label;
+};
+
+var getLabelFormatByDateGroupType = function getLabelFormatByDateGroupType(label, widget, isSecondGrouping) {
+  if (isSecondGrouping === void 0) {
+    isSecondGrouping = false;
+  }
+
+  if (!widget) return label;
+  var groupFieldDataType = isSecondGrouping ? widget.SecondaryDateGroupCode : widget.DateGroupCode;
+  if (!groupFieldDataType) return label;
+
+  switch (groupFieldDataType) {
+    case DateGroupCodes.Full_Date:
+      return getDateFormat(label, "DD MMM YYYY");
+
+    case DateGroupCodes.Month:
+      return getDateFormat(label, "MMM");
+
+    case DateGroupCodes.Quarter:
+      return label;
+
+    case DateGroupCodes.Year:
+      return getDateFormat(label, "YYYY");
+
+    case DateGroupCodes.Month_Year:
+      return getDateFormat(label, "MMM YYYY");
+
+    case DateGroupCodes.Quarter_Year:
+      return getQuarterYearFormat(label);
+
+    default:
+      return label;
+  }
+};
+
 function buildToolTip(widget, value, seriesName, label, index) {
   var padding = widget.TypeCode == 'line' && index > 0 ? 'padding-top: 3px' : '';
   return "\n    <div style=\"min-width: 108px;" + padding + "\">\n        <div style=\"display: flex;align-items: center;margin-bottom: 6px;\">\n            <span style=\"margin: 0; min-height: 10px; min-width: 10px; height: 10px; width: 10px; background-color: transparent; border-radius: 50%; display: inline-block;\"></span>\n            <p style=\" margin: 0; margin-left: 4px; white-space: pre-line; font-family: 'Manrope'; font-style: normal;font-weight: 400; font-size: 11px; line-height: 100%;  color: #323232;\"> " + getTooltiplabel(label, seriesName) + "</p>\n        </div>\n        <hr style=\"margin: 0;border-top: 1px solid #F0F0F0;\">\n        <div style=\"display: flex;align-items: center;margin:0;margin-top: 6px;\">\n            <p style=\"margin: 0;font-family: 'Manrope'; white-space: pre-line; font-style: normal;font-weight: 400; font-size: 11px;line-height: 100%;color: #A4A4A4;\"> " + getMeasureType(seriesName) + "</p>\n            <p style=\"margin: 0;margin-left: 6px; white-space: pre-line; font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #323232;\">" + getTooltipValue(value) + "</p>\n            " + getTooltipPercentage(widget) + " </div>\n    </div>\n    ";