semiotic 2.0.3 → 3.0.0-beta.2

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLegend = createLegend;
+/**
+ * Create a legend configuration for HOC components
+ *
+ * @param data - Array of data points
+ * @param colorBy - Field or function to determine color categories
+ * @param colorScale - Optional d3 color scale function
+ * @param getColor - Function to get color for a data point
+ * @param strokeColor - Optional stroke color for legend items
+ * @param strokeWidth - Optional stroke width for legend items
+ * @returns Legend configuration object for Semiotic frames
+ */
+function createLegend({ data, colorBy, colorScale, getColor, strokeColor, strokeWidth }) {
+    // Get unique category values
+    const uniqueValues = Array.from(new Set(data.map((d) => {
+        if (typeof colorBy === "function") {
+            return colorBy(d);
+        }
+        return d[colorBy];
+    })));
+    // Create items array for the legend
+    const items = uniqueValues.map((value) => {
+        const sampleData = typeof colorBy === "function"
+            ? data.find((d) => colorBy(d) === value)
+            : data.find((d) => d[colorBy] === value);
+        const color = sampleData
+            ? getColor(sampleData, colorBy, colorScale)
+            : colorScale
+                ? colorScale(value)
+                : "#000000";
+        return {
+            label: String(value),
+            color
+        };
+    });
+    return {
+        legendGroups: [
+            {
+                styleFn: (d) => {
+                    const style = { fill: d.color, stroke: d.color };
+                    if (strokeColor !== undefined) {
+                        style.stroke = strokeColor;
+                    }
+                    if (strokeWidth !== undefined) {
+                        style.strokeWidth = strokeWidth;
+                    }
+                    return style;
+                },
+                type: "fill",
+                items,
+                label: "" // Required by LegendGroup interface
+            }
+        ]
+    };
+}

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

@@ -0,0 +1,67 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeLinkedHover = normalizeLinkedHover;
+exports.normalizeLinkedBrush = normalizeLinkedBrush;
+exports.wrapStyleWithSelection = wrapStyleWithSelection;
+// ── Prop normalizers ───────────────────────────────────────────────────────
+/**
+ * Normalize the linkedHover prop into a consistent config object.
+ *
+ * - `true` → { name: "hover", fields: [] }
+ * - `"mySelection"` → { name: "mySelection", fields: [] }
+ * - `{ name: "hl", fields: ["category"] }` → as-is
+ */
+function normalizeLinkedHover(prop, fallbackFields) {
+    if (!prop)
+        return null;
+    if (prop === true) {
+        return { name: "hover", fields: fallbackFields || [] };
+    }
+    if (typeof prop === "string") {
+        return { name: prop, fields: fallbackFields || [] };
+    }
+    return { name: prop.name || "hover", fields: prop.fields };
+}
+/**
+ * Normalize the linkedBrush prop into a consistent config object.
+ *
+ * - `"timeRange"` → { name: "timeRange" }
+ * - `{ name: "dash", xField: "age", yField: "income" }` → as-is
+ */
+function normalizeLinkedBrush(prop) {
+    if (!prop)
+        return null;
+    if (typeof prop === "string") {
+        return { name: prop };
+    }
+    return prop;
+}
+/**
+ * Wrap a base style function with selection awareness.
+ * When a selection is active, non-matching datums get dimmed.
+ */
+function wrapStyleWithSelection(baseStyleFn, selectionHook, config) {
+    if (!selectionHook)
+        return baseStyleFn;
+    return (d) => {
+        const style = { ...baseStyleFn(d) };
+        if (selectionHook.isActive) {
+            if (selectionHook.predicate(d)) {
+                // Selected: apply selectedStyle overrides if any
+                if (config?.selectedStyle) {
+                    Object.assign(style, config.selectedStyle);
+                }
+            }
+            else {
+                // Unselected: dim the element
+                style.fillOpacity = config?.unselectedOpacity ?? 0.2;
+                style.strokeOpacity = config?.unselectedOpacity ?? 0.2;
+                if (config?.unselectedStyle) {
+                    Object.assign(style, config.unselectedStyle);
+                }
+            }
+        }
+        return style;
+    };
+}

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

@@ -0,0 +1,79 @@
+"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.accessorName = accessorName;
+exports.buildDefaultTooltip = buildDefaultTooltip;
+const React = __importStar(require("react"));
+const Tooltip_1 = require("../../Tooltip/Tooltip");
+/**
+ * Extract a display name from an accessor.
+ * Strings return themselves; functions return "value".
+ */
+function accessorName(acc) {
+    return typeof acc === "string" ? acc : "value";
+}
+function formatVal(v) {
+    if (v == null)
+        return "–";
+    if (typeof v === "number")
+        return v.toLocaleString();
+    if (v instanceof Date)
+        return v.toLocaleDateString();
+    return String(v);
+}
+function resolveValue(d, acc) {
+    return typeof acc === "function" ? acc(d) : d[acc];
+}
+/**
+ * Build a default tooltipContent function for StreamXYFrame HOCs.
+ * Receives HoverData ({ data, time, value, x, y }) and renders
+ * labeled fields derived from the HOC's props.
+ */
+function buildDefaultTooltip(fields) {
+    return (hover) => {
+        const d = hover.data;
+        if (!d)
+            return null;
+        return (React.createElement("div", { className: "semiotic-tooltip", style: Tooltip_1.defaultTooltipStyle }, fields.map((field, i) => {
+            const raw = resolveValue(d, field.accessor);
+            const display = formatVal(raw);
+            return (React.createElement("div", { key: i, style: i > 0 ? { marginTop: 2 } : undefined },
+                React.createElement("span", { style: { opacity: 0.8 } },
+                    field.label,
+                    ": "),
+                React.createElement("span", { style: { fontWeight: field.role === "color" || field.role === "group" ? "bold" : "normal" } }, display)));
+        })));
+    };
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,82 @@
+"use strict";
+/**
+ * Validates chart data and accessors at render time.
+ * Returns null if data is valid, or an error message string if not.
+ *
+ * Validation is intentionally lightweight — it checks the first data point
+ * to catch common mistakes (wrong field names, missing data) without
+ * iterating the entire dataset.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateArrayData = validateArrayData;
+exports.validateObjectData = validateObjectData;
+exports.validateNetworkData = validateNetworkData;
+/**
+ * Validate array-based chart data (LineChart, BarChart, Scatterplot, etc.)
+ */
+function validateArrayData({ componentName, data, accessors, requiredProps, }) {
+    // Check required props first
+    if (requiredProps) {
+        for (const [name, value] of Object.entries(requiredProps)) {
+            if (value === undefined || value === null) {
+                return `${name} is required. Provide a field name or function.`;
+            }
+        }
+    }
+    // Check data exists and is non-empty
+    if (!data || !Array.isArray(data) || data.length === 0) {
+        return "No data provided. Pass a non-empty array to the data prop.";
+    }
+    // Check accessors against the first data point
+    if (accessors) {
+        const sample = data[0];
+        if (sample && typeof sample === "object") {
+            for (const [label, accessor] of Object.entries(accessors)) {
+                if (!accessor)
+                    continue;
+                if (typeof accessor === "string" && !(accessor in sample)) {
+                    return (`${label} "${accessor}" not found in data. ` +
+                        `Available fields: ${Object.keys(sample).join(", ")}.`);
+                }
+            }
+        }
+    }
+    return null;
+}
+/**
+ * Validate object/hierarchical data (TreeDiagram, Treemap, CirclePack)
+ */
+function validateObjectData({ componentName, data, dataLabel = "data", }) {
+    if (data === undefined || data === null) {
+        return `No ${dataLabel} provided. Pass a hierarchical data object to the ${dataLabel} prop.`;
+    }
+    return null;
+}
+/**
+ * Validate network data (ForceDirectedGraph, ChordDiagram, SankeyDiagram)
+ */
+function validateNetworkData({ componentName, nodes, edges, nodesRequired = false, edgesRequired = true, accessors, }) {
+    if (edgesRequired && (!edges || !Array.isArray(edges) || edges.length === 0)) {
+        return "No edges provided. Pass a non-empty array to the edges prop.";
+    }
+    if (nodesRequired && (!nodes || !Array.isArray(nodes) || nodes.length === 0)) {
+        return "No nodes provided. Pass a non-empty array to the nodes prop.";
+    }
+    // Check accessors against first data point
+    if (accessors) {
+        if (nodes && nodes.length > 0) {
+            const sample = nodes[0];
+            if (sample && typeof sample === "object") {
+                for (const [label, accessor] of Object.entries(accessors)) {
+                    if (!accessor)
+                        continue;
+                    if (typeof accessor === "string" && !(accessor in sample)) {
+                        return (`${label} "${accessor}" not found in node data. ` +
+                            `Available fields: ${Object.keys(sample).join(", ")}.`);
+                    }
+                }
+            }
+        }
+    }
+    return null;
+}