nanoplot 0.0.90 → 0.0.92

package/dist/index.css

@@ -514,11 +514,6 @@
   text-align: center;
 }
 
-.text-7xl {
-  font-size: 4.5rem;
-  line-height: 1;
-}
-
 .text-\[0\.875rem\] {
   font-size: 0.875rem;
 }
@@ -630,6 +625,12 @@
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.backdrop-blur-sm {
+  --tw-backdrop-blur: blur(4px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -665,13 +666,12 @@
   container-name: graph;
 }
 
-.\[--hundred-cqh\:100cqh\] {
-  --hundred-cqh: 100cqh;
+.\[--fit-len\:min\(100cqw\2c 100cqh\)\] {
+  --fit-len: min(100cqw,100cqh);
 }
 
-.\[backdrop-filter\:blur\(4px\)\] {
-  -webkit-backdrop-filter: blur(4px);
-          backdrop-filter: blur(4px);
+.\[--fit-num\:calc\(10000\*tan\(atan2\(var\(--fit-len\)\2c 10000px\)\)\)\] {
+  --fit-num: calc(10000 * tan(atan2(var(--fit-len),10000px)));
 }
 
 .\[backface-visibility\:hidden\] {
@@ -722,6 +722,10 @@
   border: var(--b) solid #0000;
 }
 
+.\[container-type\:size\] {
+  container-type: size;
+}
+
 .\[container-type\:size_\!important\] {
   container-type: size !important;
 }
@@ -750,20 +754,20 @@
   filter: invert(1);
 }
 
-.\[font-size-adjust\:0\.12\] {
-  font-size-adjust: 0.12;
+.\[font-size\:0\.75rem\] {
+  font-size: 0.75rem;
 }
 
-.\[font-size-adjust\:0\.2\] {
-  font-size-adjust: 0.2;
+.\[font-size\:calc\(28000px_\/var\(--fit-num\)\)\] {
+  font-size: calc(28000px / var(--fit-num));
 }
 
-.\[font-size\:0\.75rem\] {
-  font-size: 0.75rem;
+.\[font-size\:calc\(41000px_\/_tan\(atan2\(min\(100cqw\2c 100cqh\)\2c 1px\)\)\)\] {
+  font-size: calc(41000px / tan(atan2(min(100cqw,100cqh),1px)));
 }
 
-.\[font-size\:calc\(\(13\.5px_\/_tan\(atan2\(var\(--hundred-cqh\)\2c _1px\)\)\)\*_3000\)\] {
-  font-size: calc((13.5px / tan(atan2(var(--hundred-cqh), 1px))) * 3000);
+.\[font-size\:calc\(41000px_\/var\(--fit-num\)\)\] {
+  font-size: calc(41000px / var(--fit-num));
 }
 
 .\[grid-area\:graph\] {
@@ -846,17 +850,12 @@
   writing-mode: vertical-rl;
 }
 
-/*
-    https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j
-    allows 100cqh in calc functions to prevent text scaling inside svg.
-*/
-
-@property --hundred-cqh {
+@property --fit-len {
   syntax: "<length>";
 
-  initial-value: 0px;
-
   inherits: false;
+
+  initial-value: 1px;
 }
 
 .before\:absolute::before {
@@ -1315,5 +1314,4 @@
 
 .has-\[path\:hover\]\:\[\&_\.label-path\]\:stroke-current .label-path:has(path:hover) {
   stroke: currentColor;
-}
-
+}

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

@@ -12,8 +12,8 @@ export declare const Area: {
     Tooltip: React.ComponentType<Omit<React.HTMLAttributes<HTMLDivElement> & {
         tooltip?: ((points: Array<Omit<import("../../export").CartesianDataset[number], "data"> & {
             data: import("../../export").CartesianDataset[number]["data"][number];
-        }>, x: number | string | Date) => React.ReactNode) | {
-            title?: (x: number | string | Date) => React.ReactNode;
+        }>, x: number | string | import("../../hooks/use-graph/use-graph").TemporalDate) => React.ReactNode) | {
+            title?: (x: number | string | import("../../hooks/use-graph/use-graph").TemporalDate) => React.ReactNode;
             display?: (point: import("../../export").CartesianDataset[number]["data"][number]) => React.ReactNode;
         };
         joints?: boolean;

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

@@ -21,12 +21,12 @@ export declare const Bars: {
             };
             closest: {
                 datapoint: {
-                    x: Date | string | number;
-                    y: Date | string | number;
+                    x: import("../../hooks/use-graph/use-graph").TemporalDate | string | number;
+                    y: import("../../hooks/use-graph/use-graph").TemporalDate | string | number;
                 };
                 tick: {
-                    x: string | number | Date;
-                    y: string | number | Date;
+                    x: string | number | import("../../hooks/use-graph/use-graph").TemporalDate;
+                    y: string | number | import("../../hooks/use-graph/use-graph").TemporalDate;
                 };
             };
         }, e: React.MouseEvent<SVGSVGElement>) => void;
@@ -34,8 +34,8 @@ export declare const Bars: {
         onLeave?: (e: React.MouseEvent<SVGSVGElement>) => void;
     }) => React.JSX.Element;
     Bar: ({ x, y, fill, stroke, size, horizontal, onMouseEnter, onMouseLeave, className }: {
-        x: number | string | Date | "auto";
-        y: number | string | Date | "auto";
+        x: number | string | import("../../hooks/use-graph/use-graph").TemporalDate | "auto";
+        y: number | string | import("../../hooks/use-graph/use-graph").TemporalDate | "auto";
         fill?: string;
         stroke?: string;
         size?: number;

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

@@ -1,6 +1,7 @@
+import { TemporalDate } from "../../../hooks/use-graph/use-graph";
 type Props = {
-    x: number | string | Date | "auto";
-    y: number | string | Date | "auto";
+    x: number | string | TemporalDate | "auto";
+    y: number | string | TemporalDate | "auto";
     fill?: string;
     stroke?: string;
     size?: number;

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

@@ -1,4 +1,5 @@
 import { MouseEvent } from "react";
+import { TemporalDate } from "../../../hooks/use-graph/use-graph";
 type Props = {
     className?: string;
     onMove?: (mouse: null | {
@@ -9,12 +10,12 @@ type Props = {
         };
         closest: {
             datapoint: {
-                x: Date | string | number;
-                y: Date | string | number;
+                x: TemporalDate | string | number;
+                y: TemporalDate | string | number;
             };
             tick: {
-                x: string | number | Date;
-                y: string | number | Date;
+                x: string | number | TemporalDate;
+                y: string | number | TemporalDate;
             };
         };
     }, e: MouseEvent<SVGSVGElement>) => void;

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

@@ -19,6 +19,7 @@ import { Rect } from "./Rect";
 import { scale } from "../../../utils/math/math";
 import { overlay } from "../../Overlay/Overlay";
 import { ColorUtils } from "../../../utils/color/color";
+import { toEpochMs } from "../../../utils/domain/utils/temporal";
 export const HorizontalBars = ({ children, fill, stroke, labels, size = 50, radius = 0, anchor = 0, interactions, onMouseEnter, onMouseLeave, className, }) => {
     const context = useGraph();
     if (!GraphUtils.isXYData(context.data))
@@ -30,11 +31,11 @@ export const HorizontalBars = ({ children, fill, stroke, labels, size = 50, radi
         return (Object.assign(Object.assign({}, bar), { group: (_a = bar.group) !== null && _a !== void 0 ? _a : bar.id, data: xy }));
     }));
     const BAR_HEIGHT = Math.floor(context.viewbox.y / context.domain.y.length / new Set(bars.map((bar) => { var _a; return (_a = bar.group) !== null && _a !== void 0 ? _a : "no-group"; })).size) * (size / 100);
-    const yValues = new Set(bars.map((bar) => (bar.data.y instanceof Date ? bar.data.y.getTime() : bar.data.y)));
+    const yValues = new Set(bars.map((bar) => (typeof bar.data.y === "string" || typeof bar.data.y === "number" ? bar.data.y : toEpochMs(bar.data.y))));
     const dataset = Array.from(yValues)
         .flatMap((y) => {
         const coordinate = yForValue(y);
-        const barsForTick = bars.filter((bar) => (bar.data.y instanceof Date ? bar.data.y.getTime() : bar.data.y) === y);
+        const barsForTick = bars.filter((bar) => (typeof bar.data.y === "string" || typeof bar.data.y === "number" ? bar.data.y : toEpochMs(bar.data.y)) === y);
         return Object.entries(ObjectUtils.groupBy(barsForTick, ({ group }) => group)).flatMap(([, barsForGroup], i, groups) => {
             const y1 = coordinate + BAR_HEIGHT * i - (BAR_HEIGHT * Object.keys(groups).length) / 2;
             return barsForGroup === null || barsForGroup === void 0 ? void 0 : barsForGroup.map((bar) => (Object.assign(Object.assign({}, bar), { x1: xForValue(anchor), x2: xForValue(bar.data.x), y1, y2: y1 + BAR_HEIGHT }))).map((segment, ii, segments) => {

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

@@ -1,5 +1,5 @@
 import React, { MouseEvent, ReactNode } from "react";
-import { InternalCartesianDataset, Simplify } from "../../../hooks/use-graph/use-graph";
+import { InternalCartesianDataset, Simplify, TemporalDate } from "../../../hooks/use-graph/use-graph";
 type Segment = Simplify<Omit<InternalCartesianDataset[number], "data"> & {
     data: InternalCartesianDataset[number]["data"][number];
 }>;
@@ -24,7 +24,7 @@ type Props = Omit<React.SVGAttributes<SVGSVGElement>, "onMouseEnter" | "onMouseL
      */
     stroke?: (segment: Segment) => string;
     interactions?: {
-        x?: number | string | Date;
+        x?: number | string | TemporalDate;
     };
     onMouseEnter?: (rect: Segment, event: MouseEvent) => void;
     onMouseLeave?: (event: MouseEvent) => void;

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

@@ -20,6 +20,7 @@ import { cx } from "../../../utils/cx/cx";
 import { scale } from "../../../utils/math/math";
 import { overlay } from "../../Overlay/Overlay";
 import { ColorUtils } from "../../../utils/color/color";
+import { toEpochMs } from "../../../utils/domain/utils/temporal";
 export const VerticalBars = (_a) => {
     var { children, fill, stroke, size = 50, anchor = 0, labels, radius = 0, glow, className, loading, interactions, onMouseEnter, onMouseLeave } = _a, rest = __rest(_a, ["children", "fill", "stroke", "size", "anchor", "labels", "radius", "glow", "className", "loading", "interactions", "onMouseEnter", "onMouseLeave"]);
     const context = useGraph();
@@ -35,14 +36,13 @@ export const VerticalBars = (_a) => {
         return (Object.assign(Object.assign({}, bar), { group: (_a = bar.group) !== null && _a !== void 0 ? _a : bar.id /* grouped unique if no group is defined */, data: xy }));
     }));
     const BAR_WIDTH = Math.floor(context.viewbox.x / context.domain.x.length / new Set(bars.map((bar) => bar.group)).size) * (size / 100); // this divided by number of unique groups?
-    /* FULL_BAR_WIDTH used in collision logic, if distinct(bars.group).size === 1 */
-    const FULL_BAR_WIDTH = Math.floor(context.viewbox.x / context.domain.x.length);
-    const isSingleBar = new Set(bars.map((bar) => bar.group)).size === 1;
-    const xValues = new Set(bars.map((bar) => (bar.data.x instanceof Date ? bar.data.x.getTime() : bar.data.x)));
+    const xValues = new Set(bars.map((bar) => (typeof bar.data.x === "string" || typeof bar.data.x === "number" ? bar.data.x : toEpochMs(bar.data.x))));
+    console.log(xValues);
     const dataset = Array.from(xValues)
         .flatMap((x) => {
         const coordinate = xForValue(x);
-        const barsForTick = bars.filter((bar) => (bar.data.x instanceof Date ? bar.data.x.getTime() : bar.data.x) === x);
+        const barsForTick = bars.filter((bar) => (typeof bar.data.x === "string" || typeof bar.data.x === "number" ? bar.data.x : toEpochMs(bar.data.x)) === x);
+        console.log(barsForTick);
         return Object.entries(ObjectUtils.groupBy(barsForTick, ({ group }) => group)).flatMap(([, barsForGroup], i, groups) => {
             const x1 = coordinate + BAR_WIDTH * i - (BAR_WIDTH * Object.keys(groups).length) / 2;
             return barsForGroup === null || barsForGroup === void 0 ? void 0 : barsForGroup.map((bar) => (Object.assign(Object.assign({}, bar), { x1, x2: x1 + BAR_WIDTH, y1: yForValue(bar.data.y), y2: yForValue(anchor) }))).map((segment, ii, segments) => {
@@ -78,7 +78,7 @@ export const VerticalBars = (_a) => {
             dataset.map((bar, i) => {
                 const position = typeof labels === "object" && "position" in labels ? labels.position : "center";
                 const collision = typeof labels === "object" && "collision" in labels ? labels.collision : true;
-                const width = scale(isSingleBar ? FULL_BAR_WIDTH : bar.x2 - bar.x1, context.viewbox.x, 100) + "%";
+                const width = scale(bar.x2 - bar.x1, context.viewbox.x, 100) + "%";
                 const height = scale(Math.abs(bar.y1 - bar.y2), context.viewbox.y, 100);
                 const top = position === "above" ? -4 : scale(Math.min(bar.y2, bar.y1), context.viewbox.y, 100) + "%";
                 const label = (() => {
@@ -88,11 +88,10 @@ export const VerticalBars = (_a) => {
                     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);
-                const xTick = xForValue(bar.data.x);
                 return (React.createElement(overlay.div, { key: i, className: "bars__label @container-[size] absolute text-center", style: {
                         width,
                         height: Math.abs(height - (position === "above" ? 100 : 0)) + "%",
-                        left: scale(isSingleBar ? xTick - FULL_BAR_WIDTH / 2 : bar.x1, context.viewbox.x, 100) + "%",
+                        left: scale(bar.x1, context.viewbox.x, 100) + "%",
                         top: top,
                     } },
                     React.createElement("div", { className: "h-full w-full relative" },

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

@@ -1,10 +1,10 @@
 import React from "react";
-import { InternalGraphContext } from "../../hooks/use-graph/use-graph";
+import { InternalGraphContext, TemporalDate } from "../../hooks/use-graph/use-graph";
 type Props = React.HTMLAttributes<HTMLDivElement> & {
     position: "top" | "bottom";
     alignment?: "start" | "center" | "end";
     gradient: `linear-gradient(${string})`;
-    labels?: boolean | ((value: string | number | Date) => string);
+    labels?: boolean | ((value: string | number | TemporalDate) => string);
 };
 export declare const GradientLegend: {
     ({ position, alignment, gradient, labels, ...rest }: Props): React.JSX.Element;
@@ -33,11 +33,11 @@ export declare const GradientLegend: {
         domain: {
             x: Array<{
                 coordinate: number;
-                tick: string | number | Date;
+                tick: string | number | TemporalDate;
             }>;
             y: Array<{
                 coordinate: number;
-                tick: string | number | Date;
+                tick: string | number | TemporalDate;
             }>;
         };
         colors: string[];

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

@@ -98,9 +98,7 @@ const GraphComponent = ({ data = [], gap, children, interactions, datasets = {},
     };
     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 && (
-        /* CTX for server components. */
-        React.createElement("script", { id: id + "-context", type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(colorized) } })),
+        isServerComponent && (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, {

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

@@ -2,8 +2,8 @@ import React from "react";
 interface Props extends Omit<React.SVGAttributes<SVGSVGElement>, "className"> {
     trendline?: boolean;
     border?: boolean;
-    horizontal?: boolean | "between";
-    vertical?: boolean | "between";
+    horizontal?: boolean;
+    vertical?: boolean;
     className?: string | {
         root?: string;
         vertical?: string;

package/dist/src/components/GridLines/GridLines.js

@@ -14,24 +14,15 @@ export const GridLines = ({ border = true, horizontal = true, vertical = true, c
                 { x1: 0, y1: y, x2: 0, y2: 0, side: "left" },
             ].map(({ x1, y1, x2, y2, side }, i) => (React.createElement("line", { key: i, x1: x1, y1: y1, x2: x2, y2: y2, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: tw("stroke-gray-200 dark:stroke-[#2d2d2d] grid-lines__border", typeof className === "object" && typeof className.border === "object" && className.border[side], typeof className === "object" && (className === null || className === void 0 ? void 0 : className.border)) }))),
         horizontal &&
-            domain.y.map(({ coordinate }, i, ys) => {
-                if ((coordinate === 0 || coordinate === y) && border && horizontal !== "between")
+            domain.y.map(({ coordinate }) => {
+                if ((coordinate === 0 || coordinate === y) && border)
                     return null;
-                /* handle horizontal between ys similar to vertical but with support for drawing UP tick: 0 coordinate 3000 -> tick: 50_000, coordinate: 0 */
-                const next = ys[i + 1];
-                if (horizontal === "between" && !next)
-                    return null;
-                const coordinateFor = horizontal === "between" && next ? (coordinate + next.coordinate) / 2 : coordinate;
-                return (React.createElement("line", { key: coordinateFor, x1: 0, y1: coordinateFor, x2: x, y2: coordinateFor, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: tw("stroke-gray-200 dark:stroke-[#2d2d2d] grid-lines__horizontal", typeof className === "object" && (className === null || className === void 0 ? void 0 : className.horizontal)) }));
+                return (React.createElement("line", { key: coordinate, x1: 0, y1: coordinate, x2: x, y2: coordinate, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: tw("stroke-gray-200 dark:stroke-[#2d2d2d] grid-lines__horizontal", typeof className === "object" && (className === null || className === void 0 ? void 0 : className.horizontal)) }));
             }),
         vertical &&
-            domain.x.map(({ coordinate }, i, xs) => {
-                if ((coordinate === 0 || coordinate === x) && border && vertical !== "between")
-                    return null;
-                const next = xs[i + 1];
-                if (vertical === "between" && !next)
+            domain.x.map(({ coordinate }) => {
+                if ((coordinate === 0 || coordinate === x) && border)
                     return null;
-                const coordinateFor = vertical === "between" && next ? (coordinate + next.coordinate) / 2 : coordinate;
-                return (React.createElement("line", { key: coordinateFor, x1: coordinateFor, y1: 0, x2: coordinateFor, y2: y, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: tw("stroke-gray-200 dark:stroke-[#2d2d2d] grid-lines__vertical", typeof className === "object" && (className === null || className === void 0 ? void 0 : className.vertical)) }));
+                return (React.createElement("line", { key: coordinate, x1: coordinate, y1: 0, x2: coordinate, y2: y, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: tw("stroke-gray-200 dark:stroke-[#2d2d2d] grid-lines__vertical", typeof className === "object" && (className === null || className === void 0 ? void 0 : className.vertical)) }));
             })));
 };

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

@@ -1,3 +1,4 @@
+import { TemporalDate } from "../../hooks/use-graph/use-graph";
 import React from "react";
 type Props = React.HTMLAttributes<SVGSVGElement> & {
     gradient: `linear-gradient(${string})`;
@@ -5,9 +6,9 @@ type Props = React.HTMLAttributes<SVGSVGElement> & {
         tick: number;
         percent: number;
     }>;
-    labels?: boolean | ((value: string | number | Date) => string) | {
+    labels?: boolean | ((value: string | number | TemporalDate) => string) | {
         collision?: boolean;
-        display: (value: string | number | Date) => string;
+        display: (value: string | number | TemporalDate) => string;
     };
 };
 export declare const Heatmap: ({ labels, scalars, gradient, className, ...rest }: Props) => React.JSX.Element | null;

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

@@ -37,11 +37,11 @@ export declare const Legend: {
         domain: {
             x: Array<{
                 coordinate: number;
-                tick: string | number | Date;
+                tick: string | number | import("../../hooks/use-graph/use-graph").TemporalDate;
             }>;
             y: Array<{
                 coordinate: number;
-                tick: string | number | Date;
+                tick: string | number | import("../../hooks/use-graph/use-graph").TemporalDate;
             }>;
         };
         colors: string[];

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

@@ -16,8 +16,8 @@ export declare const Lines: {
     Tooltip: React.ComponentType<Omit<React.HTMLAttributes<HTMLDivElement> & {
         tooltip?: ((points: Array<Omit<import("../../export").CartesianDataset[number], "data"> & {
             data: import("../../export").CartesianDataset[number]["data"][number];
-        }>, x: number | string | Date) => React.ReactNode) | {
-            title?: (x: number | string | Date) => React.ReactNode;
+        }>, x: number | string | import("../../hooks/use-graph/use-graph").TemporalDate) => React.ReactNode) | {
+            title?: (x: number | string | import("../../hooks/use-graph/use-graph").TemporalDate) => React.ReactNode;
             display?: (point: import("../../export").CartesianDataset[number]["data"][number]) => React.ReactNode;
         };
         joints?: boolean;
@@ -39,15 +39,15 @@ export declare const Lines: {
     }) => React.JSX.Element;
     Joints: ({ context, border, at, strokeWidth }: {
         at?: {
-            x: string | number | Date;
+            x: string | number | import("../../hooks/use-graph/use-graph").TemporalDate;
         };
         border?: string;
         strokeWidth?: number;
         context: InternalGraphContext;
     }) => (React.JSX.Element | null)[] | null;
     Reference: ({ x, y, ...rest }: React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-        x: number | string | Date;
-        y: number | string | Date;
+        x: number | string | import("../../hooks/use-graph/use-graph").TemporalDate;
+        y: number | string | import("../../hooks/use-graph/use-graph").TemporalDate;
     }) => React.JSX.Element;
 };
 export {};

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

@@ -1,8 +1,8 @@
-import { InternalGraphContext } from "../../../hooks/use-graph/use-graph";
+import { InternalGraphContext, TemporalDate } from "../../../hooks/use-graph/use-graph";
 import * as React from "react";
 type Props = {
     at?: {
-        x: string | number | Date;
+        x: string | number | TemporalDate;
     };
     border?: string;
     strokeWidth?: number;

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

@@ -1,7 +1,8 @@
 import { ComponentProps, JSX } from "react";
+import { TemporalDate } from "../../../hooks/use-graph/use-graph";
 type Props = ComponentProps<"div"> & {
-    x: number | string | Date;
-    y: number | string | Date;
+    x: number | string | TemporalDate;
+    y: number | string | TemporalDate;
 };
 export declare const LinesReference: ({ x, y, ...rest }: Props) => JSX.Element;
 export {};

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

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { RefObject } from "react";
-import { CartesianDataset } from "../../../hooks/use-graph/use-graph";
+import { CartesianDataset, TemporalDate } from "../../../hooks/use-graph/use-graph";
 type Props = React.HTMLAttributes<HTMLDivElement> & {
     tooltip?: ((points: Array<Omit<CartesianDataset[number], "data"> & {
         data: CartesianDataset[number]["data"][number];
-    }>, x: number | string | Date) => React.ReactNode) | {
-        title?: (x: number | string | Date) => React.ReactNode;
+    }>, x: number | string | TemporalDate) => React.ReactNode) | {
+        title?: (x: number | string | TemporalDate) => React.ReactNode;
         display?: (point: CartesianDataset[number]["data"][number]) => React.ReactNode;
     };
     joints?: boolean;

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

@@ -23,6 +23,7 @@ import { GradientUtils } from "../../../utils/gradient/gradient";
 import { tw } from "../../../utils/cx/cx";
 import { Portal } from "../../Portal/Portal";
 import { useBoundingBox } from "../../../hooks/use-bounding-box";
+import { equals } from "../../../utils/equals/equals";
 const TOOLTIP_MARGIN = 20;
 export const LinesTooltip = (_a) => {
     var _b, _c, _d, _e, _f, _g;
@@ -42,7 +43,7 @@ export const LinesTooltip = (_a) => {
         /* Turn dataset into a dataset with a single point instead of line of points where that point === value near mouse */
         return data
             .flatMap((line, i) => {
-            const point = line.data.find((d) => +d.x === +closest);
+            const point = line.data.find((d) => equals(d.x, closest));
             if (!point)
                 return [];
             const stroke = (() => {
@@ -50,7 +51,7 @@ export const LinesTooltip = (_a) => {
                 if ((_a = line.stroke) === null || _a === void 0 ? void 0 : _a.includes("linear-gradient")) {
                     return GradientUtils.gradientColorFromValue({
                         gradient: line.stroke,
-                        point: point,
+                        point,
                         dataset: line.data,
                         viewbox,
                         domain,
@@ -68,8 +69,8 @@ export const LinesTooltip = (_a) => {
     })();
     const isRightAligned = mouse.px.x > width - tooltipWidth - TOOLTIP_MARGIN;
     const { left, top } = {
-        left: Math.round(MathUtils.clamp(mouse.px.x, scale(xForValue(+closest), viewbox.x, width) + TOOLTIP_MARGIN, isRightAligned
-            ? scale(xForValue(+closest), viewbox.x, width) - TOOLTIP_MARGIN - tooltipWidth
+        left: Math.round(MathUtils.clamp(mouse.px.x, scale(xForValue(closest), viewbox.x, width) + TOOLTIP_MARGIN, isRightAligned
+            ? scale(xForValue(closest), viewbox.x, width) - TOOLTIP_MARGIN - tooltipWidth
             : width - tooltipWidth - TOOLTIP_MARGIN)),
         top: Math.round(MathUtils.clamp(mouse.px.y, TOOLTIP_MARGIN, height - tooltipHeight - TOOLTIP_MARGIN)),
     };
@@ -91,12 +92,12 @@ export const LinesTooltip = (_a) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(Portal, null,
             React.createElement("svg", { viewBox: `0 0 ${viewbox.x} ${viewbox.y}`, className: "[grid-area:graph] h-full w-full absolute overflow-visible pointer-events-none", style: { width: rect.width, height: rect.height, left: rect.left, top: rect.top }, preserveAspectRatio: "none" },
-                React.createElement("line", { x1: xForValue(+closest), x2: xForValue(+closest), y1: 0, y2: viewbox.y, className: "stroke-black dark:stroke-white", strokeWidth: 4 }),
+                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} h 0.001`, strokeWidth: "8", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" }));
                     }))),
-            ordered && (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-filter:blur(4px)] w-[250px] pb-1.5 border-gray-200 dark-border-[#454545]" }),
+            ordered && (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 [background:linear-gradient(transparent,#CFCFCF)] dark:[background:linear-gradient(transparent,#3C3C3C)] pl-2 pr-2 pt-1.5 pb-1 mb-1.5" }, (() => {
                     if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.title)
                         return tooltip.title(closest);
@@ -118,8 +119,8 @@ export const LinesTooltip = (_a) => {
                         });
                         if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.display)
                             return tooltip.display(data);
-                        if (data.y instanceof Date)
-                            return data.y.toISOString();
+                        if (typeof data.y !== "string" && typeof data.y !== "number")
+                            return data.y.toString();
                         if (typeof data.y === "string")
                             return data.y;
                         return formatter.format(data.y);

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

@@ -2,8 +2,8 @@ import React from "react";
 export declare const LinesTooltipZone: React.ComponentType<Omit<React.HTMLAttributes<HTMLDivElement> & {
     tooltip?: ((points: Array<Omit<import("../../../export").CartesianDataset[number], "data"> & {
         data: import("../../../export").CartesianDataset[number]["data"][number];
-    }>, x: number | string | Date) => React.ReactNode) | {
-        title?: (x: number | string | Date) => React.ReactNode;
+    }>, x: number | string | import("../../../hooks/use-graph/use-graph").TemporalDate) => React.ReactNode) | {
+        title?: (x: number | string | import("../../../hooks/use-graph/use-graph").TemporalDate) => React.ReactNode;
         display?: (point: import("../../../export").CartesianDataset[number]["data"][number]) => React.ReactNode;
     };
     joints?: boolean;

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

@@ -1,5 +1,6 @@
 import React, { ReactNode, Ref } from "react";
 import { OverlayRect } from "./OverlayRect";
+import { TemporalDate } from "../../hooks/use-graph/use-graph";
 type HTMLElements = keyof React.JSX.IntrinsicElements;
 type Props = React.HTMLAttributes<HTMLDivElement> & {
     ref?: Ref<HTMLDivElement>;
@@ -7,12 +8,12 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
     x?: {
         coordinate: number;
     } | {
-        tick: number | Date | string;
+        tick: number | TemporalDate | string;
     };
     y?: {
         coordinate: number;
     } | {
-        tick: number | Date | string;
+        tick: number | TemporalDate | string;
     };
 };
 export declare const Overlay: ({ children, tag, ref, x, y, ...rest }: Props) => React.JSX.Element;

package/dist/src/components/Overlay/OverlayRect.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
+import { TemporalDate } from "../../hooks/use-graph/use-graph";
 interface OverlayRectProps extends React.HTMLAttributes<HTMLDivElement> {
-    x1: Date | number | string;
-    y1: Date | number | string;
-    x2: Date | number | string;
-    y2?: Date | number | string;
+    x1: TemporalDate | number | string;
+    y1: TemporalDate | number | string;
+    x2: TemporalDate | number | string;
+    y2?: TemporalDate | number | string;
 }
 export declare const OverlayRect: React.FC<OverlayRectProps>;
 export {};

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

@@ -22,9 +22,7 @@ type Props = {
 export declare const Pie: {
     ({ glow, donut, labels, radius, gap, total, loading, className, onMouseEnter, onMouseLeave, children }: Props): React.JSX.Element | null;
     Tooltip: React.ComponentType<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & {
-        children: (segment: InternalSegmentDataset[number] & {
-            percent: number;
-        }) => ReactNode;
+        children: (segment: InternalSegmentDataset[number]) => ReactNode;
     }>;
     context(ctx: InternalGraphContext, props: Props): InternalGraphContext;
 };