semiotic 2.0.3 → 3.0.0-beta.2

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

@@ -0,0 +1,129 @@
+"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.GroupedBarChart = GroupedBarChart;
+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 GroupedBarChart(props) {
+    const { data, width = 600, height = 400, margin: userMargin, className, title, categoryAccessor = "category", groupBy, valueAccessor = "value", orientation = "vertical", categoryLabel, valueLabel, valueFormat, colorBy, colorScheme = "category10", barPadding = 5, enableHover = true, showGrid = false, showLegend = true, tooltip, frameProps = {}, selection, linkedHover } = props;
+    const safeData = data || [];
+    const actualColorBy = colorBy || groupBy;
+    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: 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)(() => {
+        const getGroup = (0, hooks_1.resolveAccessor)(groupBy);
+        const getCat = (0, hooks_1.resolveAccessor)(categoryAccessor);
+        const getVal = (0, hooks_1.resolveAccessor)(valueAccessor);
+        return (d) => {
+            const datum = d.data || d;
+            return (React.createElement("div", { className: "semiotic-tooltip", style: Tooltip_1.defaultTooltipStyle },
+                React.createElement("div", { style: { fontWeight: "bold" } }, String(getGroup(datum))),
+                React.createElement("div", { style: { marginTop: "4px" } },
+                    String(getCat(datum)),
+                    " \u00B7 ",
+                    Number(getVal(datum)).toLocaleString())));
+        };
+    }, [groupBy, categoryAccessor, valueAccessor]);
+    const error = (0, validateChartData_1.validateArrayData)({
+        componentName: "GroupedBarChart", data: safeData,
+        accessors: { categoryAccessor, valueAccessor }, requiredProps: { groupBy },
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "GroupedBarChart", message: error, width: width, height: height });
+    const streamProps = {
+        chartType: "clusterbar",
+        data: safeData,
+        oAccessor: categoryAccessor,
+        rAccessor: valueAccessor,
+        groupBy,
+        projection: orientation === "horizontal" ? "horizontal" : "vertical",
+        pieceStyle,
+        size: [width, height],
+        margin,
+        barPadding,
+        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 });
+}
+GroupedBarChart.displayName = "GroupedBarChart";

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

@@ -0,0 +1,132 @@
+"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.Histogram = Histogram;
+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 Histogram(props) {
+    const { data, width = 600, height = 400, margin: userMargin, className, title, categoryAccessor = "category", valueAccessor = "value", bins = 25, relative = false, categoryLabel, valueLabel, valueFormat, colorBy, colorScheme = "category10", 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 category = datum.category || d.category || "";
+            const count = datum.count;
+            const range = datum.range;
+            return (React.createElement("div", { className: "semiotic-tooltip", style: Tooltip_1.defaultTooltipStyle },
+                category && React.createElement("div", { style: { fontWeight: "bold" } }, String(category)),
+                count != null && React.createElement("div", null,
+                    "Count: ",
+                    count),
+                range && range.length === 2 && (React.createElement("div", { style: { opacity: 0.8 } },
+                    Number(range[0]).toFixed(1),
+                    " \u2013 ",
+                    Number(range[1]).toFixed(1)))));
+        };
+    }, []);
+    const error = (0, validateChartData_1.validateArrayData)({
+        componentName: "Histogram", data: safeData,
+        accessors: { categoryAccessor, valueAccessor },
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "Histogram", message: error, width: width, height: height });
+    const streamProps = {
+        chartType: "histogram",
+        data: safeData,
+        oAccessor: categoryAccessor,
+        rAccessor: valueAccessor,
+        projection: "horizontal",
+        summaryStyle,
+        bins,
+        normalize: relative,
+        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 });
+}
+Histogram.displayName = "Histogram";

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

@@ -0,0 +1,128 @@
+"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.PieChart = PieChart;
+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 PieChart(props) {
+    const { data, width = 400, height = 400, margin: userMargin, className, title, categoryAccessor = "category", valueAccessor = "value", 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: "PieChart", data: safeData,
+        accessors: { categoryAccessor, valueAccessor },
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "PieChart", message: error, width: width, height: height });
+    const streamProps = {
+        chartType: "pie",
+        data: safeData,
+        oAccessor: categoryAccessor,
+        rAccessor: valueAccessor,
+        projection: "radial",
+        pieceStyle,
+        startAngle,
+        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 });
+}
+PieChart.displayName = "PieChart";

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

@@ -0,0 +1,130 @@
+"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.RidgelinePlot = RidgelinePlot;
+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");
+/**
+ * RidgelinePlot - Visualize distributions as overlapping one-sided density curves.
+ *
+ * Each category shows its value distribution as a filled area extending from a
+ * baseline. The amplitude prop controls overlap between rows.
+ */
+function RidgelinePlot(props) {
+    const { data, width = 600, height = 400, margin: userMargin, className, title, categoryAccessor = "category", valueAccessor = "value", orientation = "horizontal", bins = 20, amplitude = 1.5, categoryLabel, valueLabel, valueFormat, colorBy, colorScheme = "category10", categoryPadding = 5, 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.5 };
+        };
+    }, [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: orientation === "horizontal" ? 120 : 70, right: 40, ...userMargin };
+        if (legend && finalMargin.right < 120)
+            finalMargin.right = 120;
+        return finalMargin;
+    }, [userMargin, legend, orientation]);
+    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 category = datum.category || d.category || "";
+            return (React.createElement("div", { className: "semiotic-tooltip", style: Tooltip_1.defaultTooltipStyle },
+                React.createElement("div", { style: { fontWeight: "bold" } }, String(category))));
+        };
+    }, []);
+    const error = (0, validateChartData_1.validateArrayData)({
+        componentName: "RidgelinePlot", data: safeData,
+        accessors: { categoryAccessor, valueAccessor },
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "RidgelinePlot", message: error, width: width, height: height });
+    const streamProps = {
+        chartType: "ridgeline",
+        data: safeData,
+        oAccessor: categoryAccessor,
+        rAccessor: valueAccessor,
+        projection: orientation === "horizontal" ? "horizontal" : "vertical",
+        summaryStyle,
+        bins,
+        size: [width, height],
+        margin,
+        barPadding: categoryPadding,
+        enableHover,
+        showAxes: true,
+        oLabel: categoryLabel,
+        rLabel: valueLabel,
+        rFormat: valueFormat,
+        showGrid,
+        oSort: false,
+        ...(legend && { legend }),
+        ...(title && { title }),
+        ...(className && { className }),
+        tooltipContent: (tooltip ? (0, Tooltip_1.normalizeTooltip)(tooltip) : defaultTooltipContent),
+        ...(linkedHover && { customHoverBehavior }),
+        ...frameProps
+    };
+    streamProps.amplitude = amplitude;
+    return React.createElement(StreamOrdinalFrame_1.default, { ...streamProps });
+}
+RidgelinePlot.displayName = "RidgelinePlot";

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

@@ -0,0 +1,130 @@
+"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.StackedBarChart = StackedBarChart;
+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 StackedBarChart(props) {
+    const { data, width = 600, height = 400, margin: userMargin, className, title, categoryAccessor = "category", stackBy, valueAccessor = "value", orientation = "vertical", categoryLabel, valueLabel, valueFormat, colorBy, colorScheme = "category10", normalize = false, barPadding = 5, enableHover = true, showGrid = false, showLegend = true, tooltip, frameProps = {}, selection, linkedHover } = props;
+    const safeData = data || [];
+    const actualColorBy = colorBy || stackBy;
+    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: 50, bottom: 60, left: 70, right: 120, ...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 getStack = (0, hooks_1.resolveAccessor)(stackBy);
+        const getCat = (0, hooks_1.resolveAccessor)(categoryAccessor);
+        const getVal = (0, hooks_1.resolveAccessor)(valueAccessor);
+        return (d) => {
+            const datum = d.data || d;
+            return (React.createElement("div", { className: "semiotic-tooltip", style: Tooltip_1.defaultTooltipStyle },
+                React.createElement("div", { style: { fontWeight: "bold" } }, String(getStack(datum))),
+                React.createElement("div", { style: { marginTop: "4px" } },
+                    String(getCat(datum)),
+                    " \u00B7 ",
+                    Number(getVal(datum)).toLocaleString())));
+        };
+    }, [stackBy, categoryAccessor, valueAccessor]);
+    const error = (0, validateChartData_1.validateArrayData)({
+        componentName: "StackedBarChart", data: safeData,
+        accessors: { categoryAccessor, valueAccessor }, requiredProps: { stackBy },
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "StackedBarChart", message: error, width: width, height: height });
+    const streamProps = {
+        chartType: "bar",
+        data: safeData,
+        oAccessor: categoryAccessor,
+        rAccessor: valueAccessor,
+        stackBy,
+        normalize,
+        projection: orientation === "horizontal" ? "horizontal" : "vertical",
+        pieceStyle,
+        size: [width, height],
+        margin,
+        barPadding,
+        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 });
+}
+StackedBarChart.displayName = "StackedBarChart";