layerchart 2.0.0-next.60 → 2.0.0-next.62

package/dist/components/Link/Link.shared.svelte.d.ts

@@ -0,0 +1,43 @@
+import { curveBumpX, curveBumpY, type CurveFactory } from 'd3-shape';
+import type { MarkerOptions } from '../MarkerWrapper.svelte';
+import type { Without } from '../../utils/types.js';
+import type { MotionNoneOption, MotionTweenOption } from '../../utils/motion.svelte.js';
+import type { LinkSweep, LinkType } from '../../utils/linkUtils.js';
+import type { PathProps, PathPropsWithoutHTML } from '../Path/Path.shared.svelte.js';
+import type { Accessor } from '../../utils/common.js';
+export type LinkPropsWithoutHTML = {
+    x1?: Accessor;
+    y1?: Accessor;
+    x2?: Accessor;
+    y2?: Accessor;
+    data?: any;
+    /** @default false */
+    sankey?: boolean;
+    source?: (d: any) => any;
+    target?: (d: any) => any;
+    x?: (d: any) => any;
+    y?: (d: any) => any;
+    /** @default 'd3' */
+    type?: LinkType;
+    /** @default 20 */
+    radius?: number;
+    /** @default 22.5 */
+    bend?: number;
+    curve?: CurveFactory;
+    sweep?: LinkSweep;
+    orientation?: 'vertical' | 'horizontal';
+    radial?: boolean;
+    marker?: MarkerOptions;
+    markerMid?: MarkerOptions;
+    markerStart?: MarkerOptions;
+    markerEnd?: MarkerOptions;
+    motion?: MotionTweenOption | MotionNoneOption;
+    class?: string | ((d: any) => string);
+} & Omit<PathPropsWithoutHTML, 'class'>;
+export type LinkProps = LinkPropsWithoutHTML & Without<PathProps, LinkPropsWithoutHTML>;
+export declare const LINK_FALLBACK_COORDS: {
+    x: number;
+    y: number;
+};
+export declare function isAccessorAccessor(value: Accessor | undefined): boolean;
+export { curveBumpX, curveBumpY };

package/dist/components/Link/Link.shared.svelte.js

@@ -0,0 +1,6 @@
+import { curveBumpX, curveBumpY } from 'd3-shape';
+export const LINK_FALLBACK_COORDS = { x: 0, y: 0 };
+export function isAccessorAccessor(value) {
+    return typeof value === 'string' || typeof value === 'function';
+}
+export { curveBumpX, curveBumpY };

package/dist/components/Link/Link.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  export type { LinkProps, LinkPropsWithoutHTML } from './Link.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import LinkSvg from './Link.svg.svelte';
+  import LinkCanvas from './Link.canvas.svelte';
+  import type { LinkProps } from './Link.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let { pathRef = $bindable(), ...rest }: LinkProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <LinkSvg bind:pathRef {...rest} />
+{:else if layerCtx === 'canvas'}
+  <LinkCanvas {...rest} />
+{/if}

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

@@ -0,0 +1,5 @@
+export type { LinkProps, LinkPropsWithoutHTML } from './Link.shared.svelte.js';
+import type { LinkProps } from './Link.shared.svelte.js';
+declare const Link: import("svelte").Component<LinkProps, {}, "pathRef">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/components/Link/Link.svg.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { LinkProps, LinkPropsWithoutHTML } from './Link.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import LinkBase from './Link.base.svelte';
+  import Path from '../Path/Path.svg.svelte';
+  import type { LinkProps } from './Link.shared.svelte.js';
+
+  let { pathRef = $bindable(), ...rest }: LinkProps = $props();
+</script>
+
+<LinkBase {Path} bind:pathRef {...rest} />

package/dist/components/Link/Link.svg.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { LinkProps, LinkPropsWithoutHTML } from './Link.shared.svelte.js';
+import type { LinkProps } from './Link.shared.svelte.js';
+declare const Link: import("svelte").Component<LinkProps, {}, "pathRef">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/components/{Month.svelte → Month/Month.base.svelte}

@@ -1,99 +1,31 @@
 <script lang="ts" module>
-  export type MonthCell = {
-    x: number;
-    y: number;
-    color: any;
-    data: any;
-    date: Date;
-  };
-
-  export type MonthPropsWithoutHTML = {
-    /**
-     * The start date of the calendar.
-     */
-    start: Date;
-
-    /**
-     * The end date of the calendar.
-     */
-    end: Date;
-
-    /**
-     * Size of the cell in the calendar.
-     *
-     * @default 25
-     */
-    cellSize?: number;
-
-    /**
-     * Number of months to display per row. If undefined, automatically calculated based on available width.
-     */
-    monthsPerRow?: number;
-
-    /**
-     * Padding multiplier between months (relative to cellSize).
-     *
-     * @default 1.2
-     */
-    monthPadding?: number;
-
-    /**
-     * Vertical spacing multiplier between month rows (in number of cell heights).
-     *
-     * @default 8
-     */
-    rowSpacing?: number;
+  import type { Component } from 'svelte';
+  import type { MonthCell, MonthPropsWithoutHTML } from './Month.shared.svelte.js';
 
-    /**
-     * Whether to show the day number in each cell.
-     *
-     * @default true
-     */
-    showDayNumber?: boolean;
-
-    /**
-     * Props to pass to the `<text>` element for month labels.
-     */
-    monthLabel?: boolean | Partial<ComponentProps<typeof Text>>;
-
-    /**
-     * Props to pass to the `<text>` element for day numbers.
-     */
-    dayNumberProps?: Partial<ComponentProps<typeof Text>>;
-
-    /**
-     * Setup pointer events to show tooltip for related data
-     */
-    tooltip?: boolean;
-
-    children?: Snippet<[{ cells: MonthCell[]; cellSize: number }]>;
-  } & Omit<
-    RectPropsWithoutHTML,
-    'children' | 'x' | 'y' | 'width' | 'height' | 'fill' | 'onpointermove' | 'onpointerleave'
-  >;
+  export type MonthBaseLayerComponents = {
+    Rect: Component<any>;
+    Group: Component<any>;
+    Text: Component<any>;
+  };
 
-  export type MonthProps = MonthPropsWithoutHTML &
-    Without<SVGAttributes<SVGRectElement>, MonthPropsWithoutHTML>;
+  export type MonthBaseProps = MonthPropsWithoutHTML & MonthBaseLayerComponents;
 </script>
 
 <script lang="ts">
-  import { type ComponentProps, type Snippet } from 'svelte';
-  import { timeDays, timeMonths, timeWeek } from 'd3-time';
+  import { timeDays, timeWeek } from 'd3-time';
   import { index } from 'd3-array';
   import { format } from '@layerstack/utils';
 
-  import Rect, { type RectPropsWithoutHTML } from './Rect.svelte';
-  import Group from './Group.svelte';
-  import Text from './Text.svelte';
-  import { chartDataArray } from '../utils/common.js';
-  import { getChartContext } from '../contexts/chart.js';
-  import type { SVGAttributes } from 'svelte/elements';
-  import type { Without } from '../utils/types.js';
-  import { extractLayerProps } from '../utils/attributes.js';
+  import { chartDataArray } from '../../utils/common.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { extractLayerProps } from '../../utils/attributes.js';
 
   const DAYS_PER_WEEK = 7;
 
   let {
+    Rect,
+    Group,
+    Text,
     start,
     end,
     cellSize = 25,
@@ -106,20 +38,13 @@
     tooltip,
     children,
     ...restProps
-  }: MonthPropsWithoutHTML = $props();
+  }: MonthBaseProps = $props();
 
   const ctx = getChartContext();
 
   const rangeDays = $derived(timeDays(start, end));
-
-  // Space needed for month labels at the top (only if labels are shown)
   const monthLabelHeight = $derived(monthLabel ? cellSize : 0);
 
-  // Calculate monthsPerRow based on the actual space taken by each month
-  // Each month (except the last in a row) takes: (monthPadding * cellSize * DAYS_PER_WEEK)
-  // The calculation accounts for n-1 padded months plus one unpadded month
-  // Formula: (n-1) * monthPadding * width + width = totalWidth
-  // Solving for n: n = (totalWidth + (monthPadding - 1) * width) / (monthPadding * width)
   const monthsPerRow = $derived(
     monthsPerRowProp ??
       Math.floor(
@@ -128,15 +53,12 @@
       )
   );
 
-  // Generate data indexed by date (using date object as key)
   const dataByDate = $derived(
     ctx.data && ctx.config.x ? index(chartDataArray(ctx.data), (d) => ctx.x(d)) : new Map()
   );
 
-  // Generate cells for the date range
   const allCells = $derived.by(() => {
     const cells: MonthCell[] = [];
-    // Create a map of month index to track which months we've seen
     const monthIndexMap = new Map<string, number>();
     let currentMonthIndex = 0;
 
@@ -144,7 +66,6 @@
       const firstDayOfMonth = new Date(day.getFullYear(), day.getMonth(), 1);
       const monthKey = `${day.getFullYear()}-${day.getMonth()}`;
 
-      // Assign a sequential index to each unique month in the range
       if (!monthIndexMap.has(monthKey)) {
         monthIndexMap.set(monthKey, currentMonthIndex);
         currentMonthIndex++;
@@ -171,21 +92,18 @@
     return { cells, monthIndexMap };
   });
 
-  // Generate month labels based on the actual months encountered in the cells
   const monthLabels = $derived.by(() => {
     const labels: Array<{ x: number; y: number; text: string }> = [];
     const monthIndexMap = allCells.monthIndexMap;
 
-    // Convert the map to an array of [monthKey, index] pairs and sort by index
     const monthEntries = Array.from(monthIndexMap.entries()).sort((a, b) => a[1] - b[1]);
 
-    monthEntries.forEach(([monthKey, index]) => {
-      // Parse the monthKey to get the year and month
+    monthEntries.forEach(([monthKey, idx]) => {
       const [year, month] = monthKey.split('-').map(Number);
       const firstDayOfMonth = new Date(year, month, 1);
 
-      const monthCol = index % monthsPerRow;
-      const monthRow = Math.floor(index / monthsPerRow);
+      const monthCol = idx % monthsPerRow;
+      const monthRow = Math.floor(idx / monthsPerRow);
 
       const monthPaddingOffset = monthPadding * cellSize * DAYS_PER_WEEK * monthCol;
 
@@ -201,7 +119,6 @@
 </script>
 
 <Group>
-  <!-- Cells -->
   {#if children}
     {@render children({ cells: allCells.cells, cellSize })}
   {:else}
@@ -212,8 +129,8 @@
         width={cellSize}
         height={cellSize}
         fill={cell.color}
-        onpointermove={(e) => tooltip && ctx.tooltip?.show(e, cell.data)}
-        onpointerleave={(e) => tooltip && ctx.tooltip?.hide()}
+        onpointermove={(e: PointerEvent) => tooltip && ctx.tooltip?.show(e, cell.data)}
+        onpointerleave={() => tooltip && ctx.tooltip?.hide()}
         {...extractLayerProps(restProps, 'lc-month-cell')}
       />
 
@@ -232,7 +149,6 @@
     {/each}
   {/if}
 
-  <!-- Month labels -->
   {#if monthLabel}
     {#each monthLabels as label}
       <Text

package/dist/components/Month/Month.base.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Component } from 'svelte';
+import type { MonthPropsWithoutHTML } from './Month.shared.svelte.js';
+export type MonthBaseLayerComponents = {
+    Rect: Component<any>;
+    Group: Component<any>;
+    Text: Component<any>;
+};
+export type MonthBaseProps = MonthPropsWithoutHTML & MonthBaseLayerComponents;
+declare const Month: Component<MonthBaseProps, {}, "">;
+type Month = ReturnType<typeof Month>;
+export default Month;

package/dist/components/Month/Month.canvas.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+  export type {
+    MonthProps,
+    MonthPropsWithoutHTML,
+    MonthCell,
+  } from './Month.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import MonthBase from './Month.base.svelte';
+  import Rect from '../Rect/Rect.canvas.svelte';
+  import Group from '../Group/Group.canvas.svelte';
+  import Text from '../Text/Text.canvas.svelte';
+  import type { MonthPropsWithoutHTML } from './Month.shared.svelte.js';
+
+  let props: MonthPropsWithoutHTML = $props();
+</script>
+
+<MonthBase {Rect} {Group} {Text} {...props} />

package/dist/components/Month/Month.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { MonthProps, MonthPropsWithoutHTML, MonthCell, } from './Month.shared.svelte.js';
+import type { MonthPropsWithoutHTML } from './Month.shared.svelte.js';
+declare const Month: import("svelte").Component<MonthPropsWithoutHTML, {}, "">;
+type Month = ReturnType<typeof Month>;
+export default Month;

package/dist/components/Month/Month.html.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+  export type {
+    MonthProps,
+    MonthPropsWithoutHTML,
+    MonthCell,
+  } from './Month.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import MonthBase from './Month.base.svelte';
+  import Rect from '../Rect/Rect.html.svelte';
+  import Group from '../Group/Group.html.svelte';
+  import Text from '../Text/Text.html.svelte';
+  import type { MonthPropsWithoutHTML } from './Month.shared.svelte.js';
+
+  let props: MonthPropsWithoutHTML = $props();
+</script>
+
+<MonthBase {Rect} {Group} {Text} {...props} />

package/dist/components/Month/Month.html.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { MonthProps, MonthPropsWithoutHTML, MonthCell, } from './Month.shared.svelte.js';
+import type { MonthPropsWithoutHTML } from './Month.shared.svelte.js';
+declare const Month: import("svelte").Component<MonthPropsWithoutHTML, {}, "">;
+type Month = ReturnType<typeof Month>;
+export default Month;

package/dist/components/Month/Month.shared.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { ComponentProps, Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+import type Text from '../Text/Text.svelte';
+import type { RectPropsWithoutHTML } from '../Rect/Rect.shared.svelte.js';
+export type MonthCell = {
+    x: number;
+    y: number;
+    color: any;
+    data: any;
+    date: Date;
+};
+export type MonthPropsWithoutHTML = {
+    start: Date;
+    end: Date;
+    /** @default 25 */
+    cellSize?: number;
+    monthsPerRow?: number;
+    /** @default 1.2 */
+    monthPadding?: number;
+    /** @default 8 */
+    rowSpacing?: number;
+    /** @default true */
+    showDayNumber?: boolean;
+    monthLabel?: boolean | Partial<ComponentProps<typeof Text>>;
+    dayNumberProps?: Partial<ComponentProps<typeof Text>>;
+    tooltip?: boolean;
+    children?: Snippet<[{
+        cells: MonthCell[];
+        cellSize: number;
+    }]>;
+} & Omit<RectPropsWithoutHTML, 'children' | 'x' | 'y' | 'width' | 'height' | 'fill' | 'onpointermove' | 'onpointerleave'>;
+export type MonthProps = MonthPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, MonthPropsWithoutHTML>;

package/dist/components/Month/Month.shared.svelte.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Month/Month.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  export type {
+    MonthProps,
+    MonthPropsWithoutHTML,
+    MonthCell,
+  } from './Month.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import MonthSvg from './Month.svg.svelte';
+  import MonthCanvas from './Month.canvas.svelte';
+  import MonthHtml from './Month.html.svelte';
+  import type { MonthPropsWithoutHTML } from './Month.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: MonthPropsWithoutHTML = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <MonthSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <MonthCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <MonthHtml {...props} />
+{/if}

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

@@ -0,0 +1,5 @@
+export type { MonthProps, MonthPropsWithoutHTML, MonthCell, } from './Month.shared.svelte.js';
+import type { MonthPropsWithoutHTML } from './Month.shared.svelte.js';
+declare const Month: import("svelte").Component<MonthPropsWithoutHTML, {}, "">;
+type Month = ReturnType<typeof Month>;
+export default Month;

package/dist/components/Month/Month.svg.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+  export type {
+    MonthProps,
+    MonthPropsWithoutHTML,
+    MonthCell,
+  } from './Month.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import MonthBase from './Month.base.svelte';
+  import Rect from '../Rect/Rect.svg.svelte';
+  import Group from '../Group/Group.svg.svelte';
+  import Text from '../Text/Text.svg.svelte';
+  import type { MonthPropsWithoutHTML } from './Month.shared.svelte.js';
+
+  let props: MonthPropsWithoutHTML = $props();
+</script>
+
+<MonthBase {Rect} {Group} {Text} {...props} />

package/dist/components/Month/Month.svg.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { MonthProps, MonthPropsWithoutHTML, MonthCell, } from './Month.shared.svelte.js';
+import type { MonthPropsWithoutHTML } from './Month.shared.svelte.js';
+declare const Month: import("svelte").Component<MonthPropsWithoutHTML, {}, "">;
+type Month = ReturnType<typeof Month>;
+export default Month;

package/dist/components/MonthPath.svelte

@@ -38,7 +38,7 @@
   import { timeWeek } from 'd3-time';
   import { cls } from '@layerstack/tailwind';
   import { endOfInterval } from '@layerstack/utils';
-  import Path, { type PathPropsWithoutHTML } from './Path.svelte';
+  import Path, { type PathPropsWithoutHTML } from './Path/Path.svelte';
 
   let {
     date,

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

@@ -23,7 +23,7 @@ export type MonthPathPropsWithoutHTML = {
     pathRef?: SVGPathElement;
 };
 export type MonthPathProps = MonthPathPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML & PathPropsWithoutHTML>;
-import { type PathPropsWithoutHTML } from './Path.svelte';
+import { type PathPropsWithoutHTML } from './Path/Path.svelte';
 declare const MonthPath: import("svelte").Component<MonthPathProps, {}, "pathRef">;
 type MonthPath = ReturnType<typeof MonthPath>;
 export default MonthPath;

package/dist/components/Path/Path.canvas.svelte

@@ -0,0 +1,91 @@
+<script lang="ts" module>
+  export type { PathProps, PathPropsWithoutHTML } from './Path.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { merge } from '@layerstack/utils';
+  import { renderPathData, type ComputedStylesOptions } from '../../utils/canvas.js';
+  import { createKey } from '../../utils/key.svelte.js';
+  import { PathState, type PathProps } from './Path.shared.svelte.js';
+
+  let { pathData, ...rest }: PathProps = $props();
+
+  const c = new PathState(
+    () => pathData,
+    () => rest as PathProps
+  );
+
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    renderPathData(
+      ctx,
+      c.tweenedPathData ?? '',
+      styleOverrides
+        ? merge({ styles: { strokeWidth: rest.strokeWidth } }, styleOverrides)
+        : {
+            styles: {
+              fill: rest.fill,
+              fillOpacity: rest.fillOpacity,
+              stroke: rest.stroke,
+              strokeOpacity: rest.strokeOpacity,
+              strokeWidth: rest.strokeWidth,
+              opacity: rest.opacity,
+            },
+            classes: cls('lc-path', rest.class as string | undefined),
+            style: (rest as any).style as string | undefined,
+          }
+    );
+  }
+
+  // TODO: Use objectId to work around Svelte 4 reactivity issue
+  const fillKey = createKey(() => rest.fill);
+  const strokeKey = createKey(() => rest.stroke);
+
+  c.chartCtx.registerComponent({
+    name: 'Path',
+    kind: 'mark',
+    canvasRender: {
+      render,
+      events: {
+        get click() {
+          return (rest as any).onclick;
+        },
+        get pointerenter() {
+          return (rest as any).onpointerenter;
+        },
+        get pointermove() {
+          return (rest as any).onpointermove;
+        },
+        get pointerleave() {
+          return (rest as any).onpointerleave;
+        },
+        get pointerdown() {
+          return (rest as any).onpointerdown;
+        },
+        get pointerover() {
+          return (rest as any).onpointerover;
+        },
+        get pointerout() {
+          return (rest as any).onpointerout;
+        },
+        get touchmove() {
+          return (rest as any).ontouchmove;
+        },
+      },
+      deps: () => [
+        fillKey.current,
+        rest.fillOpacity,
+        strokeKey.current,
+        rest.strokeOpacity,
+        rest.strokeWidth,
+        rest.opacity,
+        rest.class,
+        c.tweenedPathData,
+        (rest as any).style,
+      ],
+    },
+  });
+</script>

package/dist/components/Path/Path.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { PathProps, PathPropsWithoutHTML } from './Path.shared.svelte.js';
+import { type PathProps } from './Path.shared.svelte.js';
+declare const Path: import("svelte").Component<PathProps, {}, "">;
+type Path = ReturnType<typeof Path>;
+export default Path;