@codeenvision/ui-webcomponents 1.0.0

package/dist/components/Chart/Chart.d.ts

@@ -0,0 +1,30 @@
+import { BaseComponent } from "../../core/BaseComponent.js";
+import { ChartOptions } from "./Chart.types.js";
+export declare class Chart extends BaseComponent {
+    private options;
+    private chartRoot?;
+    private tooltipEl?;
+    private summaryEl?;
+    private hydrated;
+    constructor(options: ChartOptions);
+    init(): void;
+    destroy(): void;
+    private hasRenderableData;
+    private createTooltip;
+    private renderBarChart;
+    private renderLineChart;
+    private renderPieChart;
+    private renderUnsupportedFallback;
+    private showTooltip;
+    private positionTooltip;
+    private hideTooltip;
+    private positionTooltipFromElement;
+    private formatTooltip;
+    private getMaxValue;
+    private createLegend;
+    private renderSummary;
+    private pickColor;
+    private getColorForIndex;
+    private tryHydrate;
+}
+//# sourceMappingURL=Chart.d.ts.map

package/dist/components/Chart/Chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../components/Chart/Chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAgB,YAAY,EAAkC,MAAM,kBAAkB,CAAC;AAW9F,qBAAa,KAAM,SAAQ,aAAa;IACtC,OAAO,CAAC,OAAO,CAAe;IAC9B,OAAO,CAAC,SAAS,CAAC,CAAiB;IACnC,OAAO,CAAC,SAAS,CAAC,CAAiB;IACnC,OAAO,CAAC,SAAS,CAAC,CAAiB;IACnC,OAAO,CAAC,QAAQ,CAAS;gBAEb,OAAO,EAAE,YAAY;IAKjC,IAAI,IAAI,IAAI;IAiEZ,OAAO,IAAI,IAAI;IAMf,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,cAAc;IAkFtB,OAAO,CAAC,eAAe;IAoGvB,OAAO,CAAC,cAAc;IAsGtB,OAAO,CAAC,yBAAyB;IAQjC,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,0BAA0B;IAgBlC,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,aAAa;IA8BrB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;CA+GnB"}

package/dist/components/Chart/Chart.js

@@ -0,0 +1,575 @@
+import { BaseComponent } from "../../core/BaseComponent.js";
+const FALLBACK_COLORS = ["#0ea5e9", "#a855f7", "#f97316", "#10b981", "#facc15"];
+const SVG_NS = "http://www.w3.org/2000/svg";
+export class Chart extends BaseComponent {
+    options;
+    chartRoot;
+    tooltipEl;
+    summaryEl;
+    hydrated = false;
+    constructor(options) {
+        super(options.selector);
+        this.options = options;
+    }
+    init() {
+        if (this.options.hydrate && this.tryHydrate()) {
+            this.hydrated = true;
+            return;
+        }
+        this.destroy();
+        const wrapper = document.createElement("div");
+        wrapper.className = `ce-chart ce-chart--${this.options.type}`;
+        wrapper.setAttribute("data-ce-component", "chart");
+        wrapper.setAttribute("part", "base");
+        if (this.options.theme === "dark") {
+            wrapper.classList.add("ce-chart--dark");
+        }
+        this.chartRoot = wrapper;
+        if (this.options.title) {
+            const header = document.createElement("div");
+            header.className = "ce-chart__header";
+            header.setAttribute("part", "header");
+            header.innerText = this.options.title;
+            wrapper.appendChild(header);
+        }
+        const container = document.createElement("div");
+        container.className = "ce-chart__container";
+        container.setAttribute("part", "container");
+        wrapper.appendChild(container);
+        if (!this.hasRenderableData()) {
+            container.innerText = "No data available";
+            this.el.appendChild(wrapper);
+            return;
+        }
+        this.tooltipEl = this.createTooltip(wrapper);
+        switch (this.options.type) {
+            case "bar":
+                this.renderBarChart(container, wrapper);
+                break;
+            case "line":
+                this.renderLineChart(container, wrapper);
+                break;
+            case "area":
+                this.renderLineChart(container, wrapper, true);
+                break;
+            case "pie":
+                this.renderPieChart(container, wrapper);
+                break;
+            case "doughnut":
+                this.renderPieChart(container, wrapper, true);
+                break;
+            default:
+                this.renderUnsupportedFallback(container);
+        }
+        if (this.options.showSummary) {
+            this.renderSummary(wrapper);
+        }
+        this.el.appendChild(wrapper);
+    }
+    destroy() {
+        this.tooltipEl = undefined;
+        this.chartRoot = undefined;
+        this.el.innerHTML = "";
+    }
+    hasRenderableData() {
+        return Boolean(this.options.data?.labels?.length && this.options.data?.datasets?.length);
+    }
+    createTooltip(wrapper) {
+        const tooltip = document.createElement("div");
+        tooltip.className = "ce-chart__tooltip";
+        tooltip.dataset.active = "false";
+        tooltip.setAttribute("part", "tooltip");
+        wrapper.appendChild(tooltip);
+        return tooltip;
+    }
+    renderBarChart(container, wrapper) {
+        const datasets = this.options.data.datasets;
+        if (!datasets.length) {
+            this.renderUnsupportedFallback(container);
+            return;
+        }
+        const barsWrapper = document.createElement("div");
+        barsWrapper.className = "ce-chart__bars";
+        barsWrapper.setAttribute("part", "bars");
+        container.appendChild(barsWrapper);
+        const stackedMax = this.getMaxValue(true);
+        const labels = this.options.data.labels;
+        labels.forEach((label, labelIndex) => {
+            const column = document.createElement("div");
+            column.className = "ce-chart__bar-column";
+            column.setAttribute("part", "bar-column");
+            const stack = document.createElement("div");
+            stack.className = "ce-chart__bar-stack";
+            stack.setAttribute("part", "bar-stack");
+            column.appendChild(stack);
+            datasets.forEach((dataset, datasetIndex) => {
+                const value = dataset.data[labelIndex] ?? 0;
+                if (!value) {
+                    return;
+                }
+                const bar = document.createElement("button");
+                bar.type = "button";
+                bar.className = "ce-chart__bar";
+                bar.setAttribute("part", "bar");
+                const heightPercent = (value / stackedMax) * 100;
+                bar.style.setProperty("--ce-chart-bar-height", `${heightPercent}%`);
+                if (heightPercent < 12) {
+                    bar.dataset.labelPlacement = "outside";
+                }
+                bar.style.setProperty("--ce-chart-bar-color", this.getColorForIndex(dataset, labelIndex));
+                const datasetLabel = dataset.label ?? `Series ${datasetIndex + 1}`;
+                bar.setAttribute("aria-label", `${datasetLabel} for ${label} is ${value}`);
+                const valueLabel = document.createElement("span");
+                valueLabel.className = "ce-chart__bar-value";
+                valueLabel.setAttribute("part", "bar-value");
+                valueLabel.innerText = value.toString();
+                bar.appendChild(valueLabel);
+                bar.addEventListener("mouseenter", (event) => this.showTooltip({ label, value, datasetLabel }, event));
+                bar.addEventListener("mousemove", (event) => this.positionTooltip(event));
+                bar.addEventListener("mouseleave", () => this.hideTooltip());
+                bar.addEventListener("blur", () => this.hideTooltip());
+                bar.addEventListener("focus", (event) => this.showTooltip({ label, value, datasetLabel }, event));
+                stack.appendChild(bar);
+            });
+            const labelEl = document.createElement("span");
+            labelEl.className = "ce-chart__bar-label";
+            labelEl.setAttribute("part", "bar-label");
+            labelEl.innerText = label;
+            column.appendChild(labelEl);
+            barsWrapper.appendChild(column);
+        });
+        if (datasets.length > 1) {
+            const legendItems = datasets.map((dataset, datasetIndex) => ({
+                label: dataset.label ?? `Series ${datasetIndex + 1}`,
+                value: dataset.data.reduce((sum, value) => sum + (value ?? 0), 0),
+                color: dataset.color ?? dataset.colors?.[0] ?? this.pickColor(datasetIndex),
+            }));
+            const legend = this.createLegend(legendItems);
+            if (legend && this.options.showLegend !== false) {
+                wrapper.appendChild(legend);
+            }
+        }
+    }
+    renderLineChart(container, wrapper, fillArea = false) {
+        const datasets = this.options.data.datasets;
+        if (!datasets.length) {
+            this.renderUnsupportedFallback(container);
+            return;
+        }
+        const lineWrapper = document.createElement("div");
+        lineWrapper.className = "ce-chart__line";
+        lineWrapper.setAttribute("part", "line");
+        lineWrapper.style.maxWidth = "720px";
+        lineWrapper.style.margin = "0 auto";
+        container.appendChild(lineWrapper);
+        const svg = document.createElementNS(SVG_NS, "svg");
+        svg.setAttribute("viewBox", "0 0 100 100");
+        svg.setAttribute("preserveAspectRatio", "none");
+        svg.classList.add("ce-chart__line-svg");
+        svg.setAttribute("part", "line-svg");
+        svg.style.height = "180px";
+        svg.style.width = "100%";
+        lineWrapper.appendChild(svg);
+        const pointsLayer = document.createElement("div");
+        pointsLayer.className = "ce-chart__line-points";
+        pointsLayer.setAttribute("part", "line-points");
+        lineWrapper.appendChild(pointsLayer);
+        const max = this.getMaxValue();
+        const labels = this.options.data.labels;
+        const pointCount = Math.max(labels.length - 1, 1);
+        const legendItems = [];
+        datasets.forEach((dataset, datasetIndex) => {
+            const datasetLabel = dataset.label ?? `Series ${datasetIndex + 1}`;
+            const strokeColor = dataset.color ?? dataset.colors?.[0] ?? this.pickColor(datasetIndex);
+            const points = labels.map((label, index) => {
+                const value = dataset.data[index] ?? 0;
+                const x = (index / pointCount) * 100;
+                const y = 100 - (value / max) * 80 - 5;
+                return { label, value, x, y };
+            });
+            const polylinePoints = points.map((point) => `${point.x},${point.y}`).join(" ");
+            const shouldFill = fillArea || dataset.fill;
+            if (shouldFill && points.length) {
+                const area = document.createElementNS(SVG_NS, "polygon");
+                const areaPoints = [`${points[0].x},100`, polylinePoints, `${points[points.length - 1].x},100`].join(" ");
+                area.setAttribute("points", areaPoints);
+                area.setAttribute("fill", strokeColor);
+                area.setAttribute("fill-opacity", "0.12");
+                area.setAttribute("stroke", "none");
+                svg.appendChild(area);
+            }
+            const polyline = document.createElementNS(SVG_NS, "polyline");
+            polyline.setAttribute("points", polylinePoints);
+            polyline.classList.add("ce-chart__line-path");
+            polyline.setAttribute("part", "line-path");
+            polyline.setAttribute("fill", "none");
+            polyline.setAttribute("stroke", strokeColor);
+            svg.appendChild(polyline);
+            points.forEach((point, index) => {
+                const pointButton = document.createElement("button");
+                pointButton.type = "button";
+                pointButton.className = "ce-chart__line-point";
+                pointButton.setAttribute("part", "line-point");
+                pointButton.style.setProperty("--ce-chart-point-left", `${point.x}%`);
+                pointButton.style.setProperty("--ce-chart-point-top", `${point.y}%`);
+                pointButton.style.setProperty("--ce-chart-point-color", strokeColor);
+                pointButton.setAttribute("aria-label", `${datasetLabel} for ${point.label} is ${point.value}`);
+                pointButton.addEventListener("mouseenter", (event) => this.showTooltip({ label: point.label, value: point.value, datasetLabel, datasetIndex, index }, event));
+                pointButton.addEventListener("mousemove", (event) => this.positionTooltip(event));
+                pointButton.addEventListener("mouseleave", () => this.hideTooltip());
+                pointButton.addEventListener("blur", () => this.hideTooltip());
+                pointButton.addEventListener("focus", (event) => this.showTooltip({ label: point.label, value: point.value, datasetLabel, datasetIndex, index }, event));
+                pointsLayer.appendChild(pointButton);
+            });
+            legendItems.push({
+                label: datasetLabel,
+                value: dataset.data.reduce((sum, value) => sum + (value ?? 0), 0),
+                color: strokeColor,
+            });
+        });
+        if (legendItems.length > 1) {
+            const legend = this.createLegend(legendItems);
+            if (legend && this.options.showLegend !== false) {
+                wrapper.appendChild(legend);
+            }
+        }
+    }
+    renderPieChart(container, wrapper, isDonut = false) {
+        const datasets = this.options.data.datasets;
+        if (!datasets.length) {
+            this.renderUnsupportedFallback(container);
+            return;
+        }
+        const pieWrapper = document.createElement("div");
+        pieWrapper.className = "ce-chart__pie";
+        pieWrapper.setAttribute("part", "pie");
+        pieWrapper.style.maxWidth = "320px";
+        pieWrapper.style.margin = "0 auto";
+        container.appendChild(pieWrapper);
+        const svg = document.createElementNS(SVG_NS, "svg");
+        svg.setAttribute("viewBox", "0 0 120 120");
+        svg.classList.add("ce-chart__pie-svg");
+        svg.setAttribute("part", "pie-svg");
+        svg.style.width = "200px";
+        svg.style.height = "200px";
+        pieWrapper.appendChild(svg);
+        const legendItems = [];
+        const baseRadius = 55;
+        const ringGap = 2;
+        const ringThickness = Math.max(10, Math.floor(26 / Math.max(datasets.length, 1)));
+        const polarToCartesian = (cx, cy, r, angle) => {
+            const rad = (angle - 90) * (Math.PI / 180);
+            return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+        };
+        const describeArc = (cx, cy, rOuter, rInner, start, end) => {
+            const startOuter = polarToCartesian(cx, cy, rOuter, end);
+            const endOuter = polarToCartesian(cx, cy, rOuter, start);
+            const startInner = polarToCartesian(cx, cy, rInner, start);
+            const endInner = polarToCartesian(cx, cy, rInner, end);
+            const largeArc = end - start <= 180 ? "0" : "1";
+            return [
+                `M ${startOuter.x} ${startOuter.y}`,
+                `A ${rOuter} ${rOuter} 0 ${largeArc} 0 ${endOuter.x} ${endOuter.y}`,
+                `L ${startInner.x} ${startInner.y}`,
+                `A ${rInner} ${rInner} 0 ${largeArc} 1 ${endInner.x} ${endInner.y}`,
+                "Z",
+            ].join(" ");
+        };
+        datasets.forEach((dataset, datasetIndex) => {
+            const total = dataset.data.reduce((sum, value) => sum + (value ?? 0), 0);
+            if (!total)
+                return;
+            const outerRadius = baseRadius - datasetIndex * (ringThickness + ringGap);
+            const innerRadius = isDonut ? outerRadius - ringThickness : 0;
+            let currentAngle = 0;
+            dataset.data.forEach((value, dataIndex) => {
+                if (!value)
+                    return;
+                const fraction = value / total;
+                const sliceAngle = fraction * 360;
+                const startAngle = currentAngle;
+                const endAngle = currentAngle + sliceAngle;
+                currentAngle += sliceAngle;
+                const path = document.createElementNS(SVG_NS, "path");
+                path.setAttribute("d", describeArc(60, 60, outerRadius, innerRadius, startAngle, endAngle));
+                const color = this.getColorForIndex(dataset, dataIndex);
+                path.setAttribute("fill", color);
+                path.classList.add("ce-chart__pie-slice");
+                path.setAttribute("part", "pie-slice");
+                path.setAttribute("tabindex", "0");
+                path.setAttribute("role", "presentation");
+                const label = this.options.data.labels[dataIndex] ?? `Item ${dataIndex + 1}`;
+                const datasetLabel = dataset.label ?? `Series ${datasetIndex + 1}`;
+                const composedLabel = datasets.length > 1 ? `${datasetLabel} • ${label}` : label;
+                const tooltipPayload = {
+                    label: composedLabel,
+                    value,
+                    datasetLabel,
+                    percent: Number((fraction * 100).toFixed(1)),
+                    total,
+                };
+                path.setAttribute("data-label", composedLabel);
+                path.setAttribute("data-value", String(value));
+                path.addEventListener("mouseenter", (event) => this.showTooltip(tooltipPayload, event));
+                path.addEventListener("mousemove", (event) => this.positionTooltip(event));
+                path.addEventListener("mouseleave", () => this.hideTooltip());
+                path.addEventListener("blur", () => this.hideTooltip());
+                path.addEventListener("focus", (event) => this.showTooltip(tooltipPayload, event));
+                svg.appendChild(path);
+                legendItems.push({ label: composedLabel, value, color });
+            });
+        });
+        const legend = this.createLegend(legendItems);
+        if (legend && this.options.showLegend !== false) {
+            pieWrapper.appendChild(legend);
+        }
+    }
+    renderUnsupportedFallback(container) {
+        const placeholder = document.createElement("div");
+        placeholder.className = "ce-chart__empty";
+        placeholder.setAttribute("part", "empty");
+        placeholder.innerText = `${this.options.type} charts are not yet supported in this build.`;
+        container.appendChild(placeholder);
+    }
+    showTooltip(context, event) {
+        if (!this.tooltipEl) {
+            return;
+        }
+        this.tooltipEl.innerHTML = this.formatTooltip(context);
+        this.tooltipEl.dataset.active = "true";
+        if (event instanceof MouseEvent) {
+            this.positionTooltip(event);
+        }
+        else if (event.target instanceof HTMLElement) {
+            this.positionTooltipFromElement(event.target);
+        }
+    }
+    positionTooltip(event) {
+        if (!this.tooltipEl || !this.chartRoot) {
+            return;
+        }
+        const chartRect = this.chartRoot.getBoundingClientRect();
+        const tooltipRect = this.tooltipEl.getBoundingClientRect();
+        const offset = 12;
+        let x = event.clientX - chartRect.left + offset;
+        let y = event.clientY - chartRect.top - offset;
+        x = Math.min(Math.max(x, tooltipRect.width / 2), chartRect.width - tooltipRect.width / 2);
+        y = Math.min(Math.max(y, tooltipRect.height / 2), chartRect.height - tooltipRect.height / 2);
+        this.tooltipEl.style.left = `${x}px`;
+        this.tooltipEl.style.top = `${y}px`;
+    }
+    hideTooltip() {
+        if (this.tooltipEl) {
+            this.tooltipEl.dataset.active = "false";
+        }
+    }
+    positionTooltipFromElement(element) {
+        if (!this.tooltipEl || !this.chartRoot) {
+            return;
+        }
+        const elementRect = element.getBoundingClientRect();
+        const chartRect = this.chartRoot.getBoundingClientRect();
+        const tooltipRect = this.tooltipEl.getBoundingClientRect();
+        const offset = 12;
+        let x = elementRect.left + elementRect.width / 2 - chartRect.left;
+        let y = elementRect.top - chartRect.top - offset;
+        x = Math.min(Math.max(x, tooltipRect.width / 2), chartRect.width - tooltipRect.width / 2);
+        y = Math.min(Math.max(y, tooltipRect.height / 2), chartRect.height - tooltipRect.height / 2);
+        this.tooltipEl.style.left = `${x}px`;
+        this.tooltipEl.style.top = `${y}px`;
+    }
+    formatTooltip(context) {
+        if (this.options.tooltipFormatter) {
+            return this.options.tooltipFormatter(context);
+        }
+        const opts = this.options.tooltip ?? {};
+        const defaultPercent = this.options.type === "pie" || this.options.type === "doughnut";
+        const showPercent = opts.showPercent ?? defaultPercent;
+        const parts = [];
+        if (opts.showLabel !== false && context.label) {
+            parts.push(`<strong>${context.label}</strong>`);
+        }
+        const valueText = this.options.valueFormatter ? this.options.valueFormatter(context.value) : context.value.toString();
+        const datasetText = opts.showDataset !== false && context.datasetLabel ? `${context.datasetLabel}: ` : "";
+        if (opts.showValue !== false) {
+            parts.push(`<span>${datasetText}${valueText}</span>`);
+        }
+        if (showPercent && typeof context.percent === "number") {
+            parts.push(`<span>Percent: ${context.percent.toFixed(1)}%</span>`);
+        }
+        return parts.join("");
+    }
+    getMaxValue(stacked = false) {
+        if (stacked) {
+            const totals = this.options.data.labels.map((_, labelIndex) => this.options.data.datasets.reduce((sum, dataset) => sum + (dataset.data[labelIndex] ?? 0), 0));
+            const max = totals.length ? Math.max(...totals) : 0;
+            return max || 1;
+        }
+        const values = this.options.data.datasets.flatMap((set) => set.data);
+        const max = values.length ? Math.max(...values) : 0;
+        return max || 1;
+    }
+    createLegend(items) {
+        if (!items.length) {
+            return undefined;
+        }
+        const legend = document.createElement("div");
+        legend.className = "ce-chart__legend";
+        legend.setAttribute("part", "legend");
+        items.forEach((item) => {
+            const entry = document.createElement("div");
+            entry.className = "legend-item";
+            entry.setAttribute("part", "legend-item");
+            const swatch = document.createElement("span");
+            swatch.className = "color-box";
+            swatch.style.backgroundColor = item.color;
+            swatch.setAttribute("part", "legend-swatch");
+            entry.appendChild(swatch);
+            const text = document.createElement("span");
+            text.innerText = `${item.label}: ${item.value}`;
+            text.setAttribute("part", "legend-text");
+            entry.appendChild(text);
+            legend.appendChild(entry);
+        });
+        return legend;
+    }
+    renderSummary(wrapper) {
+        const summary = document.createElement("div");
+        summary.className = "ce-chart__summary";
+        summary.setAttribute("part", "summary");
+        this.options.data.datasets.forEach((dataset, idx) => {
+            const total = dataset.data.reduce((sum, value) => sum + (value ?? 0), 0);
+            const max = dataset.data.reduce((acc, value) => Math.max(acc, value ?? 0), 0);
+            const min = dataset.data.reduce((acc, value) => Math.min(acc, value ?? 0), Number.POSITIVE_INFINITY);
+            const average = dataset.data.length ? total / dataset.data.length : 0;
+            const card = document.createElement("div");
+            card.className = "ce-chart__summary-card";
+            card.setAttribute("part", "summary-card");
+            const heading = document.createElement("div");
+            heading.className = "ce-chart__summary-title";
+            heading.setAttribute("part", "summary-title");
+            heading.textContent = dataset.label ?? `Series ${idx + 1}`;
+            const body = document.createElement("div");
+            body.className = "ce-chart__summary-body";
+            body.setAttribute("part", "summary-body");
+            const safeMin = Number.isFinite(min) ? min : 0;
+            body.innerHTML = this.options.summaryFormatter
+                ? this.options.summaryFormatter(dataset, { total, average, max, min: safeMin })
+                : `<span>Total: ${total}</span><span>Avg: ${average.toFixed(1)}</span><span>Max: ${max}</span>`;
+            card.append(heading, body);
+            summary.appendChild(card);
+        });
+        wrapper.appendChild(summary);
+        this.summaryEl = summary;
+    }
+    pickColor(index) {
+        return FALLBACK_COLORS[index % FALLBACK_COLORS.length];
+    }
+    getColorForIndex(dataset, index) {
+        return dataset.colors?.[index] ?? dataset.color ?? this.pickColor(index);
+    }
+    tryHydrate() {
+        const root = this.el.matches?.(".ce-chart") ? this.el : this.el.querySelector(".ce-chart");
+        if (!root) {
+            return false;
+        }
+        root.classList.add("ce-chart", `ce-chart--${this.options.type}`);
+        root.classList.toggle("ce-chart--dark", this.options.theme === "dark");
+        root.setAttribute("data-ce-component", "chart");
+        root.setAttribute("part", "base");
+        root.querySelectorAll(".ce-chart__header").forEach((node) => node.setAttribute("part", "header"));
+        root.querySelectorAll(".ce-chart__container").forEach((node) => node.setAttribute("part", "container"));
+        root.querySelectorAll(".ce-chart__tooltip").forEach((node) => node.setAttribute("part", "tooltip"));
+        root.querySelectorAll(".ce-chart__bars").forEach((node) => node.setAttribute("part", "bars"));
+        root.querySelectorAll(".ce-chart__bar-column").forEach((node) => node.setAttribute("part", "bar-column"));
+        root.querySelectorAll(".ce-chart__bar-stack").forEach((node) => node.setAttribute("part", "bar-stack"));
+        root.querySelectorAll(".ce-chart__bar").forEach((node) => node.setAttribute("part", "bar"));
+        root.querySelectorAll(".ce-chart__bar-value").forEach((node) => node.setAttribute("part", "bar-value"));
+        root.querySelectorAll(".ce-chart__bar-label").forEach((node) => node.setAttribute("part", "bar-label"));
+        root.querySelectorAll(".ce-chart__line").forEach((node) => node.setAttribute("part", "line"));
+        root.querySelectorAll(".ce-chart__line-svg").forEach((node) => node.setAttribute("part", "line-svg"));
+        root.querySelectorAll(".ce-chart__line-path").forEach((node) => node.setAttribute("part", "line-path"));
+        root.querySelectorAll(".ce-chart__line-points").forEach((node) => node.setAttribute("part", "line-points"));
+        root.querySelectorAll(".ce-chart__line-point").forEach((node) => node.setAttribute("part", "line-point"));
+        root.querySelectorAll(".ce-chart__pie").forEach((node) => node.setAttribute("part", "pie"));
+        root.querySelectorAll(".ce-chart__pie-svg").forEach((node) => node.setAttribute("part", "pie-svg"));
+        root.querySelectorAll(".ce-chart__pie-slice").forEach((node) => node.setAttribute("part", "pie-slice"));
+        root.querySelectorAll(".ce-chart__empty").forEach((node) => node.setAttribute("part", "empty"));
+        root.querySelectorAll(".ce-chart__legend").forEach((node) => node.setAttribute("part", "legend"));
+        root.querySelectorAll(".legend-item").forEach((node) => node.setAttribute("part", "legend-item"));
+        root.querySelectorAll(".color-box").forEach((node) => node.setAttribute("part", "legend-swatch"));
+        root.querySelectorAll(".ce-chart__summary").forEach((node) => node.setAttribute("part", "summary"));
+        root.querySelectorAll(".ce-chart__summary-card").forEach((node) => node.setAttribute("part", "summary-card"));
+        root.querySelectorAll(".ce-chart__summary-title").forEach((node) => node.setAttribute("part", "summary-title"));
+        root.querySelectorAll(".ce-chart__summary-body").forEach((node) => node.setAttribute("part", "summary-body"));
+        root
+            .querySelectorAll(".legend-item span")
+            .forEach((node, index) => node.setAttribute("part", index === 0 ? "legend-swatch" : "legend-text"));
+        this.chartRoot = root;
+        const container = root.querySelector(".ce-chart__container");
+        if (!container) {
+            return false;
+        }
+        const tooltip = root.querySelector(".ce-chart__tooltip") ?? this.createTooltip(root);
+        this.tooltipEl = tooltip;
+        const parseAriaLabel = (label) => {
+            const match = label.match(/^(.*) for (.*) is (.*)$/);
+            if (!match) {
+                return null;
+            }
+            const value = Number(match[3]);
+            if (!Number.isFinite(value)) {
+                return null;
+            }
+            return { datasetLabel: match[1], label: match[2], value };
+        };
+        const bars = root.querySelectorAll(".ce-chart__bar");
+        bars.forEach((bar) => {
+            const aria = bar.getAttribute("aria-label");
+            const parsed = aria ? parseAriaLabel(aria) : null;
+            if (!parsed) {
+                return;
+            }
+            const payload = { label: parsed.label, value: parsed.value, datasetLabel: parsed.datasetLabel };
+            bar.addEventListener("mouseenter", (event) => this.showTooltip(payload, event));
+            bar.addEventListener("mousemove", (event) => this.positionTooltip(event));
+            bar.addEventListener("mouseleave", () => this.hideTooltip());
+            bar.addEventListener("blur", () => this.hideTooltip());
+            bar.addEventListener("focus", (event) => this.showTooltip(payload, event));
+        });
+        const points = root.querySelectorAll(".ce-chart__line-point");
+        points.forEach((point) => {
+            const aria = point.getAttribute("aria-label");
+            const parsed = aria ? parseAriaLabel(aria) : null;
+            if (!parsed) {
+                return;
+            }
+            const payload = { label: parsed.label, value: parsed.value, datasetLabel: parsed.datasetLabel };
+            point.addEventListener("mouseenter", (event) => this.showTooltip(payload, event));
+            point.addEventListener("mousemove", (event) => this.positionTooltip(event));
+            point.addEventListener("mouseleave", () => this.hideTooltip());
+            point.addEventListener("blur", () => this.hideTooltip());
+            point.addEventListener("focus", (event) => this.showTooltip(payload, event));
+        });
+        const slices = root.querySelectorAll(".ce-chart__pie-slice");
+        slices.forEach((slice) => {
+            const label = slice.getAttribute("data-label");
+            const value = slice.getAttribute("data-value");
+            if (!label || value === null) {
+                return;
+            }
+            const valueNum = Number(value);
+            if (!Number.isFinite(valueNum)) {
+                return;
+            }
+            const payload = { label, value: valueNum };
+            slice.addEventListener("mouseenter", (event) => this.showTooltip(payload, event));
+            slice.addEventListener("mousemove", (event) => this.positionTooltip(event));
+            slice.addEventListener("mouseleave", () => this.hideTooltip());
+            slice.addEventListener("blur", () => this.hideTooltip());
+            slice.addEventListener("focus", (event) => this.showTooltip(payload, event));
+        });
+        return true;
+    }
+}
+//# sourceMappingURL=Chart.js.map