logitude-dashboard-library 3.1.20 → 3.1.21

package/dist/index.modern.js

@@ -2,8 +2,8 @@ import React__default, { createElement, useState, useRef, useEffect, forwardRef,
 import { WidthProvider, Responsive } from 'react-grid-layout';
 import { ProgressSpinner } from 'primereact/progressspinner';
 import axios from 'axios';
-import moment from 'moment';
 import { v4 } from 'uuid';
+import moment from 'moment';
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import ReactFC from 'react-fusioncharts';
@@ -250,70 +250,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;
 };
@@ -323,7 +259,7 @@ var isNullOrUndefinedOrEmpty = function isNullOrUndefinedOrEmpty(val) {
 };
 
 var KpiChart = function KpiChart(props) {
-  var _widget$current18;
+  var _widget$current16;
 
   var _useState = useState(true),
       isLoading = _useState[0],
@@ -434,6 +370,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, " %"));
   }
@@ -477,14 +416,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));
   }
@@ -494,6 +441,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);
   }
@@ -502,19 +453,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() {
@@ -524,13 +522,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", {
@@ -545,7 +539,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", {
@@ -872,6 +866,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    ";