HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
HeatmapView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA strip of cells colored by how each one went: uptime, contributions, activity.ExperimentalSince 0.1.0ChartsUsageimport'@fusion.dev/helix/heatmap'import'@fusion.dev/helix-headless/heatmap'Preview
API ReferenceRoothelix-heatmapA strip of cells colored by how each one went: uptime, contributions, activity.
PropTypeDefaultDescriptionemptyTextstring"No readings"Shown when the table has no readings in it.forstring""The id of the table to read.gapnumber4The first guess at what this sheet draws, before it has been measured.labelstring""The drawing's name, for a pointer resting on it.minCellnumber12The drawn cell width, for the reason `gap` is the drawn gap. `0.75rem` at the root font size.rowsnumber1How many rows the strip has.thresholdsstring""Lower bounds for the tone buckets, in the order the tones are given.tonesstring""Tone per bucket, in the same order as `thresholds`.
ReadTypeDescriptionnamedstringWhat to call the drawing, the consumer's word or the table's own.pointerWhich reading a pointer is nearest, for a tooltip to sit on.readingsnumberHow many readings there are, which is what the pointer maps onto.seriesSeries[]The columns of the table, one series each, or none if there is no table.sourceRowsRow[]Every row of the table, with each cell's text as well as its number.visiblenumberHow many cells are actually drawn.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The `<table>` this draws, where it is not named by `for`.endBelow the strip, at the trailing edge.startBelow the strip, at the leading edge.summaryBelow the strip, in the middle.
EventTypeDescriptionhelix-resizeHelixResizeEventFired when the number of cells drawn changes, carrying that number.
PartDescriptioncellOne reading.emptyShown when the table has no readings in it.endThe trailing slot's box.footerThe three-slot row under the strip.markThe invisible point the tooltip is anchored to.startThe leading slot's box.stripThe grid of cells.summaryThe middle slot's box.tooltipThe bubble, forwarded from `Tooltip`.tooltip-anchorThe `Tooltip` element itself.tooltip-cellOne column's name and value inside the tooltip.tooltip-labelThe reading's own name inside the tooltip.tooltip-nameA column's name inside the tooltip.tooltip-valueA column's value inside the tooltip.
CSS PropertyDescription--heatmap-cell-heightHow tall a cell is. A row of a tall thin cell is what a status page draws.--heatmap-cell-inline-sizeHow wide a cell is. The strip fits as many as the container allows.--heatmap-cell-radiusHow far a cell's corners are rounded.--heatmap-cell-sizeThe size a cell wants on both axes, where neither is given its own.--heatmap-gapSpace between cells. Zero is a continuous field rather than a grid of tiles.--heatmap-rowsHow many rows the strip lays out. Written by the component from the data, read by the tier that draws it.--heatmap-toneThe tone of the cell this is set on. Written by the component, read by the sheet that paints.--heatmap-tone-1The quietest step of the magnitude ramp, reached by `tones="1 …"`.--heatmap-tone-2The second step of the magnitude ramp.--heatmap-tone-3The third step of the magnitude ramp.--heatmap-tone-4The fourth step of the magnitude ramp.--heatmap-tone-5The loudest step of the magnitude ramp.--heatmap-tone-accentWhat `accent` is worth.--heatmap-tone-dangerWhat `danger` is worth.--heatmap-tone-infoWhat `info` is worth.--heatmap-tone-mutedWhat `muted` is worth: the quiet ground, for a bucket that means nothing happened.--heatmap-tone-primaryWhat `primary` is worth.--heatmap-tone-successWhat `success` is worth, as a name or a `data-tone`.--heatmap-tone-warningWhat `warning` is worth.
Roothelix-headless-heatmapA strip of cells colored by how each one went: uptime, contributions, activity.
PropTypeDefaultDescriptionemptyTextstring"No readings"Shown when the table has no readings in it.forstring""The id of the table to read.gapnumber2Space between cells, in CSS pixels, for the same reason `min-cell` is a
number.labelstring""The drawing's name, for a pointer resting on it.minCellnumber8The smallest a cell may get before the strip draws fewer of them, in CSS pixels.rowsnumber1How many rows the strip has.thresholdsstring""Lower bounds for the tone buckets, in the order the tones are given.tonesstring""Tone per bucket, in the same order as `thresholds`.
ReadTypeDescriptionnamedstringWhat to call the drawing, the consumer's word or the table's own.pointerWhich reading a pointer is nearest, for a tooltip to sit on.readingsnumberHow many readings there are, which is what the pointer maps onto.seriesSeries[]The columns of the table, one series each, or none if there is no table.sourceRowsRow[]Every row of the table, with each cell's text as well as its number.visiblenumberHow many cells are actually drawn.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionendBelow the strip, at the trailing edge: usually the newest date.startBelow the strip, at the leading edge: usually the oldest date.summaryBelow the strip, in the middle: the reading over the range drawn.
EventTypeDescriptionhelix-resizeHelixResizeEventFired when the number of cells drawn changes, carrying that number.
PartDescriptioncellOne reading.emptyShown when the table has no readings in it.endThe trailing slot's box.footerThe three-slot row under the strip.markThe invisible point the tooltip is anchored to.startThe leading slot's box.stripThe grid of cells.summaryThe middle slot's box.tooltipThe bubble, forwarded from `Tooltip`.tooltip-anchorThe `Tooltip` element itself.tooltip-cellOne column's name and value inside the tooltip.tooltip-labelThe reading's own name inside the tooltip.tooltip-nameA column's name inside the tooltip.tooltip-valueA column's value inside the tooltip.
CSS PropertyDescription--heatmap-cell-heightHow tall a cell is. A row of a tall thin cell is what a status page draws.--heatmap-cell-inline-sizeHow wide a cell is. The strip fits as many as the container allows.--heatmap-cell-radiusHow far a cell's corners are rounded.--heatmap-cell-sizeThe size a cell wants on both axes, where neither is given its own.--heatmap-gapSpace between cells. Zero is a continuous field rather than a grid of tiles.--heatmap-rowsHow many rows the strip lays out. Written by the component from the data, read by the tier that draws it.--heatmap-toneThe tone of the cell this is set on. Written by the component, read by the sheet that paints.--heatmap-tone-1The quietest step of the magnitude ramp, reached by `tones="1 …"`.--heatmap-tone-2The second step of the magnitude ramp.--heatmap-tone-3The third step of the magnitude ramp.--heatmap-tone-4The fourth step of the magnitude ramp.--heatmap-tone-5The loudest step of the magnitude ramp.--heatmap-tone-accentWhat `accent` is worth.--heatmap-tone-dangerWhat `danger` is worth.--heatmap-tone-infoWhat `info` is worth.--heatmap-tone-mutedWhat `muted` is worth: the quiet ground, for a bucket that means nothing happened.--heatmap-tone-primaryWhat `primary` is worth.--heatmap-tone-successWhat `success` is worth, as a name or a `data-tone`.--heatmap-tone-warningWhat `warning` is worth.
ExamplesNameDescriptionContinuousCells with nothing between them, for a reading that never stopped.ContributionsTen weeks of commits, bucketed into five levels rather than a gradient.EmptyA range with no readings in it, which is not the same as a range of empty ones.EventsA measurement, not a proposal: the grid says how many cells it can show.HoursHalf hours of one day, drawn tall and narrow the way a status page draws them.PreviewThirty days of uptime, each cell colored by how that day went.PreviewThirty days of uptime, each cell colored by how that day went.SizesThe same readings at three cell sizes, set with one custom property.