plotValue.js

import * as Plot from "npm:@observablehq/plot";
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

const domain_max = 30000

export function plotValue(breakdown, {width} = {}) {

    return Plot.plot({
      width,
      //title: "Total portfolio value",
      x: {type: "utc", ticks: "week", label: "Time [days]"},
      y: {grid: true, inset: 10, label: "Value [euros]", domain: [0, domain_max]},
      marks: [
        Plot.areaY(breakdown, {
          x: "time",
          y: "value",
          fillOpacity: 0.2
          }),
        Plot.lineY(breakdown, {
          x: "time",
          y: "value",
          stroke: "green",
          tip: false
          }),
        Plot.ruleY([0]),
        Plot.ruleX(breakdown, Plot.pointerX({x: "time",
                                            py: "value",
                                            stroke: "red"})),
        Plot.dot(breakdown, Plot.pointerX({x: "time",
                                          y: "value",
                                          stroke: "red"})),
        Plot.text(breakdown, Plot.pointerX({px: "time",
                                            py: "value",
                                            dx: 100,
                                            dy: -18,
                                            frameAnchor: "top-left",
                                            fontVariant: "tabular-nums",
                                            text: (d) => [`Date ${d.time}`,
                                                          `Value ${d.value.toFixed(2)}`].join("    ")}))
        ]
    });
}