Skip to content
Michal Töpfer edited this page Dec 18, 2020 · 2 revisions

The TimeContext component is used to filter the displayed data by a selected time interval. Most of the charts work with TimeContext out of the box, they just need to be placed inside it.

Properties

  • initialIntervalSpec: see below
  • intervalNames: TODO
  • getMinAggregationInterval: TODO
  • configPath: array of strings – path to the config property to which the current interval is saved. Use this if you need multiple independent TimeContexts in the same visualization. Defaults to ["timeContext"].

How to...

...set the initial time interval

Set the initialIntervalSpec property of the TimeContext. This property is of type IntervalSpec with constructor

new IntervalSpec(from, to, aggregationInterval, refreshInterval)
  • from and to can be set to strings with exact date and time ("1953-10-30", "2010-12-31 23:59:59", ...) or with relative date and time ("now", "now-7d", "now-1y", ...)
  • aggregationIntervalnull means auto, moment.duration(0, 's') means no aggregation
  • refreshIntervalnull disables automatic refresh of the data

Example (interval for the last 5 days, aggregated by an hour, refreshed every minute):

<TimeContext initialIntervalSpec={new IntervalSpec('now-5d', 'now',  moment.duration(1, 'h'), moment.duration(1, 'm'))}>

Don't forget to add imports:

import {IntervalSpec} from "ivis";
import moment from 'moment';

...use multiple TimeContexts in the same visualization

Add a different configPath property to each of them. Don't forget that this property has to be an array of strings (or indices to an array in some special cases).

Clone this wiki locally