nanoplot 0.0.40 → 0.0.42

package/dist/index.css

@@ -50,6 +50,10 @@
   left: 0.5rem;
 }
 
+.left-\[-1em\] {
+  left: -1em;
+}
+
 .left-\[50\%\] {
   left: 50%;
 }
@@ -231,6 +235,10 @@
   display: inline-flex;
 }
 
+.table {
+  display: table;
+}
+
 .grid {
   display: grid;
 }
@@ -280,6 +288,10 @@
   height: 2rem;
 }
 
+.h-\[0\.85em\] {
+  height: 0.85em;
+}
+
 .h-\[1\.25em\] {
   height: 1.25em;
 }
@@ -348,6 +360,10 @@
   width: 2rem;
 }
 
+.w-\[0\.85em\] {
+  width: 0.85em;
+}
+
 .w-\[100\%\] {
   width: 100%;
 }
@@ -437,6 +453,11 @@
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-\[180deg\] {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -523,6 +544,10 @@
   justify-content: space-between;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
@@ -617,6 +642,10 @@
   border-bottom-width: 2px;
 }
 
+.border-l-4 {
+  border-left-width: 4px;
+}
+
 .border-r {
   border-right-width: 1px;
 }
@@ -639,6 +668,11 @@
   border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
 }
 
+.border-emerald-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
+}
+
 .border-gray-100 {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
@@ -787,6 +821,10 @@
   fill: #efefef;
 }
 
+.fill-blue-600 {
+  fill: #2563eb;
+}
+
 .fill-gray-200 {
   fill: #e5e7eb;
 }
@@ -803,6 +841,10 @@
   stroke: #000;
 }
 
+.stroke-blue-600 {
+  stroke: #2563eb;
+}
+
 .stroke-dark-priority-100 {
   stroke: rgb(45, 45, 45);
 }
@@ -831,6 +873,10 @@
   stroke-width: 2;
 }
 
+.stroke-\[0\] {
+  stroke-width: 0;
+}
+
 .stroke-\[10\] {
   stroke-width: 10;
 }
@@ -965,6 +1011,11 @@
   text-align: center;
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
@@ -1099,6 +1150,11 @@
   color: rgb(22 163 74 / var(--tw-text-opacity, 1));
 }
 
+.text-neutral-700 {
+  --tw-text-opacity: 1;
+  color: rgb(64 64 64 / var(--tw-text-opacity, 1));
+}
+
 .text-red-800 {
   --tw-text-opacity: 1;
   color: rgb(153 27 27 / var(--tw-text-opacity, 1));
@@ -1215,6 +1271,12 @@
   transition-duration: 150ms;
 }
 
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1380,6 +1442,11 @@
   --tw-contain-style: ;
 }
 
+.odd\:bg-\[\#f6f8fa\]:nth-child(odd) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(246 248 250 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:-translate-y-0\.5:hover {
   --tw-translate-y: -0.125rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1439,6 +1506,10 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.hover\:\[fill-opacity\:0\.2\]:hover {
+  fill-opacity: 0.2;
+}
+
 .hover\:\[scale\:1\.02\]:hover {
   scale: 1.02;
 }
@@ -1723,6 +1794,11 @@
   border-color: hsl(210.5deg 68.97% 65.88% / 0.4);
 }
 
+.dark\:border-emerald-400:where(.dark, .dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
+}
+
 .dark\:border-gray-700:where(.dark, .dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
@@ -1733,6 +1809,11 @@
   border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
 }
 
+.dark\:border-slate-600:where(.dark, .dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
+}
+
 .dark\:border-white:where(.dark, .dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
@@ -1786,6 +1867,11 @@
   background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:bg-slate-800:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
+}
+
 .dark\:from-\[hsl\(209\.65deg\2c 52\.15\%\2c 31\.96\%\)\]:where(.dark, .dark *) {
   --tw-gradient-from: hsl(209.65deg,52.15%,31.96%) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(209.65deg 52.15% 31.96% / 0) var(--tw-gradient-to-position);
@@ -1808,6 +1894,10 @@
   fill: #2d2d2d;
 }
 
+.dark\:fill-blue-400:where(.dark, .dark *) {
+  fill: #60a5fa;
+}
+
 .dark\:fill-dark-priority-100:where(.dark, .dark *) {
   fill: rgb(45, 45, 45);
 }
@@ -1824,6 +1914,10 @@
   stroke: #2d2d2d;
 }
 
+.dark\:stroke-blue-400:where(.dark, .dark *) {
+  stroke: #60a5fa;
+}
+
 .dark\:stroke-dark-priority-100:where(.dark, .dark *) {
   stroke: rgb(45, 45, 45);
 }
@@ -1882,6 +1976,11 @@
   color: rgb(74 222 128 / var(--tw-text-opacity, 1));
 }
 
+.dark\:text-neutral-300:where(.dark, .dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(212 212 212 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-red-900:where(.dark, .dark *) {
   --tw-text-opacity: 1;
   color: rgb(127 29 29 / var(--tw-text-opacity, 1));
@@ -1905,6 +2004,11 @@
   filter: invert(0);
 }
 
+.odd\:dark\:bg-slate-700:where(.dark, .dark *):nth-child(odd) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
+}
+
 .dark\:hover\:border-gray-600:hover:where(.dark, .dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));

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

@@ -13,7 +13,6 @@ import React, { useId } from "react";
 import { LinearGradient } from "../../LinearGradient/LinearGradient";
 import { PathUtils } from "../../../utils/path/path";
 import { useGraph } from "../../../hooks/use-graph/use-graph";
-import { MathUtils } from "../../../utils/math/math";
 export const Rect = (_a) => {
     var _b, _c, _d;
     var { x1, y1, x2, y2, radius, glow, horizontal = false } = _a, rest = __rest(_a, ["x1", "y1", "x2", "y2", "radius", "glow", "horizontal"]);
@@ -27,7 +26,6 @@ export const Rect = (_a) => {
     const isFillMasked = (_c = rest.fill) === null || _c === void 0 ? void 0 : _c.includes("mask");
     const isGradientStroke = (_d = rest.stroke) === null || _d === void 0 ? void 0 : _d.includes("gradient");
     const path = PathUtils.borderRadius({ x: x1, y: y1 }, { x: x2, y: y2 }, radius !== null && radius !== void 0 ? radius : 0, horizontal);
-    const height = MathUtils.scale(y2 - y1, viewbox.y, 100);
     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 }),

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

@@ -2,6 +2,7 @@ import React, { CSSProperties, HTMLAttributes, ReactNode } from "react";
 import { GraphContext } from "../../hooks/use-graph/use-graph";
 type Props = {
     data?: GraphContext["data"];
+    datasets?: Record<string, GraphContext["data"]>;
     gap?: {
         top?: number;
         right?: number;
@@ -16,7 +17,7 @@ type Props = {
     style?: CSSProperties;
     className?: string;
 };
-export declare const Graph: (({ data, gap, children, interactions, style, className }: Props) => React.JSX.Element) & {
+export declare const Graph: (({ data, gap, children, interactions, datasets, style, className }: Props) => React.JSX.Element) & {
     Row: ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
     Column: ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 };

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

@@ -10,22 +10,22 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useId } from "react";
-import { GraphContextProvider } from "../../hooks/use-graph/use-graph";
+import { GraphContextProvider, useGraphColumn } from "../../hooks/use-graph/use-graph";
 import { ChildrenUtils } from "../../utils/children/children";
 import { GraphUtils } from "../../utils/graph/graph";
 import { ColorUtils } from "../../utils/color/color";
 import { DomainUtils } from "../../utils/domain/domain";
-import { cx, tw } from "../../utils/cx/cx";
+import { tw } from "../../utils/cx/cx";
 import { useIsServerComponent } from "../../hooks/use-is-server-component";
-const GraphComponent = ({ data = [], gap, children, interactions, style, className }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+const GraphComponent = ({ data = [], gap, children, interactions, datasets = {}, style, className }) => {
+    var _a, _b, _c, _d, _e, _f;
     const id = useId();
     const X_SCALE = 3000;
     const Y_SCALE = 3000;
     const isServerComponent = useIsServerComponent();
     const ctx = ChildrenUtils.context(children, {
         id,
-        layout: { rows: "[graph] auto", columns: "[graph] auto" },
+        layout: { rows: "[graph]auto", columns: "[graph]auto" },
         viewbox: { x: X_SCALE, y: Y_SCALE },
         data: data,
         gap: { top: (_a = gap === null || gap === void 0 ? void 0 : gap.top) !== null && _a !== void 0 ? _a : 0, left: (_b = gap === null || gap === void 0 ? void 0 : gap.left) !== null && _b !== void 0 ? _b : 0, right: (_c = gap === null || gap === void 0 ? void 0 : gap.right) !== null && _c !== void 0 ? _c : 0, bottom: (_d = gap === null || gap === void 0 ? void 0 : gap.bottom) !== null && _d !== void 0 ? _d : 0 },
@@ -38,31 +38,65 @@ const GraphComponent = ({ data = [], gap, children, interactions, style, classNa
         },
         colors: ColorUtils.scheme.contrast,
         interactions: { hovered: (_e = interactions === null || interactions === void 0 ? void 0 : interactions.hovered) !== null && _e !== void 0 ? _e : [], pinned: (_f = interactions === null || interactions === void 0 ? void 0 : interactions.pinned) !== null && _f !== void 0 ? _f : [] },
+        datasets: Object.fromEntries(Object.entries(datasets).map(([datasetId, dataset]) => {
+            return [
+                datasetId,
+                {
+                    colors: ColorUtils.scheme.contrast,
+                    domain: {
+                        x: [],
+                        y: [],
+                    },
+                    data: dataset,
+                },
+            ];
+        })),
     });
-    const colorized = Object.assign(Object.assign({}, ctx), { domain: {
-            x: (_g = ctx.domain.x) !== null && _g !== void 0 ? _g : DomainUtils.x.ticks({ data, viewbox: { x: X_SCALE, y: Y_SCALE } }),
-            y: (_h = ctx.domain.y) !== null && _h !== void 0 ? _h : DomainUtils.y.ticks({ data, viewbox: { x: X_SCALE, y: Y_SCALE } }),
-        }, data: GraphUtils.isXYData(data)
-            ? data.map((dp, i) => {
-                var _a, _b, _c;
-                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 : ctx.colors[i]) !== null && _c !== void 0 ? _c : ctx.colors.at(-1)) }, dp);
-            })
-            : [...data]
-                .sort((a, b) => Number(b.value) - Number(a.value))
-                .map((dp, i) => {
-                var _a, _b, _c;
-                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 : ctx.colors[i]) !== null && _c !== void 0 ? _c : ctx.colors.at(-1)) }, dp);
-            }) });
+    const setDefaults = (dataset) => {
+        console.log("Y", dataset.domain.y.length === 0, DomainUtils.y.ticks({ data: dataset.data, viewbox: { x: X_SCALE, y: Y_SCALE } }), dataset.domain.y);
+        return Object.assign(Object.assign({}, dataset), { domain: {
+                x: dataset.domain.x.length === 0
+                    ? DomainUtils.x.ticks({ data: dataset.data, viewbox: { x: X_SCALE, y: Y_SCALE } })
+                    : dataset.domain.x,
+                y: dataset.domain.y.length === 0
+                    ? DomainUtils.y.ticks({ data: dataset.data, viewbox: { x: X_SCALE, y: Y_SCALE } })
+                    : dataset.domain.y,
+            }, 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);
+                })
+                : [...dataset.data]
+                    .sort((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);
+                }), datasets: Object.fromEntries(Object.entries("datasets" in dataset ? dataset["datasets"] : {}).map(([datasetId, dctx]) => {
+                console.log(setDefaults(dctx));
+                return [datasetId, setDefaults(dctx)];
+            })) });
+    };
+    const colorized = setDefaults(ctx);
     return (React.createElement("div", Object.assign({ id: id, "data-ctx": "graph" }, ctx.attributes, { style: Object.assign(Object.assign(Object.assign({}, style), ctx.attributes.style), { gridTemplateColumns: ctx.layout.columns, gridTemplateRows: ctx.layout.rows, padding: `${ctx.gap.top}px ${ctx.gap.right}px ${ctx.gap.bottom}px ${ctx.gap.left}px` }), className: tw(ctx.attributes.className, className) }),
         isServerComponent && (
-        /* Server components */
+        /* CTX for server components. */
         React.createElement("script", { id: id + "-context", type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(colorized) } })),
         React.createElement(GraphContextProvider, { value: colorized }, children)));
 };
 export const Graph = Object.assign(GraphComponent, {
     Row: (_a) => {
         var { children } = _a, rest = __rest(_a, ["children"]);
-        return (React.createElement("div", Object.assign({}, rest, { className: cx("col-span-full", rest.className) }), children));
+        const column = useGraphColumn();
+        return (React.createElement(React.Fragment, null,
+            new Array(column.left).fill(null).map((_, i) => (React.createElement("div", { key: i }))),
+            React.createElement("div", Object.assign({}, rest), children),
+            new Array(column.right).fill(null).map((_, i) => (React.createElement("div", { key: i })))));
     },
     Column: (_a) => {
         var { children } = _a, rest = __rest(_a, ["children"]);

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

@@ -40,6 +40,7 @@ export declare const Legend: {
             hovered: string[];
             pinned: string[];
         };
+        datasets: Record<string, Pick<GraphContext, "domain" | "colors" | "data">>;
     };
 };
 export {};

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

@@ -11,15 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import { Graph } from "../Graph/Graph";
-import { useGraph, useGraphColumn } from "../../hooks/use-graph/use-graph";
+import { useGraph } from "../../hooks/use-graph/use-graph";
 import { cx } from "../../utils/cx/cx";
 import { GradientUtils } from "../../utils/gradient/gradient";
 export const Legend = ({ position = "top", alignment = "center" }) => {
     const context = useGraph();
     const Element = position === "top" || position === "bottom" ? Graph.Row : Graph.Column;
-    const column = useGraphColumn(context);
     const { viewbox, domain, interactions: { pinned, hovered }, } = context;
-    return (React.createElement(Element, { 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"), style: position === "top" || position === "bottom" ? { gridColumn: column } : undefined }, context.data
+    return (React.createElement(Element, { 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") }, 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((_a, i, datapoints) => {

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

@@ -5,9 +5,10 @@ interface Props extends React.SVGAttributes<SVGSVGElement> {
     curve?: keyof typeof CurveUtils;
     joints?: boolean;
     loading?: boolean;
+    dataset?: string;
 }
 export declare const Lines: {
-    ({ className, curve, joints, children, loading }: Props): React.JSX.Element | null;
+    ({ className, curve, joints, children, loading, dataset }: Props): React.JSX.Element | null;
     Tooltip: React.ComponentType<React.HTMLAttributes<HTMLDivElement> & {
         tooltip?: ((points: Array<Omit<import("../../export").CartesianDataset[number], "data"> & {
             data: import("../../export").CartesianDataset[number]["data"][number];

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { GraphUtils } from "../../utils/graph/graph";
-import { useGraph } from "../../hooks/use-graph/use-graph";
+import { useDataset, useGraph } from "../../hooks/use-graph/use-graph";
 import { CurveUtils } from "../../utils/path/curve";
 import { CoordinatesUtils } from "../../utils/coordinates/coordinates";
 import { LinesLoading } from "./components/LinesLoading";
@@ -16,8 +16,9 @@ const chunk = (points, size) => {
     }
     return chunks;
 };
-export const Lines = ({ className, curve = "linear", joints, children, loading }) => {
-    const { interactions: { pinned, hovered }, data, viewbox, domain, colors, } = useGraph();
+export const Lines = ({ className, curve = "linear", joints, children, loading, dataset }) => {
+    const { interactions: { pinned, hovered }, viewbox, } = useGraph();
+    const { data, domain, colors } = useDataset(dataset);
     if (!GraphUtils.isXYData(data))
         return null;
     const xForValue = CoordinatesUtils.xCoordinateFor({ domain, viewbox });

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

@@ -42,6 +42,8 @@ const LinesTooltipComponent = (_a) => {
     const { width, height } = (_f = (_e = ref.current) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect()) !== null && _f !== void 0 ? _f : { width: 0, height: 0 };
     const isDateTimeAxis = ((_g = domain.x[0]) === null || _g === void 0 ? void 0 : _g.tick) instanceof Date;
     const datapoints = useMemo(() => {
+        if (!mouse)
+            return [];
         /* data wont change while mouse is moving, but will change when parent re-renders with new object identity */
         const max = data.reduce((max, { data }) => Math.max(max, data.length), 0);
         let values = new Float64Array(data.length * max);
@@ -52,7 +54,7 @@ const LinesTooltipComponent = (_a) => {
             }
         }
         return values;
-    }, [data]);
+    }, [data, Boolean(mouse)]);
     const closest = (() => {
         var _a, _b;
         /*
@@ -158,7 +160,7 @@ const LinesTooltipComponent = (_a) => {
                     closest != null && (React.createElement("line", { x1: xForValue(+closest), x2: xForValue(+closest), y1: 0, y2: viewbox.y, className: "stroke-black dark:stroke-white", strokeWidth: 4 })),
                     joints &&
                         (jointPoints === null || jointPoints === void 0 ? void 0 : jointPoints.map(({ data: { x, y }, stroke }, i) => {
-                            return (React.createElement("path", { key: i, stroke: stroke, fill: stroke, d: `M ${x} ${y} A 0 0 0 0 1 ${x} ${y}`, strokeWidth: "10", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" }));
+                            return (React.createElement("path", { key: i, stroke: stroke, fill: stroke, d: `M ${x} ${y} A 0 0 0 0 1 ${x} ${y}`, strokeWidth: "8", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" }));
                         }))),
                 ordered && closest != null && mouse && (React.createElement(overlay.div, Object.assign({}, rest, { ref: setTooltipRef, className: tw("lines-tooltip__tooltip absolute pointer-events-none", rest.className), style: { left: left + rect.left, top: top + rect.top } }), typeof tooltip === "function" ? (tooltip(ordered, closest)) : (React.createElement("div", Object.assign({}, rest, { className: "text-[14px] leading-[14px] rounded border bg-opacity-60 shadow-md backdrop-blur-sm w-[250px] pb-1.5 border-gray-200 dark-border-[#454545]" }),
                     React.createElement("div", { className: "font-medium bg-gradient-to-b from-transparent to-[#CFCFCF] dark:to-[#3C3C3C] pl-2 pr-2 pt-1.5 pb-1 mb-1.5" }, (() => {

package/dist/src/components/Overlay/Overlay.js

@@ -49,10 +49,10 @@ export const overlay = new Proxy(Overlay, {
         if (cache[prop])
             return cache[prop];
         /*
-        Ensures this component identity is only created once, this is important because react's remount logic
-        will check element.type === lastrender.type, if this is not the same, it will remount the component.
-        because overlay.div will run this function every time 'component' will recieve a new function identity
-    */
+            Ensures this component identity is only created once, this is important because react's remount logic
+            will check element.type === lastrender.type, if this is not the same, it will remount the component.
+            because overlay.div will run this function every time 'component' will recieve a new function identity
+        */
         const component = (_a) => {
             var { children } = _a, rest = __rest(_a, ["children"]);
             return (React.createElement(Overlay, Object.assign({}, rest, { tag: prop }), children));

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

@@ -87,7 +87,7 @@ export const Pie = ({ glow = true, donut, labels = true, total, loading, classNa
                 glow && React.createElement("use", { xlinkHref: `#${glowId + id}`, filter: "blur(150px)", opacity: 0.5, scale: 0.9 }),
                 React.createElement("g", { className: "pie__slice group" },
                     React.createElement("g", { className: `pie__segment-${id}`, id: glowId + id, mask: donut ? `url(#${maskId})` : undefined }, path),
-                    React.createElement("g", { className: "transform origin-center rotate-180 invisible @[width:400px]:!visible " }, label)),
+                    React.createElement("g", { className: "transform origin-center rotate-[180deg] invisible @[width:400px]:!visible " }, label)),
                 donut && (React.createElement("mask", { id: maskId },
                     React.createElement("rect", { width: "80%", height: "80%", fill: "white" }),
                     React.createElement("circle", { cx: CX, cy: CY, r: DONUT_RADIUS, fill: "black" })))));

package/dist/src/components/Radar/Radar.js

@@ -136,6 +136,6 @@ export const Radar = ({ scalars = [0, 20, 40, 60, 80, 100], labels = true, loadi
                         React.createElement("circle", { cx: x1, cy: y1, r: viewbox.x * 0.005, className: "fill-gray-500 dark:fill-white" })));
                 }),
             angles.map((point, i) => {
-                return (React.createElement("path", { key: i, className: "[vector-effect:non-scaling-stroke] dark:fill-white [fill-opacity:0] [stroke-opacity:0]", d: PathUtils.describeArc(viewbox.x / 2, viewbox.y / 2, radius, point - arcDegrees / 2, point + arcDegrees / 2) + ` L ${viewbox.x / 2} ${viewbox.x / 2} Z` }));
+                return (React.createElement("path", { key: i, className: "[vector-effect:non-scaling-stroke] dark:fill-white [fill-opacity:0] [stroke-opacity:0] hover:[fill-opacity:0.2] ", d: PathUtils.describeArc(viewbox.x / 2, viewbox.y / 2, radius, point - arcDegrees / 2, point + arcDegrees / 2) + ` L ${viewbox.x / 2} ${viewbox.x / 2} Z` }));
             }))));
 };

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

@@ -325,6 +325,7 @@ export declare const Worldmap: {
             hovered: string[];
             pinned: string[];
         };
+        datasets: Record<string, Pick<GraphContext, "domain" | "colors" | "data">>;
     };
 };
 export {};

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

@@ -42,6 +42,7 @@ export declare const XAxis: {
             hovered: string[];
             pinned: string[];
         };
+        datasets: Record<string, Pick<GraphContext, "domain" | "colors" | "data">>;
     };
 };
 export {};

package/dist/src/components/XAxis/XAxis.js

@@ -1,12 +1,11 @@
 import React from "react";
-import { useGraph, useGraphColumn } from "../../hooks/use-graph/use-graph";
+import { useGraph } from "../../hooks/use-graph/use-graph";
 import { Graph } from "../Graph/Graph";
 import { DomainUtils } from "../../utils/domain/domain";
 import { MathUtils } from "../../utils/math/math";
 import { cx } from "../../utils/cx/cx";
 export const XAxis = ({ display, title, description }) => {
     const context = useGraph();
-    const column = useGraphColumn(context);
     const formatter = new Intl.NumberFormat("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 2 });
     const labels = context.domain.x.map(({ tick, coordinate }) => {
         const label = (() => {
@@ -20,7 +19,7 @@ export const XAxis = ({ display, title, description }) => {
     });
     const characters = labels.reduce((acc, { label }) => acc + (typeof label === "string" ? label.length : 0), 0);
     const breakpoint = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100].find((bp) => bp >= characters);
-    return (React.createElement(Graph.Row, { className: "xaxis items-center relative pt-2 text-xs font-normal select-none", style: { gridColumn: column } },
+    return (React.createElement(Graph.Row, { className: "xaxis items-center relative pt-2 text-xs font-normal select-none" },
         React.createElement("div", { className: "xaxis__ticks flex relative" },
             labels.map(({ label }, i) => {
                 return (React.createElement("div", { className: "xaxis__tick opacity-0 text-nowrap", key: i }, label));

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

@@ -12,42 +12,11 @@ type Props = {
     title?: ReactNode;
     display?: (tick: string | number | Date) => ReactNode;
     description?: ReactNode;
+    position?: "top" | "bottom" | "left" | "right";
+    dataset?: string;
 };
 export declare const YAxis: {
-    ({ title, description, display }: Props): React.JSX.Element;
-    context(ctx: GraphContext, props: Props): {
-        layout: {
-            rows: string;
-            columns: string;
-        };
-        domain: {
-            x: {
-                coordinate: number;
-                tick: string | number | Date;
-            }[];
-            y: {
-                coordinate: number;
-                tick: string | number | Date;
-            }[];
-        };
-        id: string;
-        attributes: React.HTMLAttributes<HTMLDivElement>;
-        gap: {
-            top: number;
-            right: number;
-            bottom: number;
-            left: number;
-        };
-        viewbox: {
-            x: number;
-            y: number;
-        };
-        data: import("../../export").CartesianDataset | import("../../export").SegmentDataset;
-        colors: string[];
-        interactions: {
-            hovered: string[];
-            pinned: string[];
-        };
-    };
+    ({ title, description, display, dataset, position }: Props): React.JSX.Element;
+    context(ctx: GraphContext, props: Props): GraphContext;
 };
 export {};