Custom Tooltip with Breakdowns in Vegalite charts

[VikrantRamesh]

I want to create a custom tooltip with all the grouped fields listed in a single tooltip panel.

Consider this example: daily_total_login with a group by on department will have the following tooltip structure:

daily_total_login - dept1: 50
daily_total_login - dept2: 60
daily_total_login - dept3: 60

Here is an example of another charting tool implement this:

What I have tried:
I have tried pivoting with the breakdown field and then plotting a tooltip, which works if we know the unique combinations after grouping. But I am not sure how this will scale to multiple fields plotted at the same time.

Vega Code: Vega Editor Link

 {
  "transform": [
    {
      "aggregate": [
        {"op": "sum", "field": "daily_total_login", "as": "sum(daily_total_login)"}
      ],
      "groupby": ["Date", "department"]
    },
    {
      "calculate": "datum.department + ' - sum(daily_total_login)'",
      "as": "vl_colorCategory"
    },
    {
      "pivot": "vl_colorCategory",
      "value": "sum(daily_total_login)",
      "groupby": ["Date"]
    }
  ],
  "mark": "rule",
  "encoding": {
    "x": {"field": "Date", "type": "ordinal", "timeUnit": "yearmonthdate"},
    "opacity": {
      "condition": {"param": "hover", "empty": false, "value": 0.3},
      "value": 0
    },
    "tooltip": [
      {"field": "at Work - LMS - sum(daily_total_login)", "type": "quantitative"},
      {"field": "Flagship Data - sum(daily_total_login)", "type": "quantitative"}
      // add all other breakdown columns
    ]
  },
  "params": [
    {
      "name": "hover",
      "select": {
        "type": "point",
        "fields": ["Date"],
        "nearest": true,
        "on": "pointerover",
        "clear": "pointerout"
      }
    }
  ]

}

Solution Required:
A more elegant approach to achieve this so that it could be easily scaled to multiple fields and Group By (with sorting options)