@countermeasure-platform/web-components 1.2.2-dev.16.1 → 1.2.2-dev.18.1

package/dist/charts/gauge/types.d.ts

@@ -24,17 +24,22 @@ export interface GaugeChartConfig extends BaseChartConfig {
     thresholds?: GaugeThreshold[];
     /**
      * Width of the gauge arc in pixels.
-     * @default 12
+     * @default 20
      */
     arcWidth?: number;
     /**
-     * Start angle of the arc in radians.
-     * @default -Math.PI
+     * Start angle of the arc in degrees. Angles follow the standard Canvas
+     * convention where 0 points along the positive X axis and angles increase
+     * clockwise, so 135 places the start at the lower-left.
+     * @default 135
      */
     startAngle?: number;
     /**
-     * End angle of the arc in radians.
-     * @default 0
+     * End angle of the arc in degrees. Should be greater than `startAngle`; the
+     * default of 405 produces a 270 degree sweep ending at the lower-right.
+     * Values where `endAngle <= startAngle` are silently normalized by adding
+     * one or more full turns so the arc still sweeps in the intended direction.
+     * @default 405
      */
     endAngle?: number;
     /**

package/dist/charts/gauge/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/charts/gauge/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/C,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,UAAU,CAAC,EAAE,cAAc,EAAE,CAAA;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/charts/gauge/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/C,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,UAAU,CAAC,EAAE,cAAc,EAAE,CAAA;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@countermeasure-platform/web-components",
-  "version": "1.2.2-dev.16.1",
+  "version": "1.2.2-dev.18.1",
   "description": "Shared web components for CounterMeasure applications - consolidates common frontend functionality across projects.",
   "type": "module",
   "main": "./dist/index.js",

package/src/charts/funnel/index.ts

@@ -8,11 +8,16 @@ import { defaultColors, hexToRgba, formatNumber } from '../utils'
 import { ChartTooltip } from '../tooltip'
 import type { FunnelChartConfig, FunnelSegment } from './types'
 
-const LABEL_COLOR = '#334155'
-const VALUE_COLOR = '#64748b'
-const LABEL_FONT = '12px system-ui, sans-serif'
-const VALUE_FONT = '11px system-ui, sans-serif'
+const LABEL_FONT = '600 12px ui-sans-serif, system-ui, -apple-system, sans-serif'
+const VALUE_FONT = '500 11px ui-sans-serif, system-ui, -apple-system, sans-serif'
 const HOVER_ALPHA_DELTA = 0.12
+const NAMED_COLOR_RGB = new Map<string, [number, number, number]>([
+  ['black', [0, 0, 0]],
+  ['white', [255, 255, 255]],
+  ['navy', [0, 0, 128]],
+  ['rebeccapurple', [102, 51, 153]],
+  ['transparent', [0, 0, 0]],
+])
 
 interface ResolvedSegment {
   label: string
@@ -24,6 +29,196 @@ interface ResolvedSegment {
   percentage: number
 }
 
+/**
+ * Pick a readable text foreground/shadow pair for a given segment fill color.
+ *
+ * Funnel labels sit on top of saturated brand colors that vary segment-to-
+ * segment, so we can't just use a single theme-foreground value — light text
+ * vanishes on yellow/orange, dark text vanishes on navy/teal. Compute the
+ * fill's perceived luminance (sRGB → relative-luminance approximation) and
+ * pick white-on-shadow or black-on-shadow accordingly.
+ */
+function pickReadableText(color: string): { text: string; shadow: string } {
+  const rgb = parseColorToRgb(color)
+  if (rgb === null) {
+    return { text: '#0f172a', shadow: 'rgba(255, 255, 255, 0.45)' }
+  }
+  const [r, g, b] = rgb
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+  if (luminance > 0.6) {
+    return { text: '#0f172a', shadow: 'rgba(255, 255, 255, 0.45)' }
+  }
+  return { text: '#ffffff', shadow: 'rgba(0, 0, 0, 0.45)' }
+}
+
+function parseColorToRgb(color: string): [number, number, number] | null {
+  const trimmed = color.trim()
+  const parsedLiteral = parseColorLiteralToRgb(trimmed)
+  if (parsedLiteral !== null) {
+    return parsedLiteral
+  }
+
+  const named = NAMED_COLOR_RGB.get(trimmed.toLowerCase())
+  if (named !== undefined) {
+    return named
+  }
+
+  // For anything else — modern CSS syntaxes (oklch, color-mix, lab, color())
+  // and the long tail of CSS named colors — round-trip through canvas to get
+  // a canonical rgb()/rgba() string we can then parse with our literal parser.
+  const normalized = normalizeColorViaCanvas(trimmed)
+  if (normalized === null) {
+    return null
+  }
+  return parseColorLiteralToRgb(normalized)
+}
+
+function parseColorLiteralToRgb(trimmed: string): [number, number, number] | null {
+  if (trimmed.startsWith('#')) {
+    const hex = trimmed.slice(1)
+    if (hex.length === 3) {
+      const r = parseInt(hex[0]! + hex[0], 16)
+      const g = parseInt(hex[1]! + hex[1], 16)
+      const b = parseInt(hex[2]! + hex[2], 16)
+      return [r, g, b]
+    }
+    if (hex.length === 6) {
+      const r = parseInt(hex.slice(0, 2), 16)
+      const g = parseInt(hex.slice(2, 4), 16)
+      const b = parseInt(hex.slice(4, 6), 16)
+      return [r, g, b]
+    }
+    return null
+  }
+  const rgbMatch = trimmed.match(/^rgba?\(([^)]+)\)$/i)
+  if (rgbMatch) {
+    const parts = parseColorFunctionArgs(rgbMatch[1]!)
+    const r = parseRgbChannel(parts[0])
+    const g = parseRgbChannel(parts[1])
+    const b = parseRgbChannel(parts[2])
+    if (Number.isFinite(r) && Number.isFinite(g) && Number.isFinite(b)) {
+      return [r, g, b]
+    }
+  }
+  const hslMatch = trimmed.match(/^hsla?\(([^)]+)\)$/i)
+  if (hslMatch) {
+    const parts = parseColorFunctionArgs(hslMatch[1]!)
+    const h = parseHue(parts[0])
+    const s = parsePercentage(parts[1])
+    const l = parsePercentage(parts[2])
+    if (Number.isFinite(h) && Number.isFinite(s) && Number.isFinite(l)) {
+      return hslToRgb(h, s, l)
+    }
+  }
+  return null
+}
+
+// Lazily-allocated 1×1 canvas reused across color normalization calls. The
+// canvas itself is stateless w.r.t. fillStyle (each call writes both sentinel
+// and the input), so it's safe to share — and re-creating one per call would
+// produce a constant stream of small DOM nodes for funnels with many segments
+// that re-render on hover.
+let normalizeCanvasCtx: CanvasRenderingContext2D | null | undefined
+
+function getNormalizeCanvasCtx(): CanvasRenderingContext2D | null {
+  if (normalizeCanvasCtx !== undefined) return normalizeCanvasCtx
+  if (typeof document === 'undefined') {
+    normalizeCanvasCtx = null
+    return null
+  }
+  const canvas = document.createElement('canvas')
+  canvas.width = 1
+  canvas.height = 1
+  normalizeCanvasCtx = canvas.getContext('2d')
+  return normalizeCanvasCtx
+}
+
+/**
+ * Round-trip an arbitrary CSS color string through a canvas 2D context's
+ * `fillStyle` so the browser canonicalizes it to `rgb(...)` or `rgba(...)`.
+ * Returns `null` if the color is invalid (canvas keeps the previous value
+ * when assignment is rejected — we detect this by comparing against a known
+ * sentinel written immediately before the actual color).
+ */
+function normalizeColorViaCanvas(color: string): string | null {
+  const ctx = getNormalizeCanvasCtx()
+  if (ctx === null) return null
+
+  // Write a known sentinel and read it back to get its canonical form, then
+  // write the candidate color. If canvas rejected `color` as invalid, the
+  // post-assignment `fillStyle` will still equal the canonicalized sentinel.
+  // Reading between writes also prevents linters from flagging the first
+  // write as dead.
+  ctx.fillStyle = '#010203'
+  const baseline = ctx.fillStyle
+  ctx.fillStyle = color
+  const normalized = ctx.fillStyle
+  if (normalized === baseline && color.trim().toLowerCase() !== '#010203') {
+    return null
+  }
+  return typeof normalized === 'string' ? normalized : null
+}
+
+function parseColorFunctionArgs(input: string): string[] {
+  const channels = input.split('/')[0]!.trim()
+  return channels.includes(',')
+    ? channels.split(',').map(part => part.trim())
+    : channels.split(/\s+/).map(part => part.trim())
+}
+
+function parseRgbChannel(part: string | undefined): number {
+  if (part === undefined) return Number.NaN
+  if (part.endsWith('%')) {
+    const value = Number(part.slice(0, -1))
+    return Number.isFinite(value) ? Math.round((value / 100) * 255) : Number.NaN
+  }
+  return Number(part)
+}
+
+function parseHue(part: string | undefined): number {
+  if (part === undefined) return Number.NaN
+  if (part.endsWith('turn')) {
+    const value = Number(part.slice(0, -4))
+    return Number.isFinite(value) ? value % 1 : Number.NaN
+  }
+  if (part.endsWith('rad')) {
+    const value = Number(part.slice(0, -3))
+    return Number.isFinite(value) ? (value / (Math.PI * 2)) % 1 : Number.NaN
+  }
+  const raw = part.endsWith('deg') ? part.slice(0, -3) : part
+  const value = Number(raw)
+  return Number.isFinite(value) ? (((value % 360) + 360) % 360) / 360 : Number.NaN
+}
+
+function parsePercentage(part: string | undefined): number {
+  if (part === undefined || !part.endsWith('%')) return Number.NaN
+  const value = Number(part.slice(0, -1))
+  return Number.isFinite(value) ? value / 100 : Number.NaN
+}
+
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  if (s === 0) {
+    const value = Math.round(l * 255)
+    return [value, value, value]
+  }
+  const hue2rgb = (p: number, q: number, t: number): number => {
+    let hue = t
+    if (hue < 0) hue += 1
+    if (hue > 1) hue -= 1
+    if (hue < 1 / 6) return p + (q - p) * 6 * hue
+    if (hue < 1 / 2) return q
+    if (hue < 2 / 3) return p + (q - p) * (2 / 3 - hue) * 6
+    return p
+  }
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+  const p = 2 * l - q
+  return [
+    Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
+    Math.round(hue2rgb(p, q, h) * 255),
+    Math.round(hue2rgb(p, q, h - 1 / 3) * 255),
+  ]
+}
+
 export class FunnelChart extends BaseChart {
   private segments: FunnelSegment[]
   private resolved: ResolvedSegment[] = []
@@ -239,24 +434,27 @@ export class FunnelChart extends BaseChart {
   }
 
   private drawSegmentText(cx: number, cy: number, seg: ResolvedSegment): void {
+    const { text, shadow } = pickReadableText(seg.color)
+
     this.ctx.save()
     this.ctx.textAlign = 'center'
     this.ctx.textBaseline = 'middle'
+    this.ctx.shadowColor = shadow
+    this.ctx.shadowBlur = 4
+    this.ctx.shadowOffsetY = 1
+    this.ctx.fillStyle = text
 
     if (this.showLabels && this.showValues) {
-      this.ctx.fillStyle = LABEL_COLOR
       this.ctx.font = LABEL_FONT
       this.ctx.fillText(seg.label, cx, cy - 8)
 
-      this.ctx.fillStyle = VALUE_COLOR
       this.ctx.font = VALUE_FONT
+      this.ctx.globalAlpha = 0.9
       this.ctx.fillText(`${formatNumber(seg.value)} (${seg.percentage.toFixed(1)}%)`, cx, cy + 8)
     } else if (this.showLabels) {
-      this.ctx.fillStyle = LABEL_COLOR
       this.ctx.font = LABEL_FONT
       this.ctx.fillText(seg.label, cx, cy)
     } else if (this.showValues) {
-      this.ctx.fillStyle = VALUE_COLOR
       this.ctx.font = VALUE_FONT
       this.ctx.fillText(formatNumber(seg.value), cx, cy)
     }