Edit Heatmap

Name

Also known as (comma separated)

Brief definition Values represented by visual intensity.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "metric", "type": "text", "label": "Metric name", "default": "Sessions" }, { "id": "intensityScale", "type": "select", "label": "Intensity contrast", "default": "medium", "options": [ "low", "medium", "high" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showValues", "type": "toggle", "label": "Show numeric values", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"heatmap heatmap--{{intensityScale}}\" style=\"--accent:{{accent}};\" role=\"img\"\n aria-label=\"Heatmap of {{metric}} by day and time. Mon: 6-9 is 82, 9-12 is 55, 12-3 is 30, 3-6 is 10. Tue: 6-9 is 65, 9-12 is 90, 12-3 is 45, 3-6 is 20. Wed: 6-9 is 15, 9-12 is 40, 12-3 is 70, 3-6 is 95.\">\n <p class=\"heatmap__caption\">{{metric}} by day and time of day</p>\n <div class=\"heatmap__colheads\" aria-hidden=\"true\">\n <span class=\"heatmap__corner\"></span>\n <span class=\"heatmap__colhead\">6-9</span>\n <span class=\"heatmap__colhead\">9-12</span>\n <span class=\"heatmap__colhead\">12-3</span>\n <span class=\"heatmap__colhead\">3-6</span>\n </div>\n <div class=\"heatmap__grid\" aria-hidden=\"true\">\n <span class=\"heatmap__rowhead\">Mon</span>\n <div class=\"heatmap__cell\" style=\"--v:0.82;\">{{#if showValues}}<span class=\"heatmap__cellval\">82</span>{{/if}}</div>\n <div class=\"heatmap__cell\" style=\"--v:0.55;\">{{#if showValues}}<span class=\"heatmap__cellval\">55</span>{{/if}}</div>\n <div class=\"heatmap__cell\" style=\"--v:0.30;\">{{#if showValues}}<span class=\"heatmap__cellval\">30</span>{{/if}}</div>\n <div class=\"heatmap__cell\" style=\"--v:0.10;\">{{#if showValues}}<span class=\"heatmap__cellval\">10</span>{{/if}}</div>\n <span class=\"heatmap__rowhead\">Tue</span>\n <div class=\"heatmap__cell\" style=\"--v:0.65;\">{{#if showValues}}<span class=\"heatmap__cellval\">65</span>{{/if}}</div>\n <div class=\"heatmap__cell\" style=\"--v:0.90;\">{{#if showValues}}<span class=\"heatmap__cellval\">90</span>{{/if}}</div>\n <div class=\"heatmap__cell\" style=\"--v:0.45;\">{{#if showValues}}<span class=\"heatmap__cellval\">45</span>{{/if}}</div>\n <div class=\"heatmap__cell\" style=\"--v:0.20;\">{{#if showValues}}<span class=\"heatmap__cellval\">20</span>{{/if}}</div>\n <span class=\"heatmap__rowhead\">Wed</span>\n <div class=\"heatmap__cell\" style=\"--v:0.15;\">{{#if showValues}}<span class=\"heatmap__cellval\">15</span>{{/if}}</div>\n <div class=\"heatmap__cell\" style=\"--v:0.40;\">{{#if showValues}}<span class=\"heatmap__cellval\">40</span>{{/if}}</div>\n <div class=\"heatmap__cell\" style=\"--v:0.70;\">{{#if showValues}}<span class=\"heatmap__cellval\">70</span>{{/if}}</div>\n <div class=\"heatmap__cell\" style=\"--v:0.95;\">{{#if showValues}}<span class=\"heatmap__cellval\">95</span>{{/if}}</div>\n </div>\n</div>\n<style>\n.heatmap { font: 13px/1.4 system-ui, sans-serif; color: #241430; max-width: 340px; }\n.heatmap__caption { margin: 0 0 10px; font-size: 13px; font-weight: 600; }\n.heatmap__colheads { display: grid; grid-template-columns: 40px repeat(4, 1fr); gap: 4px; margin-bottom: 4px; }\n.heatmap__colhead { text-align: center; font-size: 11px; color: #241430aa; }\n.heatmap__grid { display: grid; grid-template-columns: 40px repeat(4, 1fr); gap: 4px; }\n.heatmap__rowhead { display: flex; align-items: center; font-size: 11px; color: #241430aa; }\n.heatmap__cell { aspect-ratio: 1.4; border-radius: 4px; display: flex; align-items: center; justify-content: center;\n --eff: var(--v); background: color-mix(in srgb, var(--accent) calc(var(--eff) * 100%), #FAF7F2); }\n.heatmap--low .heatmap__cell { --eff: calc(0.4 + var(--v) * 0.3); }\n.heatmap--medium .heatmap__cell { --eff: calc(0.15 + var(--v) * 0.75); }\n.heatmap--high .heatmap__cell { --eff: var(--v); }\n.heatmap__cellval { font-size: 11px; font-weight: 700; }\n</style>", "tailwind": "<div class=\"heatmap-tw heatmap-tw--{{intensityScale}} max-w-[340px] font-sans text-[13px]\" style=\"--accent:{{accent}};\" role=\"img\"\n aria-label=\"Heatmap of {{metric}} by day and time. Mon: 6-9 is 82, 9-12 is 55, 12-3 is 30, 3-6 is 10. Tue: 6-9 is 65, 9-12 is 90, 12-3 is 45, 3-6 is 20. Wed: 6-9 is 15, 9-12 is 40, 12-3 is 70, 3-6 is 95.\">\n <p class=\"mb-2.5 text-[13px] font-semibold\">{{metric}} by day and time of day</p>\n <div class=\"grid gap-1 mb-1\" style=\"grid-template-columns:40px repeat(4,1fr)\" aria-hidden=\"true\">\n <span></span>\n <span class=\"text-center text-[11px] text-[#241430aa]\">6-9</span>\n <span class=\"text-center text-[11px] text-[#241430aa]\">9-12</span>\n <span class=\"text-center text-[11px] text-[#241430aa]\">12-3</span>\n <span class=\"text-center text-[11px] text-[#241430aa]\">3-6</span>\n </div>\n <div class=\"grid gap-1\" style=\"grid-template-columns:40px repeat(4,1fr)\" aria-hidden=\"true\">\n <span class=\"flex items-center text-[11px] text-[#241430aa]\">Mon</span>\n <div class=\"heatmap-tw__cell aspect-[1.4] rounded flex items-center justify-center\" style=\"--v:0.82;\">{{#if showValues}}<span class=\"text-[11px] font-bold\">82</span>{{/if}}</div>\n <div class=\"heatmap-tw__cell aspect-[1.4] rounded flex items-center justify-center\" style=\"--v:0.55;\">{{#if showValues}}<span class=\"text-[11px] font-bold\">55</span>{{/if}}</div>\n <div class=\"heatmap-tw__cell aspect-[1.4] rounded flex items-center justify-center\" style=\"--v:0.30;\">{{#if showValues}}<span class=\"text-[11px] font-bold\">30</span>{{/if}}</div>\n <div class=\"heatmap-tw__cell aspect-[1.4] rounded flex items-center justify-center\" style=\"--v:0.10;\">{{#if showValues}}<span class=\"text-[11px] font-bold\">10</span>{{/if}}</div>\n <span class=\"flex items-center text-[11px] text-[#241430aa]\">Tue</span>\n <div class=\"heatmap-tw__cell aspect-[1.4] rounded flex items-center justify-center\" style=\"--v:0.65;\">{{#if showValues}}<span class=\"text-[11px] font-bold\">65</span>{{/if}}</div>\n <div class=\"heatmap-tw__cell aspect-[1.4] rounded flex items-center justify-center\" style=\"--v:0.90;\">{{#if showValues}}<span class=\"text-[11px] font-bold\">90</span>{{/if}}</div>\n <div class=\"heatmap-tw__cell aspect-[1.4] rounded flex items-center justify-center\" style=\"--v:0.45;\">{{#if showValues}}<span class=\"text-[11px] font-bold\">45</span>{{/if}}</div>\n <div class=\"heatmap-tw__cell aspect-[1.4] rounded flex items-center justify-center\" style=\"--v:0.20;\">{{#if showValues}}<span class=\"text-[11px] font-bold\">20</span>{{/if}}</div>\n <span class=\"flex items-center text-[11px] text-[#241430aa]\">Wed</span>\n <div class=\"heatmap-tw__cell aspect-[1.4] rounded flex items-center justify-center\" style=\"--v:0.15;\">{{#if showValues}}<span class=\"text-[11px] font-bold\">15</span>{{/if}}</div>\n <div class=\"heatmap-tw__cell aspect-[1.4] rounded flex items-center justify-center\" style=\"--v:0.40;\">{{#if showValues}}<span class=\"text-[11px] font-bold\">40</span>{{/if}}</div>\n <div class=\"heatmap-tw__cell aspect-[1.4] rounded flex items-center justify-center\" style=\"--v:0.70;\">{{#if showValues}}<span class=\"text-[11px] font-bold\">70</span>{{/if}}</div>\n <div class=\"heatmap-tw__cell aspect-[1.4] rounded flex items-center justify-center\" style=\"--v:0.95;\">{{#if showValues}}<span class=\"text-[11px] font-bold\">95</span>{{/if}}</div>\n </div>\n</div>\n<style>\n.heatmap-tw__cell { --eff: var(--v); background: color-mix(in srgb, var(--accent) calc(var(--eff) * 100%), #FAF7F2); }\n.heatmap-tw--low .heatmap-tw__cell { --eff: calc(0.4 + var(--v) * 0.3); }\n.heatmap-tw--medium .heatmap-tw__cell { --eff: calc(0.15 + var(--v) * 0.75); }\n.heatmap-tw--high .heatmap-tw__cell { --eff: var(--v); }\n</style>", "react": "export function Heatmap({\n metric = \"{{metric}}\",\n intensityScale = \"{{intensityScale}}\",\n accent = \"{{accent}}\",\n showValues = {{showValues}},\n}) {\n const rows = [\"Mon\",\"Tue\",\"Wed\"];\n const cols = [\"6-9\",\"9-12\",\"12-3\",\"3-6\"];\n const vals = [[82,55,30,10],[65,90,45,20],[15,40,70,95]];\n const curve = {\n low: (v) => 0.4 + v * 0.3,\n medium: (v) => 0.15 + v * 0.75,\n high: (v) => v,\n }[intensityScale] ?? ((v) => v);\n const label = `Heatmap of ${metric} by day and time. ` + rows.map((r, ri) =>\n `${r}: ` + cols.map((c, ci) => `${c} is ${vals[ri][ci]}`).join(\", \") + \".\"\n ).join(\" \");\n return (\n <div role=\"img\" aria-label={label} style={{ fontFamily: \"system-ui, sans-serif\", color: \"#241430\", maxWidth: 340, fontSize: 13 }}>\n <p style={{ margin: \"0 0 10px\", fontSize: 13, fontWeight: 600 }}>{metric} by day and time of day</p>\n <div style={{ display: \"grid\", gridTemplateColumns: \"40px repeat(4, 1fr)\", gap: 4, marginBottom: 4 }}>\n <span />\n {cols.map((c) => <span key={c} style={{ textAlign: \"center\", fontSize: 11, color: \"#241430aa\" }}>{c}</span>)}\n </div>\n <div style={{ display: \"grid\", gridTemplateColumns: \"40px repeat(4, 1fr)\", gap: 4 }}>\n {rows.map((row, ri) => (\n <React.Fragment key={row}>\n <span style={{ display: \"flex\", alignItems: \"center\", fontSize: 11, color: \"#241430aa\" }}>{row}</span>\n {cols.map((col, ci) => {\n const v = vals[ri][ci] / 100;\n const eff = curve(v);\n return (\n <div key={row + col} style={{\n aspectRatio: \"1.4\", borderRadius: 4, display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n background: `color-mix(in srgb, ${accent} ${eff * 100}%, #FAF7F2)`,\n }}>\n {showValues && <span style={{ fontSize: 11, fontWeight: 700 }}>{vals[ri][ci]}</span>}\n </div>\n );\n })}\n </React.Fragment>\n ))}\n </div>\n </div>\n );\n}" }