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 type three back ticks. 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.0.4)

  • 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

      • display

        • 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-{number}

          • 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 numeric band ranges established via the legend configuration setting

      • .roamjs-heatmap legend-10 {
          fill: red;
        }
        
        .roamjs-heatmap legend-50 {
          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-1 {
        fill: var(--cl-red-100);
      }
      .roamjs-heatmap .legend-2 {
        fill: var(--cl-red-200);
      }
      .roamjs-heatmap .legend-4 {
        fill: var(--cl-red-300);
      }
      .roamjs-heatmap .legend-6 {
        fill: var(--cl-red-400);
      }
      .roamjs-heatmap .legend-8 {
        fill: var(--cl-red-500);
      }
      .roamjs-heatmap .legend-10 {
        fill: var(--cl-red-900);
      }

Contributors

This extension is brought to you by RoamJS! If you are facing any issues reach out to support@roamjs.com or click on the chat button on the bottom right.

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

Other Extensions