UNDER DEVELOPMENT

HEATMAP

A heatmap to show date based activity counts

Installation

You could use the Copy Extension button below to individually install this extension. To install, just paste anywhere in your Roam graph and click "Yes, I Know What I'm Doing".

Manual Installation

If the extension doesn't work after using the copy extension button above, try installing manually using the instructions below.

First create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, create a single child of this block and type three backticks. A code block should appear. Copy this code and paste it into the child code block in your graph:

var existing = document.getElementById("roamjs-heatmap-main");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/heatmap/main.js";
  extension.id = "roamjs-heatmap-main";
  extension.async = true;
  extension.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(extension);
}

Finally, click "Yes, I Know What I'm Doing".


  • A heatmap to show date based activity counts (v1.1.1)

  • Usage

    • {{heatmap}}

  • Configuration

    • child elements of the heatmap block

      • range

        • days - the number of days to generate the heatmap for - default 365, not required - backward from endDate, or forward from startDate

        • endDate - a date in Roam format e.g. November 11, 2021 - defaults to current date, not required

        • startDate - a date in Roam format e.g. November 11, 2021 - no default, not required

      • query

        • refs

          • list of page refs - one per block - square brackets are optional and should be left off to avoid counting these refs if the heatmap appears on a DNP

            • Refs can be attributes and if the attribute value is numeric then that value will be used in the tally rather than 1 simply as the block count

            • i.e. an attribute like

              • - pushups:10

            • would could as 10 for that block

      • display

        • weekStartsOn - 0 - Sunday, 1 - Monday (default: 0)

        • prefixCls - a CSS class name prefix for generated elements

        • legend - a list of numbers, one per sub-block, for the legend bands - colors will be taken from CSS class definitions of the form .legend-{position}

          • number - the number for the start of the range

          • number - the number for the start of the range

        • rectSize - the size in px of the day rects

        • space - the space in px between day rects

        • legendCellSize - the size of a cell in the legend

      • debug

        • true/false - defaults to false

  • Styling

    • custom legend colors are controlled via CSS and must align with the ordinal position of the band ranges established via the legend configuration setting (i.e. the color for band 0, the color for band 1, etc)

      • .roamjs-heatmap legend-1 {
          fill: red;
        }
        
        .roamjs-heatmap legend-2 {
          fill: blue;
        }
    • dark mode can be enabled with CSS like this

    • svg.roamjs-heatmap {
        color: white;
        background-color: black;
      }
  • Examples

    • - {{heatmap}}
          - query
              - refs
                  - [[Interstitial Journal]]
          - display
              - prefixCls
                  - roamjs-heatmap
              - rectSize
                  - 31
              - space
                  - 11
              - legendCellSize
                  - 31
              - legend
                  - 0
                  - 1
                  - 2
                  - 4
                  - 6
                  - 8
                  - 10
          - range
              - days
                  - 365
              - startDate
                  - [[October 21st, 2021]]
              - endDate
                  - [[November 21st, 2021]]
    • Corresponding CSS

    • .roamjs-heatmap .legend-0 {
        fill: var(--cl-grey-100);
      }
      .roamjs-heatmap .legend-1 {
        fill: var(--cl-red-100);
      }
      .roamjs-heatmap .legend-2 {
        fill: var(--cl-red-200);
      }
      .roamjs-heatmap .legend-3 {
        fill: var(--cl-red-300);
      }
      .roamjs-heatmap .legend-4 {
        fill: var(--cl-red-400);
      }
      .roamjs-heatmap .legend-5 {
        fill: var(--cl-red-500);
      }
      .roamjs-heatmap .legend-6 {
        fill: var(--cl-red-900);
      }

Contributors

This extension is brought to you by Matthew Pryor! If you are facing any issues reach out to jmp@tenacious.ventures or click on the chat button on the bottom right.

If you get value from using this extension, consider sponsoring Matthew Pryor by clicking on the button below!

Other Extensions