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

50
app/javascript/controllers/line_chart_controller.js
View file

@ -16,7 +16,8 @@ export default class extends Controller {
}
renderChart = () => {
this.drawChart(this.seriesValue);
const data = this.prepareData(this.seriesValue);
this.drawChart(data);
};
trendStyles(trendDirection) {
@ -36,25 +37,27 @@ export default class extends Controller {
}[trendDirection];
}
drawChart(series) {
const data = series.data.map((b) => ({
prepareData(series) {
return series.values.map((b) => ({
date: new Date(b.date + "T00:00:00"),
value: +b.amount,
value: +b.value.amount,
styles: this.trendStyles(b.trend.direction),
trend: b.trend,
formatted: {
value: Intl.NumberFormat("en-US", {
value: Intl.NumberFormat(undefined, {
style: "currency",
currency: b.currency.iso_code || "USD",
}).format(b.amount),
change: Intl.NumberFormat("en-US", {
currency: b.value.currency || "USD",
}).format(b.value.amount),
change: Intl.NumberFormat(undefined, {
style: "currency",
currency: b.currency.iso_code || "USD",
currency: b.value.currency || "USD",
signDisplay: "always",
}).format(b.trend.amount),
}).format(b.trend.value.amount),
},
}));
}
drawChart(data) {
const chartContainer = d3.select(this.element);
// Clear any existing chart
@ -77,6 +80,11 @@ export default class extends Controller {
])
.attr("style", "max-width: 100%; height: auto; height: intrinsic;");
if (data.length === 1) {
this.renderEmpty(svg, initialDimensions);
return;
}
const margin = { top: 20, right: 1, bottom: 30, left: 1 },
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
@ -237,4 +245,26 @@ export default class extends Controller {
tooltip.style("opacity", 0);
});
}
// Dot in middle of chart as placeholder for empty chart
renderEmpty(svg, { width, height }) {
svg
.append("line")
.attr("x1", width / 2)
.attr("y1", 0)
.attr("x2", width / 2)
.attr("y2", height)
.attr("stroke", tailwindColors.gray[300])
.attr("stroke-dasharray", "4, 4");
svg
.append("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 4)
.style("fill", tailwindColors.gray[400]);
svg.selectAll(".tick").remove();
svg.selectAll(".domain").remove();
}
}