@cdc/chart 4.26.6 → 4.26.10

package/src/components/HeatMap/heatmap.constants.ts

@@ -2,12 +2,16 @@ import { type HeatMapConfig } from '../../types/ChartConfig'
 
 export const MIN_HEATMAP_COLOR_BUCKETS = 1
 export const MAX_HEATMAP_COLOR_BUCKETS = 9
+export const MIN_HEATMAP_COLUMN_WIDTH = 1
+export const MAX_HEATMAP_COLUMN_WIDTH = 400
 
 export const HEATMAP_CONFIG_DEFAULTS: Required<HeatMapConfig> = {
   cellPadding: 1,
-  rowLabelGap: 32,
-  columnLabelGap: 56,
+  rowLabelGap: 0,
+  columnLabelGap: 20,
   colorBucketCount: 9,
   xAxisPosition: 'top',
-  showCellValues: false
+  showCellValues: false,
+  horizontalScroll: false,
+  minColumnWidth: 44
 }

package/src/components/HeatMap/heatmap.css

@@ -4,10 +4,104 @@
   --cove-heatmap-cell-stroke-width: 0.1px;
   --cove-heatmap-axis-title-color: var(--darkGray, #333);
   --cove-heatmap-axis-title-font-size: 18px;
+  --cove-heatmap-scrollbar-thumb-color: var(--mediumGray, #6b7280);
+  --cove-heatmap-scrollbar-thumb-hover-color: var(--darkGray, #4b5563);
+  --cove-heatmap-scrollbar-track-color: var(--lightGray, #e5e7eb);
+  --cove-heatmap-scroll-cue-color: rgba(31, 41, 55, 0.24);
 
   width: 100%;
 }
 
+.cove-visualization .cdc-heatmap__scroll-layout {
+  display: grid;
+  width: 100%;
+}
+
+.cove-visualization .cdc-heatmap__fixed-axis-svg,
+.cove-visualization .cdc-heatmap__scroll-content {
+  display: block;
+}
+
+.cove-visualization .cdc-heatmap__fixed-axis-svg {
+  overflow: visible;
+  position: relative;
+  z-index: 1;
+}
+
+.cove-visualization .cdc-heatmap__scroll-plot {
+  min-width: 0;
+  position: relative;
+}
+
+.cove-visualization .cdc-heatmap__scroll-area {
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scrollbar-color: var(--cove-heatmap-scrollbar-thumb-color) var(--cove-heatmap-scrollbar-track-color);
+  scrollbar-width: thin;
+}
+
+.cove-visualization .cdc-heatmap__scroll-area::-webkit-scrollbar {
+  height: 12px;
+}
+
+.cove-visualization .cdc-heatmap__scroll-area::-webkit-scrollbar-track {
+  background: var(--cove-heatmap-scrollbar-track-color);
+  border-radius: 6px;
+}
+
+.cove-visualization .cdc-heatmap__scroll-area::-webkit-scrollbar-thumb {
+  background: var(--cove-heatmap-scrollbar-thumb-color);
+  border: 2px solid var(--cove-heatmap-scrollbar-track-color);
+  border-radius: 6px;
+}
+
+.cove-visualization .cdc-heatmap__scroll-area::-webkit-scrollbar-thumb:hover {
+  background: var(--cove-heatmap-scrollbar-thumb-hover-color);
+}
+
+.cove-visualization .cdc-heatmap__scroll-area:focus-visible {
+  outline: 2px solid var(--coolGray90, #005ea8);
+  outline-offset: -2px;
+}
+
+.cove-visualization .cdc-heatmap__scroll-cue {
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 12px;
+  z-index: 2;
+}
+
+.cove-visualization .cdc-heatmap__scroll-cue.is-visible {
+  opacity: 1;
+}
+
+.cove-visualization .cdc-heatmap__scroll-cue--left {
+  background: linear-gradient(to right, var(--cove-heatmap-scroll-cue-color), transparent);
+  left: 0;
+}
+
+.cove-visualization .cdc-heatmap__scroll-cue--right {
+  background: linear-gradient(to left, var(--cove-heatmap-scroll-cue-color), transparent);
+  right: 0;
+}
+
+@media (forced-colors: active) {
+  .cove-visualization .cdc-heatmap__scroll-cue {
+    display: none;
+  }
+}
+
+.cove-visualization .cdc-heatmap__fixed-x-title {
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+}
+
 .cove-visualization .cdc-heatmap__cell {
   stroke: var(--cove-heatmap-cell-stroke-color);
   stroke-width: var(--cove-heatmap-cell-stroke-width);
@@ -17,6 +111,11 @@
   fill: var(--cove-heatmap-empty-cell-color);
 }
 
+.cove-visualization .cdc-heatmap__x-axis-line {
+  pointer-events: none;
+  stroke-width: 1px;
+}
+
 .cove-visualization .cdc-heatmap__cell-value {
   font-weight: 700;
   pointer-events: none;
@@ -32,8 +131,8 @@
   row-gap: 1rem;
 }
 
-.cove-visualization .cdc-heatmap__container .legend-wrapper {
-  row-gap: 0.75rem;
+.cove-visualization .cdc-heatmap__container.legend-top:not(.legend-hidden) .legend-wrapper {
+  row-gap: 0.25rem;
 }
 
 .cove-visualization

package/src/components/HeatMap/helpers/layout.ts

@@ -0,0 +1,80 @@
+type HeatMapXAxisTickValuesOptions = {
+  domain: string[]
+  formattedLabels: Record<string, string>
+  gridWidth?: number
+  rotationDegrees: number
+  requestedCount?: unknown
+  measureLabel: (label: string) => number
+  fontSize: number
+  minimumGap?: number
+}
+
+const getPositiveInteger = (value: unknown) => {
+  const numericValue = Number(value)
+
+  if (!Number.isFinite(numericValue) || numericValue <= 0) return undefined
+
+  return Math.floor(numericValue)
+}
+
+const sampleDomain = (domain: string[], requestedCount: number) => {
+  const count = Math.min(Math.max(requestedCount, 1), domain.length)
+
+  if (count >= domain.length) return domain
+  if (count === 1) return [domain[0]]
+
+  const lastIndex = domain.length - 1
+  const sampledIndexes = Array.from({ length: count }, (_, index) => Math.round((index * lastIndex) / (count - 1)))
+
+  return Array.from(new Set(sampledIndexes)).map(index => domain[index])
+}
+
+/**
+ * HeatMap cells always use the complete x-domain. This helper only chooses which
+ * domain values receive axis ticks and labels, preserving the first and last values
+ * whenever at least two labels fit.
+ */
+export const getHeatMapXAxisTickValues = ({
+  domain,
+  formattedLabels,
+  gridWidth,
+  rotationDegrees,
+  requestedCount,
+  measureLabel,
+  fontSize,
+  minimumGap = 12
+}: HeatMapXAxisTickValuesOptions) => {
+  if (domain.length <= 1) return domain
+
+  const configuredCount = getPositiveInteger(requestedCount)
+  if (configuredCount) return sampleDomain(domain, configuredCount)
+  if (gridWidth === undefined) return domain
+
+  const radians = (Math.abs(rotationDegrees) * Math.PI) / 180
+  const projectedLabelWidths = domain.map(value => {
+    const labelWidth = measureLabel(formattedLabels[value] || value)
+    return Math.abs(Math.cos(radians)) * labelWidth + Math.abs(Math.sin(radians)) * fontSize
+  })
+  const bandWidth = gridWidth / domain.length
+  const everyLabelFits =
+    rotationDegrees === 0 &&
+    projectedLabelWidths.every((labelWidth, index) => {
+      if (index === 0) return true
+
+      const previousLabelWidth = projectedLabelWidths[index - 1]
+      return previousLabelWidth / 2 + labelWidth / 2 + minimumGap <= bandWidth
+    })
+
+  // Band-scale labels are centered in neighboring cells. Check their actual pairwise
+  // widths before falling back to the conservative widest-label density estimate.
+  // Rotated labels use directional anchors, so they remain on the conservative path.
+  if (everyLabelFits) return domain
+
+  const widestProjectedLabel = projectedLabelWidths.reduce(
+    (widestLabel, labelWidth) => Math.max(widestLabel, labelWidth),
+    fontSize
+  )
+  const availableTickCount = Math.max(1, Math.floor(gridWidth / (widestProjectedLabel + minimumGap)))
+
+  return sampleDomain(domain, availableTickCount)
+}