# Set time range filter to drill-down target from Vega panel

**URL:** <https://discuss.elastic.co/t/set-time-range-filter-to-drill-down-target-from-vega-panel/333805>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [May 18, 2023, 7:14pm UTC](https://discuss.elastic.co/t/set-time-range-filter-to-drill-down-target-from-vega-panel/333805 "2023-05-18T19:14:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rowish](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rowish/32/98815_2.png) [@rowish](https://discuss.elastic.co/u/rowish)\
**Post date:** [May 18, 2023, 7:14pm UTC](https://discuss.elastic.co/t/set-time-range-filter-to-drill-down-target-from-vega-panel/333805/1 "2023-05-18T19:14:45Z")

</div>

Hello community,

I am trying to implement a drill-down functionality to my Vega panel able to send, alongside a manually set query filter, the time range inherited from my origin dashboard.

The version that I was able to reach now successfully sets the query filter, however it fails to set the time range on the target dashboard.

```auto
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "Drill-down panel",
  "autosize": {
    "type": "fit",
    "resize": true
  },
  "data": [
    {
      "name": "source",
      "url": {
        "index": "logstash-*",
        "%context%": true,
        "%timefield%": "@timestamp",
        "body": {
          "size": 0,
          "aggs": {
            "total": { "cardinality": { "field": "log_level.keyword" } }
          }
        }
      },
      "format": {
        "property": "aggregations"
      }
    }
  ],
  "marks": [
  {
      "type": "rect",
      "from": { "data": "source" },
      "encode": {
        "enter": {
          "x": { "value": 0 },
          "y": { "value": 0 },
          "width": { "signal": "width" },
          "height": { "signal": "height" },
          "href": {
          "signal": "datum.total.value > 0 ? 'kibana#/dashboard/ef819120-c89d-11ed-9e40-91687efc2428?_a=(filters:!((%27$state%27:(store:appState),exists:(field:log_level))))&_g=(time:(from:datum.timeRangeFrom,to:datum.timeRangeTo))' : null",
            "target": "_self"
          },
          "tooltip": {"signal": "datum.total.value > 0 ? 'Click for details' : null"}
        }
      }
    }
  ]
}

```

I'm not sure if timeRangeFrom and timeRangeTo actually hold the actual limits of the data time range, but certainly they don't work the way I use them.

Is it even possible to set the time range this way? Is there any useful resource where I can learn more regarding this topic?

Thank you, and I would appreciate any input.

---

<div class="post-metadata">

**Author:** ![jsanz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jsanz/32/53734_2.png) [@jsanz](https://discuss.elastic.co/u/jsanz)\
**Post date:** [May 30, 2023, 2:13pm UTC](https://discuss.elastic.co/t/set-time-range-filter-to-drill-down-target-from-vega-panel/333805/2 "2023-05-30T14:13:36Z")

</div>

There is no official API for the state of the dashboard URLs. Why not using Lens and regular drilldowns? You can configure a drilldown that will open your selected dashboard carrying all the filters and time range

> **[Customize interactions with drilldowns | Kibana Guide \[master\] | Elastic](https://www.elastic.co/guide/en/kibana/master/create-drilldowns.html)**

Example on a drilldown that will help filtering on a destination dashboard by rows on a table (but it can be any other Lens visualization type)

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/f/4/f4241dcb47ee940cfeeea237565cb516eac0799b.png)

---

<div class="post-metadata">

**Author:** ![rowish](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rowish/32/98815_2.png) [@rowish](https://discuss.elastic.co/u/rowish)\
**Post date:** [June 8, 2023, 7:17am UTC](https://discuss.elastic.co/t/set-time-range-filter-to-drill-down-target-from-vega-panel/333805/3 "2023-06-08T07:17:14Z")

</div>

Thank you for the suggestion, Jorge.  
I am using Vega because my panel requires some custom colorization which Lens can't provide in such a controlled manner.

I have been able to (kind of) get hold of the time range by fetching the oldest timestamp in my data set

`"aggs": { ... "oldestTimestamp": { "min": { "field": "@timestamp" } } }`

and making use of this value through a signal when constructing the href url in the respective mark:

`{ "name": "timeRangeFrom", "update": "(data('source')[0].oldestTimestamp.value_as_string)" }`

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [July 6, 2023, 7:18am UTC](https://discuss.elastic.co/t/set-time-range-filter-to-drill-down-target-from-vega-panel/333805/4 "2023-07-06T07:18:09Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.