Skip to content

Heatmap

Description

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

Attributes

  • 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'). Starting day in the charts
  • span: number; (it represents the number of cells to be display in the heatmap)e.g(span: 365) if span 365 then display 365 day[cells] on the heatMap
  • connect: [connection objects]
    • standard fields
    • source
  • mode: week | isoweek.By default, is isoWeek. Display week based on that in the chart.
  • tooltipText: Provide a text to be display in tooltip between the records and date based on a different heatmap.By default, is display "|".
  • heatmap: [Additional connect configuration Object]
    • timeSeries: any expression; e.g YYYY-MM-DD (if time series)
    • title

Data source

"dataSources": [
    {
      "id": "data",
      "query": "given trackers[data] from 2020-Aug as month"
    }
  ]

Definition

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

Override cell

Rules can optionally be provided to override the displayed value in each cell.

"options": {
  "rules": [
    {
      "rule": "values.result == 3",
      "value": "◎",
      "color": "#0A1931",
      "backgroundColor": "#B5CDA3"
    },
    {
      "rule": "values.result == 2",
      "value": "◯",
      "color": "#0A1931",
      "backgroundColor": "#FFFFE0"
    },
    {
      "rule": "values.result == 1",
      "value": "✕",
      "color": "#0A1931",
      "backgroundColor": "#DF5E5E"
    },
    {
      "rule": "values.result == 0",
      "value": "-",
      "color": "#fff",
      "backgroundColor": "#eee"
    }
  ]
}

Complete Example

{
  "tile": "heatmap",
  "title": "Total",
  "display": {
    "span": "12"
  },
  "exp": "today",
  "heatmap": {
    "timeSeries": "YYYY-MM-DD; YYYY-MM-DD; P1D",
    "title": "time by day"
  },
  "mode": "week",
  "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"
          }
        }
      }
    }
  ]
}