layerchart 2.0.0-next.5 → 2.0.0-next.50

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

@@ -0,0 +1,127 @@
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../utils/types.js';
+import type { DataProp } from '../utils/dataProp.js';
+import { type MotionProp } from '../utils/motion.svelte.js';
+export type ImagePropsWithoutHTML = {
+    /**
+     * Image URL. In data mode, resolved per item (data property name or accessor).
+     * - `string`: literal URL, or if it matches a data property, the value is extracted.
+     * - `function(d)`: accessor called per data item, returns URL string.
+     */
+    href?: string | ((d: any) => string);
+    /**
+     * The horizontal position (center of image).
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via xScale
+     * - `function(d)`: accessor called per data item, result passed through xScale
+     *
+     * @default 0
+     */
+    x?: DataProp;
+    /**
+     * The initial x position (pixel mode only).
+     *
+     * @default x
+     */
+    initialX?: number;
+    /**
+     * The vertical position (center of image).
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via yScale
+     * - `function(d)`: accessor called per data item, result passed through yScale
+     *
+     * @default 0
+     */
+    y?: DataProp;
+    /**
+     * The initial y position (pixel mode only).
+     *
+     * @default y
+     */
+    initialY?: number;
+    /**
+     * The width of the image in pixels.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via scale
+     * - `function(d)`: accessor called per data item
+     *
+     * @default 16
+     */
+    width?: DataProp;
+    /**
+     * The initial width (pixel mode only).
+     *
+     * @default width
+     */
+    initialWidth?: number;
+    /**
+     * The height of the image in pixels.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via scale
+     * - `function(d)`: accessor called per data item
+     *
+     * @default 16
+     */
+    height?: DataProp;
+    /**
+     * The initial height (pixel mode only).
+     *
+     * @default height
+     */
+    initialHeight?: number;
+    /**
+     * Circular clip radius. When set, overrides width/height to 2*r.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via rScale
+     * - `function(d)`: accessor called per data item, result passed through rScale
+     */
+    r?: DataProp;
+    /**
+     * Rotation in degrees clockwise.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via scale
+     * - `function(d)`: accessor called per data item
+     */
+    rotate?: DataProp;
+    /**
+     * SVG preserveAspectRatio attribute.
+     *
+     * @default "xMidYMid meet"
+     */
+    preserveAspectRatio?: string;
+    /**
+     * CORS attribute for the image.
+     */
+    crossOrigin?: '' | 'anonymous' | 'use-credentials';
+    /**
+     * Image rendering quality.
+     */
+    imageRendering?: string;
+    /**
+     * The opacity of the image. (0 to 1)
+     */
+    opacity?: 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 `<image>` element (pixel mode only).
+     *
+     * @bindable
+     */
+    ref?: SVGImageElement;
+    /** Motion configuration (pixel mode only). */
+    motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
+};
+export type ImageProps = ImagePropsWithoutHTML & Without<SVGAttributes<SVGImageElement>, ImagePropsWithoutHTML>;
+declare const Image: import("svelte").Component<ImageProps, {}, "ref">;
+type Image = ReturnType<typeof Image>;
+export default Image;

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

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

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import Text, { type TextProps } from './Text.svelte';
   import { type ComponentProps, type Snippet } from 'svelte';
-  import { format as formatValue, type FormatType } from '@layerstack/utils';
+  import { format as formatValue, type FormatType, type FormatConfig } from '@layerstack/utils';
   import type { Without } from '../utils/types.js';
   import Points, { type Point } from './Points.svelte';
   import { accessor, type Accessor } from '../utils/common.js';
@@ -36,10 +36,16 @@
     y?: Accessor<T>;
 
     /**
-     * The placement of the label relative to the point
+     * 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.
+     * `smart` dynamically positions labels based on neighboring point values (peak, trough, rising, falling).
      * @default 'outside'
      */
-    placement?: 'inside' | 'outside' | 'center';
+    placement?: 'inside' | 'outside' | 'center' | 'smart';
 
     /**
      * The offset of the label from the point
@@ -51,7 +57,7 @@
     /**
      * The format of the label
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
 
     /**
      * Define unique value for {#each} `(key)` expressions to improve transitions.
@@ -72,17 +78,21 @@
   import { cls } from '@layerstack/tailwind';
 
   import { isScaleBand } from '../utils/scales.svelte.js';
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import Group from './Group.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
 
   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 +100,26 @@
     children: childrenProp,
     class: className,
     fill,
+    opacity,
     ...restProps
   }: LabelsProps<TData> = $props();
 
-  function getTextProps(point: Point): ComponentProps<typeof Text> {
-    // Used for positioning
+  // 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, points?: Point[], i?: number): ComponentProps<typeof Text> {
+    // 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
@@ -109,6 +133,7 @@
 
     const formattedValue = formatValue(
       displayValue,
+      // @ts-expect-error - improve types
       format ??
         (value
           ? undefined
@@ -117,11 +142,13 @@
             : ctx.yScale.tickFormat?.())
     );
 
+    let result: ComponentProps<typeof Text>;
+
     if (isScaleBand(ctx.yScale)) {
       // Position label left/right on horizontal bars
-      if (pointValue < 0) {
+      if (isLowEdge) {
         // left
-        return {
+        result = {
           value: formattedValue,
           fill: fillValue,
           x: point.x + (placement === 'outside' ? -offset : offset),
@@ -132,7 +159,7 @@
         };
       } else {
         // right
-        return {
+        result = {
           value: formattedValue,
           fill: fillValue,
           x: point.x + (placement === 'outside' ? offset : -offset),
@@ -144,9 +171,9 @@
       }
     } else {
       // Position label top/bottom on vertical bars
-      if (pointValue < 0) {
+      if (isLowEdge) {
         // bottom
-        return {
+        result = {
           value: formattedValue,
           fill: fillValue,
           x: point.x,
@@ -158,7 +185,7 @@
         };
       } else {
         // top
-        return {
+        result = {
           value: formattedValue,
           fill: fillValue,
           x: point.x,
@@ -170,31 +197,84 @@
         };
       }
     }
+
+    if (placement === 'smart' && points != null && i != null) {
+      const getValue = (p: Point): number => (isScaleBand(ctx.yScale) ? p.xValue : p.yValue);
+      const curr = getValue(point);
+      const prev = i > 0 ? getValue(points[i - 1]) : curr;
+      const next = i < points.length - 1 ? getValue(points[i + 1]) : curr;
+
+      const xPrevTight = Math.abs(prev - curr) < offset;
+      const xNextTight = Math.abs(curr - next) < offset;
+      const isPeak = (prev <= curr && curr >= next) || (xPrevTight && xNextTight);
+      const isTrough = (prev >= curr && curr <= next) || (xPrevTight && xNextTight);
+      const isRising = !isPeak && !isTrough && prev < curr;
+      const isFalling = !isPeak && !isTrough && prev >= curr;
+
+      return {
+        ...result,
+        x: point.x,
+        y: point.y,
+        dx: isRising
+          ? xPrevTight
+            ? offset
+            : -offset
+          : isFalling
+            ? xNextTight
+              ? -offset
+              : offset
+            : 0,
+        dy: isPeak ? -offset : isTrough ? offset : 0,
+        textAnchor: isRising
+          ? xPrevTight
+            ? 'start'
+            : 'end'
+          : isFalling
+            ? xNextTight
+              ? 'end'
+              : 'start'
+            : 'middle',
+        verticalAnchor: isPeak ? 'end' : isTrough ? 'start' : 'middle',
+      };
+    }
+
+    return result;
   }
 </script>
 
-<Group class={layerClass('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), 'labels-text')}
+        {@const baseProps = getTextProps(point, points, i)}
+        {@const textProps = extractLayerProps(baseProps, 'lc-labels-text')}
         {#if childrenProp}
           {@render childrenProp({ data: point, textProps })}
         {:else}
           <Text
+            data-placement={placement}
             {...textProps}
             {...restProps}
-            class={cls(
-              'text-xs',
-              placement === 'inside'
-                ? 'fill-surface-300 stroke-surface-content'
-                : 'fill-surface-content stroke-surface-100',
-              textProps.class,
-              className
-            )}
+            {...extractLayerProps(baseProps, 'lc-labels-text', className ?? '')}
           />
         {/if}
       {/each}
     {/snippet}
   </Points>
 </Group>
+
+<style>
+  @layer components {
+    :global(:where(.lc-labels-text)) {
+      font-size: 12px;
+
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: var(--color-surface-100, light-dark(white, black));
+
+      &[data-placement='inside'] {
+        --fill-color: var(--color-surface-100, light-dark(white, black));
+        --stroke-color: var(--color-surface-content, currentColor);
+      }
+    }
+  }
+</style>

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

@@ -1,6 +1,6 @@
 import Text, { type TextProps } from './Text.svelte';
 import { type ComponentProps, type Snippet } from 'svelte';
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 import type { Without } from '../utils/types.js';
 import { type Point } from './Points.svelte';
 import { type Accessor } from '../utils/common.js';
@@ -29,10 +29,15 @@ export type LabelsPropsWithoutHTML<T = any> = {
      */
     y?: Accessor<T>;
     /**
-     * The placement of the label relative to the point
+     * 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.
+     * `smart` dynamically positions labels based on neighboring point values (peak, trough, rising, falling).
      * @default 'outside'
      */
-    placement?: 'inside' | 'outside' | 'center';
+    placement?: 'inside' | 'outside' | 'center' | 'smart';
     /**
      * The offset of the label from the point
      *
@@ -42,7 +47,7 @@ export type LabelsPropsWithoutHTML<T = any> = {
     /**
      * The format of the label
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
     /**
      * Define unique value for {#each} `(key)` expressions to improve transitions.
      * `index` position used by default
@@ -56,10 +61,17 @@ export type LabelsPropsWithoutHTML<T = any> = {
     }]>;
 };
 export type LabelsProps<T = any> = LabelsPropsWithoutHTML<T> & Without<TextProps, LabelsPropsWithoutHTML<T>>;
+declare function $$render<TData = any>(): {
+    props: LabelsProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<TData = any> {
-    props(): LabelsProps<TData>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
     bindings(): "";
     exports(): {};
 }