layerchart 2.0.0-next.6 → 2.0.0-next.61

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

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

package/dist/components/Ellipse/Ellipse.canvas.svelte

@@ -0,0 +1,113 @@
+<script lang="ts" module>
+  export type {
+    EllipseProps,
+    EllipsePropsWithoutHTML,
+  } from './Ellipse.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { merge } from '@layerstack/utils';
+  import { renderEllipse, type ComputedStylesOptions } from '../../utils/canvas.js';
+  import { resolveColorProp, resolveStyleProp } from '../../utils/dataProp.js';
+  import { createKey } from '../../utils/key.svelte.js';
+  import { EllipseState, ellipseMarkInfo, type EllipseProps } from './Ellipse.shared.svelte.js';
+
+  let { ...rest }: EllipseProps = $props();
+
+  const c = new EllipseState(() => rest as EllipseProps);
+
+  function getStyleOptions(
+    styleOverrides: ComputedStylesOptions | undefined,
+    itemFill?: string | undefined,
+    itemStroke?: string | undefined,
+    itemFillOpacity?: number | undefined,
+    itemStrokeWidth?: number | undefined,
+    itemOpacity?: number | undefined,
+    itemClass?: string | undefined
+  ) {
+    return styleOverrides
+      ? merge(
+          { styles: { strokeWidth: itemStrokeWidth ?? c.staticStrokeWidth } },
+          styleOverrides
+        )
+      : {
+          // Use raw `rest.fill` / `rest.stroke` (not `staticFill`) so canvas
+          // accepts non-string values like `CanvasPattern` / `CanvasGradient`.
+          styles: {
+            fill: itemFill ?? (rest.fill as any),
+            fillOpacity: itemFillOpacity ?? c.staticFillOpacity,
+            stroke: itemStroke ?? (rest.stroke as any),
+            strokeWidth: itemStrokeWidth ?? c.staticStrokeWidth,
+            opacity: itemOpacity ?? c.staticOpacity,
+          },
+          classes: cls('lc-ellipse', itemClass ?? c.staticClassName),
+        };
+  }
+
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    if (c.dataMode) {
+      for (const item of c.resolvedItems) {
+        const resolvedFill = resolveColorProp(rest.fill, item.d, c.chartCtx.cScale);
+        const resolvedStroke = resolveColorProp(rest.stroke, item.d, c.chartCtx.cScale);
+        const resolvedFillOpacity = resolveStyleProp(rest.fillOpacity, item.d);
+        const resolvedStrokeWidth = resolveStyleProp(rest.strokeWidth, item.d);
+        const resolvedOpacity = resolveStyleProp(rest.opacity, item.d);
+        const resolvedClass = resolveStyleProp(rest.class, item.d);
+        const styleOpts = getStyleOptions(
+          styleOverrides,
+          resolvedFill,
+          resolvedStroke,
+          resolvedFillOpacity,
+          resolvedStrokeWidth,
+          resolvedOpacity,
+          resolvedClass
+        );
+        renderEllipse(ctx, item, styleOpts);
+      }
+    } else {
+      const styleOpts = getStyleOptions(styleOverrides);
+      renderEllipse(
+        ctx,
+        { cx: c.motionCx, cy: c.motionCy, rx: c.motionRx, ry: c.motionRy },
+        styleOpts
+      );
+    }
+  }
+
+  const fillKey = createKey(() => rest.fill);
+  const strokeKey = createKey(() => rest.stroke);
+
+  c.chartCtx.registerComponent({
+    name: 'Ellipse',
+    kind: 'mark',
+    markInfo: () => ellipseMarkInfo(rest as EllipseProps, c.dataMode),
+    canvasRender: {
+      render,
+      events: {
+        click: (rest as any).onclick,
+        pointerdown: (rest as any).onpointerdown,
+        pointerenter: (rest as any).onpointerenter,
+        pointermove: (rest as any).onpointermove,
+        pointerleave: (rest as any).onpointerleave,
+      },
+      deps: () => [
+        c.dataMode,
+        c.dataMode ? c.resolvedItems : null,
+        c.motionCx,
+        c.motionCy,
+        c.motionRx,
+        c.motionRy,
+        fillKey.current,
+        rest.fillOpacity,
+        strokeKey.current,
+        rest.strokeWidth,
+        rest.opacity,
+        rest.class,
+      ],
+    },
+  });
+</script>

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

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

package/dist/components/Ellipse/Ellipse.html.svelte

@@ -0,0 +1,92 @@
+<script lang="ts" module>
+  export type {
+    EllipseProps,
+    EllipsePropsWithoutHTML,
+  } from './Ellipse.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { resolveColorProp, resolveStyleProp } from '../../utils/dataProp.js';
+  import { EllipseState, ellipseMarkInfo, type EllipseProps } from './Ellipse.shared.svelte.js';
+
+  let { ...rest }: EllipseProps = $props();
+
+  const c = new EllipseState(() => rest as EllipseProps);
+
+  c.chartCtx.registerComponent({
+    name: 'Ellipse',
+    kind: 'mark',
+    markInfo: () => ellipseMarkInfo(rest as EllipseProps, c.dataMode),
+  });
+</script>
+
+{#if c.dataMode}
+  {#each c.resolvedItems as item (item.key)}
+    {@const resolvedFill = resolveColorProp(rest.fill, item.d, c.chartCtx.cScale)}
+    {@const resolvedStroke = resolveColorProp(rest.stroke, item.d, c.chartCtx.cScale)}
+    {@const resolvedStrokeWidth = resolveStyleProp(rest.strokeWidth, item.d)}
+    {@const resolvedOpacity = resolveStyleProp(rest.opacity, item.d)}
+    {@const resolvedClass = resolveStyleProp(rest.class, item.d)}
+    {@const resolvedBorderWidth =
+      resolvedStrokeWidth != null
+        ? `${resolvedStrokeWidth}px`
+        : resolvedStroke != null
+          ? '1px'
+          : undefined}
+    <div
+      {...rest as any}
+      style:position="absolute"
+      style:left="{item.cx}px"
+      style:top="{item.cy}px"
+      style:width="{item.rx * 2}px"
+      style:height="{item.ry * 2}px"
+      style:border-radius="50%"
+      style:background={resolvedFill}
+      style:background-origin="border-box"
+      style:opacity={resolvedOpacity}
+      style:border-width={resolvedBorderWidth}
+      style:border-color={resolvedStroke}
+      style:border-style="solid"
+      style:transform="translate(-50%, -50%)"
+      class={cls('lc-ellipse', resolvedClass)}
+    ></div>
+  {/each}
+{:else}
+  <div
+    {...rest as any}
+    style:position="absolute"
+    style:left="{c.motionCx}px"
+    style:top="{c.motionCy}px"
+    style:width="{c.motionRx * 2}px"
+    style:height="{c.motionRy * 2}px"
+    style:border-radius="50%"
+    style:background={c.staticFill}
+    style:background-origin="border-box"
+    style:opacity={c.staticOpacity}
+    style:border-width={c.staticBorderWidth}
+    style:border-color={c.staticStroke}
+    style:border-style="solid"
+    style:transform="translate(-50%, -50%)"
+    class={cls('lc-ellipse', c.staticClassName)}
+  ></div>
+{/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-ellipse)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    :global(:where(.lc-layout-html .lc-ellipse)) {
+      box-sizing: border-box;
+    }
+    :global(:where(.lc-layout-html .lc-ellipse):not([background])) {
+      background: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-ellipse):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

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

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

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

@@ -0,0 +1,70 @@
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+import type { DataProp, DataDrivenStyleProps } from '../../utils/dataProp.js';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type { GeoState } from '../../states/geo.svelte.js';
+export type EllipsePropsWithoutHTML = {
+    /** The center x position of the ellipse. @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. @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. @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. @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. */
+    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>;
+export declare function ellipseMarkInfo(props: EllipseProps, dataMode: boolean): {
+    data?: undefined;
+    x?: undefined;
+    y?: undefined;
+    color?: undefined;
+} | {
+    data: any[] | undefined;
+    x: string | undefined;
+    y: string | undefined;
+    color: string | undefined;
+};
+export declare class EllipseState {
+    #private;
+    chartCtx: ChartState;
+    geo: GeoState;
+    dataMode: boolean;
+    resolvedItems: {
+        d: any;
+        key: any;
+        cx: number;
+        cy: number;
+        rx: number;
+        ry: number;
+    }[];
+    get motionCx(): any;
+    get motionCy(): any;
+    get motionRx(): any;
+    get motionRy(): any;
+    staticFill: string | undefined;
+    staticFillOpacity: number | undefined;
+    staticStroke: string | undefined;
+    staticStrokeWidth: number | undefined;
+    staticOpacity: number | undefined;
+    staticClassName: string | undefined;
+    staticBorderWidth: string | undefined;
+    constructor(getProps: () => EllipseProps);
+}

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

@@ -0,0 +1,133 @@
+import { untrack } from 'svelte';
+import { hasAnyDataProp, resolveDataProp, resolveGeoDataPair, } from '../../utils/dataProp.js';
+import { chartDataArray } from '../../utils/common.js';
+import { createMotion, createDataMotionMap } from '../../utils/motion.svelte.js';
+import { getChartContext } from '../../contexts/chart.js';
+import { getGeoContext } from '../../contexts/geo.js';
+const defaultKey = (_, i) => i;
+export function ellipseMarkInfo(props, dataMode) {
+    if (!dataMode)
+        return {};
+    return {
+        data: props.data,
+        x: typeof props.cx === 'string' ? props.cx : undefined,
+        y: typeof props.cy === 'string' ? props.cy : undefined,
+        color: typeof props.fill === 'string'
+            ? props.fill
+            : typeof props.stroke === 'string'
+                ? props.stroke
+                : undefined,
+    };
+}
+export class EllipseState {
+    #getProps = () => ({});
+    chartCtx = getChartContext();
+    geo = getGeoContext();
+    dataMode = $derived(hasAnyDataProp(this.#getProps().cx, this.#getProps().cy, this.#getProps().rx, this.#getProps().ry));
+    #resolvedData = $derived(this.dataMode ? (this.#getProps().data ?? chartDataArray(this.chartCtx.data)) : []);
+    resolvedItems = $derived.by(() => {
+        if (!this.dataMode)
+            return [];
+        const props = this.#getProps();
+        const keyFn = props.key ?? defaultKey;
+        return this.#resolvedData.map((d, i) => {
+            const key = keyFn(d, i);
+            const resolved = this.#resolveEllipse(d);
+            const animated = this.#dataMotionMap?.get(key);
+            return {
+                d,
+                key,
+                cx: animated?.cx ?? resolved.cx,
+                cy: animated?.cy ?? resolved.cy,
+                rx: animated?.rx ?? resolved.rx,
+                ry: animated?.ry ?? resolved.ry,
+            };
+        });
+    });
+    #resolveEllipse(d) {
+        const props = this.#getProps();
+        if (this.geo.projection) {
+            const [projX, projY] = resolveGeoDataPair(props.cx, props.cy, d, this.geo.projection);
+            return {
+                cx: projX,
+                cy: projY,
+                rx: resolveDataProp(props.rx, d, this.chartCtx.rScale, typeof props.rx === 'number' ? props.rx : 1),
+                ry: resolveDataProp(props.ry, d, this.chartCtx.rScale, typeof props.ry === 'number' ? props.ry : 1),
+            };
+        }
+        return {
+            cx: resolveDataProp(props.cx, d, this.chartCtx.xScale, 0),
+            cy: resolveDataProp(props.cy, d, this.chartCtx.yScale, 0),
+            rx: resolveDataProp(props.rx, d, this.chartCtx.rScale, typeof props.rx === 'number' ? props.rx : 1),
+            ry: resolveDataProp(props.ry, d, this.chartCtx.rScale, typeof props.ry === 'number' ? props.ry : 1),
+        };
+    }
+    #dataMotionMap = null;
+    #motionCx;
+    #motionCy;
+    #motionRx;
+    #motionRy;
+    get motionCx() {
+        return this.#motionCx.current;
+    }
+    get motionCy() {
+        return this.#motionCy.current;
+    }
+    get motionRx() {
+        return this.#motionRx.current;
+    }
+    get motionRy() {
+        return this.#motionRy.current;
+    }
+    staticFill = $derived(typeof this.#getProps().fill === 'string' ? this.#getProps().fill : undefined);
+    staticFillOpacity = $derived(typeof this.#getProps().fillOpacity === 'number'
+        ? this.#getProps().fillOpacity
+        : undefined);
+    staticStroke = $derived(typeof this.#getProps().stroke === 'string' ? this.#getProps().stroke : undefined);
+    staticStrokeWidth = $derived(typeof this.#getProps().strokeWidth === 'number'
+        ? this.#getProps().strokeWidth
+        : undefined);
+    staticOpacity = $derived(typeof this.#getProps().opacity === 'number'
+        ? this.#getProps().opacity
+        : undefined);
+    staticClassName = $derived(typeof this.#getProps().class === 'string' ? this.#getProps().class : undefined);
+    staticBorderWidth = $derived.by(() => {
+        const props = this.#getProps();
+        if (typeof props.strokeWidth === 'number')
+            return `${props.strokeWidth}px`;
+        if (typeof props.stroke === 'string')
+            return '1px';
+        return undefined;
+    });
+    constructor(getProps) {
+        this.#getProps = getProps;
+        const initial = getProps();
+        const initialCx = initial.initialCx ?? (typeof initial.cx === 'number' ? initial.cx : 0);
+        const initialCy = initial.initialCy ?? (typeof initial.cy === 'number' ? initial.cy : 0);
+        const initialRx = initial.initialRx ?? (typeof initial.rx === 'number' ? initial.rx : 1);
+        const initialRy = initial.initialRy ?? (typeof initial.ry === 'number' ? initial.ry : 1);
+        this.#motionCx = createMotion(initialCx, () => (typeof getProps().cx === 'number' ? getProps().cx : 0), initial.motion);
+        this.#motionCy = createMotion(initialCy, () => (typeof getProps().cy === 'number' ? getProps().cy : 0), initial.motion);
+        this.#motionRx = createMotion(initialRx, () => (typeof getProps().rx === 'number' ? getProps().rx : 1), initial.motion);
+        this.#motionRy = createMotion(initialRy, () => (typeof getProps().ry === 'number' ? getProps().ry : 1), initial.motion);
+        this.#dataMotionMap = createDataMotionMap(initial.motion);
+        if (this.#dataMotionMap) {
+            const motionMap = this.#dataMotionMap;
+            $effect(() => {
+                if (!this.dataMode)
+                    return;
+                const props = getProps();
+                const keyFn = props.key ?? defaultKey;
+                const activeKeys = new Set();
+                for (let i = 0; i < this.#resolvedData.length; i++) {
+                    const d = this.#resolvedData[i];
+                    const key = keyFn(d, i);
+                    activeKeys.add(key);
+                    const resolved = this.#resolveEllipse(d);
+                    untrack(() => motionMap.update(key, resolved));
+                }
+                untrack(() => motionMap.cleanup(activeKeys));
+            });
+        }
+    }
+}

package/dist/components/Ellipse/Ellipse.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+  export type {
+    EllipseProps,
+    EllipsePropsWithoutHTML,
+  } from './Ellipse.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import EllipseSvg from './Ellipse.svg.svelte';
+  import EllipseCanvas from './Ellipse.canvas.svelte';
+  import EllipseHtml from './Ellipse.html.svelte';
+  import type { EllipseProps } from './Ellipse.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let { ref = $bindable(), ...rest }: EllipseProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <EllipseSvg bind:ref {...rest} />
+{:else if layerCtx === 'canvas'}
+  <EllipseCanvas {...rest} />
+{:else if layerCtx === 'html'}
+  <EllipseHtml {...rest} />
+{/if}

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

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

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

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

package/dist/components/Ellipse/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);
+        });
+    });
+});