@affinda/wc 0.6.1 → 0.7.0

package/dist/collection/components/af-area-chart/af-area-chart.js

@@ -0,0 +1,631 @@
+import { h, Host } from "@stencil/core";
+import { defaultMargins, linearScale, bandScale, computeDomain, generateTickMarks, formatAxisValue, linePath, areaPath, stackedAreaPaths, gridLinePaths, generateChartDescription, generateDataTable, getChartAriaAttrs, srOnlyStyles, } from "../../utils/charts";
+/**
+ * A native SVG area chart component with theme integration.
+ *
+ * Supports stacked areas for multi-series data, linear/smooth curves,
+ * and progressive interactivity.
+ *
+ * @slot - Optional custom content (placed after chart)
+ *
+ * @example Simple area chart
+ * ```html
+ * <af-area-chart
+ *   data='[{"label":"Jan","value":120},{"label":"Feb","value":180}]'
+ *   theme="soft-clay"
+ * ></af-area-chart>
+ * ```
+ *
+ * @example Stacked area chart
+ * ```html
+ * <af-area-chart
+ *   data='{"labels":["Q1","Q2","Q3"],"series":[{"name":"Sales","values":[100,150,200]},{"name":"Costs","values":[80,90,100]}]}'
+ *   stacked
+ *   show-legend
+ * ></af-area-chart>
+ * ```
+ */
+export class AfAreaChart {
+    constructor() {
+        /**
+         * Chart data as JSON string.
+         */
+        this.data = '[]';
+        /**
+         * Theme for colors.
+         */
+        this.theme = 'white';
+        /**
+         * Stack multiple series on top of each other.
+         */
+        this.stacked = false;
+        /**
+         * Curve interpolation.
+         */
+        this.curve = 'smooth';
+        /**
+         * Area fill opacity (0-1).
+         */
+        this.opacity = 0.6;
+        /**
+         * Show outline stroke on areas.
+         */
+        this.showStroke = true;
+        /**
+         * Interactivity level.
+         */
+        this.interactive = 'none';
+        /**
+         * Enable CSS entry animations.
+         */
+        this.animated = false;
+        /**
+         * Show legend below chart.
+         */
+        this.showLegend = false;
+        /**
+         * Show grid lines.
+         */
+        this.showGrid = true;
+        /**
+         * Show axis labels.
+         */
+        this.showAxis = true;
+        /**
+         * Stroke width for area outlines.
+         */
+        this.strokeWidth = 2;
+        /**
+         * Chart width (SVG viewBox).
+         */
+        this.width = 400;
+        /**
+         * Aspect ratio as width/height.
+         */
+        this.aspectRatio = 16 / 9;
+        this.parsedData = null;
+        this.hoveredSeries = null;
+        this.tooltipData = null;
+        this.handleSeriesEnter = (seriesIndex) => {
+            if (this.interactive === 'none')
+                return;
+            this.hoveredSeries = seriesIndex;
+        };
+        this.handleSeriesLeave = () => {
+            this.hoveredSeries = null;
+        };
+    }
+    parseData() {
+        try {
+            const parsed = JSON.parse(this.data);
+            if (Array.isArray(parsed)) {
+                this.parsedData = parsed;
+            }
+            else if (parsed.series && parsed.labels) {
+                this.parsedData = parsed;
+            }
+            else {
+                this.parsedData = null;
+            }
+        }
+        catch {
+            this.parsedData = null;
+        }
+    }
+    componentWillLoad() {
+        this.parseData();
+    }
+    get height() {
+        return this.width / this.aspectRatio;
+    }
+    get margins() {
+        return {
+            ...defaultMargins,
+            left: this.showAxis ? 40 : 8,
+            bottom: this.showAxis ? 40 : 10,
+        };
+    }
+    get chartBounds() {
+        const { width, height, margins } = this;
+        return {
+            x: margins.left,
+            y: margins.top,
+            width: width - margins.left - margins.right,
+            height: height - margins.top - margins.bottom,
+        };
+    }
+    isMultiSeries(data) {
+        return !Array.isArray(data) && 'series' in data;
+    }
+    renderSingleSeries(data) {
+        const { chartBounds, curve, showStroke, showGrid, showAxis, animated, strokeWidth, opacity } = this;
+        const labels = data.map((d) => d.label);
+        const values = data.map((d) => d.value);
+        const domain = computeDomain(values, 0.1, true);
+        const xScale = bandScale(labels, [chartBounds.x, chartBounds.x + chartBounds.width]);
+        const yScale = linearScale(domain, [chartBounds.y + chartBounds.height, chartBounds.y]);
+        const ticks = generateTickMarks(domain, [chartBounds.y + chartBounds.height, chartBounds.y], 5, formatAxisValue);
+        const points = data.map((d) => ({
+            x: xScale.scale(d.label) + xScale.bandwidth / 2,
+            y: yScale(d.value),
+        }));
+        const baseline = chartBounds.y + chartBounds.height;
+        const areaD = areaPath(points, baseline, curve);
+        const lineD = linePath(points, curve);
+        return (h("g", { class: "area-chart__content" }, showGrid && (h("g", { class: "area-chart__grid" }, gridLinePaths(ticks.map((t) => t.position), 'horizontal', chartBounds).map((d, i) => (h("path", { key: i, d: d, class: "area-chart__grid-line" }))))), h("path", { d: areaD, class: {
+                'area-chart__area': true,
+                'area-chart__area--animated': animated,
+            }, style: { opacity: String(opacity) } }), showStroke && (h("path", { d: lineD, class: {
+                'area-chart__stroke': true,
+                'area-chart__stroke--animated': animated,
+            }, style: { strokeWidth: `${strokeWidth}px` } })), showAxis && this.renderAxes(xScale, ticks, labels)));
+    }
+    renderMultiSeries(data) {
+        const { chartBounds, curve, stacked, showStroke, showGrid, showAxis, animated, strokeWidth, opacity, interactive } = this;
+        const labels = data.labels;
+        const seriesCount = data.series.length;
+        const xScale = bandScale(labels, [chartBounds.x, chartBounds.x + chartBounds.width]);
+        const baseline = chartBounds.y + chartBounds.height;
+        // Compute domain based on stacking mode
+        let domain;
+        if (stacked) {
+            const stackedTotals = labels.map((_, i) => data.series.reduce((sum, s) => sum + Math.max(0, s.values[i] ?? 0), 0));
+            domain = computeDomain(stackedTotals, 0.1, true);
+        }
+        else {
+            const allValues = data.series.flatMap((s) => s.values);
+            domain = computeDomain(allValues, 0.1, true);
+        }
+        const yScale = linearScale(domain, [chartBounds.y + chartBounds.height, chartBounds.y]);
+        const ticks = generateTickMarks(domain, [chartBounds.y + chartBounds.height, chartBounds.y], 5, formatAxisValue);
+        // Generate points for each series
+        const seriesPoints = data.series.map((series) => labels.map((label, i) => ({
+            x: xScale.scale(label) + xScale.bandwidth / 2,
+            y: yScale(series.values[i] ?? 0),
+        })));
+        // Generate stacked or overlapping areas
+        let areaPaths;
+        if (stacked) {
+            // For stacked, accumulate Y values
+            const stackedSeriesPoints = [];
+            let cumulative = labels.map(() => 0);
+            for (let sIdx = 0; sIdx < seriesCount; sIdx++) {
+                const series = data.series[sIdx];
+                const points = labels.map((label, i) => {
+                    cumulative[i] += Math.max(0, series.values[i] ?? 0);
+                    return {
+                        x: xScale.scale(label) + xScale.bandwidth / 2,
+                        y: yScale(cumulative[i]),
+                    };
+                });
+                stackedSeriesPoints.push(points);
+            }
+            areaPaths = stackedAreaPaths(stackedSeriesPoints, baseline, curve);
+        }
+        else {
+            // Non-stacked: each series gets its own area from baseline
+            areaPaths = seriesPoints.map((points) => areaPath(points, baseline, curve));
+        }
+        return (h("g", { class: "area-chart__content" }, showGrid && (h("g", { class: "area-chart__grid" }, gridLinePaths(ticks.map((t) => t.position), 'horizontal', chartBounds).map((d, i) => (h("path", { key: i, d: d, class: "area-chart__grid-line" }))))), (stacked ? areaPaths : [...areaPaths].reverse()).map((pathD, i) => {
+            const seriesIndex = stacked ? i : seriesCount - 1 - i;
+            const series = data.series[seriesIndex];
+            const isHovered = this.hoveredSeries === seriesIndex;
+            return (h("g", { key: seriesIndex, class: {
+                    'area-chart__series': true,
+                    'area-chart__series--hovered': isHovered,
+                }, onMouseEnter: () => this.handleSeriesEnter(seriesIndex), onMouseLeave: this.handleSeriesLeave }, h("path", { d: pathD, class: {
+                    'area-chart__area': true,
+                    'area-chart__area--animated': animated,
+                    [`area-chart__area--series-${seriesIndex}`]: true,
+                }, style: {
+                    opacity: String(isHovered ? Math.min(opacity + 0.2, 1) : opacity),
+                    ...(series.color ? { fill: series.color } : {}),
+                } }), showStroke && (h("path", { d: linePath(stacked ? this.getStackedPoints(data, seriesIndex, xScale, yScale, labels) : seriesPoints[seriesIndex], curve), class: {
+                    'area-chart__stroke': true,
+                    'area-chart__stroke--animated': animated,
+                    [`area-chart__stroke--series-${seriesIndex}`]: true,
+                }, style: {
+                    strokeWidth: `${strokeWidth}px`,
+                    ...(series.color ? { stroke: series.color } : {}),
+                } }))));
+        }), showAxis && this.renderAxes(xScale, ticks, labels)));
+    }
+    getStackedPoints(data, upToSeriesIndex, xScale, yScale, labels) {
+        return labels.map((label, i) => {
+            let cumulative = 0;
+            for (let sIdx = 0; sIdx <= upToSeriesIndex; sIdx++) {
+                cumulative += Math.max(0, data.series[sIdx].values[i] ?? 0);
+            }
+            return {
+                x: xScale.scale(label) + xScale.bandwidth / 2,
+                y: yScale(cumulative),
+            };
+        });
+    }
+    renderAxes(xScale, yTicks, labels) {
+        const { chartBounds } = this;
+        // Filter out ticks too close to the bottom to avoid overlap with x-axis labels
+        const filteredYTicks = yTicks.filter((tick) => {
+            const distanceFromBottom = (chartBounds.y + chartBounds.height) - tick.position;
+            return distanceFromBottom > 15;
+        });
+        return (h("g", { class: "area-chart__axes" }, h("g", { class: "area-chart__axis area-chart__axis--y" }, h("line", { x1: chartBounds.x, y1: chartBounds.y, x2: chartBounds.x, y2: chartBounds.y + chartBounds.height, class: "area-chart__axis-line" }), filteredYTicks.map((tick, i) => (h("g", { key: i, class: "area-chart__tick" }, h("text", { x: chartBounds.x - 10, y: tick.position, class: "area-chart__tick-label area-chart__tick-label--y" }, tick.label))))), h("g", { class: "area-chart__axis area-chart__axis--x" }, h("line", { x1: chartBounds.x, y1: chartBounds.y + chartBounds.height, x2: chartBounds.x + chartBounds.width, y2: chartBounds.y + chartBounds.height, class: "area-chart__axis-line" }), labels.map((label, i) => {
+            const x = xScale.scale(label) + xScale.bandwidth / 2;
+            return (h("text", { key: i, x: x, y: chartBounds.y + chartBounds.height + 16, class: "area-chart__tick-label area-chart__tick-label--x" }, label));
+        }))));
+    }
+    renderLegend(data) {
+        return (h("div", { class: "area-chart__legend" }, data.series.map((series, i) => (h("div", { key: i, class: {
+                'area-chart__legend-item': true,
+                'area-chart__legend-item--hovered': this.hoveredSeries === i,
+            }, onMouseEnter: () => this.handleSeriesEnter(i), onMouseLeave: this.handleSeriesLeave }, h("span", { class: `area-chart__legend-swatch area-chart__legend-swatch--series-${i}`, style: series.color ? { backgroundColor: series.color } : {} }), h("span", { class: "area-chart__legend-label" }, series.name))))));
+    }
+    render() {
+        const { parsedData, width, height, theme, showLegend, interactive, chartLabel } = this;
+        if (!parsedData) {
+            return (h(Host, { class: "area-chart area-chart--empty" }, h("p", { class: "area-chart__empty-message" }, "No data available")));
+        }
+        const isMulti = this.isMultiSeries(parsedData);
+        const singleData = isMulti ? null : parsedData;
+        const multiData = isMulti ? parsedData : null;
+        const description = chartLabel ||
+            (singleData
+                ? generateChartDescription('area', singleData)
+                : `Area chart with ${multiData.series.length} series`);
+        const chartAriaAttrs = getChartAriaAttrs(description, interactive !== 'none');
+        return (h(Host, { class: {
+                'area-chart': true,
+                'area-chart--interactive': interactive !== 'none',
+            } }, h("style", null, srOnlyStyles), h("svg", { viewBox: `0 0 ${width} ${height}`, class: "area-chart__svg", ...chartAriaAttrs }, singleData && this.renderSingleSeries(singleData), multiData && this.renderMultiSeries(multiData)), singleData && (h("div", { innerHTML: generateDataTable(singleData) })), showLegend && multiData && this.renderLegend(multiData), h("slot", null)));
+    }
+    static get is() { return "af-area-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-area-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-area-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chart data as JSON string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data",
+                "defaultValue": "'[]'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Theme",
+                            "referenceLocation": "Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme for colors."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'white'"
+            },
+            "stacked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stack multiple series on top of each other."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stacked",
+                "defaultValue": "false"
+            },
+            "curve": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CurveType",
+                    "resolved": "\"linear\" | \"smooth\"",
+                    "references": {
+                        "CurveType": {
+                            "location": "import",
+                            "path": "../../utils/charts",
+                            "id": "src/utils/charts/index.ts::CurveType",
+                            "referenceLocation": "CurveType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Curve interpolation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "curve",
+                "defaultValue": "'smooth'"
+            },
+            "opacity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Area fill opacity (0-1)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "opacity",
+                "defaultValue": "0.6"
+            },
+            "showStroke": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show outline stroke on areas."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-stroke",
+                "defaultValue": "true"
+            },
+            "interactive": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InteractiveMode",
+                    "resolved": "\"none\" | \"tooltip\"",
+                    "references": {
+                        "InteractiveMode": {
+                            "location": "import",
+                            "path": "../../utils/charts",
+                            "id": "src/utils/charts/index.ts::InteractiveMode",
+                            "referenceLocation": "InteractiveMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Interactivity level."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interactive",
+                "defaultValue": "'none'"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable CSS entry animations."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "false"
+            },
+            "showLegend": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show legend below chart."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-legend",
+                "defaultValue": "false"
+            },
+            "showGrid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show grid lines."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-grid",
+                "defaultValue": "true"
+            },
+            "showAxis": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show axis labels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-axis",
+                "defaultValue": "true"
+            },
+            "strokeWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stroke width for area outlines."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-width",
+                "defaultValue": "2"
+            },
+            "chartLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom accessible label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chart-label"
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chart width (SVG viewBox)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "400"
+            },
+            "aspectRatio": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aspect ratio as width/height."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aspect-ratio",
+                "defaultValue": "16 / 9"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedData": {},
+            "hoveredSeries": {},
+            "tooltipData": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "parseData"
+            }];
+    }
+}

package/dist/collection/components/af-aspect-ratio/af-aspect-ratio.js

@@ -114,4 +114,3 @@ export class AfAspectRatio {
         };
     }
 }
-//# sourceMappingURL=af-aspect-ratio.js.map