Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-28 09:39:39 +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

66
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
</svg> cx="5"
${this.#currencyValue(data)} <span style="color: ${this.#dataTrendColor(data)};">${this.#currencyChange(data)} (${data.trend.percent}%)</span> cy="5"
</div> r="4"
`) stroke="${this.#tooltipTrendColor(data)}"
} else { fill="transparent"
return(` stroke-width="1"></circle>
<div style="margin-bottom: 4px; color: ${tailwindColors.gray[500]};"> </svg>
${d3.timeFormat("%b %d, %Y")(data.date)}
</div> ${this.#tooltipValue(data)}
<div style="display: flex; align-items: center; gap: 8px;">
<svg width="10" height="10"> <span style="color: ${this.#tooltipTrendColor(data)};">
<circle cx="5" cy="5" r="4" stroke="${this.#dataTrendColor(data)}" fill="transparent" stroke-width="1"></circle> ${this.#tooltipChange(data)} (${data.trend.percent}%)
</svg> </span>
${data.value} <span style="color: ${this.#dataTrendColor(data)};">${this.#decimalChange(data)} (${data.trend.percent}%)</span> </div>
</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",