layerchart 2.0.0-next.46 → 2.0.0-next.48

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

@@ -0,0 +1,220 @@
+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 Image from './Image.svelte';
+describe('Image', () => {
+    describe('pixel mode', () => {
+        it('should render an image with pixel values', async () => {
+            render(TestHarness, {
+                component: Image,
+                componentProps: {
+                    href: 'https://example.com/image.png',
+                    x: 50,
+                    y: 50,
+                    width: 32,
+                    height: 32,
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+            expect(el.element()?.getAttribute('href')).toBe('https://example.com/image.png');
+            // Image is centered: x - width/2 = 50 - 16 = 34
+            expect(el.element()?.getAttribute('x')).toBe('34');
+            expect(el.element()?.getAttribute('y')).toBe('34');
+            expect(el.element()?.getAttribute('width')).toBe('32');
+            expect(el.element()?.getAttribute('height')).toBe('32');
+        });
+        it('should default width and height to 16', async () => {
+            render(TestHarness, {
+                component: Image,
+                componentProps: {
+                    href: 'https://example.com/image.png',
+                    x: 100,
+                    y: 100,
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+            expect(el.element()?.getAttribute('width')).toBe('16');
+            expect(el.element()?.getAttribute('height')).toBe('16');
+        });
+        it('should apply preserveAspectRatio', async () => {
+            render(TestHarness, {
+                component: Image,
+                componentProps: {
+                    href: 'https://example.com/image.png',
+                    x: 50,
+                    y: 50,
+                    preserveAspectRatio: 'xMidYMid slice',
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+            expect(el.element()?.getAttribute('preserveAspectRatio')).toBe('xMidYMid slice');
+        });
+        it('should apply circular clipping when r is set', async () => {
+            render(TestHarness, {
+                component: Image,
+                componentProps: {
+                    href: 'https://example.com/image.png',
+                    x: 50,
+                    y: 50,
+                    r: 20,
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+            // When r=20, width/height default to 2*r = 40
+            expect(el.element()?.getAttribute('width')).toBe('40');
+            expect(el.element()?.getAttribute('height')).toBe('40');
+            // Should have a clip-path attribute
+            expect(el.element()?.getAttribute('clip-path')).toMatch(/^url\(#image-clip-/);
+        });
+        it('should apply rotation', async () => {
+            render(TestHarness, {
+                component: Image,
+                componentProps: {
+                    href: 'https://example.com/image.png',
+                    x: 50,
+                    y: 50,
+                    rotate: 45,
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+            expect(el.element()?.getAttribute('transform')).toBe('rotate(45, 50, 50)');
+        });
+    });
+    describe('data mode', () => {
+        const data = [
+            { date: new Date('2024-01-01'), value: 20, imageUrl: 'https://example.com/a.png' },
+            { date: new Date('2024-02-01'), value: 40, imageUrl: 'https://example.com/b.png' },
+            { date: new Date('2024-03-01'), value: 60, imageUrl: 'https://example.com/c.png' },
+        ];
+        it('should render one image per data item with string accessors', async () => {
+            render(TestHarness, {
+                component: Image,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    href: 'imageUrl',
+                    x: 'date',
+                    y: 'value',
+                },
+            });
+            const images = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => images.length).toBe(3);
+        });
+        it('should render with function accessors', async () => {
+            render(TestHarness, {
+                component: Image,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    href: (d) => d.imageUrl,
+                    x: (d) => d.date,
+                    y: (d) => d.value,
+                },
+            });
+            const images = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => images.length).toBe(3);
+        });
+        it('should resolve data-driven href from data property', async () => {
+            render(TestHarness, {
+                component: Image,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    href: 'imageUrl',
+                    x: 'date',
+                    y: 'value',
+                },
+            });
+            const images = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => images.length).toBe(3);
+            expect(images[0].getAttribute('href')).toBe('https://example.com/a.png');
+            expect(images[1].getAttribute('href')).toBe('https://example.com/b.png');
+            expect(images[2].getAttribute('href')).toBe('https://example.com/c.png');
+        });
+        it('should pass literal URL through unchanged in data mode', async () => {
+            render(TestHarness, {
+                component: Image,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    href: 'https://example.com/constant.png',
+                    x: 'date',
+                    y: 'value',
+                },
+            });
+            const images = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => images.length).toBe(3);
+            // All images should have the same constant URL
+            expect(images[0].getAttribute('href')).toBe('https://example.com/constant.png');
+            expect(images[1].getAttribute('href')).toBe('https://example.com/constant.png');
+        });
+        it('should use explicit data prop over chart context data', async () => {
+            const explicitData = [
+                { date: new Date('2024-01-01'), value: 20, imageUrl: 'https://example.com/a.png' },
+            ];
+            render(TestHarness, {
+                component: Image,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    data: explicitData,
+                    href: 'imageUrl',
+                    x: 'date',
+                    y: 'value',
+                },
+            });
+            const images = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => images.length).toBe(1);
+        });
+        it('should apply circular clipping in data mode', async () => {
+            render(TestHarness, {
+                component: Image,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    href: 'imageUrl',
+                    x: 'date',
+                    y: 'value',
+                    r: 15,
+                },
+            });
+            const images = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => images.length).toBe(3);
+            // Each image should have a clip-path
+            expect(images[0].getAttribute('clip-path')).toMatch(/^url\(#image-clip-/);
+            // Width/height should default to 2*r = 30
+            expect(images[0].getAttribute('width')).toBe('30');
+            expect(images[0].getAttribute('height')).toBe('30');
+        });
+    });
+});

package/dist/components/Labels.svelte

@@ -35,6 +35,11 @@
      */
     y?: Accessor<T>;
 
+    /**
+     * Series key to use for accessor. Only applicable if `<Chart>` uses `series` and `x`/`y` are not set.
+     */
+    seriesKey?: string;
+
     /**
      * The placement of the label relative to the point
      * @default 'outside'
@@ -78,11 +83,15 @@
 
   const ctx = getChartContext();
 
+  // Mark as composite so child Points doesn't register
+  ctx.registerComponent({ name: 'Labels', kind: 'composite-mark' });
+
   let {
     data,
     value,
     x,
     y,
+    seriesKey,
     placement = 'outside',
     offset = placement === 'center' ? 0 : 4,
     format,
@@ -90,12 +99,27 @@
     children: childrenProp,
     class: className,
     fill,
+    opacity,
     ...restProps
   }: LabelsProps<TData> = $props();
 
+  // TODO: Should we let `Points` handle opacity for children snippet as well?
+  let series = $derived(ctx.series.series.find((s) => s.key === seriesKey));
+  let derivedOpacity = $derived(
+    opacity ??
+      (series?.key == null ||
+      ctx.series.visibleSeries.length <= 1 ||
+      ctx.series.isHighlighted(series.key, true)
+        ? 1
+        : 0.1)
+  );
+
   function getTextProps(point: Point): ComponentProps<typeof Text> {
-    // Used for positioning
+    // Used for positioning direction.
+    // For array accessors (edgeIndex defined), use edge position: 0 = start/low, 1 = end/high
     const pointValue = isScaleBand(ctx.yScale) ? point.xValue : point.yValue;
+    const isLowEdge =
+      point.edgeIndex != null ? point.edgeIndex === 0 : pointValue < 0;
 
     // extract the true fill value from `fill` which could be an
     // accessor function or string/undefined
@@ -120,7 +144,7 @@
 
     if (isScaleBand(ctx.yScale)) {
       // Position label left/right on horizontal bars
-      if (pointValue < 0) {
+      if (isLowEdge) {
         // left
         return {
           value: formattedValue,
@@ -145,7 +169,7 @@
       }
     } else {
       // Position label top/bottom on vertical bars
-      if (pointValue < 0) {
+      if (isLowEdge) {
         // bottom
         return {
           value: formattedValue,
@@ -174,8 +198,8 @@
   }
 </script>
 
-<Group class="lc-labels-g">
-  <Points {data} {x} {y}>
+<Group class="lc-labels-g" opacity={derivedOpacity as number}>
+  <Points {data} {x} {y} {seriesKey}>
     {#snippet children({ points })}
       {#each points as point, i (key(point.data, i))}
         {@const textProps = extractLayerProps(getTextProps(point), 'lc-labels-text')}

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

@@ -28,6 +28,10 @@ export type LabelsPropsWithoutHTML<T = any> = {
      * Override `y` accessor from Chart context
      */
     y?: Accessor<T>;
+    /**
+     * Series key to use for accessor. Only applicable if `<Chart>` uses `series` and `x`/`y` are not set.
+     */
+    seriesKey?: string;
     /**
      * The placement of the label relative to the point
      * @default 'outside'

package/dist/components/Legend.svelte

@@ -103,7 +103,15 @@
      */
     ref?: HTMLElement;
 
-    children?: Snippet<[{ values: any[]; scale: AnyScale | null }]>;
+    children?: Snippet<
+      [
+        {
+          values: any[];
+          scale: AnyScale | null;
+          seriesItems: Array<{ key: string; label: string; color: string }> | null;
+        },
+      ]
+    >;
   };
 
   export type LegendProps = LegendPropsWithoutHTML &
@@ -136,11 +144,11 @@
     tickLength: tickLengthProp = 4,
     placement,
     orientation = 'horizontal',
-    onclick,
-    onpointerenter,
-    onpointerleave,
-    variant = 'ramp',
-    selected = [],
+    onclick: onclickProp,
+    onpointerenter: onpointerenterProp,
+    onpointerleave: onpointerleaveProp,
+    variant: variantProp,
+    selected: selectedProp,
     classes = {},
     ref: refProp = $bindable(),
     class: className,
@@ -155,7 +163,43 @@
 
   const ctx = getChartContext();
 
-  const scale = $derived(scaleProp ?? ctx.cScale);
+  // Check if we should use series-based legend (multiple series with colors defined)
+  const hasSeriesWithColors = $derived.by(() => {
+    if (!ctx.series) return false;
+    const allSeries = ctx.series.series ?? [];
+    // Check if we have multiple series OR a non-default series with colors
+    return allSeries.length > 0 && !ctx.series.isDefaultSeries && allSeries.some((s) => s.color);
+  });
+
+  // Use series-based legend if we have series with colors, otherwise use scale
+  const scale = $derived(hasSeriesWithColors ? null : (scaleProp ?? ctx.cScale));
+
+  // Create series items for series-based legend
+  const seriesItems = $derived.by(() => {
+    if (!hasSeriesWithColors || !ctx.series) return null;
+
+    // Get ALL series (not just visible) so legend items remain visible when deselected
+    const allSeries = ctx.series.series ?? [];
+    if (allSeries.length === 0) return null;
+
+    return allSeries
+      .filter((s) => s && s.key) // Filter out any invalid series
+      .map((s) => {
+        // Get label - prefer explicit label, then key
+        let label = s.label ?? s.key;
+
+        // If label is somehow not a string, convert it to string or use key
+        if (typeof label !== 'string') {
+          label = String(s.key);
+        }
+
+        return {
+          key: s.key,
+          label,
+          color: s.color ?? 'currentColor',
+        };
+      });
+  });
 
   type ScaleConfig = {
     xScale: AnyScale | undefined;
@@ -297,6 +341,44 @@
       };
     }
   });
+
+  const variant = $derived(variantProp ?? (seriesItems ? 'swatches' : 'ramp'));
+  const selected = $derived(selectedProp ?? ctx.series?.selectedKeys?.current ?? []);
+
+  const swatchItems = $derived.by(() => {
+    if (seriesItems) {
+      // Series-based legend items
+      return seriesItems.map((series) => ({
+        value: series.key,
+        label: series.label,
+        color: series.color,
+        onclick: (e: MouseEvent) => ctx.series?.selectedKeys?.toggle?.(series.key),
+        onpointerenter: (e: MouseEvent) => {
+          ctx.series!.highlightKey = series.key;
+        },
+        onpointerleave: (e: MouseEvent) => {
+          ctx.series!.highlightKey = null;
+        },
+        selected: selected.length === 0 || selected.includes(series.key),
+      }));
+    } else {
+      // Scale-based legend items
+      const tickValues = scaleConfig.tickValues ?? scaleConfig.xScale?.ticks?.(ticks) ?? [];
+      return tickValues.map((tick) => ({
+        value: tick,
+        label: tickFormatProp ? format(tick, asAny(tickFormatProp)) : tick,
+        color: scale?.(tick) ?? '',
+        onclick: (e: MouseEvent) => ctx.series?.selectedKeys?.toggle?.(tick),
+        onpointerenter: (e: MouseEvent) => {
+          ctx.series!.highlightKey = tick;
+        },
+        onpointerleave: (e: MouseEvent) => {
+          ctx.series!.highlightKey = null;
+        },
+        selected: selected.length === 0 || selected.includes(tick),
+      }));
+    }
+  });
 </script>
 
 <div
@@ -312,6 +394,7 @@
     {@render children({
       values: scaleConfig.tickValues ?? scaleConfig.xScale?.ticks?.(ticks) ?? [],
       scale,
+      seriesItems,
     })}
   {:else if variant === 'ramp'}
     <svg
@@ -362,20 +445,20 @@
     </svg>
   {:else if variant === 'swatches'}
     <div class={cls('lc-legend-swatch-group', classes.items)} data-orientation={orientation}>
-      {#each scaleConfig.tickValues ?? scaleConfig.xScale?.ticks?.(ticks) ?? [] as tick}
-        {@const color = scale?.(tick) ?? ''}
-        {@const item = { value: tick, color }}
+      {#each swatchItems as item}
         <button
           class={cls('lc-legend-swatch-button', resolveMaybeFn(classes?.item, item))}
-          style:opacity={selected.length === 0 || selected.includes(tick) ? 1 : 0.3}
-          onclick={(e) => onclick?.(e, item)}
-          onpointerenter={(e) => onpointerenter?.(e, item)}
-          onpointerleave={(e) => onpointerleave?.(e, item)}
+          style:opacity={selected.length === 0 || selected.includes(item.value) ? 1 : 0.3}
+          onclick={(e) => onclickProp?.(e, item) ?? item.onclick?.(e)}
+          onpointerenter={(e) => onpointerenterProp?.(e, item) ?? item.onpointerenter?.(e)}
+          onpointerleave={(e) => onpointerleaveProp?.(e, item) ?? item.onpointerleave?.(e)}
         >
-          <div class={cls('lc-legend-swatch', classes.swatch)} style:background-color={color}></div>
+          <div
+            class={cls('lc-legend-swatch', classes.swatch)}
+            style:background-color={item.color}
+          ></div>
           <div class={cls('lc-legend-swatch-label', classes.label)}>
-            <!-- @ts-expect-error - improve types -->
-            {tickFormatProp ? format(tick, asAny(tickFormatProp)) : tick}
+            {item.label}
           </div>
         </button>
       {/each}

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

@@ -87,10 +87,17 @@ export type LegendPropsWithoutHTML = {
      * @bindable
      */
     ref?: HTMLElement;
-    children?: Snippet<[{
-        values: any[];
-        scale: AnyScale | null;
-    }]>;
+    children?: Snippet<[
+        {
+            values: any[];
+            scale: AnyScale | null;
+            seriesItems: Array<{
+                key: string;
+                label: string;
+                color: string;
+            }> | null;
+        }
+    ]>;
 };
 export type LegendProps = LegendPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, LegendPropsWithoutHTML>;
 import type { HTMLAttributes } from 'svelte/elements';