table_hconcat_vl

table_hconcat_vl.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"item": "A", "value": 0.85},
      {"item": "AA", "value": 98},
      {"item": "AB", "value": 361},
      {"item": "AC", "value": 1750},
      {"item": "C", "value": 92650},
      {"item": "D", "value": 150000},
      {"item": "E", "value": 1300000},
      {"item": "F", "value": 6500000},
      {"item": "G", "value": 10000000},
      {"item": "H", "value": 880000000},
      {"item": "I", "value": 1239000000}
    ]
  },
  "params": [
    {
      "name": "Whole_Number",
      "value": "Whole Number"
    }
  ],
  "transform": [
    {"sample": 100},
    {
      "calculate": "format( datum.value, ',.1~f')",
      "as": "wholeNumberFormat"
    },
    {
      "calculate": "replace(toString(datum.wholeNumberFormat), /\\D/g, '').length",
      "as": "digitCount"
    },
    {
      "calculate": "datum.value >= 100000000 ? format(datum.value / 1000000000, ',.1~f') + 'B' : datum.value >= 100000 ? format(datum.value / 1000000, ',.1~f') + 'M' : datum.value >= 1000 ? format(datum.value / 1000, ',.1~f') + 'k' : format(datum.value, ',')",
      "as": "formatByValue"
    },
    {
      "calculate": "datum.digitCount >= 9 ? format(datum.value / 1000000000, ',.1~f') + 'B' : datum.digitCount >= 6 ? format(datum.value / 1000000, ',.1~f') + 'M' : datum.digitCount >= 4 ? format(datum.value / 1000, ',.1~f') + 'k' : format(datum.value, ',.1~f')",
      "as": "formatByDigitCount"
    },
    {
      "calculate": "'£' + (datum.formatByDigitCount)",
      "as": "CurrencyNumberFormat"
    },
    {
      "calculate": "datum.digitCount >= 9 ? '£'+ format(datum.value / 1000000000, ',.1~f') + 'B' : datum.digitCount >= 6 ? format(datum.value / 1000000, ',.1~f') + 'M' : datum.digitCount >= 4 ? format(datum.value / 1000, ',.1~f') + 'k' : '£'+format(datum.value, ',.2f')",
      "as": "newCurrencyFormat"
    },
    {
      "window": [
        {
          "op": "row_number",
          "as": "row_num"
        }
      ]
    }
  ],
  "spacing": 10,
  "hconcat": [
    {
      "width": 0.1,
      "layer": [
        {
          "title": {
            "text": ["Item", ""],
            "align": "left",
            "dx": 5
          },
          "mark": {
            "type": "text",
            "align": "left",
            "xOffset": 5
          },
          "encoding": {
            "text": {
              "field": "item",
              "type": "nominal"
            },
            "y": {
              "field": "row_num",
              "type": "ordinal",
              "axis": null
            },
            "fill": {}
          }
        }
      ]
    },
    {
      "width": 0.1,
      "title": {
        "text": ["Value", ""],
        "align": "left",
        "dx": 5
      },
      "mark": {
        "type": "text",
        "align": "left",
        "xOffset": 5
      },
      "encoding": {
        "text": {
          "field": "value",
          "type": "nominal"
        },
        "y": {
          "field": "row_num",
          "type": "ordinal",
          "axis": null
        },
        "fill": {}
      }
    },
    {
      "width": 0.1,
      "title": {
        "text": ["New", "Format"],
        "align": "left",
        "dx": 5
      },
      "mark": {
        "type": "text",
        "color": "navy",
        "fontWeight": "bolder",
        "align": "left",
        "baseline": "middle",
        "xOffset": 5
      },
      "encoding": {
        "text": {
          "field": "formatByDigitCount",
          "type": "nominal"
        },
        "y": {
          "field": "row_num",
          "type": "ordinal",
          "axis": null
        },
        "fill": {}
      }
    },
    {
      "width": 0.1,
      "title": {
        "text": ["Whole", "Number"],
        "align": "left",
        "dx": 5
      },
      "mark": {
        "type": "text",
        "align": "left",
        "baseline": "middle",
        "xOffset": 5
      },
      "encoding": {
        "text": {
          "field": "wholeNumberFormat",
          "type": "nominal"
        },
        "y": {
          "field": "row_num",
          "type": "ordinal",
          "axis": null
        },
        "fill": {}
      }
    }
  ],
  "config": {
    "view": {"stroke": "lightgrey"}
  }
}