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

Remove ambiguities between time series and series data

Browse source
This commit is contained in:
Jose Farias 2024-04-20 12:30:45 -06:00
parent 663a58c9f3
commit fd84d1df28
5 changed files with 23 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,7 @@ import * as d3 from "d3"
export default class extends Controller { export default class extends Controller {
static values = { static values = {
series: Object, data: Object,
useLabels: Boolean, useLabels: Boolean,
useTooltip: Boolean, useTooltip: Boolean,
strokeWidth: { type: Number, default: 2 } strokeWidth: { type: Number, default: 2 }
@ -13,7 +13,7 @@ export default class extends Controller {
#_d3MainSvg = null #_d3MainSvg = null
#_d3MainGroup = null #_d3MainGroup = null
#d3Tooltip = null #d3Tooltip = null
#dataPoints = [] #normalDataPoints = []
#d3InitialContainerWidth = 0 #d3InitialContainerWidth = 0
#d3InitialContainerHeight = 0 #d3InitialContainerHeight = 0
@ -37,7 +37,7 @@ export default class extends Controller {
this.#_d3MainSvg = null this.#_d3MainSvg = null
this.#_d3MainGroup = null this.#_d3MainGroup = null
this.#d3Tooltip = null this.#d3Tooltip = null
this.#dataPoints = [] this.#normalDataPoints = []
this.#d3Container.selectAll("*").remove() this.#d3Container.selectAll("*").remove()
} }
@ -50,7 +50,7 @@ export default class extends Controller {
#normalizeDataPoints() { #normalizeDataPoints() {
this.#dataPoints = (this.seriesValue.values || []).map((d) => ({ this.#normalDataPoints = (this.dataValue.values || []).map((d) => ({
...d, ...d,
date: new Date(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,
@ -66,7 +66,7 @@ export default class extends Controller {
#draw() { #draw() {
if (this.#dataPoints.length < 2) { if (this.#normalDataPoints.length < 2) {
this.#drawEmpty() this.#drawEmpty()
} else { } else {
this.#drawChart() this.#drawChart()
@ -124,7 +124,7 @@ export default class extends Controller {
.call( .call(
d3 d3
.axisBottom(this.#d3XScale) .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) .tickSize(0)
.tickFormat(d3.timeFormat("%b %Y")) .tickFormat(d3.timeFormat("%b %Y"))
) )
@ -147,7 +147,7 @@ export default class extends Controller {
#drawTrendline() { #drawTrendline() {
this.#d3MainGroup this.#d3MainGroup
.append("path") .append("path")
.datum(this.#dataPoints) .datum(this.#normalDataPoints)
.attr("fill", "none") .attr("fill", "none")
.attr("stroke", this.#trendColor) .attr("stroke", this.#trendColor)
.attr("d", this.#d3Line) .attr("d", this.#d3Line)
@ -186,9 +186,9 @@ export default class extends Controller {
const adjustedX = overflowX > 0 ? event.pageX - overflowX - 20 : tooltipX const adjustedX = overflowX > 0 ? event.pageX - overflowX - 20 : tooltipX
const [xPos] = d3.pointer(event) const [xPos] = d3.pointer(event)
const x0 = bisectDate(this.#dataPoints, this.#d3XScale.invert(xPos), 1) const x0 = bisectDate(this.#normalDataPoints, this.#d3XScale.invert(xPos), 1)
const d0 = this.#dataPoints[x0 - 1] const d0 = this.#normalDataPoints[x0 - 1]
const d1 = this.#dataPoints[x0] const d1 = this.#normalDataPoints[x0]
const d = xPos - this.#d3XScale(d0.date) > this.#d3XScale(d1.date) - xPos ? d1 : d0 const d = xPos - this.#d3XScale(d0.date) > this.#d3XScale(d1.date) - xPos ? d1 : d0
// Reset // Reset
@ -363,11 +363,11 @@ export default class extends Controller {
} }
get #trendDirection() { get #trendDirection() {
return this.seriesValue.trend.direction return this.dataValue.trend.direction
} }
get #favorableDirection() { get #favorableDirection() {
return this.seriesValue.trend.favorableDirection return this.dataValue.trend.favorableDirection
} }
get #d3Line() { get #d3Line() {
@ -381,13 +381,13 @@ export default class extends Controller {
return d3 return d3
.scaleTime() .scaleTime()
.rangeRound([ 0, this.#d3ContainerWidth ]) .rangeRound([ 0, this.#d3ContainerWidth ])
.domain(d3.extent(this.#dataPoints, d => d.date)) .domain(d3.extent(this.#normalDataPoints, d => d.date))
} }
get #d3YScale() { get #d3YScale() {
const reductionPercent = this.useLabelsValue ? 0.15 : 0.05 const reductionPercent = this.useLabelsValue ? 0.15 : 0.05
const dataMin = d3.min(this.#dataPoints, d => d.value) const dataMin = d3.min(this.#normalDataPoints, d => d.value)
const dataMax = d3.max(this.#dataPoints, d => d.value) const dataMax = d3.max(this.#normalDataPoints, d => d.value)
const padding = (dataMax - dataMin) * reductionPercent const padding = (dataMax - dataMin) * reductionPercent
return d3 return d3

4
app/views/accounts/summary.html.erb
View file

@ -19,7 +19,7 @@
<div <div
data-controller="time-series-chart" data-controller="time-series-chart"
class="h-full w-2/5" class="h-full w-2/5"
data-time-series-chart-series-value="<%= @asset_series.to_json %>"></div> data-time-series-chart-data-value="<%= @asset_series.to_json %>"></div>
</div> </div>
<div class="w-1/2 p-4 flex items-stretch justify-between"> <div class="w-1/2 p-4 flex items-stretch justify-between">
<div class="space-y-2 grow"> <div class="space-y-2 grow">
@ -34,7 +34,7 @@
<div <div
data-controller="time-series-chart" data-controller="time-series-chart"
class="h-full w-2/5" class="h-full w-2/5"
data-time-series-chart-series-value="<%= @liability_series.to_json %>"></div> data-time-series-chart-data-value="<%= @liability_series.to_json %>"></div>
</div> </div>
</div> </div>
<div class="p-4 bg-white rounded-xl shadow-xs border border-alpha-black-25 space-y-4"> <div class="p-4 bg-white rounded-xl shadow-xs border border-alpha-black-25 space-y-4">

8
app/views/pages/dashboard.html.erb
View file

@ -45,7 +45,7 @@
<div <div
data-controller="time-series-chart" data-controller="time-series-chart"
class="h-full w-2/5" class="h-full w-2/5"
data-time-series-chart-series-value="<%= @income_series.to_json %>"></div> data-time-series-chart-data-value="<%= @income_series.to_json %>"></div>
</div> </div>
</div> </div>
<div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl"> <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
@ -61,7 +61,7 @@
<div <div
data-controller="time-series-chart" data-controller="time-series-chart"
class="h-full w-2/5" class="h-full w-2/5"
data-time-series-chart-series-value="<%= @spending_series.to_json %>"></div> data-time-series-chart-data-value="<%= @spending_series.to_json %>"></div>
</div> </div>
</div> </div>
<div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl"> <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
@ -78,7 +78,7 @@
<div <div
data-controller="time-series-chart" data-controller="time-series-chart"
class="h-full w-2/5" class="h-full w-2/5"
data-time-series-chart-series-value="<%= @savings_rate_series.to_json %>"></div> data-time-series-chart-data-value="<%= @savings_rate_series.to_json %>"></div>
</div> </div>
</div> </div>
<div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl"> <div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
@ -94,7 +94,7 @@
<div <div
data-controller="time-series-chart" data-controller="time-series-chart"
class="h-full w-2/5" class="h-full w-2/5"
data-time-series-chart-series-value="<%= @investing_series.to_json %>"></div> data-time-series-chart-data-value="<%= @investing_series.to_json %>"></div>
</div> </div>
</div> </div>
</section> </section>

2
app/views/pages/dashboard/_net_worth_chart.html.erb
View file

@ -4,7 +4,7 @@
id="lineChart" id="lineChart"
class="w-full h-full" class="w-full h-full"
data-controller="time-series-chart" 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-labels-value="true"
data-time-series-chart-use-tooltip-value="true" data-time-series-chart-use-tooltip-value="true"
data-time-series-chart-stroke-width-value="1.5"></div> data-time-series-chart-stroke-width-value="1.5"></div>

2
app/views/shared/_line_chart.html.erb
View file

@ -4,7 +4,7 @@
id="lineChart" id="lineChart"
class="w-full h-full" class="w-full h-full"
data-controller="time-series-chart" 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-labels-value="true"
data-time-series-chart-use-tooltip-value="true" data-time-series-chart-use-tooltip-value="true"
data-time-series-chart-stroke-width-value="1.5"></div> data-time-series-chart-stroke-width-value="1.5"></div>