nanoplot 0.0.78 → 0.0.80

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { GraphContext } from "../../hooks/use-graph/use-graph";
+import { InternalGraphContext } from "../../hooks/use-graph/use-graph";
 import { CurveUtils } from "../../utils/path/curve";
 interface Props extends React.SVGAttributes<SVGSVGElement> {
     children?: ReactNode;
@@ -8,7 +8,7 @@ interface Props extends React.SVGAttributes<SVGSVGElement> {
 }
 export declare const Area: {
     ({ className, curve, children, loading }: Props): React.JSX.Element | null;
-    context(ctx: GraphContext): GraphContext;
+    context(ctx: InternalGraphContext): InternalGraphContext;
     Tooltip: React.ComponentType<Omit<React.HTMLAttributes<HTMLDivElement> & {
         tooltip?: ((points: Array<Omit<import("../../export").CartesianDataset[number], "data"> & {
             data: import("../../export").CartesianDataset[number]["data"][number];

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

@@ -1,7 +1,7 @@
 import React, { ComponentProps } from "react";
 import { HorizontalBars } from "./components/HorizontalBars";
 import { VerticalBars } from "./components/VerticalBars";
-import { GraphContext } from "../../hooks/use-graph/use-graph";
+import { InternalGraphContext } from "../../hooks/use-graph/use-graph";
 type VerticalProps = {
     horizontal?: false;
 } & ComponentProps<typeof VerticalBars>;
@@ -10,6 +10,6 @@ type HorizontalProps = {
 } & ComponentProps<typeof HorizontalBars>;
 export declare const Bars: {
     ({ horizontal, ...props }: VerticalProps | HorizontalProps): React.JSX.Element;
-    context(ctx: GraphContext): GraphContext;
+    context(ctx: InternalGraphContext): InternalGraphContext;
 };
 export {};

package/dist/src/components/Bars/components/HorizontalBars.d.ts

@@ -1,21 +1,25 @@
 import React, { MouseEvent } from "react";
-import { CartesianDatasetDefaulted } from "../../../hooks/use-graph/use-graph";
-import { Rect } from "./Rect";
-type Rect = Omit<CartesianDatasetDefaulted[number], "data"> & {
-    data: CartesianDatasetDefaulted[number]["data"][number];
-};
-type Props = Omit<React.SVGAttributes<SVGSVGElement>, "onMouseEnter" | "onMouseLeave"> & {
+import { InternalCartesianDataset, Simplify } from "../../../hooks/use-graph/use-graph";
+type Segment = Simplify<Omit<InternalCartesianDataset[number], "data"> & {
+    data: InternalCartesianDataset[number]["data"][number];
+}>;
+type Props = Omit<React.SVGAttributes<SVGSVGElement>, "onMouseEnter" | "onMouseLeave" | "fill" | "stroke"> & {
     children?: React.ReactNode;
     size?: number;
     radius?: number;
     anchor?: number;
-    labels?: boolean | ((value: string | number | Date) => string) | {
+    labels?: boolean | ((segment: Segment) => string) | {
         position: "above" | "center";
         collision?: boolean;
-        display: (value: string | number | Date) => string;
+        display: (segment: Segment) => string;
     };
-    onMouseEnter?: (event: MouseEvent, rect: Rect) => void;
+    /**
+     * Function that can change the 'fill' for individual segments based on some condition.
+     */
+    fill?: (segment: Segment) => string;
+    stroke?: (segment: Segment) => string;
+    onMouseEnter?: (rect: Segment, event: MouseEvent) => void;
     onMouseLeave?: (event: MouseEvent) => void;
 };
-export declare const HorizontalBars: ({ children, labels, size, radius, anchor, className }: Props) => React.JSX.Element | null;
+export declare const HorizontalBars: ({ children, fill, stroke, labels, size, radius, anchor, onMouseEnter, onMouseLeave, className, }: Props) => React.JSX.Element | null;
 export {};

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

@@ -19,7 +19,7 @@ import { Rect } from "./Rect";
 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 }) => {
+export const HorizontalBars = ({ children, fill, stroke, labels, size = 50, radius = 0, anchor = 0, onMouseEnter, onMouseLeave, className, }) => {
     const context = useGraph();
     if (!GraphUtils.isXYData(context.data))
         return null;
@@ -47,7 +47,9 @@ export const HorizontalBars = ({ children, labels, size = 50, radius = 0, anchor
         React.createElement("svg", { viewBox: `0 0 ${context.viewbox.x} ${context.viewbox.y}`, className: cx("horizontal-bars [grid-area:graph] h-full w-full", className), preserveAspectRatio: "none" },
             dataset.map((_a, index) => {
                 var { x1, x2, y1, y2 } = _a, bar = __rest(_a, ["x1", "x2", "y1", "y2"]);
-                return (React.createElement(Rect, { key: index, x1: x1, x2: x2, y2: y2, y1: y1, fill: String(bar.fill), stroke: bar.stroke, radius: bar.radius, glow: false, horizontal: true, className: "bars__bar" }));
+                const fillColor = fill ? fill(bar) : bar.fill;
+                const strokeColor = stroke ? stroke(bar) : bar.stroke;
+                return (React.createElement(Rect, { key: index, x1: x1, x2: x2, y2: y2, y1: y1, fill: fillColor, stroke: strokeColor, radius: bar.radius, glow: false, horizontal: true, onMouseEnter: onMouseEnter ? (event) => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(bar, event) : undefined, onMouseLeave: onMouseLeave, className: "bars__bar" }));
             }),
             children),
         labels &&
@@ -60,8 +62,8 @@ export const HorizontalBars = ({ children, labels, size = 50, radius = 0, anchor
                 const label = (() => {
                     var _a;
                     if (typeof labels === "object" && "position" in labels)
-                        return labels.display(bar.data.x);
-                    return (_a = (labels === true ? bar.data.y : labels(bar.data.y))) !== null && _a !== void 0 ? _a : "";
+                        return labels.display(bar);
+                    return (_a = (labels === true ? bar.data.y : labels(bar))) !== null && _a !== void 0 ? _a : "";
                 })();
                 const breakpoint = [2, 4, 6, 8, 10, 15, 20].find((bp) => bp >= label.toString().length);
                 return (React.createElement(overlay.div, { key: i, className: "bars__label @container-[size] absolute text-center", style: {

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

@@ -27,7 +27,7 @@ export const Rect = (_a) => {
     return (React.createElement(React.Fragment, null,
         isFillGradient && rest.fill && React.createElement(LinearGradient, { id: fillId, gradient: rest.fill }),
         isGradientStroke && rest.stroke && React.createElement(LinearGradient, { id: strokeId, gradient: rest.stroke }),
-        React.createElement("path", { id: clipId, d: path }),
+        React.createElement("path", { id: clipId, d: path, fill: isFillGradient ? `url(#${fillId})` : rest.fill, stroke: isGradientStroke ? `url(#${strokeId})` : rest.stroke }),
         React.createElement("clipPath", { id: clip },
             React.createElement("use", { xlinkHref: "#" + clipId })),
         glow && (React.createElement(React.Fragment, null,

package/dist/src/components/Bars/components/VerticalBars.d.ts

@@ -1,23 +1,27 @@
 import React, { MouseEvent, ReactNode } from "react";
-import { CartesianDatasetDefaulted } from "../../../hooks/use-graph/use-graph";
-import { Rect } from "./Rect";
-type Rect = Omit<CartesianDatasetDefaulted[number], "data"> & {
-    data: CartesianDatasetDefaulted[number]["data"][number];
-};
-type Props = Omit<React.SVGAttributes<SVGSVGElement>, "onMouseEnter" | "onMouseLeave"> & {
+import { InternalCartesianDataset, Simplify } from "../../../hooks/use-graph/use-graph";
+type Segment = Simplify<Omit<InternalCartesianDataset[number], "data"> & {
+    data: InternalCartesianDataset[number]["data"][number];
+}>;
+type Props = Omit<React.SVGAttributes<SVGSVGElement>, "onMouseEnter" | "onMouseLeave" | "fill" | "stroke"> & {
     children?: ReactNode;
     loading?: boolean;
     glow?: boolean;
     size?: number;
     radius?: number;
     anchor?: number;
-    labels?: boolean | ((value: string | number | Date) => string) | {
+    labels?: boolean | ((segment: Segment) => string) | {
         position: "above" | "center";
         collision?: boolean;
-        display: (value: string | number | Date) => string;
+        display: (segment: Segment) => string;
     };
-    onMouseEnter?: (event: MouseEvent, rect: Rect) => void;
+    /**
+     * Function that can change the 'fill' for individual segments based on some condition.
+     */
+    fill?: (segment: Segment) => string;
+    stroke?: (segment: Segment) => string;
+    onMouseEnter?: (rect: Segment, event: MouseEvent) => void;
     onMouseLeave?: (event: MouseEvent) => void;
 };
-export declare const VerticalBars: ({ children, size, anchor, labels, radius, glow, className, loading, onMouseEnter, onMouseLeave, ...rest }: Props) => React.JSX.Element | null;
+export declare const VerticalBars: ({ children, fill, stroke, size, anchor, labels, radius, glow, className, loading, onMouseEnter, onMouseLeave, ...rest }: Props) => React.JSX.Element | null;
 export {};

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

@@ -21,7 +21,7 @@ import { scale } from "../../../utils/math/math";
 import { overlay } from "../../Overlay/Overlay";
 import { ColorUtils } from "../../../utils/color/color";
 export const VerticalBars = (_a) => {
-    var { children, size = 50, anchor = 0, labels = true, radius = 0, glow, className, loading, onMouseEnter, onMouseLeave } = _a, rest = __rest(_a, ["children", "size", "anchor", "labels", "radius", "glow", "className", "loading", "onMouseEnter", "onMouseLeave"]);
+    var { children, fill, stroke, size = 50, anchor = 0, labels, radius = 0, glow, className, loading, onMouseEnter, onMouseLeave } = _a, rest = __rest(_a, ["children", "fill", "stroke", "size", "anchor", "labels", "radius", "glow", "className", "loading", "onMouseEnter", "onMouseLeave"]);
     const context = useGraph();
     if (!GraphUtils.isXYData(context.data))
         return null;
@@ -56,10 +56,12 @@ export const VerticalBars = (_a) => {
         .filter((x) => !!x);
     const isBelowAnchor = bars.some((bar) => +bar.data.y < anchor); /* is any bar below the anchor */
     return (React.createElement(React.Fragment, null,
-        React.createElement("svg", Object.assign({}, rest, { viewBox: `0 0 ${context.viewbox.x} ${context.viewbox.y}`, className: cx("horizontal-bars [grid-area:graph] h-full w-full bars", className), preserveAspectRatio: "none" }),
+        React.createElement("svg", Object.assign({}, rest, { viewBox: `0 0 ${context.viewbox.x} ${context.viewbox.y}`, className: cx("vertical-bars [grid-area:graph] h-full w-full bars", className), preserveAspectRatio: "none" }),
             dataset.map((_a, index) => {
                 var { x1, x2, y1, y2 } = _a, bar = __rest(_a, ["x1", "x2", "y1", "y2"]);
-                return (React.createElement(Rect, { key: index, x1: x1, x2: x2, y2: y2, y1: y1, fill: String(bar.fill), stroke: bar.stroke, radius: bar.radius, glow: glow, onMouseEnter: (event) => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(event, bar), onMouseLeave: onMouseLeave, className: "bars__bar" }));
+                const fillColor = fill ? fill(bar) : bar.fill;
+                const strokeColor = stroke ? stroke(bar) : bar.stroke;
+                return (React.createElement(Rect, { key: index, x1: x1, x2: x2, y2: y2, y1: y1, fill: fillColor, stroke: strokeColor, radius: bar.radius, glow: glow, onMouseEnter: onMouseEnter ? (event) => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(bar, event) : undefined, onMouseLeave: onMouseLeave, className: "bars__bar" }));
             }),
             isBelowAnchor && (React.createElement("path", { strokeWidth: 2, vectorEffect: "non-scaling-stroke", stroke: "red", className: "stroke-dark-priority-100", d: `M 0 ${yForValue(anchor)} L ${context.viewbox.x} ${yForValue(anchor)}` })),
             children),
@@ -73,8 +75,8 @@ export const VerticalBars = (_a) => {
                 const label = (() => {
                     var _a;
                     if (typeof labels === "object" && "position" in labels)
-                        return labels.display(bar.data.y);
-                    return (_a = (labels === true ? bar.data.y : labels(bar.data.y))) !== null && _a !== void 0 ? _a : "";
+                        return labels.display(bar);
+                    return (_a = (labels === true ? bar.data.y : labels(bar))) !== null && _a !== void 0 ? _a : "";
                 })();
                 const breakpoint = [2, 4, 5, 6, 8, 10, 15, 20].find((bp) => bp >= label.toString().replace(".", "").length);
                 return (React.createElement(overlay.div, { key: i, className: "bars__label @container-[size] absolute text-center", style: {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { GraphContext } from "../../hooks/use-graph/use-graph";
+import { InternalGraphContext } from "../../hooks/use-graph/use-graph";
 type Props = React.HTMLAttributes<HTMLDivElement> & {
     position: "top" | "bottom";
     alignment?: "start" | "center" | "end";
@@ -12,7 +12,7 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
 };
 export declare const GradientLegend: {
     ({ position, alignment, gradient, scalars, labels, ...rest }: Props): React.JSX.Element;
-    context(ctx: GraphContext, props: Props): {
+    context(ctx: InternalGraphContext, props: Props): {
         layout: {
             rows: string;
             columns: string;
@@ -29,7 +29,7 @@ export declare const GradientLegend: {
             x: number;
             y: number;
         };
-        data: import("../../hooks/use-graph/use-graph").CartesianDatasetDefaulted | import("../../hooks/use-graph/use-graph").SegmentDatasetDefaulted;
+        data: import("../../hooks/use-graph/use-graph").InternalSegmentDataset | import("../../hooks/use-graph/use-graph").InternalCartesianDataset;
         zoom: {
             x: [number, number];
             y: [number, number];
@@ -49,7 +49,7 @@ export declare const GradientLegend: {
             hovered: string[];
             pinned: string[];
         };
-        datasets: Record<string, Pick<GraphContext, "domain" | "colors" | "data">>;
+        datasets: Record<string, Pick<InternalGraphContext, "domain" | "colors" | "data">>;
     };
 };
 export {};

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

@@ -21,6 +21,8 @@ export const GradientLegend = (_a) => {
             return { label: tick, left: scale(i, ticks.length - 1, 100) + "%" };
         return { label: tick.tick, left: tick.percent + "%" };
     });
+    // linear-gradient(to right, red 1590, blue 120000);
+    // gradient`linear-gradient(to right, red 1590, blue ${new Date()})`
     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) }),
         React.createElement("div", { className: "relative mb-[40px]" },
             React.createElement("div", { className: "text-xs text-gray-500" }, "Value \u2192"),

package/dist/src/components/Graph/Graph.js

@@ -31,7 +31,7 @@ const GraphComponent = ({ data = [], gap, children, interactions, datasets = {},
         data: data,
         gap: { top: (_c = gap === null || gap === void 0 ? void 0 : gap.top) !== null && _c !== void 0 ? _c : 0, left: (_d = gap === null || gap === void 0 ? void 0 : gap.left) !== null && _d !== void 0 ? _d : 0, right: (_e = gap === null || gap === void 0 ? void 0 : gap.right) !== null && _e !== void 0 ? _e : 0, bottom: (_f = gap === null || gap === void 0 ? void 0 : gap.bottom) !== null && _f !== void 0 ? _f : 0 },
         attributes: {
-            className: "@container/graph [container-type:size_!important] nanoplot relative grid h-full w-full isolate",
+            className: "@container/graph relative grid h-full w-full isolate",
         },
         domain: {
             x: [],
@@ -84,20 +84,14 @@ const GraphComponent = ({ data = [], gap, children, interactions, datasets = {},
                 y: yDomainZoomed,
             }, data: GraphUtils.isXYData(dataset.data)
                 ? dataset.data.map((dp, i) => {
-                    var _a, _b, _c;
-                    /* if there's a fill and no stroke, use fill as the stroke, otherwise use stroke color, or default color */
-                    return Object.assign({ id: (_a = dp.id) !== null && _a !== void 0 ? _a : dp.name, stroke: typeof dp.fill === "string" && !dp.stroke
-                            ? dp.fill
-                            : ((_c = (_b = dp.stroke) !== null && _b !== void 0 ? _b : dataset.colors[i]) !== null && _c !== void 0 ? _c : dataset.colors.at(-1)) }, dp);
+                    var _a, _b, _c, _d, _e, _f, _g;
+                    return Object.assign({ id: (_a = dp.id) !== null && _a !== void 0 ? _a : dp.name, stroke: (_d = (_c = (_b = dp.stroke) !== null && _b !== void 0 ? _b : dp.fill) !== null && _c !== void 0 ? _c : dataset.colors[i]) !== null && _d !== void 0 ? _d : dataset.colors.at(-1), fill: (_g = (_f = (_e = dp.fill) !== null && _e !== void 0 ? _e : dp.stroke) !== null && _f !== void 0 ? _f : dataset.colors[i]) !== null && _g !== void 0 ? _g : dataset.colors.at(-1) }, dp);
                 })
                 : dataset.data
                     .toSorted((a, b) => Number(b.value) - Number(a.value))
                     .map((dp, i) => {
-                    var _a, _b, _c;
-                    /* if there's a fill and no stroke, use fill as the stroke, otherwise use stroke color, or default color */
-                    return Object.assign({ id: (_a = dp.id) !== null && _a !== void 0 ? _a : dp.name, stroke: typeof dp.fill === "string" && !dp.stroke
-                            ? dp.fill
-                            : ((_c = (_b = dp.stroke) !== null && _b !== void 0 ? _b : dataset.colors[i]) !== null && _c !== void 0 ? _c : dataset.colors.at(-1)) }, dp);
+                    var _a, _b, _c, _d, _e, _f, _g;
+                    return Object.assign({ id: (_a = dp.id) !== null && _a !== void 0 ? _a : dp.name, stroke: (_d = (_c = (_b = dp.stroke) !== null && _b !== void 0 ? _b : dp.fill) !== null && _c !== void 0 ? _c : dataset.colors[i]) !== null && _d !== void 0 ? _d : dataset.colors.at(-1), fill: (_g = (_f = (_e = dp.fill) !== null && _e !== void 0 ? _e : dp.stroke) !== null && _f !== void 0 ? _f : dataset.colors[i]) !== null && _g !== void 0 ? _g : dataset.colors.at(-1) }, dp);
                 }), datasets: Object.fromEntries(Object.entries("datasets" in dataset ? dataset["datasets"] : {}).map(([datasetId, dctx]) => {
                 return [datasetId, setDefaults(dctx /* Will return to this after zoom */)];
             })) });

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

@@ -1,18 +1,18 @@
 import React, { JSX, ReactNode } from "react";
-import { CartesianDatasetDefaulted, GraphContext, SegmentDatasetDefaulted } from "../../hooks/use-graph/use-graph";
+import { InternalCartesianDataset, InternalGraphContext, InternalSegmentDataset } from "../../hooks/use-graph/use-graph";
 type Props = Omit<JSX.IntrinsicElements["div"], "onClick" | "onMouseEnter" | "onMouseLeave"> & {
     position?: "top" | "bottom" | "left" | "right";
     alignment?: "center" | "start" | "end";
-    onClick?: (datapoint: CartesianDatasetDefaulted[number] | SegmentDatasetDefaulted[number]) => void;
-    onMouseEnter?: (datapoint: CartesianDatasetDefaulted[number] | SegmentDatasetDefaulted[number]) => void;
-    onMouseLeave?: (datapoint: CartesianDatasetDefaulted[number] | SegmentDatasetDefaulted[number]) => void;
-    onMouseMove?: (datapoint: CartesianDatasetDefaulted[number] | SegmentDatasetDefaulted[number]) => void;
+    onClick?: (datapoint: InternalCartesianDataset[number] | InternalSegmentDataset[number]) => void;
+    onMouseEnter?: (datapoint: InternalCartesianDataset[number] | InternalSegmentDataset[number]) => void;
+    onMouseLeave?: (datapoint: InternalCartesianDataset[number] | InternalSegmentDataset[number]) => void;
+    onMouseMove?: (datapoint: InternalCartesianDataset[number] | InternalSegmentDataset[number]) => void;
     children?: ReactNode;
     datasets?: string[];
 };
 export declare const Legend: {
     ({ position, alignment, onClick, onMouseEnter, onMouseMove, onMouseLeave, datasets, ...rest }: Props): JSX.Element;
-    context(ctx: GraphContext, { position }: Props): {
+    context(ctx: InternalGraphContext, { position }: Props): {
         layout: {
             rows: string;
             columns: string;
@@ -29,7 +29,7 @@ export declare const Legend: {
             x: number;
             y: number;
         };
-        data: CartesianDatasetDefaulted | SegmentDatasetDefaulted;
+        data: InternalSegmentDataset | InternalCartesianDataset;
         zoom: {
             x: [number, number];
             y: [number, number];
@@ -49,7 +49,7 @@ export declare const Legend: {
             hovered: string[];
             pinned: string[];
         };
-        datasets: Record<string, Pick<GraphContext, "domain" | "colors" | "data">>;
+        datasets: Record<string, Pick<InternalGraphContext, "domain" | "colors" | "data">>;
     };
 };
 export {};

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { GraphContext } from "../../hooks/use-graph/use-graph";
+import { InternalGraphContext } from "../../hooks/use-graph/use-graph";
 import { CurveUtils } from "../../utils/path/curve";
 interface Props extends React.SVGAttributes<SVGSVGElement> {
     children?: ReactNode;
@@ -9,7 +9,7 @@ interface Props extends React.SVGAttributes<SVGSVGElement> {
     };
     loading?: boolean;
     datasets?: string[];
-    context?: GraphContext;
+    context?: InternalGraphContext;
 }
 export declare const Lines: {
     (props: Props): React.JSX.Element | null;
@@ -43,7 +43,7 @@ export declare const Lines: {
         };
         border?: string;
         strokeWidth?: number;
-        context: GraphContext;
+        context: InternalGraphContext;
     }) => (React.JSX.Element | null)[] | null;
     Reference: ({ x, y, ...rest }: React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
         x: number | string | Date;

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

@@ -47,7 +47,7 @@ export const Lines = (props) => {
                 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 isInteractiveFill = hovered.includes(id) || (pinned.includes(id) && !disabled);
                 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" },
@@ -59,7 +59,7 @@ export const Lines = (props) => {
                     })) : (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" })))),
+                                `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: `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)));

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

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

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

@@ -3,11 +3,13 @@ import { GraphUtils } from "../../../utils/graph/graph";
 import { GradientUtils } from "../../../utils/gradient/gradient";
 import { equals } from "../../../utils/equals/equals";
 import { CoordinatesUtils } from "../../../utils/coordinates/coordinates";
+import { cx } from "../../../utils/cx/cx";
 export const LinesJoints = ({ context, border, at, strokeWidth = 8 }) => {
+    const { interactions: { pinned, hovered }, } = context;
     if (!GraphUtils.isXYData(context.data))
         return null;
     const xyForPoints = CoordinatesUtils.xyCoordinatesForDataset(context);
-    return context.data.flatMap(({ data, stroke }, i) => {
+    return context.data.flatMap(({ data, stroke, id }, i) => {
         const points = xyForPoints(data);
         const isLinearGradient = stroke === null || stroke === void 0 ? void 0 : stroke.includes("linear-gradient");
         if (isLinearGradient && stroke) {
@@ -33,8 +35,9 @@ export const LinesJoints = ({ context, border, at, strokeWidth = 8 }) => {
                 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. */
         }
+        const disabled = pinned.length && !pinned.includes(id) && !hovered.includes(id);
         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" })));
+            border && (React.createElement("path", { stroke: border, fill: border, d: path, strokeWidth: strokeWidth + 1, strokeLinecap: "round", vectorEffect: "non-scaling-stroke", className: cx(disabled && "stroke-black dark:stroke-white [stroke-opacity:0.1]") })),
+            React.createElement("path", { stroke: stroke, fill: stroke, d: path, strokeWidth: strokeWidth, strokeLinecap: "round", vectorEffect: "non-scaling-stroke", className: cx(disabled && "stroke-black dark:stroke-white [stroke-opacity:0.1]") })));
     });
 };

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

@@ -1,23 +1,27 @@
 import React, { ReactNode } from "react";
-import { GraphContext, SegmentDatasetDefaulted } from "../../hooks/use-graph/use-graph";
+import { InternalGraphContext, InternalSegmentDataset } from "../../hooks/use-graph/use-graph";
 type Props = {
     loading?: boolean;
     donut?: boolean | number;
     radius?: number;
     labels?: boolean | {
         position: "outside" | "center";
-        display: (value: SegmentDatasetDefaulted[number]) => ReactNode;
+        display: (value: InternalSegmentDataset[number]) => ReactNode;
     };
     glow?: boolean;
     total?: number;
     className?: string;
+    onMouseEnter?: (segment: InternalSegmentDataset[number] & {
+        degrees: number;
+    }, event: React.MouseEvent<SVGPathElement>) => void;
+    onMouseLeave?: (event: React.MouseEvent<SVGPathElement>) => void;
     children?: ReactNode;
 };
 export declare const Pie: {
-    ({ glow, donut, labels, radius, total, loading, className, children }: Props): React.JSX.Element | null;
+    ({ glow, donut, labels, radius, total, loading, className, onMouseEnter, onMouseLeave, children }: Props): React.JSX.Element | null;
     Tooltip: React.ComponentType<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & {
-        children: (segment: SegmentDatasetDefaulted[number]) => ReactNode;
+        children: (segment: InternalSegmentDataset[number]) => ReactNode;
     }>;
-    context(ctx: GraphContext, props: Props): GraphContext;
+    context(ctx: InternalGraphContext, props: Props): InternalGraphContext;
 };
 export {};

package/dist/src/components/Pie/Pie.js

@@ -9,7 +9,7 @@ import { cx } from "../../utils/cx/cx";
 import { overlay } from "../Overlay/Overlay";
 import { ColorUtils } from "../../utils/color/color";
 import { PieTooltip } from "./components/PieTooltip";
-export const Pie = ({ glow, donut, labels, radius, total, loading, className, children }) => {
+export const Pie = ({ glow, donut, labels, radius, total, loading, className, onMouseEnter, onMouseLeave, children }) => {
     const glowId = useId();
     const maskId = useId();
     const { data, viewbox, colors } = useGraph();
@@ -37,7 +37,7 @@ export const Pie = ({ glow, donut, labels, radius, total, loading, className, ch
         return React.createElement(PieEmpty, { donut: Boolean(donut), center: DONUT_RADIUS, className: className });
     }
     return (React.createElement(React.Fragment, null,
-        donut && React.createElement(overlay.div, { className: "pie__children absolute inset-0 flex items-center justify-center" }, children),
+        donut && children && (React.createElement(overlay.div, { className: "pie__children absolute inset-0 flex items-center justify-center" }, children)),
         total !== undefined && (React.createElement("svg", { viewBox: `0 0 ${viewbox.x} ${viewbox.y}`, className: cx("pie__track h-full w-full [grid-area:graph]", className) },
             donut && (React.createElement("mask", { id: maskId },
                 React.createElement("rect", { width: "80%", height: "80%", fill: "white" }),
@@ -92,13 +92,13 @@ export const Pie = ({ glow, donut, labels, radius, total, loading, className, ch
             })();
             return (React.createElement(React.Fragment, { key: i },
                 isLabelsCentered && (React.createElement(overlay.div, { x: { coordinate: center.x }, y: { coordinate: center.y }, className: "z-[2] [transform:translate(-50%,-50%)]" }, label)),
-                React.createElement("svg", { viewBox: `0 0 ${viewbox.x} ${viewbox.y}`, role: "img", className: cx("pie__segment-group group absolute overflow-visible transition-all duration-200 ease-in-out [grid-area:graph] pointer-events-none h-auto w-full brightness-100 has-[path:hover]:z-[1] has-[path:hover]:[&_.label-path]:stroke-current has-[path:hover]:brightness-110", isLabelsCentered && "aspect-square", className), preserveAspectRatio: isLabelsCentered ? "none" : undefined },
+                React.createElement("svg", { viewBox: `0 0 ${viewbox.x} ${viewbox.y}`, role: "img", className: cx("pie__segment-group group absolute overflow-visible transition-all duration-200 ease-in-out [grid-area:graph] pointer-events-none h-full w-full brightness-100 has-[path:hover]:z-[1] has-[path:hover]:[&_.label-path]:stroke-current has-[path:hover]:brightness-110", isLabelsCentered && "aspect-square h-auto", className), preserveAspectRatio: isLabelsCentered ? "none" : undefined },
                     glow && React.createElement("use", { xlinkHref: `#${glowId + segment.id}`, filter: "blur(150px)", opacity: 0.5, scale: 0.9 }),
                     React.createElement("g", { className: "transform origin-center", id: glowId + segment.id, mask: donut ? `url(#${maskId})` : undefined },
-                        React.createElement("path", { "data-pie-id": segment.id /* used for client component tooltip to hook into */, className: cx(`pie__segment transition-all duration-200 ease-in-out [scale:1] origin-center pointer-events-auto`, !donut && `group-hover:[filter:drop-shadow(0_0_50px_rgba(0,0,0,0.5))] hover:[scale:1.02]`), d: PathUtils.describeArc(CX, CX, PIE_RADIUS, segment.previousTotalDegrees + ROTATION_DEGREES, segment.previousTotalDegrees + ROTATION_DEGREES + segment.degrees) + ` L ${CX} ${CX} Z`, fill: String(segment.fill), "data-degrees": segment.degrees })),
+                        React.createElement("path", { "data-pie-id": segment.id /* used for client component tooltip to hook into */, className: cx(`pie__segment transition-all duration-200 ease-in-out [scale:1] origin-center pointer-events-auto`, !donut && `group-hover:[filter:drop-shadow(0_0_50px_rgba(0,0,0,0.5))] hover:[scale:1.02]`), d: PathUtils.describeArc(CX, CX, PIE_RADIUS, segment.previousTotalDegrees + ROTATION_DEGREES, segment.previousTotalDegrees + ROTATION_DEGREES + segment.degrees) + ` L ${CX} ${CX} Z`, fill: segment.fill, "data-degrees": segment.degrees, onMouseEnter: onMouseEnter ? (event) => onMouseEnter(segment, event) : undefined, onMouseLeave: onMouseLeave })),
                     isLabelsOutside && (React.createElement("g", { className: "invisible @[width:400px]:!visible" },
                         React.createElement(React.Fragment, null,
-                            React.createElement("path", { className: "pie__label-connector stroke-[5] fill-transparent group-hover:stroke-[15]", key: segment.name, d: `M ${startLabelLine.x} ${startLabelLine.y} L ${endLabelLine.x} ${endLabelLine.y} ${isRightAligned ? "l 100 0" : "l -100 0"}`, stroke: String(segment.fill) }),
+                            React.createElement("path", { className: "pie__label-connector stroke-[5] fill-transparent group-hover:stroke-[15]", key: segment.name, d: `M ${startLabelLine.x} ${startLabelLine.y} L ${endLabelLine.x} ${endLabelLine.y} ${isRightAligned ? "l 100 0" : "l -100 0"}`, stroke: segment.fill }),
                             React.createElement("g", { className: "pie__label text-7xl font-bold pointer-events-auto" },
                                 React.createElement("text", { "aria-label": `${segment.name}-label`, y: endLabelLine.y, x: endLabelLine.x, stroke: segment.stroke, fill: String(segment.fill), dx: isRightAligned ? 140 : -140, className: cx("[--hundred-cqh:100cqh] [font-size:calc((13.5px_/_tan(atan2(var(--hundred-cqh),_1px)))*_3000)]", isRightAligned ? "[text-anchor:start]" : "[text-anchor:end]") }, label))))),
                     donut && (React.createElement("mask", { id: maskId },
@@ -109,7 +109,8 @@ export const Pie = ({ glow, donut, labels, radius, total, loading, className, ch
 Pie.Tooltip = PieTooltip;
 Pie.context = (ctx, props) => {
     const isLabelsCentered = props.labels && typeof props.labels === "object" && props.labels.position === "center";
+    const isLabelsOutside = props.labels === true || (typeof props.labels === "object" && props.labels.position === "outside");
     return Object.assign(Object.assign({}, ctx), { attributes: {
-            className: isLabelsCentered ? cx(ctx.attributes.className, "aspect-square w-full h-auto") : ctx.attributes.className,
+            className: cx(ctx.attributes.className, isLabelsCentered && "aspect-square w-full h-auto", isLabelsOutside && "[container-type:size_!important]"),
         }, colors: ColorUtils.scheme.contrast });
 };

package/dist/src/components/Pie/components/PieTooltip.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import { ComponentProps, ReactNode } from "react";
-import { SegmentDatasetDefaulted } from "../../../hooks/use-graph/use-graph";
+import { InternalSegmentDataset } from "../../../hooks/use-graph/use-graph";
 type Props = Omit<ComponentProps<"div">, "children"> & {
-    children: (segment: SegmentDatasetDefaulted[number]) => ReactNode;
+    children: (segment: InternalSegmentDataset[number]) => ReactNode;
 };
 export declare const PieTooltip: React.ComponentType<Props>;
 export {};

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { GraphContext } from "../../hooks/use-graph/use-graph";
+import { InternalGraphContext } from "../../hooks/use-graph/use-graph";
 type Props = {
     translate?: {
         x: number;
@@ -15,7 +15,7 @@ export declare const Worldmap: {
     Tooltip: React.ComponentType<{
         tooltip: (datapoint: import("../../export").SegmentDataset[number]) => ReactNode;
     }>;
-    context(ctx: GraphContext): {
+    context(ctx: InternalGraphContext): {
         attributes: {
             className: string;
             defaultChecked?: boolean | undefined;
@@ -307,7 +307,7 @@ export declare const Worldmap: {
             x: number;
             y: number;
         };
-        data: import("../../hooks/use-graph/use-graph").CartesianDatasetDefaulted | import("../../hooks/use-graph/use-graph").SegmentDatasetDefaulted;
+        data: import("../../hooks/use-graph/use-graph").InternalSegmentDataset | import("../../hooks/use-graph/use-graph").InternalCartesianDataset;
         layout: {
             rows: string;
             columns: string;
@@ -331,7 +331,7 @@ export declare const Worldmap: {
             hovered: string[];
             pinned: string[];
         };
-        datasets: Record<string, Pick<GraphContext, "domain" | "colors" | "data">>;
+        datasets: Record<string, Pick<InternalGraphContext, "domain" | "colors" | "data">>;
     };
 };
 export {};

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

@@ -1,5 +1,5 @@
 import React, { ComponentProps, ReactNode } from "react";
-import { GraphContext } from "../../hooks/use-graph/use-graph";
+import { InternalGraphContext } from "../../hooks/use-graph/use-graph";
 import { FromToJumps } from "../../models/domain/domain";
 type Props = Omit<ComponentProps<"div">, "title"> & {
     ticks?: FromToJumps;
@@ -10,6 +10,6 @@ type Props = Omit<ComponentProps<"div">, "title"> & {
 };
 export declare const XAxis: {
     ({ display, title, ticks, description, dataset, ...rest }: Props): React.JSX.Element;
-    context(ctx: GraphContext, props: Props): GraphContext;
+    context(ctx: InternalGraphContext, props: Props): InternalGraphContext;
 };
 export {};

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

@@ -1,5 +1,5 @@
 import React, { ComponentProps, ReactNode } from "react";
-import { GraphContext } from "../../hooks/use-graph/use-graph";
+import { InternalGraphContext } from "../../hooks/use-graph/use-graph";
 import { FromToJumps } from "../../models/domain/domain";
 type Props = Omit<ComponentProps<"div">, "title"> & {
     ticks?: FromToJumps;
@@ -11,6 +11,6 @@ type Props = Omit<ComponentProps<"div">, "title"> & {
 };
 export declare const YAxis: {
     ({ title, description, display, dataset, position, ...rest }: Props): React.JSX.Element;
-    context(ctx: GraphContext, props: Props): GraphContext;
+    context(ctx: InternalGraphContext, props: Props): InternalGraphContext;
 };
 export {};

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

@@ -9,7 +9,7 @@ export declare const ZoomSlider: {
                 minimum?: number;
             };
         }): import("react").JSX.Element;
-        context(ctx: import("../../export").GraphContext, props: {
+        context(ctx: import("../../export").InternalGraphContext, props: {
             onChange: (zoom: {
                 x: [number, number];
                 y: [number, number];
@@ -17,7 +17,7 @@ export declare const ZoomSlider: {
             distance?: {
                 minimum?: number;
             };
-        }): import("../../export").GraphContext;
+        }): import("../../export").InternalGraphContext;
     };
     Y: {
         ({ onChange, distance }: {
@@ -29,7 +29,7 @@ export declare const ZoomSlider: {
                 minimum?: number;
             };
         }): import("react").JSX.Element;
-        context(ctx: import("../../export").GraphContext, props: {
+        context(ctx: import("../../export").InternalGraphContext, props: {
             onChange: (zoom: {
                 x: [number, number];
                 y: [number, number];
@@ -37,6 +37,6 @@ export declare const ZoomSlider: {
             distance?: {
                 minimum?: number;
             };
-        }): import("../../export").GraphContext;
+        }): import("../../export").InternalGraphContext;
     };
 };