layerchart 2.0.0-next.6 → 2.0.0-next.60

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

@@ -2,53 +2,96 @@ import type { MarkerOptions } from './MarkerWrapper.svelte';
 import type { Without } from '../utils/types.js';
 import type { MotionNoneOption, MotionTweenOption } from '../utils/motion.svelte.js';
 import { type CurveFactory } from 'd3-shape';
+import type { LinkSweep, LinkType } from '../utils/linkUtils.js';
+import type { PathProps, PathPropsWithoutHTML } from './Path.svelte';
+import type { Accessor } from '../utils/common.js';
 export type LinkPropsWithoutHTML = {
+    /**
+     * Source `x` coordinate. Accepts a `number` (pixel value), a string property
+     * name, or `(d) => value` accessor. Strings/functions use `ctx.xScale`.
+     */
+    x1?: Accessor;
+    /**
+     * Source `y` coordinate. Accepts a `number`, property name, or
+     * `(d) => value` accessor. Strings/functions use `ctx.yScale`.
+     */
+    y1?: Accessor;
+    /** Target `x` coordinate. See `x1`. */
+    x2?: Accessor;
+    /** Target `y` coordinate. See `y1`. */
+    y2?: Accessor;
+    /**
+     * Data for the link. In array mode (when `x1`/`y1`/`x2`/`y2` are strings or
+     * functions) this should be an array of rows; one path is rendered per row.
+     * In hierarchy/sankey mode, a single link object (`{source, target, ...}`).
+     * Defaults to `ctx.data` in array mode.
+     */
     data?: any;
     /**
-     * Update source and target accessors to be compatible with d3-sankey.  see: https://github.com/d3/d3-sankey#sankeyLinkHorizontal
+     * Update source and target accessors to be compatible with d3-sankey. see:
+     * https://github.com/d3/d3-sankey#sankeyLinkHorizontal
      *
      * @default false
      */
     sankey?: boolean;
+    /** Accessor returning the source node from `data` (hierarchy/sankey mode). */
     source?: (d: any) => any;
+    /** Accessor returning the target node from `data` (hierarchy/sankey mode). */
     target?: (d: any) => any;
-    /**
-     * Convenient property to swap x/y accessor logic
-     */
-    orientation?: 'vertical' | 'horizontal';
+    /** Accessor returning `x` for a node (hierarchy/sankey mode). */
     x?: (d: any) => any;
+    /** Accessor returning `y` for a node (hierarchy/sankey mode). */
     y?: (d: any) => any;
-    curve?: CurveFactory;
     /**
-     * Marker to attach to both start and end points of the line
+     * The link path type.
+     *
+     * Set to `'d3'` to use a D3 curve function via the `curve` prop.
+     *
+     * @default 'd3'
      */
-    marker?: MarkerOptions;
+    type?: LinkType;
     /**
-     * Marker to attach to the middle point of the line
+     * Corner radius (used by `'beveled'` and `'rounded'`).
+     *
+     * @default 20
      */
-    markerMid?: MarkerOptions;
+    radius?: number;
     /**
-     * Marker to attach to the start point of the line
+     * Bend angle in degrees for the `'swoop'` link type.
+     *
+     * @default 22.5
      */
-    markerStart?: MarkerOptions;
+    bend?: number;
+    /** D3 curve function (used when `type === 'd3'`). */
+    curve?: CurveFactory;
+    /** Sweep direction for preset types and d3 paths. */
+    sweep?: LinkSweep;
     /**
-     * Marker to attach to the end point of the line
+     * Natural flow direction (affects default curve and axis-dependent step
+     * curves). Also toggles x/y accessor logic in hierarchy mode.
      */
-    markerEnd?: MarkerOptions;
+    orientation?: 'vertical' | 'horizontal';
     /**
-     * Apply explicit coordinates to the line. Useful when dealing with
-     * force simulation links.
+     * Interpret coords as polar (`x` = angle, `y` = radius) and render in
+     * radial space. Defaults to `ctx.radial` when unset.
      */
-    explicitCoords?: {
-        x1: number;
-        y1: number;
-        x2: number;
-        y2: number;
-    };
+    radial?: boolean;
+    /** Marker at both start and end points. */
+    marker?: MarkerOptions;
+    /** Marker at the middle point. */
+    markerMid?: MarkerOptions;
+    /** Marker at the start point. */
+    markerStart?: MarkerOptions;
+    /** Marker at the end point. */
+    markerEnd?: MarkerOptions;
     motion?: MotionTweenOption | MotionNoneOption;
-};
-export type LinkProps = LinkPropsWithoutHTML & Without<ConnectorProps, LinkPropsWithoutHTML>;
-import { type ConnectorProps } from './Connector.svelte';
-declare const Link: import("svelte").Component<LinkProps, {}, "">;
+    /**
+     * CSS class. In array mode, accepts a `(d) => string` function evaluated
+     * per datum.
+     */
+    class?: string | ((d: any) => string);
+} & Omit<PathPropsWithoutHTML, 'class'>;
+export type LinkProps = LinkPropsWithoutHTML & Without<PathProps, LinkPropsWithoutHTML>;
+declare const Link: import("svelte").Component<LinkProps, {}, "pathRef">;
 type Link = ReturnType<typeof Link>;
 export default Link;

package/dist/components/Marker.svelte

@@ -8,7 +8,15 @@
      *
      * Pass `children` to render a custom element/component inside the marker instead.
      */
-    type?: 'arrow' | 'triangle' | 'line' | 'circle' | 'circle-stroke' | 'dot';
+    type?:
+      | 'arrow'
+      | 'triangle'
+      | 'line'
+      | 'circle'
+      | 'circle-stroke'
+      | 'dot'
+      | 'square'
+      | 'square-stroke';
 
     /**
      * Unique identifier for the marker
@@ -73,7 +81,6 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
   import { createId } from '../utils/createId.js';
-  import { layerClass } from '../utils/attributes.js';
 
   const uid = $props.id();
 
@@ -104,39 +111,56 @@
     {refX}
     {refY}
     {viewBox}
+    data-type={type}
     {...restProps}
-    class={cls(
-      layerClass('marker'),
-      'overflow-visible',
-      // stroke
-      restProps.stroke == null &&
-        (['arrow', 'circle-stroke', 'line'].includes(type ?? '')
-          ? 'stroke-[context-stroke]'
-          : type === 'circle'
-            ? 'stroke-surface-100'
-            : 'stroke-none'),
-      // extra stroke attrs
-      '[stroke-linecap:round] [stroke-linejoin:round]',
-      //fill
-      restProps.fill == null &&
-        (['triangle', 'dot', 'circle'].includes(type ?? '')
-          ? 'fill-[context-stroke]'
-          : type === 'circle-stroke'
-            ? 'fill-surface-100'
-            : 'fill-none'),
-      className
-    )}
+    class={cls('lc-marker', className)}
   >
     {#if children}
       {@render children()}
     {:else if type === 'triangle'}
-      <path d="M 0 0 L 10 5 L 0 10 z" class={layerClass('marker-triangle')} />
+      <path d="M 0 0 L 10 5 L 0 10 z" class="lc-marker-triangle" />
     {:else if type === 'arrow'}
-      <polyline points="0 0, 10 5, 0 10" class={layerClass('marker-arrow')} />
+      <polyline points="0 0, 10 5, 0 10" class="lc-marker-arrow" />
     {:else if type === 'circle' || type === 'circle-stroke' || type === 'dot'}
-      <circle cx={5} cy={5} r={5} class={layerClass('marker-circle')} />
+      <circle cx={5} cy={5} r={5} class="lc-marker-circle" />
     {:else if type === 'line'}
-      <polyline points="5 0, 5 10" class={layerClass('marker-line')} />
+      <polyline points="5 0, 5 10" class="lc-marker-line" />
+    {:else if type === 'square' || type === 'square-stroke'}
+      <rect x={0} y={0} width={10} height={10} class="lc-marker-square" />
     {/if}
   </marker>
 </defs>
+
+<style>
+  @layer base {
+    :global(:where(.lc-marker)) {
+      overflow: visible;
+
+      &[data-type='arrow'],
+      &[data-type='circle-stroke'],
+      &[data-type='square-stroke'],
+      &[data-type='line'] {
+        fill: none;
+        stroke: context-stroke;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      &[data-type='circle'] {
+        stroke: var(--color-surface-100, light-dark(white, black));
+      }
+
+      &[data-type='triangle'],
+      &[data-type='dot'],
+      &[data-type='circle'],
+      &[data-type='square'] {
+        fill: context-stroke;
+      }
+
+      &[data-type='circle-stroke'],
+      &[data-type='square-stroke'] {
+        fill: var(--color-surface-100, light-dark(white, black));
+      }
+    }
+  }
+</style>

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

@@ -6,7 +6,7 @@ export type MarkerPropsWithoutHTML = {
      *
      * Pass `children` to render a custom element/component inside the marker instead.
      */
-    type?: 'arrow' | 'triangle' | 'line' | 'circle' | 'circle-stroke' | 'dot';
+    type?: 'arrow' | 'triangle' | 'line' | 'circle' | 'circle-stroke' | 'dot' | 'square' | 'square-stroke';
     /**
      * Unique identifier for the marker
      */

package/dist/components/Month.svelte

@@ -0,0 +1,273 @@
+<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;
+
+    /**
+     * 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 MonthProps = MonthPropsWithoutHTML &
+    Without<SVGAttributes<SVGRectElement>, MonthPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { type ComponentProps, type Snippet } from 'svelte';
+  import { timeDays, timeMonths, 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';
+
+  const DAYS_PER_WEEK = 7;
+
+  let {
+    start,
+    end,
+    cellSize = 25,
+    monthsPerRow: monthsPerRowProp,
+    monthPadding = 1.2,
+    rowSpacing = 8,
+    showDayNumber = true,
+    monthLabel = true,
+    dayNumberProps = {},
+    tooltip,
+    children,
+    ...restProps
+  }: MonthPropsWithoutHTML = $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(
+        (ctx.width + (monthPadding - 1) * cellSize * DAYS_PER_WEEK) /
+          (monthPadding * cellSize * DAYS_PER_WEEK)
+      )
+  );
+
+  // 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;
+
+    rangeDays.forEach((day) => {
+      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++;
+      }
+
+      const monthIndex = monthIndexMap.get(monthKey)!;
+      const cellData = dataByDate.get(day) ?? { date: day };
+
+      const monthCol = monthIndex % monthsPerRow;
+      const monthRow = Math.floor(monthIndex / monthsPerRow);
+
+      const monthPaddingOffset = monthPadding * cellSize * DAYS_PER_WEEK * monthCol;
+      const weekDiff = timeWeek.count(firstDayOfMonth, day);
+
+      cells.push({
+        x: day.getDay() * cellSize + monthPaddingOffset,
+        y: weekDiff * cellSize + monthRow * cellSize * rowSpacing + monthLabelHeight,
+        color: ctx.config.c ? ctx.cGet(cellData) : 'transparent',
+        data: cellData,
+        date: day,
+      });
+    });
+
+    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
+      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 monthPaddingOffset = monthPadding * cellSize * DAYS_PER_WEEK * monthCol;
+
+      labels.push({
+        x: monthPaddingOffset,
+        y: monthRow * cellSize * rowSpacing,
+        text: format(firstDayOfMonth, 'month'),
+      });
+    });
+
+    return labels;
+  });
+</script>
+
+<Group>
+  <!-- Cells -->
+  {#if children}
+    {@render children({ cells: allCells.cells, cellSize })}
+  {:else}
+    {#each allCells.cells as cell}
+      <Rect
+        x={cell.x}
+        y={cell.y}
+        width={cellSize}
+        height={cellSize}
+        fill={cell.color}
+        onpointermove={(e) => tooltip && ctx.tooltip?.show(e, cell.data)}
+        onpointerleave={(e) => tooltip && ctx.tooltip?.hide()}
+        {...extractLayerProps(restProps, 'lc-month-cell')}
+      />
+
+      {#if showDayNumber}
+        <Text
+          x={cell.x + cellSize / 2}
+          y={cell.y + cellSize / 2}
+          lineHeight="0.8em"
+          value={cell.date.getDate()}
+          textAnchor="middle"
+          verticalAnchor="middle"
+          class="lc-month-day-number"
+          {...dayNumberProps}
+        />
+      {/if}
+    {/each}
+  {/if}
+
+  <!-- Month labels -->
+  {#if monthLabel}
+    {#each monthLabels as label}
+      <Text
+        x={label.x}
+        y={label.y}
+        value={label.text}
+        verticalAnchor="start"
+        class="lc-month-month-label"
+        {...extractLayerProps(monthLabel, 'lc-month-month-label')}
+      />
+    {/each}
+  {/if}
+</Group>
+
+<style>
+  @layer components {
+    :global(:where(.lc-month-cell)) {
+      stroke-width: 1;
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 20%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-month-day-number)) {
+      font-size: 10px;
+      pointer-events: none;
+      stroke: var(--color-surface-100, light-dark(white, black));
+      stroke-width: 1px;
+      font-weight: 600;
+    }
+
+    :global(:where(.lc-month-month-label)) {
+      font-size: 16px;
+    }
+  }
+</style>

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

@@ -0,0 +1,70 @@
+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;
+    /**
+     * 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 MonthProps = MonthPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, MonthPropsWithoutHTML>;
+import { type ComponentProps, type Snippet } from 'svelte';
+import { type RectPropsWithoutHTML } from './Rect.svelte';
+import Text from './Text.svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../utils/types.js';
+declare const Month: import("svelte").Component<MonthPropsWithoutHTML, {}, "">;
+type Month = ReturnType<typeof Month>;
+export default Month;

package/dist/components/MonthPath.svelte

@@ -15,35 +15,43 @@
      */
     cellSize: number | [number, number];
 
+    /**
+     * The start date of the calendar (used to calculate week offsets).
+     */
+    startOfRange: Date;
+
     /**
      * A bindable reference to the underlying `<path>` element.
      *
      * @bindable
      */
-    ref?: SVGPathElement;
+    pathRef?: SVGPathElement;
   };
 
   export type MonthPathProps = MonthPathPropsWithoutHTML &
-    Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML>;
+    // we omit the path props to avoid conflicts with attribute names since we are
+    // passing them through to `<Path />`
+    Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML & PathPropsWithoutHTML>;
 </script>
 
 <script lang="ts">
-  import { timeWeek, timeYear } from 'd3-time';
-  import { endOfMonth } from 'date-fns';
+  import { timeWeek } from 'd3-time';
   import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../utils/attributes.js';
+  import { endOfInterval } from '@layerstack/utils';
+  import Path, { type PathPropsWithoutHTML } from './Path.svelte';
 
   let {
     date,
     cellSize: cellSizeProp,
-    ref: refProp = $bindable(),
+    startOfRange,
+    pathRef: pathRefProp = $bindable(),
     class: className,
     ...restProps
   }: MonthPathProps = $props();
 
-  let ref = $state<SVGPathElement>();
+  let pathRef = $state<SVGPathElement>();
   $effect.pre(() => {
-    refProp = ref;
+    pathRefProp = pathRef;
   });
 
   const cellSize = $derived(
@@ -52,12 +60,12 @@
 
   // start of month
   const startDayOfWeek = $derived(date.getDay());
-  const startWeek = $derived(timeWeek.count(timeYear(date), date));
+  const startWeek = $derived(timeWeek.count(startOfRange, date));
 
   // end of month
-  const monthEnd = $derived(endOfMonth(date));
+  const monthEnd = $derived(endOfInterval('month', date));
   const endDayOfWeek = $derived(monthEnd.getDay());
-  const endWeek = $derived(timeWeek.count(timeYear(monthEnd), monthEnd));
+  const endWeek = $derived(timeWeek.count(startOfRange, monthEnd));
 
   const pathData = $derived(`
     M${(startWeek + 1) * cellSize[0]},${startDayOfWeek * cellSize[1]}
@@ -68,10 +76,16 @@
   `);
 </script>
 
-<path
-  bind:this={ref}
-  d={pathData}
-  fill="none"
-  class={cls(layerClass('month-path'), 'stroke-surface-content/20', className)}
-  {...restProps}
-/>
+<Path bind:pathRef {pathData} fill="none" class={cls('lc-month-path', className)} {...restProps} />
+
+<style>
+  @layer components {
+    :global(:where(.lc-month-path)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 20%,
+        transparent
+      );
+    }
+  }
+</style>