semiotic 2.0.3 → 3.0.0-beta.2

package/ai/dist/src/components/charts/xy/MinimapChart.js

@@ -0,0 +1,298 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MinimapChart = MinimapChart;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const d3_brush_1 = require("d3-brush");
+const d3_selection_1 = require("d3-selection");
+const StreamXYFrame_1 = __importDefault(require("../../stream/StreamXYFrame"));
+const colorUtils_1 = require("../shared/colorUtils");
+const hooks_1 = require("../shared/hooks");
+const legendUtils_1 = require("../shared/legendUtils");
+const Tooltip_1 = require("../../Tooltip/Tooltip");
+const ChartError_1 = __importDefault(require("../shared/ChartError"));
+const validateChartData_1 = require("../shared/validateChartData");
+function BrushOverlay({ width, height, margin, scales, brushDirection, extent, onBrush }) {
+    const svgRef = (0, react_1.useRef)(null);
+    const brushRef = (0, react_1.useRef)(null);
+    const isUpdatingRef = (0, react_1.useRef)(false);
+    const totalWidth = width + margin.left + margin.right;
+    const totalHeight = height + margin.top + margin.bottom;
+    (0, react_1.useEffect)(() => {
+        if (!svgRef.current || !scales)
+            return;
+        const g = (0, d3_selection_1.select)(svgRef.current).select(".brush-group");
+        const brush = brushDirection === "x"
+            ? (0, d3_brush_1.brushX)().extent([[0, 0], [width, height]])
+            : (0, d3_brush_1.brushY)().extent([[0, 0], [width, height]]);
+        brush.on("brush end", (event) => {
+            if (isUpdatingRef.current)
+                return;
+            if (!event.sourceEvent)
+                return; // programmatic — skip
+            const sel = event.selection;
+            if (!sel) {
+                onBrush(null);
+                return;
+            }
+            const scale = brushDirection === "x" ? scales.x : scales.y;
+            const inv = scale.invert;
+            if (!inv)
+                return;
+            const domain = brushDirection === "x"
+                ? [inv(sel[0]), inv(sel[1])]
+                : [inv(sel[0]), inv(sel[1])];
+            onBrush(domain);
+        });
+        g.call(brush);
+        brushRef.current = brush;
+        // Style the brush selection
+        g.select(".selection")
+            .attr("fill", "steelblue")
+            .attr("fill-opacity", 0.2)
+            .attr("stroke", "steelblue")
+            .attr("stroke-width", 1);
+        return () => {
+            brush.on("brush end", null);
+        };
+    }, [scales, width, height, brushDirection, onBrush]);
+    // Sync controlled extent to brush position
+    (0, react_1.useEffect)(() => {
+        if (!brushRef.current || !scales || !svgRef.current)
+            return;
+        const g = (0, d3_selection_1.select)(svgRef.current).select(".brush-group");
+        const scale = brushDirection === "x" ? scales.x : scales.y;
+        isUpdatingRef.current = true;
+        if (extent) {
+            const pixelExtent = [scale(extent[0]), scale(extent[1])];
+            g.call(brushRef.current.move, pixelExtent);
+        }
+        else {
+            g.call(brushRef.current.move, null);
+        }
+        isUpdatingRef.current = false;
+    }, [extent, scales, brushDirection]);
+    return (React.createElement("svg", { ref: svgRef, width: totalWidth, height: totalHeight, style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            pointerEvents: "all"
+        } },
+        React.createElement("g", { className: "brush-group", transform: `translate(${margin.left},${margin.top})` })));
+}
+// ── MinimapChart ────────────────────────────────────────────────────────
+function MinimapChart(props) {
+    const { data, width = 600, height = 400, margin: userMargin, className, title, xLabel, yLabel, xFormat, yFormat, xAccessor = "x", yAccessor = "y", lineBy, lineDataAccessor = "coordinates", colorBy, colorScheme = "category10", curve = "linear", lineWidth = 2, fillArea = false, areaOpacity = 0.3, showPoints = false, pointRadius = 3, enableHover = true, showGrid = false, showLegend, tooltip, minimap: minimapConfig = {}, renderBefore = false, onBrush, brushExtent: controlledExtent, frameProps = {} } = props;
+    const safeData = data || [];
+    // ── Brush state ─────────────────────────────────────────────────────
+    const [internalExtent, setInternalExtent] = (0, react_1.useState)(null);
+    const brushExtent = controlledExtent ?? internalExtent;
+    const handleBrush = (0, react_1.useCallback)((ext) => {
+        if (!controlledExtent) {
+            setInternalExtent(ext);
+        }
+        onBrush?.(ext);
+    }, [controlledExtent, onBrush]);
+    // ── Overview ref to get scales ──────────────────────────────────────
+    const overviewRef = (0, react_1.useRef)(null);
+    const [overviewScales, setOverviewScales] = (0, react_1.useState)(null);
+    // Poll for scales after mount (overview sets them async via rAF)
+    (0, react_1.useEffect)(() => {
+        const check = () => {
+            const s = overviewRef.current?.getScales?.();
+            if (s) {
+                setOverviewScales(s);
+            }
+            else {
+                requestAnimationFrame(check);
+            }
+        };
+        requestAnimationFrame(check);
+    }, [data]);
+    // ── Data normalization (same as LineChart) ──────────────────────────
+    const isLineObjectFormat = safeData[0]?.[lineDataAccessor] !== undefined;
+    const lineData = (0, react_1.useMemo)(() => {
+        if (isLineObjectFormat)
+            return safeData;
+        if (lineBy) {
+            const grouped = safeData.reduce((acc, d) => {
+                const key = typeof lineBy === "function" ? lineBy(d) : d[lineBy];
+                if (!acc[key]) {
+                    const lineObj = { [lineDataAccessor]: [] };
+                    if (typeof lineBy === "string")
+                        lineObj[lineBy] = key;
+                    acc[key] = lineObj;
+                }
+                acc[key][lineDataAccessor].push(d);
+                return acc;
+            }, {});
+            return Object.values(grouped);
+        }
+        return [{ [lineDataAccessor]: safeData }];
+    }, [safeData, lineBy, lineDataAccessor, isLineObjectFormat]);
+    const flattenedData = (0, react_1.useMemo)(() => {
+        if (isLineObjectFormat || lineBy) {
+            return lineData.flatMap((line) => {
+                const coords = line[lineDataAccessor] || [];
+                if (lineBy && typeof lineBy === "string") {
+                    return coords.map((c) => ({ ...c, [lineBy]: line[lineBy] }));
+                }
+                return coords;
+            });
+        }
+        return safeData;
+    }, [lineData, lineDataAccessor, isLineObjectFormat, lineBy, safeData]);
+    // ── Color / style ───────────────────────────────────────────────────
+    const colorScale = (0, hooks_1.useColorScale)(safeData, colorBy, colorScheme);
+    const mainLineStyle = (0, react_1.useMemo)(() => {
+        return (d) => {
+            const style = { strokeWidth: lineWidth };
+            style.stroke = colorBy ? (0, colorUtils_1.getColor)(d, colorBy, colorScale) : hooks_1.DEFAULT_COLOR;
+            if (fillArea) {
+                style.fill = style.stroke;
+                style.fillOpacity = areaOpacity;
+            }
+            return style;
+        };
+    }, [colorBy, colorScale, lineWidth, fillArea, areaOpacity]);
+    const overviewLineStyle = (0, react_1.useMemo)(() => {
+        if (minimapConfig.lineStyle)
+            return minimapConfig.lineStyle;
+        return (d) => {
+            const style = { strokeWidth: 1 };
+            style.stroke = colorBy ? (0, colorUtils_1.getColor)(d, colorBy, colorScale) : hooks_1.DEFAULT_COLOR;
+            return style;
+        };
+    }, [colorBy, colorScale, minimapConfig.lineStyle]);
+    const pointStyle = (0, react_1.useMemo)(() => {
+        if (!showPoints)
+            return undefined;
+        return (d) => {
+            const style = { r: pointRadius, fillOpacity: 1 };
+            style.fill = colorBy ? (0, colorUtils_1.getColor)(d.parentLine || d, colorBy, colorScale) : hooks_1.DEFAULT_COLOR;
+            return style;
+        };
+    }, [showPoints, pointRadius, colorBy, colorScale]);
+    // ── Legend ───────────────────────────────────────────────────────────
+    const shouldShowLegend = showLegend !== undefined ? showLegend : lineData.length > 1;
+    const legend = (0, react_1.useMemo)(() => {
+        if (!shouldShowLegend || !colorBy)
+            return undefined;
+        return (0, legendUtils_1.createLegend)({ data: lineData, colorBy, colorScale, getColor: colorUtils_1.getColor });
+    }, [shouldShowLegend, colorBy, lineData, colorScale]);
+    // ── Margins ─────────────────────────────────────────────────────────
+    const mainMargin = (0, react_1.useMemo)(() => {
+        const def = { top: 50, bottom: 60, left: 70, right: 40 };
+        const m = { ...def, ...userMargin };
+        if (legend && m.right < 120)
+            m.right = 120;
+        return m;
+    }, [userMargin, legend]);
+    const minimapHeight = minimapConfig.height || 60;
+    const minimapMargin = (0, react_1.useMemo)(() => {
+        return {
+            top: minimapConfig.margin?.top ?? 0,
+            bottom: minimapConfig.margin?.bottom ?? 20,
+            left: minimapConfig.margin?.left ?? mainMargin.left,
+            right: minimapConfig.margin?.right ?? mainMargin.right
+        };
+    }, [minimapConfig.margin, mainMargin]);
+    const brushDirection = minimapConfig.brushDirection || "x";
+    // ── Validation ──────────────────────────────────────────────────────
+    const error = (0, validateChartData_1.validateArrayData)({
+        componentName: "MinimapChart",
+        data: safeData,
+        accessors: { xAccessor, yAccessor }
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "MinimapChart", message: error, width: width, height: height });
+    // ── Chart type ──────────────────────────────────────────────────────
+    const chartType = fillArea ? "area" : "line";
+    // ── Build StreamXYFrame props ───────────────────────────────────────
+    const mainProps = {
+        chartType,
+        data: flattenedData,
+        xAccessor,
+        yAccessor,
+        groupAccessor: lineBy || undefined,
+        curve,
+        lineStyle: mainLineStyle,
+        ...(showPoints && { pointStyle }),
+        size: [width, height],
+        margin: mainMargin,
+        showAxes: true,
+        xLabel,
+        yLabel,
+        xFormat,
+        yFormat,
+        enableHover,
+        showGrid,
+        ...(legend && { legend }),
+        ...(title && { title }),
+        ...(tooltip && { tooltipContent: (0, Tooltip_1.normalizeTooltip)(tooltip) }),
+        // Apply brush extent to main chart
+        ...(brushExtent && { xExtent: brushExtent }),
+        ...frameProps
+    };
+    const overviewProps = {
+        chartType,
+        data: flattenedData,
+        xAccessor,
+        yAccessor,
+        groupAccessor: lineBy || undefined,
+        curve,
+        lineStyle: overviewLineStyle,
+        size: [width, minimapHeight + minimapMargin.top + minimapMargin.bottom],
+        margin: minimapMargin,
+        showAxes: minimapConfig.showAxes ?? false,
+        background: minimapConfig.background,
+        enableHover: false
+    };
+    // ── Render ──────────────────────────────────────────────────────────
+    const overviewChart = (React.createElement("div", { key: "minimap", style: { position: "relative", width } },
+        React.createElement(StreamXYFrame_1.default, { ref: overviewRef, ...overviewProps }),
+        React.createElement(BrushOverlay, { width: width - minimapMargin.left - minimapMargin.right, height: minimapHeight, margin: minimapMargin, scales: overviewScales, brushDirection: brushDirection, extent: brushExtent, onBrush: handleBrush })));
+    const mainChart = (React.createElement("div", { key: "main" },
+        React.createElement(StreamXYFrame_1.default, { ...mainProps })));
+    return (React.createElement("div", { className: `minimap-chart${className ? ` ${className}` : ""}` },
+        renderBefore ? overviewChart : mainChart,
+        renderBefore ? mainChart : overviewChart));
+}
+MinimapChart.displayName = "MinimapChart";

package/ai/dist/src/components/charts/xy/Scatterplot.js

@@ -0,0 +1,172 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Scatterplot = Scatterplot;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const StreamXYFrame_1 = __importDefault(require("../../stream/StreamXYFrame"));
+const colorUtils_1 = require("../shared/colorUtils");
+const legendUtils_1 = require("../shared/legendUtils");
+const Tooltip_1 = require("../../Tooltip/Tooltip");
+const tooltipUtils_1 = require("../shared/tooltipUtils");
+const hooks_1 = require("../shared/hooks");
+const ChartError_1 = __importDefault(require("../shared/ChartError"));
+const validateChartData_1 = require("../shared/validateChartData");
+const selectionUtils_1 = require("../shared/selectionUtils");
+const useSelection_1 = require("../../store/useSelection");
+const useSelection_2 = require("../../store/useSelection");
+const useSelection_3 = require("../../store/useSelection");
+/**
+ * Scatterplot - Visualize relationships between two continuous variables
+ *
+ * @example
+ * ```tsx
+ * <Scatterplot
+ *   data={[{x: 1, y: 10}, {x: 2, y: 20}]}
+ *   xLabel="Time"
+ *   yLabel="Value"
+ * />
+ * ```
+ */
+function Scatterplot(props) {
+    const { data, width = 600, height = 400, margin: userMargin, className, title, xLabel, yLabel, xFormat, yFormat, xAccessor = "x", yAccessor = "y", colorBy, colorScheme = "category10", sizeBy, sizeRange = [3, 15], pointRadius = 5, pointOpacity = 0.8, enableHover = true, showGrid = false, showLegend, tooltip, marginalGraphics, frameProps = {}, selection, linkedHover, linkedBrush } = props;
+    const safeData = data || [];
+    // ── Selection hooks (always called, conditional logic inside) ──────────
+    const hoverConfig = (0, selectionUtils_1.normalizeLinkedHover)(linkedHover, colorBy ? [typeof colorBy === "string" ? colorBy : ""] : []);
+    const brushConfig = (0, selectionUtils_1.normalizeLinkedBrush)(linkedBrush);
+    const selectionHook = (0, useSelection_1.useSelection)({
+        name: selection?.name || "__unused__",
+        fields: []
+    });
+    const linkedHoverHook = (0, useSelection_2.useLinkedHover)({
+        name: hoverConfig?.name || "hover",
+        fields: hoverConfig?.fields || []
+    });
+    const brushHook = (0, useSelection_3.useBrushSelection)({
+        name: brushConfig?.name || "__unused_brush__",
+        xField: brushConfig?.xField || (typeof xAccessor === "string" ? xAccessor : undefined),
+        yField: brushConfig?.yField || (typeof yAccessor === "string" ? yAccessor : undefined)
+    });
+    // Only use the hooks when the corresponding props are provided
+    const activeSelectionHook = selection ? { isActive: selectionHook.isActive, predicate: selectionHook.predicate } : null;
+    // ── Core chart logic ───────────────────────────────────────────────────
+    const colorScale = (0, hooks_1.useColorScale)(safeData, colorBy, colorScheme);
+    const sizeDomain = (0, react_1.useMemo)(() => {
+        if (!sizeBy || safeData.length === 0)
+            return undefined;
+        const sizes = safeData.map((d) => typeof sizeBy === "function" ? sizeBy(d) : d[sizeBy]);
+        return [Math.min(...sizes), Math.max(...sizes)];
+    }, [safeData, sizeBy]);
+    const basePointStyle = (0, react_1.useMemo)(() => {
+        return (d) => {
+            const baseStyle = { fillOpacity: pointOpacity };
+            baseStyle.fill = colorBy ? (0, colorUtils_1.getColor)(d, colorBy, colorScale) : hooks_1.DEFAULT_COLOR;
+            baseStyle.r = sizeBy
+                ? (0, colorUtils_1.getSize)(d, sizeBy, sizeRange, sizeDomain)
+                : pointRadius;
+            return baseStyle;
+        };
+    }, [colorBy, colorScale, sizeBy, sizeRange, sizeDomain, pointRadius, pointOpacity]);
+    const pointStyle = (0, react_1.useMemo)(() => (0, selectionUtils_1.wrapStyleWithSelection)(basePointStyle, activeSelectionHook, selection), [basePointStyle, activeSelectionHook, selection]);
+    const shouldShowLegend = showLegend !== undefined ? showLegend : !!colorBy;
+    const legend = (0, react_1.useMemo)(() => {
+        if (!shouldShowLegend || !colorBy)
+            return undefined;
+        return (0, legendUtils_1.createLegend)({ data: safeData, colorBy, colorScale, getColor: colorUtils_1.getColor });
+    }, [shouldShowLegend, colorBy, safeData, colorScale]);
+    const margin = (0, react_1.useMemo)(() => {
+        const finalMargin = { top: 50, bottom: 60, left: 70, right: 40, ...userMargin };
+        if (legend && finalMargin.right < 120)
+            finalMargin.right = 120;
+        return finalMargin;
+    }, [userMargin, legend]);
+    // ── Hover behavior ─────────────────────────────────────────────────────
+    const customHoverBehavior = (0, react_1.useCallback)((d) => {
+        if (linkedHover) {
+            linkedHoverHook.onHover(d);
+        }
+    }, [linkedHover, linkedHoverHook]);
+    // Default tooltip showing all configured fields
+    const defaultTooltipContent = (0, react_1.useMemo)(() => (0, tooltipUtils_1.buildDefaultTooltip)([
+        { label: xLabel || (0, tooltipUtils_1.accessorName)(xAccessor), accessor: xAccessor, role: "x" },
+        { label: yLabel || (0, tooltipUtils_1.accessorName)(yAccessor), accessor: yAccessor, role: "y" },
+        ...(colorBy ? [{ label: (0, tooltipUtils_1.accessorName)(colorBy), accessor: colorBy, role: "color" }] : []),
+        ...(sizeBy ? [{ label: (0, tooltipUtils_1.accessorName)(sizeBy), accessor: sizeBy, role: "size" }] : []),
+    ]), [xAccessor, yAccessor, xLabel, yLabel, colorBy, sizeBy]);
+    // Validate data (after all hooks)
+    const error = (0, validateChartData_1.validateArrayData)({
+        componentName: "Scatterplot",
+        data: safeData,
+        accessors: {
+            xAccessor,
+            yAccessor,
+        },
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "Scatterplot", message: error, width: width, height: height });
+    const streamProps = {
+        chartType: "scatter",
+        data: safeData,
+        xAccessor,
+        yAccessor,
+        colorAccessor: colorBy || undefined,
+        sizeAccessor: sizeBy || undefined,
+        sizeRange,
+        pointStyle,
+        colorScheme,
+        size: [width, height],
+        margin,
+        showAxes: true,
+        xLabel,
+        yLabel,
+        xFormat,
+        yFormat,
+        enableHover,
+        showGrid,
+        ...(legend && { legend }),
+        ...(title && { title }),
+        ...(className && { className }),
+        tooltipContent: (tooltip ? (0, Tooltip_1.normalizeTooltip)(tooltip) : defaultTooltipContent),
+        ...(linkedHover && { customHoverBehavior }),
+        ...(marginalGraphics && { marginalGraphics }),
+        ...frameProps
+    };
+    return React.createElement(StreamXYFrame_1.default, { ...streamProps });
+}
+Scatterplot.displayName = "Scatterplot";