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

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,22 +36,32 @@
     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.
+     * - `outside`: outside the bar/point.
+     * - `inside`: inside the bar/point near the value edge.
+     * - `middle`: aligned to the value edge with a middle anchor.
+     * - `center`: centered within the bar body (between the value edge and baseline).
+     * - `smart`: dynamically positions labels based on neighboring point values (peak, trough, rising, falling).
      * @default 'outside'
      */
-    placement?: 'inside' | 'outside' | 'center';
+    placement?: 'inside' | 'outside' | 'middle' | 'center' | 'smart';
 
     /**
      * The offset of the label from the point
      *
-     * @default placement === 'center' ? 0 : 4
+     * @default placement === 'center' || placement === 'middle' ? 0 : 4
      */
     offset?: number;
 
     /**
      * The format of the label
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
 
     /**
      * Define unique value for {#each} `(key)` expressions to improve transitions.
@@ -72,30 +82,52 @@
   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';
+  import { createDimensionGetter } from '../utils/rect.svelte.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,
+    offset = placement === 'center' || placement === 'middle' ? 0 : 4,
     format,
     key = (_: any, i: number) => i,
     children: childrenProp,
     class: className,
     fill,
+    opacity,
     ...restProps
   }: LabelsProps<TData> = $props();
 
-  function getTextProps(point: Point): ComponentProps<typeof Text> {
-    // Used for positioning
+  // Used to compute the bar's bounding rect for `center` placement
+  const getDimensions = $derived(createDimensionGetter(ctx, () => ({ x, y })));
+
+  // 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 +141,7 @@
 
     const formattedValue = formatValue(
       displayValue,
+      // @ts-expect-error - improve types
       format ??
         (value
           ? undefined
@@ -117,36 +150,62 @@
             : ctx.yScale.tickFormat?.())
     );
 
+    let result: ComponentProps<typeof Text>;
+
     if (isScaleBand(ctx.yScale)) {
       // Position label left/right on horizontal bars
-      if (pointValue < 0) {
+      if (placement === 'center') {
+        // Center within the bar body
+        const dims = getDimensions(point.data) ?? { x: point.x, y: point.y, width: 0, height: 0 };
+        result = {
+          value: formattedValue,
+          fill: fillValue,
+          x: dims.x + dims.width / 2,
+          y: dims.y + dims.height / 2,
+          textAnchor: 'middle',
+          verticalAnchor: 'middle',
+          capHeight: '.6rem',
+        };
+      } else if (isLowEdge) {
         // left
-        return {
+        result = {
           value: formattedValue,
           fill: fillValue,
           x: point.x + (placement === 'outside' ? -offset : offset),
           y: point.y,
-          textAnchor: placement === 'outside' ? 'end' : 'start',
+          textAnchor: placement === 'middle' ? 'middle' : placement === 'outside' ? 'end' : 'start',
           verticalAnchor: 'middle',
           capHeight: '.6rem',
         };
       } else {
         // right
-        return {
+        result = {
           value: formattedValue,
           fill: fillValue,
           x: point.x + (placement === 'outside' ? offset : -offset),
           y: point.y,
-          textAnchor: placement === 'outside' ? 'start' : 'end',
+          textAnchor: placement === 'middle' ? 'middle' : placement === 'outside' ? 'start' : 'end',
           verticalAnchor: 'middle',
           capHeight: '.6rem',
         };
       }
     } else {
       // Position label top/bottom on vertical bars
-      if (pointValue < 0) {
+      if (placement === 'center') {
+        // Center within the bar body
+        const dims = getDimensions(point.data) ?? { x: point.x, y: point.y, width: 0, height: 0 };
+        result = {
+          value: formattedValue,
+          fill: fillValue,
+          x: dims.x + dims.width / 2,
+          y: dims.y + dims.height / 2,
+          capHeight: '.6rem',
+          textAnchor: 'middle',
+          verticalAnchor: 'middle',
+        };
+      } else if (isLowEdge) {
         // bottom
-        return {
+        result = {
           value: formattedValue,
           fill: fillValue,
           x: point.x,
@@ -154,11 +213,11 @@
           capHeight: '.6rem',
           textAnchor: 'middle',
           verticalAnchor:
-            placement === 'center' ? 'middle' : placement === 'outside' ? 'start' : 'end',
+            placement === 'middle' ? 'middle' : placement === 'outside' ? 'start' : 'end',
         };
       } else {
         // top
-        return {
+        result = {
           value: formattedValue,
           fill: fillValue,
           x: point.x,
@@ -166,35 +225,89 @@
           capHeight: '.6rem',
           textAnchor: 'middle',
           verticalAnchor:
-            placement === 'center' ? 'middle' : placement === 'outside' ? 'end' : 'start',
+            placement === 'middle' ? 'middle' : placement === 'outside' ? 'end' : 'start',
         };
       }
     }
+
+    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'],
+      &[data-placement='center'] {
+        --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,20 +29,29 @@ 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.
+     * - `outside`: outside the bar/point.
+     * - `inside`: inside the bar/point near the value edge.
+     * - `middle`: aligned to the value edge with a middle anchor.
+     * - `center`: centered within the bar body (between the value edge and baseline).
+     * - `smart`: dynamically positions labels based on neighboring point values (peak, trough, rising, falling).
      * @default 'outside'
      */
-    placement?: 'inside' | 'outside' | 'center';
+    placement?: 'inside' | 'outside' | 'middle' | 'center' | 'smart';
     /**
      * The offset of the label from the point
      *
-     * @default placement === 'center' ? 0 : 4
+     * @default placement === 'center' || placement === 'middle' ? 0 : 4
      */
     offset?: number;
     /**
      * 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 +65,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(): {};
 }