Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-27 17:19:39 +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)} ${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: 16px;">
<svg width="10" height="10"> <div style="display: flex; align-items: center; gap: 8px;">
<circle <svg width="10" height="10">
cx="5" <circle
cy="5" cx="5"
r="4" cy="5"
stroke="${this.#tooltipTrendColor(data)}" r="4"
fill="transparent" stroke="${this.#tooltipTrendColor(data)}"
stroke-width="1"></circle> fill="transparent"
</svg> stroke-width="1"></circle>
</svg>
${this.#tooltipValue(data)} ${this.#tooltipValue(data)}
</div>
<span style="color: ${this.#tooltipTrendColor(data)};"> ${data.trend.value == 0 || data.trend.value.amount == 0 ? `
${this.#tooltipChange(data)} (${data.trend.percent}%) <span style="width: 80px;"></span>
</span> ` : `
<span style="color: ${this.#tooltipTrendColor(data)};">
${this.#tooltipChange(data)} (${data.trend.percent}%)
</span>
`}
</div> </div>
`) `)
} }