Skip to content


A heatmap is representing time series data. Inspired by Github's contribution chart


Data source

An array of data queries that resolve when the heatmap calendar is loaded.

  • id:String unique identifier within the layout
  • query:String Dispatch query string;

Data source segmentation

      "span": 365,
      "exp": "2021-01-08",
      "heatmap": {
        "timeSeries": "YYYY-MM-DD; YYYY-MM-DD; P1D",
        "title": "time by day"


=== "Definition"

 * timeSeries: expression; middle should be YYYY-MM-DD (if time series)
 * title
 * exp: any date expression; it should be(today or any date) 
   `e.g(exp: 'today')`
 * span: number; (it represent the number of column to be display in heatmap)
   `e.g(span: 365) if span 365 display 365 day on heatMap`

## Data source connections

"connect": [
        "title": "Data elements",
        "source": "data",
        "pick": "values.height",
        "apply": "sum(ls)",
        "format": "0,0"

An array of connections to a data source to populate a calendar. The connection resolves to a single value per through a two step process. The pick attribute is applied to each dispatch resulting in a list of values while apply is used to turn the list of values into a single value.

Data is grouped based on the grouping or through a time series expression.

  • title:String descriptive title for use in configuration
  • source:String Data source identifier
  • pick:String an expression resolved per dispatch that results in a list of number values
  • apply:String an expression resolved list of values resolved through pick where ls refers to the value list
  • format:String format string