semiotic 2.0.2 → 3.0.0-beta.1

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

@@ -0,0 +1,177 @@
+"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 NetworkFrame_1 = __importDefault(require("../../NetworkFrame"));
+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");
+const hierarchyLayout_1 = require("../../processing/layouts/hierarchyLayout");
+/**
+ * Treemap - Visualize hierarchical data as nested rectangles.
+ *
+ * A simplified wrapper around NetworkFrame with treemap layout.
+ * Each rectangle's area is proportional to its value.
+ *
+ * @example
+ * ```tsx
+ * <Treemap
+ *   data={{
+ *     name: 'root',
+ *     children: [
+ *       {name: 'A', value: 100},
+ *       {name: 'B', value: 200},
+ *       {name: 'C', value: 150}
+ *     ]
+ *   }}
+ *   colorBy="name"
+ * />
+ * ```
+ */
+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, nodeLabel, enableHover = true, tooltip, frameProps = {} } = props;
+    // Flatten hierarchy to get all nodes for color scale
+    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]);
+    // Create color scale
+    const colorScale = (0, react_1.useMemo)(() => {
+        if (colorByDepth) {
+            return (0, colorUtils_1.createColorScale)(allNodes.map((_, idx) => ({ depth: idx % 5 })), "depth", colorScheme);
+        }
+        if (!colorBy || typeof colorBy === "function") {
+            return undefined;
+        }
+        return (0, colorUtils_1.createColorScale)(allNodes, colorBy, colorScheme);
+    }, [allNodes, colorBy, colorByDepth, colorScheme]);
+    // Node style function
+    const nodeStyleFn = (0, react_1.useMemo)(() => {
+        return (d) => {
+            const baseStyle = {
+                stroke: "currentColor",
+                strokeWidth: 1,
+                strokeOpacity: 0.3
+            };
+            if (colorByDepth) {
+                baseStyle.fill = (0, colorUtils_1.getColor)({ depth: d.depth || 0 }, "depth", colorScale);
+            }
+            else if (colorBy) {
+                baseStyle.fill = (0, colorUtils_1.getColor)(d, colorBy, colorScale);
+            }
+            else {
+                baseStyle.fill = hooks_1.DEFAULT_COLOR;
+            }
+            return baseStyle;
+        };
+    }, [colorBy, colorByDepth, colorScale]);
+    // Hierarchy configuration
+    const hierarchyChildren = (0, react_1.useMemo)(() => {
+        if (typeof childrenAccessor === "function") {
+            return childrenAccessor;
+        }
+        return (d) => d[childrenAccessor];
+    }, [childrenAccessor]);
+    const hierarchySum = (0, react_1.useMemo)(() => {
+        if (typeof valueAccessor === "function") {
+            return valueAccessor;
+        }
+        return (d) => d[valueAccessor] || 1;
+    }, [valueAccessor]);
+    // Node label function
+    const nodeLabelFn = (0, react_1.useMemo)(() => {
+        if (!showLabels)
+            return undefined;
+        if (nodeLabel) {
+            if (typeof nodeLabel === "function")
+                return nodeLabel;
+            return (d) => d[nodeLabel];
+        }
+        // Default: use nodeIdAccessor
+        if (typeof nodeIdAccessor === "function")
+            return nodeIdAccessor;
+        return (d) => d[nodeIdAccessor];
+    }, [showLabels, nodeLabel, nodeIdAccessor]);
+    // Validate data (after all hooks)
+    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 });
+    // Build NetworkFrame props
+    const networkFrameProps = {
+        size: [width, height],
+        edges: data,
+        nodeStyle: nodeStyleFn,
+        edgeStyle: () => ({ fill: "none", stroke: "none" }),
+        nodeIDAccessor: nodeIdAccessor,
+        networkType: { type: "treemap" },
+        hoverAnnotation: enableHover,
+        margin,
+        ...(hierarchyChildren && {
+            hierarchyChildren: hierarchyChildren
+        }),
+        ...(hierarchySum && { hierarchySum: hierarchySum }),
+        ...(nodeLabelFn && { nodeLabels: nodeLabelFn }),
+        ...(className && { className }),
+        ...(title && { title }),
+        ...(tooltip && { tooltipContent: (0, Tooltip_1.normalizeTooltip)(tooltip) }),
+        transition: true,
+        ...frameProps,
+        _layoutMap: { treemap: hierarchyLayout_1.hierarchyLayouts.treemap }
+    };
+    return React.createElement(NetworkFrame_1.default, { ...networkFrameProps });
+}

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

@@ -0,0 +1,191 @@
+"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 OrdinalFrame_1 = __importDefault(require("../../OrdinalFrame"));
+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");
+/**
+ * BarChart - Visualize categorical data with bars.
+ *
+ * A simplified wrapper around OrdinalFrame for creating bar charts.
+ *
+ * @example
+ * ```tsx
+ * <BarChart
+ *   data={[
+ *     {category: 'A', value: 10},
+ *     {category: 'B', value: 20},
+ *     {category: 'C', value: 15}
+ *   ]}
+ *   categoryLabel="Category"
+ *   valueLabel="Value"
+ * />
+ * ```
+ */
+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 = {} } = props;
+    const safeData = data || [];
+    // Sort data if requested
+    const sortedData = (0, hooks_1.useSortedData)(safeData, sort, valueAccessor);
+    // Create color scale if colorBy is specified
+    const colorScale = (0, hooks_1.useColorScale)(safeData, colorBy, colorScheme);
+    // Piece style function
+    const pieceStyle = (0, react_1.useMemo)(() => {
+        return (d) => {
+            const baseStyle = {};
+            // Apply color
+            if (colorBy) {
+                baseStyle.fill = (0, colorUtils_1.getColor)(d, colorBy, colorScale);
+            }
+            else {
+                baseStyle.fill = hooks_1.DEFAULT_COLOR;
+            }
+            return baseStyle;
+        };
+    }, [colorBy, colorScale]);
+    // Build axes configuration
+    const axes = (0, react_1.useMemo)(() => {
+        const axesConfig = [];
+        if (orientation === "vertical") {
+            // Vertical bars: category on bottom, value on left
+            axesConfig.push({
+                orient: "left",
+                label: valueLabel,
+                tickFormat: valueFormat,
+                ...(showGrid && { tickLineGenerator: () => null })
+            });
+            if (categoryLabel) {
+                axesConfig.push({
+                    orient: "bottom",
+                    label: categoryLabel
+                });
+            }
+        }
+        else {
+            // Horizontal bars: category on left, value on bottom
+            if (categoryLabel) {
+                axesConfig.push({
+                    orient: "left",
+                    label: categoryLabel
+                });
+            }
+            axesConfig.push({
+                orient: "bottom",
+                label: valueLabel,
+                tickFormat: valueFormat,
+                ...(showGrid && { tickLineGenerator: () => null })
+            });
+        }
+        return axesConfig;
+    }, [orientation, categoryLabel, valueLabel, valueFormat, showGrid]);
+    // Determine if we should show legend
+    const shouldShowLegend = showLegend !== undefined ? showLegend : !!colorBy;
+    // Build legend if needed
+    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]);
+    // Adjust margin for legend if present
+    const margin = (0, react_1.useMemo)(() => {
+        const defaultMargin = { top: 50, bottom: 60, left: 70, right: 40 };
+        const finalMargin = { ...defaultMargin, ...userMargin };
+        // If legend is present and right margin is too small, increase it
+        if (legend && finalMargin.right < 120) {
+            finalMargin.right = 120;
+        }
+        return finalMargin;
+    }, [userMargin, legend]);
+    // Default tooltip function for piece hover
+    const defaultTooltipContent = (0, react_1.useMemo)(() => {
+        return (d) => {
+            const cat = typeof categoryAccessor === "function" ? categoryAccessor(d) : d[categoryAccessor];
+            const val = typeof valueAccessor === "function" ? valueAccessor(d) : d[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]);
+    // 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 });
+    // Build OrdinalFrame props
+    const ordinalFrameProps = {
+        size: [width, height],
+        data: sortedData,
+        oAccessor: categoryAccessor,
+        rAccessor: valueAccessor,
+        type: "bar",
+        projection: orientation === "horizontal" ? "horizontal" : "vertical",
+        style: pieceStyle,
+        axes: axes,
+        hoverAnnotation: enableHover,
+        margin,
+        oPadding: barPadding,
+        ...(legend && { legend }),
+        ...(className && { className }),
+        ...(title && { title }),
+        // Add tooltip support
+        tooltipContent: (tooltip ? (0, Tooltip_1.normalizeTooltip)(tooltip) : defaultTooltipContent),
+        // Allow frameProps to override defaults
+        transition: true,
+        ...frameProps
+    };
+    return React.createElement(OrdinalFrame_1.default, { ...ordinalFrameProps });
+}

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

@@ -0,0 +1,235 @@
+"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 OrdinalFrame_1 = __importDefault(require("../../OrdinalFrame"));
+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");
+/**
+ * BoxPlot - Visualize statistical distributions with box-and-whisker plots.
+ *
+ * A simplified wrapper around OrdinalFrame for creating box plots.
+ *
+ * @example
+ * ```tsx
+ * <BoxPlot
+ *   data={[
+ *     {category: 'Group A', value: 10},
+ *     {category: 'Group A', value: 12},
+ *     {category: 'Group A', value: 15},
+ *     {category: 'Group A', value: 18},
+ *     {category: 'Group B', value: 20},
+ *     {category: 'Group B', value: 22}
+ *   ]}
+ *   categoryLabel="Group"
+ *   valueLabel="Value"
+ * />
+ * ```
+ */
+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 = {} } = props;
+    const safeData = data || [];
+    // Create color scale if colorBy is specified
+    const colorScale = (0, hooks_1.useColorScale)(safeData, colorBy, colorScheme);
+    // Summary style function for boxes
+    const summaryStyle = (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]);
+    // Point style function for outliers
+    const pointStyle = (0, react_1.useMemo)(() => {
+        if (!showOutliers)
+            return undefined;
+        return (d) => {
+            const baseStyle = {
+                r: outlierRadius,
+                fillOpacity: 0.6
+            };
+            // Apply color (try to match box color)
+            if (colorBy) {
+                baseStyle.fill = (0, colorUtils_1.getColor)(d, colorBy, colorScale);
+            }
+            else {
+                baseStyle.fill = hooks_1.DEFAULT_COLOR;
+            }
+            return baseStyle;
+        };
+    }, [showOutliers, outlierRadius, colorBy, colorScale]);
+    // Build axes configuration
+    const axes = (0, react_1.useMemo)(() => {
+        const axesConfig = [];
+        if (orientation === "vertical") {
+            // Vertical: category on bottom, value on left
+            axesConfig.push({
+                orient: "left",
+                label: valueLabel,
+                tickFormat: valueFormat,
+                ...(showGrid && { tickLineGenerator: () => null })
+            });
+            if (categoryLabel) {
+                axesConfig.push({
+                    orient: "bottom",
+                    label: categoryLabel
+                });
+            }
+        }
+        else {
+            // Horizontal: category on left, value on bottom
+            if (categoryLabel) {
+                axesConfig.push({
+                    orient: "left",
+                    label: categoryLabel
+                });
+            }
+            axesConfig.push({
+                orient: "bottom",
+                label: valueLabel,
+                tickFormat: valueFormat,
+                ...(showGrid && { tickLineGenerator: () => null })
+            });
+        }
+        return axesConfig;
+    }, [orientation, categoryLabel, valueLabel, valueFormat, showGrid]);
+    // Determine if we should show legend
+    const shouldShowLegend = showLegend !== undefined ? showLegend : !!colorBy;
+    // Build legend if needed
+    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]);
+    // Adjust margin for legend if present
+    const margin = (0, react_1.useMemo)(() => {
+        const defaultMargin = { top: 50, bottom: 60, left: 70, right: 40 };
+        const finalMargin = { ...defaultMargin, ...userMargin };
+        // If legend is present and right margin is too small, increase it
+        if (legend && finalMargin.right < 120) {
+            finalMargin.right = 120;
+        }
+        return finalMargin;
+    }, [userMargin, legend]);
+    // Default tooltip for summary hover (boxplot quartile points)
+    const defaultTooltipContent = (0, react_1.useMemo)(() => {
+        const getVal = (0, hooks_1.resolveAccessor)(valueAccessor);
+        return (d) => {
+            // d has: label, key, summaryPieceName, value, column, pieces
+            const pieces = d.pieces || [];
+            const values = pieces.map((p) => Number(getVal(p))).filter((v) => !isNaN(v)).sort((a, b) => a - b);
+            const n = values.length;
+            const fmt = (v) => typeof v === "number" ? v.toLocaleString() : String(v ?? "");
+            // Compute quartiles from the raw data
+            let stats = [];
+            if (n >= 2) {
+                const q = (p) => {
+                    const i = p * (n - 1);
+                    const lo = Math.floor(i);
+                    const hi = Math.ceil(i);
+                    return values[lo] + (values[hi] - values[lo]) * (i - lo);
+                };
+                stats = [
+                    { label: "Max", value: fmt(values[n - 1]), active: d.summaryPieceName === "max" },
+                    { label: "Third Quartile", value: fmt(q(0.75)), active: d.summaryPieceName === "q3area" },
+                    { label: "Median", value: fmt(q(0.5)), active: d.summaryPieceName === "median" },
+                    { label: "First Quartile", value: fmt(q(0.25)), active: d.summaryPieceName === "q1area" },
+                    { label: "Min", value: fmt(values[0]), active: d.summaryPieceName === "min" },
+                ];
+            }
+            return (React.createElement("div", { className: "semiotic-tooltip", style: Tooltip_1.defaultTooltipStyle },
+                React.createElement("div", { style: { fontWeight: "bold", marginBottom: "4px" } }, String(d.key)),
+                stats.map(s => (React.createElement("div", { key: s.label, style: { display: "flex", justifyContent: "space-between", gap: "12px", fontWeight: s.active ? "bold" : "normal" } },
+                    React.createElement("span", null, s.label),
+                    React.createElement("span", null, s.value)))),
+                n > 0 && (React.createElement("div", { style: { marginTop: "4px", opacity: 0.6, fontSize: "0.9em" } },
+                    "n=",
+                    n))));
+        };
+    }, [valueAccessor]);
+    // Validate data (after all hooks)
+    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 });
+    // Build OrdinalFrame props
+    const ordinalFrameProps = {
+        size: [width, height],
+        data: safeData,
+        oAccessor: categoryAccessor,
+        rAccessor: valueAccessor,
+        summaryType: { type: "boxplot", outliers: showOutliers },
+        summaryStyle,
+        projection: orientation === "horizontal" ? "horizontal" : "vertical",
+        axes: axes,
+        summaryHoverAnnotation: enableHover,
+        margin,
+        oPadding: categoryPadding,
+        ...(pointStyle && { pointStyle }),
+        ...(legend && { legend }),
+        ...(className && { className }),
+        ...(title && { title }),
+        // Add tooltip support
+        tooltipContent: (tooltip ? (0, Tooltip_1.normalizeTooltip)(tooltip) : defaultTooltipContent),
+        // Allow frameProps to override defaults
+        transition: true,
+        ...frameProps
+    };
+    return React.createElement(OrdinalFrame_1.default, { ...ordinalFrameProps });
+}