@countermeasure-platform/web-components 0.2.0

package/src/charts/gauge/index.ts

@@ -0,0 +1,289 @@
+/**
+ * Gauge chart using Canvas 2D
+ * @countermeasure/web-components/charts/gauge
+ */
+
+import { BaseChart } from '../base'
+import { defaultColors, clamp, formatNumber } from '../utils'
+import type { GaugeChartConfig, GaugeThreshold } from './types'
+
+const DEG_TO_RAD = Math.PI / 180
+const BG_ARC_COLOR = '#e2e8f0'
+const NEEDLE_COLOR = '#1e293b'
+const VALUE_FONT = 'bold 28px system-ui, sans-serif'
+const UNIT_FONT = '14px system-ui, sans-serif'
+const LABEL_FONT = '13px system-ui, sans-serif'
+const LABEL_COLOR = '#64748b'
+
+export class GaugeChart extends BaseChart {
+  private value: number
+  private min: number
+  private max: number
+  private label: string | undefined
+  private unit: string | undefined
+  private thresholds: GaugeThreshold[]
+  private arcWidth: number
+  private startAngle: number
+  private endAngle: number
+  private showValue: boolean
+
+  constructor(config: GaugeChartConfig) {
+    super(config)
+    this.value = config.value
+    this.min = config.min ?? 0
+    this.max = config.max ?? 100
+    this.label = config.label
+    this.unit = config.unit
+    this.thresholds = config.thresholds ?? []
+    this.arcWidth = config.arcWidth ?? 20
+    this.startAngle = config.startAngle ?? 135
+    this.endAngle = config.endAngle ?? 405
+    this.showValue = config.showValue ?? true
+
+    this.render()
+  }
+
+  /** Update just the current value and re-render */
+  updateValue(value: number): void {
+    this.value = value
+    this.render()
+  }
+
+  /** Update the full configuration and re-render */
+  updateConfig(config: Partial<GaugeChartConfig>): void {
+    if (config.value !== undefined) {
+      this.value = config.value
+    }
+    if (config.min !== undefined) {
+      this.min = config.min
+    }
+    if (config.max !== undefined) {
+      this.max = config.max
+    }
+    if (config.label !== undefined) {
+      this.label = config.label
+    }
+    if (config.unit !== undefined) {
+      this.unit = config.unit
+    }
+    if (config.thresholds !== undefined) {
+      this.thresholds = config.thresholds
+    }
+    if (config.arcWidth !== undefined) {
+      this.arcWidth = config.arcWidth
+    }
+    if (config.startAngle !== undefined) {
+      this.startAngle = config.startAngle
+    }
+    if (config.endAngle !== undefined) {
+      this.endAngle = config.endAngle
+    }
+    if (config.showValue !== undefined) {
+      this.showValue = config.showValue
+    }
+    this.render()
+  }
+
+  render(): void {
+    this.clear()
+
+    const plot = this.plotArea
+    const cx = plot.x + plot.width / 2
+    const cy = plot.y + plot.height * 0.6
+    const radius = Math.min(plot.width / 2, plot.height * 0.55) - this.arcWidth / 2
+
+    const startRad = this.startAngle * DEG_TO_RAD
+    const endRad = this.endAngle * DEG_TO_RAD
+    const totalSweep = endRad - startRad
+
+    // Draw background arc
+    this.ctx.save()
+    this.ctx.beginPath()
+    this.ctx.arc(cx, cy, radius, startRad, endRad)
+    this.ctx.strokeStyle = BG_ARC_COLOR
+    this.ctx.lineWidth = this.arcWidth
+    this.ctx.lineCap = 'round'
+    this.ctx.stroke()
+    this.ctx.restore()
+
+    // Draw threshold segments or single fill arc
+    if (this.thresholds.length > 0) {
+      this.drawThresholdArcs(cx, cy, radius, startRad, totalSweep)
+    } else {
+      this.drawFillArc(cx, cy, radius, startRad, totalSweep)
+    }
+
+    // Draw needle
+    this.drawNeedle(cx, cy, radius, startRad, totalSweep)
+
+    // Draw center value
+    if (this.showValue) {
+      this.drawCenterText(cx, cy)
+    }
+  }
+
+  override destroy(): void {
+    super.destroy()
+  }
+
+  private drawThresholdArcs(
+    cx: number,
+    cy: number,
+    radius: number,
+    startRad: number,
+    totalSweep: number
+  ): void {
+    // Sort thresholds by value
+    const sorted = [...this.thresholds].sort((a, b) => a.value - b.value)
+    const range = this.max - this.min
+    if (range <= 0) return
+
+    const clampedValue = clamp(this.value, this.min, this.max)
+    const valueRatio = (clampedValue - this.min) / range
+
+    let prevRatio = 0
+
+    for (const threshold of sorted) {
+      const thresholdRatio = clamp((threshold.value - this.min) / range, 0, 1)
+      const segStart = startRad + prevRatio * totalSweep
+      const segEnd = startRad + thresholdRatio * totalSweep
+
+      // Only draw segments up to the current value
+      const fillEnd = startRad + valueRatio * totalSweep
+      const drawEnd = Math.min(segEnd, fillEnd)
+
+      if (drawEnd > segStart) {
+        this.ctx.save()
+        this.ctx.beginPath()
+        this.ctx.arc(cx, cy, radius, segStart, drawEnd)
+        this.ctx.strokeStyle = threshold.color
+        this.ctx.lineWidth = this.arcWidth
+        this.ctx.lineCap = 'butt'
+        this.ctx.stroke()
+        this.ctx.restore()
+      }
+
+      prevRatio = thresholdRatio
+    }
+
+    // Fill remaining from last threshold to max (if value extends beyond last threshold)
+    if (prevRatio < valueRatio) {
+      const lastColor = sorted[sorted.length - 1]?.color ?? defaultColors()[0] ?? '#3b82f6'
+      const segStart = startRad + prevRatio * totalSweep
+      const fillEnd = startRad + valueRatio * totalSweep
+      this.ctx.save()
+      this.ctx.beginPath()
+      this.ctx.arc(cx, cy, radius, segStart, fillEnd)
+      this.ctx.strokeStyle = lastColor
+      this.ctx.lineWidth = this.arcWidth
+      this.ctx.lineCap = 'butt'
+      this.ctx.stroke()
+      this.ctx.restore()
+    }
+  }
+
+  private drawFillArc(
+    cx: number,
+    cy: number,
+    radius: number,
+    startRad: number,
+    totalSweep: number
+  ): void {
+    const range = this.max - this.min
+    if (range <= 0) return
+
+    const clampedValue = clamp(this.value, this.min, this.max)
+    const ratio = (clampedValue - this.min) / range
+    const fillEnd = startRad + ratio * totalSweep
+    const color = defaultColors()[0] ?? '#3b82f6'
+
+    this.ctx.save()
+    this.ctx.beginPath()
+    this.ctx.arc(cx, cy, radius, startRad, fillEnd)
+    this.ctx.strokeStyle = color
+    this.ctx.lineWidth = this.arcWidth
+    this.ctx.lineCap = 'round'
+    this.ctx.stroke()
+    this.ctx.restore()
+  }
+
+  private drawNeedle(
+    cx: number,
+    cy: number,
+    radius: number,
+    startRad: number,
+    totalSweep: number
+  ): void {
+    const range = this.max - this.min
+    if (range <= 0) return
+
+    const clampedValue = clamp(this.value, this.min, this.max)
+    const ratio = (clampedValue - this.min) / range
+    const needleAngle = startRad + ratio * totalSweep
+    const needleLength = radius - this.arcWidth / 2 - 4
+
+    this.ctx.save()
+
+    // Needle line
+    this.ctx.beginPath()
+    this.ctx.moveTo(cx, cy)
+    this.ctx.lineTo(
+      cx + Math.cos(needleAngle) * needleLength,
+      cy + Math.sin(needleAngle) * needleLength
+    )
+    this.ctx.strokeStyle = NEEDLE_COLOR
+    this.ctx.lineWidth = 2.5
+    this.ctx.lineCap = 'round'
+    this.ctx.stroke()
+
+    // Center dot
+    this.ctx.beginPath()
+    this.ctx.arc(cx, cy, 5, 0, Math.PI * 2)
+    this.ctx.fillStyle = NEEDLE_COLOR
+    this.ctx.fill()
+
+    this.ctx.restore()
+  }
+
+  private drawCenterText(cx: number, cy: number): void {
+    this.ctx.save()
+    this.ctx.textAlign = 'center'
+    this.ctx.textBaseline = 'middle'
+
+    // Value text
+    const valueText =
+      this.unit !== undefined ? `${formatNumber(this.value)}${this.unit}` : formatNumber(this.value)
+
+    this.ctx.fillStyle = NEEDLE_COLOR
+    this.ctx.font = VALUE_FONT
+    this.ctx.fillText(valueText, cx, cy + 30)
+
+    // Optional label below value
+    if (this.label !== undefined) {
+      this.ctx.fillStyle = LABEL_COLOR
+      this.ctx.font = LABEL_FONT
+      this.ctx.fillText(this.label, cx, cy + 52)
+    }
+
+    // Min and max labels
+    this.ctx.fillStyle = LABEL_COLOR
+    this.ctx.font = UNIT_FONT
+
+    const plot = this.plotArea
+    const gaugeRadius = Math.min(plot.width / 2, plot.height * 0.55) - this.arcWidth / 2
+
+    const startRad = this.startAngle * DEG_TO_RAD
+    const endRad = this.endAngle * DEG_TO_RAD
+
+    const minX = cx + Math.cos(startRad) * (gaugeRadius + this.arcWidth)
+    const minY = cy + Math.sin(startRad) * (gaugeRadius + this.arcWidth)
+    this.ctx.textAlign = 'center'
+    this.ctx.fillText(formatNumber(this.min), minX, minY + 14)
+
+    const maxX = cx + Math.cos(endRad) * (gaugeRadius + this.arcWidth)
+    const maxY = cy + Math.sin(endRad) * (gaugeRadius + this.arcWidth)
+    this.ctx.fillText(formatNumber(this.max), maxX, maxY + 14)
+
+    this.ctx.restore()
+  }
+}

package/src/charts/gauge/types.ts

@@ -0,0 +1,24 @@
+/**
+ * Gauge chart type definitions
+ * @countermeasure/web-components/charts/gauge/types
+ */
+
+import type { BaseChartConfig } from '../types'
+
+export interface GaugeThreshold {
+  value: number
+  color: string
+}
+
+export interface GaugeChartConfig extends BaseChartConfig {
+  value: number
+  min?: number
+  max?: number
+  label?: string
+  unit?: string
+  thresholds?: GaugeThreshold[]
+  arcWidth?: number
+  startAngle?: number
+  endAngle?: number
+  showValue?: boolean
+}

package/src/charts/heatmap/index.ts

@@ -0,0 +1,257 @@
+/**
+ * Heatmap chart - grid of colored rectangles with intensity mapping
+ * @countermeasure/web-components/charts/heatmap
+ */
+
+import { BaseChart } from '../base'
+import type { HeatmapChartConfig, HeatmapCell } from './types'
+import { lerpColor, clamp, formatNumber, roundRect } from '../utils'
+import { ChartTooltip } from '../tooltip'
+
+const DEFAULT_COLOR_LOW = '#f0f9ff'
+const DEFAULT_COLOR_HIGH = '#1e40af'
+const DEFAULT_CELL_GAP = 1
+const LABEL_FONT = '11px system-ui, sans-serif'
+const VALUE_FONT = '10px system-ui, sans-serif'
+const LABEL_COLOR = '#64748b'
+
+export class HeatmapChart extends BaseChart {
+  private data: HeatmapCell[]
+  private rowLabels: string[]
+  private colLabels: string[]
+  private colorLow: string
+  private colorHigh: string
+  private showValues: boolean
+  private cellRadius: number
+  private cellGap: number
+  private tooltipEnabled: boolean
+  private tooltipFormat: ((value: number, label: string, series: string) => string) | null
+  private tooltip: ChartTooltip | null
+  private handleMouseMove: ((e: MouseEvent) => void) | null
+  private handleMouseLeave: (() => void) | null
+  private valueMin: number
+  private valueMax: number
+
+  constructor(config: HeatmapChartConfig) {
+    super(config)
+
+    this.data = config.data
+    this.rowLabels = config.rowLabels
+    this.colLabels = config.colLabels
+    this.colorLow = config.colorRange !== undefined ? config.colorRange[0] : DEFAULT_COLOR_LOW
+    this.colorHigh = config.colorRange !== undefined ? config.colorRange[1] : DEFAULT_COLOR_HIGH
+    this.showValues = config.showValues === true
+    this.cellRadius = config.cellRadius ?? 0
+    this.cellGap = config.cellGap ?? DEFAULT_CELL_GAP
+    this.tooltipEnabled = config.tooltip?.enabled !== false
+    this.tooltipFormat = config.tooltip?.format ?? null
+    this.tooltip = null
+    this.handleMouseMove = null
+    this.handleMouseLeave = null
+    this.valueMin = 0
+    this.valueMax = 0
+
+    this.computeValueRange()
+
+    if (this.tooltipEnabled) {
+      this.setupTooltip()
+    }
+
+    this.render()
+  }
+
+  private computeValueRange(): void {
+    if (this.data.length === 0) {
+      this.valueMin = 0
+      this.valueMax = 1
+      return
+    }
+    let min = Infinity
+    let max = -Infinity
+    for (const cell of this.data) {
+      if (cell.value < min) min = cell.value
+      if (cell.value > max) max = cell.value
+    }
+    this.valueMin = min
+    this.valueMax = max === min ? min + 1 : max
+  }
+
+  private getCellColor(value: number): string {
+    const t = clamp((value - this.valueMin) / (this.valueMax - this.valueMin), 0, 1)
+    return lerpColor(this.colorLow, this.colorHigh, t)
+  }
+
+  private getCellBounds(): {
+    cellWidth: number
+    cellHeight: number
+    offsetX: number
+    offsetY: number
+  } {
+    const plot = this.plotArea
+    const numCols = this.colLabels.length
+    const numRows = this.rowLabels.length
+
+    if (numCols === 0 || numRows === 0) {
+      return { cellWidth: 0, cellHeight: 0, offsetX: plot.x, offsetY: plot.y }
+    }
+
+    const cellWidth = (plot.width - this.cellGap * (numCols - 1)) / numCols
+    const cellHeight = (plot.height - this.cellGap * (numRows - 1)) / numRows
+
+    return { cellWidth, cellHeight, offsetX: plot.x, offsetY: plot.y }
+  }
+
+  private setupTooltip(): void {
+    this.tooltip = new ChartTooltip(this.container)
+
+    this.handleMouseMove = (e: MouseEvent): void => {
+      const rect = this.canvas.getBoundingClientRect()
+      const mx = e.clientX - rect.left
+      const my = e.clientY - rect.top
+
+      const { cellWidth, cellHeight, offsetX, offsetY } = this.getCellBounds()
+      if (cellWidth <= 0 || cellHeight <= 0) return
+
+      const col = Math.floor((mx - offsetX) / (cellWidth + this.cellGap))
+      const row = Math.floor((my - offsetY) / (cellHeight + this.cellGap))
+
+      if (col < 0 || col >= this.colLabels.length || row < 0 || row >= this.rowLabels.length) {
+        this.tooltip?.hide()
+        return
+      }
+
+      // Verify the mouse is actually within the cell (not in gap)
+      const cellX = offsetX + col * (cellWidth + this.cellGap)
+      const cellY = offsetY + row * (cellHeight + this.cellGap)
+      if (mx < cellX || mx > cellX + cellWidth || my < cellY || my > cellY + cellHeight) {
+        this.tooltip?.hide()
+        return
+      }
+
+      const cell = this.data.find(c => c.row === row && c.col === col)
+      const value = cell !== undefined ? cell.value : 0
+      const rowLabel = this.rowLabels[row] ?? String(row)
+      const colLabel = this.colLabels[col] ?? String(col)
+
+      let content: string
+      if (this.tooltipFormat !== null) {
+        content = this.tooltipFormat(value, rowLabel, colLabel)
+      } else {
+        content = `<strong>${rowLabel} / ${colLabel}</strong><br/>Value: ${formatNumber(value)}`
+      }
+
+      this.tooltip?.show(mx, my, content)
+    }
+
+    this.handleMouseLeave = (): void => {
+      this.tooltip?.hide()
+    }
+
+    this.canvas.addEventListener('mousemove', this.handleMouseMove)
+    this.canvas.addEventListener('mouseleave', this.handleMouseLeave)
+  }
+
+  public render(): void {
+    this.clear()
+
+    const { ctx } = this
+    const plot = this.plotArea
+    const numCols = this.colLabels.length
+    const numRows = this.rowLabels.length
+
+    if (numCols === 0 || numRows === 0) return
+
+    const { cellWidth, cellHeight, offsetX, offsetY } = this.getCellBounds()
+
+    // Draw column labels on top
+    ctx.save()
+    ctx.fillStyle = LABEL_COLOR
+    ctx.font = LABEL_FONT
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'bottom'
+    for (let c = 0; c < numCols; c++) {
+      const label = this.colLabels[c]
+      if (label === undefined) continue
+      const cx = offsetX + c * (cellWidth + this.cellGap) + cellWidth / 2
+      ctx.fillText(label, cx, plot.y - 4, cellWidth)
+    }
+    ctx.restore()
+
+    // Draw row labels on left
+    ctx.save()
+    ctx.fillStyle = LABEL_COLOR
+    ctx.font = LABEL_FONT
+    ctx.textAlign = 'right'
+    ctx.textBaseline = 'middle'
+    for (let r = 0; r < numRows; r++) {
+      const label = this.rowLabels[r]
+      if (label === undefined) continue
+      const cy = offsetY + r * (cellHeight + this.cellGap) + cellHeight / 2
+      ctx.fillText(label, plot.x - 6, cy)
+    }
+    ctx.restore()
+
+    // Build a lookup map for cell values
+    const cellMap = new Map<string, number>()
+    for (const cell of this.data) {
+      cellMap.set(`${String(cell.row)},${String(cell.col)}`, cell.value)
+    }
+
+    // Draw cells
+    ctx.save()
+    for (let r = 0; r < numRows; r++) {
+      for (let c = 0; c < numCols; c++) {
+        const cellX = offsetX + c * (cellWidth + this.cellGap)
+        const cellY = offsetY + r * (cellHeight + this.cellGap)
+        const value = cellMap.get(`${String(r)},${String(c)}`) ?? 0
+        const color = this.getCellColor(value)
+
+        ctx.fillStyle = color
+
+        if (this.cellRadius > 0) {
+          roundRect(ctx, cellX, cellY, cellWidth, cellHeight, this.cellRadius)
+          ctx.fill()
+        } else {
+          ctx.fillRect(cellX, cellY, cellWidth, cellHeight)
+        }
+
+        // Draw value text in cell
+        if (this.showValues) {
+          ctx.fillStyle = this.getContrastTextColor(value)
+          ctx.font = VALUE_FONT
+          ctx.textAlign = 'center'
+          ctx.textBaseline = 'middle'
+          ctx.fillText(
+            formatNumber(value),
+            cellX + cellWidth / 2,
+            cellY + cellHeight / 2,
+            cellWidth - 4
+          )
+        }
+      }
+    }
+    ctx.restore()
+  }
+
+  private getContrastTextColor(value: number): string {
+    const t = clamp((value - this.valueMin) / (this.valueMax - this.valueMin), 0, 1)
+    return t > 0.5 ? '#ffffff' : '#1e293b'
+  }
+
+  public update(data: HeatmapCell[]): void {
+    this.data = data
+    this.computeValueRange()
+    this.render()
+  }
+
+  public override destroy(): void {
+    if (this.handleMouseMove !== null) {
+      this.canvas.removeEventListener('mousemove', this.handleMouseMove)
+    }
+    if (this.handleMouseLeave !== null) {
+      this.canvas.removeEventListener('mouseleave', this.handleMouseLeave)
+    }
+    this.tooltip?.destroy()
+    super.destroy()
+  }
+}

package/src/charts/heatmap/types.ts

@@ -0,0 +1,23 @@
+/**
+ * Heatmap chart type definitions
+ * @countermeasure/web-components/charts/heatmap/types
+ */
+
+import type { BaseChartConfig, TooltipConfig } from '../types'
+
+export interface HeatmapCell {
+  row: number
+  col: number
+  value: number
+}
+
+export interface HeatmapChartConfig extends BaseChartConfig {
+  data: HeatmapCell[]
+  rowLabels: string[]
+  colLabels: string[]
+  tooltip?: TooltipConfig
+  colorRange?: [string, string]
+  showValues?: boolean
+  cellRadius?: number
+  cellGap?: number
+}

package/src/charts/index.ts

@@ -0,0 +1,89 @@
+/**
+ * Charts - Canvas-based chart component library
+ * @countermeasure/web-components/charts
+ */
+
+// Infrastructure
+export { BaseChart } from './base'
+export type { AccessibleDataPoint } from './base'
+export { InteractiveChart } from './interactive'
+export { SeriesChart } from './series'
+export type {
+  BaseChartConfig,
+  InteractiveChartConfig,
+  SeriesChartConfig,
+  ResolvedSeries,
+  ChartPadding,
+  PlotArea,
+  DataPoint,
+  ChartSeries,
+  AxisConfig,
+  LegendItem,
+  LegendConfig,
+  TooltipConfig,
+} from './types'
+export {
+  scaleLinear,
+  scaleBand,
+  defaultColors,
+  hexToRgba,
+  clamp,
+  formatNumber,
+  niceScale,
+  lerpColor,
+  polarToCartesian,
+  resolveColor,
+  drawFilledBar,
+  hitTestRect,
+  findClosestPoint,
+} from './utils'
+export { drawXAxis, drawYAxis, drawGridLines } from './axis'
+export { ChartLegend } from './legend'
+export { ChartTooltip } from './tooltip'
+export { drawAnnotations } from './annotations'
+export type { Annotation } from './annotations'
+export { ChartZoom } from './zoom'
+export type { ZoomTransform } from './zoom'
+
+// Chart types
+export { LineChart } from './line/index'
+export type { LineChartConfig } from './line/types'
+
+export { BarChart } from './bar/index'
+export type { BarChartConfig } from './bar/types'
+
+export { AreaChart } from './area/index'
+export type { AreaChartConfig } from './area/types'
+
+export { PieChart } from './pie/index'
+export type { PieChartConfig, PieSlice } from './pie/types'
+
+export { SparklineChart } from './sparkline/index'
+export type { SparklineChartConfig } from './sparkline/types'
+
+export { GaugeChart } from './gauge/index'
+export type { GaugeChartConfig } from './gauge/types'
+
+export { HeatmapChart } from './heatmap/index'
+export type { HeatmapChartConfig, HeatmapCell } from './heatmap/types'
+
+export { TreemapChart } from './treemap/index'
+export type { TreemapChartConfig, TreemapNode } from './treemap/types'
+
+export { ScatterChart } from './scatter/index'
+export type { ScatterChartConfig } from './scatter/types'
+
+export { RadarChart } from './radar/index'
+export type { RadarChartConfig, RadarDataset } from './radar/types'
+
+export { WaterfallChart } from './waterfall/index'
+export type { WaterfallChartConfig, WaterfallItem } from './waterfall/types'
+
+export { SankeyChart } from './sankey/index'
+export type { SankeyChartConfig, SankeyNode, SankeyLink } from './sankey/types'
+
+export { FunnelChart } from './funnel/index'
+export type { FunnelChartConfig, FunnelSegment } from './funnel/types'
+
+export { CandlestickChart } from './candlestick/index'
+export type { CandlestickChartConfig, CandlestickItem } from './candlestick/types'