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

Add the ability to "rollup" values in a time series (#554)

Browse source 
* Clean up time series models

* Add value group rollup class for summarizing hierarchical data

* Integrate new classes

* Update UI to use new patterns

* Update D3 charts to expect new data format

* Clean up account model

* More cleanup

* Money improvements

* Use new money fields

* Remove invalid fixture data to avoid orphaned accountables

* Update time series to work better with collections

* Fix tests and UI bugs
This commit is contained in:
Zach Gollwitzer 2024-03-19 09:10:40 -04:00 • committed by GitHub
parent 0a8518506c
commit f904d9d062
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
34 changed files with 687 additions and 391 deletions
Download patch file Download diff file Expand all files Collapse all files

27
app/javascript/controllers/trendline_controller.js
View file

@ -3,7 +3,7 @@ import tailwindColors from "@maybe/tailwindcolors";
import * as d3 from "d3";
export default class extends Controller {
static values = { series: Object, classification: String };
static values = { series: Object };
connect() {
this.renderChart(this.seriesValue);
@ -15,15 +15,18 @@ export default class extends Controller {
}
renderChart = () => {
this.drawChart(this.seriesValue);
const data = this.prepareData(this.seriesValue);
this.drawChart(data);
};
prepareData(series) {
return series.values.map((d) => ({
date: new Date(d.date + "T00:00:00"),
value: +d.value.amount,
}));
}
drawChart(series) {
const data = series.data.map((d) => ({
...d,
date: new Date(d.date + "T00:00:00"),
amount: +d.amount,
}));
drawChart(data) {
const chartContainer = d3.select(this.element);
chartContainer.selectAll("*").remove();
const initialDimensions = {
@ -48,7 +51,7 @@ export default class extends Controller {
const height = initialDimensions.height - margin.top - margin.bottom;
const isLiability = this.classificationValue === "liability";
const trendDirection = data[data.length - 1].amount - data[0].amount;
const trendDirection = data[data.length - 1].value - data[0].value;
let lineColor;
if (trendDirection > 0) {
@ -69,8 +72,8 @@ export default class extends Controller {
.domain(d3.extent(data, (d) => d.date));
const PADDING = 0.05;
const dataMin = d3.min(data, (d) => d.amount);
const dataMax = d3.max(data, (d) => d.amount);
const dataMin = d3.min(data, (d) => d.value);
const dataMax = d3.max(data, (d) => d.value);
const padding = (dataMax - dataMin) * PADDING;
const yScale = d3
@ -81,7 +84,7 @@ export default class extends Controller {
const line = d3
.line()
.x((d) => xScale(d.date))
.y((d) => yScale(d.amount));
.y((d) => yScale(d.value));
svg
.append("path")