Vega-Lite problem with the visualization

Hi im trying to create something similar to image below.

The data, that i want to visualise is
syslog_hostname
syslog_ip_address
syslog_url
syslog_url_status

For one destination im checking 3 website, and i want to get all url status

Firt i set the static data

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    
  "autosize": {
    "type": "fit",
    "contains": "padding",
    resize: true
  },
    "values": [
      {
        "syslog_ip_address": "10.1.0.",
        "syslog_url": "https://google.com",
        "syslog_hostname": "DESTINATION1",
        "syslog_status": 200
 }
    ]
  },
  "transform": [
    {
      "calculate": "if(datum.syslog_status === 200, 'Success', (datum.syslog_status >= 500 ? 'Error' : 'Warning'))",
      "as": "status_category"
    },
    {
      "aggregate": [{"op": "count", "as": "count"}],
      "groupby": ["syslog_hostname", "syslog_url", "status_category"]
    }
  ],
  
  "mark": "rect",
  "width": 60,
        "height": 20,
  "encoding": {
    "row": {"field": "syslog_hostname", "type": "nominal"},
    "column": {"field": "syslog_url", "type": "nominal"},
    "color": {
      "field": "status_category",
      "type": "nominal",
      "scale": {
        "domain": ["Success", "Error", "Warning"],
        "range": ["green", "red", "orange"]
      },
      "legend": {"title": "Status strony"}
    },
    "tooltip": [
      {"field": "syslog_hostname", "type": "nominal", "title": "DESTINATION"},
      {"field": "syslog_url", "type": "nominal", "title": "URL"},
      {"field": "status_category", "type": "nominal", "title": "STATUS"},
      {"field": "count", "type": "quantitative", "title": "COUNT"}
    ]
  }
}

it was working but when i tryied to set the dynamic data i got an error

  "data": {
    "url": {
      "%context%": true,
      "%timefield%": "@timestamp",
      "index": "logs-filebeat.d*",
      "body": {
        "size": 10000,
        "_source": ["@timestamp", "syslog_ip_address", "syslog_url", "syslog_status"]
      }
    },
    "format": {"property": "hits.hits"}
  },

I would be greatfull for help to modify this code to create the visualization similar to treemap that will display for each location status of all websites