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

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

@@ -0,0 +1,89 @@
+import type { Without } from '../utils/types.js';
+import type { DataProp, DataDrivenStyleProps } from '../utils/dataProp.js';
+export type EllipsePropsWithoutHTML = {
+    /**
+     * The center x position of the ellipse.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via xScale
+     * - `function(d)`: accessor called per data item, result passed through xScale
+     *
+     * @default 0
+     */
+    cx?: DataProp;
+    /**
+     * The initial center x position of the ellipse (pixel mode only).
+     *
+     * @default cx
+     */
+    initialCx?: number;
+    /**
+     * The center y position of the ellipse.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via yScale
+     * - `function(d)`: accessor called per data item, result passed through yScale
+     *
+     * @default 0
+     */
+    cy?: DataProp;
+    /**
+     * The initial center y position of the ellipse (pixel mode only).
+     *
+     * @default cy
+     */
+    initialCy?: number;
+    /**
+     * The radius of the ellipse on the x-axis.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via rScale
+     * - `function(d)`: accessor called per data item, result passed through rScale
+     *
+     * @default 1
+     */
+    rx?: DataProp;
+    /**
+     * The initial radius of the ellipse on the x-axis (pixel mode only).
+     *
+     * @default rx
+     */
+    initialRx?: number;
+    /**
+     * The radius of the ellipse on the y-axis.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via rScale
+     * - `function(d)`: accessor called per data item, result passed through rScale
+     *
+     * @default 1
+     */
+    ry?: DataProp;
+    /**
+     * The initial radius of the ellipse on the y-axis (pixel mode only).
+     *
+     * @default ry
+     */
+    initialRy?: number;
+    /**
+     * Data array to iterate over in data mode.
+     * Falls back to chart context data when not provided.
+     */
+    data?: any[];
+    /**
+     * Key function for keyed {#each} rendering in data mode.
+     *
+     * @default (d, i) => i
+     */
+    key?: (d: any, index: number) => any;
+    /**
+     * A bindable reference to the `<ellipse>` element (pixel mode only).
+     *
+     * @bindable
+     */
+    ref?: SVGEllipseElement;
+    /** Motion configuration (pixel mode only). */
+    motion?: MotionProp;
+} & DataDrivenStyleProps;
+export type EllipseProps = EllipsePropsWithoutHTML & Without<SVGAttributes<Element>, EllipsePropsWithoutHTML>;
+import { type MotionProp } from '../utils/motion.svelte.js';
+import type { SVGAttributes } from 'svelte/elements';
+declare const Ellipse: import("svelte").Component<EllipseProps, {}, "ref">;
+type Ellipse = ReturnType<typeof Ellipse>;
+export default Ellipse;

package/dist/components/Ellipse.svelte.test.d.ts

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

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

@@ -0,0 +1,126 @@
+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 Ellipse from './Ellipse.svelte';
+describe('Ellipse', () => {
+    describe('pixel mode', () => {
+        it('should render an ellipse with pixel values', async () => {
+            render(TestHarness, {
+                component: Ellipse,
+                componentProps: {
+                    cx: 50,
+                    cy: 50,
+                    rx: 30,
+                    ry: 20,
+                    fill: 'red',
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+            expect(el.element()?.getAttribute('cx')).toBe('50');
+            expect(el.element()?.getAttribute('cy')).toBe('50');
+            expect(el.element()?.getAttribute('rx')).toBe('30');
+            expect(el.element()?.getAttribute('ry')).toBe('20');
+        });
+    });
+    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 ellipse per data item with string accessors', async () => {
+            render(TestHarness, {
+                component: Ellipse,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    rx: 10,
+                    ry: 5,
+                },
+            });
+            const ellipses = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => ellipses.length).toBe(3);
+        });
+        it('should resolve data-driven fill 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: Ellipse,
+                chartProps: {
+                    data: colorData,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                    c: 'category',
+                    cRange: ['steelblue', 'coral'],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    rx: 10,
+                    ry: 5,
+                    fill: 'category',
+                },
+            });
+            const ellipses = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => ellipses.length).toBe(3);
+            expect(ellipses[0].getAttribute('fill')).toBe('steelblue');
+            expect(ellipses[1].getAttribute('fill')).toBe('coral');
+            expect(ellipses[2].getAttribute('fill')).toBe('steelblue');
+        });
+        it('should pass literal CSS colors through unchanged in data mode', async () => {
+            render(TestHarness, {
+                component: Ellipse,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    rx: 10,
+                    ry: 5,
+                    fill: 'red',
+                },
+            });
+            const ellipses = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => ellipses.length).toBe(3);
+            expect(ellipses[0].getAttribute('fill')).toBe('red');
+            expect(ellipses[1].getAttribute('fill')).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: Ellipse,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    data: explicitData,
+                    cx: 'date',
+                    cy: 'value',
+                    rx: 10,
+                    ry: 5,
+                },
+            });
+            const ellipses = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => ellipses.length).toBe(1);
+        });
+    });
+});

package/dist/components/Frame.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <script lang="ts">
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import { extractLayerProps } from '../utils/attributes.js';
 
   let { ref: refProp = $bindable(), full = false, ...restProps }: FrameProps = $props();
@@ -37,5 +37,5 @@
   width={ctx.width + (full ? (ctx.padding?.left ?? 0) + (ctx.padding?.right ?? 0) : 0)}
   height={ctx.height + (full ? (ctx.padding?.top ?? 0) + (ctx.padding?.bottom ?? 0) : 0)}
   bind:ref
-  {...extractLayerProps(restProps, 'frame')}
+  {...extractLayerProps(restProps, 'lc-frame')}
 />

package/dist/components/Grid.svelte

@@ -3,20 +3,31 @@
   import { extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
   import type { SVGAttributes } from 'svelte/elements';
 
+  /** Props forwarded onto the underlying grid line (`<Line>`, `<Circle>`, or `<Spline>`). */
+  type GridLineProps = Pick<SVGAttributes<SVGElement>, 'class' | 'style'> & {
+    stroke?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    /** Dashed-line pattern. See `Line.dashArray`. */
+    dashArray?: number | number[] | string;
+  };
+
   export type GridPropsWithoutHTML<In extends Transition = Transition> = {
     /**
-     * Draw a x-axis lines
+     * Draw a x-axis lines. Pass props (class, style, stroke, strokeWidth,
+     * opacity, dashArray) to forward onto the underlying line.
      *
      * @default false
      */
-    x?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    x?: boolean | GridLineProps;
 
     /**
-     * Draw a y-axis lines
+     * Draw a y-axis lines. Pass props (class, style, stroke, strokeWidth,
+     * opacity, dashArray) to forward onto the underlying line.
      *
      * @default false
      */
-    y?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    y?: boolean | GridLineProps;
 
     /**
      * Control the number of x-axis ticks
@@ -44,6 +55,12 @@
      */
     radialY?: 'circle' | 'linear';
 
+    /**
+     * Stroke color for grid lines.
+     * Useful for server-side rendering where CSS variables are not available.
+     */
+    stroke?: string;
+
     /**
      * Classes to apply to the rendered elements.
      *
@@ -96,13 +113,17 @@
   import Group, { type GroupProps } from './Group.svelte';
   import Line from './Line.svelte';
   import Rule from './Rule.svelte';
-  import Spline from './Spline.svelte';
-  import { getChartContext } from './Chart.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
-  import { resolveTickVals, type TicksConfig } from '../utils/ticks.js';
+  // Spline (used only for radial linear grid lines) is lazy-loaded inline
+  // via `{#await import(...)}` so non-radial grids don't pay for it.
+  import { getChartContext } from '../contexts/chart.js';
+  import { extractLayerProps } from '../utils/attributes.js';
+  import { autoTickVals, type TicksConfig } from '../utils/ticks.js';
 
   const ctx = getChartContext();
 
+  // Mark as composite so child Splines (radial grid) don't register
+  ctx.registerComponent({ name: 'Grid', kind: 'composite-mark' });
+
   let {
     x = false,
     y = false,
@@ -110,6 +131,7 @@
     yTicks: yTicksProp,
     bandAlign = 'center',
     radialY = 'circle',
+    stroke,
     motion,
     transitionIn: transitionInProp,
     transitionInParams = { easing: cubicIn },
@@ -131,8 +153,8 @@
 
   const transitionIn = $derived((transitionInProp ?? tweenConfig?.options) ? fade : () => ({}));
 
-  const xTickVals = $derived(resolveTickVals(ctx.xScale, xTicks));
-  const yTickVals = $derived(resolveTickVals(ctx.yScale, yTicks));
+  const xTickVals = $derived(autoTickVals(ctx.xScale, xTicks));
+  const yTickVals = $derived(autoTickVals(ctx.yScale, yTicks));
 
   const xBandOffset = $derived(
     isScaleBand(ctx.xScale)
@@ -151,11 +173,11 @@
   );
 </script>
 
-<Group bind:ref class={cls(layerClass('grid'), classes.root, className)} {...restProps}>
+<Group bind:ref class={cls('lc-grid', classes.root, className)} {...restProps}>
   {#if x}
-    {@const splineProps = extractLayerProps(x, 'grid-x-line')}
+    {@const splineProps = extractLayerProps(x, 'lc-grid-x-line')}
 
-    <Group {transitionIn} {transitionInParams} class={layerClass('grid-x')}>
+    <Group {transitionIn} {transitionInParams} class="lc-grid-x">
       {#each xTickVals as x (x)}
         {#if ctx.radial}
           {@const [x1, y1] = pointRadial(ctx.xScale(x), ctx.yRange[0])}
@@ -165,94 +187,75 @@
             {y1}
             {x2}
             {y2}
+            {stroke}
             motion={tweenConfig}
             {...splineProps}
-            class={cls(
-              layerClass('grid-x-radial-line'),
-              'stroke-surface-content/10',
-              classes.line,
-              splineProps?.class
-            )}
+            class={cls('lc-grid-x-radial-line', classes.line, splineProps?.class)}
           />
         {:else}
           <Rule
             {x}
             xOffset={xBandOffset}
+            {stroke}
             {motion}
             {...splineProps}
-            class={cls(
-              layerClass('grid-x-rule'),
-              'stroke-surface-content/10',
-              classes.line,
-              splineProps?.class
-            )}
+            class={cls('lc-grid-x-rule', classes.line, splineProps?.class)}
           />
         {/if}
       {/each}
 
       <!-- Add extra rule after last band -->
       {#if isScaleBand(ctx.xScale) && bandAlign === 'between' && !ctx.radial && xTickVals.length}
+        {@const x = ctx.xScale(xTickVals[xTickVals.length - 1])! + ctx.xScale.step() + xBandOffset}
         <Rule
           x={xTickVals[xTickVals.length - 1]}
           xOffset={ctx.xScale.step() + xBandOffset}
+          {stroke}
           {motion}
           {...splineProps}
-          class={cls(
-            layerClass('grid-x-end-rule'),
-            'stroke-surface-content/10',
-            classes.line,
-            splineProps?.class
-          )}
+          class={cls('lc-grid-x-end-rule', classes.line, splineProps?.class)}
         />
       {/if}
     </Group>
   {/if}
 
   {#if y}
-    {@const splineProps = extractLayerProps(y, 'grid-y-line')}
-    <Group {transitionIn} {transitionInParams} class={layerClass('grid-y')}>
+    {@const splineProps = extractLayerProps(y, 'lc-grid-y-line')}
+    <Group {transitionIn} {transitionInParams} class="lc-grid-y">
       {#each yTickVals as y (y)}
         {#if ctx.radial}
           {#if radialY === 'circle'}
             <Circle
               r={ctx.yScale(y) + yBandOffset}
+              {stroke}
               {motion}
               {...splineProps}
-              class={cls(
-                layerClass('grid-y-radial-circle'),
-                'fill-none stroke-surface-content/10',
-                classes.line,
-                splineProps?.class
-              )}
+              class={cls('lc-grid-y-radial-circle', classes.line, splineProps?.class)}
             />
           {:else}
-            <Spline
-              data={xTickVals.map((x) => ({ x, y }))}
-              x="x"
-              y="y"
-              motion={tweenConfig}
-              curve={curveLinearClosed}
-              {...splineProps}
-              class={cls(
-                layerClass('grid-y-radial-line'),
-                'stroke-surface-content/10',
-                classes.line,
-                splineProps?.class
-              )}
-            />
+            {#await import('./Spline.svelte') then { default: Spline }}
+              <Spline
+                data={xTickVals.map((x) => ({ x, y }))}
+                x="x"
+                y="y"
+                {stroke}
+                motion={tweenConfig}
+                curve={curveLinearClosed}
+                {...splineProps}
+                class={cls('lc-grid-y-radial-line', classes.line, splineProps?.class)}
+              />
+            {/await}
           {/if}
         {:else}
-          <Rule
-            {y}
-            yOffset={yBandOffset}
+          <Line
+            x1={ctx.xRange[0]}
+            y1={ctx.yScale(y) + yBandOffset}
+            x2={ctx.xRange[1]}
+            y2={ctx.yScale(y) + yBandOffset}
+            {stroke}
             {motion}
             {...splineProps}
-            class={cls(
-              layerClass('grid-y-rule'),
-              'stroke-surface-content/10',
-              classes.line,
-              splineProps?.class
-            )}
+            class={cls('lc-grid-y-rule', classes.line, splineProps?.class)}
           />
         {/if}
       {/each}
@@ -262,30 +265,56 @@
         {#if ctx.radial}
           <Circle
             r={ctx.yScale(yTickVals[yTickVals.length - 1])! + ctx.yScale.step() + yBandOffset}
+            {stroke}
             {motion}
             {...splineProps}
-            class={cls(
-              layerClass('grid-y-radial-circle'),
-              'fill-none stroke-surface-content/10',
-              classes.line,
-              splineProps?.class
-            )}
+            class={cls('lc-grid-y-radial-circle', classes.line, splineProps?.class)}
           />
         {:else}
-          <Rule
-            y={yTickVals[yTickVals.length - 1]}
-            yOffset={ctx.yScale.step() + yBandOffset}
+          {@const y =
+            ctx.yScale(yTickVals[yTickVals.length - 1])! + ctx.yScale.step() + yBandOffset}
+          <Line
+            x1={ctx.xRange[0]}
+            y1={y}
+            x2={ctx.xRange[1]}
+            y2={y}
+            {stroke}
             {motion}
             {...splineProps}
-            class={cls(
-              layerClass('grid-y-end-rule'),
-              'stroke-surface-content/10',
-              classes.line,
-              splineProps?.class
-            )}
+            class={cls('lc-grid-y-end-rule', classes.line, splineProps?.class)}
           />
         {/if}
       {/if}
     </Group>
   {/if}
 </Group>
+
+<style>
+  @layer components {
+    :global(
+      :where(
+        .lc-grid-x-rule,
+        .lc-grid-x-end-rule,
+        .lc-grid-x-radial-line,
+        .lc-grid-y-rule,
+        .lc-grid-y-end-rule,
+        .lc-grid-y-radial-line
+      )
+    ) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 10%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-grid-y-radial-circle)) {
+      --fill-color: none;
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 10%,
+        transparent
+      );
+    }
+  }
+</style>

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

@@ -1,19 +1,29 @@
 import type { Transition, TransitionParams, Without } from '../utils/types.js';
 import { type MotionProp } from '../utils/motion.svelte.js';
 import type { SVGAttributes } from 'svelte/elements';
+/** Props forwarded onto the underlying grid line (`<Line>`, `<Circle>`, or `<Spline>`). */
+type GridLineProps = Pick<SVGAttributes<SVGElement>, 'class' | 'style'> & {
+    stroke?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    /** Dashed-line pattern. See `Line.dashArray`. */
+    dashArray?: number | number[] | string;
+};
 export type GridPropsWithoutHTML<In extends Transition = Transition> = {
     /**
-     * Draw a x-axis lines
+     * Draw a x-axis lines. Pass props (class, style, stroke, strokeWidth,
+     * opacity, dashArray) to forward onto the underlying line.
      *
      * @default false
      */
-    x?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    x?: boolean | GridLineProps;
     /**
-     * Draw a y-axis lines
+     * Draw a y-axis lines. Pass props (class, style, stroke, strokeWidth,
+     * opacity, dashArray) to forward onto the underlying line.
      *
      * @default false
      */
-    y?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    y?: boolean | GridLineProps;
     /**
      * Control the number of x-axis ticks
      */
@@ -36,6 +46,11 @@ export type GridPropsWithoutHTML<In extends Transition = Transition> = {
      * @default 'circle'
      */
     radialY?: 'circle' | 'linear';
+    /**
+     * Stroke color for grid lines.
+     * Useful for server-side rendering where CSS variables are not available.
+     */
+    stroke?: string;
     /**
      * Classes to apply to the rendered elements.
      *