20231115_faceted_bar_dynamic_labels_vl

spec.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "transform": [
    {"filter": "indexof(selectedDepartments, datum['Department']) >=0"},
    {"fold": ["Budgeted $", "Paid $"]},
    {
      "joinaggregate": [
        {"op": "min", "field": "value", "as": "min"},
        {"op": "max", "field": "value", "as": "max"}
      ],
      "groupby": ["key"]
    },
    {
      "calculate": "(datum['max']-datum['value'])/(datum['max']-datum['min']) < 0.5 ? 'right' : 'left'",
      "as": "align"
    },
    {"calculate": "1", "as": "labelOpacity"},
    {
      "calculate": "datum['label'] + (datum['align']==='left'? ' that is OUTSIDE its bar' : ' that is INSIDE its bar')",
      "as": "label"
    }
  ],
  "facet": {
    "column": {
      "field": "key",
      "sort": "ascending",
      "title": null,
      "header": {"labelFontSize": 14}
    }
  },
  "spec": {
    "width": 400,
    "height": 200,
    "view": {"stroke": "transparent"},
    "encoding": {
      "x": {"type": "quantitative", "field": "value"},
      "y": {
        "type": "nominal",
        "field": "Department",
        "sort": {"field": "id"},
        "axis": {"labelFont": "Helvetica", "labelFontSize": 14}
      }
    },
    "layer": [
      {"mark": {"type": "bar", "color": "green"}},
      {
        "mark": {
          "type": "text",
          "limit": {
            "expr": "datum['align'] === 'right' ? (scale('x', datum['value'])-10) : child_width-(scale('x', datum['value'])-10)"
          },
          "text": {"expr": "datum['label']"},
          "align": {"expr": "datum['align']"},
          "xOffset": {"expr": "datum['align'] === 'left' ? 5 : -5"},
          "fill": {
            "expr": "luminance('green') < 0.5 && datum['align'] === 'right' ? 'white' : 'black'"
          }
        }
      }
    ]
  },
  "config": {
    "axis": {"grid": false, "ticks": false, "domain": false, "title": null},
    "axisQuantitative": {"labels": false}
  },
  "data": {
    "name": "dataset",
    "values": [
      {
        "id": 1,
        "Department": "A",
        "label": "This is a long label",
        "Budgeted $": 15,
        "Paid $": 17
      },
      {
        "id": 2,
        "Department": "B",
        "label": "This is a long label",
        "Budgeted $": 5,
        "Paid $": 14
      },
      {
        "id": 3,
        "Department": "C",
        "label": "This is a long label",
        "Budgeted $": 6,
        "Paid $": 2
      },
      {
        "id": 4,
        "Department": "D",
        "label": "This is a long label",
        "Budgeted $": 4,
        "Paid $": 7
      },
      {
        "id": 5,
        "Department": "E",
        "label": "This is a long label",
        "Budgeted $": 3,
        "Paid $": 15
      },
      {
        "id": 6,
        "Department": "F",
        "label": "This is a long label",
        "Budgeted $": 6,
        "Paid $": 8
      },
      {
        "id": 7,
        "Department": "G",
        "label": "This is a long label",
        "Budgeted $": 7,
        "Paid $": 7
      }
    ]
  },
  "params": [
    {
      "name": "DepartmentA",
      "value": true,
      "bind": {"input": "checkbox", "name": "A"}
    },
    {
      "name": "DepartmentB",
      "value": true,
      "bind": {"input": "checkbox", "name": "B"}
    },
    {
      "name": "DepartmentC",
      "value": true,
      "bind": {"input": "checkbox", "name": "C"}
    },
    {
      "name": "DepartmentD",
      "value": true,
      "bind": {"input": "checkbox", "name": "D"}
    },
    {
      "name": "DepartmentE",
      "value": true,
      "bind": {"input": "checkbox", "name": "E"}
    },
    {
      "name": "DepartmentF",
      "value": true,
      "bind": {"input": "checkbox", "name": "F"}
    },
    {
      "name": "DepartmentG",
      "value": true,
      "bind": {"input": "checkbox", "name": "G"}
    },
    {
      "name": "selectedDepartments",
      "expr": "[DepartmentA?'A':'',DepartmentB?'B':'',DepartmentC?'C':'',DepartmentD?'D':'',DepartmentE?'E':'',DepartmentF?'F':'',DepartmentG?'G':'']"
    },
    {"name": "test", "expr": "[DepartmentE]"}
  ]
}