@countermeasure-platform/web-components 0.2.0

package/dist/charts/sparkline/index.js

@@ -0,0 +1,99 @@
+import { BaseChart as e } from "../base.js";
+import { defaultColors as t, hexToRgba as n } from "../utils.js";
+//#region src/charts/sparkline/index.ts
+var r = 1.5, i = 2, a = 2.5, o = 2, s = class extends e {
+	data;
+	color;
+	fillColor;
+	lineWidth;
+	showEndDot;
+	showMinMax;
+	chartType;
+	constructor(e) {
+		let n = {
+			...e,
+			padding: {
+				top: e.padding?.top ?? i,
+				right: e.padding?.right ?? i,
+				bottom: e.padding?.bottom ?? i,
+				left: e.padding?.left ?? i
+			}
+		};
+		super(n), this.data = e.data, this.color = e.color ?? t()[0] ?? "#3b82f6", this.fillColor = e.fillColor, this.lineWidth = e.lineWidth ?? r, this.showEndDot = e.showEndDot ?? !1, this.showMinMax = e.showMinMax ?? !1, this.chartType = e.type ?? "line", this.render();
+	}
+	update(e) {
+		this.data = e, this.render();
+	}
+	render() {
+		this.clear(), this.data.length !== 0 && (this.chartType === "bar" ? this.renderBars() : this.renderLine());
+	}
+	renderLine() {
+		let e = this.plotArea, t = this.data.length;
+		if (t === 0) return;
+		let { dataMin: n, dataMax: r } = this.computeMinMax(), i = r - n, s = i === 0 ? 1 : i, c = t > 1 ? e.width / (t - 1) : 0, l = [], u = 0, d = 0, f = Infinity, p = -Infinity;
+		for (let r = 0; r < t; r++) {
+			let t = this.data[r];
+			if (t === void 0) continue;
+			let i = e.x + c * r, a = e.y + e.height - (t - n) / s * e.height;
+			l.push({
+				x: i,
+				y: a
+			}), t < f && (f = t, u = l.length - 1), t >= p && (p = t, d = l.length - 1);
+		}
+		if (l.length === 0) return;
+		if (this.fillColor !== void 0) {
+			this.ctx.save(), this.ctx.beginPath();
+			let t = l[0];
+			t !== void 0 && (this.ctx.moveTo(t.x, e.y + e.height), this.ctx.lineTo(t.x, t.y));
+			for (let e = 1; e < l.length; e++) {
+				let t = l[e];
+				t !== void 0 && this.ctx.lineTo(t.x, t.y);
+			}
+			let n = l[l.length - 1];
+			n !== void 0 && this.ctx.lineTo(n.x, e.y + e.height), this.ctx.closePath(), this.ctx.fillStyle = this.fillColor, this.ctx.fill(), this.ctx.restore();
+		}
+		this.ctx.save(), this.ctx.beginPath();
+		let m = l[0];
+		m !== void 0 && this.ctx.moveTo(m.x, m.y);
+		for (let e = 1; e < l.length; e++) {
+			let t = l[e];
+			t !== void 0 && this.ctx.lineTo(t.x, t.y);
+		}
+		if (this.ctx.strokeStyle = this.color, this.ctx.lineWidth = this.lineWidth, this.ctx.lineJoin = "round", this.ctx.lineCap = "round", this.ctx.stroke(), this.ctx.restore(), this.showEndDot && l.length > 0) {
+			let e = l[l.length - 1];
+			e !== void 0 && this.drawDot(e.x, e.y, a, this.color);
+		}
+		if (this.showMinMax && l.length > 1) {
+			let e = l[u], t = l[d];
+			e !== void 0 && this.drawDot(e.x, e.y, o, "#ef4444"), t !== void 0 && this.drawDot(t.x, t.y, o, "#22c55e");
+		}
+	}
+	renderBars() {
+		let e = this.plotArea, t = this.data.length;
+		if (t === 0) return;
+		let { dataMin: r, dataMax: i } = this.computeMinMax(), a = i - r, o = a === 0 ? 1 : a, s = Math.max(1, e.width / t - 1), c = e.width / t;
+		this.ctx.save();
+		for (let i = 0; i < t; i++) {
+			let t = this.data[i];
+			if (t === void 0) continue;
+			let a = (t - r) / o * e.height, l = e.x + c * i + (c - s) / 2, u = e.y + e.height - a;
+			this.ctx.fillStyle = n(this.color, .8), this.ctx.fillRect(l, u, s, a);
+		}
+		this.ctx.restore();
+	}
+	computeMinMax() {
+		let e = Infinity, t = -Infinity;
+		for (let n of this.data) n < e && (e = n), n > t && (t = n);
+		return isFinite(e) || (e = 0), isFinite(t) || (t = 1), {
+			dataMin: e,
+			dataMax: t
+		};
+	}
+	drawDot(e, t, n, r) {
+		this.ctx.save(), this.ctx.beginPath(), this.ctx.arc(e, t, n, 0, Math.PI * 2), this.ctx.fillStyle = r, this.ctx.fill(), this.ctx.strokeStyle = "#ffffff", this.ctx.lineWidth = 1, this.ctx.stroke(), this.ctx.restore();
+	}
+};
+//#endregion
+export { s as SparklineChart };
+
+//# sourceMappingURL=index.js.map

package/dist/charts/sparkline/index.js.map

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

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

@@ -0,0 +1,11 @@
+import { BaseChartConfig } from '../types';
+export interface SparklineChartConfig extends BaseChartConfig {
+    data: number[];
+    color?: string;
+    fillColor?: string;
+    lineWidth?: number;
+    showEndDot?: boolean;
+    showMinMax?: boolean;
+    type?: 'line' | 'bar';
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/charts/sparkline/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/C,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;CACtB"}

package/dist/charts/tooltip.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Chart tooltip overlay
+ * @countermeasure/web-components/charts/tooltip
+ */
+/** Structured tooltip content for safe rendering */
+export interface TooltipContent {
+    /** Optional title/header */
+    title?: string;
+    /** Data items to display */
+    items?: {
+        label: string;
+        value: string | number;
+        color?: string;
+    }[];
+}
+/** HTML-based tooltip overlay that follows the cursor within a chart container */
+export declare class ChartTooltip {
+    private element;
+    private container;
+    constructor(container: HTMLElement);
+    /** Position and display the tooltip with the given content, flipping if near edges */
+    show(x: number, y: number, content: string | TooltipContent): void;
+    /** Hide the tooltip */
+    hide(): void;
+    /** Remove the tooltip element from the DOM */
+    destroy(): void;
+}
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/charts/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/charts/tooltip.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,oDAAoD;AACpD,MAAM,WAAW,cAAc;IAC7B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4BAA4B;IAC5B,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;QACtB,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,EAAE,CAAA;CACJ;AAED,kFAAkF;AAClF,qBAAa,YAAY;IACvB,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,SAAS,CAAa;gBAElB,SAAS,EAAE,WAAW;IA6BlC,sFAAsF;IACtF,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI;IAuElE,uBAAuB;IACvB,IAAI,IAAI,IAAI;IAIZ,8CAA8C;IAC9C,OAAO,IAAI,IAAI;CAGhB"}

package/dist/charts/tooltip.js

@@ -0,0 +1,41 @@
+//#region src/charts/tooltip.ts
+var e = 12, t = "cmm-chart-tooltip", n = class {
+	element;
+	container;
+	constructor(e) {
+		this.container = e, this.element = document.createElement("div"), this.element.className = t, this.element.style.position = "absolute", this.element.style.display = "none", this.element.style.pointerEvents = "none", this.element.style.backgroundColor = "#1e293b", this.element.style.color = "#f8fafc", this.element.style.padding = "6px 10px", this.element.style.borderRadius = "4px", this.element.style.fontSize = "12px", this.element.style.fontFamily = "system-ui, sans-serif", this.element.style.lineHeight = "1.4", this.element.style.whiteSpace = "nowrap", this.element.style.zIndex = "1000", this.element.style.boxShadow = "0 2px 8px rgba(0,0,0,0.15)", this.element.style.transition = "opacity 0.15s ease", window.getComputedStyle(this.container).position === "static" && (this.container.style.position = "relative"), this.container.appendChild(this.element);
+	}
+	show(t, n, r) {
+		if (this.element.textContent = "", typeof r == "string") this.element.textContent = r;
+		else {
+			if (r.title !== void 0) {
+				let e = document.createElement("div");
+				e.style.fontWeight = "600", e.style.marginBottom = r.items === void 0 ? "0" : "4px", e.textContent = r.title, this.element.appendChild(e);
+			}
+			if (r.items !== void 0) for (let e of r.items) {
+				let t = document.createElement("div");
+				if (t.style.display = "flex", t.style.alignItems = "center", t.style.gap = "6px", e.color !== void 0) {
+					let n = document.createElement("span");
+					n.style.width = "8px", n.style.height = "8px", n.style.borderRadius = "50%", n.style.backgroundColor = e.color, t.appendChild(n);
+				}
+				let n = document.createElement("span");
+				n.textContent = e.label, t.appendChild(n);
+				let r = document.createElement("span");
+				r.style.marginLeft = "auto", r.style.fontWeight = "600", r.textContent = String(e.value), t.appendChild(r), this.element.appendChild(t);
+			}
+		}
+		this.element.style.display = "block";
+		let i = this.container.getBoundingClientRect(), a = this.element.offsetWidth, o = this.element.offsetHeight, s = t + e, c = n - o - e;
+		s + a > i.width && (s = t - a - e), c < 0 && (c = n + e), this.element.style.left = `${String(Math.max(0, s))}px`, this.element.style.top = `${String(Math.max(0, c))}px`;
+	}
+	hide() {
+		this.element.style.display = "none";
+	}
+	destroy() {
+		this.element.remove();
+	}
+};
+//#endregion
+export { n as ChartTooltip };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/charts/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/charts/tooltip.ts"],"sourcesContent":["/**\n * Chart tooltip overlay\n * @countermeasure/web-components/charts/tooltip\n */\n\nconst TOOLTIP_OFFSET = 12\nconst TOOLTIP_CLASS = 'cmm-chart-tooltip'\n\n/** Structured tooltip content for safe rendering */\nexport interface TooltipContent {\n  /** Optional title/header */\n  title?: string\n  /** Data items to display */\n  items?: {\n    label: string\n    value: string | number\n    color?: string\n  }[]\n}\n\n/** HTML-based tooltip overlay that follows the cursor within a chart container */\nexport class ChartTooltip {\n  private element: HTMLDivElement\n  private container: HTMLElement\n\n  constructor(container: HTMLElement) {\n    this.container = container\n\n    this.element = document.createElement('div')\n    this.element.className = TOOLTIP_CLASS\n    this.element.style.position = 'absolute'\n    this.element.style.display = 'none'\n    this.element.style.pointerEvents = 'none'\n    this.element.style.backgroundColor = '#1e293b'\n    this.element.style.color = '#f8fafc'\n    this.element.style.padding = '6px 10px'\n    this.element.style.borderRadius = '4px'\n    this.element.style.fontSize = '12px'\n    this.element.style.fontFamily = 'system-ui, sans-serif'\n    this.element.style.lineHeight = '1.4'\n    this.element.style.whiteSpace = 'nowrap'\n    this.element.style.zIndex = '1000'\n    this.element.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)'\n    this.element.style.transition = 'opacity 0.15s ease'\n\n    // Ensure container is a positioning context\n    const containerPosition = window.getComputedStyle(this.container).position\n    if (containerPosition === 'static') {\n      this.container.style.position = 'relative'\n    }\n\n    this.container.appendChild(this.element)\n  }\n\n  /** Position and display the tooltip with the given content, flipping if near edges */\n  show(x: number, y: number, content: string | TooltipContent): void {\n    // Clear previous content safely\n    this.element.textContent = ''\n\n    if (typeof content === 'string') {\n      // Plain text content - escape HTML\n      this.element.textContent = content\n    } else {\n      // Structured content - build safely with DOM APIs\n      if (content.title !== undefined) {\n        const titleEl = document.createElement('div')\n        titleEl.style.fontWeight = '600'\n        titleEl.style.marginBottom = content.items !== undefined ? '4px' : '0'\n        titleEl.textContent = content.title\n        this.element.appendChild(titleEl)\n      }\n\n      if (content.items !== undefined) {\n        for (const item of content.items) {\n          const itemEl = document.createElement('div')\n          itemEl.style.display = 'flex'\n          itemEl.style.alignItems = 'center'\n          itemEl.style.gap = '6px'\n\n          if (item.color !== undefined) {\n            const dot = document.createElement('span')\n            dot.style.width = '8px'\n            dot.style.height = '8px'\n            dot.style.borderRadius = '50%'\n            dot.style.backgroundColor = item.color\n            itemEl.appendChild(dot)\n          }\n\n          const labelEl = document.createElement('span')\n          labelEl.textContent = item.label\n          itemEl.appendChild(labelEl)\n\n          const valueEl = document.createElement('span')\n          valueEl.style.marginLeft = 'auto'\n          valueEl.style.fontWeight = '600'\n          valueEl.textContent = String(item.value)\n          itemEl.appendChild(valueEl)\n\n          this.element.appendChild(itemEl)\n        }\n      }\n    }\n\n    this.element.style.display = 'block'\n\n    const containerRect = this.container.getBoundingClientRect()\n    const tooltipWidth = this.element.offsetWidth\n    const tooltipHeight = this.element.offsetHeight\n\n    let left = x + TOOLTIP_OFFSET\n    let top = y - tooltipHeight - TOOLTIP_OFFSET\n\n    // Flip horizontally if too close to right edge\n    if (left + tooltipWidth > containerRect.width) {\n      left = x - tooltipWidth - TOOLTIP_OFFSET\n    }\n\n    // Flip vertically if too close to top edge\n    if (top < 0) {\n      top = y + TOOLTIP_OFFSET\n    }\n\n    this.element.style.left = `${String(Math.max(0, left))}px`\n    this.element.style.top = `${String(Math.max(0, top))}px`\n  }\n\n  /** Hide the tooltip */\n  hide(): void {\n    this.element.style.display = 'none'\n  }\n\n  /** Remove the tooltip element from the DOM */\n  destroy(): void {\n    this.element.remove()\n  }\n}\n"],"mappings":";AAKA,IAAM,IAAiB,IACjB,IAAgB,qBAeT,IAAb,MAA0B;CACxB;CACA;CAEA,YAAY,GAAwB;AA0BlC,EAzBA,KAAK,YAAY,GAEjB,KAAK,UAAU,SAAS,cAAc,MAAM,EAC5C,KAAK,QAAQ,YAAY,GACzB,KAAK,QAAQ,MAAM,WAAW,YAC9B,KAAK,QAAQ,MAAM,UAAU,QAC7B,KAAK,QAAQ,MAAM,gBAAgB,QACnC,KAAK,QAAQ,MAAM,kBAAkB,WACrC,KAAK,QAAQ,MAAM,QAAQ,WAC3B,KAAK,QAAQ,MAAM,UAAU,YAC7B,KAAK,QAAQ,MAAM,eAAe,OAClC,KAAK,QAAQ,MAAM,WAAW,QAC9B,KAAK,QAAQ,MAAM,aAAa,yBAChC,KAAK,QAAQ,MAAM,aAAa,OAChC,KAAK,QAAQ,MAAM,aAAa,UAChC,KAAK,QAAQ,MAAM,SAAS,QAC5B,KAAK,QAAQ,MAAM,YAAY,8BAC/B,KAAK,QAAQ,MAAM,aAAa,sBAGN,OAAO,iBAAiB,KAAK,UAAU,CAAC,aACxC,aACxB,KAAK,UAAU,MAAM,WAAW,aAGlC,KAAK,UAAU,YAAY,KAAK,QAAQ;;CAI1C,KAAK,GAAW,GAAW,GAAwC;AAIjE,MAFA,KAAK,QAAQ,cAAc,IAEvB,OAAO,KAAY,SAErB,MAAK,QAAQ,cAAc;OACtB;AAEL,OAAI,EAAQ,UAAU,KAAA,GAAW;IAC/B,IAAM,IAAU,SAAS,cAAc,MAAM;AAI7C,IAHA,EAAQ,MAAM,aAAa,OAC3B,EAAQ,MAAM,eAAe,EAAQ,UAAU,KAAA,IAAoB,MAAR,OAC3D,EAAQ,cAAc,EAAQ,OAC9B,KAAK,QAAQ,YAAY,EAAQ;;AAGnC,OAAI,EAAQ,UAAU,KAAA,EACpB,MAAK,IAAM,KAAQ,EAAQ,OAAO;IAChC,IAAM,IAAS,SAAS,cAAc,MAAM;AAK5C,QAJA,EAAO,MAAM,UAAU,QACvB,EAAO,MAAM,aAAa,UAC1B,EAAO,MAAM,MAAM,OAEf,EAAK,UAAU,KAAA,GAAW;KAC5B,IAAM,IAAM,SAAS,cAAc,OAAO;AAK1C,KAJA,EAAI,MAAM,QAAQ,OAClB,EAAI,MAAM,SAAS,OACnB,EAAI,MAAM,eAAe,OACzB,EAAI,MAAM,kBAAkB,EAAK,OACjC,EAAO,YAAY,EAAI;;IAGzB,IAAM,IAAU,SAAS,cAAc,OAAO;AAE9C,IADA,EAAQ,cAAc,EAAK,OAC3B,EAAO,YAAY,EAAQ;IAE3B,IAAM,IAAU,SAAS,cAAc,OAAO;AAM9C,IALA,EAAQ,MAAM,aAAa,QAC3B,EAAQ,MAAM,aAAa,OAC3B,EAAQ,cAAc,OAAO,EAAK,MAAM,EACxC,EAAO,YAAY,EAAQ,EAE3B,KAAK,QAAQ,YAAY,EAAO;;;AAKtC,OAAK,QAAQ,MAAM,UAAU;EAE7B,IAAM,IAAgB,KAAK,UAAU,uBAAuB,EACtD,IAAe,KAAK,QAAQ,aAC5B,IAAgB,KAAK,QAAQ,cAE/B,IAAO,IAAI,GACX,IAAM,IAAI,IAAgB;AAa9B,EAVI,IAAO,IAAe,EAAc,UACtC,IAAO,IAAI,IAAe,IAIxB,IAAM,MACR,IAAM,IAAI,IAGZ,KAAK,QAAQ,MAAM,OAAO,GAAG,OAAO,KAAK,IAAI,GAAG,EAAK,CAAC,CAAC,KACvD,KAAK,QAAQ,MAAM,MAAM,GAAG,OAAO,KAAK,IAAI,GAAG,EAAI,CAAC,CAAC;;CAIvD,OAAa;AACX,OAAK,QAAQ,MAAM,UAAU;;CAI/B,UAAgB;AACd,OAAK,QAAQ,QAAQ"}

package/dist/charts/treemap/index.d.ts

@@ -0,0 +1,26 @@
+import { BaseChart } from '../base';
+import { TreemapChartConfig, TreemapNode } from './types';
+export declare class TreemapChart extends BaseChart {
+    private data;
+    private showLabels;
+    private cellGap;
+    private cellRadius;
+    private tooltipEnabled;
+    private tooltipFormat;
+    private tooltip;
+    private rects;
+    private colors;
+    private handleMouseMove;
+    private handleMouseLeave;
+    private hoveredIndex;
+    constructor(config: TreemapChartConfig);
+    private computeLayout;
+    private squarify;
+    private layoutRow;
+    private worstAspectRatio;
+    private setupTooltip;
+    render(): void;
+    update(data: TreemapNode): void;
+    destroy(): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/charts/treemap/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/charts/treemap/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAmB9D,qBAAa,YAAa,SAAQ,SAAS;IACzC,OAAO,CAAC,IAAI,CAAa;IACzB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,aAAa,CAAmE;IACxF,OAAO,CAAC,OAAO,CAAqB;IACpC,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,MAAM,CAAU;IACxB,OAAO,CAAC,eAAe,CAAkC;IACzD,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,YAAY,CAAQ;gBAEhB,MAAM,EAAE,kBAAkB;IAuBtC,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,QAAQ;IAmBhB,OAAO,CAAC,SAAS;IA+GjB,OAAO,CAAC,gBAAgB;IAwBxB,OAAO,CAAC,YAAY;IAmDb,MAAM,IAAI,IAAI;IAqDd,MAAM,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAMtB,OAAO,IAAI,IAAI;CAUhC"}

package/dist/charts/treemap/index.js

@@ -0,0 +1,132 @@
+import { BaseChart as e } from "../base.js";
+import { ChartTooltip as t } from "../tooltip.js";
+import { defaultColors as n, formatNumber as r, hexToRgba as i, roundRect as a } from "../utils.js";
+//#region src/charts/treemap/index.ts
+var o = "11px system-ui, sans-serif", s = "#ffffff", c = 40, l = 20, u = 2, d = class extends e {
+	data;
+	showLabels;
+	cellGap;
+	cellRadius;
+	tooltipEnabled;
+	tooltipFormat;
+	tooltip;
+	rects;
+	colors;
+	handleMouseMove;
+	handleMouseLeave;
+	hoveredIndex;
+	constructor(e) {
+		super(e), this.data = e.data, this.showLabels = e.showLabels !== !1, this.cellGap = e.cellGap ?? u, this.cellRadius = e.cellRadius ?? 0, this.tooltipEnabled = e.tooltip?.enabled !== !1, this.tooltipFormat = e.tooltip?.format ?? null, this.tooltip = null, this.rects = [], this.colors = n(), this.handleMouseMove = null, this.handleMouseLeave = null, this.hoveredIndex = -1, this.tooltipEnabled && this.setupTooltip(), this.render();
+	}
+	computeLayout() {
+		this.rects = [];
+		let e = this.plotArea, t = this.data.children;
+		if (t === void 0 || t.length === 0) {
+			this.rects.push({
+				x: e.x,
+				y: e.y,
+				width: e.width,
+				height: e.height,
+				node: this.data,
+				color: this.data.color ?? this.colors[0] ?? "#3b82f6"
+			});
+			return;
+		}
+		this.squarify(t, e.x, e.y, e.width, e.height, 0);
+	}
+	squarify(e, t, n, r, i, a) {
+		if (e.length === 0 || r <= 0 || i <= 0) return;
+		let o = e.reduce((e, t) => e + Math.max(0, t.value), 0);
+		if (o <= 0) return;
+		let s = [...e].sort((e, t) => t.value - e.value);
+		this.layoutRow(s, t, n, r, i, o, a);
+	}
+	layoutRow(e, t, n, r, i, a, o) {
+		if (e.length === 0 || a <= 0) return;
+		let s = r >= i, c = [], l = 0, u = Infinity, d = 0;
+		for (let t = 0; t < e.length; t++) {
+			let n = e[t];
+			if (n === void 0) continue;
+			let o = [...c, n], f = l + Math.max(0, n.value), p = this.worstAspectRatio(o, f, a, s ? i : r, s ? r : i);
+			if (p <= u || c.length === 0) c = o, l = f, u = p, d = t + 1;
+			else break;
+		}
+		let f = l / a, p = s ? r * f : i * f, m = 0;
+		for (let e = 0; e < c.length; e++) {
+			let a = c[e];
+			if (a === void 0) continue;
+			let u = l > 0 ? Math.max(0, a.value) / l : 0, d = (s ? i : r) * u, f = this.cellGap, h = s ? t + f / 2 : t + m + f / 2, g = s ? n + m + f / 2 : n + f / 2, _ = s ? p - f : d - f, v = s ? d - f : p - f;
+			if (_ > 0 && v > 0) {
+				let t = a.color ?? this.colors[(o + e) % this.colors.length] ?? "#3b82f6";
+				a.children !== void 0 && a.children.length > 0 ? this.squarify(a.children, h, g, _, v, o + e) : this.rects.push({
+					x: h,
+					y: g,
+					width: _,
+					height: v,
+					node: a,
+					color: t
+				});
+			}
+			m += d;
+		}
+		let h = e.slice(d);
+		if (h.length > 0) {
+			let e = a - l;
+			s ? this.layoutRow(h, t + p, n, r - p, i, e, o + d) : this.layoutRow(h, t, n + p, r, i - p, e, o + d);
+		}
+	}
+	worstAspectRatio(e, t, n, r, i) {
+		if (e.length === 0 || n <= 0 || r <= 0 || i <= 0) return Infinity;
+		let a = t / n * r * i / r, o = 0;
+		for (let t of e) {
+			let e = Math.max(0, t.value) / n * r * i;
+			if (a <= 0 || e <= 0) continue;
+			let s = e / a, c = Math.max(a / s, s / a);
+			c > o && (o = c);
+		}
+		return o;
+	}
+	setupTooltip() {
+		this.tooltip = new t(this.container), this.handleMouseMove = (e) => {
+			let t = this.canvas.getBoundingClientRect(), n = e.clientX - t.left, i = e.clientY - t.top, a = -1;
+			for (let e = 0; e < this.rects.length; e++) {
+				let t = this.rects[e];
+				if (t !== void 0 && n >= t.x && n <= t.x + t.width && i >= t.y && i <= t.y + t.height) {
+					a = e;
+					break;
+				}
+			}
+			if (a !== this.hoveredIndex && (this.hoveredIndex = a, this.render()), a >= 0) {
+				let e = this.rects[a];
+				if (e !== void 0) {
+					let t;
+					t = this.tooltipFormat === null ? `<strong>${e.node.label}</strong><br/>Value: ${r(e.node.value)}` : this.tooltipFormat(e.node.value, e.node.label, ""), this.tooltip?.show(n, i, t);
+				}
+			} else this.tooltip?.hide();
+		}, this.handleMouseLeave = () => {
+			this.hoveredIndex !== -1 && (this.hoveredIndex = -1, this.render()), this.tooltip?.hide();
+		}, this.canvas.addEventListener("mousemove", this.handleMouseMove), this.canvas.addEventListener("mouseleave", this.handleMouseLeave);
+	}
+	render() {
+		this.clear(), this.computeLayout();
+		let { ctx: e } = this;
+		e.save();
+		for (let t = 0; t < this.rects.length; t++) {
+			let n = this.rects[t];
+			if (n === void 0) continue;
+			let u = t === this.hoveredIndex;
+			e.fillStyle = u ? i(n.color, .8) : n.color, this.cellRadius > 0 ? (a(e, n.x, n.y, n.width, n.height, this.cellRadius), e.fill()) : e.fillRect(n.x, n.y, n.width, n.height), u && (e.strokeStyle = "#ffffff", e.lineWidth = 2, this.cellRadius > 0 ? (a(e, n.x, n.y, n.width, n.height, this.cellRadius), e.stroke()) : e.strokeRect(n.x, n.y, n.width, n.height)), this.showLabels && n.width >= c && n.height >= l && (e.fillStyle = s, e.font = o, e.textAlign = "left", e.textBaseline = "top", e.fillText(n.node.label, n.x + 4, n.y + 4, n.width - 8), n.height >= l * 2 && (e.fillStyle = "rgba(255,255,255,0.8)", e.fillText(r(n.node.value), n.x + 4, n.y + 18, n.width - 8)));
+		}
+		e.restore();
+	}
+	update(e) {
+		this.data = e, this.hoveredIndex = -1, this.render();
+	}
+	destroy() {
+		this.handleMouseMove !== null && this.canvas.removeEventListener("mousemove", this.handleMouseMove), this.handleMouseLeave !== null && this.canvas.removeEventListener("mouseleave", this.handleMouseLeave), this.tooltip?.destroy(), super.destroy();
+	}
+};
+//#endregion
+export { d as TreemapChart };
+
+//# sourceMappingURL=index.js.map

package/dist/charts/treemap/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/charts/treemap/index.ts"],"sourcesContent":["/**\n * Treemap chart - squarified treemap layout with recursive subdivision\n * @countermeasure/web-components/charts/treemap\n */\n\nimport { BaseChart } from '../base'\nimport type { TreemapChartConfig, TreemapNode } from './types'\nimport { defaultColors, formatNumber, hexToRgba, roundRect } from '../utils'\nimport { ChartTooltip } from '../tooltip'\n\nconst LABEL_FONT = '11px system-ui, sans-serif'\nconst LABEL_COLOR = '#ffffff'\nconst MIN_LABEL_WIDTH = 40\nconst MIN_LABEL_HEIGHT = 20\nconst DEFAULT_CELL_GAP = 2\n\ninterface LayoutRect {\n  x: number\n  y: number\n  width: number\n  height: number\n  node: TreemapNode\n  color: string\n}\n\nexport class TreemapChart extends BaseChart {\n  private data: TreemapNode\n  private showLabels: boolean\n  private cellGap: number\n  private cellRadius: number\n  private tooltipEnabled: boolean\n  private tooltipFormat: ((value: number, label: string, series: string) => string) | null\n  private tooltip: ChartTooltip | null\n  private rects: LayoutRect[]\n  private colors: string[]\n  private handleMouseMove: ((e: MouseEvent) => void) | null\n  private handleMouseLeave: (() => void) | null\n  private hoveredIndex: number\n\n  constructor(config: TreemapChartConfig) {\n    super(config)\n\n    this.data = config.data\n    this.showLabels = config.showLabels !== false\n    this.cellGap = config.cellGap ?? DEFAULT_CELL_GAP\n    this.cellRadius = config.cellRadius ?? 0\n    this.tooltipEnabled = config.tooltip?.enabled !== false\n    this.tooltipFormat = config.tooltip?.format ?? null\n    this.tooltip = null\n    this.rects = []\n    this.colors = defaultColors()\n    this.handleMouseMove = null\n    this.handleMouseLeave = null\n    this.hoveredIndex = -1\n\n    if (this.tooltipEnabled) {\n      this.setupTooltip()\n    }\n\n    this.render()\n  }\n\n  private computeLayout(): void {\n    this.rects = []\n    const plot = this.plotArea\n    const children = this.data.children\n    if (children === undefined || children.length === 0) {\n      // Single node fills the entire plot\n      this.rects.push({\n        x: plot.x,\n        y: plot.y,\n        width: plot.width,\n        height: plot.height,\n        node: this.data,\n        color: this.data.color ?? this.colors[0] ?? '#3b82f6',\n      })\n      return\n    }\n\n    this.squarify(children, plot.x, plot.y, plot.width, plot.height, 0)\n  }\n\n  private squarify(\n    nodes: TreemapNode[],\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    colorOffset: number\n  ): void {\n    if (nodes.length === 0 || width <= 0 || height <= 0) return\n\n    const totalValue = nodes.reduce((sum, n) => sum + Math.max(0, n.value), 0)\n    if (totalValue <= 0) return\n\n    // Sort nodes by value descending for better aspect ratios\n    const sorted = [...nodes].sort((a, b) => b.value - a.value)\n\n    this.layoutRow(sorted, x, y, width, height, totalValue, colorOffset)\n  }\n\n  private layoutRow(\n    nodes: TreemapNode[],\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    totalValue: number,\n    colorOffset: number\n  ): void {\n    if (nodes.length === 0 || totalValue <= 0) return\n\n    const isWide = width >= height\n\n    let currentRow: TreemapNode[] = []\n    let currentRowValue = 0\n    let bestAspectRatio = Infinity\n    let processedCount = 0\n\n    for (let i = 0; i < nodes.length; i++) {\n      const node = nodes[i]\n      if (node === undefined) continue\n\n      const testRow = [...currentRow, node]\n      const testValue = currentRowValue + Math.max(0, node.value)\n\n      const aspect = this.worstAspectRatio(\n        testRow,\n        testValue,\n        totalValue,\n        isWide ? height : width,\n        isWide ? width : height\n      )\n\n      if (aspect <= bestAspectRatio || currentRow.length === 0) {\n        currentRow = testRow\n        currentRowValue = testValue\n        bestAspectRatio = aspect\n        processedCount = i + 1\n      } else {\n        // Current row is optimal, lay it out and recurse on remaining\n        break\n      }\n    }\n\n    // Lay out the current row\n    const rowFraction = currentRowValue / totalValue\n    const rowSize = isWide ? width * rowFraction : height * rowFraction\n\n    let offset = 0\n    for (let i = 0; i < currentRow.length; i++) {\n      const node = currentRow[i]\n      if (node === undefined) continue\n\n      const nodeFraction = currentRowValue > 0 ? Math.max(0, node.value) / currentRowValue : 0\n      const nodeSize = (isWide ? height : width) * nodeFraction\n      const gap = this.cellGap\n\n      const rectX = isWide ? x + gap / 2 : x + offset + gap / 2\n      const rectY = isWide ? y + offset + gap / 2 : y + gap / 2\n      const rectW = isWide ? rowSize - gap : nodeSize - gap\n      const rectH = isWide ? nodeSize - gap : rowSize - gap\n\n      if (rectW > 0 && rectH > 0) {\n        const color = node.color ?? this.colors[(colorOffset + i) % this.colors.length] ?? '#3b82f6'\n\n        // If the node has children, recursively subdivide\n        if (node.children !== undefined && node.children.length > 0) {\n          this.squarify(node.children, rectX, rectY, rectW, rectH, colorOffset + i)\n        } else {\n          this.rects.push({\n            x: rectX,\n            y: rectY,\n            width: rectW,\n            height: rectH,\n            node,\n            color,\n          })\n        }\n      }\n\n      offset += nodeSize\n    }\n\n    // Recurse on remaining nodes\n    const remaining = nodes.slice(processedCount)\n    if (remaining.length > 0) {\n      const remainingValue = totalValue - currentRowValue\n      if (isWide) {\n        this.layoutRow(\n          remaining,\n          x + rowSize,\n          y,\n          width - rowSize,\n          height,\n          remainingValue,\n          colorOffset + processedCount\n        )\n      } else {\n        this.layoutRow(\n          remaining,\n          x,\n          y + rowSize,\n          width,\n          height - rowSize,\n          remainingValue,\n          colorOffset + processedCount\n        )\n      }\n    }\n  }\n\n  private worstAspectRatio(\n    row: TreemapNode[],\n    rowValue: number,\n    totalValue: number,\n    shortSide: number,\n    longSide: number\n  ): number {\n    if (row.length === 0 || totalValue <= 0 || shortSide <= 0 || longSide <= 0) return Infinity\n\n    const rowArea = (rowValue / totalValue) * shortSide * longSide\n    const rowLength = rowArea / shortSide\n\n    let worst = 0\n    for (const node of row) {\n      const nodeArea = (Math.max(0, node.value) / totalValue) * shortSide * longSide\n      if (rowLength <= 0 || nodeArea <= 0) continue\n      const nodeWidth = nodeArea / rowLength\n      const aspect = Math.max(rowLength / nodeWidth, nodeWidth / rowLength)\n      if (aspect > worst) worst = aspect\n    }\n\n    return worst\n  }\n\n  private setupTooltip(): void {\n    this.tooltip = new ChartTooltip(this.container)\n\n    this.handleMouseMove = (e: MouseEvent): void => {\n      const rect = this.canvas.getBoundingClientRect()\n      const mx = e.clientX - rect.left\n      const my = e.clientY - rect.top\n\n      let foundIndex = -1\n      for (let i = 0; i < this.rects.length; i++) {\n        const r = this.rects[i]\n        if (r === undefined) continue\n        if (mx >= r.x && mx <= r.x + r.width && my >= r.y && my <= r.y + r.height) {\n          foundIndex = i\n          break\n        }\n      }\n\n      if (foundIndex !== this.hoveredIndex) {\n        this.hoveredIndex = foundIndex\n        this.render()\n      }\n\n      if (foundIndex >= 0) {\n        const r = this.rects[foundIndex]\n        if (r !== undefined) {\n          let content: string\n          if (this.tooltipFormat !== null) {\n            content = this.tooltipFormat(r.node.value, r.node.label, '')\n          } else {\n            content = `<strong>${r.node.label}</strong><br/>Value: ${formatNumber(r.node.value)}`\n          }\n          this.tooltip?.show(mx, my, content)\n        }\n      } else {\n        this.tooltip?.hide()\n      }\n    }\n\n    this.handleMouseLeave = (): void => {\n      if (this.hoveredIndex !== -1) {\n        this.hoveredIndex = -1\n        this.render()\n      }\n      this.tooltip?.hide()\n    }\n\n    this.canvas.addEventListener('mousemove', this.handleMouseMove)\n    this.canvas.addEventListener('mouseleave', this.handleMouseLeave)\n  }\n\n  public render(): void {\n    this.clear()\n    this.computeLayout()\n\n    const { ctx } = this\n\n    ctx.save()\n    for (let i = 0; i < this.rects.length; i++) {\n      const r = this.rects[i]\n      if (r === undefined) continue\n\n      const isHovered = i === this.hoveredIndex\n\n      // Draw cell background\n      ctx.fillStyle = isHovered ? hexToRgba(r.color, 0.8) : r.color\n\n      if (this.cellRadius > 0) {\n        roundRect(ctx, r.x, r.y, r.width, r.height, this.cellRadius)\n        ctx.fill()\n      } else {\n        ctx.fillRect(r.x, r.y, r.width, r.height)\n      }\n\n      // Hover border\n      if (isHovered) {\n        ctx.strokeStyle = '#ffffff'\n        ctx.lineWidth = 2\n        if (this.cellRadius > 0) {\n          roundRect(ctx, r.x, r.y, r.width, r.height, this.cellRadius)\n          ctx.stroke()\n        } else {\n          ctx.strokeRect(r.x, r.y, r.width, r.height)\n        }\n      }\n\n      // Draw label if cell is large enough\n      if (this.showLabels && r.width >= MIN_LABEL_WIDTH && r.height >= MIN_LABEL_HEIGHT) {\n        ctx.fillStyle = LABEL_COLOR\n        ctx.font = LABEL_FONT\n        ctx.textAlign = 'left'\n        ctx.textBaseline = 'top'\n        ctx.fillText(r.node.label, r.x + 4, r.y + 4, r.width - 8)\n\n        // Show value below label if space allows\n        if (r.height >= MIN_LABEL_HEIGHT * 2) {\n          ctx.fillStyle = 'rgba(255,255,255,0.8)'\n          ctx.fillText(formatNumber(r.node.value), r.x + 4, r.y + 18, r.width - 8)\n        }\n      }\n    }\n    ctx.restore()\n  }\n\n  public update(data: TreemapNode): void {\n    this.data = data\n    this.hoveredIndex = -1\n    this.render()\n  }\n\n  public override destroy(): void {\n    if (this.handleMouseMove !== null) {\n      this.canvas.removeEventListener('mousemove', this.handleMouseMove)\n    }\n    if (this.handleMouseLeave !== null) {\n      this.canvas.removeEventListener('mouseleave', this.handleMouseLeave)\n    }\n    this.tooltip?.destroy()\n    super.destroy()\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+import { BaseChartConfig, TooltipConfig } from '../types';
+export interface TreemapNode {
+    label: string;
+    value: number;
+    color?: string;
+    children?: TreemapNode[];
+}
+export interface TreemapChartConfig extends BaseChartConfig {
+    data: TreemapNode;
+    tooltip?: TooltipConfig;
+    showLabels?: boolean;
+    cellGap?: number;
+    cellRadius?: number;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/charts/treemap/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE9D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;CACzB;AAED,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,IAAI,EAAE,WAAW,CAAA;IACjB,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB"}

package/dist/charts/types.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Shared chart type definitions
+ * @countermeasure/web-components/charts/types
+ */
+export interface ChartPadding {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface PlotArea {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface DataPoint {
+    x: number | string;
+    y: number;
+    label?: string;
+}
+export interface ChartSeries {
+    name: string;
+    data: DataPoint[];
+    color?: string;
+}
+export interface AxisConfig {
+    label?: string;
+    min?: number;
+    max?: number;
+    tickCount?: number;
+    format?: (value: number) => string;
+    gridLines?: boolean;
+}
+export interface LegendItem {
+    label: string;
+    color: string;
+    active?: boolean;
+}
+export interface LegendConfig {
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    visible?: boolean;
+}
+export interface TooltipConfig {
+    enabled?: boolean;
+    format?: (value: number, label: string, series: string) => string;
+}
+export interface BaseChartConfig {
+    container: HTMLElement | string;
+    width?: number;
+    height?: number;
+    padding?: Partial<ChartPadding>;
+    responsive?: boolean;
+    animate?: boolean;
+    className?: string;
+}
+export interface InteractiveChartConfig extends BaseChartConfig {
+    tooltip?: TooltipConfig;
+    legend?: LegendConfig;
+}
+export interface SeriesChartConfig extends InteractiveChartConfig {
+    series: ChartSeries[];
+    xAxis?: AxisConfig;
+    yAxis?: AxisConfig;
+}
+export interface ResolvedSeries {
+    name: string;
+    data: DataPoint[];
+    color: string;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/charts/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,SAAS;IACxB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAClB,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,SAAS,EAAE,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;CAClE;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,sBAAuB,SAAQ,eAAe;IAC7D,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,MAAM,CAAC,EAAE,YAAY,CAAA;CACtB;AAED,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB;IAC/D,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,SAAS,EAAE,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd"}

package/dist/charts/utils.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Chart utility functions
+ * @countermeasure/web-components/charts/utils
+ */
+/** Create a linear scale mapping from domain to range */
+export declare function scaleLinear(domain: [number, number], range: [number, number]): (value: number) => number;
+/** Band scale result with callable signature */
+export interface ScaleBand {
+    (value: string): number;
+    bandwidth(): number;
+    domain(): string[];
+}
+/** Create a band (categorical) scale mapping discrete values to a continuous range */
+export declare function scaleBand(domain: string[], range: [number, number], padding?: number): ScaleBand;
+/** Return a palette of 12 distinct chart colors */
+export declare function defaultColors(): string[];
+/** Convert a hex color string to an rgba string */
+export declare function hexToRgba(hex: string, alpha: number): string;
+/** Clamp a value to a min/max range */
+export declare function clamp(value: number, min: number, max: number): number;
+/** Format a number with K/M/B suffixes for compact display */
+export declare function formatNumber(value: number): string;
+/** Compute nice axis bounds with evenly spaced ticks */
+export declare function niceScale(min: number, max: number, tickCount: number): {
+    min: number;
+    max: number;
+    step: number;
+};
+/** Linearly interpolate between two hex colors */
+export declare function lerpColor(color1: string, color2: string, t: number): string;
+/** Convert polar coordinates to cartesian */
+export declare function polarToCartesian(cx: number, cy: number, radius: number, angleDeg: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Draw a rounded rectangle path on a canvas context.
+ * Does not fill or stroke - caller should do that after calling this.
+ */
+export declare function roundRect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number): void;
+/** Resolve a color from a palette by index, with a default fallback */
+export declare function resolveColor(index: number, colors?: string[], fallback?: string): string;
+/** Draw a filled rounded bar on a canvas context */
+export declare function drawFilledBar(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, radius: number, color: string, hovered?: boolean): void;
+/** Test whether a point (mx, my) is inside a rectangle */
+export declare function hitTestRect(mx: number, my: number, rect: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): boolean;
+/** Find the closest point to (mx, my) within a threshold distance */
+export declare function findClosestPoint<T extends {
+    px: number;
+    py: number;
+}>(mx: number, my: number, points: T[], threshold: number): {
+    point: T;
+    dist: number;
+} | null;
+/** Point with pixel coordinates for smooth path drawing */
+export interface PathPoint {
+    px: number;
+    py: number;
+}
+/**
+ * Draw a smooth Catmull-Rom spline path through the given points.
+ * Assumes ctx.moveTo has already been called to the first point.
+ * Uses bezier curves for smooth interpolation.
+ *
+ * @param ctx Canvas 2D rendering context
+ * @param points Array of points with px/py pixel coordinates
+ * @param tension Controls curve tightness (default 0.5)
+ */
+export declare function drawSmoothPath(ctx: CanvasRenderingContext2D, points: PathPoint[], tension?: number): void;
+//# sourceMappingURL=utils.d.ts.map

package/dist/charts/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/charts/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,yDAAyD;AACzD,wBAAgB,WAAW,CACzB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EACxB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GACtB,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAU3B;AAED,gDAAgD;AAChD,MAAM,WAAW,SAAS;IACxB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,SAAS,IAAI,MAAM,CAAA;IACnB,MAAM,IAAI,MAAM,EAAE,CAAA;CACnB;AAED,sFAAsF;AACtF,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,SAAI,GAAG,SAAS,CAwB3F;AAED,mDAAmD;AACnD,wBAAgB,aAAa,IAAI,MAAM,EAAE,CAexC;AAED,mDAAmD;AACnD,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAM5D;AAED,uCAAuC;AACvC,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAErE;AAED,8DAA8D;AAC9D,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAYlD;AAED,wDAAwD;AACxD,wBAAgB,SAAS,CACvB,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,MAAM,GAChB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CA0B5C;AAYD,kDAAkD;AAClD,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAU3E;AAED,6CAA6C;AAC7C,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,GACf;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAM1B;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,GAAG,EAAE,wBAAwB,EAC7B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,GACR,IAAI,CAaN;AAED,uEAAuE;AACvE,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAMxF;AAED,oDAAoD;AACpD,wBAAgB,aAAa,CAC3B,GAAG,EAAE,wBAAwB,EAC7B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,EACb,OAAO,UAAQ,GACd,IAAI,CAmBN;AAED,0DAA0D;AAC1D,wBAAgB,WAAW,CACzB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,IAAI,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC5D,OAAO,CAET;AAED,qEAAqE;AACrE,wBAAgB,gBAAgB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,EACnE,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,MAAM,EAAE,CAAC,EAAE,EACX,SAAS,EAAE,MAAM,GAChB;IAAE,KAAK,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAgBnC;AAED,2DAA2D;AAC3D,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;CACX;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,wBAAwB,EAC7B,MAAM,EAAE,SAAS,EAAE,EACnB,OAAO,SAAM,GACZ,IAAI,CAkBN"}