diff --git a/app/javascript/controllers/time_series_chart_controller.js b/app/javascript/controllers/time_series_chart_controller.js index b4de7d0b..477c6caf 100644 --- a/app/javascript/controllers/time_series_chart_controller.js +++ b/app/javascript/controllers/time_series_chart_controller.js @@ -4,7 +4,7 @@ import * as d3 from "d3" export default class extends Controller { static values = { - series: Object, + data: Object, useLabels: Boolean, useTooltip: Boolean, strokeWidth: { type: Number, default: 2 } @@ -13,7 +13,7 @@ export default class extends Controller { #_d3MainSvg = null #_d3MainGroup = null #d3Tooltip = null - #dataPoints = [] + #normalDataPoints = [] #d3InitialContainerWidth = 0 #d3InitialContainerHeight = 0 @@ -37,7 +37,7 @@ export default class extends Controller { this.#_d3MainSvg = null this.#_d3MainGroup = null this.#d3Tooltip = null - this.#dataPoints = [] + this.#normalDataPoints = [] this.#d3Container.selectAll("*").remove() } @@ -50,7 +50,7 @@ export default class extends Controller { #normalizeDataPoints() { - this.#dataPoints = (this.seriesValue.values || []).map((d) => ({ + this.#normalDataPoints = (this.dataValue.values || []).map((d) => ({ ...d, date: new Date(d.date), value: d.value.amount ? +d.value.amount : +d.value, @@ -66,7 +66,7 @@ export default class extends Controller { #draw() { - if (this.#dataPoints.length < 2) { + if (this.#normalDataPoints.length < 2) { this.#drawEmpty() } else { this.#drawChart() @@ -124,7 +124,7 @@ export default class extends Controller { .call( d3 .axisBottom(this.#d3XScale) - .tickValues([ this.#dataPoints[0].date, this.#dataPoints[this.#dataPoints.length - 1].date ]) + .tickValues([ this.#normalDataPoints[0].date, this.#normalDataPoints[this.#normalDataPoints.length - 1].date ]) .tickSize(0) .tickFormat(d3.timeFormat("%b %Y")) ) @@ -147,7 +147,7 @@ export default class extends Controller { #drawTrendline() { this.#d3MainGroup .append("path") - .datum(this.#dataPoints) + .datum(this.#normalDataPoints) .attr("fill", "none") .attr("stroke", this.#trendColor) .attr("d", this.#d3Line) @@ -186,9 +186,9 @@ export default class extends Controller { const adjustedX = overflowX > 0 ? event.pageX - overflowX - 20 : tooltipX const [xPos] = d3.pointer(event) - const x0 = bisectDate(this.#dataPoints, this.#d3XScale.invert(xPos), 1) - const d0 = this.#dataPoints[x0 - 1] - const d1 = this.#dataPoints[x0] + const x0 = bisectDate(this.#normalDataPoints, this.#d3XScale.invert(xPos), 1) + const d0 = this.#normalDataPoints[x0 - 1] + const d1 = this.#normalDataPoints[x0] const d = xPos - this.#d3XScale(d0.date) > this.#d3XScale(d1.date) - xPos ? d1 : d0 // Reset @@ -363,11 +363,11 @@ export default class extends Controller { } get #trendDirection() { - return this.seriesValue.trend.direction + return this.dataValue.trend.direction } get #favorableDirection() { - return this.seriesValue.trend.favorableDirection + return this.dataValue.trend.favorableDirection } get #d3Line() { @@ -381,13 +381,13 @@ export default class extends Controller { return d3 .scaleTime() .rangeRound([ 0, this.#d3ContainerWidth ]) - .domain(d3.extent(this.#dataPoints, d => d.date)) + .domain(d3.extent(this.#normalDataPoints, d => d.date)) } get #d3YScale() { const reductionPercent = this.useLabelsValue ? 0.15 : 0.05 - const dataMin = d3.min(this.#dataPoints, d => d.value) - const dataMax = d3.max(this.#dataPoints, d => d.value) + const dataMin = d3.min(this.#normalDataPoints, d => d.value) + const dataMax = d3.max(this.#normalDataPoints, d => d.value) const padding = (dataMax - dataMin) * reductionPercent return d3 diff --git a/app/views/accounts/summary.html.erb b/app/views/accounts/summary.html.erb index 5a3fa86a..0b795288 100644 --- a/app/views/accounts/summary.html.erb +++ b/app/views/accounts/summary.html.erb @@ -19,7 +19,7 @@
+ data-time-series-chart-data-value="<%= @asset_series.to_json %>">
@@ -34,7 +34,7 @@
+ data-time-series-chart-data-value="<%= @liability_series.to_json %>">
diff --git a/app/views/pages/dashboard.html.erb b/app/views/pages/dashboard.html.erb index cd364a09..100ee690 100644 --- a/app/views/pages/dashboard.html.erb +++ b/app/views/pages/dashboard.html.erb @@ -45,7 +45,7 @@
+ data-time-series-chart-data-value="<%= @income_series.to_json %>">
@@ -61,7 +61,7 @@
+ data-time-series-chart-data-value="<%= @spending_series.to_json %>">
@@ -78,7 +78,7 @@
+ data-time-series-chart-data-value="<%= @savings_rate_series.to_json %>">
@@ -94,7 +94,7 @@
+ data-time-series-chart-data-value="<%= @investing_series.to_json %>">
diff --git a/app/views/pages/dashboard/_net_worth_chart.html.erb b/app/views/pages/dashboard/_net_worth_chart.html.erb index 723bda86..21f908c6 100644 --- a/app/views/pages/dashboard/_net_worth_chart.html.erb +++ b/app/views/pages/dashboard/_net_worth_chart.html.erb @@ -4,7 +4,7 @@ id="lineChart" class="w-full h-full" data-controller="time-series-chart" - data-time-series-chart-series-value="<%= series.to_json %>" + data-time-series-chart-data-value="<%= series.to_json %>" data-time-series-chart-use-labels-value="true" data-time-series-chart-use-tooltip-value="true" data-time-series-chart-stroke-width-value="1.5"> diff --git a/app/views/shared/_line_chart.html.erb b/app/views/shared/_line_chart.html.erb index 723bda86..21f908c6 100644 --- a/app/views/shared/_line_chart.html.erb +++ b/app/views/shared/_line_chart.html.erb @@ -4,7 +4,7 @@ id="lineChart" class="w-full h-full" data-controller="time-series-chart" - data-time-series-chart-series-value="<%= series.to_json %>" + data-time-series-chart-data-value="<%= series.to_json %>" data-time-series-chart-use-labels-value="true" data-time-series-chart-use-tooltip-value="true" data-time-series-chart-stroke-width-value="1.5">