nanoplot 0.0.16 → 0.0.18

package/dist/src/app/bar-graph/components/Rect.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from "react";
+type Props = JSX.IntrinsicElements["path"] & {
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+    radius?: number;
+};
+export declare const Rect: ({ x1, x2, y1, y2, radius, ...rest }: Props) => JSX.Element;
+export {};

package/dist/src/app/bar-graph/components/Rect.jsx

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useId } from "react";
+import { LinearGradient } from "@/components/LinearGradient/LinearGradient";
+import { PathUtils } from "@/utils/path/path";
+export const Rect = (_a) => {
+    var _b;
+    var { x1, x2, y1, y2, radius } = _a, rest = __rest(_a, ["x1", "x2", "y1", "y2", "radius"]);
+    const id = useId();
+    const isFillGradient = (_b = rest.fill) === null || _b === void 0 ? void 0 : _b.includes("gradient");
+    const path = radius
+        ? PathUtils.borderRadius({ x: x1, y: y1 }, { x: x2, y: y2 }, radius)
+        : `M ${x1} ${y1} L ${x1} ${y2} L ${x2} ${y2} L ${x2} ${y1}`;
+    return (<>
+			{isFillGradient && rest.fill && <LinearGradient id={id} gradient={rest.fill}/>}
+			<path fill={isFillGradient ? `url(#${id})` : rest.fill} stroke={rest.stroke} d={path} vectorEffect={"non-scaling-stroke"} strokeWidth={1.5}/>
+		</>);
+};

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

@@ -0,0 +1,9 @@
+import React from "react";
+type ComponentProps = {
+    horizontal?: boolean;
+    loading?: boolean;
+    size?: number;
+    radius?: number;
+};
+export declare const Bars: ({ horizontal, loading, ...props }: ComponentProps) => React.JSX.Element;
+export {};

package/dist/src/components/Bars/Bars.jsx

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { VerticalBars } from "@/components/Bars/components/VerticalBars";
+import { HorizontalBars } from "./components/HorizontalBars";
+export const Bars = (_a) => {
+    var { horizontal, loading } = _a, props = __rest(_a, ["horizontal", "loading"]);
+    return horizontal ? <HorizontalBars {...props}/> : <VerticalBars loading={loading} {...props}/>;
+};

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

@@ -0,0 +1 @@
+export declare const BarsVerticalLoading: () => import("react").JSX.Element;

package/dist/src/components/Bars/components/BarsVerticalLoading.jsx

@@ -0,0 +1,19 @@
+import { cx } from "@/utils/cx/cx";
+import { useGraph } from "@/hooks/use-graph/use-graph";
+import { useId } from "react";
+export const BarsVerticalLoading = () => {
+    const maskId = useId();
+    const { viewbox } = useGraph();
+    const CX = viewbox.x / 2;
+    const CY = viewbox.y / 2;
+    const BAR_GAP = 20;
+    const BAR_WIDTH = viewbox.x * 0.08;
+    return (<svg id="loading" role="status" aria-busy={true} viewBox={`0 0 ${viewbox.x} ${viewbox.y}`} className={cx("[grid-area:graph] h-full w-full")} preserveAspectRatio={"none"}>
+			<path vectorEffect={"non-scaling-stroke"} d={`
+					M${CX - BAR_WIDTH - BAR_GAP - BAR_WIDTH / 2} ${viewbox.y} L${CX - BAR_WIDTH - BAR_GAP - BAR_WIDTH / 2} ${(viewbox.y / 30) * 20} L${CX - BAR_WIDTH - BAR_GAP + BAR_WIDTH - BAR_WIDTH / 2} ${(viewbox.y / 30) * 20} L${CX - BAR_WIDTH - BAR_GAP + BAR_WIDTH - BAR_WIDTH / 2} ${viewbox.y}
+					M ${CX - BAR_WIDTH / 2} ${viewbox.y} L${CX - BAR_WIDTH / 2} ${(viewbox.y / 30) * 10} L${CX + BAR_WIDTH - BAR_WIDTH / 2} ${(viewbox.y / 30) * 10} L${CX + BAR_WIDTH - BAR_WIDTH / 2} ${viewbox.y}
+						M${BAR_GAP + CX + BAR_WIDTH - BAR_WIDTH / 2} ${viewbox.y} L${BAR_GAP + CX + BAR_WIDTH - BAR_WIDTH / 2} ${(viewbox.y / 30) * 16} L${BAR_GAP + CX + 2 * BAR_WIDTH - BAR_WIDTH / 2} ${(viewbox.y / 30) * 16} L${BAR_GAP + CX + 2 * BAR_WIDTH - BAR_WIDTH / 2} ${viewbox.y}`} className={"[filter:brightness(300%)] dark:[filter:brightness(100%)]"} mask={`url(#${maskId})`}>
+				<animate attributeName="fill" values="#2d2d2d; #3c3c3c; #2d2d2d; #2d2d2d; " dur="2s" repeatCount="indefinite"/>
+			</path>
+		</svg>);
+};

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

@@ -0,0 +1,8 @@
+import React from "react";
+type Props = React.SVGAttributes<SVGSVGElement> & {
+    children?: React.ReactNode;
+    size?: number;
+    radius?: number;
+};
+export declare const HorizontalBars: ({ children, size, radius, className }: Props) => React.JSX.Element | null;
+export {};

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

@@ -0,0 +1,47 @@
+import { ColorUtils } from "@/export";
+import { useGraph } from "@/hooks/use-graph/use-graph";
+import { CoordinatesUtils } from "@/utils/coordinates/coordinates";
+import { cx } from "@/utils/cx/cx";
+import { GraphUtils } from "@/utils/graph/graph";
+import React from "react";
+import { PathUtils } from "@/utils/path/path";
+export const HorizontalBars = ({ children, size = 30, radius = 0, 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.map((bar, i, bars) => {
+        var _a, _b, _c, _d;
+        return Object.assign(Object.assign({}, bar), { id: (_a = bar.id) !== null && _a !== void 0 ? _a : bar.name, stroke: (_b = bar.stroke) !== null && _b !== void 0 ? _b : ColorUtils.colorFor(i, bars.length), fill: bar.fill === true ? ((_c = bar.stroke) !== null && _c !== void 0 ? _c : ColorUtils.colorFor(i, bars.length)) : bar.fill, bar: (_d = bar.group) !== null && _d !== void 0 ? _d : bar.name, data: bar.data.map((xy) => ({
+                x: xForValue(xy.x),
+                y: yForValue(xy.y),
+            })) });
+    });
+    const barGap = context.viewbox.x / 100; // 16% gap
+    const barHeight = Math.floor(((context.viewbox.y - barGap) * size) / 1000);
+    const groups = [...new Set(bars.map((bar) => bar.group))];
+    return (<svg viewBox={`0 0 ${context.viewbox.x} ${context.viewbox.y}`} className={cx("[grid-area:graph] h-full w-full", className)} preserveAspectRatio={"none"}>
+			{groups === null || groups === void 0 ? void 0 : groups.map((group, g) => {
+            const groupBars = bars.filter((b) => b.group === group);
+            const coordinate = [];
+            return groupBars.map((bar, index) => {
+                var _a;
+                if (bar.group === group)
+                    return (_a = bar.data) === null || _a === void 0 ? void 0 : _a.map((xy, idx) => {
+                        const y1 = xy.y + barHeight * g - barHeight * (groups.length / 2);
+                        const y2 = y1 + barHeight;
+                        const x1 = index === 0 ? 0 : coordinate[idx];
+                        const x2 = index === 0 ? xy.x : coordinate[idx] + (0 + xy.x);
+                        const candleRadius = groupBars.length === index + 1
+                            ? PathUtils.borderRadius({ x: x1, y: y1 }, { x: x2, y: y2 }, radius, true)
+                            : `M ${x1} ${y1} L ${x1} ${y2} L ${x2} ${y2} L ${x2} ${y1}`;
+                        // recorde the combined x coordinate (use for next stacked bar)
+                        coordinate[idx] = index === 0 ? xy.x : coordinate[idx] + xy.x;
+                        return (<path key={idx + index + xy.y + xy.x} d={candleRadius} fill={bar.stroke} stroke={bar.stroke} vectorEffect={"non-scaling-stroke"} strokeWidth={1.5}/>);
+                    });
+            });
+        })}
+			{children}
+		</svg>);
+};

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

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+type Props = React.SVGAttributes<SVGSVGElement> & {
+    children?: ReactNode;
+    loading?: boolean;
+    size?: number;
+    radius?: number;
+};
+export declare const VerticalBars: ({ children, size, radius, className, loading }: Props) => React.JSX.Element | null;
+export {};

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

@@ -0,0 +1,51 @@
+import React from "react";
+import { CoordinatesUtils } from "@/utils/coordinates/coordinates";
+import { GraphUtils } from "@/utils/graph/graph";
+import { ColorUtils } from "@/utils/color/color";
+import { cx } from "@/utils/cx/cx";
+import { useGraph } from "@/hooks/use-graph/use-graph";
+import { BarsVerticalLoading } from "./BarsVerticalLoading";
+import { Rect } from "@/app/bar-graph/components/Rect";
+export const VerticalBars = ({ children, size = 30, radius = 0, className, loading }) => {
+    const context = useGraph();
+    if (!GraphUtils.isXYData(context.data))
+        return null;
+    const xForValue = CoordinatesUtils.xCoordinateFor(context);
+    const yForValue = CoordinatesUtils.yCoordinateFor(context);
+    const bars = context.data.map((bar, i, bars) => {
+        var _a, _b, _c, _d, _e, _f;
+        return Object.assign(Object.assign({}, bar), { id: (_a = bar.id) !== null && _a !== void 0 ? _a : bar.name, group: (_c = (_b = bar.group) !== null && _b !== void 0 ? _b : bar.id) !== null && _c !== void 0 ? _c : bar.name, stroke: (_d = bar.stroke) !== null && _d !== void 0 ? _d : ColorUtils.colorFor(i, bars.length), fill: bar.fill === true ? ((_e = bar.stroke) !== null && _e !== void 0 ? _e : ColorUtils.colorFor(i, bars.length)) : bar.fill, bar: (_f = bar.group) !== null && _f !== void 0 ? _f : bar.name, data: bar.data.map((xy) => ({
+                x: xForValue(xy.x),
+                y: yForValue(xy.y),
+            })) });
+    });
+    // stacked AND unstacked bars is the same code path.
+    // always setting a group (which is how you stack).
+    // and because group is defaulted to id or name stacks will be commonly 1/1
+    // if consumers of the library use 'group' it will be stacked for members of that group.
+    const barGap = context.viewbox.x / 100; // 16% gap
+    const barWidth = Math.floor(((context.viewbox.x - barGap) * size) / 1000);
+    const groups = [...new Set(bars.map((bar) => bar.group))];
+    if (loading) {
+        return <BarsVerticalLoading />;
+    }
+    return (<svg viewBox={`0 0 ${context.viewbox.x} ${context.viewbox.y}`} className={cx("[grid-area:graph] h-full w-full", className)} preserveAspectRatio={"none"}>
+			{groups === null || groups === void 0 ? void 0 : groups.map((group, g) => {
+            const groupBars = bars.filter((b) => b.group === group);
+            const coordinate = [];
+            return groupBars.map((bar, index) => {
+                var _a;
+                if (bar.group === group)
+                    return (_a = bar.data) === null || _a === void 0 ? void 0 : _a.map((xy, idx) => {
+                        const x1 = xy.x + barWidth * g - barWidth * (groups.length / 2);
+                        const x2 = x1 + barWidth;
+                        const y1 = index === 0 ? context.viewbox.y : coordinate[idx];
+                        const y2 = index === 0 ? xy.y : coordinate[idx] - (context.viewbox.y - xy.y);
+                        coordinate[idx] = index === 0 ? xy.y : coordinate[idx] - (context.viewbox.y - xy.y);
+                        return (<Rect key={idx} x1={x1} x2={x2} y1={y1} y2={y2} fill={bar.stroke} stroke={bar.stroke} radius={groupBars.length === index + 1 ? radius : undefined}/>);
+                    });
+            });
+        })}
+			{children}
+		</svg>);
+};

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

@@ -0,0 +1,24 @@
+import React, { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { GraphContext } from "@/hooks/use-graph/use-graph";
+type Props = {
+    data?: GraphContext["data"];
+    gap?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    interactions?: {
+        hovered?: string[];
+        pinned?: string[];
+    };
+    children: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+};
+export declare const Graph: {
+    ({ data, gap, children, interactions, style, className }: Props): React.JSX.Element;
+    Row({ children, ...rest }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    Column({ children, ...rest }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+};
+export {};

package/dist/src/components/Graph/Graph.jsx

@@ -0,0 +1,60 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useId } from "react";
+import { GraphContextProvider } from "@/hooks/use-graph/use-graph";
+import { ChildrenUtils } from "@/utils/children/children";
+import { DomainUtils } from "@/utils/domain/domain";
+import { cx } from "@/utils/cx/cx";
+import { ColorUtils } from "@/utils/color/color";
+import { GraphUtils } from "@/utils/graph/graph";
+export const Graph = ({ data = [], gap, children, interactions, style, className }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const id = useId();
+    const X_SCALE = 3000;
+    const Y_SCALE = 3000;
+    const ctx = ChildrenUtils.context(children, {
+        id,
+        layout: { rows: "[graph] auto", columns: "[graph] auto" },
+        viewbox: { x: X_SCALE, y: Y_SCALE },
+        data: GraphUtils.isXYData(data)
+            ? data.map((dp, i, dps) => {
+                var _a, _b, _c;
+                return Object.assign({ id: (_a = dp.id) !== null && _a !== void 0 ? _a : dp.name, stroke: (_b = dp.stroke) !== null && _b !== void 0 ? _b : ColorUtils.colorFor(i, dps.length), fill: dp.fill === true ? ((_c = dp.stroke) !== null && _c !== void 0 ? _c : ColorUtils.colorFor(i, dps.length)) : dp.fill }, dp);
+            })
+            : data.map((dp, i, dps) => {
+                var _a, _b, _c;
+                return Object.assign({ id: (_a = dp.id) !== null && _a !== void 0 ? _a : dp.name, stroke: (_b = dp.stroke) !== null && _b !== void 0 ? _b : ColorUtils.colorFor(i, dps.length), fill: dp.fill === true ? ((_c = dp.stroke) !== null && _c !== void 0 ? _c : ColorUtils.colorFor(i, dps.length)) : dp.fill }, dp);
+            }),
+        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 },
+        attributes: {
+            className: "@container/graph nanoplot relative grid h-full w-full isolate",
+        },
+        domain: {
+            x: DomainUtils.x.ticks({ data, viewbox: { x: X_SCALE, y: Y_SCALE } }),
+            y: DomainUtils.y.ticks({ data, viewbox: { x: X_SCALE, y: Y_SCALE } }),
+        },
+        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 : [] },
+    });
+    return (<div id={id} {...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={cx(ctx.attributes.className, className)}>
+			<GraphContextProvider value={ctx}>{children}</GraphContextProvider>
+		</div>);
+};
+Graph.Row = (_a) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return (<div {...rest} className={cx("col-span-full", rest.className)}>
+			{children}
+		</div>);
+};
+Graph.Column = (_a) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return <div {...rest}>{children}</div>;
+};

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

@@ -0,0 +1,9 @@
+import React from "react";
+interface Props extends React.SVGAttributes<SVGSVGElement> {
+    trendline?: boolean;
+    border?: boolean;
+    horizontal?: boolean;
+    vertical?: boolean;
+}
+export declare const GridLines: ({ border, horizontal, vertical, className }: Props) => React.JSX.Element;
+export {};

package/dist/src/components/GridLines/GridLines.jsx

@@ -0,0 +1,13 @@
+import { cx } from "@/utils/cx/cx";
+import React from "react";
+import { useGraph } from "@/hooks/use-graph/use-graph";
+export const GridLines = ({ border, horizontal, vertical, className }) => {
+    const context = useGraph();
+    const { x, y } = context.viewbox;
+    const { domain } = context;
+    return (<svg viewBox={`0 0 ${x} ${y}`} className={cx("[grid-area:graph] h-full w-full", className)} preserveAspectRatio={"none"}>
+			{border && (<path d={`M 0 0 l${x} 0 l0 ${y} l${-x} 0 Z`} strokeWidth={1} vectorEffect={"non-scaling-stroke"} fill={"transparent"} className={cx("stroke-[#DFDFDF] dark:stroke-[#2D2D2D] grid-lines__border")}/>)}
+			{horizontal && (<path d={domain.y.map(({ coordinate }) => `M 0 ${coordinate} L ${x} ${coordinate}`).join(" ")} strokeWidth={1} vectorEffect={"non-scaling-stroke"} className={cx("stroke-[#DFDFDF] dark:stroke-[#2D2D2D] grid-lines__horizontal")}/>)}
+			{vertical && (<path d={domain.x.map(({ coordinate }) => `M ${coordinate} 0 L ${coordinate} ${y}`).join(" ")} strokeWidth={1} vectorEffect={"non-scaling-stroke"} className={cx("stroke-[#DFDFDF] dark:stroke-[#2D2D2D] grid-lines__vertical")}/>)}
+		</svg>);
+};

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { GraphContext } from "@/hooks/use-graph/use-graph";
+import { ReactNode } from "react";
+type Props = {
+    position?: "top" | "bottom" | "left" | "right";
+    alignment?: "center" | "start" | "end";
+    children?: ReactNode;
+};
+export declare const Legend: {
+    ({ position, alignment }: Props): React.JSX.Element;
+    context(ctx: GraphContext, props: Props): {
+        layout: {
+            rows: string;
+            columns: string;
+        };
+        id: string;
+        attributes: React.HTMLAttributes<HTMLDivElement>;
+        gap: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        viewbox: {
+            x: number;
+            y: number;
+        };
+        data: import("@/hooks/use-graph/use-graph").XYDataset | import("@/hooks/use-graph/use-graph").SegmentDataset;
+        domain: {
+            x: Array<{
+                coordinate: number;
+                tick: string | number | Date;
+            }>;
+            y: Array<{
+                coordinate: number;
+                tick: string | number | Date;
+            }>;
+        };
+        interactions: {
+            hovered: string[];
+            pinned: string[];
+        };
+    };
+};
+export {};

package/dist/src/components/Legend/Legend.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { useGraph, useGraphColumn } from "@/hooks/use-graph/use-graph";
+import { Graph } from "../Graph/Graph";
+import { ColorUtils } from "@/utils/color/color";
+import { cx } from "@/utils/cx/cx";
+export const Legend = ({ position = "top", alignment = "center" }) => {
+    var _a;
+    const context = useGraph();
+    const Element = position === "top" || position === "bottom" ? Graph.Row : Graph.Column;
+    const column = useGraphColumn(context);
+    return (<Element className={cx("flex", "gap-2", (position === "left" || position === "right") && "flex-col", position === "right" && "pl-4", position === "left" && "pr-4", alignment === "start" && "justify-start", alignment === "end" && "justify-end", alignment === "center" && "justify-center")} style={position === "top" || position === "bottom" ? { gridColumn: column } : undefined}>
+			{(_a = context.data) === null || _a === void 0 ? void 0 : _a.map(({ name, stroke }, i, dps) => {
+            return (<div key={i} className={"flex items-center"}>
+						<div className={"size-4 mr-1 rounded-full"} style={{ background: stroke !== null && stroke !== void 0 ? stroke : ColorUtils.colorFor(i, dps.length) }}/>
+						<div className={"text-nowrap"}>{name}</div>
+					</div>);
+        })}
+		</Element>);
+};
+Legend.context = (ctx, props) => {
+    const rows = (() => {
+        if (props.position === "top")
+            return "max-content " + ctx.layout.rows;
+        if (props.position === "bottom")
+            return ctx.layout.rows + " max-content";
+        return ctx.layout.rows;
+    })();
+    const columns = (() => {
+        if (props.position === "left")
+            return "max-content " + ctx.layout.columns;
+        if (props.position === "right")
+            return ctx.layout.columns + " max-content";
+        return ctx.layout.columns;
+    })();
+    return Object.assign(Object.assign({}, ctx), { layout: Object.assign(Object.assign({}, ctx.layout), { rows,
+            columns }) });
+};

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

@@ -0,0 +1,6 @@
+type Props = {
+    id: string;
+    gradient: string;
+};
+export declare const LinearGradient: ({ id, gradient }: Props) => import("react").JSX.Element;
+export {};

package/dist/src/components/LinearGradient/LinearGradient.jsx

@@ -0,0 +1,52 @@
+export const LinearGradient = ({ id, gradient }) => {
+    const parseDirection = (direction) => {
+        if (direction.includes("to ")) {
+            switch (direction.replace("to ", "").trim()) {
+                case "top":
+                    return { x1: 0, y1: 1, x2: 0, y2: 0 };
+                case "right":
+                    return { x1: 0, y1: 0, x2: 1, y2: 0 };
+                case "bottom":
+                    return { x1: 0, y1: 0, x2: 0, y2: 1 };
+                case "left":
+                    return { x1: 1, y1: 0, x2: 0, y2: 0 };
+                case "top left":
+                    return { x1: 1, y1: 1, x2: 0, y2: 0 };
+                case "top right":
+                    return { x1: 0, y1: 1, x2: 1, y2: 0 };
+                case "bottom left":
+                    return { x1: 1, y1: 0, x2: 0, y2: 1 };
+                case "bottom right":
+                    return { x1: 0, y1: 0, x2: 1, y2: 1 };
+            }
+        }
+        else if (direction.match(/\d+deg/)) {
+            const angle = parseFloat(direction) * (Math.PI / 180);
+            return {
+                x1: 0.5 - 0.5 * Math.cos(angle),
+                y1: 0.5 - 0.5 * Math.sin(angle),
+                x2: 0.5 + 0.5 * Math.cos(angle),
+                y2: 0.5 + 0.5 * Math.sin(angle),
+            };
+        }
+        return { x1: 0, y1: 0, x2: 0, y2: 1 }; // Default to "to bottom"
+    };
+    const parseStops = (stops) => stops.map((stop, i, arr) => {
+        const [color, offset] = stop.trim().split(/\s+(?![^()]*\))/);
+        return {
+            color,
+            offset: offset || (i === 0 ? "0%" : i === arr.length - 1 ? "100%" : undefined),
+        };
+    });
+    const { x1, y1, x2, y2, stops } = (() => {
+        const match = gradient.match(/linear-gradient\(([^)]+)\)/);
+        if (!match)
+            throw new Error("Invalid gradient string");
+        const parts = match[1].split(/,(?![^()]*\))/).map((p) => p.trim());
+        const direction = parts[0].match(/^(to|\d+deg|\d+rad|\d+turn)/) ? parts.shift() : "to bottom";
+        return Object.assign(Object.assign({}, parseDirection(direction)), { stops: parseStops(parts) });
+    })();
+    return (<linearGradient id={id} x1={x1} y1={y1} x2={x2} y2={y2}>
+			{stops.map(({ color, offset }, i) => (<stop key={i} stopColor={color} offset={offset}/>))}
+		</linearGradient>);
+};

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

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+import { CurveUtils } from "@/utils/path/curve";
+interface Props extends React.SVGAttributes<SVGSVGElement> {
+    children?: ReactNode;
+    curve?: keyof typeof CurveUtils;
+    loading?: boolean;
+}
+export declare const Lines: {
+    ({ className, curve, children, loading }: Props): React.JSX.Element | null;
+    Tooltip: ({ tooltip, joints }: {
+        tooltip?: (points: Array<Omit<import("@/hooks/use-graph/use-graph").XYDataset[number], "data"> & {
+            data: import("@/hooks/use-graph/use-graph").XYDataset[number]["data"][number];
+        }>, x: number | string | Date) => React.ReactNode;
+        joints?: boolean;
+    }) => React.JSX.Element | null;
+};
+export {};

package/dist/src/components/Lines/Lines.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { useGraph } from "@/hooks/use-graph/use-graph";
+import { CoordinatesUtils } from "@/utils/coordinates/coordinates";
+import { GraphUtils } from "@/utils/graph/graph";
+import { ColorUtils } from "@/utils/color/color";
+import { cx } from "@/utils/cx/cx";
+import { LinesTooltip } from "@/components/Lines/components/LinesTooltip";
+import { LinesLoading } from "@/components/Lines/components/LinesLoading";
+import { CurveUtils } from "@/utils/path/curve";
+export const Lines = ({ className, curve = "linear", children, loading }) => {
+    const { interactions: { pinned, hovered }, data, viewbox, domain, } = useGraph();
+    if (!GraphUtils.isXYData(data))
+        return null;
+    const xForValue = CoordinatesUtils.xCoordinateFor({ domain, viewbox });
+    const yForValue = CoordinatesUtils.yCoordinateFor({ domain, viewbox });
+    const lines = data.map((line, i, lines) => {
+        var _a, _b, _c;
+        return Object.assign(Object.assign({}, line), { id: (_a = line.id) !== null && _a !== void 0 ? _a : line.name, stroke: (_b = line.stroke) !== null && _b !== void 0 ? _b : ColorUtils.colorFor(i, lines.length), fill: line.fill === true ? ((_c = line.stroke) !== null && _c !== void 0 ? _c : ColorUtils.colorFor(i, lines.length)) : line.fill, data: line.data.map((xy) => ({
+                x: xForValue(xy.x),
+                y: yForValue(xy.y),
+            })) });
+    });
+    if (loading) {
+        return <LinesLoading />;
+    }
+    return (<svg viewBox={`0 0 ${viewbox.x} ${viewbox.y}`} height={"100%"} width={"100%"} preserveAspectRatio={"none"} className={cx("[grid-area:graph]", className)}>
+			{lines.map(({ id, stroke, data, fill }, i) => {
+            const path = CurveUtils[curve](data);
+            const disabled = pinned.length && !pinned.includes(id) && !hovered.includes(id);
+            const filled = fill || hovered.includes(id) || (pinned.includes(id) && !disabled);
+            const identifier = id.replace(/[^a-zA-Z0-9]/g, "");
+            return (<React.Fragment key={i}>
+						{filled && !disabled && (<linearGradient id={identifier} x1="0" y1="0" x2="0" y2="1">
+								<stop offset="5%" stopColor={stroke} stopOpacity={"0.5"}/>
+								<stop offset="95%" stopColor={stroke} stopOpacity={"0"}/>
+							</linearGradient>)}
+						<path key={i} d={path} fill={"transparent"} stroke={stroke} className={cx(disabled && "stroke-black dark:stroke-white [stroke-opacity:0.1] lines__outlined")} vectorEffect={"non-scaling-stroke"} strokeWidth={1.5}/>
+						{filled && (<path d={path + `L ${viewbox.x} ${viewbox.y} L 0 ${viewbox.y} Z`} stroke={stroke} fill={(() => {
+                        if (typeof fill === "string")
+                            return fill;
+                        if (filled)
+                            return `url(#${identifier})`;
+                        return undefined;
+                    })()} strokeOpacity={0} className="lines__filled"/>)}
+					</React.Fragment>);
+        })}
+			{children}
+		</svg>);
+};
+/*
+    Chart composition
+*/
+Lines.Tooltip = LinesTooltip;

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const LinesLoading: () => React.JSX.Element;

package/dist/src/components/Lines/components/LinesLoading.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { useGraph } from "@/hooks/use-graph/use-graph";
+export const LinesLoading = () => {
+    const { viewbox } = useGraph();
+    return (<svg viewBox={`0 0 ${viewbox.x} ${viewbox.y}`} height={"100%"} width={"100%"} preserveAspectRatio={"none"} className={"[grid-area:graph] stroke-gray-600"}>
+			<path d={`M ${viewbox.x * 0.05} ${viewbox.y * 0.95} L ${viewbox.x * 0.2167} ${viewbox.y * 0.55} L ${viewbox.x * 0.35} ${viewbox.y * 0.75} L ${viewbox.x * 0.55} ${viewbox.y * 0.2833} L ${viewbox.x * 0.7167} ${viewbox.y * 0.5167} L ${viewbox.x * 0.95} ${viewbox.y * 0.05}`} strokeWidth={5} stroke={"stroke-gray-600"} strokeLinecap={"round"} fill="none" vectorEffect={"non-scaling-stroke"}>
+				<animate attributeName="stroke" values="#4b5563; #374151; #4b5563; #4b5563;" dur="2s" repeatCount="indefinite" calcMode="spline" keyTimes="0; 0.3; 0.6; 1" keySplines="0.15 0.25 0.25 0.15; 0.15 0.25 0.25 0.15; 0 0 0 0"/>
+			</path>
+		</svg>);
+};

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { XYDataset } from "@/hooks/use-graph/use-graph";
+type Props = {
+    tooltip?: (points: Array<Omit<XYDataset[number], "data"> & {
+        data: XYDataset[number]["data"][number];
+    }>, x: number | string | Date) => React.ReactNode;
+    joints?: boolean;
+};
+export declare const LinesTooltip: ({ tooltip, joints }: Props) => React.JSX.Element | null;
+export {};