logitude-dashboard-library 3.2.41 → 3.2.42

package/dist/Utils/General.d.ts

@@ -1,3 +1,4 @@
+import { ReactWidgetPM } from "../types/widget";
 declare const isNullOrUndefined: (val: any) => boolean;
 declare const isNullOrUndefinedOrEmpty: (val: any) => boolean;
 declare const getGlobalNumberFormatting: () => {
@@ -5,7 +6,7 @@ declare const getGlobalNumberFormatting: () => {
     decimalSeparator: string;
 };
 declare const isValueInteger: (measureCode: string | null | undefined, measureFieldType: string | null | undefined) => boolean;
-declare const getTruncatedValue: (value: number | null | undefined | any, decimalDigitsCount?: number) => number | null | undefined;
-declare const getNumberInSystemLocalFormat: (value: number | null | undefined, decimalDigitsCount?: number, minimumFractionDigits?: number, isValueTruncated?: boolean) => string;
+declare const getTruncatedValue: (value: number | null | undefined | any, widget: ReactWidgetPM) => number | null | undefined;
+declare const getNumberInSystemLocalFormat: (value: number | null | undefined, decimalDigitsCount?: number, minimumFractionDigits?: number, isValueTruncated?: boolean, applyAbbreviation?: boolean) => string;
 declare const ConvertStringToPascalCaseHelper: (stringValue: string) => string;
 export { isNullOrUndefined, isNullOrUndefinedOrEmpty, getGlobalNumberFormatting, getNumberInSystemLocalFormat, ConvertStringToPascalCaseHelper, isValueInteger, getTruncatedValue };

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

@@ -9,7 +9,7 @@ $red: #F74E49;
 $dark-grey: #717585;
 
 .dl-dashboard-body {
-    background: #F3F3F3;
+    background: #f3f4f5;
     height: 100%;
     padding: 2px;
     margin: 0;
@@ -658,12 +658,12 @@ $dark-grey: #717585;
     font-weight: bold;
 }
 
-.db-fc-container {
+.db-fc-parent-container {
     width: 100%;
     height: calc(100% - 5px);
 }
 
-.db-fc-parent-container {
+.db-fc-container {
     width: 100%;
     height: calc(100% - 5px);
 }
@@ -674,6 +674,7 @@ $dark-grey: #717585;
     fill: #323232 !important;
     fill-opacity: 100 !important;
 }
+
 .db-fc-container tspan {
     font-family: 'Manrope' !important;
     font-size: inherit !important;
@@ -691,6 +692,34 @@ $dark-grey: #717585;
     height: 100%;
 }
 
+.db-fc-container-guage {
+    width: 100%;
+    height: calc(100% - 5px);
+}
+
+.db-fc-container-guage text {
+    font-family: 'Manrope' !important;
+    font-size: inherit !important;
+    fill-opacity: 100 !important;
+}
+
+.db-fc-container-guage tspan {
+    font-family: 'Manrope' !important;
+    font-size: inherit !important;
+    fill: #323232 !important;
+    fill-opacity: 100 !important;
+}
+
+.db-fc-container-guage * {
+    font-family: 'Manrope' !important;
+    // font-size: 10px !important;
+}
+
+.db-fc-container-guage>*:first-child {
+    width: 100%;
+    height: 100%;
+}
+
 .dl-line {
     border-top: 1px solid #E7E7E7;
     margin-left: 12px;

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

@@ -2,4 +2,4 @@ import { ChartObject } from "fusioncharts";
 import { SeriesMeasure } from "../../../../types/SeriesMeasure";
 import { ReactWidgetPM } from "../../../../types/widget";
 export declare function BuildFusionChartObject(seriesMeasures: SeriesMeasure[], widget: ReactWidgetPM): ChartObject;
-export declare const getGaugeObject: (data: any, widget: ReactWidgetPM) => ChartObject;
+export declare const getGaugeObject: (data: any, widget: ReactWidgetPM, isPreviewModeActive?: boolean | undefined) => ChartObject;

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

@@ -93,7 +93,12 @@ export interface ChartInfo {
     manageResize: string | null;
     valueBelowPivot: string | null;
     showValue: string | null;
+    valueFontSize: string | null;
+    valueFontColor: string | null;
     autoScale: string | null;
+    formatNumber: string | null;
+    forceDecimals: string | null;
+    decimals: string | null;
 }
 export declare function getSeriesPositionColor(position: number): string | null;
 export declare function getSeriesHoverPositionColor(position: number): string | null;

package/dist/index.js

@@ -856,16 +856,12 @@ var isValueInteger = function isValueInteger(measureCode, measureFieldType) {
   return false;
 };
 
-var getTruncatedValue = function getTruncatedValue(value, decimalDigitsCount) {
-  if (decimalDigitsCount === void 0) {
-    decimalDigitsCount = 2;
-  }
-
+var getTruncatedValue = function getTruncatedValue(value, widget) {
   if (value == null || value == undefined || isNaN(value)) return value;
-  return truncateDecimals(value, decimalDigitsCount);
+  return truncateDecimals(value, widget.DecimalPlaces || 0);
 };
 
-var getNumberInSystemLocalFormat = function getNumberInSystemLocalFormat(value, decimalDigitsCount, minimumFractionDigits, isValueTruncated) {
+var getNumberInSystemLocalFormat = function getNumberInSystemLocalFormat(value, decimalDigitsCount, minimumFractionDigits, isValueTruncated, applyAbbreviation) {
   if (decimalDigitsCount === void 0) {
     decimalDigitsCount = -1;
   }
@@ -878,6 +874,10 @@ var getNumberInSystemLocalFormat = function getNumberInSystemLocalFormat(value,
     isValueTruncated = true;
   }
 
+  if (applyAbbreviation === void 0) {
+    applyAbbreviation = false;
+  }
+
   if (value == null || value == undefined || isNaN(value)) return value + "";
   var decimalParts = value.toString().split(".");
   var maxFractionDigits = decimalParts[1] ? decimalParts[1].length : 0;
@@ -889,6 +889,18 @@ var getNumberInSystemLocalFormat = function getNumberInSystemLocalFormat(value,
     value = truncateDecimals(value, decimalDigitsCount);
   }
 
+  var abbreviationSymbol = null;
+
+  if (applyAbbreviation) {
+    if (Math.abs(value) >= 1000 && Math.abs(value) < 1000000) {
+      value = value / 1000;
+      abbreviationSymbol = "K";
+    } else if (Math.abs(value) >= 1000000) {
+      value = value / 1000000;
+      abbreviationSymbol = "M";
+    }
+  }
+
   var _val = value.toLocaleString('en-US', {
     minimumFractionDigits: minimumFractionDigits,
     maximumFractionDigits: decimalDigitsCount
@@ -900,7 +912,7 @@ var getNumberInSystemLocalFormat = function getNumberInSystemLocalFormat(value,
     _formattedValue = _formattedValue.replaceAll(".", "#");
     _formattedValue = _formattedValue.replaceAll("*", _numberSeparatorSettings.thousandsSeparator);
     _formattedValue = _formattedValue.replaceAll("#", _numberSeparatorSettings.decimalSeparator);
-    return _formattedValue;
+    return applyAbbreviation && abbreviationSymbol ? "" + _formattedValue + abbreviationSymbol : _formattedValue;
   }
 
   return value + "";
@@ -1756,17 +1768,19 @@ var TableChart = function TableChart(props) {
     }
 
     var columnValue = data[column.FieldCode];
+    var decimalPlaces = (widget === null || widget === void 0 ? void 0 : widget.DecimalPlaces) || 0;
+    var isAbbreviationApplied = (widget === null || widget === void 0 ? void 0 : widget.UseNumberAbbreviation) || false;
 
     if (FieldDataType.isPercentage(column.DataTypeCode)) {
-      return !isNullOrUndefined(columnValue) ? getNumberInSystemLocalFormat(Number(columnValue), 2, 2) + "%" : 0 + '%';
+      return !isNullOrUndefined(columnValue) ? getNumberInSystemLocalFormat(Number(columnValue), decimalPlaces, decimalPlaces, true, isAbbreviationApplied) + "%" : 0 + '%';
     }
 
     if (FieldDataType.isInteger(column.DataTypeCode)) {
-      return !isNullOrUndefined(columnValue) ? getNumberInSystemLocalFormat(Number(columnValue), 0, 0, false) : "";
+      return !isNullOrUndefined(columnValue) ? getNumberInSystemLocalFormat(Number(columnValue), decimalPlaces, decimalPlaces, false, isAbbreviationApplied) : "";
     }
 
     if (FieldDataType.isNumericType(column.DataTypeCode)) {
-      return !isNullOrUndefined(columnValue) ? getNumberInSystemLocalFormat(Number(columnValue), 2, 2) : "";
+      return !isNullOrUndefined(columnValue) ? getNumberInSystemLocalFormat(Number(columnValue), decimalPlaces, decimalPlaces, true, isAbbreviationApplied) : "";
     }
 
     return ConvertStringToPascalCaseHelper(columnValue);
@@ -1817,6 +1831,8 @@ var TableChart = function TableChart(props) {
   };
 
   var headerTemplate = function headerTemplate(column) {
+    var _widget = props.customChartProps.widget;
+    var showMeasureUnit = _widget.ShowMeasureUnit || false;
 
     if (sortField != column.FieldCode) {
       return React__default.createElement("div", {
@@ -1833,7 +1849,7 @@ var TableChart = function TableChart(props) {
           fontSize: getTableFormattingPropertyValue("TableHeaderFontSize", "px")
         },
         className: "p-column-title"
-      }, column.DisplayName));
+      }, column.MeasureUnit && showMeasureUnit ? column.DisplayName + " (" + column.MeasureUnit + ")" : column.DisplayName));
     }
 
     return React__default.createElement("div", {
@@ -1850,7 +1866,7 @@ var TableChart = function TableChart(props) {
         fontSize: getTableFormattingPropertyValue("TableHeaderFontSize", "px")
       },
       className: "p-column-title"
-    }, column.DisplayName));
+    }, column.MeasureUnit && showMeasureUnit ? column.DisplayName + " (" + column.MeasureUnit + ")" : column.DisplayName));
   };
 
   return isLoading ? React__default.createElement("div", {
@@ -2271,10 +2287,10 @@ function buildToolTip(widget, value, seriesMeasure, label, index, groupbyId, sec
   }
 
   var padding = widget.TypeCode == 'line' && index > 0 ? 'padding-top: 3px' : '';
-  var customToolTip = "\n    <div style=\"min-width: 108px;" + padding + "\">\n\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, seriesMeasure) + "</p>\n        </div>\n\n        <hr style=\"margin: 0;border-top: 1px solid #F0F0F0;\">\n\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(seriesMeasure) + "</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: #A4A4A4;\">" + getTooltipValue(value, seriesMeasure) + "</p>\n            " + getPieDonutToolTipPercentage(widget, seriesMeasure, groupbyId, secGroupbyId) + " </div> ";
+  var customToolTip = "\n    <div style=\"min-width: 108px;" + padding + "\">\n\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, seriesMeasure) + "</p>\n        </div>\n\n        <hr style=\"margin: 0;border-top: 1px solid #F0F0F0;\">\n\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(seriesMeasure) + "</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: #A4A4A4;\">" + getTooltipValue(value, seriesMeasure, widget) + "</p>\n            " + getPieDonutToolTipPercentage(widget, seriesMeasure, groupbyId, secGroupbyId) + " </div> ";
 
   if (RenderStackedChartTotalsAndPercentages(widget, seriesMeasure)) {
-    customToolTip += "<div>\n\n            <hr style=\"margin-top: 6px;border-top: 1px solid #F0F0F0;\">\n\n            <div style=\"display: flex; flex-direction: column; gap: 6px; flex-d 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;\"> " + getGroupValuePercentage(seriesMeasure, groupbyId, secGroupbyId) + "</p>\n            </div>\n\n            <hr style=\"margin-top: 6px;border-top: 1px solid #F0F0F0;\">\n\n            <div style=\"display: flex; flex-direction: column; gap: 6px; flex-d align-items: center;margin:0;margin-top: 6px;\">\n                <p style=\"margin: 0;white-space: pre-line; font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #A4A4A4;\">" + getSumOfGroupValues(seriesMeasure, groupbyId) + "</p>\n            </div>\n\n        </div>";
+    customToolTip += "<div>\n\n            <hr style=\"margin-top: 6px;border-top: 1px solid #F0F0F0;\">\n\n            <div style=\"display: flex; flex-direction: column; gap: 6px; flex-d 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;\"> " + getGroupValuePercentage(seriesMeasure, groupbyId, secGroupbyId, widget) + "</p>\n            </div>\n\n            <hr style=\"margin-top: 6px;border-top: 1px solid #F0F0F0;\">\n\n            <div style=\"display: flex; flex-direction: column; gap: 6px; flex-d align-items: center;margin:0;margin-top: 6px;\">\n                <p style=\"margin: 0;white-space: pre-line; font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #A4A4A4;\">" + getSumOfGroupValues(seriesMeasure, groupbyId, widget) + "</p>\n            </div>\n\n        </div>";
   }
 
   customToolTip += "</div>";
@@ -2289,31 +2305,33 @@ function RenderStackedChartTotalsAndPercentages(widget, seriesMeasures) {
   return widget.IsStacked && (seriesMeasures.MeasureCode === MeasureCode.Count || seriesMeasures.MeasureCode === MeasureCode.Sum);
 }
 
-function getGroupValuePercentage(seriesMeasures, groupbyId, secGroupbyId) {
+function getGroupValuePercentage(seriesMeasures, groupbyId, secGroupbyId, widget) {
   if (!seriesMeasures) {
     return;
   }
 
-  var percentageValueInLocalFormat = getPercentageGroupValueAsNumber(seriesMeasures, groupbyId, secGroupbyId);
+  var percentageValueInLocalFormat = getPercentageGroupValueAsNumber(seriesMeasures, groupbyId, secGroupbyId, widget);
   return "<span style=\"margin-right:6px;\">Percentage:</span>" + percentageValueInLocalFormat + "%";
 }
 
-function getSumOfGroupValues(seriesMeasure, groupbyId) {
+function getSumOfGroupValues(seriesMeasure, groupbyId, widget) {
   if (!seriesMeasure) {
     return "";
   }
 
+  var decimalPlaces = (widget === null || widget === void 0 ? void 0 : widget.DecimalPlaces) || 0;
   var total = getSumOfGroupValuesAsNumber(seriesMeasure, groupbyId);
-  return "<span style=\"margin-right:6px;\">Total:</span>" + getNumberInSystemLocalFormat(total, 2, 0);
+  return "<span style=\"margin-right:6px;\">Total:</span>" + getNumberInSystemLocalFormat(total, decimalPlaces, decimalPlaces, true);
 }
 
-function getPercentageGroupValueAsNumber(seriesMeasure, groupbyId, secGroupbyId) {
+function getPercentageGroupValueAsNumber(seriesMeasure, groupbyId, secGroupbyId, widget) {
   var _seriesMeasure$Values;
 
   if (!seriesMeasure) {
     return;
   }
 
+  var decimalPlaces = (widget === null || widget === void 0 ? void 0 : widget.DecimalPlaces) || 0;
   var total = getSumOfGroupValuesAsNumber(seriesMeasure, groupbyId);
   var value = (_seriesMeasure$Values = seriesMeasure.Values.filter(function (v) {
     return v.GroupById === groupbyId && v.GroupByIdSec === secGroupbyId;
@@ -2321,7 +2339,7 @@ function getPercentageGroupValueAsNumber(seriesMeasure, groupbyId, secGroupbyId)
   var percentageValueInLocalFormat = "0.00";
 
   if (total !== 0 && value) {
-    percentageValueInLocalFormat = getNumberInSystemLocalFormat(value / total * 100, 2, 0, false);
+    percentageValueInLocalFormat = getNumberInSystemLocalFormat(value / total * 100, decimalPlaces, decimalPlaces, false);
   }
 
   return percentageValueInLocalFormat;
@@ -2360,17 +2378,18 @@ function getPieDonutToolTipPercentage(widget, seriesMeasures, groupbyId, secGrou
     return "";
   }
 
-  var percentageValueInLocalFormat = getDonutPiePercentageGroupValueAsNumber(seriesMeasures, groupbyId, secGroupbyId);
+  var percentageValueInLocalFormat = getDonutPiePercentageGroupValueAsNumber(seriesMeasures, groupbyId, secGroupbyId, widget);
   return "<p style=\"margin: 0;margin-left: 2px;font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #A4A4A4;flex: none; order: 1;flex-grow: 0;\">(" + percentageValueInLocalFormat + ")%</p>";
 }
 
-function getDonutPiePercentageGroupValueAsNumber(seriesMeasure, groupbyId, secGroupbyId) {
+function getDonutPiePercentageGroupValueAsNumber(seriesMeasure, groupbyId, secGroupbyId, widget) {
   var _seriesMeasure$Values2;
 
   if (!seriesMeasure) {
     return;
   }
 
+  var decimalPlaces = (widget === null || widget === void 0 ? void 0 : widget.DecimalPlaces) || 0;
   var total = getSumOfValuesAsNumber(seriesMeasure);
   var value = (_seriesMeasure$Values2 = seriesMeasure.Values.filter(function (v) {
     return v.GroupById === groupbyId && v.GroupByIdSec === secGroupbyId;
@@ -2378,7 +2397,7 @@ function getDonutPiePercentageGroupValueAsNumber(seriesMeasure, groupbyId, secGr
   var percentageValueInLocalFormat = "0.00";
 
   if (total !== 0 && value) {
-    percentageValueInLocalFormat = getNumberInSystemLocalFormat(value / total * 100, 2, 0, false);
+    percentageValueInLocalFormat = getNumberInSystemLocalFormat(value / total * 100, decimalPlaces, decimalPlaces, false);
   }
 
   return percentageValueInLocalFormat;
@@ -2390,16 +2409,18 @@ function getTooltiplabel(value, seriesMeasure) {
   return '$label';
 }
 
-function getTooltipValue(value, seriesMeasure) {
+function getTooltipValue(value, seriesMeasure, widget) {
   if (isNullOrUndefined(value)) {
     return '$dataValue';
   }
 
+  var decimalPlaces = (widget === null || widget === void 0 ? void 0 : widget.DecimalPlaces) || 0;
+
   if (FieldDataType.isPercentage(seriesMeasure === null || seriesMeasure === void 0 ? void 0 : seriesMeasure.MeasureFieldDataType)) {
-    return getNumberInSystemLocalFormat(value, 2, 0) + "%";
+    return getNumberInSystemLocalFormat(value, decimalPlaces, decimalPlaces, true) + "%";
   }
 
-  return getNumberInSystemLocalFormat(value, 2, 0);
+  return getNumberInSystemLocalFormat(value, decimalPlaces, decimalPlaces, true);
 }
 
 function getMeasureType(seriesMeasure) {
@@ -2465,7 +2486,7 @@ function buildDataSource(values, widget) {
   var series = values[0];
   data = series.Values.map(function (e) {
     var item = {
-      value: getTruncatedValue(e.Value),
+      value: getTruncatedValue(e.Value, widget),
       label: getLabelFormatByDateGroupType(e.Label, widget, false),
       id: {
         GroupById: e.GroupById,
@@ -2485,7 +2506,7 @@ function buildDataSet(seriesMeasures, widget) {
   seriesMeasures.forEach(function (seriesMeasure) {
     var datas = seriesMeasure.Values.map(function (e, index) {
       return {
-        value: getTruncatedValue(e.Value),
+        value: getTruncatedValue(e.Value, widget),
         id: {
           GroupById: e.GroupById,
           MeasureFieldId: seriesMeasure.MeasureFieldId,
@@ -2583,7 +2604,7 @@ function buildStackedGroupData(secGroup, series, widget) {
       return x.GroupById == group.code && x.GroupByIdSec == secGroup.code;
     })) === null || _series$Values$find === void 0 ? void 0 : _series$Values$find.Value;
     data.push({
-      value: getTruncatedValue(value),
+      value: getTruncatedValue(value, widget),
       id: {
         GroupById: group.code,
         MeasureFieldId: series.MeasureFieldId,
@@ -2591,7 +2612,7 @@ function buildStackedGroupData(secGroup, series, widget) {
         MeasureCode: series.MeasureCode,
         Formula: series.Formula
       },
-      tooltext: buildToolTip(widget, null, series, group.label + " - " + secGroup.label, 0, group.code, secGroup.code)
+      tooltext: buildToolTip(widget, value, series, group.label + " - " + secGroup.label, 0, group.code, secGroup.code)
     });
   });
   return data;
@@ -2680,13 +2701,15 @@ var getWidgetRanges = function getWidgetRanges(widget, value) {
   return gaugeRanges;
 };
 
-var getGaugeObject = function getGaugeObject(data, widget) {
+var getGaugeObject = function getGaugeObject(data, widget, isPreviewModeActive) {
   var fusionObject = getDefaultChartobject();
   fusionObject.type = 'angulargauge';
   var chartInfo = getDefaultChartInfo(widget);
   chartInfo.manageResize = "1";
   chartInfo.valueBelowPivot = "1";
-  chartInfo.showValue = "1";
+  chartInfo.showValue = widget.ShowValue ? "1" : '0';
+  chartInfo.valueFontSize = widget.ShowValue ? widget.ValueFontSize : null;
+  chartInfo.valueFontColor = widget.ShowValue ? widget.ValueFontColor : null;
   chartInfo.autoScale = "1";
   chartInfo.chartTopMargin = "0";
   chartInfo.chartBottomMargin = "0";
@@ -2700,7 +2723,8 @@ var getGaugeObject = function getGaugeObject(data, widget) {
     },
     "dials": {
       "dial": [{
-        "value": getTruncatedValue(value)
+        "value": getTruncatedValue(value, widget),
+        "tooltext": !isPreviewModeActive ? "Click for more details" : null
       }]
     }
   };
@@ -2930,19 +2954,45 @@ function getDefaultChartInfo(widget) {
   }
 
   if (widget.IsStacked && isValuePositionInside && isColumnOrBarChart(widget)) {
-    chart.minPlotHeightForValue = "35";
+    chart.minPlotHeightForValue = "15";
   }
 
   if (isValuePositionInside && isPieOrDonutChart(widget)) {
     chart.minAngleForValue = "27";
   }
 
-  chart.numberSuffix = isFirstMeasureTypePercentage(widget) ? "%" : null;
+  chart.formatNumber = "1";
 
   var _numberSeparatorSettings = getGlobalNumberFormatting();
 
   chart.thousandSeparator = _numberSeparatorSettings.thousandsSeparator;
   chart.decimalSeparator = _numberSeparatorSettings.decimalSeparator;
+  chart.numberSuffix = isFirstMeasureTypePercentage(widget) ? "%" : null;
+
+  if (widget.ShowMeasureUnit && widget.MeasureUnit1) {
+    chart.numberSuffix = chart.numberSuffix ? " " + widget.MeasureUnit1 + " " + chart.numberSuffix : " " + widget.MeasureUnit1;
+  }
+
+  if (widget.ShowMeasureUnit && widget.MeasureUnit2) {
+    chart.sNumberSuffix = " " + widget.MeasureUnit2;
+  }
+
+  if (isDecimalPlacesEnabled(widget)) {
+    if (widget.DecimalPlaces && widget.DecimalPlaces > 0) {
+      chart.forceDecimals = "1";
+      chart.decimals = "" + widget.DecimalPlaces;
+    } else {
+      chart.forceDecimals = "0";
+      chart.decimals = "0";
+    }
+  }
+
+  if (isWidgetUsedAbbreviation(widget)) {
+    chart.formatNumberScale = "1";
+  } else {
+    chart.formatNumberScale = "0";
+  }
+
   chart.palettecolors = "#369CFB, #FCAF16, #EE5F77, #4AC76F, #935BE0, #FAD337, #32C7C7, #EB67D0, #3C9957, #FF7D4B, #78A6FF, #35838F, #BAA9F3, #C1DA72, #F0AEAD, #246EAB";
   chart.enableSlicing = "0";
   chart.enableRotation = "0";
@@ -2956,7 +3006,6 @@ function getDefaultChartInfo(widget) {
   chart.scrollHeight = "6";
   chart.scrollWidth = "6";
   chart.plotColorinTooltip = "0";
-  chart.formatNumberScale = "0";
   return chart;
 }
 
@@ -3014,7 +3063,14 @@ function setDualyAxis(chartInfo, widget, seriesMeasures) {
   chartInfo.showDivLineSecondaryValue = "1";
   chartInfo.pYAxisNameBorderPadding = 0;
   chartInfo.sYAxisNameBorderPadding = 0;
-  chartInfo.sNumberSuffix = isSecondMeasureTypePercentage(widget) ? "%" : null;
+
+  if (chartInfo.sNumberSuffix) {
+    if (isSecondMeasureTypePercentage(widget)) {
+      chartInfo.sNumberSuffix = chartInfo.sNumberSuffix + " % ";
+    }
+  } else {
+    chartInfo.sNumberSuffix = isSecondMeasureTypePercentage(widget) ? "%" : null;
+  }
 
   if (isNullOrUndefined(seriesMeasures)) {
     chartInfo.pYAxisName = "";
@@ -3036,6 +3092,26 @@ function getTitle(text, maxLenght) {
   return text.replace(/\s+/g, '&nbsp;&nbsp;');
 }
 
+function isDecimalPlacesEnabled(widget) {
+  if (widget.TypeCode == "pivot") {
+    return false;
+  }
+
+  return true;
+}
+
+function isWidgetUsedAbbreviation(widget) {
+  if (!widget || widget.TypeCode == 'kpi' || widget.TypeCode == 'pivot') {
+    return false;
+  }
+
+  if (widget.UseNumberAbbreviation) {
+    return true;
+  }
+
+  return false;
+}
+
 var FusionChartHelper = /*#__PURE__*/function () {
   function FusionChartHelper(widget, chart) {
     this.chart = chart;
@@ -3738,7 +3814,7 @@ var FusionChart$1 = React.forwardRef(function (props, comRef) {
       isDummyChange = false;
     }
 
-    var chart = getGaugeObject(data, widget.current);
+    var chart = getGaugeObject(data, widget.current, props.isPreviewModeActive);
     setArgs(chart);
 
     if (!isDummyChange) {
@@ -3750,6 +3826,67 @@ var FusionChart$1 = React.forwardRef(function (props, comRef) {
     }
   };
 
+  var dataplotClick = function dataplotClick(eventObj, dataObj) {
+    props.onSelectDataPoint({
+      GroupById: dataObj.id.groupbyid,
+      MeasureFieldId: dataObj.id.measurefieldid,
+      MeasureCode: dataObj.id.measurecode,
+      Formula: dataObj.id.formula,
+      Widget: widget.current,
+      GroupByIdSec: dataObj.id.groupbyidsec
+    });
+  };
+
+  var renderComplete = function renderComplete(eventObj) {
+    var chartRef = eventObj.sender;
+    var chartContainer = FusionCharts.getObjectReference(chartRef.id);
+
+    if (!chartContainer) {
+      console.error('Chart container is undefined');
+      return;
+    }
+
+    var svgContainer = chartContainer.querySelector('svg');
+
+    if (!svgContainer) {
+      console.error('SVG Container is undefined');
+      return;
+    }
+
+    var textElements = svgContainer.querySelectorAll('text');
+
+    if (textElements.length > 0) {
+      var lastTextElement = textElements[textElements.length - 1];
+
+      if (!props.isPreviewModeActive) {
+        lastTextElement.style.cursor = 'pointer';
+        lastTextElement.style.transition = 'fill 0.2s, text-decoration 0.2s';
+        lastTextElement.addEventListener('mouseenter', function () {
+          lastTextElement.style.fill = '#007bff';
+          lastTextElement.style.textDecoration = 'underline';
+        });
+        lastTextElement.addEventListener('mouseleave', function () {
+          lastTextElement.style.fill = '';
+          lastTextElement.style.textDecoration = 'none';
+        });
+      }
+
+      lastTextElement.addEventListener('click', function () {
+        var _widget$current2, _widget$current3, _widget$current4, _widget$current4$Widg;
+
+        var measureFieldId;
+        var currentWidgetMeasure = widget === null || widget === void 0 ? void 0 : (_widget$current2 = widget.current) === null || _widget$current2 === void 0 ? void 0 : _widget$current2.WidgetMeasures[0];
+        if (widget !== null && widget !== void 0 && (_widget$current3 = widget.current) !== null && _widget$current3 !== void 0 && _widget$current3.WidgetMeasures) measureFieldId = widget === null || widget === void 0 ? void 0 : (_widget$current4 = widget.current) === null || _widget$current4 === void 0 ? void 0 : (_widget$current4$Widg = _widget$current4.WidgetMeasures[0]) === null || _widget$current4$Widg === void 0 ? void 0 : _widget$current4$Widg.MeasureFieldId;
+        props.onSelectDataPoint({
+          MeasureFieldId: measureFieldId,
+          Widget: widget.current,
+          MeasureCode: currentWidgetMeasure.MeasureCode,
+          Formula: currentWidgetMeasure.Formula
+        });
+      });
+    }
+  };
+
   return !dataLoaded ? React__default.createElement("div", {
     ref: progressRef,
     className: 'dl-full-hight dl-flex-content-center spinner-custome'
@@ -3764,10 +3901,13 @@ var FusionChart$1 = React.forwardRef(function (props, comRef) {
     className: 'db-fc-parent-container',
     ref: fusionRef
   }, React__default.createElement("div", {
-    className: 'db-fc-container',
+    className: 'db-fc-container-guage',
     key: fusionKey,
     id: chartContainerId
-  }, React__default.createElement(ReactFC, Object.assign({}, args)))) : React__default.createElement("div", {
+  }, React__default.createElement(ReactFC, Object.assign({}, args, {
+    "fcEvent-dataplotClick": dataplotClick,
+    "fcEvent-renderComplete": renderComplete
+  })))) : React__default.createElement("div", {
     className: "dl-flex-content-center dl-full-hight",
     style: {
       width: '100%'