layerchart 2.0.0-next.5 → 2.0.0-next.51

package/dist/components/Line.svelte.test.js

@@ -0,0 +1,121 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import TestHarness, { componentTestId } from './tests/TestHarness.svelte';
+import Line from './Line.svelte';
+describe('Line', () => {
+    describe('pixel mode', () => {
+        it('should render a line with pixel values', async () => {
+            render(TestHarness, {
+                component: Line,
+                componentProps: {
+                    x1: 0,
+                    y1: 0,
+                    x2: 100,
+                    y2: 100,
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+        });
+    });
+    describe('data mode', () => {
+        const data = [
+            { date: new Date('2024-01-01'), value: 20 },
+            { date: new Date('2024-02-01'), value: 40 },
+            { date: new Date('2024-03-01'), value: 60 },
+        ];
+        it('should render one line per data item with string accessors', async () => {
+            render(TestHarness, {
+                component: Line,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    x1: 'date',
+                    y1: (d) => 0,
+                    x2: 'date',
+                    y2: 'value',
+                },
+            });
+            const lines = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => lines.length).toBe(3);
+        });
+        it('should resolve data-driven stroke through cScale', async () => {
+            const colorData = [
+                { date: new Date('2024-01-01'), value: 20, category: 'A' },
+                { date: new Date('2024-02-01'), value: 40, category: 'B' },
+                { date: new Date('2024-03-01'), value: 60, category: 'A' },
+            ];
+            render(TestHarness, {
+                component: Line,
+                chartProps: {
+                    data: colorData,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                    c: 'category',
+                    cRange: ['steelblue', 'coral'],
+                },
+                componentProps: {
+                    x1: 'date',
+                    y1: (d) => 0,
+                    x2: 'date',
+                    y2: 'value',
+                    stroke: 'category',
+                },
+            });
+            const lines = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => lines.length).toBe(3);
+            expect(lines[0].getAttribute('stroke')).toBe('steelblue');
+            expect(lines[1].getAttribute('stroke')).toBe('coral');
+            expect(lines[2].getAttribute('stroke')).toBe('steelblue');
+        });
+        it('should pass literal CSS colors through unchanged in data mode', async () => {
+            render(TestHarness, {
+                component: Line,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    x1: 'date',
+                    y1: (d) => 0,
+                    x2: 'date',
+                    y2: 'value',
+                    stroke: 'red',
+                },
+            });
+            const lines = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => lines.length).toBe(3);
+            expect(lines[0].getAttribute('stroke')).toBe('red');
+            expect(lines[1].getAttribute('stroke')).toBe('red');
+        });
+        it('should use explicit data prop over chart context data', async () => {
+            const explicitData = [{ date: new Date('2024-01-01'), value: 20 }];
+            render(TestHarness, {
+                component: Line,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    data: explicitData,
+                    x1: 'date',
+                    y1: (d) => 0,
+                    x2: 'date',
+                    y2: 'value',
+                },
+            });
+            const lines = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => lines.length).toBe(1);
+        });
+    });
+});

package/dist/components/LinearGradient.svelte

@@ -76,12 +76,12 @@
 </script>
 
 <script lang="ts">
-  import { getChartContext, getRenderContext } from './Chart.svelte';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { getLayerContext } from '../contexts/layer.js';
+  import { getChartContext } from '../contexts/chart.js';
   import { createLinearGradient, getComputedStyles } from '../utils/canvas.js';
   import { parsePercent } from '../utils/math.js';
   import { createId } from '../utils/createId.js';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
   import { cls } from '@layerstack/tailwind';
 
   const uid = $props.id();
@@ -109,10 +109,39 @@
   });
 
   const ctx = getChartContext();
-  const renderCtx = getRenderContext();
+  const layerCtx = getLayerContext();
 
   let canvasGradient = $state<CanvasGradient>();
 
+  function createCSSGradient(): string {
+    if (!stops?.length) return '';
+
+    let direction: string;
+    if (rotate !== undefined) {
+      // Convert SVG rotation to CSS linear-gradient angle
+      // SVG: rotate(0) on horizontal gradient = left-to-right = CSS 90deg
+      // SVG: rotate(0) on vertical gradient = top-to-bottom = CSS 180deg
+      const baseAngle = vertical ? 180 : 90;
+      const cssAngle = baseAngle + rotate;
+      direction = `${cssAngle}deg`;
+    } else {
+      // Use direction keywords when no rotation is specified
+      direction = vertical ? 'to bottom' : 'to right';
+    }
+
+    const cssStops = stops
+      .map((stop, i) => {
+        if (Array.isArray(stop)) {
+          return `${stop[1]} ${stop[0]}`;
+        } else {
+          return `${stop} ${i * (100 / (stops.length - 1))}%`;
+        }
+      })
+      .join(', ');
+
+    return `linear-gradient(${direction}, ${cssStops})`;
+  }
+
   function render(_ctx: CanvasRenderingContext2D) {
     // Use `getComputedStyles()` to convert each stop (if using CSS variables and/or classes) to color values
     const _stops = stops.map((stop, i) => {
@@ -144,22 +173,21 @@
     canvasGradient = gradient;
   }
 
-  if (renderCtx === 'canvas') {
-    registerCanvasComponent({
-      name: 'Gradient',
+  if (layerCtx === 'canvas') {
+    ctx.registerComponent({ name: 'Gradient', kind: 'group', canvasRender: {
       render,
       deps: () => [x1, y1, x2, y2, stops, className],
-    });
+    } });
   }
 </script>
 
-{#if renderCtx === 'canvas'}
+{#if layerCtx === 'canvas'}
   <!--
 	TODO: we can probably pass the context to coerce this type so we don't need a bunch
 	of predicates to check if the gradient is a CanvasGradient or not...
 	-->
   {@render children?.({ id, gradient: asAny(canvasGradient) })}
-{:else if renderCtx === 'svg'}
+{:else if layerCtx === 'svg'}
   <defs>
     <linearGradient
       bind:this={ref}
@@ -170,7 +198,7 @@
       {y2}
       gradientTransform={rotate ? `rotate(${rotate})` : ''}
       gradientUnits={units}
-      {...extractLayerProps(restProps, 'linear-gradient')}
+      {...extractLayerProps(restProps, 'lc-linear-gradient')}
     >
       {#if stopsContent}
         {@render stopsContent?.()}
@@ -180,13 +208,13 @@
             <stop
               offset={stop[0]}
               stop-color={stop[1]}
-              class={cls(layerClass('linear-gradient-stop'), className)}
+              class={cls('lc-linear-gradient-stop', className)}
             />
           {:else}
             <stop
               offset="{i * (100 / (stops.length - 1))}%"
               stop-color={stop}
-              class={cls(layerClass('linear-gradient-stop'), className)}
+              class={cls('lc-linear-gradient-stop', className)}
             />
           {/if}
         {/each}
@@ -195,4 +223,6 @@
   </defs>
 
   {@render children?.({ id, gradient: `url(#${id})` })}
+{:else if layerCtx === 'html'}
+  {@render children?.({ id, gradient: createCSSGradient() })}
 {/if}

package/dist/components/Link.svelte

@@ -173,5 +173,5 @@ TODO:
   {type}
   {curve}
   {sweep}
-  {...extractLayerProps(restProps, 'link')}
+  {...extractLayerProps(restProps, 'lc-link')}
 />

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
@@ -73,7 +73,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 +103,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;