logitude-dashboard-library 3.1.32 → 3.1.33

package/dist/features/Dashboard/ChartsComponents/FusionCharts/FusionChartObjectHelper.d.ts

@@ -85,6 +85,8 @@ export interface ChartInfo {
     drawCrossLine: string;
     palettecolors: string;
     plotHoverEffect: string;
+    numberSuffix: string | null;
+    sNumberSuffix: string | null;
 }
 export declare function getSeriesPositionColor(position: number): string | null;
 export declare function getSeriesHoverPositionColor(position: number): string | null;

package/dist/index.js

@@ -429,7 +429,7 @@ var KpiChart = function KpiChart(props) {
         fontSize: getKPIFormattingPropertyValue("ComparisonValueFontSize", "px")
       },
       className: "dl-kpi-prev-text"
-    }, comparisonValue), (data === null || data === void 0 ? void 0 : data.ComparisonAbbreviationSymbol) && React__default.createElement("div", {
+    }, "" + comparisonValue + (isPercentageMeasureField() ? "%" : "")), (data === null || data === void 0 ? void 0 : data.ComparisonAbbreviationSymbol) && React__default.createElement("div", {
       style: {
         color: getKPIFormattingPropertyValue("ComparisonValueFontColor"),
         fontSize: getKPIFormattingPropertyValue("ComparisonValueFontSize", "px")
@@ -444,6 +444,10 @@ var KpiChart = function KpiChart(props) {
     }, data === null || data === void 0 ? void 0 : data.Unit));
   }
 
+  var isPercentageMeasureField = function isPercentageMeasureField() {
+    return (widget === null || widget === void 0 ? void 0 : widget.current) && (widget === null || widget === void 0 ? void 0 : widget.current.WidgetMeasures) && (widget === null || widget === void 0 ? void 0 : widget.current.WidgetMeasures[0]) && (widget === null || widget === void 0 ? void 0 : widget.current.WidgetMeasures[0].MeasureFieldDataType) && (widget === null || widget === void 0 ? void 0 : widget.current.WidgetMeasures[0].MeasureFieldDataType) == 'Percentage';
+  };
+
   function getValueData() {
     if ((data === null || data === void 0 ? void 0 : data.Value) == null) return React__default.createElement("div", {
       className: "dl-kpi-no-data"
@@ -454,7 +458,7 @@ var KpiChart = function KpiChart(props) {
         fontSize: getKPIFormattingPropertyValue("MainValueFontSize", "px")
       },
       className: "dl-kpi-value dl-kpi-textTrimming"
-    }, data === null || data === void 0 ? void 0 : data.Value);
+    }, "" + (data === null || data === void 0 ? void 0 : data.Value) + (isPercentageMeasureField() ? "%" : ""));
   }
 
   function getValueComponent() {
@@ -832,8 +836,9 @@ var TableChart = function TableChart(props) {
     }
 
     var tableFormattingData = getTableConditionalRulesData();
+    var columnType = column.IsCalculatedColumn ? "CalculatedColumn" : "Field";
     var columnData = tableFormattingData.find(function (el) {
-      return el.FieldId == column.Id;
+      return el.FieldId == column.Id && el.FieldType == columnType;
     });
 
     if (!columnData || !columnData.FieldRules || columnData.FieldRules.length == 0) {
@@ -851,7 +856,7 @@ var TableChart = function TableChart(props) {
   };
 
   var getCellFloatAlignment = function getCellFloatAlignment(column) {
-    if (column.DataTypeCode == 'Decimal' || column.DataTypeCode == 'Integer' || column.DataTypeCode == 'Double' || column.DataTypeCode == 'SigDouble') {
+    if (column.DataTypeCode == 'Decimal' || column.DataTypeCode == 'Percentage' || column.DataTypeCode == 'Integer' || column.DataTypeCode == 'Double' || column.DataTypeCode == 'SigDouble') {
       return "right";
     }
 
@@ -859,7 +864,7 @@ 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;
+    var _data$column$FieldCod, _data$column$FieldCod2, _data$column$FieldCod3, _data$column$FieldCod4, _data$column$FieldCod5, _data$column$FieldCod6, _data$column$FieldCod7;
 
     if (!column || !column.FieldCode) return "";
     return column.DataTypeCode == "DateTime" || column.DataTypeCode == "Date" ? React__default.createElement("span", {
@@ -878,7 +883,7 @@ var TableChart = function TableChart(props) {
         fontSize: getTableFormattingPropertyValue("TableCellFontSize", "px"),
         "float": getCellFloatAlignment(column)
       }
-    }, (_data$column$FieldCod5 = data[column.FieldCode]) === null || _data$column$FieldCod5 === void 0 ? void 0 : _data$column$FieldCod5.Label);
+    }, column.DataTypeCode == "Percentage" ? (_data$column$FieldCod5 = data[column.FieldCode]) !== null && _data$column$FieldCod5 !== void 0 && _data$column$FieldCod5.Label ? ((_data$column$FieldCod6 = data[column.FieldCode]) === null || _data$column$FieldCod6 === void 0 ? void 0 : _data$column$FieldCod6.Label) + "%" : 0 + '%' : (_data$column$FieldCod7 = data[column.FieldCode]) === null || _data$column$FieldCod7 === void 0 ? void 0 : _data$column$FieldCod7.Label);
   };
 
   var headerTemplate = function headerTemplate(column) {
@@ -1048,7 +1053,7 @@ var getLabelFormatByDateGroupType = function getLabelFormatByDateGroupType(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    ";
+  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, seriesName) + "</p>\n            " + getTooltipPercentage(widget) + " </div>\n    </div>\n    ";
 }
 
 function getTooltipPercentage(widget) {
@@ -1062,8 +1067,8 @@ function getTooltiplabel(value, seriesMeasure) {
   return '$label';
 }
 
-function getTooltipValue(value) {
-  if (value) return value;
+function getTooltipValue(value, seriesMeasure) {
+  if (!isNullOrUndefined(value)) return seriesMeasure && seriesMeasure.MeasureFieldDataType == 'Percentage' ? value + "%" : value;
   return '$dataValue';
 }
 
@@ -1465,6 +1470,14 @@ var isGroupByFieldDateTime = function isGroupByFieldDateTime(GroupByFieldDataTyp
   return GroupByFieldDataType == "DateTime" || GroupByFieldDataType == "Date";
 };
 
+var isFirstMeasureTypePercentage = function isFirstMeasureTypePercentage(widget) {
+  return widget && widget.WidgetMeasures && widget.WidgetMeasures[0] && widget.WidgetMeasures[0].MeasureFieldDataType && widget.WidgetMeasures[0].MeasureFieldDataType == 'Percentage';
+};
+
+var isSecondMeasureTypePercentage = function isSecondMeasureTypePercentage(widget) {
+  return widget && widget.WidgetMeasures && widget.WidgetMeasures[1] && widget.WidgetMeasures[1].MeasureFieldDataType && widget.WidgetMeasures[1].MeasureFieldDataType == 'Percentage';
+};
+
 function getColumnObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = isGroupByFieldDateTime(widget.GroupByFieldDataType) ? "mscombi2D" : "scrollcombidy2d";
@@ -1551,6 +1564,7 @@ function getDefaultChartInfo(widget) {
     chart.minAngleForValue = "27";
   }
 
+  chart.numberSuffix = isFirstMeasureTypePercentage(widget) ? "%" : null;
   chart.palettecolors = "#369CFB,#4AC76F,#F6CF33,#32C7C7,#935BE0,#FAAD14,#EE5F77,#5D62B5, #29C3BE, #F2726F, #FFC533, #62B58F, #BC95DF, #67CDF2";
   chart.enableSlicing = "0";
   chart.enableRotation = "0";
@@ -1621,6 +1635,7 @@ function setDualyAxis(chartInfo, widget, seriesMeasures) {
   chartInfo.showDivLineSecondaryValue = "1";
   chartInfo.pYAxisNameBorderPadding = 0;
   chartInfo.sYAxisNameBorderPadding = 0;
+  chartInfo.sNumberSuffix = isSecondMeasureTypePercentage(widget) ? "%" : null;
   var textLength = Math.max(seriesMeasures[0].Name.length, seriesMeasures[1].Name.length);
   chartInfo.pYAxisName = getTitle((_seriesMeasures$ = seriesMeasures[0]) === null || _seriesMeasures$ === void 0 ? void 0 : _seriesMeasures$.Name, textLength);
   chartInfo.sYAxisname = getTitle((_seriesMeasures$2 = seriesMeasures[1]) === null || _seriesMeasures$2 === void 0 ? void 0 : _seriesMeasures$2.Name, textLength);