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

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) {
if (data.currency) {
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>
${this.#currencyValue(data)} <span style="color: ${this.#dataTrendColor(data)};">${this.#currencyChange(data)} (${data.trend.percent}%)</span>
</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>
`)
}
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.#tooltipTrendColor(data)}"
fill="transparent"
stroke-width="1"></circle>
</svg>
${this.#tooltipValue(data)}
<span style="color: ${this.#tooltipTrendColor(data)};">
${this.#tooltipChange(data)} (${data.trend.percent}%)
</span>
</div>
`)
}
#dataTrendColor(data) {
#tooltipTrendColor(data) {
return {
up: tailwindColors.success,
down: tailwindColors.error,
@ -278,6 +276,22 @@ export default class extends Controller {
}[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) {
return Intl.NumberFormat(undefined, {
style: "currency",