semiotic 3.0.0-beta.2 → 3.0.0-beta.4

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

@@ -1,298 +0,0 @@
-"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

@@ -1,172 +0,0 @@
-"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";