Vega Lite Auto Date Formating by Zooming Date Axis

Question

I’m bad at coding, but I needed to write a custom Gantt chart in the Deneb visual element in Power bi, which visualizes the duration of a task along the X and X2 axis. Since my tasks last for hours, I implemented the ability to zoom in along the time axis. I need the base time format to be DD:MM:YYYY and when it gets closer to the day, add hours, that is, HH:MM:DD. I tried to implement this using "labelExpr" but an error occurs "[Error] Illegal callee type: CallExpression ". Please help me solve this problem, because I can’t handle it myself with my skills.

{
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "bar",
        "cornerRadius": 3,
        "tooltip": true,
        "opacity": 0.6,
        "stroke": "black",
        "cursor": "pointer"
      },
      "params": [
        {
          "name": "highlight",
          "select": {
            "type": "point",
            "on": "mouseover"
          }
        },
        {
          "name": "select",
          "select": "point"
        },
        {
          "name": "grid",
          "select": "interval",
          "bind": "scales"
        }
      ],
      "encoding": {
        "x": {
          "field": "Activity Start",
          "type": "temporal",
          "title": "",
          "timeUnit": "dayshoursminutesseconds",
          "axis": {
            "format": "%d.%m.%Y",
            "labelExpr": "datum.value < 86400000 ? utcFormat('%d.%m.%Y %H:%M:%S')(datum.value) : utcFormat('%d.%m.%Y')(datum.value)"
          }
        },
        "x2": {
          "field": "Activity End",
          "type": "temporal",
          "timeUnit": "dayshoursminutesseconds",
          "axis": {
            "labelFontWeight": "bold",
            "format": "%d.%m.%Y",
            "labelExpr": "datum.value < 86400000 ? utcFormat('%d.%m.%Y %H:%M:%S')(datum.value) : utcFormat('%d.%m.%Y')(datum.value)"
          }
        },
        "y": {
          "field": "Area",
          "type": "nominal",
          "title": "",
          "axis": {
            "labelFontWeight": "bold",
            "grid": true
          },
          "gridDash": [1, 1]
        },
        "color": {
          "field": "Activity Type",
          "type": "nominal",
          "legend": {
            "interactive": true
          }
        },
        "fillOpacity": {
          "condition": {
            "param": "select",
            "value": 1
          },
          "value": 0.3
        },
        "strokeWidth": {
          "condition": [
            {
              "param": "select",
              "empty": false,
              "value": 2
            },
            {
              "param": "highlight",
              "empty": false,
              "value": 1
            }
          ],
          "value": 0.5
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "left",
        "dx": 5
      },
      "encoding": {
        "text": {
          "field": "Activity Type",
          "type": "nominal",
          "bandPosition": 1
        },
        "width": {"band": 1}
      }
    }
  ],
  "config": {
    "scale": {"bandPaddingInner": 0.5}
  }
}