semiotic 2.0.2 → 3.0.0-beta.1

package/ai/dist/src/components/SparkOrdinalFrame.js

@@ -0,0 +1,11 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SparkOrdinalFrame = void 0;
+const OrdinalFrame_1 = __importDefault(require("./OrdinalFrame"));
+const SparkFrame_1 = __importDefault(require("./SparkFrame"));
+const SparkFrame_2 = require("./SparkFrame");
+exports.SparkOrdinalFrame = (0, SparkFrame_1.default)(OrdinalFrame_1.default, SparkFrame_2.ordinalFrameDefaults, "SparkOrdinalFrame");

package/ai/dist/src/components/SparkXYFrame.js

@@ -0,0 +1,11 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SparkXYFrame = void 0;
+const XYFrame_1 = __importDefault(require("./XYFrame"));
+const SparkFrame_1 = __importDefault(require("./SparkFrame"));
+const SparkFrame_2 = require("./SparkFrame");
+exports.SparkXYFrame = (0, SparkFrame_1.default)(XYFrame_1.default, SparkFrame_2.xyFrameDefaults, "SparkXYFrame");

package/ai/dist/src/components/Tooltip/Tooltip.js

@@ -0,0 +1,304 @@
+"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.defaultTooltipStyle = void 0;
+exports.Tooltip = Tooltip;
+exports.MultiLineTooltip = MultiLineTooltip;
+exports.normalizeTooltip = normalizeTooltip;
+const React = __importStar(require("react"));
+/**
+ * Default tooltip styles following best practices
+ */
+exports.defaultTooltipStyle = {
+    background: "rgba(0, 0, 0, 0.85)",
+    color: "white",
+    padding: "8px 12px",
+    borderRadius: "4px",
+    fontSize: "14px",
+    lineHeight: "1.5",
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+    pointerEvents: "none",
+    maxWidth: "300px",
+    wordWrap: "break-word"
+};
+/**
+ * Extract value from data using accessor
+ */
+function getValue(data, accessor) {
+    if (typeof accessor === "function") {
+        return accessor(data);
+    }
+    return data[accessor];
+}
+/**
+ * Format a value for display
+ */
+function formatValue(value, format) {
+    if (format) {
+        return format(value);
+    }
+    if (value === null || value === undefined) {
+        return "";
+    }
+    // Format numbers with commas
+    if (typeof value === "number") {
+        return value.toLocaleString();
+    }
+    // Format dates
+    if (value instanceof Date) {
+        return value.toLocaleDateString();
+    }
+    // Handle objects (e.g. resolved network nodes with an id property)
+    if (typeof value === "object" && value !== null) {
+        const obj = value;
+        if (obj.id !== undefined)
+            return String(obj.id);
+        if (obj.name !== undefined)
+            return String(obj.name);
+        return JSON.stringify(value);
+    }
+    return String(value);
+}
+/**
+ * Create a simple tooltip that displays a single value or title
+ *
+ * @example
+ * ```tsx
+ * <Scatterplot
+ *   data={data}
+ *   tooltip={Tooltip({ title: "name" })}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <BarChart
+ *   data={data}
+ *   tooltip={Tooltip({
+ *     title: d => `${d.category}: ${d.value}`,
+ *     style: { background: "#333" }
+ *   })}
+ * />
+ * ```
+ */
+function Tooltip(config = {}) {
+    const { fields, title, format, style = {}, className = "" } = config;
+    // Return a tooltipContent function that Semiotic expects
+    return (data) => {
+        // Guard against undefined/null data
+        if (!data || typeof data !== "object") {
+            return null;
+        }
+        let titleContent;
+        const fieldLines = [];
+        if (title) {
+            const titleValue = getValue(data, title);
+            titleContent = formatValue(titleValue, format);
+        }
+        if (fields && fields.length > 0) {
+            fields.forEach((field) => {
+                let label;
+                let accessor;
+                let fieldFormat;
+                if (typeof field === "string") {
+                    label = field;
+                    accessor = field;
+                    fieldFormat = format;
+                }
+                else {
+                    label = field.label;
+                    accessor = field.accessor || field.key || "";
+                    fieldFormat = field.format || format;
+                }
+                const value = getValue(data, accessor);
+                fieldLines.push({
+                    label,
+                    value: formatValue(value, fieldFormat)
+                });
+            });
+        }
+        else if (!title) {
+            // Default: try common field names (only when no title or fields specified)
+            const commonFields = ["value", "y", "name", "id", "label"];
+            for (const field of commonFields) {
+                if (data[field] !== undefined) {
+                    titleContent = formatValue(data[field], format);
+                    break;
+                }
+            }
+            // If still nothing, show first non-internal property
+            if (!titleContent) {
+                const keys = Object.keys(data).filter(k => !k.startsWith("_"));
+                if (keys.length > 0) {
+                    titleContent = formatValue(data[keys[0]], format);
+                }
+            }
+        }
+        const mergedStyle = { ...exports.defaultTooltipStyle, ...style };
+        return (React.createElement("div", { className: `semiotic-tooltip ${className}`.trim(), style: mergedStyle },
+            titleContent && React.createElement("div", { style: { fontWeight: fieldLines.length > 0 ? "bold" : "normal" } }, titleContent),
+            fieldLines.map((line, index) => (React.createElement("div", { key: index, style: { marginTop: index === 0 && titleContent ? "4px" : 0 } },
+                line.label && React.createElement("span", null,
+                    line.label,
+                    ": "),
+                line.value)))));
+    };
+}
+/**
+ * Create a multi-line tooltip that displays multiple fields
+ *
+ * @example
+ * ```tsx
+ * <Scatterplot
+ *   data={data}
+ *   tooltip={MultiLineTooltip({
+ *     fields: ["name", "value", "category"]
+ *   })}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <LineChart
+ *   data={data}
+ *   tooltip={MultiLineTooltip({
+ *     title: "series",
+ *     fields: [
+ *       { label: "X", accessor: "x", format: v => v.toFixed(2) },
+ *       { label: "Y", accessor: "y", format: v => v.toFixed(2) },
+ *       { label: "Category", accessor: "category" }
+ *     ]
+ *   })}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <BarChart
+ *   data={data}
+ *   tooltip={MultiLineTooltip({
+ *     fields: [
+ *       { label: "Category", accessor: "category" },
+ *       { label: "Sales", accessor: "value", format: v => `$${v.toLocaleString()}` }
+ *     ],
+ *     showLabels: true
+ *   })}
+ * />
+ * ```
+ */
+function MultiLineTooltip(config = {}) {
+    const { fields = [], title, format, style = {}, className = "", showLabels = true, separator = ": " } = config;
+    // Return a tooltipContent function that Semiotic expects
+    return (data) => {
+        // Guard against undefined/null data
+        if (!data || typeof data !== "object") {
+            return null;
+        }
+        const lines = [];
+        // Add title line if specified
+        if (title) {
+            const titleValue = getValue(data, title);
+            lines.push({
+                value: formatValue(titleValue, format)
+            });
+        }
+        // Add field lines
+        if (fields && Array.isArray(fields) && fields.length > 0) {
+            fields.forEach((field) => {
+                let label;
+                let accessor;
+                let fieldFormat;
+                if (typeof field === "string") {
+                    // Simple string field name
+                    label = field;
+                    accessor = field;
+                    fieldFormat = format;
+                }
+                else {
+                    // Full TooltipField object
+                    // Support both 'key' and 'accessor' for backward compatibility
+                    label = field.label;
+                    accessor = field.accessor || field.key || "";
+                    fieldFormat = field.format || format;
+                }
+                const value = getValue(data, accessor);
+                const formattedValue = formatValue(value, fieldFormat);
+                lines.push({
+                    label: showLabels ? label : undefined,
+                    value: formattedValue
+                });
+            });
+        }
+        else {
+            // Default: show all non-internal properties
+            const keys = Object.keys(data).filter((k) => !k.startsWith("_") && k !== "data");
+            keys.forEach((key) => {
+                lines.push({
+                    label: showLabels ? key : undefined,
+                    value: formatValue(data[key], format)
+                });
+            });
+        }
+        const mergedStyle = { ...exports.defaultTooltipStyle, ...style };
+        // Safety check: ensure lines is an array
+        if (!Array.isArray(lines) || lines.length === 0) {
+            return null;
+        }
+        return (React.createElement("div", { className: `semiotic-tooltip semiotic-tooltip-multiline ${className}`.trim(), style: mergedStyle }, lines.map((line, index) => (React.createElement("div", { key: index, style: { marginBottom: index < lines.length - 1 ? "4px" : 0 } },
+            line.label && (React.createElement("strong", null,
+                line.label,
+                separator)),
+            line.value)))));
+    };
+}
+/**
+ * Convert a tooltip prop to the format Semiotic expects
+ */
+function normalizeTooltip(tooltip) {
+    if (tooltip === true) {
+        // Enable default tooltip
+        return true;
+    }
+    if (typeof tooltip === "function") {
+        // Already a tooltip function, use it as tooltipContent
+        return tooltip;
+    }
+    if (tooltip === false || tooltip === undefined) {
+        // No tooltip
+        return false;
+    }
+    // Should not reach here but return the value as-is
+    return tooltip;
+}

package/ai/dist/src/components/TooltipPositioner/index.js

@@ -0,0 +1,132 @@
+"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 = TooltipPositioner;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const // simple heuristics to check if the tooltip container exceeds the viewport
+// if so, capture the suggested offset
+checkPosition = ({ tooltipRef, tooltipContentArgs, changeTooltipContentArgsCurrent, changeTooltipContainerInitialDimensions, changeCollision }) => {
+    const tooltipContainerInitialDimensions = tooltipRef?.getBoundingClientRect();
+    if (!tooltipContainerInitialDimensions) {
+        return;
+    }
+    const { right, left, top, bottom, width, height } = tooltipContainerInitialDimensions;
+    // flags to indicate whether the data point + tooltip dimension collides with the viewport
+    // on each of the 4 directions/sides
+    let collision = {
+        left: false,
+        right: false,
+        top: false,
+        bottom: false
+    };
+    if (left + width > window.innerWidth) {
+        collision.right = true;
+    }
+    if (left - width < 0) {
+        collision.left = true;
+    }
+    if (top + height > window.innerHeight) {
+        collision.bottom = true;
+    }
+    if (top - height < 0) {
+        collision.top = true;
+    }
+    changeTooltipContentArgsCurrent();
+    changeTooltipContainerInitialDimensions(tooltipContainerInitialDimensions);
+    changeCollision(collision);
+};
+function TooltipPositioner(props) {
+    const { tooltipContent, tooltipContentArgs } = props;
+    const [collision, changeCollision] = (0, react_1.useState)(null);
+    const [tooltipContainerInitialDimensions, changeTooltipContainerInitialDimensions] = (0, react_1.useState)(null);
+    const [tooltipContentArgsCurrent, changeTooltipContentArgsCurrent] = (0, react_1.useState)(null);
+    const [tooltipNode, setTooltipNode] = (0, react_1.useState)(null);
+    const tooltipNodeRef = (0, react_1.useCallback)((node) => {
+        setTooltipNode(node);
+        checkPosition({
+            tooltipRef: node,
+            tooltipContentArgs,
+            changeTooltipContentArgsCurrent,
+            changeTooltipContainerInitialDimensions,
+            changeCollision
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        // if new args, reset collision state
+        changeCollision(null);
+        changeTooltipContainerInitialDimensions(null);
+    }, [JSON.stringify(tooltipContentArgs)]);
+    (0, react_1.useEffect)(() => {
+        if (tooltipNode && !collision) {
+            checkPosition({
+                tooltipRef: tooltipNode,
+                tooltipContentArgs,
+                changeTooltipContentArgsCurrent,
+                changeTooltipContainerInitialDimensions,
+                changeCollision
+            });
+        }
+    }, [tooltipNode, collision]);
+    const containerStyle = {
+        //to handle issue when the tooltip content has margins set by client,
+        // which results in the tooltip container having smaller height,
+        // which in turn causes the css transform to be inaccurate
+        // (ref: https://www.w3.org/TR/css-box-3/#collapsing-margins)
+        overflow: "hidden",
+        opacity: collision && tooltipContentArgsCurrent === tooltipContentArgs ? 1 : 0
+    };
+    const tooltipContainerClasses = collision
+        ? [
+            "tooltip-container",
+            "tooltip-collision-evaluated",
+            collision && collision.top && "collision-top",
+            collision && collision.bottom && "collision-bottom",
+            collision && collision.right && "collision-right",
+            collision && collision.left && "collision-left"
+        ]
+            .filter((el) => el)
+            .join(" ")
+        : "tooltip-container";
+    const tooltipContainerAttributes = {
+        offset: { x: 0, y: 0 },
+        tooltipContainerInitialDimensions
+    };
+    return (React.createElement("div", { ref: tooltipNodeRef, style: containerStyle, className: tooltipContainerClasses, "data-testid": "TooltipPositioner" }, tooltipContent({
+        ...tooltipContentArgs,
+        tooltipContainerAttributes
+    })));
+}