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

Display chart dates in UTC

Browse source
This commit is contained in:
Zach Gollwitzer 2024-11-18 11:44:41 -05:00
parent 9cc9f42bdc
commit 6105f822b7
1 changed files with 3 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -51,17 +51,12 @@ export default class extends Controller {
_normalizeDataPoints() { _normalizeDataPoints() {
this._normalDataPoints = (this.dataValue.values || []).map((d) => ({ this._normalDataPoints = (this.dataValue.values || []).map((d) => ({
...d, ...d,
date: this._parseDate(d.date), date: new Date(d.date),
value: d.value.amount ? +d.value.amount : +d.value, value: d.value.amount ? +d.value.amount : +d.value,
currency: d.value.currency, currency: d.value.currency,
})); }));
} }
_parseDate(dateString) {
const [year, month, day] = dateString.split("-").map(Number);
return new Date(year, month - 1, day);
}
_rememberInitialContainerSize() { _rememberInitialContainerSize() {
this._d3InitialContainerWidth = this._d3Container.node().clientWidth; this._d3InitialContainerWidth = this._d3Container.node().clientWidth;
this._d3InitialContainerHeight = this._d3Container.node().clientHeight; this._d3InitialContainerHeight = this._d3Container.node().clientHeight;
@ -188,7 +183,7 @@ export default class extends Controller {
this._normalDataPoints[this._normalDataPoints.length - 1].date, this._normalDataPoints[this._normalDataPoints.length - 1].date,
]) ])
.tickSize(0) .tickSize(0)
.tickFormat(d3.timeFormat("%d %b %Y")), .tickFormat(d3.utcFormat("%d %b %Y")),
) )
.select(".domain") .select(".domain")
.remove(); .remove();
@ -367,7 +362,7 @@ export default class extends Controller {
_tooltipTemplate(datum) { _tooltipTemplate(datum) {
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")(datum.date)} ${d3.utcFormat("%b %d, %Y")(datum.date)}
</div> </div>
<div style="display: flex; align-items: center; gap: 16px;"> <div style="display: flex; align-items: center; gap: 16px;">