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

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

@@ -0,0 +1,141 @@
+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 Circle from './Circle.svelte';
+describe('Circle', () => {
+    describe('pixel mode', () => {
+        it('should render a circle with pixel values', async () => {
+            render(TestHarness, {
+                component: Circle,
+                componentProps: {
+                    cx: 50,
+                    cy: 50,
+                    r: 10,
+                    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('r')).toBe('10');
+        });
+    });
+    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 circle per data item with string accessors', async () => {
+            render(TestHarness, {
+                component: Circle,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    r: 5,
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(3);
+        });
+        it('should render with function accessors', async () => {
+            render(TestHarness, {
+                component: Circle,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    cx: (d) => d.date,
+                    cy: (d) => d.value,
+                    r: 5,
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.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: Circle,
+                chartProps: {
+                    data: colorData,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                    c: 'category',
+                    cRange: ['steelblue', 'coral'],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    r: 5,
+                    fill: 'category',
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(3);
+            // First and third items have category 'A' → steelblue
+            expect(circles[0].getAttribute('fill')).toBe('steelblue');
+            expect(circles[2].getAttribute('fill')).toBe('steelblue');
+            // Second item has category 'B' → coral
+            expect(circles[1].getAttribute('fill')).toBe('coral');
+        });
+        it('should pass literal CSS colors through unchanged in data mode', async () => {
+            render(TestHarness, {
+                component: Circle,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    r: 5,
+                    fill: 'red',
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(3);
+            // 'red' is not a data property, so it's used as-is
+            expect(circles[0].getAttribute('fill')).toBe('red');
+            expect(circles[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: Circle,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    data: explicitData,
+                    cx: 'date',
+                    cy: 'value',
+                    r: 5,
+                },
+            });
+            const circles = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => circles.length).toBe(1);
+        });
+    });
+});

package/dist/components/CircleClipPath.svelte

@@ -36,6 +36,13 @@
      */
     disabled?: boolean;
 
+    /**
+     * Invert the clip — content renders *outside* the circle.
+     *
+     * @default false
+     */
+    invert?: boolean;
+
     /**
      * A bindable reference to the underlying `<circle>` element'
      *
@@ -53,9 +60,7 @@
 </script>
 
 <script lang="ts">
-  import Circle from './Circle.svelte';
   import { createId } from '../utils/createId.js';
-  import { extractLayerProps } from '../utils/attributes.js';
 
   const uid = $props.id();
 
@@ -64,22 +69,15 @@
     cx = 0,
     cy = 0,
     r,
-    motion,
     disabled = false,
-    ref: refProp = $bindable(),
+    invert = false,
     children,
-    ...restProps
   }: CircleClipPathPropsWithoutHTML = $props();
 
-  let ref = $state<SVGCircleElement>();
-
-  $effect.pre(() => {
-    refProp = ref;
-  });
+  // Two 180° arcs produce a full circle that Path2D / `clip-path: path()` accept.
+  const path = $derived(
+    `M${cx - r},${cy} a${r},${r} 0 1,0 ${2 * r},0 a${r},${r} 0 1,0 ${-2 * r},0 Z`
+  );
 </script>
 
-<ClipPath {id} {disabled} {children}>
-  {#snippet clip()}
-    <Circle {cx} {cy} {r} {motion} {...extractLayerProps(restProps, 'clip-path-circle')} bind:ref />
-  {/snippet}
-</ClipPath>
+<ClipPath {id} {disabled} {invert} {children} {path} />

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

@@ -29,6 +29,12 @@ export type CircleClipPathPropsWithoutHTML = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Invert the clip — content renders *outside* the circle.
+     *
+     * @default false
+     */
+    invert?: boolean;
     /**
      * A bindable reference to the underlying `<circle>` element'
      *
@@ -41,6 +47,6 @@ export type CircleClipPathPropsWithoutHTML = {
     children?: ClipPathPropsWithoutHTML['children'];
     motion?: MotionProp;
 };
-declare const CircleClipPath: import("svelte").Component<CircleClipPathPropsWithoutHTML, {}, "ref">;
+declare const CircleClipPath: import("svelte").Component<CircleClipPathPropsWithoutHTML, {}, "">;
 type CircleClipPath = ReturnType<typeof CircleClipPath>;
 export default CircleClipPath;

package/dist/components/CircleLegend.svelte

@@ -0,0 +1,389 @@
+<script lang="ts" module>
+  import type { Placement } from './types.js';
+  import { asAny, type Without } from '../utils/types.js';
+
+  export type CircleLegendPropsWithoutHTML = {
+    /**
+     * The scale to use for the legend. Defaults to the chart's `rScale`.
+     */
+    scale?: AnyScale;
+
+    /**
+     * The title of the legend.
+     *
+     * @default ''
+     */
+    title?: string;
+
+    /**
+     * The number of ticks to show.
+     *
+     * @default 4
+     */
+    ticks?: number;
+
+    /**
+     * Explicit tick values to show. Overrides `ticks`.
+     */
+    tickValues?: number[];
+
+    /**
+     * Format for the tick labels.
+     */
+    tickFormat?: FormatType | FormatConfig;
+
+    /**
+     * The font size of the tick labels.
+     *
+     * @default 10
+     */
+    tickFontSize?: number;
+
+    /**
+     * The font size of the title.
+     *
+     * @default 10
+     */
+    titleFontSize?: number;
+
+    /**
+     * Width reserved for the tick labels next to the circles.
+     *
+     * @default 40
+     */
+    labelWidth?: number;
+
+    /**
+     * Gap between the top of each circle and the leader line/label.
+     *
+     * @default 4
+     */
+    labelGap?: number;
+
+    /**
+     * Where to render the tick labels.
+     * - `'right'` / `'left'`: outside the circles with a leader line
+     * - `'inline'`: centered inside each circle, near the top
+     *
+     * @default 'right'
+     */
+    labelPlacement?: 'left' | 'right' | 'inline';
+
+    /**
+     * The placement of the legend.
+     */
+    placement?: Placement;
+
+    /**
+     * The fill color of the circles.
+     *
+     * @default 'none'
+     */
+    fill?: string;
+
+    /**
+     * The stroke color of the circles and leader lines.
+     *
+     * @default 'currentColor'
+     */
+    stroke?: string;
+
+    /**
+     * The stroke width of the circles.
+     *
+     * @default 1
+     */
+    strokeWidth?: number;
+
+    /**
+     * Value to indicate on the legend (e.g. the currently hovered data point).
+     * When set, a 50%-opacity filled circle is drawn at this value's radius.
+     * Defaults to auto-detecting from `ctx.tooltip.data` via the chart's
+     * radius accessor (`ctx.r`).
+     */
+    value?: number | null;
+
+    /**
+     * Classes to apply to the elements.
+     *
+     * @default {}
+     */
+    classes?: {
+      root?: string;
+      title?: string;
+      circle?: string;
+      tick?: string;
+      label?: string;
+    };
+
+    /**
+     * A bindable reference to the wrapping `<div>` element.
+     *
+     * @bindable
+     */
+    ref?: HTMLElement;
+  };
+
+  export type CircleLegendProps = CircleLegendPropsWithoutHTML &
+    Without<HTMLAttributes<HTMLElement>, CircleLegendPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { format, type FormatType, type FormatConfig } from '@layerstack/utils';
+
+  import { cls } from '@layerstack/tailwind';
+  import type { AnyScale } from '../utils/scales.svelte.js';
+  import { getChartContext } from '../contexts/chart.js';
+
+  let {
+    scale: scaleProp,
+    title = '',
+    ticks = 4,
+    tickValues: tickValuesProp,
+    tickFormat: tickFormatProp,
+    tickFontSize = 10,
+    titleFontSize = 10,
+    labelWidth = 40,
+    labelGap = 4,
+    labelPlacement = 'right',
+    placement,
+    fill = 'none',
+    stroke = 'currentColor',
+    strokeWidth = 1,
+    value: valueProp,
+    classes = {},
+    ref: refProp = $bindable(),
+    class: className,
+    ...restProps
+  }: CircleLegendProps = $props();
+
+  let ref = $state<HTMLElement>();
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  const ctx = getChartContext();
+
+  const scale = $derived(scaleProp ?? ctx.rScale);
+
+  const tickValues = $derived.by(() => {
+    if (tickValuesProp) return tickValuesProp;
+    if (!scale) return [] as number[];
+
+    // Prefer scale.ticks (continuous scales) and pick the largest `ticks` positive values
+    if (typeof (scale as any).ticks === 'function') {
+      const all = ((scale as any).ticks(ticks) as number[]).filter((v) => Number(scale(v)) > 0);
+      if (all.length >= 2) {
+        return all.slice(-ticks);
+      }
+    }
+
+    // Fallback: derive evenly spaced values from the domain extent
+    const domain = scale.domain() as number[];
+    const min = Number(domain[0]);
+    const max = Number(domain[domain.length - 1]);
+    const n = Math.max(2, ticks);
+    return Array.from({ length: n }, (_, i) => min + ((max - min) * (i + 1)) / n);
+  });
+
+  const items = $derived.by(() => {
+    if (!scale) return [] as Array<{ value: number; radius: number }>;
+    return tickValues
+      .map((value) => ({ value, radius: Number(scale(value)) }))
+      .filter((d) => Number.isFinite(d.radius) && d.radius > 0)
+      .sort((a, b) => b.radius - a.radius);
+  });
+
+  const maxRadius = $derived(items[0]?.radius ?? 0);
+
+  // Indicator for the currently hovered value. If `value` is explicitly
+  // provided, use it; otherwise fall back to `ctx.tooltip.data` piped through
+  // the chart's radius accessor (`ctx.r`).
+  const indicatorRadius = $derived.by(() => {
+    if (!scale) return null;
+    let value: any = valueProp;
+    if (value == null) {
+      const data = ctx.tooltip?.data;
+      if (data == null) return null;
+      value = ctx.r?.(data);
+    }
+    if (value == null) return null;
+    const r = Number(scale(value));
+    if (!Number.isFinite(r) || r <= 0) return null;
+    return r;
+  });
+
+  const padding = $derived(Math.ceil(strokeWidth / 2));
+  const titleHeight = $derived(title ? titleFontSize + 6 : 0);
+  const width = $derived(
+    labelPlacement === 'inline'
+      ? maxRadius * 2 + padding * 2
+      : maxRadius * 2 + padding * 2 + labelGap + labelWidth
+  );
+  const svgHeight = $derived(maxRadius * 2 + padding * 2 + titleHeight);
+  const cx = $derived(
+    labelPlacement === 'left' ? labelWidth + labelGap + maxRadius + padding : maxRadius + padding
+  );
+  const baseY = $derived(maxRadius * 2 + padding + titleHeight);
+
+  // Leader line / label x positions (only used for left/right placement)
+  const labelLineX = $derived(
+    labelPlacement === 'left' ? cx - maxRadius - labelGap : cx + maxRadius + labelGap
+  );
+  const labelTextX = $derived(
+    labelPlacement === 'inline' ? cx : labelPlacement === 'left' ? labelLineX - 2 : labelLineX + 2
+  );
+  const labelTextAnchor = $derived(
+    labelPlacement === 'inline' ? 'middle' : labelPlacement === 'left' ? 'end' : 'start'
+  );
+</script>
+
+<div
+  bind:this={ref}
+  {...restProps}
+  data-placement={placement}
+  class={cls('lc-circle-legend-container', className, classes.root)}
+>
+  {#if items.length}
+    <svg {width} height={svgHeight} viewBox="0 0 {width} {svgHeight}" class="lc-circle-legend-svg">
+      {#if title}
+        <text
+          x={cx}
+          y={titleFontSize}
+          text-anchor="middle"
+          style:font-size={titleFontSize}
+          class={cls('lc-circle-legend-title', classes.title)}
+        >
+          {title}
+        </text>
+      {/if}
+      <g class="lc-circle-legend-g">
+        {#if indicatorRadius != null}
+          <circle
+            {cx}
+            cy={baseY - indicatorRadius}
+            r={indicatorRadius}
+            fill={stroke}
+            fill-opacity="0.5"
+            class={cls('lc-circle-legend-indicator')}
+          />
+        {/if}
+        {#each items as item (item.value)}
+          <circle
+            {cx}
+            cy={baseY - item.radius}
+            r={item.radius}
+            {fill}
+            {stroke}
+            stroke-width={strokeWidth}
+            class={cls('lc-circle-legend-circle', classes.circle)}
+          />
+          {#if labelPlacement !== 'inline'}
+            <line
+              x1={cx}
+              y1={baseY - item.radius * 2}
+              x2={labelLineX}
+              y2={baseY - item.radius * 2}
+              {stroke}
+              stroke-dasharray="2,2"
+              class={cls('lc-circle-legend-tick', classes.tick)}
+            />
+          {/if}
+          <text
+            x={labelTextX}
+            y={labelPlacement === 'inline'
+              ? baseY - item.radius * 2 + tickFontSize
+              : baseY - item.radius * 2}
+            text-anchor={labelTextAnchor}
+            dominant-baseline={labelPlacement === 'inline' ? 'auto' : 'middle'}
+            style:font-size={tickFontSize}
+            class={cls('lc-circle-legend-label', classes.label)}
+          >
+            {tickFormatProp ? format(item.value, asAny(tickFormatProp)) : item.value}
+          </text>
+        {/each}
+      </g>
+    </svg>
+  {/if}
+</div>
+
+<style>
+  @layer components {
+    :where(.lc-circle-legend-container) {
+      display: inline-block;
+      z-index: 1;
+
+      &[data-placement] {
+        position: absolute;
+      }
+
+      &[data-placement='top-left'] {
+        top: 0;
+        left: 0;
+      }
+      &[data-placement='top'] {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      &[data-placement='top-right'] {
+        top: 0;
+        right: 0;
+      }
+      &[data-placement='left'] {
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+      }
+      &[data-placement='center'] {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+      &[data-placement='right'] {
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+      }
+      &[data-placement='bottom-left'] {
+        bottom: 0;
+        left: 0;
+      }
+      &[data-placement='bottom'] {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      &[data-placement='bottom-right'] {
+        bottom: 0;
+        right: 0;
+      }
+    }
+
+    :where(.lc-circle-legend-title) {
+      font-weight: 600;
+      fill: var(--color-surface-content, currentColor);
+    }
+
+    :where(.lc-circle-legend-svg) {
+      overflow: visible;
+    }
+
+    :where(.lc-circle-legend-label) {
+      fill: var(--color-surface-content, currentColor);
+    }
+
+    :where(.lc-circle-legend-tick) {
+      stroke: var(--color-surface-content, currentColor);
+    }
+
+    :where(.lc-circle-legend-circle) {
+      stroke: var(--color-surface-content, currentColor);
+    }
+
+    :where(.lc-circle-legend-indicator) {
+      fill: var(--color-surface-content, currentColor);
+    }
+  }
+</style>