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

* 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

app/javascript/controllers/line_chart_controller.js

@@ -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();
+  }
 }

app/javascript/controllers/trendline_controller.js

@@ -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")