@countermeasure-platform/web-components 0.2.0

package/src/charts/scatter/index.ts

@@ -0,0 +1,284 @@
+/**
+ * Scatter chart component
+ * @countermeasure/web-components/charts/scatter
+ */
+
+import { SeriesChart } from '../series'
+import type { ChartSeries, DataPoint, ResolvedSeries } from '../types'
+import { scaleLinear, hexToRgba, niceScale } from '../utils'
+import { drawXAxis, drawYAxis } from '../axis'
+import type { ScatterChartConfig } from './types'
+
+const DEFAULT_DOT_RADIUS = 4
+const HIGHLIGHT_RADIUS_BONUS = 2
+const HOVER_THRESHOLD = 20
+
+interface PlottedPoint {
+  px: number
+  py: number
+  dataPoint: DataPoint
+  seriesName: string
+  color: string
+}
+
+interface TrendLine {
+  slope: number
+  intercept: number
+}
+
+export class ScatterChart extends SeriesChart {
+  private readonly config: ScatterChartConfig
+  private plottedPoints: PlottedPoint[]
+  private highlightedPoint: PlottedPoint | null
+
+  constructor(config: ScatterChartConfig) {
+    super(config)
+    this.config = config
+    this.plottedPoints = []
+    this.highlightedPoint = null
+    this.render()
+  }
+
+  private computeDataBounds(visible: ResolvedSeries[]): {
+    xMin: number
+    xMax: number
+    yMin: number
+    yMax: number
+    xLabels: string[]
+  } {
+    let xMin = Infinity
+    let xMax = -Infinity
+    let yMin = Infinity
+    let yMax = -Infinity
+    const xLabelsSet = new Set<string>()
+
+    for (const s of visible) {
+      for (const d of s.data) {
+        const xVal = typeof d.x === 'number' ? d.x : parseFloat(d.x)
+        if (!isNaN(xVal)) {
+          if (xVal < xMin) xMin = xVal
+          if (xVal > xMax) xMax = xVal
+        }
+        xLabelsSet.add(String(d.x))
+        if (d.y < yMin) yMin = d.y
+        if (d.y > yMax) yMax = d.y
+      }
+    }
+
+    if (xMin === Infinity) {
+      xMin = 0
+      xMax = 1
+    }
+    if (yMin === Infinity) {
+      yMin = 0
+      yMax = 1
+    }
+
+    return {
+      xMin: this.config.xAxis?.min ?? xMin,
+      xMax: this.config.xAxis?.max ?? xMax,
+      yMin: this.config.yAxis?.min ?? yMin,
+      yMax: this.config.yAxis?.max ?? yMax,
+      xLabels: Array.from(xLabelsSet),
+    }
+  }
+
+  /** Compute linear regression (least squares) for a set of data points */
+  private computeTrendLine(data: DataPoint[]): TrendLine | null {
+    if (data.length < 2) return null
+
+    const xValues: number[] = []
+    const yValues: number[] = []
+
+    for (const d of data) {
+      const xVal = typeof d.x === 'number' ? d.x : parseFloat(d.x)
+      if (!isNaN(xVal)) {
+        xValues.push(xVal)
+        yValues.push(d.y)
+      }
+    }
+
+    const n = xValues.length
+    if (n < 2) return null
+
+    let sumX = 0
+    let sumY = 0
+    let sumXY = 0
+    let sumXX = 0
+
+    for (let i = 0; i < n; i++) {
+      const xv = xValues[i]
+      const yv = yValues[i]
+      if (xv === undefined || yv === undefined) continue
+      sumX += xv
+      sumY += yv
+      sumXY += xv * yv
+      sumXX += xv * xv
+    }
+
+    const denominator = n * sumXX - sumX * sumX
+    if (denominator === 0) return null
+
+    const slope = (n * sumXY - sumX * sumY) / denominator
+    const intercept = (sumY - slope * sumX) / n
+
+    return { slope, intercept }
+  }
+
+  render(): void {
+    this.clear()
+    this.plottedPoints = []
+
+    const visible = this.getVisibleSeries()
+    const { xMin, xMax, yMin, yMax, xLabels } = this.computeDataBounds(visible)
+    const plot = this.plotArea
+    const xTickCount = this.config.xAxis?.tickCount ?? 5
+    const yTickCount = this.config.yAxis?.tickCount ?? 5
+    const niceX = niceScale(xMin, xMax, xTickCount)
+    const niceY = niceScale(yMin, yMax, yTickCount)
+
+    // Draw axes - use numeric labels for x-axis
+    const xAxisLabels =
+      xLabels.length > 0 ? xLabels : this.generateNumericLabels(niceX.min, niceX.max, niceX.step)
+    drawXAxis(this.ctx, plot, xAxisLabels, this.config.xAxis)
+    drawYAxis(this.ctx, plot, niceY.min, niceY.max, this.config.yAxis)
+
+    // Create scales
+    const xScale = scaleLinear([niceX.min, niceX.max], [plot.x, plot.x + plot.width])
+    const yScale = scaleLinear([niceY.min, niceY.max], [plot.y + plot.height, plot.y])
+
+    const dotRadius = this.config.dotRadius ?? DEFAULT_DOT_RADIUS
+    const showTrendLine = this.config.showTrendLine === true
+
+    // Draw trend lines first (behind dots)
+    if (showTrendLine) {
+      for (const s of visible) {
+        const trend = this.computeTrendLine(s.data)
+        if (trend !== null) {
+          const x1 = niceX.min
+          const y1 = trend.slope * x1 + trend.intercept
+          const x2 = niceX.max
+          const y2 = trend.slope * x2 + trend.intercept
+
+          this.ctx.beginPath()
+          this.ctx.moveTo(xScale(x1), yScale(y1))
+          this.ctx.lineTo(xScale(x2), yScale(y2))
+          this.ctx.strokeStyle = hexToRgba(s.color, 0.4)
+          this.ctx.lineWidth = 1.5
+          this.ctx.setLineDash([6, 4])
+          this.ctx.stroke()
+          this.ctx.setLineDash([])
+        }
+      }
+    }
+
+    // Draw data points
+    for (const s of visible) {
+      for (const d of s.data) {
+        const xVal = typeof d.x === 'number' ? d.x : parseFloat(d.x)
+        if (isNaN(xVal)) continue
+
+        const px = xScale(xVal)
+        const py = yScale(d.y)
+
+        const isHighlighted =
+          this.highlightedPoint !== null &&
+          this.highlightedPoint.px === px &&
+          this.highlightedPoint.py === py
+
+        this.plottedPoints.push({
+          px,
+          py,
+          dataPoint: d,
+          seriesName: s.name,
+          color: s.color,
+        })
+
+        // Draw dot
+        this.ctx.beginPath()
+        const radius = isHighlighted ? dotRadius + HIGHLIGHT_RADIUS_BONUS : dotRadius
+        this.ctx.arc(px, py, radius, 0, Math.PI * 2)
+        this.ctx.fillStyle = isHighlighted ? hexToRgba(s.color, 1) : hexToRgba(s.color, 0.7)
+        this.ctx.fill()
+        this.ctx.strokeStyle = s.color
+        this.ctx.lineWidth = 1.5
+        this.ctx.stroke()
+      }
+    }
+
+    this.updateSeriesLegend()
+  }
+
+  private generateNumericLabels(min: number, max: number, step: number): string[] {
+    const labels: string[] = []
+    for (let v = min; v <= max + step * 0.001; v += step) {
+      labels.push(String(Math.round(v * 1000) / 1000))
+    }
+    return labels
+  }
+
+  protected handleMouseMove(e: MouseEvent): void {
+    const rect = this.canvas.getBoundingClientRect()
+    const mouseX = e.clientX - rect.left
+    const mouseY = e.clientY - rect.top
+
+    // Find nearest point
+    let closest: PlottedPoint | null = null
+    let closestDist = Infinity
+
+    for (const pt of this.plottedPoints) {
+      const dist = Math.sqrt((mouseX - pt.px) ** 2 + (mouseY - pt.py) ** 2)
+      if (dist < closestDist) {
+        closestDist = dist
+        closest = pt
+      }
+    }
+
+    const previousHighlighted = this.highlightedPoint
+
+    if (closest !== null && closestDist < HOVER_THRESHOLD) {
+      this.highlightedPoint = closest
+
+      if (this.tooltip !== null) {
+        let content: string
+        if (this.config.tooltip?.format !== undefined) {
+          content = this.config.tooltip.format(
+            closest.dataPoint.y,
+            String(closest.dataPoint.x),
+            closest.seriesName
+          )
+        } else {
+          content = `${closest.seriesName}: (${String(closest.dataPoint.x)}, ${String(closest.dataPoint.y)})`
+        }
+        this.tooltip.show(closest.px, closest.py, content)
+      }
+    } else {
+      this.highlightedPoint = null
+      if (this.tooltip !== null) {
+        this.tooltip.hide()
+      }
+    }
+
+    // Re-render if highlight state changed
+    if (this.highlightedPoint !== previousHighlighted) {
+      this.render()
+    }
+  }
+
+  protected handleMouseLeave(): void {
+    if (this.highlightedPoint !== null) {
+      this.highlightedPoint = null
+      this.render()
+    }
+    if (this.tooltip !== null) {
+      this.tooltip.hide()
+    }
+  }
+
+  public update(series: ChartSeries[]): void {
+    this.series = this.resolveSeries(series)
+    this.render()
+  }
+}
+
+export type { ScatterChartConfig } from './types'

package/src/charts/scatter/types.ts

@@ -0,0 +1,11 @@
+/**
+ * Scatter chart type definitions
+ * @countermeasure/web-components/charts/scatter/types
+ */
+
+import type { SeriesChartConfig } from '../types'
+
+export interface ScatterChartConfig extends SeriesChartConfig {
+  dotRadius?: number
+  showTrendLine?: boolean
+}

package/src/charts/series.ts

@@ -0,0 +1,63 @@
+/**
+ * Series chart base class with series management, visibility toggling, and legend updates
+ * @countermeasure/web-components/charts/series
+ */
+
+import { InteractiveChart } from './interactive'
+import type { ChartSeries, LegendItem, ResolvedSeries, SeriesChartConfig } from './types'
+import { defaultColors } from './utils'
+
+export abstract class SeriesChart extends InteractiveChart {
+  protected series: ResolvedSeries[]
+  protected hiddenSeries: Set<string>
+
+  constructor(config: SeriesChartConfig) {
+    // Series charts show legend by default unless explicitly disabled
+    if (config.legend?.visible === false) {
+      const { legend: _omit, ...rest } = config
+      super(rest)
+    } else {
+      super({ ...config, legend: config.legend ?? { visible: true } })
+    }
+
+    this.hiddenSeries = new Set()
+    this.series = this.resolveSeries(config.series)
+
+    // Wire legend toggle to hidden series management
+    if (this.legend !== null) {
+      this.legend.onToggle((index: number, _active: boolean) => {
+        const s = this.series[index]
+        if (s === undefined) return
+        if (this.hiddenSeries.has(s.name)) {
+          this.hiddenSeries.delete(s.name)
+        } else {
+          this.hiddenSeries.add(s.name)
+        }
+        this.render()
+      })
+    }
+  }
+
+  protected resolveSeries(rawSeries: ChartSeries[]): ResolvedSeries[] {
+    const colors = defaultColors()
+    return rawSeries.map((s, i) => ({
+      name: s.name,
+      data: s.data,
+      color: s.color ?? colors[i % colors.length] ?? '#3b82f6',
+    }))
+  }
+
+  protected getVisibleSeries(): ResolvedSeries[] {
+    return this.series.filter(s => !this.hiddenSeries.has(s.name))
+  }
+
+  protected updateSeriesLegend(): void {
+    if (this.legend === null) return
+    const items: LegendItem[] = this.series.map(s => ({
+      label: s.name,
+      color: s.color,
+      active: !this.hiddenSeries.has(s.name),
+    }))
+    this.legend.update(items)
+  }
+}

package/src/charts/sparkline/index.ts

@@ -0,0 +1,224 @@
+/**
+ * Sparkline chart using Canvas 2D
+ * @countermeasure/web-components/charts/sparkline
+ */
+
+import { BaseChart } from '../base'
+import { defaultColors, hexToRgba } from '../utils'
+import type { SparklineChartConfig } from './types'
+
+const DEFAULT_LINE_WIDTH = 1.5
+const DEFAULT_SPARKLINE_PADDING = 2
+const DOT_RADIUS = 2.5
+const MIN_MAX_DOT_RADIUS = 2
+
+export class SparklineChart extends BaseChart {
+  private data: number[]
+  private color: string
+  private fillColor: string | undefined
+  private lineWidth: number
+  private showEndDot: boolean
+  private showMinMax: boolean
+  private chartType: 'line' | 'bar'
+
+  constructor(config: SparklineChartConfig) {
+    // Override padding to minimal values for sparklines
+    const sparkConfig = {
+      ...config,
+      padding: {
+        top: config.padding?.top ?? DEFAULT_SPARKLINE_PADDING,
+        right: config.padding?.right ?? DEFAULT_SPARKLINE_PADDING,
+        bottom: config.padding?.bottom ?? DEFAULT_SPARKLINE_PADDING,
+        left: config.padding?.left ?? DEFAULT_SPARKLINE_PADDING,
+      },
+    }
+    super(sparkConfig)
+    this.data = config.data
+    this.color = config.color ?? defaultColors()[0] ?? '#3b82f6'
+    this.fillColor = config.fillColor
+    this.lineWidth = config.lineWidth ?? DEFAULT_LINE_WIDTH
+    this.showEndDot = config.showEndDot ?? false
+    this.showMinMax = config.showMinMax ?? false
+    this.chartType = config.type ?? 'line'
+
+    this.render()
+  }
+
+  /** Replace data and re-render */
+  update(data: number[]): void {
+    this.data = data
+    this.render()
+  }
+
+  render(): void {
+    this.clear()
+
+    if (this.data.length === 0) return
+
+    if (this.chartType === 'bar') {
+      this.renderBars()
+    } else {
+      this.renderLine()
+    }
+  }
+
+  private renderLine(): void {
+    const plot = this.plotArea
+    const count = this.data.length
+    if (count === 0) return
+
+    const { dataMin, dataMax } = this.computeMinMax()
+    const range = dataMax - dataMin
+    const effectiveRange = range === 0 ? 1 : range
+
+    const stepX = count > 1 ? plot.width / (count - 1) : 0
+
+    // Build points
+    const points: { x: number; y: number }[] = []
+    let minIndex = 0
+    let maxIndex = 0
+    let minVal = Infinity
+    let maxVal = -Infinity
+
+    for (let i = 0; i < count; i++) {
+      const val = this.data[i]
+      if (val === undefined) continue
+
+      const px = plot.x + stepX * i
+      const py = plot.y + plot.height - ((val - dataMin) / effectiveRange) * plot.height
+      points.push({ x: px, y: py })
+
+      if (val < minVal) {
+        minVal = val
+        minIndex = points.length - 1
+      }
+      if (val >= maxVal) {
+        maxVal = val
+        maxIndex = points.length - 1
+      }
+    }
+
+    if (points.length === 0) return
+
+    // Optional fill area below line
+    if (this.fillColor !== undefined) {
+      this.ctx.save()
+      this.ctx.beginPath()
+      const first = points[0]
+      if (first !== undefined) {
+        this.ctx.moveTo(first.x, plot.y + plot.height)
+        this.ctx.lineTo(first.x, first.y)
+      }
+      for (let i = 1; i < points.length; i++) {
+        const p = points[i]
+        if (p !== undefined) {
+          this.ctx.lineTo(p.x, p.y)
+        }
+      }
+      const last = points[points.length - 1]
+      if (last !== undefined) {
+        this.ctx.lineTo(last.x, plot.y + plot.height)
+      }
+      this.ctx.closePath()
+      this.ctx.fillStyle = this.fillColor
+      this.ctx.fill()
+      this.ctx.restore()
+    }
+
+    // Draw line
+    this.ctx.save()
+    this.ctx.beginPath()
+    const first = points[0]
+    if (first !== undefined) {
+      this.ctx.moveTo(first.x, first.y)
+    }
+    for (let i = 1; i < points.length; i++) {
+      const p = points[i]
+      if (p !== undefined) {
+        this.ctx.lineTo(p.x, p.y)
+      }
+    }
+    this.ctx.strokeStyle = this.color
+    this.ctx.lineWidth = this.lineWidth
+    this.ctx.lineJoin = 'round'
+    this.ctx.lineCap = 'round'
+    this.ctx.stroke()
+    this.ctx.restore()
+
+    // End dot
+    if (this.showEndDot && points.length > 0) {
+      const endPoint = points[points.length - 1]
+      if (endPoint !== undefined) {
+        this.drawDot(endPoint.x, endPoint.y, DOT_RADIUS, this.color)
+      }
+    }
+
+    // Min/max dots
+    if (this.showMinMax && points.length > 1) {
+      const minPoint = points[minIndex]
+      const maxPoint = points[maxIndex]
+      if (minPoint !== undefined) {
+        this.drawDot(minPoint.x, minPoint.y, MIN_MAX_DOT_RADIUS, '#ef4444')
+      }
+      if (maxPoint !== undefined) {
+        this.drawDot(maxPoint.x, maxPoint.y, MIN_MAX_DOT_RADIUS, '#22c55e')
+      }
+    }
+  }
+
+  private renderBars(): void {
+    const plot = this.plotArea
+    const count = this.data.length
+    if (count === 0) return
+
+    const { dataMin, dataMax } = this.computeMinMax()
+    const range = dataMax - dataMin
+    const effectiveRange = range === 0 ? 1 : range
+
+    const barWidth = Math.max(1, plot.width / count - 1)
+    const stepX = plot.width / count
+
+    this.ctx.save()
+
+    for (let i = 0; i < count; i++) {
+      const val = this.data[i]
+      if (val === undefined) continue
+
+      const barHeight = ((val - dataMin) / effectiveRange) * plot.height
+      const bx = plot.x + stepX * i + (stepX - barWidth) / 2
+      const by = plot.y + plot.height - barHeight
+
+      this.ctx.fillStyle = hexToRgba(this.color, 0.8)
+      this.ctx.fillRect(bx, by, barWidth, barHeight)
+    }
+
+    this.ctx.restore()
+  }
+
+  private computeMinMax(): { dataMin: number; dataMax: number } {
+    let dataMin = Infinity
+    let dataMax = -Infinity
+
+    for (const v of this.data) {
+      if (v < dataMin) dataMin = v
+      if (v > dataMax) dataMax = v
+    }
+
+    if (!isFinite(dataMin)) dataMin = 0
+    if (!isFinite(dataMax)) dataMax = 1
+
+    return { dataMin, dataMax }
+  }
+
+  private drawDot(x: number, y: number, r: number, color: string): void {
+    this.ctx.save()
+    this.ctx.beginPath()
+    this.ctx.arc(x, y, r, 0, Math.PI * 2)
+    this.ctx.fillStyle = color
+    this.ctx.fill()
+    this.ctx.strokeStyle = '#ffffff'
+    this.ctx.lineWidth = 1
+    this.ctx.stroke()
+    this.ctx.restore()
+  }
+}

package/src/charts/sparkline/types.ts

@@ -0,0 +1,16 @@
+/**
+ * Sparkline chart type definitions
+ * @countermeasure/web-components/charts/sparkline/types
+ */
+
+import type { BaseChartConfig } from '../types'
+
+export interface SparklineChartConfig extends BaseChartConfig {
+  data: number[]
+  color?: string
+  fillColor?: string
+  lineWidth?: number
+  showEndDot?: boolean
+  showMinMax?: boolean
+  type?: 'line' | 'bar'
+}