semiotic 2.0.2 → 3.0.0-beta.1

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

@@ -0,0 +1,178 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DonutChart = DonutChart;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const 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");
+/**
+ * DonutChart - Visualize proportions as slices of a ring.
+ *
+ * A simplified wrapper around OrdinalFrame with radial projection and
+ * an inner radius to create a donut shape.
+ *
+ * @example
+ * ```tsx
+ * <DonutChart
+ *   data={[
+ *     {category: 'A', value: 30},
+ *     {category: 'B', value: 50},
+ *     {category: 'C', value: 20}
+ *   ]}
+ *   innerRadius={80}
+ *   centerContent={<span>Total: 100</span>}
+ * />
+ * ```
+ */
+function DonutChart(props) {
+    const { data, width = 400, height = 400, margin: userMargin, className, title, categoryAccessor = "category", valueAccessor = "value", innerRadius = 60, centerContent, colorBy, colorScheme = "category10", startAngle = 0, slicePadding = 2, enableHover = true, showLegend = true, tooltip, frameProps = {} } = props;
+    const safeData = data || [];
+    // Default colorBy to categoryAccessor for donut 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 with innerRadius
+    const typeConfig = (0, react_1.useMemo)(() => {
+        const config = {
+            type: "bar",
+            innerRadius
+        };
+        if (startAngle) {
+            config.offsetAngle = startAngle;
+        }
+        return config;
+    }, [innerRadius, startAngle]);
+    // Center content rendered via foregroundGraphics
+    const foregroundGraphics = (0, react_1.useMemo)(() => {
+        if (!centerContent)
+            return undefined;
+        const cx = width / 2;
+        const cy = height / 2;
+        return (React.createElement("foreignObject", { x: cx - innerRadius, y: cy - innerRadius, width: innerRadius * 2, height: innerRadius * 2 },
+            React.createElement("div", { style: {
+                    width: "100%",
+                    height: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    textAlign: "center"
+                } }, centerContent)));
+    }, [centerContent, width, height, innerRadius]);
+    // 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: "DonutChart",
+        data: safeData,
+        accessors: {
+            categoryAccessor,
+            valueAccessor,
+        },
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "DonutChart", 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 }),
+        ...(foregroundGraphics && { foregroundGraphics }),
+        ...(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/DotPlot.js

@@ -0,0 +1,194 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DotPlot = DotPlot;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const 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");
+/**
+ * DotPlot - Visualize categorical data with Cleveland dot plots.
+ *
+ * A simplified wrapper around OrdinalFrame for creating dot plots.
+ *
+ * @example
+ * ```tsx
+ * <DotPlot
+ *   data={[
+ *     {category: 'Item A', value: 25},
+ *     {category: 'Item B', value: 40},
+ *     {category: 'Item C', value: 15}
+ *   ]}
+ *   categoryLabel="Items"
+ *   valueLabel="Value"
+ * />
+ * ```
+ */
+function DotPlot(props) {
+    const { data, width = 600, height = 400, margin: userMargin, className, title, categoryAccessor = "category", valueAccessor = "value", orientation = "horizontal", categoryLabel, valueLabel, valueFormat, colorBy, colorScheme = "category10", sort = true, dotRadius = 5, categoryPadding = 10, enableHover = true, showGrid = true, showLegend, tooltip, frameProps = {} } = 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 = {
+                r: dotRadius,
+                fillOpacity: 0.8
+            };
+            // Apply color
+            if (colorBy) {
+                baseStyle.fill = (0, colorUtils_1.getColor)(d, colorBy, colorScale);
+            }
+            else {
+                baseStyle.fill = hooks_1.DEFAULT_COLOR;
+            }
+            return baseStyle;
+        };
+    }, [colorBy, colorScale, dotRadius]);
+    // Build axes configuration
+    const axes = (0, react_1.useMemo)(() => {
+        const axesConfig = [];
+        if (orientation === "horizontal") {
+            // 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 })
+            });
+        }
+        else {
+            // 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
+                });
+            }
+        }
+        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: 120, 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: "DotPlot",
+        data: safeData,
+        accessors: {
+            categoryAccessor,
+            valueAccessor,
+        },
+    });
+    if (error)
+        return React.createElement(ChartError_1.default, { componentName: "DotPlot", message: error, width: width, height: height });
+    // Build OrdinalFrame props
+    const ordinalFrameProps = {
+        size: [width, height],
+        data: sortedData,
+        oAccessor: categoryAccessor,
+        rAccessor: valueAccessor,
+        type: "point",
+        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/ordinal/GroupedBarChart.js

@@ -0,0 +1,194 @@
+"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 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");
+/**
+ * GroupedBarChart - Visualize comparisons across categories with side-by-side bars.
+ *
+ * A simplified wrapper around OrdinalFrame using clusterbar type.
+ *
+ * @example
+ * ```tsx
+ * <GroupedBarChart
+ *   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}
+ *   ]}
+ *   groupBy="product"
+ *   categoryLabel="Quarter"
+ *   valueLabel="Sales"
+ * />
+ * ```
+ */
+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 = {} } = props;
+    const safeData = data || [];
+    // Default colorBy to groupBy for grouped bar charts
+    const actualColorBy = colorBy || groupBy;
+    // 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 axes configuration
+    const axes = (0, react_1.useMemo)(() => {
+        const axesConfig = [];
+        if (orientation === "vertical") {
+            axesConfig.push({
+                orient: "left",
+                label: valueLabel,
+                tickFormat: valueFormat,
+                ...(showGrid && { tickLineGenerator: () => null })
+            });
+            if (categoryLabel) {
+                axesConfig.push({
+                    orient: "bottom",
+                    label: categoryLabel
+                });
+            }
+        }
+        else {
+            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: 40 };
+        const finalMargin = { ...defaultMargin, ...userMargin };
+        if (legend && finalMargin.right < 120) {
+            finalMargin.right = 120;
+        }
+        return finalMargin;
+    }, [userMargin, legend]);
+    // Default tooltip
+    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 groupValue = String(getGroup(d));
+            const cat = String(getCat(d));
+            const val = Number(getVal(d));
+            return (React.createElement("div", { className: "semiotic-tooltip", style: Tooltip_1.defaultTooltipStyle },
+                React.createElement("div", { style: { fontWeight: "bold" } }, groupValue),
+                React.createElement("div", { style: { marginTop: "4px" } },
+                    cat,
+                    " \u00B7 ",
+                    val.toLocaleString())));
+        };
+    }, [groupBy, categoryAccessor, valueAccessor]);
+    // Validate data (after all hooks)
+    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 });
+    // Build OrdinalFrame props
+    const ordinalFrameProps = {
+        size: [width, height],
+        data: safeData,
+        oAccessor: categoryAccessor,
+        rAccessor: valueAccessor,
+        type: "clusterbar",
+        projection: orientation === "horizontal" ? "horizontal" : "vertical",
+        style: pieceStyle,
+        axes: axes,
+        hoverAnnotation: enableHover,
+        margin,
+        oPadding: barPadding,
+        pieceIDAccessor: groupBy,
+        ...(legend && { legend }),
+        ...(className && { className }),
+        ...(title && { title }),
+        tooltipContent: (tooltip ? (0, Tooltip_1.normalizeTooltip)(tooltip) : defaultTooltipContent),
+        transition: true,
+        ...frameProps
+    };
+    return React.createElement(OrdinalFrame_1.default, { ...ordinalFrameProps });
+}