Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-21 22:29:38 +02:00
Code Issues Releases Activity Actions

Fix currency formatting in pie chart visualization (#1022)

Browse source
This commit is contained in:
Zach Gollwitzer 2024-07-26 10:36:29 -04:00 • committed by GitHub
parent 7c2091b343
commit 701e17829d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 19 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/helpers/value_groups_helper.rb
View file

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

32
app/javascript/controllers/pie_chart_controller.js
View file

@ -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) {
const total = data.reduce((acc, cur) => acc + cur.value, 0);
const currency = data[0].currency;
return `${this.#currencyValue({
value: total,
currency,
})} <span class="text-xs">${this.labelValue}</span>`;
#contentSummaryTemplate() {
return `<span class="text-xl text-gray-900 font-medium">${this.totalValue}</span> <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;
}

8
app/views/pages/dashboard/_allocation_chart.html.erb
View file

@ -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>