{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "name": "Wealth",
  "title": {
    "text": "Total wealth",
    "subtitle": "Total assets and liabilities (thousand $)"
  },
  "width": "container",
  "height": "container",
  "data": { "url": "../charts/wealth.csv"},

  "transform": [
    { "calculate": "datum.value / 1000", "as": "thousands" }
  ],

  "layer": [
    {
      "encoding": {
        "x": {
          "field": "end_date",
          "title": null,
          "type": "temporal",
          "scale": { "domainMin": { "expr": "timeOffset('year', now(), -1)" } }
        },
        "y": {
          "field": "thousands",
          "title": null,
          "type": "quantitative",
          "aggregate": "sum",
          "scale": { "zero": false }
        },
        "color": {
          "field": "account",
          "type": "nominal",
          "legend": { "title": null, "orient": "bottom" }
        }
      },
      "layer": [
        {
          "mark": "line",
          "params": [{ "name": "grid", "select": "interval", "bind": "scales" }]
        },{
          "params": [{
            "name": "label",
            "select": { "type": "point", "encodings": ["x"], "nearest": true, "on": "mouseover" }
          }],
          "mark": "point",
          "encoding": { "opacity": { "condition": { "param": "label", "empty": false, "value": 1 }, "value": 0 } }
        }
      ]
    },{
      "transform": [{"filter": {"param": "label", "empty": false}}],
      "layer": [
        {
          "mark": {"type": "rule", "color": "gray"},
          "encoding": {
            "x": {"type": "temporal", "field": "end_date", "aggregate": "min"}
          }
        },{
          "encoding": {
            "text": {"type": "quantitative", "field": "value", "aggregate": "sum", "format": "$0.3s"},
            "x": {"type": "temporal", "field": "end_date"},
            "y": {"type": "quantitative", "field": "thousands", "aggregate": "sum"},
            "color": {"type": "nominal", "field": "account"}
          },
          "layer": [
            { "mark": {"type": "text", "align": "right", "dx": -5, "dy": -5, "strokeWidth": 2, "stroke": "white"} },
            { "mark": {"type": "text", "align": "right", "dx": -5, "dy": -5} }
          ]
        }
      ]
    }
  ]
}