semiotic 2.0.2 → 3.0.0-beta.1

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

@@ -0,0 +1,155 @@
+"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 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");
+/**
+ * PieChart - Visualize proportions as slices of a circle.
+ *
+ * A simplified wrapper around OrdinalFrame with radial projection.
+ *
+ * @example
+ * ```tsx
+ * <PieChart
+ *   data={[
+ *     {category: 'A', value: 30},
+ *     {category: 'B', value: 50},
+ *     {category: 'C', value: 20}
+ *   ]}
+ * />
+ * ```
+ */
+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 = {} } = props;
+    const safeData = data || [];
+    // Default colorBy to categoryAccessor for pie charts
+    const actualColorBy = colorBy || categoryAccessor;
+    // Create color scale
+    const colorScale = (0, hooks_1.useColorScale)(safeData, actualColorBy, colorScheme);
+    // Piece style function
+    const pieceStyle = (0, react_1.useMemo)(() => {
+        return (d) => {
+            const baseStyle = {};
+            if (actualColorBy) {
+                baseStyle.fill = (0, colorUtils_1.getColor)(d, actualColorBy, colorScale);
+            }
+            else {
+                baseStyle.fill = hooks_1.DEFAULT_COLOR;
+            }
+            return baseStyle;
+        };
+    }, [actualColorBy, colorScale]);
+    // Build legend if needed
+    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]);
+    // Adjust margin for legend if present
+    const margin = (0, react_1.useMemo)(() => {
+        const defaultMargin = { top: 20, bottom: 20, left: 20, right: 20 };
+        const finalMargin = { ...defaultMargin, ...userMargin };
+        if (legend && finalMargin.right < 120) {
+            finalMargin.right = 120;
+        }
+        return finalMargin;
+    }, [userMargin, legend]);
+    // Build type config
+    const typeConfig = (0, react_1.useMemo)(() => {
+        const config = { type: "bar" };
+        if (startAngle) {
+            config.offsetAngle = startAngle;
+        }
+        return config;
+    }, [startAngle]);
+    // Default tooltip
+    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: "PieChart",
+        data: safeData,
+        accessors: {
+            categoryAccessor,
+            valueAccessor,
+        },
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "PieChart", message: error, width: width, height: height });
+    // Build OrdinalFrame props
+    const ordinalFrameProps = {
+        size: [width, height],
+        data: safeData,
+        oAccessor: categoryAccessor,
+        rAccessor: valueAccessor,
+        type: typeConfig,
+        projection: "radial",
+        style: pieceStyle,
+        hoverAnnotation: enableHover,
+        margin,
+        oPadding: slicePadding,
+        ...(legend && { legend }),
+        ...(className && { className }),
+        ...(title && { title }),
+        tooltipContent: (tooltip ? (0, Tooltip_1.normalizeTooltip)(tooltip) : defaultTooltipContent),
+        transition: true,
+        ...frameProps
+    };
+    return React.createElement(OrdinalFrame_1.default, { ...ordinalFrameProps });
+}

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

@@ -0,0 +1,213 @@
+"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 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");
+/**
+ * StackedBarChart - Visualize part-to-whole relationships with stacked bars.
+ *
+ * A simplified wrapper around OrdinalFrame for creating stacked bar charts.
+ *
+ * @example
+ * ```tsx
+ * <StackedBarChart
+ *   data={[
+ *     {category: 'Q1', product: 'A', value: 100},
+ *     {category: 'Q1', product: 'B', value: 150},
+ *     {category: 'Q2', product: 'A', value: 120},
+ *     {category: 'Q2', product: 'B', value: 180}
+ *   ]}
+ *   stackBy="product"
+ *   categoryLabel="Quarter"
+ *   valueLabel="Sales"
+ * />
+ * ```
+ */
+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 = {} } = props;
+    const safeData = data || [];
+    // Use stackBy as colorBy if not specified
+    const actualColorBy = colorBy || stackBy;
+    // Get unique stack values for legend
+    const stackValues = (0, react_1.useMemo)(() => {
+        const getStackValue = (0, hooks_1.resolveAccessor)(stackBy);
+        return Array.from(new Set(safeData.map(getStackValue)));
+    }, [safeData, stackBy]);
+    // Create color scale
+    const colorScale = (0, hooks_1.useColorScale)(safeData, actualColorBy, colorScheme);
+    // Piece style function
+    const pieceStyle = (0, react_1.useMemo)(() => {
+        return (d) => {
+            const baseStyle = {};
+            // Apply color
+            if (actualColorBy) {
+                baseStyle.fill = (0, colorUtils_1.getColor)(d, actualColorBy, colorScale);
+            }
+            else {
+                baseStyle.fill = hooks_1.DEFAULT_COLOR;
+            }
+            return baseStyle;
+        };
+    }, [actualColorBy, 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]);
+    // Build legend if needed
+    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]);
+    // Adjust margin for legend if present
+    const margin = (0, react_1.useMemo)(() => {
+        const defaultMargin = { top: 50, bottom: 60, left: 70, right: 120 };
+        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)(() => {
+        const getStack = (0, hooks_1.resolveAccessor)(stackBy);
+        const getCat = (0, hooks_1.resolveAccessor)(categoryAccessor);
+        const getVal = (0, hooks_1.resolveAccessor)(valueAccessor);
+        return (d) => {
+            const stackValue = String(getStack(d));
+            const cat = String(getCat(d));
+            const val = Number(getVal(d));
+            const pieces = d.pieces || [];
+            const total = pieces.reduce((sum, p) => sum + (Number(getVal(p)) || 0), 0);
+            const showTotal = pieces.length > 1;
+            return (React.createElement("div", { className: "semiotic-tooltip", style: Tooltip_1.defaultTooltipStyle },
+                React.createElement("div", { style: { fontWeight: "bold" } }, stackValue),
+                React.createElement("div", { style: { marginTop: "4px" } },
+                    cat,
+                    " \u00B7 ",
+                    val.toLocaleString()),
+                showTotal && (React.createElement("div", { style: { marginTop: "2px", opacity: 0.8 } },
+                    "Total: ",
+                    total.toLocaleString()))));
+        };
+    }, [stackBy, categoryAccessor, valueAccessor]);
+    // Validate data (after all hooks)
+    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 });
+    // Build OrdinalFrame props
+    const ordinalFrameProps = {
+        size: [width, height],
+        data: safeData,
+        oAccessor: categoryAccessor,
+        rAccessor: valueAccessor,
+        type: "bar",
+        projection: orientation === "horizontal" ? "horizontal" : "vertical",
+        style: pieceStyle,
+        axes: axes,
+        hoverAnnotation: enableHover,
+        margin,
+        oPadding: barPadding,
+        // Configure stacking
+        pieceIDAccessor: stackBy,
+        ...(normalize && { rExtent: [0, 1] }),
+        ...(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/SwarmPlot.js

@@ -0,0 +1,219 @@
+"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.SwarmPlot = SwarmPlot;
+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");
+/**
+ * SwarmPlot - Visualize distributions with non-overlapping points.
+ *
+ * A simplified wrapper around OrdinalFrame for creating swarm plots (beeswarm plots).
+ *
+ * @example
+ * ```tsx
+ * <SwarmPlot
+ *   data={[
+ *     {category: 'Group A', value: 10},
+ *     {category: 'Group A', value: 12},
+ *     {category: 'Group A', value: 11},
+ *     {category: 'Group B', value: 15},
+ *     {category: 'Group B', value: 14}
+ *   ]}
+ *   categoryLabel="Group"
+ *   valueLabel="Value"
+ * />
+ * ```
+ */
+function SwarmPlot(props) {
+    const { data, width = 600, height = 400, margin: userMargin, className, title, categoryAccessor = "category", valueAccessor = "value", orientation = "vertical", categoryLabel, valueLabel, valueFormat, colorBy, colorScheme = "category10", sizeBy, sizeRange = [3, 8], pointRadius = 4, pointOpacity = 0.7, 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);
+    // Calculate size domain if sizeBy is specified
+    const sizeDomain = (0, react_1.useMemo)(() => {
+        if (!sizeBy)
+            return undefined;
+        const sizes = safeData.map((d) => {
+            if (typeof sizeBy === "function") {
+                return sizeBy(d);
+            }
+            return d[sizeBy];
+        });
+        return [Math.min(...sizes), Math.max(...sizes)];
+    }, [safeData, sizeBy]);
+    // Point style function
+    const pieceStyle = (0, react_1.useMemo)(() => {
+        return (d) => {
+            const baseStyle = {
+                fillOpacity: pointOpacity
+            };
+            // Apply color
+            if (colorBy) {
+                baseStyle.fill = (0, colorUtils_1.getColor)(d, colorBy, colorScale);
+            }
+            else {
+                baseStyle.fill = hooks_1.DEFAULT_COLOR;
+            }
+            // Apply size
+            if (sizeBy) {
+                baseStyle.r = (0, colorUtils_1.getSize)(d, sizeBy, sizeRange, sizeDomain);
+            }
+            else {
+                baseStyle.r = pointRadius;
+            }
+            return baseStyle;
+        };
+    }, [colorBy, colorScale, sizeBy, sizeRange, sizeDomain, pointRadius, pointOpacity]);
+    // 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 function for piece hover
+    const defaultTooltipContent = (0, react_1.useMemo)(() => {
+        const getVal = (0, hooks_1.resolveAccessor)(valueAccessor);
+        const getCat = (0, hooks_1.resolveAccessor)(categoryAccessor);
+        return (d) => {
+            const cat = getCat(d);
+            const val = getVal(d);
+            const pieces = d.pieces || [];
+            const showCount = pieces.length > 1;
+            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)),
+                showCount && (React.createElement("div", { style: { marginTop: "2px", opacity: 0.8 } },
+                    pieces.length,
+                    " points in group"))));
+        };
+    }, [categoryAccessor, valueAccessor]);
+    // Validate data (after all hooks)
+    const error = (0, validateChartData_1.validateArrayData)({
+        componentName: "SwarmPlot",
+        data: safeData,
+        accessors: {
+            categoryAccessor,
+            valueAccessor,
+        },
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "SwarmPlot", message: error, width: width, height: height });
+    // Build OrdinalFrame props
+    const ordinalFrameProps = {
+        size: [width, height],
+        data: safeData,
+        oAccessor: categoryAccessor,
+        rAccessor: valueAccessor,
+        type: "swarm",
+        projection: orientation === "horizontal" ? "horizontal" : "vertical",
+        style: pieceStyle,
+        axes: axes,
+        pieceHoverAnnotation: enableHover,
+        margin,
+        oPadding: categoryPadding,
+        ...(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/realtime/RealtimeBarChart.js

@@ -0,0 +1,91 @@
+"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.RealtimeBarChart = void 0;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const RealtimeFrame_1 = __importDefault(require("../../realtime/RealtimeFrame"));
+/**
+ * RealtimeBarChart - Simplified wrapper for streaming temporal histograms.
+ *
+ * Wraps RealtimeFrame with `chartType="bar"` and exposes bar styling as
+ * top-level props. Supports both simple and stacked (categorical) modes.
+ *
+ * Edge bins that only partially fall within the visible time window are
+ * rendered at proportionally narrower widths (Datadog-style).
+ *
+ * @example
+ * ```tsx
+ * // Simple histogram
+ * <RealtimeBarChart
+ *   ref={ref}
+ *   binSize={20}
+ *   fill="#007bff"
+ *   enableHover
+ * />
+ *
+ * // Stacked by category
+ * <RealtimeBarChart
+ *   ref={ref}
+ *   binSize={25}
+ *   categoryAccessor="category"
+ *   colors={{ errors: "#dc3545", warnings: "#fd7e14", info: "#007bff" }}
+ *   enableHover
+ * />
+ * ```
+ */
+exports.RealtimeBarChart = (0, react_1.forwardRef)(function RealtimeBarChart(props, ref) {
+    const { binSize, size = [500, 300], margin, className, arrowOfTime = "right", windowMode = "sliding", windowSize = 200, data, timeAccessor, valueAccessor, timeExtent, valueExtent, extentPadding, categoryAccessor, colors, fill, stroke, strokeWidth, gap, showAxes = true, background, enableHover, tooltipContent, onHover, annotations, svgAnnotationRules, tickFormatTime, tickFormatValue } = props;
+    const frameRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        push: (point) => frameRef.current?.push(point),
+        pushMany: (points) => frameRef.current?.pushMany(points),
+        clear: () => frameRef.current?.clear(),
+        getData: () => frameRef.current?.getData() ?? []
+    }));
+    const barStyle = {};
+    if (fill != null)
+        barStyle.fill = fill;
+    if (stroke != null)
+        barStyle.stroke = stroke;
+    if (strokeWidth != null)
+        barStyle.strokeWidth = strokeWidth;
+    if (gap != null)
+        barStyle.gap = gap;
+    return (React.createElement(RealtimeFrame_1.default, { ref: frameRef, chartType: "bar", size: size, margin: margin, className: className, arrowOfTime: arrowOfTime, windowMode: windowMode, windowSize: windowSize, data: data, timeAccessor: timeAccessor, valueAccessor: valueAccessor, timeExtent: timeExtent, valueExtent: valueExtent, extentPadding: extentPadding, binSize: binSize, categoryAccessor: categoryAccessor, barColors: colors, barStyle: barStyle, showAxes: showAxes, background: background, hoverAnnotation: enableHover, tooltipContent: tooltipContent, customHoverBehavior: onHover, annotations: annotations, svgAnnotationRules: svgAnnotationRules, tickFormatTime: tickFormatTime, tickFormatValue: tickFormatValue }));
+});