I have this code which work fine with Power BI deneb vega-lite. I want to go in vega to update the current time by adding a timer event on it. Can you help me? I tried lot of things but doesn’t work. So, if someone can convert from vega-lite to vega 5 will be nice.
The final needs will be : https://i.sstatic.net/vTK2Fueo.png
Thanks in advance

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 200,
  "height": 100,
  "data": {
    "name": "dataset"  // Dynamically supplied by Power BI
  },
  "transform": [
    {
      "calculate": "hours(datetime(datum.DST_LocationDateTime)) + minutes(datetime(datum.DST_LocationDateTime)) / 60 + seconds(datetime(datum.DST_LocationDateTime)) / 3600",
      "as": "currentTime"
    },
    {
      "calculate": "hours(datetime(datum.SiteSupportStartFrom)) + minutes(datetime(datum.SiteSupportStartFrom)) / 60",
      "as": "startSupportTime"
    },
    {
      "calculate": "hours(datetime(datum.SiteSupportDayTo)) + minutes(datetime(datum.SiteSupportDayTo)) / 60",
      "as": "endSupportTime"
    }
  ],
  "layer": [
    {
      "mark": "rect",  // Green rectangle for available hours
      "encoding": {
        "x": {"field": "startSupportTime", "type": "quantitative", "scale": {"domain": [0, 24]}},
        "x2": {"field": "endSupportTime"},
        "y": {"value": 20},
        "y2": {"value": 55},
        "color": {"value": "lightgreen"}
      }
    },
    {
      "mark": "rule",  // Vertical line for current time
      "encoding": {
        "x": {"field": "currentTime", "type": "quantitative", "scale": {"domain": [0, 24]}},
        "y": {"value": 10},
        "y2": {"value": 65},
        "color": {"value": "red"},
        "size": {"value": 2}
      }
    },
    {
      "mark": "text",  // Text label for current time
      "encoding": {
        "x": {"field": "currentTime", "type": "quantitative", "scale": {"domain": [0, 24]}},
        "y": {"value": 10},
        "text": {"field": "currentTime", "type": "quantitative", "format": ".2f"},
        "color": {"value": "black"},
        "align": {"value": "center"},
        "dy": {"value": -10}
      }
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "domain": [0, 24],
      "range": [0, 200]
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale",
      "title": null,  // Removes the x-axis title
      "tickCount": 24
    }
  ]
}