Dash canvas adjustment

Elastic Stack Kibana
1

In this forum I found this screen that shows the day and time in real time however it comes in the form to x/xx/xxxx 0-00-00
I would like it to be in the format xx/xx/xxxx 00-00-00

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
 
  "signals": [
    {
      "name": "time",
      "init": " month(now()) + '/' + date(now()) + '/' + year(now()) + ' ' + hours(now()) + ':' + minutes(now()) + ':' + seconds(now())",
      "on": [{"events": {"type": "timer", "throttle": 1000}, "update": "month(now()) + '/' + date(now()) + '/' + year(now()) + ' ' + hours(now()) + ':' + minutes(now()) + ':' + seconds(now())"}]
    }
  ],
  "marks": [
    {
      "type": "text",
      "encode": {
        "update": {
          "text": {"signal": "time"},

          "opacity": {"value": 1},
          "x": {"value": 10},
          "y": {"value": 10},
          "fontSize": {"value": "35"}
        }
      }
    }
  ]
}

image

2

Using timeFormat and the format spec from the d3 docs allows you to use padded numbers

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
 
  "signals": [
    {
      "name": "time",
      "init": "timeFormat(now(),'%m/%d/%Y - %H:%M:%S')",
      "on": [
        {
          "events": 
            {
              "type": "timer", 
              "throttle": 1000
            }, 
          "update": "timeFormat(now(),'%m/%d/%Y - %H:%M:%S')"
        }
      ]
    }
  ],
  "marks": [
    {
      "type": "text",
      "encode": {
        "update": {
          "text": {"signal": "time"},
          "opacity": {"value": 1},
          "x": {"value": 10},
          "y": {"value": 10},
          "fontSize": {"value": 35}
        }
      }
    }
  ]
}