layerchart 2.0.0-next.48 → 2.0.0-next.49

package/dist/components/GeoPath.svelte

@@ -151,7 +151,7 @@
   <Path
     {pathData}
     {...restProps}
-    onclick={_onClick}
+    onclick={onclick ? _onClick : undefined}
     onpointerenter={tooltip || onpointerenter ? _onPointerEnter : undefined}
     onpointermove={tooltip || onpointermove ? _onPointerMove : undefined}
     onpointerleave={tooltip || onpointerleave ? _onPointerLeave : undefined}

package/dist/components/Group.svelte

@@ -156,18 +156,20 @@
   // --- Data mode motion ---
   const dataMotionMap = createDataMotionMap(motion);
 
-  $effect(() => {
-    if (!dataMode || !dataMotionMap) return;
-    const activeKeys = new Set<any>();
-    for (let i = 0; i < resolvedData.length; i++) {
-      const d = resolvedData[i];
-      const key = keyFn(d, i);
-      activeKeys.add(key);
-      const resolved = resolveGroup(d);
-      untrack(() => dataMotionMap.update(key, resolved));
-    }
-    untrack(() => dataMotionMap.cleanup(activeKeys));
-  });
+  if (dataMotionMap) {
+    $effect(() => {
+      if (!dataMode) return;
+      const activeKeys = new Set<any>();
+      for (let i = 0; i < resolvedData.length; i++) {
+        const d = resolvedData[i];
+        const key = keyFn(d, i);
+        activeKeys.add(key);
+        const resolved = resolveGroup(d);
+        untrack(() => dataMotionMap.update(key, resolved));
+      }
+      untrack(() => dataMotionMap.cleanup(activeKeys));
+    });
+  }
 
   // Single source of truth: resolved values with animated overlay
   const resolvedItems = $derived.by(() => {

package/dist/components/Image.svelte

@@ -238,18 +238,20 @@
   // --- Data mode motion ---
   const dataMotionMap = createDataMotionMap(motion as MotionOptions | undefined);
 
-  $effect(() => {
-    if (!dataMode || !dataMotionMap) return;
-    const activeKeys = new Set<any>();
-    for (let i = 0; i < resolvedData.length; i++) {
-      const d = resolvedData[i];
-      const key = keyFn(d, i);
-      activeKeys.add(key);
-      const resolved = resolveImage(d);
-      untrack(() => dataMotionMap.update(key, { x: resolved.x, y: resolved.y, width: resolved.width, height: resolved.height }));
-    }
-    untrack(() => dataMotionMap.cleanup(activeKeys));
-  });
+  if (dataMotionMap) {
+    $effect(() => {
+      if (!dataMode) return;
+      const activeKeys = new Set<any>();
+      for (let i = 0; i < resolvedData.length; i++) {
+        const d = resolvedData[i];
+        const key = keyFn(d, i);
+        activeKeys.add(key);
+        const resolved = resolveImage(d);
+        untrack(() => dataMotionMap.update(key, { x: resolved.x, y: resolved.y, width: resolved.width, height: resolved.height }));
+      }
+      untrack(() => dataMotionMap.cleanup(activeKeys));
+    });
+  }
 
   // Single source of truth: resolved values with animated overlay
   const resolvedItems = $derived.by(() => {
@@ -292,22 +294,22 @@
   const motionX = createMotion(
     _initialX,
     () => (typeof x === 'number' ? x : 0),
-    parseMotionProp(motion, 'x')
+    motion === undefined ? undefined : parseMotionProp(motion, 'x')
   );
   const motionY = createMotion(
     _initialY,
     () => (typeof y === 'number' ? y : 0),
-    parseMotionProp(motion, 'y')
+    motion === undefined ? undefined : parseMotionProp(motion, 'y')
   );
   const motionWidth = createMotion(
     _initialWidth,
     () => resolvedPixelWidth,
-    parseMotionProp(motion, 'width')
+    motion === undefined ? undefined : parseMotionProp(motion, 'width')
   );
   const motionHeight = createMotion(
     _initialHeight,
     () => resolvedPixelHeight,
-    parseMotionProp(motion, 'height')
+    motion === undefined ? undefined : parseMotionProp(motion, 'height')
   );
 
   // Pixel mode r and rotate (only when direct number values)

package/dist/components/Labels.svelte

@@ -41,10 +41,11 @@
     seriesKey?: string;
 
     /**
-     * The placement of the label relative to the point
+     * The placement of the label relative to the point.
+     * `smart` dynamically positions labels based on neighboring point values (peak, trough, rising, falling).
      * @default 'outside'
      */
-    placement?: 'inside' | 'outside' | 'center';
+    placement?: 'inside' | 'outside' | 'center' | 'smart';
 
     /**
      * The offset of the label from the point
@@ -114,12 +115,11 @@
         : 0.1)
   );
 
-  function getTextProps(point: Point): ComponentProps<typeof Text> {
+  function getTextProps(point: Point, points?: Point[], i?: number): ComponentProps<typeof Text> {
     // Used for positioning direction.
     // For array accessors (edgeIndex defined), use edge position: 0 = start/low, 1 = end/high
     const pointValue = isScaleBand(ctx.yScale) ? point.xValue : point.yValue;
-    const isLowEdge =
-      point.edgeIndex != null ? point.edgeIndex === 0 : pointValue < 0;
+    const isLowEdge = point.edgeIndex != null ? point.edgeIndex === 0 : pointValue < 0;
 
     // extract the true fill value from `fill` which could be an
     // accessor function or string/undefined
@@ -142,11 +142,13 @@
             : ctx.yScale.tickFormat?.())
     );
 
+    let result: ComponentProps<typeof Text>;
+
     if (isScaleBand(ctx.yScale)) {
       // Position label left/right on horizontal bars
       if (isLowEdge) {
         // left
-        return {
+        result = {
           value: formattedValue,
           fill: fillValue,
           x: point.x + (placement === 'outside' ? -offset : offset),
@@ -157,7 +159,7 @@
         };
       } else {
         // right
-        return {
+        result = {
           value: formattedValue,
           fill: fillValue,
           x: point.x + (placement === 'outside' ? offset : -offset),
@@ -171,7 +173,7 @@
       // Position label top/bottom on vertical bars
       if (isLowEdge) {
         // bottom
-        return {
+        result = {
           value: formattedValue,
           fill: fillValue,
           x: point.x,
@@ -183,7 +185,7 @@
         };
       } else {
         // top
-        return {
+        result = {
           value: formattedValue,
           fill: fillValue,
           x: point.x,
@@ -195,6 +197,48 @@
         };
       }
     }
+
+    if (placement === 'smart' && points != null && i != null) {
+      const getValue = (p: Point): number => (isScaleBand(ctx.yScale) ? p.xValue : p.yValue);
+      const curr = getValue(point);
+      const prev = i > 0 ? getValue(points[i - 1]) : curr;
+      const next = i < points.length - 1 ? getValue(points[i + 1]) : curr;
+
+      const xPrevTight = Math.abs(prev - curr) < offset;
+      const xNextTight = Math.abs(curr - next) < offset;
+      const isPeak = (prev <= curr && curr >= next) || (xPrevTight && xNextTight);
+      const isTrough = (prev >= curr && curr <= next) || (xPrevTight && xNextTight);
+      const isRising = !isPeak && !isTrough && prev < curr;
+      const isFalling = !isPeak && !isTrough && prev >= curr;
+
+      return {
+        ...result,
+        x: point.x,
+        y: point.y,
+        dx: isRising
+          ? xPrevTight
+            ? offset
+            : -offset
+          : isFalling
+            ? xNextTight
+              ? -offset
+              : offset
+            : 0,
+        dy: isPeak ? -offset : isTrough ? offset : 0,
+        textAnchor: isRising
+          ? xPrevTight
+            ? 'start'
+            : 'end'
+          : isFalling
+            ? xNextTight
+              ? 'end'
+              : 'start'
+            : 'middle',
+        verticalAnchor: isPeak ? 'end' : isTrough ? 'start' : 'middle',
+      };
+    }
+
+    return result;
   }
 </script>
 
@@ -202,7 +246,8 @@
   <Points {data} {x} {y} {seriesKey}>
     {#snippet children({ points })}
       {#each points as point, i (key(point.data, i))}
-        {@const textProps = extractLayerProps(getTextProps(point), 'lc-labels-text')}
+        {@const baseProps = getTextProps(point, points, i)}
+        {@const textProps = extractLayerProps(baseProps, 'lc-labels-text')}
         {#if childrenProp}
           {@render childrenProp({ data: point, textProps })}
         {:else}
@@ -210,7 +255,7 @@
             data-placement={placement}
             {...textProps}
             {...restProps}
-            {...extractLayerProps(getTextProps(point), 'lc-labels-text', className ?? '')}
+            {...extractLayerProps(baseProps, 'lc-labels-text', className ?? '')}
           />
         {/if}
       {/each}

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

@@ -33,10 +33,11 @@ export type LabelsPropsWithoutHTML<T = any> = {
      */
     seriesKey?: string;
     /**
-     * The placement of the label relative to the point
+     * The placement of the label relative to the point.
+     * `smart` dynamically positions labels based on neighboring point values (peak, trough, rising, falling).
      * @default 'outside'
      */
-    placement?: 'inside' | 'outside' | 'center';
+    placement?: 'inside' | 'outside' | 'center' | 'smart';
     /**
      * The offset of the label from the point
      *

package/dist/components/Line.svelte

@@ -189,18 +189,20 @@
   // --- Data mode motion ---
   const dataMotionMap = createDataMotionMap(motion);
 
-  $effect(() => {
-    if (!dataMode || !dataMotionMap) return;
-    const activeKeys = new Set<any>();
-    for (let i = 0; i < resolvedData.length; i++) {
-      const d = resolvedData[i];
-      const key = keyFn(d, i);
-      activeKeys.add(key);
-      const resolved = resolveLine(d);
-      untrack(() => dataMotionMap.update(key, resolved));
-    }
-    untrack(() => dataMotionMap.cleanup(activeKeys));
-  });
+  if (dataMotionMap) {
+    $effect(() => {
+      if (!dataMode) return;
+      const activeKeys = new Set<any>();
+      for (let i = 0; i < resolvedData.length; i++) {
+        const d = resolvedData[i];
+        const key = keyFn(d, i);
+        activeKeys.add(key);
+        const resolved = resolveLine(d);
+        untrack(() => dataMotionMap.update(key, resolved));
+      }
+      untrack(() => dataMotionMap.cleanup(activeKeys));
+    });
+  }
 
   // Single source of truth: resolved values with animated overlay
   const resolvedItems = $derived.by(() => {
@@ -301,8 +303,8 @@
     }
   }
 
-  const fillKey = createKey(() => fill);
-  const strokeKey = createKey(() => stroke);
+  const fillKey = layerCtx === 'canvas' ? createKey(() => fill) : undefined;
+  const strokeKey = layerCtx === 'canvas' ? createKey(() => stroke) : undefined;
 
   chartCtx.registerComponent({
     name: 'Line',
@@ -331,8 +333,8 @@
         motionY1.current,
         motionX2.current,
         motionY2.current,
-        fillKey.current,
-        strokeKey.current,
+        fillKey!.current,
+        strokeKey!.current,
         strokeWidth,
         opacity,
         className,

package/dist/components/LinearGradient.svelte

@@ -174,7 +174,7 @@
   }
 
   if (layerCtx === 'canvas') {
-    ctx.registerComponent({ name: 'Gradient', kind: 'mark', canvasRender: {
+    ctx.registerComponent({ name: 'Gradient', kind: 'group', canvasRender: {
       render,
       deps: () => [x1, y1, x2, y2, stops, className],
     } });

package/dist/components/Marker.svelte

@@ -8,7 +8,7 @@
      *
      * 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
@@ -117,6 +117,8 @@
       <circle cx={5} cy={5} r={5} class="lc-marker-circle" />
     {:else if type === '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>
@@ -128,6 +130,7 @@
 
       &[data-type='arrow'],
       &[data-type='circle-stroke'],
+      &[data-type='square-stroke'],
       &[data-type='line'] {
         fill: none;
         stroke: context-stroke;
@@ -141,11 +144,13 @@
 
       &[data-type='triangle'],
       &[data-type='dot'],
-      &[data-type='circle'] {
+      &[data-type='circle'],
+      &[data-type='square'] {
         fill: context-stroke;
       }
 
-      &[data-type='circle-stroke'] {
+      &[data-type='circle-stroke'],
+      &[data-type='square-stroke'] {
         fill: var(--color-surface-100, light-dark(white, black));
       }
     }

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>