nanoplot 0.0.69 → 0.0.71

package/dist/src/components/Area/Area.d.ts

@@ -9,7 +9,7 @@ interface Props extends React.SVGAttributes<SVGSVGElement> {
 export declare const Area: {
     ({ className, curve, children, loading }: Props): React.JSX.Element | null;
     context(ctx: GraphContext): GraphContext;
-    Tooltip: React.ComponentType<React.HTMLAttributes<HTMLDivElement> & {
+    Tooltip: React.ComponentType<Omit<React.HTMLAttributes<HTMLDivElement> & {
         tooltip?: ((points: Array<Omit<import("../../export").CartesianDataset[number], "data"> & {
             data: import("../../export").CartesianDataset[number]["data"][number];
         }>, x: number | string | Date) => React.ReactNode) | {
@@ -17,6 +17,7 @@ export declare const Area: {
             display: (point: import("../../export").CartesianDataset[number]["data"][number]) => React.ReactNode;
         };
         joints?: boolean;
-    }>;
+        zoneRef: React.RefObject<SVGSVGElement | null>;
+    }, "zoneRef">>;
 };
 export {};

package/dist/src/components/Area/Area.js

@@ -4,10 +4,10 @@ import { useGraph } from "../../hooks/use-graph/use-graph";
 import { CurveUtils } from "../../utils/path/curve";
 import { CoordinatesUtils } from "../../utils/coordinates/coordinates";
 import { cx } from "../../utils/cx/cx";
-import { LinesTooltip } from "../Lines/components/LinesTooltip";
 import { ObjectUtils } from "../../utils/object/object";
 import { Line } from "../Lines/components/Line";
 import { ColorUtils } from "../../utils/color/color";
+import { LinesTooltipZone } from "../Lines/components/LinesTooltipZone";
 export const Area = ({ className, curve = "linear", children, loading }) => {
     const { interactions: { pinned, hovered }, data, viewbox, domain, colors, } = useGraph();
     if (!GraphUtils.isXYData(data))
@@ -55,4 +55,4 @@ export const Area = ({ className, curve = "linear", children, loading }) => {
 Area.context = (ctx) => {
     return Object.assign(Object.assign({}, ctx), { colors: ColorUtils.scheme.sunset });
 };
-Area.Tooltip = LinesTooltip;
+Area.Tooltip = LinesTooltipZone;

package/dist/src/components/Bars/components/HorizontalBars.js

@@ -16,7 +16,7 @@ import { useGraph } from "../../../hooks/use-graph/use-graph";
 import { cx } from "../../../utils/cx/cx";
 import { ObjectUtils } from "../../../utils/object/object";
 import { Rect } from "./Rect";
-import { MathUtils } from "../../../utils/math/math";
+import { scale } from "../../../utils/math/math";
 import { overlay } from "../../Overlay/Overlay";
 import { ColorUtils } from "../../../utils/color/color";
 export const HorizontalBars = ({ children, labels, size = 50, radius = 0, anchor = 0, className }) => {
@@ -54,9 +54,9 @@ export const HorizontalBars = ({ children, labels, size = 50, radius = 0, anchor
             dataset.map((bar, i) => {
                 const position = typeof labels === "object" && "position" in labels ? labels.position : "center";
                 const collision = typeof labels === "object" && "collision" in labels ? labels.collision : true;
-                const width = Math.abs(MathUtils.scale(bar.x2 - bar.x1, context.viewbox.x, 100) - (position === "above" ? 100 : 0)) + "%";
-                const height = MathUtils.scale(bar.y2 - bar.y1, context.viewbox.y, 100);
-                const top = MathUtils.scale(bar.y1, context.viewbox.y, 100);
+                const width = Math.abs(scale(bar.x2 - bar.x1, context.viewbox.x, 100) - (position === "above" ? 100 : 0)) + "%";
+                const height = scale(bar.y2 - bar.y1, context.viewbox.y, 100);
+                const top = scale(bar.y1, context.viewbox.y, 100);
                 const label = (() => {
                     var _a;
                     if (typeof labels === "object" && "position" in labels)
@@ -67,9 +67,7 @@ export const HorizontalBars = ({ children, labels, size = 50, radius = 0, anchor
                 return (React.createElement(overlay.div, { key: i, className: "bars__label @container-[size] absolute text-center", style: {
                         width,
                         height: height + "%",
-                        left: position === "above"
-                            ? "unset"
-                            : MathUtils.scale(Math.min(bar.x1, bar.x2), context.viewbox.x, 100) + "%",
+                        left: position === "above" ? "unset" : scale(Math.min(bar.x1, bar.x2), context.viewbox.x, 100) + "%",
                         right: position === "above" ? 0 : "unset",
                         top: top + "%",
                     } },

package/dist/src/components/Bars/components/VerticalBars.js

@@ -17,7 +17,7 @@ import { CoordinatesUtils } from "../../../utils/coordinates/coordinates";
 import { ObjectUtils } from "../../../utils/object/object";
 import { Rect } from "./Rect";
 import { cx } from "../../../utils/cx/cx";
-import { MathUtils } from "../../../utils/math/math";
+import { scale } from "../../../utils/math/math";
 import { overlay } from "../../Overlay/Overlay";
 import { ColorUtils } from "../../../utils/color/color";
 export const VerticalBars = (_a) => {
@@ -66,9 +66,9 @@ export const VerticalBars = (_a) => {
             dataset.map((bar, i) => {
                 const position = typeof labels === "object" && "position" in labels ? labels.position : "center";
                 const collision = typeof labels === "object" && "collision" in labels ? labels.collision : true;
-                const width = MathUtils.scale(bar.x2 - bar.x1, context.viewbox.x, 100) + "%";
-                const height = MathUtils.scale(Math.abs(bar.y1 - bar.y2), context.viewbox.y, 100);
-                const top = position === "above" ? -4 : MathUtils.scale(Math.min(bar.y2, bar.y1), context.viewbox.y, 100) + "%";
+                const width = scale(bar.x2 - bar.x1, context.viewbox.x, 100) + "%";
+                const height = scale(Math.abs(bar.y1 - bar.y2), context.viewbox.y, 100);
+                const top = position === "above" ? -4 : scale(Math.min(bar.y2, bar.y1), context.viewbox.y, 100) + "%";
                 const label = (() => {
                     var _a;
                     if (typeof labels === "object" && "position" in labels)
@@ -79,7 +79,7 @@ export const VerticalBars = (_a) => {
                 return (React.createElement(overlay.div, { key: i, className: "bars__label @container-[size] absolute text-center", style: {
                         width,
                         height: Math.abs(height - (position === "above" ? 100 : 0)) + "%",
-                        left: `${MathUtils.scale(bar.x1, context.viewbox.x, 100)}%`,
+                        left: `${scale(bar.x1, context.viewbox.x, 100)}%`,
                         top: top,
                     } },
                     React.createElement("div", { className: "h-full w-full relative" },

package/dist/src/components/GradientLegend/GradientLegend.js

@@ -11,14 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import { useGraphColumn } from "../../hooks/use-graph/use-graph";
-import { MathUtils } from "../../utils/math/math";
+import { scale } from "../../utils/math/math";
 import { cx } from "../../utils/cx/cx";
 export const GradientLegend = (_a) => {
     var { position, alignment = "center", gradient, scalars, labels = true } = _a, rest = __rest(_a, ["position", "alignment", "gradient", "scalars", "labels"]);
     const column = useGraphColumn().column;
     const ticks = scalars.map((tick, i, ticks) => {
         if (typeof tick === "number")
-            return { label: tick, left: MathUtils.scale(i, ticks.length - 1, 100) + "%" };
+            return { label: tick, left: scale(i, ticks.length - 1, 100) + "%" };
         return { label: tick.tick, left: tick.percent + "%" };
     });
     return (React.createElement("div", Object.assign({}, rest, { className: cx("gradient-legend w-[100%] px-[20px]", alignment === "center" && "mx-auto", alignment === "start" && "mr-auto", alignment === "end" && "ml-auto", rest.className), style: Object.assign({ gridColumn: column }, rest.style) }),

package/dist/src/components/Heatmap/Heatmap.js

@@ -14,7 +14,7 @@ import { cx } from "../../utils/cx/cx";
 import { Rect } from "../Bars/components/Rect";
 import { GraphUtils } from "../../utils/graph/graph";
 import { CoordinatesUtils } from "../../utils/coordinates/coordinates";
-import { MathUtils } from "../../utils/math/math";
+import { scale } from "../../utils/math/math";
 import { GradientUtils } from "../../utils/gradient/gradient";
 import { overlay } from "../Overlay/Overlay";
 import { ColorUtils } from "../../utils/color/color";
@@ -34,7 +34,7 @@ export const Heatmap = (_a) => {
     const height = viewbox.y / yCategories.size;
     const ticks = scalars.map((tick, i) => {
         if (typeof tick === "number")
-            return { tick: tick, percent: MathUtils.scale(i, scalars.length - 1, 100) };
+            return { tick: tick, percent: scale(i, scalars.length - 1, 100) };
         return tick;
     });
     const dataset = data.flatMap(({ data }) => {
@@ -57,9 +57,9 @@ export const Heatmap = (_a) => {
         labels &&
             dataset.map((rect, i) => {
                 const collision = typeof labels === "object" && "collision" in labels ? labels.collision : true;
-                const width = MathUtils.scale(rect.x2 - rect.x1, context.viewbox.x, 100) + "%";
-                const height = MathUtils.scale(rect.y2 - rect.y1, context.viewbox.y, 100);
-                const top = MathUtils.scale(rect.y1, context.viewbox.y, 100);
+                const width = scale(rect.x2 - rect.x1, context.viewbox.x, 100) + "%";
+                const height = scale(rect.y2 - rect.y1, context.viewbox.y, 100);
+                const top = scale(rect.y1, context.viewbox.y, 100);
                 const label = (() => {
                     var _a;
                     if (typeof labels === "object")
@@ -70,7 +70,7 @@ export const Heatmap = (_a) => {
                 return (React.createElement(overlay.div, { key: i, className: "heatmap__labels @container-[size] absolute text-center", style: {
                         width,
                         height: height + "%",
-                        left: `${MathUtils.scale(rect.x1, context.viewbox.x, 100)}%`,
+                        left: `${scale(rect.x1, context.viewbox.x, 100)}%`,
                         top: top + "%",
                     } },
                     React.createElement("div", { className: "h-full w-full relative" },

package/dist/src/components/Legend/Legend.d.ts

@@ -8,9 +8,10 @@ type Props = Omit<JSX.IntrinsicElements["div"], "onClick" | "onMouseEnter" | "on
     onMouseLeave?: (datapoint: CartesianDatasetDefaulted[number] | SegmentDatasetDefaulted[number]) => void;
     onMouseMove?: (datapoint: CartesianDatasetDefaulted[number] | SegmentDatasetDefaulted[number]) => void;
     children?: ReactNode;
+    datasets?: string[];
 };
 export declare const Legend: {
-    ({ position, alignment, onClick, onMouseEnter, onMouseMove, onMouseLeave, ...rest }: Props): JSX.Element;
+    ({ position, alignment, onClick, onMouseEnter, onMouseMove, onMouseLeave, datasets, ...rest }: Props): JSX.Element;
     context(ctx: GraphContext, { position }: Props): {
         layout: {
             rows: string;

package/dist/src/components/Legend/Legend.js

@@ -11,35 +11,41 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import { Graph } from "../Graph/Graph";
-import { useGraph } from "../../hooks/use-graph/use-graph";
+import { useDatasets, useGraph, } from "../../hooks/use-graph/use-graph";
 import { cx } from "../../utils/cx/cx";
 import { GradientUtils } from "../../utils/gradient/gradient";
 export const Legend = (_a) => {
-    var { position = "top", alignment = "center", onClick, onMouseEnter, onMouseMove, onMouseLeave } = _a, rest = __rest(_a, ["position", "alignment", "onClick", "onMouseEnter", "onMouseMove", "onMouseLeave"]);
+    var { position = "top", alignment = "center", onClick, onMouseEnter, onMouseMove, onMouseLeave, datasets } = _a, rest = __rest(_a, ["position", "alignment", "onClick", "onMouseEnter", "onMouseMove", "onMouseLeave", "datasets"]);
     const context = useGraph();
+    const dsets = useDatasets(datasets);
     const Element = position === "top" || position === "bottom" ? Graph.Row : Graph.Column;
-    const { viewbox, domain, interactions: { pinned, hovered }, } = context;
-    return (React.createElement(Element, Object.assign({}, rest, { className: cx("flex gap-3", (position === "left" || position === "right") && "flex-col", position === "right" && "pl-4", position === "left" && "pr-4", position === "top" && "pb-3 pt-2", position === "bottom" && "pt-3 pb-2", alignment === "start" && "justify-start", alignment === "end" && "justify-end", alignment === "center" && "justify-center", rest.className) }), context.data
-        .map((dp) => { var _a; return (Object.assign(Object.assign({}, dp), { group: (_a = dp.group) !== null && _a !== void 0 ? _a : "" })); })
-        .sort((a, b) => a.group.localeCompare(b.group))
-        .map((datapoint, i, datapoints) => {
-        var _a, _b;
-        const { id, name, fill, stroke } = datapoint;
-        const disabled = pinned.length && !pinned.includes(String(id)) && !hovered.includes(String(id));
-        const isLastInGroup = ((_a = datapoints[i + 1]) === null || _a === void 0 ? void 0 : _a.group) ? datapoints[i + 1].group !== datapoint.group : false;
-        const bg = fill !== null && fill !== void 0 ? fill : stroke;
-        const deserialized = ((_b = bg === null || bg === void 0 ? void 0 : bg.replace("mask:", "")) === null || _b === void 0 ? void 0 : _b.includes("linear-gradient"))
-            ? GradientUtils.deserialize({
-                gradient: bg.replace("mask:", ""),
-                viewbox,
-                domain,
-            })
-            : bg;
-        return (React.createElement("div", { key: i, className: cx("flex items-center", (onClick || onMouseEnter || onMouseLeave || onMouseMove) && "cursor-pointer user-select-none"), onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(datapoint), onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(datapoint), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(datapoint), onMouseMove: () => onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(datapoint) },
-            React.createElement("div", { className: cx("size-4 mr-1 rounded-full", disabled && "bg-gray-400 opacity-[0.8]"), style: disabled ? undefined : { background: deserialized } }),
-            React.createElement("div", { className: cx("text-nowrap", disabled && "text-gray-400") }, name),
-            isLastInGroup && React.createElement("div", { className: "h-[16px] bg-gray-700 w-[1px] ml-[10px]" })));
-    })));
+    const { interactions: { pinned, hovered }, } = context;
+    const render = (ctx) => {
+        return ctx.data
+            .map((dp) => { var _a; return (Object.assign(Object.assign({}, dp), { group: (_a = dp.group) !== null && _a !== void 0 ? _a : "" })); })
+            .sort((a, b) => a.group.localeCompare(b.group))
+            .map((datapoint, i, datapoints) => {
+            var _a, _b;
+            const { id, name, fill, stroke } = datapoint;
+            const disabled = pinned.length && !pinned.includes(String(id)) && !hovered.includes(String(id));
+            const isLastInGroup = ((_a = datapoints[i + 1]) === null || _a === void 0 ? void 0 : _a.group) ? datapoints[i + 1].group !== datapoint.group : false;
+            const bg = fill !== null && fill !== void 0 ? fill : stroke;
+            const deserialized = ((_b = bg === null || bg === void 0 ? void 0 : bg.replace("mask:", "")) === null || _b === void 0 ? void 0 : _b.includes("linear-gradient"))
+                ? GradientUtils.deserialize({
+                    gradient: bg.replace("mask:", ""),
+                    viewbox: ctx.viewbox,
+                    domain: ctx.domain,
+                })
+                : bg;
+            return (React.createElement("div", { key: i, className: cx("flex items-center", (onClick || onMouseEnter || onMouseLeave || onMouseMove) && "cursor-pointer user-select-none"), onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(datapoint), onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(datapoint), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(datapoint), onMouseMove: () => onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(datapoint) },
+                React.createElement("div", { className: cx("size-4 mr-1 rounded-full", disabled && "bg-gray-400 opacity-[0.8]"), style: disabled ? undefined : { background: deserialized } }),
+                React.createElement("div", { className: cx("text-nowrap", disabled && "text-gray-400") }, name),
+                isLastInGroup && React.createElement("div", { className: "h-[16px] bg-gray-700 w-[1px] ml-[10px]" })));
+        });
+    };
+    return (React.createElement(Element, Object.assign({}, rest, { className: cx("flex gap-3", (position === "left" || position === "right") && "flex-col", position === "right" && "pl-4", position === "left" && "pr-4", position === "top" && "pb-3 pt-2", position === "bottom" && "pt-3 pb-2", alignment === "start" && "justify-start", alignment === "end" && "justify-end", alignment === "center" && "justify-center", rest.className) }),
+        render(context),
+        dsets.map((d) => render(d))));
 };
 Legend.context = (ctx, { position = "top" }) => {
     const rows = (() => {

package/dist/src/components/Lines/Lines.d.ts

@@ -1,17 +1,19 @@
 import React, { ReactNode } from "react";
+import { GraphContext } from "../../hooks/use-graph/use-graph";
 import { CurveUtils } from "../../utils/path/curve";
 interface Props extends React.SVGAttributes<SVGSVGElement> {
     children?: ReactNode;
     curve?: keyof typeof CurveUtils;
     joints?: boolean | {
-        border: boolean;
+        border: string;
     };
     loading?: boolean;
-    dataset?: string;
+    datasets?: string[];
+    context?: GraphContext;
 }
 export declare const Lines: {
-    ({ className, curve, joints, children, loading, dataset }: Props): React.JSX.Element | null;
-    Tooltip: React.ComponentType<React.HTMLAttributes<HTMLDivElement> & {
+    (props: Props): React.JSX.Element | null;
+    Tooltip: React.ComponentType<Omit<React.HTMLAttributes<HTMLDivElement> & {
         tooltip?: ((points: Array<Omit<import("../../export").CartesianDataset[number], "data"> & {
             data: import("../../export").CartesianDataset[number]["data"][number];
         }>, x: number | string | Date) => React.ReactNode) | {
@@ -19,6 +21,29 @@ export declare const Lines: {
             display: (point: import("../../export").CartesianDataset[number]["data"][number]) => React.ReactNode;
         };
         joints?: boolean;
-    }>;
+        zoneRef: React.RefObject<SVGSVGElement | null>;
+    }, "zoneRef">>;
+    Mouse: ({ joints, datasets, onMove, onLeave, onEnter, className }: {
+        cross?: {
+            x: true;
+            y: true;
+        };
+        joints?: boolean | {
+            border: string;
+        };
+        className?: string;
+        datasets?: string[];
+        onMove?: (e: React.MouseEvent<SVGSVGElement>, mouse: ReturnType<typeof import("../../hooks/use-mouse-coordinates").useMouseCoordinates>) => void;
+        onEnter?: (e: React.MouseEvent<SVGSVGElement>) => void;
+        onLeave?: (e: React.MouseEvent<SVGSVGElement>) => void;
+    }) => React.JSX.Element;
+    Joints: ({ context, border, at, strokeWidth }: {
+        at?: {
+            x: string | number | Date;
+        };
+        border?: string;
+        strokeWidth?: number;
+        context: GraphContext;
+    }) => (React.JSX.Element | null)[] | null;
 };
 export {};

package/dist/src/components/Lines/Lines.js

@@ -1,76 +1,67 @@
 import React from "react";
 import { GraphUtils } from "../../utils/graph/graph";
-import { useDataset, useGraph, useIsZooming } from "../../hooks/use-graph/use-graph";
+import { useDatasets, useGraph, useIsZooming } from "../../hooks/use-graph/use-graph";
 import { CurveUtils } from "../../utils/path/curve";
 import { CoordinatesUtils } from "../../utils/coordinates/coordinates";
 import { LinesLoading } from "./components/LinesLoading";
 import { cx, tw } from "../../utils/cx/cx";
-import { LinesTooltip } from "./components/LinesTooltip";
 import { Line } from "./components/Line";
 import { toRgb } from "../../utils/color/to-rgb";
-import { GradientUtils } from "../../utils/gradient/gradient";
-const chunk = (points, size) => {
-    const chunks = [];
-    for (let i = 0; i < points.length; i += size) {
-        chunks.push(points.slice(i, i + size));
+import { LinesTooltipZone } from "./components/LinesTooltipZone";
+import { LinesMouse } from "./components/LinesMouse";
+import { LinesJoints } from "./components/LinesJoints";
+const chunk = (a, s) => {
+    const len = Math.ceil(a.length / s);
+    const r = new Array(len);
+    for (let i = 0, j = 0; i < a.length; i += s, j++) {
+        r[j] = a.slice(i, i + s);
     }
-    return chunks;
+    return r;
 };
-export const Lines = ({ className, curve = "linear", joints, children, loading, dataset }) => {
-    const { interactions: { pinned, hovered }, viewbox, zoom, } = useGraph();
-    const { data, domain, colors } = useDataset(dataset);
+export const Lines = (props) => {
+    const { children, className, curve = "linear", joints, loading = false, datasets, context: ctx } = props;
+    const graph = useGraph();
+    const dsets = useDatasets(datasets);
     const isZooming = useIsZooming();
+    const context = ctx !== null && ctx !== void 0 ? ctx : graph;
+    const { data, viewbox, interactions: { pinned, hovered }, colors, } = context;
     if (!GraphUtils.isXYData(data))
         return null;
-    const xForValue = CoordinatesUtils.xCoordinateFor({ domain, viewbox });
-    const yForValue = CoordinatesUtils.yCoordinateFor({ domain, viewbox });
+    const xyForDataset = CoordinatesUtils.xyCoordinatesForDataset(context);
     const lines = data.map((line, i) => {
         var _a, _b;
-        return Object.assign(Object.assign({}, line), { id: String(line.id), stroke: (_b = (_a = line.stroke) !== null && _a !== void 0 ? _a : colors[i]) !== null && _b !== void 0 ? _b : colors.at(-1), fill: line.fill, data: line.data.map((xy) => ({
-                x: xForValue(xy.x),
-                y: yForValue(xy.y),
-                xValue: xy.x,
-                yValue: xy.y,
-            })) });
+        return Object.assign(Object.assign({}, line), { id: String(line.id), stroke: (_b = (_a = line.stroke) !== null && _a !== void 0 ? _a : colors[i]) !== null && _b !== void 0 ? _b : colors.at(-1), fill: line.fill, coordinates: xyForDataset(line.data) });
     });
     if (loading)
         return React.createElement(LinesLoading, null);
-    return (React.createElement("svg", { viewBox: `0 0 ${viewbox.x} ${viewbox.y}`, preserveAspectRatio: "none", className: tw("absolute overflow-visible lines h-full w-full [grid-area:graph] will-change-transform [transform:translateZ(0)]", isZooming && "block overflow-hidden", className) },
-        lines.map(({ id, stroke, fill, data: points }, i) => {
-            var _a, _b;
-            /* chunking is for high-performance rendering, when chunked GPU performance can improve by 3x+ at cost of allocating more DOM nodes */
-            const isChunkingCandidate = !stroke.includes("linear-gradient") && points.length > 5000 && curve === "linear";
-            const path = isChunkingCandidate ? "" : CurveUtils[curve](points);
-            const disabled = pinned.length && !pinned.includes(id) && !hovered.includes(id);
-            const isInteractiveFill = hovered.includes(id) || (pinned.includes(id) && !disabled) || fill;
-            const identifier = id.replace(/[^a-zA-Z0-9]/g, "");
-            return (React.createElement(React.Fragment, { key: i },
-                isInteractiveFill && !disabled && (React.createElement("linearGradient", { id: identifier, x1: "0", y1: "0", x2: "0", y2: "1" },
-                    React.createElement("stop", { offset: "5%", stopColor: stroke, stopOpacity: "0.5" }),
-                    React.createElement("stop", { offset: "95%", stopColor: stroke, stopOpacity: "0" }))),
-                isChunkingCandidate ? (chunk(points, 1000 /* chunk size determined by GPU benchmarking */).map((chunk, i) => {
-                    const chunkedPath = CurveUtils[curve](chunk);
-                    return (React.createElement(Line, { key: i, d: chunkedPath, stroke: stroke, fill: "transparent", className: cx("lines__stroke", disabled && "stroke-black dark:stroke-white [stroke-opacity:0.1]") }));
-                })) : (React.createElement(React.Fragment, null,
-                    React.createElement(Line, { d: path, stroke: stroke, fill: "transparent", className: cx("lines__stroke", disabled && "stroke-black dark:stroke-white [stroke-opacity:0.1]") }),
-                    isInteractiveFill && points[0] && (React.createElement(Line, { d: path +
-                            `L ${(_b = (_a = points[points.length - 1]) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0} ${viewbox.y} L 0 ${viewbox.y} L ${points[0].x} ${viewbox.y} Z`, stroke: "transparent", fill: fill || `linear-gradient(to bottom, ${toRgb(stroke, 0.5)}, ${toRgb(stroke, 0)})`, strokeOpacity: 0, className: "lines__fill" })))),
-                joints &&
-                    points.map(({ x, y, xValue, yValue }, i) => {
-                        const color = stroke.includes("linear-gradient")
-                            ? GradientUtils.gradientColorFromValue({
-                                viewbox,
-                                domain,
-                                point: { x: xValue, y: yValue },
-                                gradient: stroke,
-                                dataset: points,
-                            })
-                            : stroke;
-                        return (React.createElement(React.Fragment, { key: i },
-                            typeof joints === "object" && joints.border && (React.createElement("path", { d: `M ${x} ${y} h 0.001`, strokeWidth: 8, stroke: "white", strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", className: "lines__joints" })),
-                            React.createElement("path", { d: `M ${x} ${y} h 0.001`, strokeWidth: 7, stroke: color, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", className: "lines__joints" })));
-                    })));
+    return (React.createElement(React.Fragment, null,
+        dsets.map((dset, i) => {
+            return React.createElement(Lines, Object.assign({}, props, { datasets: undefined, context: dset, key: i })); // recurse for each dataset.
         }),
-        children));
+        React.createElement("svg", { viewBox: `0 0 ${viewbox.x} ${viewbox.y}`, preserveAspectRatio: "none", className: tw("absolute overflow-visible lines h-full w-full [grid-area:graph] will-change-transform [transform:translateZ(0)]", isZooming && "block overflow-hidden", className) },
+            lines.map(({ id, stroke, fill, coordinates: points }, i) => {
+                var _a, _b;
+                /* chunking is for high-performance rendering, when chunked GPU performance can improve by 3x+ at cost of allocating more DOM nodes */
+                const isChunkingCandidate = !stroke.includes("linear-gradient") && points.length > 5000 && curve === "linear";
+                const path = isChunkingCandidate ? "" : CurveUtils[curve](points);
+                const disabled = pinned.length && !pinned.includes(id) && !hovered.includes(id);
+                const isInteractiveFill = hovered.includes(id) || (pinned.includes(id) && !disabled) || fill;
+                const identifier = id.replace(/[^a-zA-Z0-9]/g, "");
+                return (React.createElement(React.Fragment, { key: i },
+                    isInteractiveFill && !disabled && (React.createElement("linearGradient", { id: identifier, x1: "0", y1: "0", x2: "0", y2: "1" },
+                        React.createElement("stop", { offset: "5%", stopColor: stroke, stopOpacity: "0.5" }),
+                        React.createElement("stop", { offset: "95%", stopColor: stroke, stopOpacity: "0" }))),
+                    isChunkingCandidate ? (chunk(points, 1000 /* chunk size determined by GPU benchmarking */).map((chunk, i) => {
+                        const chunkedPath = CurveUtils[curve](chunk);
+                        return (React.createElement(Line, { key: i, d: chunkedPath, stroke: stroke, fill: "transparent", className: cx("lines__stroke", disabled && "stroke-black dark:stroke-white [stroke-opacity:0.1]") }));
+                    })) : (React.createElement(React.Fragment, null,
+                        React.createElement(Line, { d: path, stroke: stroke, fill: "transparent", className: cx("lines__stroke", disabled && "stroke-black dark:stroke-white [stroke-opacity:0.1]") }),
+                        isInteractiveFill && points[0] && (React.createElement(Line, { d: path +
+                                `L ${(_b = (_a = points.at(-1)) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0} ${viewbox.y} L 0 ${viewbox.y} L ${points[0].x} ${viewbox.y} Z`, stroke: "transparent", fill: fill || `linear-gradient(to bottom, ${toRgb(stroke, 0.5)}, ${toRgb(stroke, 0)})`, strokeOpacity: 0, className: "lines__fill" })))),
+                    joints && (React.createElement(Lines.Joints, { context: context, border: typeof joints === "object" ? joints["border"] : undefined }))));
+            }),
+            children)));
 };
-Lines.Tooltip = LinesTooltip;
+Lines.Tooltip = LinesTooltipZone;
+Lines.Mouse = LinesMouse;
+Lines.Joints = LinesJoints;

package/dist/src/components/Lines/components/Line.d.ts

@@ -9,5 +9,5 @@ type Props = JSX.IntrinsicElements["path"] & {
         y: number;
     }>;
 };
-export declare const Line: ({ stroke, d, disabled, fill, className, points }: Props) => JSX.Element;
+export declare const Line: ({ stroke, d, disabled, fill, className, points, ...rest }: Props) => JSX.Element;
 export {};

package/dist/src/components/Lines/components/Line.js

@@ -1,6 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React, { useId } from "react";
 import { LinearGradient } from "../../LinearGradient/LinearGradient";
-export const Line = ({ stroke, d, disabled, fill, className, points }) => {
+export const Line = (_a) => {
+    var { stroke, d, disabled, fill, className, points } = _a, rest = __rest(_a, ["stroke", "d", "disabled", "fill", "className", "points"]);
     const strokeId = useId();
     const fillId = useId();
     const clipId = useId();
@@ -14,5 +26,5 @@ export const Line = ({ stroke, d, disabled, fill, className, points }) => {
             React.createElement("rect", { width: "100%", height: "100%", fill: "black" }),
             React.createElement("path", { d: d, fill: "none", stroke: "white", strokeWidth: 1.5, vectorEffect: "non-scaling-stroke" }))),
         isMaskStroke && React.createElement("rect", { width: "100%", height: "100%", fill: `url(#${strokeId})`, mask: `url(#${clipId})` }),
-        !isMaskStroke && (React.createElement("path", { d: d, stroke: isGradientStroke ? `url(#${strokeId})` : stroke, fill: isGradientFill ? `url(#${fillId})` : fill, vectorEffect: "non-scaling-stroke", strokeWidth: 1.5, className: className }))));
+        !isMaskStroke && (React.createElement("path", Object.assign({ d: d, stroke: isGradientStroke ? `url(#${strokeId})` : stroke, fill: isGradientFill ? `url(#${fillId})` : fill, vectorEffect: "non-scaling-stroke", strokeWidth: 1.5, className: className }, rest)))));
 };

package/dist/src/components/Lines/components/LinesJoints.d.ts

@@ -0,0 +1,12 @@
+import { GraphContext } from "../../../hooks/use-graph/use-graph";
+import * as React from "react";
+type Props = {
+    at?: {
+        x: string | number | Date;
+    };
+    border?: string;
+    strokeWidth?: number;
+    context: GraphContext;
+};
+export declare const LinesJoints: ({ context, border, at, strokeWidth }: Props) => (React.JSX.Element | null)[] | null;
+export {};

package/dist/src/components/Lines/components/LinesJoints.js

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { GraphUtils } from "../../../utils/graph/graph";
+import { GradientUtils } from "../../../utils/gradient/gradient";
+import { equals } from "../../../utils/equals/equals";
+import { CoordinatesUtils } from "../../../utils/coordinates/coordinates";
+export const LinesJoints = ({ context, border, at, strokeWidth = 8 }) => {
+    if (!GraphUtils.isXYData(context.data))
+        return null;
+    const xyForPoints = CoordinatesUtils.xyCoordinatesForDataset(context);
+    return context.data.flatMap(({ data, stroke }, i) => {
+        const points = xyForPoints(data);
+        const isLinearGradient = stroke === null || stroke === void 0 ? void 0 : stroke.includes("linear-gradient");
+        if (isLinearGradient && stroke) {
+            return data.map(({ x, y }, ii) => {
+                if ((at === null || at === void 0 ? void 0 : at.x) && !equals(x, at.x))
+                    return null;
+                const color = GradientUtils.gradientColorFromValue({
+                    gradient: stroke,
+                    point: { x, y },
+                    dataset: data,
+                    viewbox: context.viewbox,
+                    domain: context.domain,
+                });
+                const coordinates = points[ii];
+                return (React.createElement(React.Fragment, { key: i + "|" + ii },
+                    border && (React.createElement("path", { stroke: border, fill: border, d: `M ${coordinates.x} ${coordinates.y} h 0.001`, strokeWidth: strokeWidth + 1, strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })),
+                    React.createElement("path", { stroke: color, fill: color, d: `M ${coordinates.x} ${coordinates.y} h 0.001`, strokeWidth: strokeWidth, strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })));
+            });
+        }
+        let path = "";
+        for (let i = 0; i < data.length; i++) {
+            if ((at === null || at === void 0 ? void 0 : at.x) && !equals(data[i].x, at.x))
+                continue; /* Skip if at.x is set and data[i].x !== at.x */
+            path += `M ${points[i].x} ${points[i].y} h 0.001 `; /* += for perf; see V8 and other engine string types. */
+        }
+        return (React.createElement(React.Fragment, { key: i },
+            border && (React.createElement("path", { stroke: border, fill: border, d: path, strokeWidth: strokeWidth + 1, strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })),
+            React.createElement("path", { stroke: stroke, fill: stroke, d: path, strokeWidth: strokeWidth, strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })));
+    });
+};

package/dist/src/components/Lines/components/LinesMouse.d.ts

@@ -0,0 +1,18 @@
+import { useMouseCoordinates } from "../../../hooks/use-mouse-coordinates";
+import { MouseEvent } from "react";
+type Props = {
+    cross?: {
+        x: true;
+        y: true;
+    };
+    joints?: boolean | {
+        border: string;
+    };
+    className?: string;
+    datasets?: string[];
+    onMove?: (e: MouseEvent<SVGSVGElement>, mouse: ReturnType<typeof useMouseCoordinates>) => void;
+    onEnter?: (e: MouseEvent<SVGSVGElement>) => void;
+    onLeave?: (e: MouseEvent<SVGSVGElement>) => void;
+};
+export declare const LinesMouse: ({ joints, datasets, onMove, onLeave, onEnter, className }: Props) => import("react").JSX.Element;
+export {};

package/dist/src/components/Lines/components/LinesMouse.js

@@ -0,0 +1,24 @@
+"use client";
+import { useMouseCoordinates } from "../../../hooks/use-mouse-coordinates";
+import { useRef } from "react";
+import { useDatasets, useGraph, useIsZooming } from "../../../hooks/use-graph/use-graph";
+import { tw } from "../../../utils/cx/cx";
+import { Lines } from "../Lines";
+export const LinesMouse = ({ joints, datasets, onMove, onLeave, onEnter, className }) => {
+    const ref = useRef(null);
+    const isZooming = useIsZooming();
+    const context = useGraph();
+    const { viewbox } = context;
+    const dsets = useDatasets(datasets);
+    const mouse = useMouseCoordinates(ref, { x: true, lazy: true });
+    return (React.createElement("svg", { ref: ref, viewBox: `0 0 ${viewbox.x} ${viewbox.y}`, preserveAspectRatio: "none", className: tw("lines-tooltip h-full w-full [grid-area:graph] absolute overflow-visible [backface-visibility:hidden]", isZooming && "block overflow-hidden", className), onMouseEnter: onEnter, onMouseLeave: onLeave, onMouseMove: (e) => onMove === null || onMove === void 0 ? void 0 : onMove(e, mouse) },
+        (mouse === null || mouse === void 0 ? void 0 : mouse.closest.x) && joints && (React.createElement(Lines.Joints, { context: context, at: { x: mouse.closest.x }, border: typeof joints === "object" ? joints["border"] : undefined })),
+        (mouse === null || mouse === void 0 ? void 0 : mouse.closest.x) &&
+            joints &&
+            dsets.map((dataset, i) => {
+                return (React.createElement(Lines.Joints, { context: dataset, at: { x: mouse.closest.x }, border: typeof joints === "object" ? joints["border"] : undefined, key: i }));
+            }),
+        mouse && (React.createElement(React.Fragment, null,
+            React.createElement("line", { x1: 0, y1: mouse.coordinates.y, x2: viewbox.x, y2: mouse.coordinates.y, stroke: "currentColor", strokeDasharray: "4,4", strokeWidth: 10, className: "stroke-gray-200 dark:stroke-white" }),
+            React.createElement("line", { x1: mouse.coordinates.x, y1: viewbox.y, x2: mouse.coordinates.x, y2: 0, strokeDasharray: "6,6", className: "stroke-gray-200 dark:stroke-white", strokeWidth: 5 })))));
+};

package/dist/src/components/Lines/components/LinesTooltip.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { RefObject } from "react";
 import { CartesianDataset } from "../../../hooks/use-graph/use-graph";
 type Props = React.HTMLAttributes<HTMLDivElement> & {
     tooltip?: ((points: Array<Omit<CartesianDataset[number], "data"> & {
@@ -8,6 +9,7 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
         display: (point: CartesianDataset[number]["data"][number]) => React.ReactNode;
     };
     joints?: boolean;
+    zoneRef: RefObject<SVGSVGElement | null>;
 };
-export declare const LinesTooltip: React.ComponentType<Props>;
+export declare const LinesTooltip: ({ tooltip, joints, zoneRef: ref, ...rest }: Props) => React.JSX.Element | null;
 export {};