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

Handle integers as well as money

Browse source
This commit is contained in:
Jose Farias 2024-04-19 19:27:24 -06:00
parent 0015c8159d
commit febfa3bce6
1 changed files with 35 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

27
app/javascript/controllers/time_series_chart_controller.js
View file

@ -50,7 +50,7 @@ export default class extends Controller {
...d, ...d,
date: new Date(d.date), date: new Date(d.date),
value: d.value.amount ? +d.value.amount : +d.value, value: d.value.amount ? +d.value.amount : +d.value,
currency: d.value.currency || "USD", currency: d.value.currency
})) }))
} }
@ -250,6 +250,7 @@ export default class extends Controller {
#tooltipTemplate(data) { #tooltipTemplate(data) {
if (data.currency) {
return(` return(`
<div style="margin-bottom: 4px; color: ${tailwindColors.gray[500]};"> <div style="margin-bottom: 4px; color: ${tailwindColors.gray[500]};">
${d3.timeFormat("%b %d, %Y")(data.date)} ${d3.timeFormat("%b %d, %Y")(data.date)}
@ -261,6 +262,19 @@ export default class extends Controller {
${this.#currencyValue(data)} <span style="color: ${this.#dataTrendColor(data)};">${this.#currencyChange(data)} (${data.trend.percent}%)</span> ${this.#currencyValue(data)} <span style="color: ${this.#dataTrendColor(data)};">${this.#currencyChange(data)} (${data.trend.percent}%)</span>
</div> </div>
`) `)
} else {
return(`
<div style="margin-bottom: 4px; color: ${tailwindColors.gray[500]};">
${d3.timeFormat("%b %d, %Y")(data.date)}
</div>
<div style="display: flex; align-items: center; gap: 8px;">
<svg width="10" height="10">
<circle cx="5" cy="5" r="4" stroke="${this.#dataTrendColor(data)}" fill="transparent" stroke-width="1"></circle>
</svg>
${data.value} <span style="color: ${this.#dataTrendColor(data)};">${this.#decimalChange(data)} (${data.trend.percent}%)</span>
</div>
`)
}
} }
#dataTrendColor(data) { #dataTrendColor(data) {
@ -274,18 +288,25 @@ export default class extends Controller {
#currencyValue(data) { #currencyValue(data) {
return Intl.NumberFormat(undefined, { return Intl.NumberFormat(undefined, {
style: "currency", style: "currency",
currency: data.currency || "USD", currency: data.currency,
}).format(data.value) }).format(data.value)
} }
#currencyChange(data) { #currencyChange(data) {
return Intl.NumberFormat(undefined, { return Intl.NumberFormat(undefined, {
style: "currency", style: "currency",
currency: data.currency || "USD", currency: data.currency,
signDisplay: "always", signDisplay: "always",
}).format(data.trend.value.amount) }).format(data.trend.value.amount)
} }
#decimalChange(data) {
return Intl.NumberFormat(undefined, {
style: "decimal",
signDisplay: "always",
}).format(data.trend.value)
}
#createMainSvg() { #createMainSvg() {
return this.#d3Container return this.#d3Container