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

package/ai/dist/src/components/charts/network/Treemap.js

@@ -1,106 +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.Treemap = Treemap;
-const React = __importStar(require("react"));
-const react_1 = require("react");
-const StreamNetworkFrame_1 = __importDefault(require("../../stream/StreamNetworkFrame"));
-const colorUtils_1 = require("../shared/colorUtils");
-const Tooltip_1 = require("../../Tooltip/Tooltip");
-const hooks_1 = require("../shared/hooks");
-const ChartError_1 = __importDefault(require("../shared/ChartError"));
-const validateChartData_1 = require("../shared/validateChartData");
-/**
- * Treemap - Visualize hierarchical data as nested rectangles.
- *
- * Wraps StreamNetworkFrame (canvas-first) for treemap visualization.
- */
-function Treemap(props) {
-    const { data, width = 600, height = 600, margin = { top: 10, bottom: 10, left: 10, right: 10 }, className, title, childrenAccessor = "children", valueAccessor = "value", nodeIdAccessor = "name", colorBy, colorScheme = "category10", colorByDepth = false, showLabels = true, labelMode = "leaf", nodeLabel, padding: paddingProp = 4, paddingTop: paddingTopProp, enableHover = true, tooltip, frameProps = {} } = props;
-    const allNodes = (0, react_1.useMemo)(() => {
-        if (!data)
-            return [];
-        const nodes = [];
-        const traverse = (node) => {
-            nodes.push(node);
-            const children = typeof childrenAccessor === "function" ? childrenAccessor(node) : node[childrenAccessor];
-            if (children && Array.isArray(children))
-                children.forEach(traverse);
-        };
-        traverse(data);
-        return nodes;
-    }, [data, childrenAccessor]);
-    const colorScale = (0, react_1.useMemo)(() => {
-        if (colorByDepth)
-            return undefined;
-        if (!colorBy || typeof colorBy === "function")
-            return undefined;
-        return (0, colorUtils_1.createColorScale)(allNodes, colorBy, colorScheme);
-    }, [allNodes, colorBy, colorByDepth, colorScheme]);
-    const nodeStyleFn = (0, react_1.useMemo)(() => {
-        const DEPTH_PASTELS = ["#f0f0f0", "#b5d4ea", "#f4c2a1", "#b8dab2", "#d4b5e0", "#f9e0a2", "#a8d8d8"];
-        return (d) => {
-            const baseStyle = { stroke: "#fff", strokeWidth: 1, strokeOpacity: 0.8 };
-            if (colorByDepth) {
-                baseStyle.fill = DEPTH_PASTELS[(d.depth || 0) % DEPTH_PASTELS.length];
-            }
-            else if (colorBy) {
-                baseStyle.fill = (0, colorUtils_1.getColor)(d.data || d, colorBy, colorScale);
-            }
-            else {
-                baseStyle.fill = hooks_1.DEFAULT_COLOR;
-            }
-            return baseStyle;
-        };
-    }, [colorBy, colorByDepth, colorScale]);
-    const hierarchySumFn = (0, react_1.useMemo)(() => {
-        if (typeof valueAccessor === "function")
-            return valueAccessor;
-        return (d) => d[valueAccessor] || 1;
-    }, [valueAccessor]);
-    const resolvedPaddingTop = paddingTopProp !== undefined
-        ? paddingTopProp
-        : (showLabels && labelMode === "parent" ? 18 : undefined);
-    // Validate
-    const error = (0, validateChartData_1.validateObjectData)({ componentName: "Treemap", data });
-    if (error)
-        return React.createElement(ChartError_1.default, { componentName: "Treemap", message: error, width: width, height: height });
-    return (React.createElement(StreamNetworkFrame_1.default, { chartType: "treemap", data: data, size: [width, height], margin: margin, nodeIDAccessor: nodeIdAccessor, childrenAccessor: childrenAccessor, hierarchySum: hierarchySumFn, padding: paddingProp, paddingTop: resolvedPaddingTop, nodeStyle: nodeStyleFn, colorBy: colorBy, colorScheme: colorScheme, colorByDepth: colorByDepth, nodeLabel: showLabels ? (nodeLabel || nodeIdAccessor) : undefined, showLabels: showLabels, enableHover: enableHover, tooltipContent: tooltip ? (d) => (0, Tooltip_1.normalizeTooltip)(tooltip)(d.data) : undefined, className: className, title: title, ...frameProps }));
-}
-Treemap.displayName = "Treemap";

package/ai/dist/src/components/charts/ordinal/BarChart.js

@@ -1,156 +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.BarChart = BarChart;
-const React = __importStar(require("react"));
-const react_1 = require("react");
-const StreamOrdinalFrame_1 = __importDefault(require("../../stream/StreamOrdinalFrame"));
-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");
-const selectionUtils_1 = require("../shared/selectionUtils");
-const useSelection_1 = require("../../store/useSelection");
-const useSelection_2 = require("../../store/useSelection");
-/**
- * BarChart - Visualize categorical data with bars.
- */
-function BarChart(props) {
-    const { data, width = 600, height = 400, margin: userMargin, className, title, categoryAccessor = "category", valueAccessor = "value", orientation = "vertical", categoryLabel, valueLabel, valueFormat, colorBy, colorScheme = "category10", sort = false, barPadding = 5, enableHover = true, showGrid = false, showLegend, tooltip, frameProps = {}, selection, linkedHover } = props;
-    const safeData = data || [];
-    // ── Selection hooks (always called) ────────────────────────────────────
-    const hoverConfig = (0, selectionUtils_1.normalizeLinkedHover)(linkedHover, colorBy ? [typeof colorBy === "string" ? colorBy : ""] : []);
-    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 activeSelectionHook = selection ? { isActive: selectionHook.isActive, predicate: selectionHook.predicate } : null;
-    // ── Core chart logic ───────────────────────────────────────────────────
-    const sortedData = (0, hooks_1.useSortedData)(safeData, sort, valueAccessor);
-    const colorScale = (0, hooks_1.useColorScale)(safeData, colorBy, colorScheme);
-    const basePieceStyle = (0, react_1.useMemo)(() => {
-        return (d) => {
-            const baseStyle = {};
-            if (colorBy) {
-                baseStyle.fill = (0, colorUtils_1.getColor)(d, colorBy, colorScale);
-            }
-            else {
-                baseStyle.fill = hooks_1.DEFAULT_COLOR;
-            }
-            return baseStyle;
-        };
-    }, [colorBy, colorScale]);
-    const pieceStyle = (0, react_1.useMemo)(() => (0, selectionUtils_1.wrapStyleWithSelection)(basePieceStyle, activeSelectionHook, selection), [basePieceStyle, 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: sortedData, colorBy, colorScale, getColor: colorUtils_1.getColor });
-    }, [shouldShowLegend, colorBy, sortedData, 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 ? (d.data || d) : null);
-    }, [linkedHover, linkedHoverHook]);
-    // Default tooltip
-    const defaultTooltipContent = (0, react_1.useMemo)(() => {
-        const showColorField = colorBy && colorBy !== categoryAccessor;
-        return (d) => {
-            const datum = d.data || d;
-            const cat = typeof categoryAccessor === "function" ? categoryAccessor(datum) : datum[categoryAccessor];
-            const val = typeof valueAccessor === "function" ? valueAccessor(datum) : datum[valueAccessor];
-            const colorVal = showColorField
-                ? (typeof colorBy === "function" ? colorBy(datum) : datum[colorBy])
-                : null;
-            return (React.createElement("div", { className: "semiotic-tooltip", style: Tooltip_1.defaultTooltipStyle },
-                React.createElement("div", { style: { fontWeight: "bold" } }, String(cat)),
-                React.createElement("div", { style: { marginTop: "4px" } }, typeof val === "number" ? val.toLocaleString() : String(val)),
-                colorVal != null && (React.createElement("div", { style: { marginTop: "2px", opacity: 0.8 } },
-                    typeof colorBy === "string" ? colorBy : "group",
-                    ": ",
-                    String(colorVal)))));
-        };
-    }, [categoryAccessor, valueAccessor, colorBy]);
-    // Validate data (after all hooks)
-    const error = (0, validateChartData_1.validateArrayData)({
-        componentName: "BarChart",
-        data: safeData,
-        accessors: { categoryAccessor, valueAccessor },
-    });
-    if (error)
-        return React.createElement(ChartError_1.default, { componentName: "BarChart", message: error, width: width, height: height });
-    const streamProps = {
-        chartType: "bar",
-        data: sortedData,
-        oAccessor: categoryAccessor,
-        rAccessor: valueAccessor,
-        projection: orientation === "horizontal" ? "horizontal" : "vertical",
-        pieceStyle,
-        size: [width, height],
-        margin,
-        barPadding,
-        enableHover,
-        showAxes: true,
-        oLabel: categoryLabel,
-        rLabel: valueLabel,
-        rFormat: valueFormat,
-        showGrid,
-        oSort: sort,
-        ...(legend && { legend }),
-        ...(title && { title }),
-        ...(className && { className }),
-        tooltipContent: (tooltip ? (0, Tooltip_1.normalizeTooltip)(tooltip) : defaultTooltipContent),
-        ...(linkedHover && { customHoverBehavior }),
-        ...frameProps
-    };
-    return React.createElement(StreamOrdinalFrame_1.default, { ...streamProps });
-}
-BarChart.displayName = "BarChart";

package/ai/dist/src/components/charts/ordinal/BoxPlot.js

@@ -1,139 +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.BoxPlot = BoxPlot;
-const React = __importStar(require("react"));
-const react_1 = require("react");
-const StreamOrdinalFrame_1 = __importDefault(require("../../stream/StreamOrdinalFrame"));
-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");
-const selectionUtils_1 = require("../shared/selectionUtils");
-const useSelection_1 = require("../../store/useSelection");
-const useSelection_2 = require("../../store/useSelection");
-function BoxPlot(props) {
-    const { data, width = 600, height = 400, margin: userMargin, className, title, categoryAccessor = "category", valueAccessor = "value", orientation = "vertical", categoryLabel, valueLabel, valueFormat, colorBy, colorScheme = "category10", showOutliers = true, outlierRadius = 3, categoryPadding = 20, enableHover = true, showGrid = false, showLegend, tooltip, frameProps = {}, selection, linkedHover } = props;
-    const safeData = data || [];
-    const hoverConfig = (0, selectionUtils_1.normalizeLinkedHover)(linkedHover, colorBy ? [typeof colorBy === "string" ? colorBy : ""] : [typeof categoryAccessor === "string" ? categoryAccessor : ""]);
-    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 activeSelectionHook = selection ? { isActive: selectionHook.isActive, predicate: selectionHook.predicate } : null;
-    const colorScale = (0, hooks_1.useColorScale)(safeData, colorBy, colorScheme);
-    const baseSummaryStyle = (0, react_1.useMemo)(() => {
-        return (d) => {
-            const color = colorBy ? (0, colorUtils_1.getColor)(d, colorBy, colorScale) : hooks_1.DEFAULT_COLOR;
-            return { fill: color, stroke: color, fillOpacity: 0.8 };
-        };
-    }, [colorBy, colorScale]);
-    const summaryStyle = (0, react_1.useMemo)(() => (0, selectionUtils_1.wrapStyleWithSelection)(baseSummaryStyle, activeSelectionHook, selection), [baseSummaryStyle, 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]);
-    const customHoverBehavior = (0, react_1.useCallback)((d) => { if (linkedHover)
-        linkedHoverHook.onHover(d); }, [linkedHover, linkedHoverHook]);
-    const defaultTooltipContent = (0, react_1.useMemo)(() => {
-        return (d) => {
-            const datum = d.data || d;
-            const stats = datum.stats || {};
-            const category = datum.category || d.category || "";
-            return (React.createElement("div", { className: "semiotic-tooltip", style: Tooltip_1.defaultTooltipStyle },
-                React.createElement("div", { style: { fontWeight: "bold", marginBottom: "4px" } }, String(category)),
-                stats.median != null && (React.createElement(React.Fragment, null,
-                    React.createElement("div", null,
-                        "Median: ",
-                        stats.median.toLocaleString()),
-                    React.createElement("div", null,
-                        "Q1: ",
-                        stats.q1.toLocaleString()),
-                    React.createElement("div", null,
-                        "Q3: ",
-                        stats.q3.toLocaleString()),
-                    React.createElement("div", null,
-                        "Min: ",
-                        stats.min.toLocaleString()),
-                    React.createElement("div", null,
-                        "Max: ",
-                        stats.max.toLocaleString())))));
-        };
-    }, []);
-    const error = (0, validateChartData_1.validateArrayData)({
-        componentName: "BoxPlot", data: safeData,
-        accessors: { categoryAccessor, valueAccessor },
-    });
-    if (error)
-        return React.createElement(ChartError_1.default, { componentName: "BoxPlot", message: error, width: width, height: height });
-    const streamProps = {
-        chartType: "boxplot",
-        data: safeData,
-        oAccessor: categoryAccessor,
-        rAccessor: valueAccessor,
-        projection: orientation === "horizontal" ? "horizontal" : "vertical",
-        summaryStyle,
-        showOutliers,
-        size: [width, height],
-        margin,
-        barPadding: categoryPadding,
-        enableHover,
-        showAxes: true,
-        oLabel: categoryLabel,
-        rLabel: valueLabel,
-        rFormat: valueFormat,
-        showGrid,
-        ...(legend && { legend }),
-        ...(title && { title }),
-        ...(className && { className }),
-        tooltipContent: (tooltip ? (0, Tooltip_1.normalizeTooltip)(tooltip) : defaultTooltipContent),
-        ...(linkedHover && { customHoverBehavior }),
-        ...frameProps
-    };
-    return React.createElement(StreamOrdinalFrame_1.default, { ...streamProps });
-}
-BoxPlot.displayName = "BoxPlot";

package/ai/dist/src/components/charts/ordinal/DonutChart.js

@@ -1,130 +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.DonutChart = DonutChart;
-const React = __importStar(require("react"));
-const react_1 = require("react");
-const StreamOrdinalFrame_1 = __importDefault(require("../../stream/StreamOrdinalFrame"));
-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");
-const selectionUtils_1 = require("../shared/selectionUtils");
-const useSelection_1 = require("../../store/useSelection");
-const useSelection_2 = require("../../store/useSelection");
-function DonutChart(props) {
-    const { data, width = 400, height = 400, margin: userMargin, className, title, categoryAccessor = "category", valueAccessor = "value", innerRadius = 60, centerContent, colorBy, colorScheme = "category10", startAngle = 0, slicePadding = 2, enableHover = true, showLegend = true, tooltip, frameProps = {}, selection, linkedHover } = props;
-    const safeData = data || [];
-    const actualColorBy = colorBy || categoryAccessor;
-    const hoverConfig = (0, selectionUtils_1.normalizeLinkedHover)(linkedHover, actualColorBy ? [typeof actualColorBy === "string" ? actualColorBy : ""] : []);
-    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 activeSelectionHook = selection ? { isActive: selectionHook.isActive, predicate: selectionHook.predicate } : null;
-    const colorScale = (0, hooks_1.useColorScale)(safeData, actualColorBy, colorScheme);
-    const basePieceStyle = (0, react_1.useMemo)(() => {
-        return (d) => {
-            if (actualColorBy)
-                return { fill: (0, colorUtils_1.getColor)(d, actualColorBy, colorScale) };
-            return { fill: hooks_1.DEFAULT_COLOR };
-        };
-    }, [actualColorBy, colorScale]);
-    const pieceStyle = (0, react_1.useMemo)(() => (0, selectionUtils_1.wrapStyleWithSelection)(basePieceStyle, activeSelectionHook, selection), [basePieceStyle, activeSelectionHook, selection]);
-    const legend = (0, react_1.useMemo)(() => {
-        if (!showLegend)
-            return undefined;
-        return (0, legendUtils_1.createLegend)({ data: safeData, colorBy: actualColorBy, colorScale, getColor: colorUtils_1.getColor });
-    }, [showLegend, safeData, actualColorBy, colorScale]);
-    const margin = (0, react_1.useMemo)(() => {
-        const finalMargin = { top: 20, bottom: 20, left: 20, right: 20, ...userMargin };
-        if (legend && finalMargin.right < 120)
-            finalMargin.right = 120;
-        return finalMargin;
-    }, [userMargin, legend]);
-    const customHoverBehavior = (0, react_1.useCallback)((d) => { if (linkedHover)
-        linkedHoverHook.onHover(d); }, [linkedHover, linkedHoverHook]);
-    const defaultTooltipContent = (0, react_1.useMemo)(() => {
-        const showColorField = colorBy && colorBy !== categoryAccessor;
-        return (d) => {
-            const datum = d.data?.[0] || d.data || d;
-            const cat = typeof categoryAccessor === "function" ? categoryAccessor(datum) : datum[categoryAccessor];
-            const val = typeof valueAccessor === "function" ? valueAccessor(datum) : datum[valueAccessor];
-            const colorVal = showColorField
-                ? (typeof colorBy === "function" ? colorBy(datum) : datum[colorBy])
-                : null;
-            return (React.createElement("div", { className: "semiotic-tooltip", style: Tooltip_1.defaultTooltipStyle },
-                React.createElement("div", { style: { fontWeight: "bold" } }, String(cat)),
-                React.createElement("div", { style: { marginTop: "4px" } }, typeof val === "number" ? val.toLocaleString() : String(val)),
-                colorVal != null && (React.createElement("div", { style: { marginTop: "2px", opacity: 0.8 } },
-                    typeof colorBy === "string" ? colorBy : "group",
-                    ": ",
-                    String(colorVal)))));
-        };
-    }, [categoryAccessor, valueAccessor, colorBy]);
-    const error = (0, validateChartData_1.validateArrayData)({
-        componentName: "DonutChart", data: safeData,
-        accessors: { categoryAccessor, valueAccessor },
-    });
-    if (error)
-        return React.createElement(ChartError_1.default, { componentName: "DonutChart", message: error, width: width, height: height });
-    const streamProps = {
-        chartType: "donut",
-        data: safeData,
-        oAccessor: categoryAccessor,
-        rAccessor: valueAccessor,
-        projection: "radial",
-        pieceStyle,
-        innerRadius,
-        startAngle,
-        centerContent,
-        size: [width, height],
-        margin,
-        enableHover,
-        showAxes: false,
-        ...(legend && { legend }),
-        ...(title && { title }),
-        ...(className && { className }),
-        tooltipContent: (tooltip ? (0, Tooltip_1.normalizeTooltip)(tooltip) : defaultTooltipContent),
-        ...(linkedHover && { customHoverBehavior }),
-        ...frameProps
-    };
-    return React.createElement(StreamOrdinalFrame_1.default, { ...streamProps });
-}
-DonutChart.displayName = "DonutChart";

package/ai/dist/src/components/charts/ordinal/DotPlot.js

@@ -1,126 +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.DotPlot = DotPlot;
-const React = __importStar(require("react"));
-const react_1 = require("react");
-const StreamOrdinalFrame_1 = __importDefault(require("../../stream/StreamOrdinalFrame"));
-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");
-const selectionUtils_1 = require("../shared/selectionUtils");
-const useSelection_1 = require("../../store/useSelection");
-const useSelection_2 = require("../../store/useSelection");
-function DotPlot(props) {
-    const { data, width = 600, height = 400, margin: userMargin, className, title, categoryAccessor = "category", valueAccessor = "value", orientation = "horizontal", categoryLabel, valueLabel, valueFormat, colorBy, colorScheme = "category10", sort = true, dotRadius = 5, categoryPadding = 10, enableHover = true, showGrid = true, showLegend, tooltip, frameProps = {}, selection, linkedHover } = props;
-    const safeData = data || [];
-    const hoverConfig = (0, selectionUtils_1.normalizeLinkedHover)(linkedHover, colorBy ? [typeof colorBy === "string" ? colorBy : ""] : [typeof categoryAccessor === "string" ? categoryAccessor : ""]);
-    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 activeSelectionHook = selection ? { isActive: selectionHook.isActive, predicate: selectionHook.predicate } : null;
-    const sortedData = (0, hooks_1.useSortedData)(safeData, sort, valueAccessor);
-    const colorScale = (0, hooks_1.useColorScale)(safeData, colorBy, colorScheme);
-    const basePieceStyle = (0, react_1.useMemo)(() => {
-        return (d) => {
-            const baseStyle = { r: dotRadius, fillOpacity: 0.8 };
-            baseStyle.fill = colorBy ? (0, colorUtils_1.getColor)(d, colorBy, colorScale) : hooks_1.DEFAULT_COLOR;
-            return baseStyle;
-        };
-    }, [colorBy, colorScale, dotRadius]);
-    const pieceStyle = (0, react_1.useMemo)(() => (0, selectionUtils_1.wrapStyleWithSelection)(basePieceStyle, activeSelectionHook, selection), [basePieceStyle, 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: sortedData, colorBy, colorScale, getColor: colorUtils_1.getColor });
-    }, [shouldShowLegend, colorBy, sortedData, colorScale]);
-    const margin = (0, react_1.useMemo)(() => {
-        const finalMargin = { top: 50, bottom: 60, left: 120, right: 40, ...userMargin };
-        if (legend && finalMargin.right < 120)
-            finalMargin.right = 120;
-        return finalMargin;
-    }, [userMargin, legend]);
-    const customHoverBehavior = (0, react_1.useCallback)((d) => { if (linkedHover)
-        linkedHoverHook.onHover(d); }, [linkedHover, linkedHoverHook]);
-    const defaultTooltipContent = (0, react_1.useMemo)(() => {
-        return (d) => {
-            const datum = d.data || d;
-            const cat = typeof categoryAccessor === "function" ? categoryAccessor(datum) : datum[categoryAccessor];
-            const val = typeof valueAccessor === "function" ? valueAccessor(datum) : datum[valueAccessor];
-            return (React.createElement("div", { className: "semiotic-tooltip", style: Tooltip_1.defaultTooltipStyle },
-                React.createElement("div", { style: { fontWeight: "bold" } }, String(cat)),
-                React.createElement("div", { style: { marginTop: "4px" } }, typeof val === "number" ? val.toLocaleString() : String(val))));
-        };
-    }, [categoryAccessor, valueAccessor]);
-    const error = (0, validateChartData_1.validateArrayData)({
-        componentName: "DotPlot", data: safeData,
-        accessors: { categoryAccessor, valueAccessor },
-    });
-    if (error)
-        return React.createElement(ChartError_1.default, { componentName: "DotPlot", message: error, width: width, height: height });
-    const streamProps = {
-        chartType: "point",
-        data: sortedData,
-        oAccessor: categoryAccessor,
-        rAccessor: valueAccessor,
-        projection: orientation === "horizontal" ? "horizontal" : "vertical",
-        pieceStyle,
-        size: [width, height],
-        margin,
-        barPadding: categoryPadding,
-        enableHover,
-        showAxes: true,
-        oLabel: categoryLabel,
-        rLabel: valueLabel,
-        rFormat: valueFormat,
-        showGrid,
-        oSort: sort,
-        ...(legend && { legend }),
-        ...(title && { title }),
-        ...(className && { className }),
-        tooltipContent: (tooltip ? (0, Tooltip_1.normalizeTooltip)(tooltip) : defaultTooltipContent),
-        ...(linkedHover && { customHoverBehavior }),
-        ...frameProps
-    };
-    return React.createElement(StreamOrdinalFrame_1.default, { ...streamProps });
-}
-DotPlot.displayName = "DotPlot";