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

package/dist/components/Density.svelte

@@ -0,0 +1,146 @@
+<script lang="ts" module>
+  import type { SVGAttributes } from 'svelte/elements';
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { Accessor } from '../utils/common.js';
+
+  export type DensityPropsWithoutHTML = {
+    /** Override chart data. Defaults to chart context data. */
+    data?: any[];
+    /** X accessor. Defaults to chart context x accessor. */
+    x?: Accessor;
+    /** Y accessor. Defaults to chart context y accessor. */
+    y?: Accessor;
+    /** Weight accessor for weighted density estimation. */
+    weight?: Accessor;
+    /** KDE bandwidth in pixels. @default 20 */
+    bandwidth?: number;
+    /** Number of contour thresholds. @default 20 */
+    thresholds?: number;
+  } & CommonStyleProps;
+
+  export type DensityProps = DensityPropsWithoutHTML &
+    Without<SVGAttributes<SVGGElement>, DensityPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { contourDensity } from 'd3-contour';
+  import { geoPath } from 'd3-geo';
+  import { scaleSequential } from 'd3-scale';
+  import { interpolateYlGnBu } from 'd3-scale-chromatic';
+  import { max } from 'd3-array';
+
+  import Group from './Group.svelte';
+  import Path from './Path.svelte';
+  import { accessor as resolveAccessor, chartDataArray } from '../utils/common.js';
+  import { getChartContext } from '../contexts/chart.js';
+  import { getGeoContext } from '../contexts/geo.js';
+
+  const ctx = getChartContext();
+  const geo = getGeoContext();
+
+  let {
+    data: dataProp,
+    x: xProp,
+    y: yProp,
+    weight: weightProp,
+    bandwidth = 20,
+    thresholds = 20,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    class: className,
+    ...restProps
+  }: DensityProps = $props();
+
+  ctx.registerComponent({
+    name: 'Density',
+    kind: 'composite-mark',
+  });
+
+  const xAccessor = $derived(xProp ? resolveAccessor(xProp) : ctx.x);
+  const yAccessor = $derived(yProp ? resolveAccessor(yProp) : ctx.y);
+  const weightAccessor = $derived(weightProp ? resolveAccessor(weightProp) : null);
+
+  const data = $derived(dataProp ?? chartDataArray(ctx.data));
+
+  // Compute density contours in pixel space
+  const contours = $derived.by(() => {
+    if (!data || data.length === 0 || !ctx.width || !ctx.height) return [];
+
+    const projection = geo.projection;
+
+    const density = contourDensity()
+      .x((d: any) => {
+        if (projection) {
+          const p = projection([xAccessor(d), yAccessor(d)]);
+          return p ? p[0] : 0;
+        }
+        return ctx.xScale(xAccessor(d));
+      })
+      .y((d: any) => {
+        if (projection) {
+          const p = projection([xAccessor(d), yAccessor(d)]);
+          return p ? p[1] : 0;
+        }
+        return ctx.yScale(yAccessor(d));
+      })
+      .size([ctx.width, ctx.height])
+      .bandwidth(bandwidth)
+      .thresholds(thresholds);
+
+    if (weightAccessor) {
+      density.weight((d: any) => weightAccessor(d));
+    }
+
+    // Filter out data that doesn't project (e.g. points outside projection bounds)
+    const filteredData = projection
+      ? data.filter((d: any) => projection([xAccessor(d), yAccessor(d)]) !== null)
+      : data;
+
+    return density(filteredData as any);
+  });
+
+  // Identity geoPath for pixel-coordinate contours
+  const pathGenerator = $derived(geoPath());
+
+  // Color scale: use chart's cScale (with auto-computed domain) or fall back to default
+  const colorScale = $derived.by(() => {
+    if (fill) return null;
+    const maxValue = max(contours, (d) => d.value) ?? 1;
+    if (ctx.cScale) {
+      return ctx.cScale.copy().domain([0, maxValue]);
+    }
+    return scaleSequential([0, maxValue], interpolateYlGnBu);
+  });
+
+  function getContourFill(contour: { value: number }) {
+    if (fill) return fill;
+    return colorScale ? String(colorScale(contour.value)) : 'steelblue';
+  }
+</script>
+
+{#if contours.length > 0}
+  <Group class="lc-density" {opacity}>
+    {#each contours as contour, i (i)}
+      <Path
+        pathData={pathGenerator(contour) ?? ''}
+        fill={getContourFill(contour)}
+        {fillOpacity}
+        {stroke}
+        {strokeWidth}
+        class={cls('lc-density-contour', className)}
+      />
+    {/each}
+  </Group>
+{/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-density-contour)) {
+      --stroke-color: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,21 @@
+import type { SVGAttributes } from 'svelte/elements';
+import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { Accessor } from '../utils/common.js';
+export type DensityPropsWithoutHTML = {
+    /** Override chart data. Defaults to chart context data. */
+    data?: any[];
+    /** X accessor. Defaults to chart context x accessor. */
+    x?: Accessor;
+    /** Y accessor. Defaults to chart context y accessor. */
+    y?: Accessor;
+    /** Weight accessor for weighted density estimation. */
+    weight?: Accessor;
+    /** KDE bandwidth in pixels. @default 20 */
+    bandwidth?: number;
+    /** Number of contour thresholds. @default 20 */
+    thresholds?: number;
+} & CommonStyleProps;
+export type DensityProps = DensityPropsWithoutHTML & Without<SVGAttributes<SVGGElement>, DensityPropsWithoutHTML>;
+declare const Density: import("svelte").Component<DensityProps, {}, "">;
+type Density = ReturnType<typeof Density>;
+export default Density;

package/dist/components/Ellipse.svelte

@@ -0,0 +1,485 @@
+<script lang="ts" module>
+  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>;
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { merge } from '@layerstack/utils';
+
+  import { untrack } from 'svelte';
+  import { getLayerContext } from '../contexts/layer.js';
+  import { getChartContext } from '../contexts/chart.js';
+  import { createMotion, createDataMotionMap, type MotionProp } from '../utils/motion.svelte.js';
+  import { renderEllipse, type ComputedStylesOptions } from '../utils/canvas.js';
+  import {
+    hasAnyDataProp,
+    resolveDataProp,
+    resolveColorProp,
+    resolveGeoDataPair,
+    resolveStyleProp,
+  } from '../utils/dataProp.js';
+  import { getGeoContext } from '../contexts/geo.js';
+  import { chartDataArray } from '../utils/common.js';
+  import type { SVGAttributes } from 'svelte/elements';
+  import { createKey } from '../utils/key.svelte.js';
+
+  let {
+    cx = 0,
+    initialCx: initialCxProp,
+    cy = 0,
+    initialCy: initialCyProp,
+    rx = 1,
+    initialRx: initialRxProp,
+    ry = 1,
+    initialRy: initialRyProp,
+    data: dataProp,
+    key: keyFn = (_: any, i: number) => i,
+    motion,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    class: className,
+    ref: refProp = $bindable(),
+    ...restProps
+  }: EllipseProps = $props();
+
+  // Data mode detection
+  const dataMode = $derived(hasAnyDataProp(cx, cy, rx, ry));
+
+  // Chart context
+  const chartCtx = getChartContext();
+  const geo = getGeoContext();
+
+  // Data to iterate over in data mode
+  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
+
+  // Resolve a single data item to pixel coordinates
+  function resolveEllipse(d: any) {
+    if (geo.projection) {
+      const [projX, projY] = resolveGeoDataPair(cx, cy, d, geo.projection);
+      return {
+        cx: projX,
+        cy: projY,
+        rx: resolveDataProp(rx, d, chartCtx.rScale, typeof rx === 'number' ? rx : 1),
+        ry: resolveDataProp(ry, d, chartCtx.rScale, typeof ry === 'number' ? ry : 1),
+      };
+    }
+    return {
+      cx: resolveDataProp(cx, d, chartCtx.xScale, 0),
+      cy: resolveDataProp(cy, d, chartCtx.yScale, 0),
+      rx: resolveDataProp(rx, d, chartCtx.rScale, typeof rx === 'number' ? rx : 1),
+      ry: resolveDataProp(ry, d, chartCtx.rScale, typeof ry === 'number' ? ry : 1),
+    };
+  }
+
+  // --- Data mode motion ---
+  const dataMotionMap = createDataMotionMap(motion);
+
+  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 = resolveEllipse(d);
+        untrack(() => dataMotionMap.update(key, resolved));
+      }
+      untrack(() => dataMotionMap.cleanup(activeKeys));
+    });
+  }
+
+  // Single source of truth: resolved values with animated overlay
+  const resolvedItems = $derived.by(() => {
+    if (!dataMode) return [];
+    return resolvedData.map((d, i) => {
+      const key = keyFn(d, i);
+      const resolved = resolveEllipse(d);
+      const animated = 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,
+      };
+    });
+  });
+
+  // --- Pixel mode ---
+  let ref = $state<SVGEllipseElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  const initialCx = initialCxProp ?? (typeof cx === 'number' ? cx : 0);
+  const initialCy = initialCyProp ?? (typeof cy === 'number' ? cy : 0);
+  const initialRx = initialRxProp ?? (typeof rx === 'number' ? rx : 1);
+  const initialRy = initialRyProp ?? (typeof ry === 'number' ? ry : 1);
+
+  const layerCtx = getLayerContext();
+
+  const motionCx = createMotion(initialCx, () => (typeof cx === 'number' ? cx : 0), motion);
+  const motionCy = createMotion(initialCy, () => (typeof cy === 'number' ? cy : 0), motion);
+  const motionRx = createMotion(initialRx, () => (typeof rx === 'number' ? rx : 1), motion);
+  const motionRy = createMotion(initialRy, () => (typeof ry === 'number' ? ry : 1), motion);
+
+  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 ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
+            },
+          },
+          styleOverrides
+        )
+      : {
+          styles: {
+            fill: itemFill ?? fill,
+            fillOpacity:
+              itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
+            stroke: itemStroke ?? stroke,
+            strokeWidth:
+              itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
+            opacity: itemOpacity ?? (typeof opacity === 'number' ? opacity : undefined),
+          },
+          classes: cls(
+            'lc-ellipse',
+            itemClass ?? (typeof className === 'string' ? className : undefined)
+          ),
+        };
+  }
+
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    if (dataMode) {
+      for (const item of resolvedItems) {
+        const resolvedFill = resolveColorProp(fill, item.d, chartCtx.cScale);
+        const resolvedStroke = resolveColorProp(stroke, item.d, chartCtx.cScale);
+        const resolvedFillOpacity = resolveStyleProp(fillOpacity, item.d);
+        const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d);
+        const resolvedOpacity = resolveStyleProp(opacity, item.d);
+        const resolvedClass = resolveStyleProp(className, item.d);
+        const styleOpts = getStyleOptions(
+          styleOverrides,
+          resolvedFill,
+          resolvedStroke,
+          resolvedFillOpacity,
+          resolvedStrokeWidth,
+          resolvedOpacity,
+          resolvedClass
+        );
+        renderEllipse(ctx, item, styleOpts);
+      }
+    } else {
+      const styleOpts = getStyleOptions(styleOverrides);
+      renderEllipse(
+        ctx,
+        {
+          cx: motionCx.current,
+          cy: motionCy.current,
+          rx: motionRx.current,
+          ry: motionRy.current,
+        },
+        styleOpts
+      );
+    }
+  }
+
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  const fillKey = layerCtx === 'canvas' ? createKey(() => fill) : undefined;
+  const strokeKey = layerCtx === 'canvas' ? createKey(() => stroke) : undefined;
+
+  const staticFill = $derived(typeof fill === 'string' ? fill : undefined);
+  const staticFillOpacity = $derived(typeof fillOpacity === 'number' ? fillOpacity : undefined);
+  const staticStroke = $derived(typeof stroke === 'string' ? stroke : undefined);
+  const staticStrokeWidth = $derived(typeof strokeWidth === 'number' ? strokeWidth : undefined);
+  const staticOpacity = $derived(typeof opacity === 'number' ? opacity : undefined);
+  const staticClassName = $derived(typeof className === 'string' ? className : undefined);
+  // Match SVG's implicit `stroke-width: 1` default: if `stroke` is set but
+  // `strokeWidth` is not, render a 1px border so HTML matches SVG/Canvas layers.
+  const staticBorderWidth = $derived(
+    typeof strokeWidth === 'number'
+      ? `${strokeWidth}px`
+      : typeof stroke === 'string'
+        ? '1px'
+        : undefined
+  );
+
+  chartCtx.registerComponent({
+    name: 'Ellipse',
+    kind: 'mark',
+    markInfo: () => {
+      if (!dataMode) return {};
+      return {
+        data: dataProp,
+        x: typeof cx === 'string' ? cx : undefined,
+        y: typeof cy === 'string' ? cy : undefined,
+        color: typeof fill === 'string' ? fill : typeof stroke === 'string' ? stroke : undefined,
+      };
+    },
+    canvasRender:
+      layerCtx === 'canvas'
+        ? {
+            render,
+            events: {
+              click: restProps.onclick,
+              pointerdown: restProps.onpointerdown,
+              pointerenter: restProps.onpointerenter,
+              pointermove: restProps.onpointermove,
+              pointerleave: restProps.onpointerleave,
+            },
+            deps: () => [
+              dataMode,
+              dataMode ? resolvedItems : null,
+              motionCx.current,
+              motionCy.current,
+              motionRx.current,
+              motionRy.current,
+              fillKey!.current,
+              fillOpacity,
+              strokeKey!.current,
+              strokeWidth,
+              opacity,
+              className,
+            ],
+          }
+        : undefined,
+  });
+</script>
+
+{#if layerCtx === 'svg'}
+  {#if dataMode}
+    {#each resolvedItems as item (item.key)}
+      {@const resolvedFill = resolveColorProp(fill, item.d, chartCtx.cScale)}
+      {@const resolvedStroke = resolveColorProp(stroke, item.d, chartCtx.cScale)}
+      {@const resolvedFillOpacity = resolveStyleProp(fillOpacity, item.d)}
+      {@const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d)}
+      {@const resolvedOpacity = resolveStyleProp(opacity, item.d)}
+      {@const resolvedClass = resolveStyleProp(className, item.d)}
+      <ellipse
+        cx={item.cx}
+        cy={item.cy}
+        rx={item.rx}
+        ry={item.ry}
+        fill={resolvedFill}
+        fill-opacity={resolvedFillOpacity}
+        stroke={resolvedStroke}
+        stroke-width={resolvedStrokeWidth}
+        opacity={resolvedOpacity}
+        class={cls('lc-ellipse', resolvedClass)}
+        {...restProps}
+      />
+    {/each}
+  {:else}
+    <ellipse
+      bind:this={ref}
+      cx={motionCx.current}
+      cy={motionCy.current}
+      rx={motionRx.current}
+      ry={motionRy.current}
+      fill={staticFill}
+      fill-opacity={staticFillOpacity}
+      stroke={staticStroke}
+      stroke-width={staticStrokeWidth}
+      opacity={staticOpacity}
+      class={cls('lc-ellipse', staticClassName)}
+      {...restProps}
+    />
+  {/if}
+{:else if layerCtx === 'html'}
+  {#if dataMode}
+    {#each resolvedItems as item (item.key)}
+      {@const resolvedFill = resolveColorProp(fill, item.d, chartCtx.cScale)}
+      {@const resolvedStroke = resolveColorProp(stroke, item.d, chartCtx.cScale)}
+      {@const resolvedFillOpacity = resolveStyleProp(fillOpacity, item.d)}
+      {@const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d)}
+      {@const resolvedOpacity = resolveStyleProp(opacity, item.d)}
+      {@const resolvedClass = resolveStyleProp(className, item.d)}
+      {@const resolvedBorderWidth =
+        resolvedStrokeWidth != null
+          ? `${resolvedStrokeWidth}px`
+          : resolvedStroke != null
+            ? '1px'
+            : undefined}
+      <div
+        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)}
+        {...restProps}
+      ></div>
+    {/each}
+  {:else}
+    <div
+      style:position="absolute"
+      style:left="{motionCx.current}px"
+      style:top="{motionCy.current}px"
+      style:width="{motionRx.current * 2}px"
+      style:height="{motionRy.current * 2}px"
+      style:border-radius="50%"
+      style:background={staticFill}
+      style:background-origin="border-box"
+      style:opacity={staticOpacity}
+      style:border-width={staticBorderWidth}
+      style:border-color={staticStroke}
+      style:border-style="solid"
+      style:transform="translate(-50%, -50%)"
+      class={cls('lc-ellipse', staticClassName)}
+      {...restProps}
+    ></div>
+  {/if}
+{/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-ellipse)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-ellipse, svg.lc-ellipse):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-ellipse, svg.lc-ellipse):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-ellipse)) {
+      /* Match SVG sizing (visual extent equals `rx * 2`×`ry * 2`, border on outer edge) */
+      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>