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

Match tooltip designs

Browse source
This commit is contained in:
Jose Farias 2024-04-20 13:12:33 -06:00
parent c65b08efe5
commit 176eac82b3
1 changed files with 20 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -248,22 +248,28 @@ export default class extends Controller {
${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>
<div style="display: flex; align-items: center; gap: 16px;">
<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)}
${this.#tooltipValue(data)}
</div>
<span style="color: ${this.#tooltipTrendColor(data)};">
${this.#tooltipChange(data)} (${data.trend.percent}%)
</span>
${data.trend.value == 0 || data.trend.value.amount == 0 ? `
<span style="width: 80px;"></span>
` : `
<span style="color: ${this.#tooltipTrendColor(data)};">
${this.#tooltipChange(data)} (${data.trend.percent}%)
</span>
`}
</div>
`)
}