@affinda/wc 0.6.1 → 0.7.0

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

@@ -0,0 +1,618 @@
+import { h, Host } from "@stencil/core";
+import { defaultMargins, linearScale, bandScale, computeDomain, generateTickMarks, formatAxisValue, linePath, areaPath, gridLinePaths, generateChartDescription, generateDataTable, getChartAriaAttrs, srOnlyStyles, } from "../../utils/charts";
+/**
+ * A native SVG line chart component with theme integration.
+ *
+ * Supports linear/smooth curves, data points, area fill, and progressive
+ * interactivity (none, hover, tooltip).
+ *
+ * @slot - Optional custom content (placed after chart)
+ *
+ * @example Simple line chart
+ * ```html
+ * <af-line-chart
+ *   data='[{"label":"Jan","value":120},{"label":"Feb","value":180}]'
+ *   theme="mist-green"
+ *   curve="smooth"
+ * ></af-line-chart>
+ * ```
+ *
+ * @example With area fill and points
+ * ```html
+ * <af-line-chart
+ *   data='[{"label":"Q1","value":100},{"label":"Q2","value":150}]'
+ *   show-area
+ *   show-points
+ *   interactive="hover"
+ * ></af-line-chart>
+ * ```
+ */
+export class AfLineChart {
+    constructor() {
+        /**
+         * Chart data as JSON string.
+         * Single series: `[{"label":"Jan","value":100}, ...]`
+         * Multi-series: `{"labels":["Jan","Feb"],"series":[{"name":"A","values":[100,200]}]}`
+         */
+        this.data = '[]';
+        /**
+         * Theme for colors.
+         */
+        this.theme = 'white';
+        /**
+         * Line curve interpolation.
+         */
+        this.curve = 'linear';
+        /**
+         * Show data point markers.
+         */
+        this.showPoints = false;
+        /**
+         * Fill area under line.
+         */
+        this.showArea = false;
+        /**
+         * 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;
+        /**
+         * Line stroke width.
+         */
+        this.strokeWidth = 2;
+        /**
+         * Data point radius.
+         */
+        this.pointRadius = 4;
+        /**
+         * Chart width (SVG viewBox).
+         */
+        this.width = 400;
+        /**
+         * Aspect ratio as width/height.
+         */
+        this.aspectRatio = 16 / 9;
+        this.parsedData = null;
+        this.hoveredIndex = null;
+        this.tooltipData = null;
+        this.handlePointEnter = (index, x, y, label, value) => {
+            if (this.interactive === 'none')
+                return;
+            this.hoveredIndex = index;
+            if (this.interactive === 'tooltip') {
+                this.tooltipData = { x, y, label, value };
+            }
+        };
+        this.handlePointLeave = () => {
+            this.hoveredIndex = null;
+            this.tooltipData = 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, showArea, showPoints, showGrid, showAxis, animated, interactive, strokeWidth, pointRadius } = 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);
+        // Generate points
+        const points = data.map((d) => ({
+            x: xScale.scale(d.label) + xScale.bandwidth / 2,
+            y: yScale(d.value),
+        }));
+        const baseline = chartBounds.y + chartBounds.height;
+        const lineD = linePath(points, curve);
+        const areaD = showArea ? areaPath(points, baseline, curve) : '';
+        return (h("g", { class: "line-chart__content" }, showGrid && (h("g", { class: "line-chart__grid" }, gridLinePaths(ticks.map((t) => t.position), 'horizontal', chartBounds).map((d, i) => (h("path", { key: i, d: d, class: "line-chart__grid-line" }))))), showArea && (h("path", { d: areaD, class: {
+                'line-chart__area': true,
+                'line-chart__area--animated': animated,
+            } })), h("path", { d: lineD, class: {
+                'line-chart__line': true,
+                'line-chart__line--animated': animated,
+            }, style: { strokeWidth: `${strokeWidth}px` } }), showPoints && (h("g", { class: "line-chart__points" }, points.map((point, i) => (h("g", { key: i, class: {
+                'line-chart__point-group': true,
+                'line-chart__point-group--hovered': this.hoveredIndex === i,
+            }, onMouseEnter: () => this.handlePointEnter(i, point.x, point.y, data[i].label, data[i].value), onMouseLeave: this.handlePointLeave }, h("circle", { cx: point.x, cy: point.y, r: pointRadius, class: {
+                'line-chart__point': true,
+                'line-chart__point--animated': animated,
+            }, style: { animationDelay: `${i * 50 + 300}ms` } }), interactive !== 'none' && (h("circle", { cx: point.x, cy: point.y, r: pointRadius * 2.5, class: "line-chart__point-hitarea" }))))))), showAxis && this.renderAxes(xScale, ticks, labels)));
+    }
+    renderMultiSeries(data) {
+        const { chartBounds, curve, showArea, showPoints, showGrid, showAxis, animated, interactive, strokeWidth, pointRadius } = this;
+        const labels = data.labels;
+        const allValues = data.series.flatMap((s) => s.values);
+        const domain = computeDomain(allValues, 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 baseline = chartBounds.y + chartBounds.height;
+        // Generate points for each series
+        const seriesData = data.series.map((series) => ({
+            name: series.name,
+            color: series.color,
+            points: labels.map((label, i) => ({
+                x: xScale.scale(label) + xScale.bandwidth / 2,
+                y: yScale(series.values[i] ?? 0),
+                value: series.values[i] ?? 0,
+                label,
+            })),
+        }));
+        return (h("g", { class: "line-chart__content" }, showGrid && (h("g", { class: "line-chart__grid" }, gridLinePaths(ticks.map((t) => t.position), 'horizontal', chartBounds).map((d, i) => (h("path", { key: i, d: d, class: "line-chart__grid-line" }))))), seriesData.map((series, seriesIndex) => {
+            const points = series.points.map((p) => ({ x: p.x, y: p.y }));
+            const lineD = linePath(points, curve);
+            const areaD = showArea ? areaPath(points, baseline, curve) : '';
+            return (h("g", { key: seriesIndex, class: `line-chart__series line-chart__series--${seriesIndex}` }, showArea && (h("path", { d: areaD, class: {
+                    'line-chart__area': true,
+                    'line-chart__area--animated': animated,
+                    [`line-chart__area--series-${seriesIndex}`]: true,
+                }, style: series.color ? { fill: series.color } : {} })), h("path", { d: lineD, class: {
+                    'line-chart__line': true,
+                    'line-chart__line--animated': animated,
+                    [`line-chart__line--series-${seriesIndex}`]: true,
+                }, style: {
+                    strokeWidth: `${strokeWidth}px`,
+                    ...(series.color ? { stroke: series.color } : {}),
+                } }), showPoints && (h("g", { class: "line-chart__points" }, series.points.map((point, i) => (h("g", { key: i, class: "line-chart__point-group", onMouseEnter: () => this.handlePointEnter(seriesIndex * labels.length + i, point.x, point.y, `${point.label} - ${series.name}`, point.value), onMouseLeave: this.handlePointLeave }, h("circle", { cx: point.x, cy: point.y, r: pointRadius, class: {
+                    'line-chart__point': true,
+                    'line-chart__point--animated': animated,
+                    [`line-chart__point--series-${seriesIndex}`]: true,
+                }, style: {
+                    animationDelay: `${i * 50 + 300}ms`,
+                    ...(series.color ? { fill: series.color } : {}),
+                } }), interactive !== 'none' && (h("circle", { cx: point.x, cy: point.y, r: pointRadius * 2.5, class: "line-chart__point-hitarea" })))))))));
+        }), showAxis && this.renderAxes(xScale, ticks, labels)));
+    }
+    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: "line-chart__axes" }, h("g", { class: "line-chart__axis line-chart__axis--y" }, h("line", { x1: chartBounds.x, y1: chartBounds.y, x2: chartBounds.x, y2: chartBounds.y + chartBounds.height, class: "line-chart__axis-line" }), filteredYTicks.map((tick, i) => (h("g", { key: i, class: "line-chart__tick" }, h("text", { x: chartBounds.x - 10, y: tick.position, class: "line-chart__tick-label line-chart__tick-label--y" }, tick.label))))), h("g", { class: "line-chart__axis line-chart__axis--x" }, h("line", { x1: chartBounds.x, y1: chartBounds.y + chartBounds.height, x2: chartBounds.x + chartBounds.width, y2: chartBounds.y + chartBounds.height, class: "line-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: "line-chart__tick-label line-chart__tick-label--x" }, label));
+        }))));
+    }
+    renderLegend(data) {
+        return (h("div", { class: "line-chart__legend" }, data.series.map((series, i) => (h("div", { key: i, class: "line-chart__legend-item" }, h("span", { class: `line-chart__legend-swatch line-chart__legend-swatch--series-${i}`, style: series.color ? { backgroundColor: series.color } : {} }), h("span", { class: "line-chart__legend-label" }, series.name))))));
+    }
+    renderTooltip() {
+        const { tooltipData, width, height } = this;
+        if (!tooltipData)
+            return null;
+        // Convert SVG coordinates to percentages for proper positioning
+        const leftPct = (tooltipData.x / width) * 100;
+        const topPct = (tooltipData.y / height) * 100;
+        return (h("div", { class: "line-chart__tooltip", style: {
+                left: `${leftPct}%`,
+                top: `${topPct}%`,
+            } }, h("div", { class: "line-chart__tooltip-label" }, tooltipData.label), h("div", { class: "line-chart__tooltip-value" }, tooltipData.value)));
+    }
+    render() {
+        const { parsedData, width, height, theme, showLegend, interactive, chartLabel } = this;
+        if (!parsedData) {
+            return (h(Host, { class: "line-chart line-chart--empty" }, h("p", { class: "line-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('line', singleData)
+                : `Line chart with ${multiData.series.length} series`);
+        const chartAriaAttrs = getChartAriaAttrs(description, interactive !== 'none');
+        return (h(Host, { class: {
+                'line-chart': true,
+                'line-chart--interactive': interactive !== 'none',
+            } }, h("style", null, srOnlyStyles), h("div", { class: "line-chart__chart-wrapper" }, h("svg", { viewBox: `0 0 ${width} ${height}`, class: "line-chart__svg", ...chartAriaAttrs }, singleData && this.renderSingleSeries(singleData), multiData && this.renderMultiSeries(multiData)), interactive === 'tooltip' && this.renderTooltip()), singleData && (h("div", { innerHTML: generateDataTable(singleData) })), showLegend && multiData && this.renderLegend(multiData), h("slot", null)));
+    }
+    static get is() { return "af-line-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-line-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-line-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.\nSingle series: `[{\"label\":\"Jan\",\"value\":100}, ...]`\nMulti-series: `{\"labels\":[\"Jan\",\"Feb\"],\"series\":[{\"name\":\"A\",\"values\":[100,200]}]}`"
+                },
+                "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'"
+            },
+            "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": "Line curve interpolation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "curve",
+                "defaultValue": "'linear'"
+            },
+            "showPoints": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show data point markers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-points",
+                "defaultValue": "false"
+            },
+            "showArea": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fill area under line."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-area",
+                "defaultValue": "false"
+            },
+            "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": "Line stroke width."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-width",
+                "defaultValue": "2"
+            },
+            "pointRadius": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Data point radius."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "point-radius",
+                "defaultValue": "4"
+            },
+            "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": {},
+            "hoveredIndex": {},
+            "tooltipData": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "parseData"
+            }];
+    }
+}

package/dist/collection/components/af-logo/af-logo.js

@@ -19,4 +19,3 @@ export class AfLogo {
         };
     }
 }
-//# sourceMappingURL=af-logo.js.map

package/dist/collection/components/af-logo-mark/af-logo-mark.css

@@ -0,0 +1,9 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+svg {
+  display: block;
+}