Scaffold out the UI for individual account page (#461)

* Add `AccountBalance` table for account views

* Scaffold out account UI

* Add D3 line chart scaffolding

* Style fixes

app/javascript/controllers/line_chart_controller.js

@@ -0,0 +1,258 @@
+import { Controller } from "@hotwired/stimulus";
+import tailwindColors from "@maybe/tailwindcolors";
+import * as d3 from "d3";
+
+// Connects to data-controller="line-chart"
+export default class extends Controller {
+  connect() {
+    this.drawChart();
+  }
+
+  drawChart() {
+    // TODO: Replace with live data through controller targets
+    const data = [
+      {
+        date: new Date(2021, 0, 1),
+        value: 985000,
+        formatted: "$985,000",
+        change: { value: "$0", direction: "none", percentage: "0%" },
+      },
+      {
+        date: new Date(2021, 1, 1),
+        value: 990000,
+        formatted: "$990,000",
+        change: { value: "$5,000", direction: "up", percentage: "0.51%" },
+      },
+      {
+        date: new Date(2021, 2, 1),
+        value: 995000,
+        formatted: "$995,000",
+        change: { value: "$5,000", direction: "up", percentage: "0.51%" },
+      },
+      {
+        date: new Date(2021, 3, 1),
+        value: 1000000,
+        formatted: "$1,000,000",
+        change: { value: "$5,000", direction: "up", percentage: "0.50%" },
+      },
+      {
+        date: new Date(2021, 4, 1),
+        value: 1005000,
+        formatted: "$997,000",
+        change: { value: "$3,000", direction: "down", percentage: "-0.30%" },
+      },
+      {
+        date: new Date(2021, 5, 1),
+        value: 1010000,
+        formatted: "$1,010,000",
+        change: { value: "$5,000", direction: "up", percentage: "0.50%" },
+      },
+      {
+        date: new Date(2021, 6, 1),
+        value: 1050000,
+        formatted: "$1,050,000",
+        change: { value: "$40,000", direction: "up", percentage: "3.96%" },
+      },
+      {
+        date: new Date(2021, 7, 1),
+        value: 1080000,
+        formatted: "$1,080,000",
+        change: { value: "$30,000", direction: "up", percentage: "2.86%" },
+      },
+      {
+        date: new Date(2021, 8, 1),
+        value: 1100000,
+        formatted: "$1,100,000",
+        change: { value: "$20,000", direction: "up", percentage: "1.85%" },
+      },
+      {
+        date: new Date(2021, 9, 1),
+        value: 1115181,
+        formatted: "$1,115,181",
+        change: { value: "$15,181", direction: "up", percentage: "1.38%" },
+      },
+    ];
+
+    const initialDimensions = {
+      width: document.querySelector("#lineChart").clientWidth,
+      height: document.querySelector("#lineChart").clientHeight,
+    };
+
+    const svg = d3
+      .select("#lineChart")
+      .append("svg")
+      .attr("width", initialDimensions.width)
+      .attr("height", initialDimensions.height)
+      .attr("viewBox", [
+        0,
+        0,
+        initialDimensions.width,
+        initialDimensions.height,
+      ])
+      .attr("style", "max-width: 100%; height: auto; height: intrinsic;");
+
+    const margin = { top: 20, right: 0, bottom: 30, left: 0 },
+      width = +svg.attr("width") - margin.left - margin.right,
+      height = +svg.attr("height") - margin.top - margin.bottom,
+      g = svg
+        .append("g")
+        .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    // X-Axis
+    const x = d3
+      .scaleTime()
+      .rangeRound([0, width])
+      .domain(d3.extent(data, (d) => d.date));
+
+    const PADDING = 0.15; // 15% padding on top and bottom of data
+    const dataMin = d3.min(data, (d) => d.value);
+    const dataMax = d3.max(data, (d) => d.value);
+    const padding = (dataMax - dataMin) * PADDING;
+
+    // Y-Axis
+    const y = d3
+      .scaleLinear()
+      .rangeRound([height, 0])
+      .domain([dataMin - padding, dataMax + padding]);
+
+    // X-Axis labels
+    g.append("g")
+      .attr("transform", `translate(0,${height})`)
+      .call(
+        d3
+          .axisBottom(x)
+          .tickValues([data[0].date, data[data.length - 1].date])
+          .tickSize(0)
+          .tickFormat(d3.timeFormat("%b %Y"))
+      )
+      .select(".domain")
+      .remove();
+
+    g.selectAll(".tick text")
+      .style("fill", tailwindColors.gray[500])
+      .style("font-size", "12px")
+      .style("font-weight", "500")
+      .attr("text-anchor", "middle")
+      .attr("dx", (d, i) => {
+        // We know we only have 2 values
+        return i === 0 ? "5em" : "-5em";
+      })
+      .attr("dy", "0em");
+
+    // Line
+    const line = d3
+      .line()
+      .x((d) => x(d.date))
+      .y((d) => y(d.value));
+
+    g.append("path")
+      .datum(data)
+      .attr("fill", "none")
+      .attr("stroke", tailwindColors.green[500])
+      .attr("stroke-linejoin", "round")
+      .attr("stroke-linecap", "round")
+      .attr("stroke-width", 1.5)
+      .attr("class", "line-chart-path")
+      .attr("d", line);
+
+    const tooltip = d3
+      .select("#lineChart")
+      .append("div")
+      .style("position", "absolute")
+      .style("padding", "8px")
+      .style("font", "14px Inter, sans-serif")
+      .style("background", tailwindColors.white)
+      .style("border", `1px solid ${tailwindColors["alpha-black"][100]}`)
+      .style("border-radius", "10px")
+      .style("pointer-events", "none")
+      .style("opacity", 0); // Starts as hidden
+
+    // Helper to find the closest data point to the mouse
+    const bisectDate = d3.bisector(function (d) {
+      return d.date;
+    }).left;
+
+    // Create an invisible rectangle that captures mouse events (regular SVG elements don't capture mouse events by default)
+    g.append("rect")
+      .attr("width", width)
+      .attr("height", height)
+      .attr("fill", "none")
+      .attr("pointer-events", "all")
+      // When user hovers over the chart, show the tooltip and a circle at the closest data point
+      .on("mousemove", (event) => {
+        tooltip.style("opacity", 1);
+
+        const [xPos] = d3.pointer(event);
+
+        const x0 = bisectDate(data, x.invert(xPos));
+        const d0 = data[x0 - 1];
+        const d1 = data[x0];
+        const d = xPos - x(d0.date) > x(d1.date) - xPos ? d1 : d0;
+
+        g.selectAll(".data-point-circle").remove(); // Remove existing circles to ensure only one is shown at a time
+        g.append("circle")
+          .attr("class", "data-point-circle")
+          .attr("cx", x(d.date))
+          .attr("cy", y(d.value))
+          .attr("r", 8)
+          .attr("fill", tailwindColors.green[500])
+          .attr("fill-opacity", "0.1");
+
+        g.append("circle")
+          .attr("class", "data-point-circle")
+          .attr("cx", x(d.date))
+          .attr("cy", y(d.value))
+          .attr("r", 3)
+          .attr("fill", tailwindColors.green[500]);
+
+        tooltip
+          .html(
+            `<div style="margin-bottom: 4px; color: ${
+              tailwindColors.gray[500]
+            }">${d3.timeFormat("%b %Y")(d.date)}</div>
+                 <div style="display: flex; align-items: center; gap: 8px;">
+                   <svg width="10" height="10">
+                     <circle cx="5" cy="5" r="4" stroke="${
+                       d.change.direction === "up"
+                         ? tailwindColors.success
+                         : d.change.direction === "down"
+                         ? tailwindColors.error
+                         : tailwindColors.gray[500]
+                     }" fill="transparent" stroke-width="1"></circle>
+                   </svg>
+                   ${d.formatted} <span style="color: ${
+              d.change.direction === "up"
+                ? tailwindColors.success
+                : d.change.direction === "down"
+                ? tailwindColors.error
+                : tailwindColors.gray[500]
+            };"><span>${
+              d.change.direction === "up"
+                ? "+"
+                : d.change.direction === "down"
+                ? "-"
+                : ""
+            }</span>${d.change.value} (${d.change.percentage})</span>
+                 
+                 </div>`
+          )
+          .style("left", event.pageX + 10 + "px")
+          .style("top", event.pageY - 10 + "px");
+
+        g.selectAll(".guideline").remove(); // Remove existing line to ensure only one is shown at a time
+        g.append("line")
+          .attr("class", "guideline")
+          .attr("x1", x(d.date))
+          .attr("y1", 0)
+          .attr("x2", x(d.date))
+          .attr("y2", height)
+          .attr("stroke", tailwindColors.gray[300])
+          .attr("stroke-dasharray", "4, 4");
+      })
+      .on("mouseout", () => {
+        g.selectAll(".guideline").remove();
+        g.selectAll(".data-point-circle").remove();
+        tooltip.style("opacity", 0);
+      });
+  }
+}

app/javascript/tailwindColors.js

@@ -0,0 +1,141 @@
+/**
+ * To keep consistent styling across the app, this file can be imported in
+ * Stimulus controllers to reference our color palette.  Mostly used for D3 charts.
+ */
+export default {
+  transparent: "transparent",
+  current: "currentColor",
+  white: "#ffffff",
+  black: "#0B0B0B",
+  success: "#10A861",
+  warning: "#F79009",
+  error: "#F13636",
+  gray: {
+    25: "#FAFAFA",
+    50: "#F5F5F5",
+    100: "#F0F0F0",
+    200: "#E5E5E5",
+    300: "#D6D6D6",
+    400: "#A3A3A3",
+    500: "#737373",
+    600: "#525252",
+    700: "#3D3D3D",
+    800: "#212121",
+    900: "#141414",
+  },
+  "alpha-white": {
+    25: "rgba(255, 255, 255, 0.03)",
+    50: "rgba(255, 255, 255, 0.05)",
+    100: "rgba(255, 255, 255, 0.08)",
+    200: "rgba(255, 255, 255, 0.1)",
+    300: "rgba(255, 255, 255, 0.15)",
+    400: "rgba(255, 255, 255, 0.2)",
+    500: "rgba(255, 255, 255, 0.3)",
+    600: "rgba(255, 255, 255, 0.4)",
+    700: "rgba(255, 255, 255, 0.5)",
+    800: "rgba(255, 255, 255, 0.6)",
+    900: "rgba(255, 255, 255, 0.7)",
+  },
+  "alpha-black": {
+    25: "rgba(20, 20, 20, 0.03)",
+    50: "rgba(20, 20, 20, 0.05)",
+    100: "rgba(20, 20, 20, 0.08)",
+    200: "rgba(20, 20, 20, 0.1)",
+    300: "rgba(20, 20, 20, 0.15)",
+    400: "rgba(20, 20, 20, 0.2)",
+    500: "rgba(20, 20, 20, 0.3)",
+    600: "rgba(20, 20, 20, 0.4)",
+    700: "rgba(20, 20, 20, 0.5)",
+    800: "rgba(20, 20, 20, 0.6)",
+    900: "rgba(20, 20, 20, 0.7)",
+  },
+  red: {
+    25: "#FFFBFB",
+    50: "#FFF1F0",
+    100: "#FFDEDB",
+    200: "#FEB9B3",
+    300: "#F88C86",
+    400: "#ED4E4E",
+    500: "#F13636",
+    600: "#EC2222",
+    700: "#C91313",
+    800: "#A40E0E",
+    900: "#7E0707",
+  },
+  green: {
+    25: "#F6FEF9",
+    50: "#ECFDF3",
+    100: "#D1FADF",
+    200: "#A6F4C5",
+    300: "#6CE9A6",
+    400: "#32D583",
+    500: "#12B76A",
+    600: "#10A861",
+    700: "#078C52",
+    800: "#05603A",
+    900: "#054F31",
+  },
+  yellow: {
+    25: "#FFFCF5",
+    50: "#FFFAEB",
+    100: "#FEF0C7",
+    200: "#FEDF89",
+    300: "#FEC84B",
+    400: "#FDB022",
+    500: "#F79009",
+    600: "#DC6803",
+    700: "#B54708",
+    800: "#93370D",
+    900: "#7A2E0E",
+  },
+  cyan: {
+    25: "#F5FEFF",
+    50: "#ECFDFF",
+    100: "#CFF9FE",
+    200: "#A5F0FC",
+    300: "#67E3F9",
+    400: "#22CCEE",
+    500: "#06AED4",
+    600: "#088AB2",
+    700: "#0E7090",
+    800: "#155B75",
+    900: "#155B75",
+  },
+  blue: {
+    25: "#F5FAFF",
+    50: "#EFF8FF",
+    100: "#D1E9FF",
+    200: "#B2DDFF",
+    300: "#84CAFF",
+    400: "#53B1FD",
+    500: "#2E90FA",
+    600: "#1570EF",
+    700: "#175CD3",
+    800: "#1849A9",
+    900: "#194185",
+  },
+  indigo: {
+    25: "#F5F8FF",
+    50: "#EFF4FF",
+    100: "#E0EAFF",
+    200: "#C7D7FE",
+    300: "#A4BCFD",
+    400: "#8098F9",
+    500: "#6172F3",
+    600: "#444CE7",
+    700: "#3538CD",
+    800: "#2D31A6",
+    900: "#2D3282",
+  },
+  violet: {
+    25: "#FBFAFF",
+    50: "#F5F3FF",
+    100: "#ECE9FE",
+    200: "#DDD6FE",
+    300: "#C3B5FD",
+    400: "#A48AFB",
+    500: "#875BF7",
+    600: "#7839EE",
+    700: "#6927DA",
+  },
+};