support displaying data in percentage format

src/components/base/PieChartBase.ts

@@ -32,6 +32,7 @@ export interface CommonPieChartProps {
     colorField?: string;
     hiddenField?: string;
     amountValue?: boolean;
+    percentValue?: boolean;
     defaultCurrency?: string;
     showValue?: boolean;
     showPercent?: boolean;
@@ -81,7 +82,7 @@ export function usePieChartBase(props: CommonPieChartProps) {
 
                 accumulatedPaintPercent += finalItem.paintPercent;
                 finalItem.displayPercent = formatPercentToLocalizedNumerals(finalItem.percent, 2, '<0.01');
-                finalItem.displayValue = props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(value, props.defaultCurrency) : formatNumberToLocalizedNumerals(value, 2);
+                finalItem.displayValue = getDisplayValue(value);
 
                 validItems.push(finalItem);
             }
@@ -94,6 +95,18 @@ export function usePieChartBase(props: CommonPieChartProps) {
         return validItems;
     });
 
+    function getDisplayValue(value: number): string {
+        if (props.percentValue) {
+            return formatPercentToLocalizedNumerals(value, 2, '<0.01');
+        }
+
+        if (props.amountValue) {
+            return formatAmountToLocalizedNumeralsWithCurrency(value, props.defaultCurrency);
+        }
+
+        return formatNumberToLocalizedNumerals(value, 2);
+    }
+
     watch(() => props.items, () => {
         selectedIndex.value = 0;
     });

src/components/desktop/HeatMapChart.vue

@@ -34,6 +34,7 @@ const props = defineProps<{
     translateName?: boolean;
     valueTypeName: string;
     amountValue?: boolean;
+    percentValue?: boolean;
     defaultCurrency?: string;
 }>();
 
@@ -43,7 +44,8 @@ const {
     tt,
     getCurrentLanguageTextDirection,
     formatAmountToLocalizedNumeralsWithCurrency,
-    formatNumberToLocalizedNumerals
+    formatNumberToLocalizedNumerals,
+    formatPercentToLocalizedNumerals
 } = useI18n();
 
 const textDirection = computed<TextDirection>(() => getCurrentLanguageTextDirection());
@@ -249,6 +251,10 @@ function getItemName(name: string): string {
 }
 
 function getDisplayValue(value: number): string {
+    if (props.percentValue) {
+        return formatPercentToLocalizedNumerals(value, 2, '<0.01');
+    }
+
     if (props.amountValue) {
         return formatAmountToLocalizedNumeralsWithCurrency(value, props.defaultCurrency);
     }

src/components/desktop/RadarChart.vue

@@ -38,6 +38,7 @@ const props = defineProps<{
     colorField?: string;
     hiddenField?: string;
     amountValue?: boolean;
+    percentValue?: boolean;
     defaultCurrency?: string;
     showValue?: boolean;
     showPercent?: boolean;
@@ -84,7 +85,7 @@ const radarData = computed<RadarChartData>(() => {
 
                 const finalPercent = (isNumber(percent) && percent >= 0) ? percent : (value > 0 ? value / totalValidValue * 100 : 0);
                 const displayPercent = formatPercentToLocalizedNumerals(finalPercent, 2, '<0.01');
-                const displayValue = props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(value, props.defaultCurrency) : formatNumberToLocalizedNumerals(value, 2);
+                const displayValue = getDisplayValue(value);
 
                 indicators.push({
                     name: name,
@@ -189,6 +190,18 @@ const chartOptions = computed<object>(() => {
         ] : []
     };
 });
+
+function getDisplayValue(value: number): string {
+    if (props.percentValue) {
+        return formatPercentToLocalizedNumerals(value, 2, '<0.01');
+    }
+
+    if (props.amountValue) {
+        return formatAmountToLocalizedNumeralsWithCurrency(value, props.defaultCurrency);
+    }
+
+    return formatNumberToLocalizedNumerals(value, 2);
+}
 </script>
 
 <style scoped>

src/views/desktop/insights/tabs/ExplorerChartTab.vue

@@ -93,6 +93,7 @@
             :show-percent="true"
             :enable-click-item="true"
             :amount-value="TransactionExplorerValueMetric.valueOf(currentExplorer.valueMetric)?.isAmount"
+            :percent-value="TransactionExplorerValueMetric.valueOf(currentExplorer.valueMetric)?.isPercent"
             :default-currency="defaultCurrency"
             id-field="id"
             name-field="name"
@@ -121,6 +122,7 @@
             :show-value="true"
             :show-percent="true"
             :amount-value="TransactionExplorerValueMetric.valueOf(currentExplorer.valueMetric)?.isAmount"
+            :percent-value="TransactionExplorerValueMetric.valueOf(currentExplorer.valueMetric)?.isPercent"
             :default-currency="defaultCurrency"
             name-field="name"
             value-field="totalAmount"
@@ -179,6 +181,7 @@
             :items="seriesDimensionTransactionExplorerData"
             :value-type-name="tt(TransactionExplorerValueMetric.valueOf(currentExplorer.valueMetric)?.name ?? 'Value')"
             :amount-value="TransactionExplorerValueMetric.valueOf(currentExplorer.valueMetric)?.isAmount"
+            :percent-value="TransactionExplorerValueMetric.valueOf(currentExplorer.valueMetric)?.isPercent"
             :default-currency="defaultCurrency"
             name-field="name"
             values-field="categoryValues"