nanoplot 0.0.51 → 0.0.52

package/dist/index.css

@@ -307,11 +307,6 @@
   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
 }
 
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
-}
-
 .bg-current {
   background-color: currentColor;
 }
@@ -745,6 +740,10 @@
   transform: translate(-50%,0);
 }
 
+.\[transform\:translate\(-50\%\2c calc\(-100\%-8px\)\)\] {
+  transform: translate(-50%,calc(-100% - 8px));
+}
+
 .\[transform\:translate\(0\2c -50\%\)\] {
   transform: translate(0,-50%);
 }

package/dist/src/components/HydrateContext/HydrateContext.js

@@ -17,18 +17,20 @@ export const HydrateContext = (Component) => {
     return (props) => {
         const client = useContext(ClientContext);
         const [ref, setRef] = useStatefulRef(); /* remount after set-ref */
-        const ctx = useMemo(() => {
+        const content = (() => {
             var _a, _b, _c;
             if (!ref.current)
                 return null;
             if (client)
                 return client; /* <Graph/> was rendered in a browser context, no need to serialize/deserialize */
             /* If Graph didn't send down it's javascript code, (i.e as server component, it's sent us the JSON for context in a script tag */
-            const context = (_c = document.getElementById(((_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.closest("[data-ctx=graph]")) === null || _b === void 0 ? void 0 : _b.id) + "-context")) === null || _c === void 0 ? void 0 : _c.innerText;
-            if (!context)
-                return null;
-            return contextFromParse(context);
-        }, [ref.current]);
+            return (_c = document.getElementById(((_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.closest("[data-ctx=graph]")) === null || _b === void 0 ? void 0 : _b.id) + "-context")) === null || _c === void 0 ? void 0 : _c.innerText;
+        })();
+        const ctx = useMemo(() => {
+            if (typeof content === "string")
+                return contextFromParse(content);
+            return content;
+        }, [content]);
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { className: "[grid-area:graph]", ref: setRef }),
             ctx && (React.createElement(GraphContextClient, { value: ctx },

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

@@ -36,6 +36,7 @@ export const Lines = ({ className, curve = "linear", joints, children, loading,
         return React.createElement(LinesLoading, null);
     return (React.createElement("svg", { viewBox: `0 0 ${viewbox.x} ${viewbox.y}`, preserveAspectRatio: "none", className: cx("lines h-full w-full [grid-area:graph] will-change-transform [transform:translateZ(0)]", className) },
         lines.map(({ id, stroke, data: points }, i) => {
+            var _a, _b;
             const isChunkingCandidate = !stroke.includes("linear-gradient") &&
                 curve ===
                     "linear"; /* chunking is for high-performance rendering, when chunked GPU performance can improve by 3x+ at cost of allocating more DOM nodes */
@@ -52,7 +53,8 @@ export const Lines = ({ className, curve = "linear", joints, children, loading,
                     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]") }),
-                    filled && points[0] && (React.createElement(Line, { d: path + `L ${viewbox.x} ${viewbox.y} L 0 ${viewbox.y} L ${points[0].x} ${viewbox.y} Z`, stroke: "transparent", fill: `linear-gradient(to bottom, ${toRgb(stroke, 0.5)}, ${toRgb(stroke, 0)})`, strokeOpacity: 0, className: "lines__fill" })))),
+                    filled && 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: `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")

package/dist/src/components/Tooltip/Popup.d.ts

@@ -4,6 +4,9 @@ type Props = ComponentProps<"div"> & {
     radius?: number;
     border?: string;
     background?: string;
+    triangle?: {
+        x: number;
+    };
     target?: Position;
     children?: ReactNode;
 };

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

@@ -10,11 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from "react";
-import { cx } from "../../utils/cx/cx";
+import { tw } from "../../utils/cx/cx";
 export const POPUP_TRIANGLE_HEIGHT_PX = 12;
 export const Popup = forwardRef((_a, ref) => {
-    var { radius = 5, children, border, background, target: { side, alignment } = { side: "bottom", alignment: "center" } } = _a, props = __rest(_a, ["radius", "children", "border", "background", "target"]);
-    return (React.createElement("div", Object.assign({}, props, { className: cx("popup", "pseudo-bg-inherit w-max text-white [--a:90deg] [--h:8px] [--p:50%] [--b:1px] p-[12px] [border:var(--b)_solid_#0000] [background:padding-box_linear-gradient(black),border-box_rgb(45,45,45)] z-0", "before:content-[''] before:absolute before:z-[-1] before:[background-size:0_0,_100%_100%]", "after:content-[''] after:absolute after:z-[-1] after:[border:inherit] after:[background-size:100%_100%,0_0]", side === "top" &&
+    var { radius = 5, children, border, background, target: { side, alignment } = { side: "bottom", alignment: "center" }, triangle } = _a, props = __rest(_a, ["radius", "children", "border", "background", "target", "triangle"]);
+    return (React.createElement("div", Object.assign({}, props, { className: tw("popup", "relative isolate pseudo-bg-inherit w-max text-white [--a:90deg] [--h:8px] [--p:50%] [--b:1px] [--p:50%] p-[12px] [border:var(--b)_solid_#0000] [background:padding-box_linear-gradient(black),border-box_rgb(45,45,45)] z-0", "before:content-[''] before:absolute before:z-[-1] before:[background-size:0_0,_100%_100%]", "after:content-[''] after:absolute after:z-[-1] after:[border:inherit] after:[background-size:100%_100%,0_0]", side === "top" &&
             "[background-size:100%_calc(100%+var(--h))] [background-position:bottom] [border-radius:min(var(--r),var(--p)-var(--h)*tan(var(--a)/2))_min(var(--r),100%-var(--p)-var(--h)*tan(var(--a)/2))_var(--r)_var(--r)/var(--r)]", side === "top" &&
             "before:[inset:calc(-1*var(--b)-var(--h))_calc(-1*var(--b))_calc(-1*var(--b))] before:[clip-path:polygon(min(100%,var(--p)+var(--h)*tan(var(--a)/2))_calc(var(--h)+var(--b)),min(100%,var(--p)+var(--h)*tan(var(--a)/2))_var(--h),var(--p)_0,max(0%,var(--p)-var(--h)*tan(var(--a)/2))_var(--h),max(0%,var(--p)-var(--h)*tan(var(--a)/2))_calc(var(--h)+var(--b)))]", side === "top" &&
             "after:[inset:calc(-1*var(--b)-var(--h))_calc(-1*var(--b))_calc(-1*var(--b))] after:[clip-path:polygon(min(100%-var(--b),var(--p)+var(--h)*tan(var(--a)/2)-var(--b)*tan(45deg-var(--a)/4))_calc(var(--h)+var(--b)),var(--p)_calc(var(--b)/sin(var(--a)/2)),max(var(--b),var(--p)-var(--h)*tan(var(--a)/2)+var(--b)*tan(45deg-var(--a)/4))_calc(var(--h)+var(--b)),50%_50%)]", side === "bottom" &&
@@ -26,5 +26,5 @@ export const Popup = forwardRef((_a, ref) => {
             "after:[inset:calc(-1*var(--b))_calc(-1*var(--b))_calc(-1*var(--b))_calc(-1*var(--b)-var(--h))] after:[clip-path:polygon(calc(var(--h)+var(--b))_min(100%-var(--b),var(--p)+var(--h)*tan(var(--a)/2)-var(--b)*tan(45deg-var(--a)/4)),calc(var(--b)/sin(var(--a)/2))_var(--p),calc(var(--h)+var(--b))_max(var(--b),var(--p)-var(--h)*tan(var(--a)/2)+var(--b)*tan(45deg-var(--a)/4)),50%_50%)]", side === "right" &&
             "[background-size:calc(100%+var(--h))_100%] [border-radius:var(--r)/var(--r)_min(var(--r),var(--p)-var(--h)*tan(var(--a)/2))_min(var(--r),100%-var(--p)-var(--h)*tan(var(--a)/2))_var(--r)]", side === "right" &&
             "before:[inset:calc(-1*var(--b))_calc(-1*var(--b)-var(--h))_calc(-1*var(--b))_calc(-1*var(--b))] before:[clip-path:polygon(calc(100%-var(--h)-var(--b))_min(100%,var(--p)+var(--h)*tan(var(--a)/2)),calc(100%-var(--h))_min(100%,var(--p)+var(--h)*tan(var(--a)/2)),100%_var(--p),calc(100%-var(--h))_max(0%,var(--p)-var(--h)*tan(var(--a)/2)),calc(100%-var(--h)-var(--b))_max(0%,var(--p)-var(--h)*tan(var(--a)/2)))]", side === "right" &&
-            "after:[inset:calc(-1*var(--b))_calc(-1*var(--b)-var(--h))_calc(-1*var(--b))_calc(-1*var(--b))] after:[clip-path:polygon(calc(100%-var(--h)-var(--b))_min(100%-var(--b),var(--p)+var(--h)*tan(var(--a)/2)-var(--b)*tan(45deg-var(--a)/4)),calc(100%-var(--b)/sin(var(--a)/2))_var(--p),calc(100%-var(--h)-var(--b))_max(var(--b),var(--p)-var(--h)*tan(var(--a)/2)+var(--b)*tan(45deg-var(--a)/4)),50%_50%)]", props.className), style: Object.assign(Object.assign({}, props.style), { "--r": radius + "px" }), ref: ref }), children));
+            "after:[inset:calc(-1*var(--b))_calc(-1*var(--b)-var(--h))_calc(-1*var(--b))_calc(-1*var(--b))] after:[clip-path:polygon(calc(100%-var(--h)-var(--b))_min(100%-var(--b),var(--p)+var(--h)*tan(var(--a)/2)-var(--b)*tan(45deg-var(--a)/4)),calc(100%-var(--b)/sin(var(--a)/2))_var(--p),calc(100%-var(--h)-var(--b))_max(var(--b),var(--p)-var(--h)*tan(var(--a)/2)+var(--b)*tan(45deg-var(--a)/4)),50%_50%)]", props.className), style: Object.assign(Object.assign({}, props.style), { "--h": "8px", "--a": "90deg", "--r": `${radius}px`, "--b": "1px", "--p": `${triangle ? triangle.x * 100 : 50}%` }), ref: ref }), children));
 });

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

@@ -15,6 +15,9 @@ export type Props = Omit<JSX.IntrinsicElements["div"], "onAnimationStart" | "onD
     children?: React.ReactNode;
     bounds?: React.RefObject<Element>;
     contain?: React.RefObject<Element>;
+    triangle?: {
+        x: number;
+    };
     border?: string;
     collision?: boolean;
 };
@@ -32,6 +35,9 @@ export declare const Tooltip: React.ForwardRefExoticComponent<Omit<React.Detaile
     children?: React.ReactNode;
     bounds?: React.RefObject<Element>;
     contain?: React.RefObject<Element>;
+    triangle?: {
+        x: number;
+    };
     border?: string;
     collision?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -16,12 +16,11 @@ import { Portal } from "../Portal/Portal";
 import { useOnClickOutside } from "../../hooks/use-on-click-outside";
 import { useStatefulRef } from "../../hooks/use-stateful-ref";
 import { Popup } from "./Popup";
-import { mergeRefs } from "../../utils/refs/merge-refs";
 export const Tooltip = forwardRef((_a, ref) => {
     var _b, _c;
-    var { active, border, delay = 0, position = { tooltip: { alignment: "center", side: "bottom" }, target: { alignment: "center", side: "top" } }, trigger, className, style, children, interactable, disabled, onClose = Object, bounds, contain, collision = true } = _a, rest = __rest(_a, ["active", "border", "delay", "position", "trigger", "className", "style", "children", "interactable", "disabled", "onClose", "bounds", "contain", "collision"]);
+    var { active, border, delay = 0, position = { tooltip: { alignment: "center", side: "bottom" }, target: { alignment: "center", side: "top" } }, trigger, className, style, children, interactable, disabled, onClose = Object, bounds, contain, triangle, collision = true } = _a, rest = __rest(_a, ["active", "border", "delay", "position", "trigger", "className", "style", "children", "interactable", "disabled", "onClose", "bounds", "contain", "triangle", "collision"]);
     const target = useRef(null);
-    const [tooltipRef, setTooltipRef] = useStatefulRef();
+    const [tooltipRef, setTooltipRef] = useStatefulRef([ref]);
     const [isInsideTooltip, setIsInsideTooltip] = useState(false);
     const { styles: tetherStyles, positions: { tetherPosition: { alignment, side }, }, } = useTether({
         targetPosition: position.target,
@@ -36,7 +35,6 @@ export const Tooltip = forwardRef((_a, ref) => {
         onCollision: (collides) => {
             if (!collision)
                 return { targetPosition: position.target, tetherPosition: position.tooltip };
-            console.log(collides);
             return { targetPosition: position.target, tetherPosition: position.tooltip };
         },
     });
@@ -49,5 +47,5 @@ export const Tooltip = forwardRef((_a, ref) => {
         : true;
     return (React.createElement(React.Fragment, null,
         trigger(target, open),
-        !disabled && isInsideContainer ? (React.createElement(Portal, null, open && Boolean(children) && (React.createElement(Popup, Object.assign({}, rest, { ref: mergeRefs(setTooltipRef, ref), style: Object.assign(Object.assign({}, tetherStyles), style), border: border, target: { side, alignment }, onMouseEnter: () => setIsInsideTooltip(true), onMouseLeave: () => setIsInsideTooltip(false), className: className }), children)))) : null));
+        !disabled && isInsideContainer ? (React.createElement(Portal, null, open && Boolean(children) && (React.createElement(Popup, Object.assign({}, rest, { ref: setTooltipRef, style: Object.assign(Object.assign({}, tetherStyles), style), border: border, target: { side, alignment }, onMouseEnter: () => setIsInsideTooltip(true), onMouseLeave: () => setIsInsideTooltip(false), triangle: triangle, className: className }), children)))) : null));
 });

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

@@ -9,25 +9,41 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Tooltip } from "./Tooltip";
 import { cx } from "../../utils/cx/cx";
+import { MathUtils } from "../../utils/math/math";
 export const TooltipMouse = (_a) => {
+    var _b;
     var { active, children } = _a, props = __rest(_a, ["active", "children"]);
-    const [mouse, setMouse] = useState({ x: 0, y: 0 });
+    const tooltipRef = useRef(null);
+    const [mouse, setMouse] = useState({ x: 0, y: 0, triangle: { x: 0.5 } });
     useEffect(() => {
-        const onMouseMove = (event) => setMouse({
-            x: event.x,
-            y: event.y,
-        });
+        const onMouseMove = (event) => {
+            var _a, _b, _c, _d;
+            const { width, height } = (_b = (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : { width: 0, height: 0 };
+            const VIEWPORT_PADDING_PX = 0;
+            const w = (width + VIEWPORT_PADDING_PX) / 2; // (because it's centered)
+            const h = (height + VIEWPORT_PADDING_PX) / 2; // (because it's centered)
+            const container = (_d = (_c = props.bounds) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect();
+            const viewbox = {
+                width: container ? container.width + container.left : window.innerWidth,
+                height: container ? container.height + container.top : window.innerHeight,
+            };
+            const x = event.x + w > viewbox.width ? event.x - (event.x + w - viewbox.width) : event.x;
+            const y = event.y + h > viewbox.height ? event.y - (event.y + h - viewbox.height) : event.y;
+            const xPercentage = (event.x + w - viewbox.width) / width;
+            setMouse({
+                x,
+                y,
+                triangle: { x: MathUtils.clamp(0.5 + xPercentage, 0.5, 0.9) },
+            });
+        };
         window.addEventListener("mousemove", onMouseMove);
         return () => window.removeEventListener("mousemove", onMouseMove);
-    }, []);
-    // useEffect(() => {
-    // 	console.log(tooltipRef);
-    // }, [tooltipRef.current]);
-    return (React.createElement(Tooltip, Object.assign({ active: active, position: {
+    }, [(_b = props.bounds) === null || _b === void 0 ? void 0 : _b.current, tooltipRef.current]);
+    return (React.createElement(Tooltip, Object.assign({}, props, { active: active, position: {
             target: { alignment: "center", side: "top" },
             tooltip: { alignment: "center", side: "bottom" },
-        }, trigger: () => null, collision: false }, props, { style: Object.assign({ left: mouse.x + window.scrollX, top: mouse.y + window.scrollY }, props.style), className: cx("absolute pointer-events-none", props.className) }), children));
+        }, trigger: () => null, collision: false, style: Object.assign(Object.assign({}, props.style), { left: mouse.x + window.scrollX, top: mouse.y + window.scrollY }), className: cx("absolute pointer-events-none [transform:translate(-50%,calc(-100%-8px))]", props.className), triangle: { x: mouse.triangle.x }, ref: tooltipRef }), children));
 };

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

@@ -7,12 +7,11 @@ type Props = {
         scale: number;
     };
     gradient?: `linear-gradient(${string})`;
-    tooltips?: Record<string, ReactNode>;
     className?: string;
     children?: ReactNode;
 };
 export declare const Worldmap: {
-    ({ tooltips, translate, gradient, className, children }: Props): React.JSX.Element | null;
+    ({ translate, gradient, className, children }: Props): React.JSX.Element | null;
     Tooltip: React.ComponentType<{
         tooltip: (datapoint: import("../../export").SegmentDataset[number]) => ReactNode;
     }>;

package/dist/src/components/Worldmap/Worldmap.js

@@ -2,14 +2,12 @@ import React, { useId } from "react";
 import { useGraph } from "../../hooks/use-graph/use-graph";
 import { cx } from "../../utils/cx/cx";
 import { MathUtils } from "../../utils/math/math";
-import { PathUtils } from "../../utils/path/path";
-import { Popup } from "../Tooltip/Popup";
 
 import { GradientUtils } from "../../utils/gradient/gradient";
 import { GraphUtils } from "../../utils/graph/graph";
 import { WorldmapTooltip } from "./components/WorldmapTooltip";
-export const Worldmap = ({ tooltips, translate, gradient, className, children }) => {
-    var _a, _b, _c, _d;
+export const Worldmap = ({ translate, gradient, className, children }) => {
+    var _a, _b, _c;
     const { data, viewbox, domain } = useGraph();
     const id = useId();
     if (!GraphUtils.isSegmentData(data))
@@ -37,21 +35,6 @@ export const Worldmap = ({ tooltips, translate, gradient, className, children })
             })();
             return (React.createElement("path", { key: i, d: path, fill: fill, stroke: (_b = (_a = dataset[iso]) === null || _a === void 0 ? void 0 : _a.stroke) !== null && _b !== void 0 ? _b : "white", strokeWidth: 0.5, "data-iso": iso, className: `hover:stroke-white hover:stroke-[1.5] worldmap__country_${iso} worldmap__country` }));
         })),
-        React.createElement("div", { className: "aspect-[1090/539] absolute [grid-area:graph] pointer-events-none h-full w-auto", style: { left: `${(_d = translate === null || translate === void 0 ? void 0 : translate.x) !== null && _d !== void 0 ? _d : 0}px` } },
-            React.createElement("div", { className: "relative h-full w-full" }, Object.entries(countries).map(([iso, path], i) => {
-                const { x, y } = PathUtils.center(path);
-                if (!dataset[iso])
-                    return null;
-                const left = MathUtils.scale(x, 1090, 100);
-                const top = MathUtils.scale(y, 539, 100);
-                return (React.createElement(Popup, { key: i, target: { side: "bottom", alignment: "center" }, style: {
-                        left: left > 85 ? undefined : left + "%",
-                        right: left > 85 ? 100 - left + "%" : undefined,
-                        top: top > 85 ? undefined : top + "%",
-                        bottom: top > 85 ? 100 - top + "%" : undefined,
-                    }, border: "rgb(45, 45, 45)", className: cx(`bg-black pointer-events-none`, styles.tooltip), "data-iso": iso },
-                    React.createElement("div", null, (tooltips === null || tooltips === void 0 ? void 0 : tooltips[iso]) ? tooltips[iso] : iso)));
-            }))),
         children));
 };
 Worldmap.Tooltip = WorldmapTooltip;

package/dist/src/components/Worldmap/components/WorldmapTooltip.js

@@ -1,16 +1,18 @@
 "use client";
 import { useEffect, useState } from "react";
-import { useGraph } from "../../../hooks/use-graph/use-graph";
+import { useGraph, useGraphRef } from "../../../hooks/use-graph/use-graph";
 import { HydrateContext } from "../../HydrateContext/HydrateContext";
 import { GraphUtils } from "../../../utils/graph/graph";
 import { TooltipMouse } from "../../Tooltip/TooltipMouse";
 const WorldmapTooltipComponent = ({ tooltip }) => {
     const { id, data } = useGraph();
-    const [position, setPosition] = useState();
+    const [datapoint, setDatapoint] = useState();
+    const ref = useGraphRef();
     if (!GraphUtils.isSegmentData(data))
         return null;
     const dataset = Object.fromEntries(data.map((datapoint) => { var _a; return [(_a = datapoint.id) !== null && _a !== void 0 ? _a : datapoint.name, datapoint]; }));
     useEffect(() => {
+        /* Keeps 'Worldmap' as server component */
         const countries = Array.from(document.querySelectorAll(`#${CSS.escape(id)} [data-iso]`)).filter((country) => {
             return country instanceof Element && country.getAttribute("data-iso") !== null;
         });
@@ -24,23 +26,21 @@ const WorldmapTooltipComponent = ({ tooltip }) => {
             const datapoint = dataset[iso];
             if (!datapoint)
                 return;
-            return setPosition({
-                x: e.clientX + window.scrollX,
-                y: e.clientY + window.scrollY,
-                datapoint: Object.assign(Object.assign({}, dataset[iso]), { stroke: window.getComputedStyle(target).fill, fill: window.getComputedStyle(target).fill }),
-            });
+            return setDatapoint(Object.assign(Object.assign({}, dataset[iso]), { stroke: window.getComputedStyle(target).fill, fill: window.getComputedStyle(target).fill }));
         };
-        const onMouseLeave = () => setPosition(undefined);
+        const onMouseLeave = () => setDatapoint(undefined);
         const controller = new AbortController();
-        countries.forEach((country) => country.addEventListener("mousemove", onMouseMove, { signal: controller.signal, passive: true }));
-        countries.forEach((country) => country.addEventListener("mouseleave", onMouseLeave, { signal: controller.signal, passive: true }));
+        countries.forEach((country) => {
+            country.addEventListener("mouseleave", onMouseLeave, { signal: controller.signal, passive: true });
+            country.addEventListener("mousemove", onMouseMove, { signal: controller.signal, passive: true });
+        });
         return () => controller.abort();
     });
-    if (!position)
+    if (!datapoint)
         return null;
-    const content = tooltip(position.datapoint);
+    const content = tooltip(datapoint);
     if (!content)
         return null;
-    return React.createElement(TooltipMouse, { active: true }, "HELLO WORLD");
+    return (React.createElement(TooltipMouse, { active: true, bounds: ref }, tooltip(datapoint)));
 };
 export const WorldmapTooltip = HydrateContext(WorldmapTooltipComponent);

package/dist/src/hooks/use-graph/use-graph.d.ts

@@ -67,3 +67,4 @@ export declare const GraphContextProvider: ({ value, children }: {
 }) => import("react").JSX.Element;
 export declare const useGraph: () => GraphContext;
 export declare const useDataset: (dataset?: string) => Pick<GraphContext, "data" | "domain" | "colors">;
+export declare const useGraphRef: () => import("react").RefObject<HTMLDivElement>;

package/dist/src/hooks/use-graph/use-graph.js

@@ -1,5 +1,7 @@
+import { useLayoutEffect } from "react";
 import { GraphContextServer, useGraphServer } from "./use-server-graph";
 import { GraphContextClient, useGraphClient } from "./use-client-graph";
+import { useStatefulRef } from "../use-stateful-ref";
 export const useGraphColumn = () => {
     const ctx = useGraph();
     const columns = ctx.layout.columns.split(" ");
@@ -15,3 +17,14 @@ export const useDataset = (dataset) => {
     const context = useGraph();
     return dataset ? context.datasets[dataset] : context;
 };
+export const useGraphRef = () => {
+    const [ref, setRef] = useStatefulRef();
+    const { id } = useGraph();
+    useLayoutEffect(() => {
+        const element = document.getElementById(id);
+        if (!element || !(element instanceof HTMLDivElement))
+            return;
+        setRef(element);
+    }, []);
+    return ref;
+};

package/dist/src/hooks/use-stateful-ref.d.ts

@@ -1,2 +1,2 @@
-import { RefCallback, RefObject } from "react";
-export declare const useStatefulRef: <T extends Element>() => [RefObject<T>, RefCallback<T>];
+import React, { RefCallback, RefObject } from "react";
+export declare const useStatefulRef: <T extends Element>(refs?: React.ForwardedRef<T>[]) => [RefObject<T>, RefCallback<T>];

package/dist/src/hooks/use-stateful-ref.js

@@ -1,11 +1,17 @@
 import { useCallback, useRef, useState } from "react";
-export const useStatefulRef = () => {
+export const useStatefulRef = (refs = []) => {
     const [, update] = useState(0);
     const ref = useRef(null);
     const setRef = useCallback((element) => {
         /* stable function identity in ref prop on elements prevents unnecessary re-runs (see react docs) */
         update((key) => key + 1);
         ref.current = element;
+        refs.forEach((inputRef) => {
+            if (typeof inputRef === "function")
+                inputRef(element);
+            if (inputRef && "current" in inputRef)
+                inputRef.current = element;
+        });
     }, []);
     return [ref, setRef];
 };

package/dist/src/models/domain/domain.d.ts

@@ -1,9 +1,10 @@
 export type interval = "days" | "months" | "years" | "hours" | "minutes" | "seconds" | "milliseconds";
 export type MinMax = "min" | "max";
-export type Expression = "auto" | "min" | "max" | `${MinMax} - ${number}` | `${MinMax} - ${number}%` | `${MinMax} - ${number} ${interval}` | `${MinMax} + ${number}%` | `${MinMax} + ${number}` | `${MinMax} + ${number} ${interval}` | number;
+export type ISODuration = `P${string}`;
+export type Expression = "auto" | "min" | "max" | `${MinMax} - ${number}` | `${MinMax} - ${number}%` | `${MinMax} - ${ISODuration}` | `${MinMax} + ${number}%` | `${MinMax} + ${number}` | `${MinMax} + ${ISODuration}` | number;
 type From = "auto" | Expression | number;
 type To = "auto" | Expression | number;
-type Jumps = "auto" | `every ${number} ${interval}` | number;
+type Jumps = "auto" | ISODuration | number;
 export type FromToJumps = {
     from?: From;
     to?: To;

package/dist/src/utils/coordinates/coordinates.js

@@ -1,6 +1,6 @@
 export const CoordinatesUtils = {
     xCoordinateFor: ({ domain, viewbox }) => {
-        var _a, _b;
+        var _a, _b, _c;
         const length = domain.x.length;
         const xTicks = domain.x.map((d) => +d.tick);
         const coordinates = domain.x.map((d) => d.coordinate);
@@ -13,6 +13,13 @@ export const CoordinatesUtils = {
         const crange = coordinates[length - 1] - coordinates[0];
         const isDateTime = ((_a = domain.x[0]) === null || _a === void 0 ? void 0 : _a.tick) instanceof Date;
         const isNumericalScale = typeof ((_b = domain.x[0]) === null || _b === void 0 ? void 0 : _b.tick) === "number";
+        const isCategoricalScale = typeof ((_c = domain.x[0]) === null || _c === void 0 ? void 0 : _c.tick) === "string";
+        if (isCategoricalScale) {
+            return (value) => {
+                var _a, _b;
+                return (_b = (_a = domain.x.find((d) => d.tick === value)) === null || _a === void 0 ? void 0 : _a.coordinate) !== null && _b !== void 0 ? _b : 0;
+            };
+        }
         if (isLinearScale && (isDateTime || isNumericalScale)) {
             return (value) => {
                 const v = (value instanceof Date ? value.getTime() : value); /* .getTime() on date's required; Performance improvement */
@@ -43,7 +50,7 @@ export const CoordinatesUtils = {
         };
     },
     yCoordinateFor: ({ domain, viewbox }) => {
-        var _a, _b;
+        var _a, _b, _c;
         const length = domain.y.length;
         const yTicks = domain.y.map((d) => +d.tick);
         const coordinates = domain.y.map((d) => d.coordinate);
@@ -56,6 +63,13 @@ export const CoordinatesUtils = {
         const crange = coordinates[length - 1] - coordinates[0];
         const isNumericalScale = typeof ((_a = domain.y[0]) === null || _a === void 0 ? void 0 : _a.tick) === "number";
         const isDateTimeScale = ((_b = domain.y[0]) === null || _b === void 0 ? void 0 : _b.tick) instanceof Date;
+        const isCategoricalScale = typeof ((_c = domain.y[0]) === null || _c === void 0 ? void 0 : _c.tick) === "string";
+        if (isCategoricalScale) {
+            return (value) => {
+                var _a, _b;
+                return (_b = (_a = domain.y.find((d) => d.tick === value)) === null || _a === void 0 ? void 0 : _a.coordinate) !== null && _b !== void 0 ? _b : 0;
+            };
+        }
         if (isLinearScale && (isNumericalScale || isDateTimeScale)) {
             return (value) => {
                 const v = (value instanceof Date ? value.getTime() : value); /* .getTime() on date's required; Performance improvement */

package/dist/src/utils/cx/cx.js

@@ -9,12 +9,19 @@ export const cx = (...args) => {
         .filter(Boolean)
         .join(" ");
 };
-/* deduplicates tailwind classes - localized mutation for perf. */
+const unique = {
+    absolute: "position",
+    relative: "position",
+    static: "position",
+};
+/* deduplicates tailwind classes - localized mutation for perf, perf version */
 export const tw = (...args) => {
     const result = {};
     cx(...args)
         .replace(/\s+/g, " ")
         .split(" ")
-        .forEach((cls) => (result[cls.split("-")[0]] = cls));
+        .forEach((cls) => {
+        return (result[unique[cls] || cls.split("-")[0]] = cls);
+    });
     return Object.values(result).join(" ");
 };

package/dist/src/utils/domain/utils/date-domain.d.ts

@@ -0,0 +1,18 @@
+export declare const parseDuration: (iso: string) => {
+    years: number;
+    months: number;
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+};
+export declare const getFloorDateFromDuration: (d: Date, duration: string) => Date;
+export declare const getDateDomain: ({ min, max, duration }: {
+    min: Date;
+    max: Date;
+    duration: string;
+}) => Date[];
+export declare const getCeilDateFromDuration: (d: Date, duration: string) => Date;
+export declare function getDurationFromRange(start: Date, end: Date): string;
+export declare const removeDurationFromDate: (dte: Date, duration: string) => Date;
+export declare const addDurationToDate: (dte: Date, duration: string) => Date;