semiotic 2.0.3 → 3.0.0-beta.2

package/ai/dist/src/components/charts/realtime/RealtimeSwarmChart.js

@@ -0,0 +1,105 @@
+"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.RealtimeSwarmChart = void 0;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const StreamXYFrame_1 = __importDefault(require("../../stream/StreamXYFrame"));
+const selectionUtils_1 = require("../shared/selectionUtils");
+const useSelection_1 = require("../../store/useSelection");
+/**
+ * RealtimeSwarmChart - Simplified wrapper for streaming dot/swarm charts.
+ *
+ * Wraps StreamXYFrame with `chartType="swarm"` and `runtimeMode="streaming"`,
+ * exposing dot styling as top-level props. Each data point renders as an individual
+ * dot at its (time, value) coordinates.
+ *
+ * Supports threshold coloring via annotations to recolor dots that cross
+ * value boundaries.
+ *
+ * @example
+ * ```tsx
+ * <RealtimeSwarmChart
+ *   ref={ref}
+ *   radius={4}
+ *   opacity={0.8}
+ *   categoryAccessor="sensor"
+ *   colors={{ sensor1: "#007bff", sensor2: "#28a745" }}
+ * />
+ * ```
+ */
+exports.RealtimeSwarmChart = (0, react_1.forwardRef)(function RealtimeSwarmChart(props, ref) {
+    const { size, width, height, margin, className, arrowOfTime = "right", windowMode = "sliding", windowSize = 200, data, timeAccessor, valueAccessor, timeExtent, valueExtent, extentPadding, categoryAccessor, colors, radius, fill, opacity, stroke, strokeWidth, showAxes = true, background, enableHover, tooltipContent, tooltip, onHover, annotations, svgAnnotationRules, tickFormatTime, tickFormatValue, linkedHover } = props;
+    const resolvedSize = width != null && height != null
+        ? [width, height]
+        : size || [500, 300];
+    const resolvedTooltip = tooltipContent ?? tooltip;
+    const frameRef = (0, react_1.useRef)(null);
+    // ── Linked hover hooks (always called, conditional logic inside) ──
+    const hoverConfig = (0, selectionUtils_1.normalizeLinkedHover)(linkedHover);
+    const linkedHoverHook = (0, useSelection_1.useLinkedHover)({
+        name: hoverConfig?.name || "hover",
+        fields: hoverConfig?.fields || []
+    });
+    const combinedHoverBehavior = (0, react_1.useCallback)((d) => {
+        if (onHover)
+            onHover(d);
+        if (linkedHover) {
+            linkedHoverHook.onHover(d ? (d.data || d) : null);
+        }
+    }, [onHover, linkedHover, linkedHoverHook]);
+    (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 swarmStyle = {};
+    if (radius != null)
+        swarmStyle.radius = radius;
+    if (fill != null)
+        swarmStyle.fill = fill;
+    if (opacity != null)
+        swarmStyle.opacity = opacity;
+    if (stroke != null)
+        swarmStyle.stroke = stroke;
+    if (strokeWidth != null)
+        swarmStyle.strokeWidth = strokeWidth;
+    return (React.createElement(StreamXYFrame_1.default, { ref: frameRef, chartType: "swarm", runtimeMode: "streaming", size: resolvedSize, margin: margin, className: className, arrowOfTime: arrowOfTime, windowMode: windowMode, windowSize: windowSize, data: data, timeAccessor: timeAccessor, valueAccessor: valueAccessor, xExtent: timeExtent, yExtent: valueExtent, extentPadding: extentPadding, categoryAccessor: categoryAccessor, barColors: colors, swarmStyle: swarmStyle, showAxes: showAxes, background: background, hoverAnnotation: enableHover, tooltipContent: resolvedTooltip, customHoverBehavior: combinedHoverBehavior, annotations: annotations, svgAnnotationRules: svgAnnotationRules, tickFormatTime: tickFormatTime, tickFormatValue: tickFormatValue }));
+});
+exports.RealtimeSwarmChart.displayName = "RealtimeSwarmChart";

package/ai/dist/src/components/charts/realtime/RealtimeWaterfallChart.js

@@ -0,0 +1,106 @@
+"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.RealtimeWaterfallChart = void 0;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const StreamXYFrame_1 = __importDefault(require("../../stream/StreamXYFrame"));
+const selectionUtils_1 = require("../shared/selectionUtils");
+const useSelection_1 = require("../../store/useSelection");
+/**
+ * RealtimeWaterfallChart - Simplified wrapper for streaming waterfall charts.
+ *
+ * Wraps StreamXYFrame with `chartType="waterfall"` and `runtimeMode="streaming"`,
+ * exposing waterfall styling as top-level props. Visualizes cumulative deltas as
+ * connected bars rising and falling from a running baseline.
+ *
+ * @example
+ * ```tsx
+ * <RealtimeWaterfallChart
+ *   ref={ref}
+ *   positiveColor="#28a745"
+ *   negativeColor="#dc3545"
+ *   connectorStroke="#999"
+ *   windowSize={300}
+ * />
+ * ```
+ */
+exports.RealtimeWaterfallChart = (0, react_1.forwardRef)(function RealtimeWaterfallChart(props, ref) {
+    const { size, width, height, margin, className, arrowOfTime = "right", windowMode = "sliding", windowSize = 200, data, timeAccessor, valueAccessor, timeExtent, valueExtent, extentPadding, positiveColor, negativeColor, connectorStroke, connectorWidth, gap, stroke, strokeWidth, showAxes = true, background, enableHover, tooltipContent, tooltip, onHover, annotations, svgAnnotationRules, tickFormatTime, tickFormatValue, linkedHover } = props;
+    const resolvedSize = width != null && height != null
+        ? [width, height]
+        : size || [500, 300];
+    const resolvedTooltip = tooltipContent ?? tooltip;
+    const frameRef = (0, react_1.useRef)(null);
+    // ── Linked hover hooks (always called, conditional logic inside) ──
+    const hoverConfig = (0, selectionUtils_1.normalizeLinkedHover)(linkedHover);
+    const linkedHoverHook = (0, useSelection_1.useLinkedHover)({
+        name: hoverConfig?.name || "hover",
+        fields: hoverConfig?.fields || []
+    });
+    const combinedHoverBehavior = (0, react_1.useCallback)((d) => {
+        if (onHover)
+            onHover(d);
+        if (linkedHover) {
+            linkedHoverHook.onHover(d ? (d.data || d) : null);
+        }
+    }, [onHover, linkedHover, linkedHoverHook]);
+    (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 waterfallStyle = {};
+    if (positiveColor != null)
+        waterfallStyle.positiveColor = positiveColor;
+    if (negativeColor != null)
+        waterfallStyle.negativeColor = negativeColor;
+    if (connectorStroke != null)
+        waterfallStyle.connectorStroke = connectorStroke;
+    if (connectorWidth != null)
+        waterfallStyle.connectorWidth = connectorWidth;
+    if (gap != null)
+        waterfallStyle.gap = gap;
+    if (stroke != null)
+        waterfallStyle.stroke = stroke;
+    if (strokeWidth != null)
+        waterfallStyle.strokeWidth = strokeWidth;
+    return (React.createElement(StreamXYFrame_1.default, { ref: frameRef, chartType: "waterfall", runtimeMode: "streaming", size: resolvedSize, margin: margin, className: className, arrowOfTime: arrowOfTime, windowMode: windowMode, windowSize: windowSize, data: data, timeAccessor: timeAccessor, valueAccessor: valueAccessor, xExtent: timeExtent, yExtent: valueExtent, extentPadding: extentPadding, waterfallStyle: waterfallStyle, showAxes: showAxes, background: background, hoverAnnotation: enableHover, tooltipContent: resolvedTooltip, customHoverBehavior: combinedHoverBehavior, annotations: annotations, svgAnnotationRules: svgAnnotationRules, tickFormatTime: tickFormatTime, tickFormatValue: tickFormatValue }));
+});
+exports.RealtimeWaterfallChart.displayName = "RealtimeWaterfallChart";

package/ai/dist/src/components/charts/shared/ChartError.js

@@ -0,0 +1,72 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ChartError;
+const React = __importStar(require("react"));
+/**
+ * Renders a visible, styled error state inside the chart's dimensions.
+ * Shows the component name, error message, and a hint for developers.
+ *
+ * Designed to be obvious in development but not alarming in production —
+ * uses muted colors that adapt to light/dark backgrounds.
+ */
+function ChartError({ componentName, message, width, height, }) {
+    return (React.createElement("div", { role: "alert", style: {
+            width,
+            height: Math.max(height, 120),
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            border: "1px dashed rgba(128, 128, 128, 0.4)",
+            borderRadius: 8,
+            background: "rgba(128, 128, 128, 0.04)",
+            padding: 24,
+            boxSizing: "border-box",
+        } },
+        React.createElement("div", { style: { textAlign: "center", maxWidth: 400 } },
+            React.createElement("div", { style: {
+                    fontSize: 13,
+                    fontWeight: 600,
+                    color: "rgba(128, 128, 128, 0.7)",
+                    marginBottom: 6,
+                    fontFamily: "monospace",
+                } }, componentName),
+            React.createElement("div", { style: {
+                    fontSize: 14,
+                    color: "rgba(128, 128, 128, 0.9)",
+                    lineHeight: 1.5,
+                } }, message))));
+}

package/ai/dist/src/components/charts/shared/colorUtils.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_COLORS = exports.COLOR_SCHEMES = void 0;
+exports.getColor = getColor;
+exports.createColorScale = createColorScale;
+exports.getSize = getSize;
+const d3_scale_1 = require("d3-scale");
+const d3_scale_chromatic_1 = require("d3-scale-chromatic");
+/**
+ * Predefined color schemes
+ */
+exports.COLOR_SCHEMES = {
+    // Categorical schemes
+    category10: d3_scale_chromatic_1.schemeCategory10,
+    tableau10: d3_scale_chromatic_1.schemeTableau10,
+    set3: d3_scale_chromatic_1.schemeSet3,
+    // Sequential schemes (for continuous data)
+    blues: d3_scale_chromatic_1.interpolateBlues,
+    reds: d3_scale_chromatic_1.interpolateReds,
+    greens: d3_scale_chromatic_1.interpolateGreens,
+    oranges: d3_scale_chromatic_1.interpolateOranges,
+    purples: d3_scale_chromatic_1.interpolatePurples,
+    viridis: d3_scale_chromatic_1.interpolateViridis,
+    plasma: d3_scale_chromatic_1.interpolatePlasma
+};
+/**
+ * Default colors for charts
+ */
+exports.DEFAULT_COLORS = d3_scale_chromatic_1.schemeCategory10;
+/**
+ * Gets a color for a data point based on the colorBy configuration
+ *
+ * @param dataPoint - The data point
+ * @param colorBy - Field name or function to determine color
+ * @param colorScale - Optional custom color scale
+ * @returns Color string
+ *
+ * @example
+ * ```ts
+ * // Using a field name
+ * getColor({category: 'A', value: 10}, 'category', colorScale)
+ *
+ * // Using a function
+ * getColor({value: 10}, d => d.value > 5 ? 'red' : 'blue')
+ * ```
+ */
+function getColor(dataPoint, colorBy, colorScale) {
+    if (typeof colorBy === "function") {
+        return colorBy(dataPoint);
+    }
+    const colorValue = dataPoint[colorBy];
+    if (colorScale) {
+        return colorScale(colorValue);
+    }
+    // Default: return a hash-based color
+    return exports.DEFAULT_COLORS[Math.abs(hashString(String(colorValue))) % exports.DEFAULT_COLORS.length];
+}
+/**
+ * Creates a color scale function from data
+ *
+ * @param data - Array of data points
+ * @param colorBy - Field name to use for coloring
+ * @param scheme - Color scheme name or custom palette
+ * @returns Color scale function
+ *
+ * @example
+ * ```ts
+ * const colorScale = createColorScale(data, 'category')
+ * const color = colorScale('A') // Returns color for category 'A'
+ * ```
+ */
+function createColorScale(data, colorBy, scheme = "category10") {
+    // Get unique values
+    const uniqueValues = Array.from(new Set(data.map(d => d[colorBy])));
+    // Check if values are numeric for sequential scale
+    const isNumeric = uniqueValues.every(v => typeof v === "number" || !isNaN(Number(v)));
+    // Handle custom color array
+    if (Array.isArray(scheme)) {
+        return (0, d3_scale_1.scaleOrdinal)()
+            .domain(uniqueValues)
+            .range(scheme)
+            .unknown("#999");
+    }
+    const colorScheme = exports.COLOR_SCHEMES[scheme] || exports.COLOR_SCHEMES.category10;
+    if (isNumeric && typeof colorScheme === "function") {
+        // Use sequential scale for numeric data
+        return (v) => colorScheme(Number(v) / Math.max(...uniqueValues.map(Number)));
+    }
+    else {
+        // Use ordinal scale for categorical data
+        const colors = Array.isArray(colorScheme) ? colorScheme : exports.DEFAULT_COLORS;
+        return (0, d3_scale_1.scaleOrdinal)()
+            .domain(uniqueValues)
+            .range(colors)
+            .unknown("#999");
+    }
+}
+/**
+ * Simple string hash function for deterministic color assignment
+ */
+function hashString(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash; // Convert to 32bit integer
+    }
+    return Math.abs(hash);
+}
+/**
+ * Generates a size function based on sizeBy configuration
+ *
+ * @param dataPoint - The data point
+ * @param sizeBy - Field name or function to determine size
+ * @param sizeRange - Min and max size range [min, max]
+ * @param domain - Optional domain for scaling [minValue, maxValue]
+ * @returns Size value
+ */
+function getSize(dataPoint, sizeBy, sizeRange = [3, 20], domain) {
+    let value;
+    if (typeof sizeBy === "function") {
+        value = sizeBy(dataPoint);
+    }
+    else {
+        value = dataPoint[sizeBy];
+    }
+    if (!domain) {
+        return value;
+    }
+    // Scale value to size range
+    const [minDomain, maxDomain] = domain;
+    const [minSize, maxSize] = sizeRange;
+    if (maxDomain === minDomain) {
+        return (minSize + maxSize) / 2;
+    }
+    const normalized = (value - minDomain) / (maxDomain - minDomain);
+    return minSize + normalized * (maxSize - minSize);
+}

package/ai/dist/src/components/charts/shared/formatUtils.js

@@ -0,0 +1,213 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatNumber = formatNumber;
+exports.formatDate = formatDate;
+exports.formatAxis = formatAxis;
+exports.createTooltip = createTooltip;
+exports.formatLargeNumber = formatLargeNumber;
+exports.smartTickFormat = smartTickFormat;
+exports.truncateText = truncateText;
+const React = __importStar(require("react"));
+const d3_time_format_1 = require("d3-time-format");
+const d3_format_1 = require("d3-format");
+/**
+ * Format number with specified format string
+ *
+ * @param value - Number to format
+ * @param formatString - D3 format string (e.g., ".2f", ",.0f", ".1%")
+ * @returns Formatted string
+ *
+ * @see https://github.com/d3/d3-format#format for format string options
+ */
+function formatNumber(value, formatString = ",.0f") {
+    try {
+        return (0, d3_format_1.format)(formatString)(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+/**
+ * Format date with specified format string
+ *
+ * @param value - Date to format
+ * @param formatString - D3 time format string (e.g., "%Y-%m-%d", "%b %d")
+ * @returns Formatted string
+ *
+ * @see https://github.com/d3/d3-time-format#timeFormat for format string options
+ */
+function formatDate(value, formatString = "%b %d, %Y") {
+    try {
+        const date = value instanceof Date ? value : new Date(value);
+        return (0, d3_time_format_1.timeFormat)(formatString)(date);
+    }
+    catch {
+        return String(value);
+    }
+}
+/**
+ * Creates a formatting function based on the type
+ *
+ * @param type - Type of formatting: 'number', 'date', 'percent', or 'currency'
+ * @param options - Optional configuration for the formatter
+ * @returns Formatting function
+ *
+ * @example
+ * ```ts
+ * const fmt = formatAxis('number', { decimals: 2 })
+ * fmt(1234.567) // "1,234.57"
+ *
+ * const dateFmt = formatAxis('date', { format: '%b %Y' })
+ * dateFmt(new Date()) // "Jan 2024"
+ * ```
+ */
+function formatAxis(type = "number", options) {
+    const { decimals = 0, format: customFormat, currency = "$" } = options || {};
+    switch (type) {
+        case "date":
+            return (d) => formatDate(d, customFormat || "%b %d");
+        case "percent":
+            return (d) => formatNumber(d, customFormat || `.${decimals}%`);
+        case "currency":
+            return (d) => `${currency}${formatNumber(d, customFormat || `,.${decimals}f`)}`;
+        case "number":
+        default:
+            return (d) => formatNumber(d, customFormat || `,.${decimals}f`);
+    }
+}
+/**
+ * Creates a tooltip content generator
+ *
+ * @param fields - Array of field names to display
+ * @param formatters - Optional map of field names to formatting functions
+ * @param labels - Optional map of field names to display labels
+ * @returns React element generator function
+ *
+ * @example
+ * ```ts
+ * const tooltip = createTooltip(
+ *   ['category', 'value'],
+ *   { value: d => formatNumber(d, ',.2f') },
+ *   { category: 'Category', value: 'Value' }
+ * )
+ * ```
+ */
+function createTooltip(fields, formatters, labels) {
+    return (d) => {
+        return React.createElement("div", { className: "tooltip-content", style: { padding: "8px" } }, fields.map((field) => {
+            const label = labels?.[field] || field;
+            const value = d[field];
+            const formatter = formatters?.[field];
+            const displayValue = formatter ? formatter(value) : String(value);
+            return React.createElement("div", { key: field, style: { marginBottom: "4px" } }, React.createElement("strong", null, `${label}: `), displayValue);
+        }));
+    };
+}
+/**
+ * Formats large numbers with K/M/B suffixes
+ *
+ * @param value - Number to format
+ * @param decimals - Number of decimal places
+ * @returns Formatted string with suffix
+ *
+ * @example
+ * ```ts
+ * formatLargeNumber(1234) // "1.2K"
+ * formatLargeNumber(1234567) // "1.2M"
+ * formatLargeNumber(1234567890) // "1.2B"
+ * ```
+ */
+function formatLargeNumber(value, decimals = 1) {
+    if (value >= 1e9) {
+        return (value / 1e9).toFixed(decimals) + "B";
+    }
+    if (value >= 1e6) {
+        return (value / 1e6).toFixed(decimals) + "M";
+    }
+    if (value >= 1e3) {
+        return (value / 1e3).toFixed(decimals) + "K";
+    }
+    return value.toFixed(decimals);
+}
+/**
+ * Smart default tick format for axis labels.
+ *
+ * Handles the common problems with raw number-to-string conversion:
+ * - Floating-point noise (0.30000000000000004 → "0.3")
+ * - Excessive precision (62.123456789 → "62.1235")
+ * - Large numbers (1500000 → "1.5M")
+ * - Strings/non-numbers pass through unchanged
+ *
+ * Used as the default axis tickFormat when no explicit format is provided.
+ */
+function smartTickFormat(value) {
+    if (value == null)
+        return "";
+    if (typeof value !== "number")
+        return String(value);
+    if (!isFinite(value))
+        return String(value);
+    if (value === 0)
+        return "0";
+    // Clean floating-point noise (e.g., 0.30000000000000004 → 0.3)
+    const cleaned = parseFloat(value.toPrecision(12));
+    const abs = Math.abs(cleaned);
+    // Large numbers: compact suffixes
+    if (abs >= 1e9)
+        return `${parseFloat((cleaned / 1e9).toPrecision(3))}B`;
+    if (abs >= 1e6)
+        return `${parseFloat((cleaned / 1e6).toPrecision(3))}M`;
+    if (abs >= 1e4)
+        return `${parseFloat((cleaned / 1e3).toPrecision(3))}K`;
+    // Integers: no decimals needed
+    if (Number.isInteger(cleaned))
+        return String(cleaned);
+    // Floats: up to 6 significant digits, trailing zeros stripped
+    return String(parseFloat(cleaned.toPrecision(6)));
+}
+/**
+ * Truncates text to specified length with ellipsis
+ *
+ * @param text - Text to truncate
+ * @param maxLength - Maximum length before truncation
+ * @returns Truncated text
+ */
+function truncateText(text, maxLength = 20) {
+    if (text.length <= maxLength) {
+        return text;
+    }
+    return text.slice(0, maxLength - 3) + "...";
+}

package/ai/dist/src/components/charts/shared/hooks.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_COLOR = void 0;
+exports.resolveAccessor = resolveAccessor;
+exports.useColorScale = useColorScale;
+exports.useSortedData = useSortedData;
+const react_1 = require("react");
+const colorUtils_1 = require("./colorUtils");
+/**
+ * Default fill color used when no colorBy is specified
+ */
+exports.DEFAULT_COLOR = "#007bff";
+/**
+ * Resolve an accessor (string key or function) into a function.
+ * Used across chart components to normalize `valueAccessor`, `categoryAccessor`, etc.
+ */
+function resolveAccessor(accessor) {
+    return typeof accessor === "function"
+        ? accessor
+        : (d) => d[accessor];
+}
+/**
+ * Hook to create a color scale from data and colorBy configuration.
+ * Returns undefined when colorBy is absent or is a function accessor.
+ */
+function useColorScale(data, colorBy, colorScheme = "category10") {
+    return (0, react_1.useMemo)(() => {
+        if (!colorBy || typeof colorBy === "function")
+            return undefined;
+        return (0, colorUtils_1.createColorScale)(data, colorBy, colorScheme);
+    }, [data, colorBy, colorScheme]);
+}
+/**
+ * Hook to sort data by a value accessor.
+ * Used by BarChart and DotPlot.
+ */
+function useSortedData(data, sort, valueAccessor) {
+    return (0, react_1.useMemo)(() => {
+        if (!sort)
+            return data;
+        const copy = [...data];
+        if (typeof sort === "function")
+            return copy.sort(sort);
+        const getValue = resolveAccessor(valueAccessor);
+        return sort === "asc"
+            ? copy.sort((a, b) => getValue(a) - getValue(b))
+            : copy.sort((a, b) => getValue(b) - getValue(a));
+    }, [data, sort, valueAccessor]);
+}