layerchart 2.0.0-next.1 → 2.0.0-next.11

package/dist/actions/movable.d.ts

@@ -0,0 +1,28 @@
+import type { Action } from 'svelte/action';
+type MovableOptions = {
+    /**
+     * Number of pixels to step
+     */
+    step?: number;
+    /**
+     * Percentage of parent element's pixels to step
+     */
+    stepPercent?: number;
+    axis?: 'x' | 'y' | 'xy';
+    onMoveStart?: (event: CustomEvent<{
+        x: number;
+        y: number;
+    }>) => void;
+    onMove?: (event: CustomEvent<{
+        x: number;
+        y: number;
+        dx: number;
+        dy: number;
+    }>) => void;
+    onMoveEnd?: (event: CustomEvent<{
+        x: number;
+        y: number;
+    }>) => void;
+};
+export declare const movable: Action<HTMLElement | SVGElement, MovableOptions | undefined>;
+export {};

package/dist/actions/movable.js

@@ -0,0 +1,91 @@
+export const movable = (node, options = {}) => {
+    let lastX = 0;
+    let lastY = 0;
+    let moved = false;
+    function onMouseDown(event) {
+        lastX = event.clientX;
+        lastY = event.clientY;
+        moved = false;
+        options?.onMoveStart?.(new CustomEvent('movestart', { detail: { x: lastX, y: lastY } }));
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    }
+    node.addEventListener('mousedown', onMouseDown);
+    function onMouseMove(event) {
+        moved = true;
+        // TODO: Handle page scroll?  clientX/Y is based on viewport (apply to parent?)
+        let dx = event.clientX - lastX;
+        let dy = event.clientY - lastY;
+        const xEnabled = options?.axis?.includes('x') ?? true;
+        const yEnabled = options?.axis?.includes('y') ?? true;
+        if (options.step) {
+            if (Math.abs(dx) >= options.step) {
+                const overStep = dx % options.step;
+                dx = dx - overStep;
+                lastX = event.clientX - overStep;
+            }
+            else {
+                dx = 0;
+            }
+            if (Math.abs(dy) >= options.step) {
+                const overStep = dy % options.step;
+                dy = dy - overStep;
+                lastY = event.clientY - overStep;
+            }
+            else {
+                dy = 0;
+            }
+        }
+        else if (options.stepPercent) {
+            const parentWidth = node.parentElement?.offsetWidth ?? 0;
+            const parentHeight = node.parentElement?.offsetHeight ?? 0;
+            if (Math.abs(dx / parentWidth) >= options.stepPercent) {
+                const overStep = dx % (parentWidth * options.stepPercent);
+                dx = dx - overStep;
+                lastX = event.clientX - overStep;
+            }
+            else {
+                dx = 0;
+            }
+            if (Math.abs(dy / parentHeight) >= options.stepPercent) {
+                const overStep = dy % (parentHeight * options.stepPercent);
+                dy = dy - overStep;
+                lastY = event.clientY - overStep;
+            }
+            else {
+                dy = 0;
+            }
+        }
+        else {
+            lastX = event.clientX;
+            lastY = event.clientY;
+        }
+        if ((xEnabled && dx) || (yEnabled && dy)) {
+            options.onMove?.(new CustomEvent('move', {
+                detail: { x: lastX, y: lastX, dx: xEnabled ? dx : 0, dy: yEnabled ? dy : 0 },
+            }));
+        }
+        else {
+            // Not enough change
+        }
+    }
+    function onMouseUp(event) {
+        lastX = event.clientX;
+        lastY = event.clientY;
+        options.onMoveEnd?.(new CustomEvent('moveend', { detail: { x: lastX, y: lastY } }));
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    }
+    function onClick(event) {
+        if (moved) {
+            event.stopImmediatePropagation();
+        }
+    }
+    node.addEventListener('click', onClick);
+    return {
+        destroy() {
+            node.removeEventListener('mousedown', onMouseDown);
+            node.removeEventListener('click', onClick);
+        },
+    };
+};

package/dist/components/AnnotationLine.svelte

@@ -0,0 +1,143 @@
+<script lang="ts" module>
+  import type { ComponentProps } from 'svelte';
+  import type { SVGAttributes } from 'svelte/elements';
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { SingleDomainType } from '../utils/scales.svelte.js';
+
+  export type AnnotationLinePropsWithoutHTML = {
+    /** x value of the point */
+    x?: SingleDomainType;
+
+    /** y value of the point */
+    y?: SingleDomainType;
+
+    /** Label to display for line*/
+    label?: string;
+
+    /** Placement of the label */
+    labelPlacement?: Placement;
+
+    /** X offset of the label */
+    labelXOffset?: number;
+
+    /** Y offset of the label */
+    labelYOffset?: number;
+
+    /** Classes for inner elements */
+    props?: {
+      label?: Partial<ComponentProps<typeof Text>>;
+      line?: Partial<ComponentProps<typeof Line>>;
+    };
+  } & CommonStyleProps;
+
+  export type AnnotationLineProps = AnnotationLinePropsWithoutHTML &
+    Without<SVGAttributes<Element>, AnnotationLinePropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { getChartContext } from './Chart.svelte';
+  import Line from './Line.svelte';
+  import Text from './Text.svelte';
+  import type { Placement } from './types.js';
+
+  import { cls } from '@layerstack/tailwind';
+
+  const {
+    x,
+    y,
+    label,
+    labelPlacement = 'top-right',
+    labelXOffset = 0,
+    labelYOffset = 0,
+    props,
+  }: AnnotationLineProps = $props();
+
+  const ctx = getChartContext();
+
+  const isVertical = $derived(x != null);
+
+  const line = $derived({
+    x1: x ? ctx.xScale(x) : ctx.xRange[0],
+    y1: y && !x ? ctx.yScale(y) : ctx.yRange[0],
+    x2: x ? ctx.xScale(x) : ctx.xRange[1],
+    y2: y ? ctx.yScale(y) : ctx.yRange[1],
+  });
+
+  const labelProps = $derived<ComponentProps<typeof Text>>(
+    isVertical
+      ? {
+          x: line.x1 + (labelPlacement.includes('left') ? -labelXOffset : labelXOffset),
+          y:
+            (labelPlacement.includes('top')
+              ? line.y2
+              : labelPlacement.includes('bottom')
+                ? line.y1
+                : (line.y1 - line.y2) / 2) +
+            (['top', 'bottom-left', 'bottom-right'].includes(labelPlacement)
+              ? -labelYOffset
+              : labelYOffset),
+          dy: -2, // adjust for smaller font size
+          textAnchor: labelPlacement.includes('left')
+            ? 'end'
+            : labelPlacement.includes('right')
+              ? 'start'
+              : 'middle',
+          verticalAnchor:
+            labelPlacement === 'top'
+              ? 'end' // place above line
+              : labelPlacement === 'bottom'
+                ? 'start' // place below line
+                : labelPlacement.includes('top')
+                  ? 'start'
+                  : labelPlacement.includes('bottom')
+                    ? 'end'
+                    : 'middle',
+        }
+      : {
+          x:
+            (labelPlacement.includes('left')
+              ? line.x1
+              : labelPlacement.includes('right')
+                ? line.x2
+                : (line.x2 - line.x1) / 2) +
+            (['left', 'top-right', 'bottom-right'].includes(labelPlacement)
+              ? -labelXOffset
+              : labelXOffset),
+          y: line.y1 + (labelPlacement.includes('top') ? -labelYOffset : labelYOffset),
+          dy: -2, // adjust for smaller font size
+          textAnchor:
+            labelPlacement === 'left'
+              ? 'end' // place beside line
+              : labelPlacement === 'right'
+                ? 'start' // place beside line
+                : labelPlacement.includes('left')
+                  ? 'start'
+                  : labelPlacement.includes('right')
+                    ? 'end'
+                    : 'middle',
+          verticalAnchor: labelPlacement.includes('top')
+            ? 'end'
+            : labelPlacement.includes('bottom')
+              ? 'start'
+              : 'middle',
+        }
+  );
+</script>
+
+<Line
+  x1={line.x1}
+  y1={line.y1}
+  x2={line.x2}
+  y2={line.y2}
+  {...props?.line}
+  class={cls('stroke-surface-content', props?.line?.class)}
+/>
+
+{#if label}
+  <Text
+    value={label}
+    {...labelProps}
+    {...props?.label}
+    class={cls('text-xs pointer-events-none', props?.label?.class)}
+  />
+{/if}

package/dist/components/AnnotationLine.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentProps } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { SingleDomainType } from '../utils/scales.svelte.js';
+export type AnnotationLinePropsWithoutHTML = {
+    /** x value of the point */
+    x?: SingleDomainType;
+    /** y value of the point */
+    y?: SingleDomainType;
+    /** Label to display for line*/
+    label?: string;
+    /** Placement of the label */
+    labelPlacement?: Placement;
+    /** X offset of the label */
+    labelXOffset?: number;
+    /** Y offset of the label */
+    labelYOffset?: number;
+    /** Classes for inner elements */
+    props?: {
+        label?: Partial<ComponentProps<typeof Text>>;
+        line?: Partial<ComponentProps<typeof Line>>;
+    };
+} & CommonStyleProps;
+export type AnnotationLineProps = AnnotationLinePropsWithoutHTML & Without<SVGAttributes<Element>, AnnotationLinePropsWithoutHTML>;
+import Line from './Line.svelte';
+import Text from './Text.svelte';
+import type { Placement } from './types.js';
+declare const AnnotationLine: import("svelte").Component<AnnotationLineProps, {}, "">;
+type AnnotationLine = ReturnType<typeof AnnotationLine>;
+export default AnnotationLine;

package/dist/components/AnnotationPoint.svelte

@@ -0,0 +1,119 @@
+<script lang="ts" module>
+  import type { ComponentProps } from 'svelte';
+  import type { SVGAttributes } from 'svelte/elements';
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import { isScaleBand, type SingleDomainType } from '../utils/scales.svelte.js';
+
+  export type AnnotationPointPropsWithoutHTML = {
+    /** x value of the point */
+    x?: SingleDomainType;
+
+    /** y value of the point */
+    y?: SingleDomainType;
+
+    /** Radius of the circle */
+    r?: number;
+
+    /** Label to display on circle*/
+    label?: string;
+
+    /** Placement of the label */
+    labelPlacement?: Placement;
+
+    /** X offset of the label */
+    labelXOffset?: number;
+
+    /** Y offset of the label */
+    labelYOffset?: number;
+
+    /** Details (description, etc) useful to display in tooltip */
+    details?: any;
+
+    /** Classes for inner elements */
+    props?: {
+      label?: Partial<ComponentProps<typeof Text>>;
+      circle?: Partial<ComponentProps<typeof Circle>>;
+    };
+  } & CommonStyleProps;
+
+  export type AnnotationPointProps = AnnotationPointPropsWithoutHTML &
+    Without<SVGAttributes<Element>, AnnotationPointPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { getChartContext } from './Chart.svelte';
+  import Circle from './Circle.svelte';
+  import Text from './Text.svelte';
+  import type { Placement } from './types.js';
+
+  import { cls } from '@layerstack/tailwind';
+
+  const {
+    x,
+    y,
+    r = 4,
+    label,
+    labelPlacement = 'center',
+    labelXOffset = 0,
+    labelYOffset = 0,
+    details,
+    props,
+  }: AnnotationPointProps = $props();
+
+  const ctx = getChartContext();
+
+  const point = $derived({
+    x: x ? ctx.xScale(x) + (isScaleBand(ctx.xScale) ? ctx.xScale.bandwidth() / 2 : 0) : 0,
+    y: y ? ctx.yScale(y) + (isScaleBand(ctx.yScale) ? ctx.yScale.bandwidth() / 2 : 0) : ctx.height,
+  });
+
+  const labelProps = $derived<ComponentProps<typeof Text>>({
+    x:
+      point.x +
+      ((['top', 'center', 'bottom'].includes(labelPlacement) ? 0 : r) + labelXOffset) *
+        (labelPlacement.includes('left') ? -1 : 1),
+    y:
+      point.y +
+      ((['left', 'center', 'right'].includes(labelPlacement) ? 0 : r) + labelYOffset) *
+        (labelPlacement.includes('top') ? -1 : 1),
+    dy: -2, // adjust for smaler font size
+    textAnchor: labelPlacement.includes('left')
+      ? 'end'
+      : labelPlacement.includes('right')
+        ? 'start'
+        : 'middle',
+    verticalAnchor: labelPlacement.includes('top')
+      ? 'end'
+      : labelPlacement.includes('bottom')
+        ? 'start'
+        : 'middle',
+  });
+</script>
+
+<Circle
+  cx={point.x}
+  cy={point.y}
+  {r}
+  onpointermove={(e) => {
+    if (details) {
+      e.stopPropagation();
+      ctx.tooltip.show(e, { annotation: { label, details } });
+    }
+  }}
+  onpointerleave={() => {
+    if (details) {
+      ctx.tooltip.hide();
+    }
+  }}
+  {...props?.circle}
+  class={cls('stroke-surface-100', props?.circle?.class)}
+/>
+
+{#if label}
+  <Text
+    value={label}
+    {...labelProps}
+    {...props?.label}
+    class={cls('text-xs pointer-events-none', props?.label?.class)}
+  />
+{/if}

package/dist/components/AnnotationPoint.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentProps } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { CommonStyleProps, Without } from '../utils/types.js';
+import { type SingleDomainType } from '../utils/scales.svelte.js';
+export type AnnotationPointPropsWithoutHTML = {
+    /** x value of the point */
+    x?: SingleDomainType;
+    /** y value of the point */
+    y?: SingleDomainType;
+    /** Radius of the circle */
+    r?: number;
+    /** Label to display on circle*/
+    label?: string;
+    /** Placement of the label */
+    labelPlacement?: Placement;
+    /** X offset of the label */
+    labelXOffset?: number;
+    /** Y offset of the label */
+    labelYOffset?: number;
+    /** Details (description, etc) useful to display in tooltip */
+    details?: any;
+    /** Classes for inner elements */
+    props?: {
+        label?: Partial<ComponentProps<typeof Text>>;
+        circle?: Partial<ComponentProps<typeof Circle>>;
+    };
+} & CommonStyleProps;
+export type AnnotationPointProps = AnnotationPointPropsWithoutHTML & Without<SVGAttributes<Element>, AnnotationPointPropsWithoutHTML>;
+import Circle from './Circle.svelte';
+import Text from './Text.svelte';
+import type { Placement } from './types.js';
+declare const AnnotationPoint: import("svelte").Component<AnnotationPointProps, {}, "">;
+type AnnotationPoint = ReturnType<typeof AnnotationPoint>;
+export default AnnotationPoint;

package/dist/components/AnnotationRange.svelte

@@ -0,0 +1,147 @@
+<script lang="ts" module>
+  import type { ComponentProps } from 'svelte';
+  import type { SVGAttributes } from 'svelte/elements';
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import { isScaleBand, type SingleDomainType } from '../utils/scales.svelte.js';
+
+  export type AnnotationRangePropsWithoutHTML = {
+    /** x values of the range */
+    x?: [SingleDomainType, SingleDomainType] | SingleDomainType[];
+
+    /** y values of the range */
+    y?: [SingleDomainType, SingleDomainType] | SingleDomainType[];
+
+    /** Label to display for line*/
+    label?: string;
+
+    /** Placement of the label */
+    labelPlacement?: Placement;
+
+    /** X offset of the label */
+    labelXOffset?: number;
+
+    /** Y offset of the label */
+    labelYOffset?: number;
+
+    /** Add Rect with fill */
+    fill?: string;
+
+    /** Add Rect with class*/
+    class?: string;
+
+    /** Add Rect with gradient */
+    gradient?: ComponentProps<typeof LinearGradient>;
+
+    /** Add Rect with pattern */
+    pattern?: ComponentProps<typeof Pattern>;
+
+    /** Classes for inner elements */
+    props?: {
+      label?: Partial<ComponentProps<typeof Text>>;
+      rect?: Partial<ComponentProps<typeof Rect>>;
+    };
+  } & CommonStyleProps;
+
+  export type AnnotationRangeProps = AnnotationRangePropsWithoutHTML &
+    Without<SVGAttributes<Element>, AnnotationRangePropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { getChartContext } from './Chart.svelte';
+  import LinearGradient from './LinearGradient.svelte';
+  import Pattern from './Pattern.svelte';
+  import Rect from './Rect.svelte';
+  import Text from './Text.svelte';
+  import type { Placement } from './types.js';
+
+  import { cls } from '@layerstack/tailwind';
+
+  const {
+    x,
+    y,
+    fill,
+    class: className,
+    gradient,
+    pattern,
+    label,
+    labelPlacement = 'center',
+    labelXOffset = 0,
+    labelYOffset = 0,
+    props,
+  }: AnnotationRangeProps = $props();
+
+  const ctx = getChartContext();
+
+  const rect = $derived<ComponentProps<typeof Rect>>({
+    x: x
+      ? ctx.xScale(x[0] ?? ctx.xDomain[0]) -
+        (isScaleBand(ctx.xScale) ? (ctx.xScale.padding() * ctx.xScale.step()) / 2 : 0)
+      : ctx.xRange[0],
+    y: y ? ctx.yScale(y[1] ?? ctx.yDomain[1]) : ctx.yRange[1],
+    width: x
+      ? ctx.xScale(x[1] ?? ctx.xDomain[1]) -
+        ctx.xScale(x[0] ?? ctx.xDomain[0]) +
+        (isScaleBand(ctx.xScale) ? ctx.xScale.step() : 0)
+      : ctx.width,
+    height: y
+      ? ctx.yScale(y[0] ?? ctx.yDomain[0]) - ctx.yScale(y[1] ?? ctx.yDomain[1])
+      : ctx.height,
+  });
+
+  const labelProps = $derived<ComponentProps<typeof Text>>({
+    x:
+      ((labelPlacement.includes('left')
+        ? rect.x
+        : labelPlacement.includes('right')
+          ? (rect.x ?? 0) + rect.width
+          : (rect.x ?? 0) + rect.width / 2) ?? 0) +
+      (labelPlacement.includes('right') ? -labelXOffset : labelXOffset),
+    y:
+      ((labelPlacement.includes('top')
+        ? rect.y
+        : labelPlacement.includes('bottom')
+          ? (rect.y ?? 0) + rect.height
+          : (rect.y ?? 0) + rect.height / 2) ?? 0) +
+      (labelPlacement.includes('bottom') ? -labelYOffset : labelYOffset),
+    dy: -2, // adjust for smaler font size
+    textAnchor: labelPlacement.includes('left')
+      ? 'start'
+      : labelPlacement.includes('right')
+        ? 'end'
+        : 'middle',
+    verticalAnchor: labelPlacement.includes('top')
+      ? 'start'
+      : labelPlacement.includes('bottom')
+        ? 'end'
+        : 'middle',
+  });
+</script>
+
+{#if fill || className}
+  <Rect {...rect} {...props?.rect} {fill} class={cls(props?.rect?.class, className)} />
+{/if}
+
+{#if gradient}
+  <LinearGradient {...gradient}>
+    {#snippet children({ gradient })}
+      <Rect {...rect} {...props?.rect} fill={gradient} />
+    {/snippet}
+  </LinearGradient>
+{/if}
+
+{#if pattern}
+  <Pattern {...pattern}>
+    {#snippet children({ pattern })}
+      <Rect {...rect} {...props?.rect} fill={pattern} />
+    {/snippet}
+  </Pattern>
+{/if}
+
+{#if label}
+  <Text
+    value={label}
+    {...labelProps}
+    {...props?.label}
+    class={cls('text-xs pointer-events-none', props?.label?.class)}
+  />
+{/if}

package/dist/components/AnnotationRange.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentProps } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { CommonStyleProps, Without } from '../utils/types.js';
+import { type SingleDomainType } from '../utils/scales.svelte.js';
+export type AnnotationRangePropsWithoutHTML = {
+    /** x values of the range */
+    x?: [SingleDomainType, SingleDomainType] | SingleDomainType[];
+    /** y values of the range */
+    y?: [SingleDomainType, SingleDomainType] | SingleDomainType[];
+    /** Label to display for line*/
+    label?: string;
+    /** Placement of the label */
+    labelPlacement?: Placement;
+    /** X offset of the label */
+    labelXOffset?: number;
+    /** Y offset of the label */
+    labelYOffset?: number;
+    /** Add Rect with fill */
+    fill?: string;
+    /** Add Rect with class*/
+    class?: string;
+    /** Add Rect with gradient */
+    gradient?: ComponentProps<typeof LinearGradient>;
+    /** Add Rect with pattern */
+    pattern?: ComponentProps<typeof Pattern>;
+    /** Classes for inner elements */
+    props?: {
+        label?: Partial<ComponentProps<typeof Text>>;
+        rect?: Partial<ComponentProps<typeof Rect>>;
+    };
+} & CommonStyleProps;
+export type AnnotationRangeProps = AnnotationRangePropsWithoutHTML & Without<SVGAttributes<Element>, AnnotationRangePropsWithoutHTML>;
+import LinearGradient from './LinearGradient.svelte';
+import Pattern from './Pattern.svelte';
+import Rect from './Rect.svelte';
+import Text from './Text.svelte';
+import type { Placement } from './types.js';
+declare const AnnotationRange: import("svelte").Component<AnnotationRangeProps, {}, "">;
+type AnnotationRange = ReturnType<typeof AnnotationRange>;
+export default AnnotationRange;