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

Clean up tooltip template

Browse source
This commit is contained in:
Jose Farias 2024-04-20 12:42:59 -06:00
parent 139a18bf61
commit bf170b830c
1 changed files with 40 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -243,34 +243,32 @@ 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)}
</div> </div>
<div style="display: flex; align-items: center; gap: 8px;"> <div style="display: flex; align-items: center; gap: 8px;">
<svg width="10" height="10"> <svg width="10" height="10">
<circle cx="5" cy="5" r="4" stroke="${this.#dataTrendColor(data)}" fill="transparent" stroke-width="1"></circle> <circle
cx="5"
cy="5"
r="4"
stroke="${this.#tooltipTrendColor(data)}"
fill="transparent"
stroke-width="1"></circle>
</svg> </svg>
${this.#currencyValue(data)} <span style="color: ${this.#dataTrendColor(data)};">${this.#currencyChange(data)} (${data.trend.percent}%)</span>
${this.#tooltipValue(data)}
<span style="color: ${this.#tooltipTrendColor(data)};">
${this.#tooltipChange(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) { #tooltipTrendColor(data) {
return { return {
up: tailwindColors.success, up: tailwindColors.success,
down: tailwindColors.error, down: tailwindColors.error,
@ -278,6 +276,22 @@ export default class extends Controller {
}[data.trend.direction] }[data.trend.direction]
} }
#tooltipValue(data) {
if (data.currency) {
return this.#currencyValue(data)
} else {
return data.value
}
}
#tooltipChange(data) {
if (data.currency) {
return this.#currencyChange(data)
} else {
return this.#decimalChange(data)
}
}
#currencyValue(data) { #currencyValue(data) {
return Intl.NumberFormat(undefined, { return Intl.NumberFormat(undefined, {
style: "currency", style: "currency",