nanoplot 0.0.80 → 0.0.82

package/dist/index.css

@@ -64,10 +64,6 @@
   bottom: 0px;
 }
 
-.left-0 {
-  left: 0px;
-}
-
 .left-2 {
   left: 0.5rem;
 }
@@ -76,6 +72,10 @@
   left: 50%;
 }
 
+.right-0 {
+  right: 0px;
+}
+
 .right-2 {
   right: 0.5rem;
 }
@@ -108,6 +108,10 @@
   z-index: 10;
 }
 
+.z-\[-1\] {
+  z-index: -1;
+}
+
 .z-\[2\] {
   z-index: 2;
 }
@@ -182,10 +186,6 @@
   aspect-ratio: 1090/539;
 }
 
-.aspect-square {
-  aspect-ratio: 1 / 1;
-}
-
 .size-4 {
   width: 1rem;
   height: 1rem;
@@ -195,10 +195,6 @@
   height: 0.5rem;
 }
 
-.h-\[1\.25em\] {
-  height: 1.25em;
-}
-
 .h-\[14px\] {
   height: 14px;
 }
@@ -207,12 +203,12 @@
   height: 16px;
 }
 
-.h-\[8px\] {
-  height: 8px;
+.h-\[1px\] {
+  height: 1px;
 }
 
-.h-auto {
-  height: auto;
+.h-\[8px\] {
+  height: 8px;
 }
 
 .h-full {
@@ -235,6 +231,10 @@
   width: 250px;
 }
 
+.w-\[8px\] {
+  width: 8px;
+}
+
 .w-auto {
   width: auto;
 }
@@ -373,6 +373,11 @@
   background-color: currentColor;
 }
 
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+
 .bg-gray-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
@@ -395,6 +400,14 @@
   fill: #efefef;
 }
 
+.fill-\[url\(\#bar-shadow-light\)\] {
+  fill: url(#bar-shadow-light);
+}
+
+.fill-\[var\(--worldmap-fill-light\)\] {
+  fill: var(--worldmap-fill-light);
+}
+
 .fill-gray-200 {
   fill: #e5e7eb;
 }
@@ -407,12 +420,12 @@
   fill: transparent;
 }
 
-.stroke-black {
-  stroke: #000;
+.stroke-\[\#2d2d2d\] {
+  stroke: #2d2d2d;
 }
 
-.stroke-dark-priority-100 {
-  stroke: rgb(45, 45, 45);
+.stroke-black {
+  stroke: #000;
 }
 
 .stroke-gray-200 {
@@ -581,10 +594,20 @@
   opacity: 0;
 }
 
+.opacity-40 {
+  opacity: 0.4;
+}
+
 .opacity-\[0\.8\] {
   opacity: 0.8;
 }
 
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -627,6 +650,10 @@
   transition-duration: 200ms;
 }
 
+.duration-300 {
+  transition-duration: 300ms;
+}
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -635,6 +662,10 @@
   will-change: transform;
 }
 
+.\@container-\[inline-size\] {
+  container-type: inline-size;
+}
+
 .\@container-\[size\] {
   container-type: size;
 }
@@ -748,6 +779,10 @@
   line-height: 1rem;
 }
 
+.\[scale\:1\.02\] {
+  scale: 1.02;
+}
+
 .\[scale\:1\] {
   scale: 1;
 }
@@ -954,12 +989,8 @@
   inset: calc(-1 * var(--b) - var(--h)) calc(-1 * var(--b)) calc(-1 * var(--b));
 }
 
-.hover\:stroke-white:hover {
-  stroke: #fff;
-}
-
-.hover\:stroke-\[1\.2\]:hover {
-  stroke-width: 1.2;
+.hover\:stroke-\[var\(--worldmap-stroke\)\]:hover {
+  stroke: var(--worldmap-stroke);
 }
 
 .hover\:\[fill-opacity\:0\.2\]:hover {
@@ -995,6 +1026,10 @@
   .\@\[width\:100ch\]\:\!\[writing-mode\:unset\] {
     writing-mode: unset !important;
   }
+
+  .\@\[width\:100ch\]\:\[writing-mode\:unset\] {
+    writing-mode: unset;
+  }
 }
 
 @container (min-width:10ch) {
@@ -1005,6 +1040,10 @@
   .\@\[width\:10ch\]\:\!\[writing-mode\:unset\] {
     writing-mode: unset !important;
   }
+
+  .\@\[width\:10ch\]\:\[writing-mode\:unset\] {
+    writing-mode: unset;
+  }
 }
 
 @container (min-width:10ch) and (min-height:1.25em) {
@@ -1021,6 +1060,10 @@
   .\@\[width\:130ch\]\:\!\[writing-mode\:unset\] {
     writing-mode: unset !important;
   }
+
+  .\@\[width\:130ch\]\:\[writing-mode\:unset\] {
+    writing-mode: unset;
+  }
 }
 
 @container (min-width:15ch) and (min-height:1.25em) {
@@ -1037,6 +1080,10 @@
   .\@\[width\:160ch\]\:\!\[writing-mode\:unset\] {
     writing-mode: unset !important;
   }
+
+  .\@\[width\:160ch\]\:\[writing-mode\:unset\] {
+    writing-mode: unset;
+  }
 }
 
 @container (min-width:190ch) {
@@ -1047,6 +1094,10 @@
   .\@\[width\:190ch\]\:\!\[writing-mode\:unset\] {
     writing-mode: unset !important;
   }
+
+  .\@\[width\:190ch\]\:\[writing-mode\:unset\] {
+    writing-mode: unset;
+  }
 }
 
 @container (min-width:20ch) {
@@ -1057,6 +1108,10 @@
   .\@\[width\:20ch\]\:\!\[writing-mode\:unset\] {
     writing-mode: unset !important;
   }
+
+  .\@\[width\:20ch\]\:\[writing-mode\:unset\] {
+    writing-mode: unset;
+  }
 }
 
 @container (min-width:20ch) and (min-height:1.25em) {
@@ -1079,6 +1134,10 @@
   .\@\[width\:30ch\]\:\!\[writing-mode\:unset\] {
     writing-mode: unset !important;
   }
+
+  .\@\[width\:30ch\]\:\[writing-mode\:unset\] {
+    writing-mode: unset;
+  }
 }
 
 @container (min-width:400px) {
@@ -1095,6 +1154,10 @@
   .\@\[width\:40ch\]\:\!\[writing-mode\:unset\] {
     writing-mode: unset !important;
   }
+
+  .\@\[width\:40ch\]\:\[writing-mode\:unset\] {
+    writing-mode: unset;
+  }
 }
 
 @container (min-width:4ch) and (min-height:1.25em) {
@@ -1111,6 +1174,10 @@
   .\@\[width\:50ch\]\:\!\[writing-mode\:unset\] {
     writing-mode: unset !important;
   }
+
+  .\@\[width\:50ch\]\:\[writing-mode\:unset\] {
+    writing-mode: unset;
+  }
 }
 
 @container (min-width:5ch) and (min-height:1.25em) {
@@ -1127,6 +1194,10 @@
   .\@\[width\:60ch\]\:\!\[writing-mode\:unset\] {
     writing-mode: unset !important;
   }
+
+  .\@\[width\:60ch\]\:\[writing-mode\:unset\] {
+    writing-mode: unset;
+  }
 }
 
 @container (min-width:6ch) and (min-height:1.25em) {
@@ -1143,6 +1214,10 @@
   .\@\[width\:70ch\]\:\!\[writing-mode\:unset\] {
     writing-mode: unset !important;
   }
+
+  .\@\[width\:70ch\]\:\[writing-mode\:unset\] {
+    writing-mode: unset;
+  }
 }
 
 @container (min-width:80ch) {
@@ -1153,6 +1228,10 @@
   .\@\[width\:80ch\]\:\!\[writing-mode\:unset\] {
     writing-mode: unset !important;
   }
+
+  .\@\[width\:80ch\]\:\[writing-mode\:unset\] {
+    writing-mode: unset;
+  }
 }
 
 @container (min-width:8ch) and (min-height:1.25em) {
@@ -1169,6 +1248,15 @@
   .\@\[width\:90ch\]\:\!\[writing-mode\:unset\] {
     writing-mode: unset !important;
   }
+
+  .\@\[width\:90ch\]\:\[writing-mode\:unset\] {
+    writing-mode: unset;
+  }
+}
+
+.dark\:bg-\[\#2d2d2d\]:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(45 45 45 / var(--tw-bg-opacity, 1));
 }
 
 .dark\:fill-\[\#111111\]:where(.dark, .dark *) {
@@ -1183,8 +1271,12 @@
   fill: #2d2d2d;
 }
 
-.dark\:fill-dark-priority-100:where(.dark, .dark *) {
-  fill: rgb(45, 45, 45);
+.dark\:fill-\[url\(\#bar-shadow-dark\)\]:where(.dark, .dark *) {
+  fill: url(#bar-shadow-dark);
+}
+
+.dark\:fill-\[var\(--worldmap-fill-dark\)\]:where(.dark, .dark *) {
+  fill: var(--worldmap-fill-dark);
 }
 
 .dark\:fill-gray-400:where(.dark, .dark *) {
@@ -1199,10 +1291,6 @@
   stroke: #2d2d2d;
 }
 
-.dark\:stroke-dark-priority-100:where(.dark, .dark *) {
-  stroke: rgb(45, 45, 45);
-}
-
 .dark\:stroke-white:where(.dark, .dark *) {
   stroke: #fff;
 }

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

@@ -11,5 +11,27 @@ type HorizontalProps = {
 export declare const Bars: {
     ({ horizontal, ...props }: VerticalProps | HorizontalProps): React.JSX.Element;
     context(ctx: InternalGraphContext): InternalGraphContext;
+    Mouse: ({ onMove, onLeave, onEnter, className }: {
+        className?: string;
+        onMove?: (mouse: null | {
+            coordinates: SVGPoint;
+            px: {
+                x: number;
+                y: number;
+            };
+            closest: {
+                datapoint: {
+                    x: Date | string | number;
+                    y: Date | string | number;
+                };
+                tick: {
+                    x: string | number | Date;
+                    y: string | number | Date;
+                };
+            };
+        }, e: React.MouseEvent<SVGSVGElement>) => void;
+        onEnter?: (e: React.MouseEvent<SVGSVGElement>) => void;
+        onLeave?: (e: React.MouseEvent<SVGSVGElement>) => void;
+    }) => React.JSX.Element;
 };
 export {};

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

@@ -13,6 +13,7 @@ import React from "react";
 import { HorizontalBars } from "./components/HorizontalBars";
 import { VerticalBars } from "./components/VerticalBars";
 import { ColorUtils } from "../../utils/color/color";
+import { BarsMouse } from "./components/BarsMouse";
 export const Bars = (_a) => {
     var { horizontal } = _a, props = __rest(_a, ["horizontal"]);
     return horizontal ? React.createElement(HorizontalBars, Object.assign({}, props)) : React.createElement(VerticalBars, Object.assign({}, props));
@@ -20,3 +21,4 @@ export const Bars = (_a) => {
 Bars.context = (ctx) => {
     return Object.assign(Object.assign({}, ctx), { colors: ColorUtils.scheme.contrast });
 };
+Bars.Mouse = BarsMouse;

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

@@ -0,0 +1,25 @@
+import { MouseEvent } from "react";
+type Props = {
+    className?: string;
+    onMove?: (mouse: null | {
+        coordinates: SVGPoint;
+        px: {
+            x: number;
+            y: number;
+        };
+        closest: {
+            datapoint: {
+                x: Date | string | number;
+                y: Date | string | number;
+            };
+            tick: {
+                x: string | number | Date;
+                y: string | number | Date;
+            };
+        };
+    }, e: MouseEvent<SVGSVGElement>) => void;
+    onEnter?: (e: MouseEvent<SVGSVGElement>) => void;
+    onLeave?: (e: MouseEvent<SVGSVGElement>) => void;
+};
+export declare const BarsMouse: ({ onMove, onLeave, onEnter, className }: Props) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+"use client";
+import { useMouseCoordinates } from "../../../hooks/use-mouse-coordinates";
+import { useRef } from "react";
+import { useGraph, useIsZooming } from "../../../hooks/use-graph/use-graph";
+import { tw } from "../../../utils/cx/cx";
+export const BarsMouse = ({ onMove, onLeave, onEnter, className }) => {
+    const ref = useRef(null);
+    const isZooming = useIsZooming();
+    const { viewbox } = useGraph();
+    const mouse = useMouseCoordinates(ref, { x: true, y: true, lazy: true });
+    return (React.createElement("svg", { ref: ref, viewBox: `0 0 ${viewbox.x} ${viewbox.y}`, preserveAspectRatio: "none", className: tw("bars-mouse h-full w-full [grid-area:graph] absolute overflow-visible [backface-visibility:hidden]", isZooming && "block overflow-hidden", className), onMouseEnter: onEnter, onMouseLeave: onLeave, onMouseMove: (e) => onMove === null || onMove === void 0 ? void 0 : onMove(mouse, e) }));
+};

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

@@ -18,8 +18,12 @@ type Props = Omit<React.SVGAttributes<SVGSVGElement>, "onMouseEnter" | "onMouseL
      */
     fill?: (segment: Segment) => string;
     stroke?: (segment: Segment) => string;
+    interactions?: {
+        y?: number | string | Date;
+        shadow?: boolean;
+    };
     onMouseEnter?: (rect: Segment, event: MouseEvent) => void;
     onMouseLeave?: (event: MouseEvent) => void;
 };
-export declare const HorizontalBars: ({ children, fill, stroke, labels, size, radius, anchor, onMouseEnter, onMouseLeave, className, }: Props) => React.JSX.Element | null;
+export declare const HorizontalBars: ({ children, fill, stroke, labels, size, radius, anchor, interactions, onMouseEnter, onMouseLeave, className, }: Props) => React.JSX.Element | null;
 export {};

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

@@ -19,32 +19,49 @@ 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, fill, stroke, labels, size = 50, radius = 0, anchor = 0, onMouseEnter, onMouseLeave, className, }) => {
+import { LinearGradient } from "../../LinearGradient/LinearGradient";
+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))
         return null;
     const xForValue = CoordinatesUtils.xCoordinateFor(context);
+    const yForValue = CoordinatesUtils.yCoordinateFor(context);
     const bars = context.data.flatMap((bar, i) => bar.data.map((xy) => {
-        var _a, _b, _c, _d, _e;
-        return (Object.assign(Object.assign({}, bar), { fill: (_c = (_b = (_a = bar.fill) !== null && _a !== void 0 ? _a : bar.stroke) !== null && _b !== void 0 ? _b : context.colors[i]) !== null && _c !== void 0 ? _c : context.colors.at(-1), group: (_e = (_d = bar.group) !== null && _d !== void 0 ? _d : bar.id) !== null && _e !== void 0 ? _e : bar.name, data: xy }));
-    })); // bars excl segments.
-    const BAR_WIDTH = Math.floor((context.viewbox.y * (size / 100)) / new Set(bars.map((bar) => `${bar.data.y}|${bar.group}`)).size);
-    /* dataset is a single array of rect's with x1/x2/y1/y2; rect can be a segment of a bar (grouped) or a bar itself */
-    const dataset = context.domain.y
-        .flatMap(({ tick, coordinate }) => {
-        return Object.entries(ObjectUtils.groupBy(bars.filter((d) => d.data.y === tick), ({ group }) => group)).flatMap(([, barsForGroup], i, groups) => {
-            const y1 = coordinate + BAR_WIDTH * i - (BAR_WIDTH * Object.keys(groups).length) / 2;
-            return barsForGroup === null || barsForGroup === void 0 ? void 0 : barsForGroup.map((bar) => {
-                return Object.assign(Object.assign({}, bar), { x1: xForValue(anchor), x2: xForValue(bar.data.x), y1, y2: y1 + BAR_WIDTH });
-            }).map((segment, i, segments) => {
-                const previousX = segments.slice(0, i).reduce((acc, { x2 }) => acc + x2, xForValue(anchor));
-                return Object.assign(Object.assign({}, segment), { x1: previousX, x2: segment.x2 - previousX ? segment.x2 : segment.x2 + previousX, radius: i === segments.length - 1 ? radius : undefined });
+        var _a;
+        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 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);
+        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) => {
+                const isAboveAnchor = Math.min(segment.x1, segment.x2) < xForValue(anchor);
+                const prevWidth = segments.slice(0, ii).reduce((acc, { x1, x2 }) => {
+                    if (isAboveAnchor ? x1 >= xForValue(anchor) : xForValue(anchor) >= x1)
+                        return acc;
+                    return isAboveAnchor ? acc + Math.abs(x1 - x2) : acc - Math.abs(x1 - x2);
+                }, 0);
+                const x1 = segment.x1 - prevWidth;
+                const x2 = segment.x2 - prevWidth;
+                return Object.assign(Object.assign({}, segment), { x1: Math.max(x1, x2), x2: Math.min(x1, x2), radius: ii === segments.length - 1 ? radius : undefined });
             });
         });
     })
         .filter((x) => !!x);
     return (React.createElement(React.Fragment, null,
         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" },
+            React.createElement(LinearGradient, { gradient: "linear-gradient(to left, rgba(45, 45, 45, 0) 0%, rgba(45, 45, 45, 0.35) 65%, rgba(45, 45, 45, 1) 100%)", id: "bar-shadow-dark" }),
+            React.createElement(LinearGradient, { gradient: "linear-gradient(to left, rgba(180, 180, 180, 0) 0%, rgba(180, 180, 180, 0.15) 65%, rgba(180, 180, 180, 0.2) 100%)", id: "bar-shadow-light" }),
+            context.domain.y.map(({ coordinate }, i) => {
+                const isShadowed = (interactions === null || interactions === void 0 ? void 0 : interactions.shadow) && (interactions === null || interactions === void 0 ? void 0 : interactions.y) && yForValue(interactions.y) === coordinate;
+                if (!(interactions === null || interactions === void 0 ? void 0 : interactions.shadow))
+                    return null;
+                return (React.createElement(Rect, { key: i, x1: 0, x2: context.viewbox.x, y2: coordinate + context.viewbox.x / context.domain.x.length / 2, y1: coordinate - context.viewbox.x / context.domain.x.length / 2, stroke: "transparent", className: cx("bars__bar bars__bar--shadow transition-all duration-300 opacity-0 fill-[url(#bar-shadow-light)]", isShadowed && "opacity-1", `dark:fill-[url(#bar-shadow-dark)]`) }));
+            }),
             dataset.map((_a, index) => {
                 var { x1, x2, y1, y2 } = _a, bar = __rest(_a, ["x1", "x2", "y1", "y2"]);
                 const fillColor = fill ? fill(bar) : bar.fill;

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

@@ -27,12 +27,12 @@ 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, fill: isFillGradient ? `url(#${fillId})` : rest.fill, stroke: isGradientStroke ? `url(#${strokeId})` : rest.stroke }),
+        React.createElement("path", { id: clipId, d: path, fill: isFillGradient ? `url(#${fillId})` : rest.fill, stroke: isGradientStroke ? `url(#${strokeId})` : rest.stroke, className: rest.className }),
         React.createElement("clipPath", { id: clip },
             React.createElement("use", { xlinkHref: "#" + clipId })),
         glow && (React.createElement(React.Fragment, null,
             React.createElement("use", { xlinkHref: `#${glowId}`, filter: "blur(45px)", opacity: 0.5 }),
             React.createElement("g", { id: glowId },
                 React.createElement("path", { fill: isFillGradient ? `url(#${fillId})` : rest.fill, stroke: "transparent", d: path, vectorEffect: "non-scaling-stroke", className: rest.className, strokeWidth: 5 })))),
-        isFillMasked ? (React.createElement("rect", Object.assign({}, rest, { x: x1, y: 0, width: x2 - x1, height: "100%", fill: `url(#${fillId})`, clipPath: `url(#${clip})` }))) : (React.createElement("path", Object.assign({}, rest, { fill: isFillGradient ? `url(#${fillId})` : rest.fill, stroke: isGradientStroke ? `url(#${strokeId})` : rest.stroke, d: path, vectorEffect: "non-scaling-stroke", strokeWidth: (_e = rest.strokeWidth) !== null && _e !== void 0 ? _e : 10, className: rest.className, clipPath: `url(#${clip})` })))));
+        isFillMasked ? (React.createElement("rect", Object.assign({}, rest, { x: x1, y: 0, width: x2 - x1, height: "100%", fill: `url(#${fillId})`, clipPath: `url(#${clip})`, className: rest.className }))) : (React.createElement("path", Object.assign({}, rest, { fill: isFillGradient ? `url(#${fillId})` : rest.fill, stroke: isGradientStroke ? `url(#${strokeId})` : rest.stroke, d: path, vectorEffect: "non-scaling-stroke", strokeWidth: (_e = rest.strokeWidth) !== null && _e !== void 0 ? _e : 10, clipPath: `url(#${clip})`, className: rest.className })))));
 };

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

@@ -4,10 +4,8 @@ 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;
+    glow?: boolean;
     radius?: number;
     anchor?: number;
     labels?: boolean | ((segment: Segment) => string) | {
@@ -15,13 +13,22 @@ type Props = Omit<React.SVGAttributes<SVGSVGElement>, "onMouseEnter" | "onMouseL
         collision?: boolean;
         display: (segment: Segment) => string;
     };
+    loading?: boolean;
+    children?: ReactNode;
     /**
-     * Function that can change the 'fill' for individual segments based on some condition.
+     * Function that can change the 'fill' for individual bar segments based on some condition.
      */
     fill?: (segment: Segment) => string;
+    /**
+     * Function that can change the 'stroke' for individual bar segments based on some condition.
+     */
     stroke?: (segment: Segment) => string;
+    interactions?: {
+        x?: number | string | Date;
+        shadow?: boolean;
+    };
     onMouseEnter?: (rect: Segment, event: MouseEvent) => void;
     onMouseLeave?: (event: MouseEvent) => void;
 };
-export declare const VerticalBars: ({ children, fill, stroke, 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, interactions, onMouseEnter, onMouseLeave, ...rest }: Props) => React.JSX.Element | null;
 export {};

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

@@ -20,26 +20,30 @@ import { cx } from "../../../utils/cx/cx";
 import { scale } from "../../../utils/math/math";
 import { overlay } from "../../Overlay/Overlay";
 import { ColorUtils } from "../../../utils/color/color";
+import { LinearGradient } from "../../LinearGradient/LinearGradient";
 export const VerticalBars = (_a) => {
-    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"]);
+    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();
+    const { interactions: { hovered, pinned }, } = context;
     if (!GraphUtils.isXYData(context.data))
         return null;
     if (loading)
         return React.createElement(BarsVerticalLoading, null);
     const yForValue = CoordinatesUtils.yCoordinateFor(context);
+    const xForValue = CoordinatesUtils.xCoordinateFor(context);
     const bars = context.data.flatMap((bar, i) => bar.data.map((xy) => {
         var _a, _b, _c, _d, _e;
         return (Object.assign(Object.assign({}, bar), { fill: (_c = (_b = (_a = bar.fill) !== null && _a !== void 0 ? _a : bar.stroke) !== null && _b !== void 0 ? _b : context.colors[i]) !== null && _c !== void 0 ? _c : context.colors.at(-1), group: (_e = (_d = bar.group) !== null && _d !== void 0 ? _d : bar.id) !== null && _e !== void 0 ? _e : bar.name, data: xy }));
     }));
-    const BAR_WIDTH = Math.floor((context.viewbox.x * (size / 100)) / new Set(bars.map((bar) => `${bar.data.x}|${bar.group}`)).size);
-    const dataset = context.domain.x
-        .flatMap(({ tick, coordinate }) => {
-        return Object.entries(ObjectUtils.groupBy(bars.filter((d) => d.data.x === tick), ({ group }) => group)).flatMap(([, barsForGroup], i, groups) => {
+    const BAR_WIDTH = Math.floor(context.viewbox.x / context.domain.x.length / new Set(bars.map((bar) => { var _a; return (_a = bar.group) !== null && _a !== void 0 ? _a : "no-group"; })).size) * (size / 100); // this divided by number of unique groups?
+    const xValues = new Set(bars.map((bar) => (bar.data.x instanceof Date ? bar.data.x.getTime() : bar.data.x)));
+    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);
+        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) => {
-                return Object.assign(Object.assign({}, bar), { x1, x2: x1 + BAR_WIDTH, y1: yForValue(bar.data.y), y2: yForValue(anchor) });
-            }).map((segment, ii, segments) => {
+            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) => {
                 /* this stacks segments in same group */
                 const isAboveAnchor = Math.min(segment.y1, segment.y2) < yForValue(anchor);
                 const prevHeight = segments.slice(0, ii).reduce((acc, { y1, y2 }) => {
@@ -57,13 +61,24 @@ export const VerticalBars = (_a) => {
     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("vertical-bars [grid-area:graph] h-full w-full bars", className), preserveAspectRatio: "none" }),
+            React.createElement(LinearGradient, { gradient: "linear-gradient(to bottom, rgba(45, 45, 45, 0) 0%, rgba(45, 45, 45, 0.35) 65%, rgba(45, 45, 45, 1) 100%)", id: "bar-shadow-dark" }),
+            React.createElement(LinearGradient, { gradient: "linear-gradient(to bottom, rgba(180, 180, 180, 0) 0%, rgba(180, 180, 180, 0.15) 65%, rgba(180, 180, 180, 0.2) 100%)", id: "bar-shadow-light" }),
+            context.domain.x.map(({ coordinate }, i) => {
+                const isShadowed = (interactions === null || interactions === void 0 ? void 0 : interactions.shadow) && (interactions === null || interactions === void 0 ? void 0 : interactions.x) && xForValue(interactions.x) === coordinate;
+                if (!(interactions === null || interactions === void 0 ? void 0 : interactions.shadow))
+                    return null;
+                return (React.createElement(Rect, { key: i, x1: coordinate - context.viewbox.x / context.domain.x.length / 2, x2: coordinate + context.viewbox.x / context.domain.x.length / 2, y2: context.viewbox.y, y1: 0, stroke: "transparent", className: cx("bars__bar bars__bar--shadow transition-all duration-300 opacity-0 fill-[url(#bar-shadow-light)]", isShadowed && "opacity-1", `dark:fill-[url(#bar-shadow-dark)]`) }));
+            }),
             dataset.map((_a, index) => {
                 var { x1, x2, y1, y2 } = _a, bar = __rest(_a, ["x1", "x2", "y1", "y2"]);
+                const disabled = Boolean(pinned.concat(hovered).length && !pinned.includes(bar.id) && !hovered.includes(bar.id)) ||
+                    ((interactions === null || interactions === void 0 ? void 0 : interactions.x) ? xForValue(interactions.x) !== xForValue(bar.data.x) : false);
                 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" }));
+                return (React.createElement(React.Fragment, { key: index },
+                    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: cx("bars__bar transition-all duration-300", disabled && "opacity-40", onMouseEnter && "cursor-pointer") })));
             }),
-            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)}` })),
+            isBelowAnchor && (React.createElement("path", { strokeWidth: 2, vectorEffect: "non-scaling-stroke", stroke: "red", className: "stroke-[#2d2d2d]", d: `M 0 ${yForValue(anchor)} L ${context.viewbox.x} ${yForValue(anchor)}` })),
             children),
         labels &&
             dataset.map((bar, i) => {
@@ -82,7 +97,7 @@ export const VerticalBars = (_a) => {
                 return (React.createElement(overlay.div, { key: i, className: "bars__label @container-[size] absolute text-center", style: {
                         width,
                         height: Math.abs(height - (position === "above" ? 100 : 0)) + "%",
-                        left: `${scale(bar.x1, context.viewbox.x, 100)}%`,
+                        left: scale(bar.x1, context.viewbox.x, 100) + "%",
                         top: top,
                     } },
                     React.createElement("div", { className: "h-full w-full relative" },