Fix currency formatting in pie chart visualization (#1022)

app/helpers/value_groups_helper.rb

@@ -1,17 +1,13 @@
 module ValueGroupsHelper
   def value_group_pie_data(value_group)
-    value_group.children
+    value_group.children.filter { |c| c.sum > 0 }.map do |child|
-      .map do |child|
+      {
-        {
+        label: to_accountable_title(Accountable.from_type(child.name)),
-          label: to_accountable_title(Accountable.from_type(child.name)),
+        percent_of_total: child.percent_of_total.round(1).to_f,
-          percent_of_total: child.percent_of_total.round(1).to_f,
+        formatted_value: format_money(child.sum, precision: 0),
-          value: child.sum.amount.to_f,
+        bg_color: accountable_bg_class(child.name),
-          currency: child.sum.currency.iso_code,
+        fill_color: accountable_fill_class(child.name)
-          bg_color: accountable_bg_class(child.name),
+      }
-          fill_color: accountable_fill_class(child.name)
+    end.to_json
-        }
-      end
-      .filter { |child| child[:value] > 0 }
-      .to_json
   end
 end

app/javascript/controllers/pie_chart_controller.js

@@ -5,6 +5,7 @@ import * as d3 from "d3";
 export default class extends Controller {
   static values = {
     data: Array,
+    total: String,
     label: String,
   };
 
@@ -38,7 +39,7 @@ export default class extends Controller {
 
   #draw() {
     this.#d3Container.attr("class", "relative");
-    this.#d3Content.html(this.#contentSummaryTemplate(this.dataValue));
+    this.#d3Content.html(this.#contentSummaryTemplate());
 
     const pie = d3
       .pie()
@@ -75,23 +76,17 @@ export default class extends Controller {
         this.#d3Svg
           .selectAll(".arc path")
           .attr("class", (d) => d.data.fill_color);
-        this.#d3ContentMemo.html(this.#contentSummaryTemplate(this.dataValue));
+        this.#d3ContentMemo.html(this.#contentSummaryTemplate());
       });
   }
 
-  #contentSummaryTemplate(data) {
+  #contentSummaryTemplate() {
-    const total = data.reduce((acc, cur) => acc + cur.value, 0);
+    return `<span class="text-xl text-gray-900 font-medium">${this.totalValue}</span> <span class="text-xs">${this.labelValue}</span>`;
-    const currency = data[0].currency;
-
-    return `${this.#currencyValue({
-      value: total,
-      currency,
-    })} <span class="text-xs">${this.labelValue}</span>`;
   }
 
   #contentDetailTemplate(datum) {
     return `
-      <span>${this.#currencyValue(datum)}</span>
+      <span class="text-xl text-gray-900 font-medium">${datum.formatted_value}</span>
       <div class="flex flex-row text-xs gap-2 items-center">
       <div class="w-[10px] h-[10px] rounded-full ${datum.bg_color}"></div>
         <span>${datum.label}</span>
@@ -100,21 +95,6 @@ export default class extends Controller {
     `;
   }
 
-  #currencyValue(datum) {
-    const formattedValue = Intl.NumberFormat(undefined, {
-      style: "currency",
-      currency: datum.currency,
-      currencyDisplay: "narrowSymbol",
-    }).format(datum.value);
-
-    const firstDigitIndex = formattedValue.search(/\d/);
-    const currencyPrefix = formattedValue.substring(0, firstDigitIndex);
-    const mainPart = formattedValue.substring(firstDigitIndex);
-    const [integerPart, fractionalPart] = mainPart.split(".");
-
-    return `<p class="text-gray-500 -space-x-0.5">${currencyPrefix}<span class="text-xl text-gray-900 font-medium">${integerPart}</span>.${fractionalPart}</p>`;
-  }
-
   get #radius() {
     return Math.min(this.#d3ViewboxWidth, this.#d3ViewboxHeight) / 2;
   }

app/views/pages/dashboard/_allocation_chart.html.erb

@@ -10,8 +10,8 @@
         <div
           data-controller="pie-chart"
           class="w-full aspect-1"
-          data-pie-chart-label-value="Total Assets"
+          data-pie-chart-data-value="<%= value_group_pie_data(account_groups[:assets]) %>"
-          data-pie-chart-data-value="<%= value_group_pie_data(account_groups[:assets]) %>">
+          data-pie-chart-total-value="<%= format_money(account_groups[:assets].sum, precision: 0) %>">
         </div>
       </div>
     </div>
@@ -20,8 +20,8 @@
         <div
           data-controller="pie-chart"
           class="w-full aspect-1"
-          data-pie-chart-label-value="Total Debts"
+          data-pie-chart-data-value="<%= value_group_pie_data(account_groups[:liabilities]) %>"
-          data-pie-chart-data-value="<%= value_group_pie_data(account_groups[:liabilities]) %>">
+          data-pie-chart-total-value="<%= format_money(account_groups[:liabilities].sum, precision: 0) %>">
         </div>
       </div>
     </div>