Skip to content


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

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

  • tile: "heatmap"
  • title
  • display:
    • span: display the span within heatmap
  • 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
  • connect: connection objects
  • heatmap:
    • timeSeries: expression; middle should be YYYY-MM-DD (if time series)
    • title


Data source

"dataSources": [
      "id": "data",
      "query": "given trackers[data] from 2020-Aug as month"
  • id:String unique identifier within the layout
  • query:String Dispatch query string;

Complete Example

  "tile": "heatmap",
  "title": "Total",
  "display": {
    "span": "12"
  "exp": "today",
  "heatmap": {
    "timeSeries": "YYYY-MM-DD; YYYY-MM-DD; P1D",
    "title": "time by day"
  "connect": [
      "title": "Wellness Questionnaire",
      "source": "wellness",
      "pick": "1",
      "apply": "sum(ls)",
      "state": "result >= 1",
      "format": "0,0",
      "options": {
        "background": "#5DB354",
        "message": "Wellness check in",
        "icon": "user-check fas",
        "show": "count",
        "singular": "Complete!",
        "plural": "entries",
        "zero": "No entries",
        "dispatch": {
          "tracker": "wellness",
          "features": {
            "users": "hidden",
            "time": "hidden"