layerchart 2.0.0-next.46 → 2.0.0-next.47

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

@@ -1,40 +1,56 @@
-import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { Without } from '../utils/types.js';
+import type { DataDrivenStyleProps } from '../utils/dataProp.js';
 import type { SVGAttributes } from 'svelte/elements';
 import { type MotionProp } from '../utils/motion.svelte.js';
+/**
+ * Check if a Text prop value is a data-space prop.
+ * Functions are always data props.
+ * Strings are data props unless they look like CSS values (e.g. "50%", "1em").
+ */
+export declare function isTextDataProp(value: any): boolean;
 export type TextPropsWithoutHTML = {
     /**
-     * text value
+     * Text value to render.
+     * - `number`: direct value
+     * - `string`: in data mode, treated as a data property name (e.g. `"label"` → `d.label`);
+     *   in pixel mode, used as literal text
+     * - `function(d)`: accessor called per data item to get the text value
+     *
      * @default 0
      */
-    value?: string | number;
-    /**
-     * The fill color of the text
-     */
-    fill?: string;
+    value?: string | number | ((d: any) => string | number);
     /**
      * Maximum width to occupy (approximate as words are not split)
      */
     width?: number;
     /**
-     * x position of the text
+     * x position of the text.
+     * - `number`: pixel value (direct)
+     * - `string` (CSS value like "50%"): SVG position value
+     * - `string` (property name like "date"): data property, resolved via xScale
+     * - `function(d)`: accessor called per data item, result passed through xScale
      *
      * @default 0
      */
-    x?: string | number;
+    x?: string | number | ((d: any) => any);
     /**
-     * Initial x position of the text
+     * Initial x position of the text (pixel mode only).
      *
      * @default x
      */
     initialX?: string | number;
     /**
-     * y position of the text
+     * y position of the text.
+     * - `number`: pixel value (direct)
+     * - `string` (CSS value like "50%"): SVG position value
+     * - `string` (property name like "value"): data property, resolved via yScale
+     * - `function(d)`: accessor called per data item, result passed through yScale
      *
      * @default 0
      */
-    y?: string | number;
+    y?: string | number | ((d: any) => any);
     /**
-     * Initial y position of the text
+     * Initial y position of the text (pixel mode only).
      *
      * @default y
      */
@@ -106,6 +122,7 @@ export type TextPropsWithoutHTML = {
      * @bindable
      */
     ref?: SVGTextElement;
+    /** Motion configuration (pixel mode only). */
     motion?: MotionProp;
     /**
      * Whether to enable text truncation
@@ -128,7 +145,18 @@ export type TextPropsWithoutHTML = {
      * @default '0%'
      */
     startOffset?: string | number;
-} & CommonStyleProps;
+    /**
+     * 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;
+} & DataDrivenStyleProps;
 export type TextProps = TextPropsWithoutHTML & Without<SVGAttributes<SVGTextElement>, TextPropsWithoutHTML>;
 import { type TruncateTextOptions } from '../utils/string.js';
 declare const Text: import("svelte").Component<TextProps, {}, "ref" | "svgRef">;

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

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

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

@@ -0,0 +1,152 @@
+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 Text from './Text.svelte';
+describe('Text', () => {
+    describe('pixel mode', () => {
+        it('should render text with pixel values', async () => {
+            render(TestHarness, {
+                component: Text,
+                componentProps: {
+                    x: 50,
+                    y: 50,
+                    value: 'Hello',
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+        });
+        it('should preserve CSS-like string values as SVG values', async () => {
+            render(TestHarness, {
+                component: Text,
+                componentProps: {
+                    x: '50%',
+                    y: '50%',
+                    value: 'Centered',
+                    textAnchor: 'middle',
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+        });
+    });
+    describe('data mode', () => {
+        const data = [
+            { date: new Date('2024-01-01'), value: 20, label: 'A' },
+            { date: new Date('2024-02-01'), value: 40, label: 'B' },
+            { date: new Date('2024-03-01'), value: 60, label: 'C' },
+        ];
+        it('should render one text per data item with string accessors', async () => {
+            render(TestHarness, {
+                component: Text,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    x: 'date',
+                    y: 'value',
+                    value: (d) => d.label,
+                },
+            });
+            const texts = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => texts.length).toBe(3);
+        });
+        it('should resolve value as data property name in data mode', async () => {
+            render(TestHarness, {
+                component: Text,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    x: 'date',
+                    y: 'value',
+                    value: 'label',
+                },
+            });
+            const texts = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => texts.length).toBe(3);
+            // Check that the text content is resolved from the data property
+            const tspans = document.querySelectorAll('.lc-text-tspan');
+            const textContents = Array.from(tspans).map((el) => el.textContent);
+            expect(textContents).toEqual(['A', 'B', 'C']);
+        });
+        it('should resolve data-driven fill through cScale', async () => {
+            const colorData = [
+                { date: new Date('2024-01-01'), value: 20, label: 'A', category: 'X' },
+                { date: new Date('2024-02-01'), value: 40, label: 'B', category: 'Y' },
+                { date: new Date('2024-03-01'), value: 60, label: 'C', category: 'X' },
+            ];
+            render(TestHarness, {
+                component: Text,
+                chartProps: {
+                    data: colorData,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                    c: 'category',
+                    cRange: ['steelblue', 'coral'],
+                },
+                componentProps: {
+                    x: 'date',
+                    y: 'value',
+                    value: 'label',
+                    fill: 'category',
+                },
+            });
+            const texts = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => texts.length).toBe(3);
+            // Text elements are <text> inside <svg>, check the fill attribute
+            expect(texts[0].getAttribute('fill')).toBe('steelblue');
+            expect(texts[1].getAttribute('fill')).toBe('coral');
+            expect(texts[2].getAttribute('fill')).toBe('steelblue');
+        });
+        it('should pass literal CSS colors through unchanged in data mode', async () => {
+            render(TestHarness, {
+                component: Text,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    x: 'date',
+                    y: 'value',
+                    value: 'label',
+                    fill: 'red',
+                },
+            });
+            const texts = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => texts.length).toBe(3);
+            expect(texts[0].getAttribute('fill')).toBe('red');
+            expect(texts[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, label: 'Only' }];
+            render(TestHarness, {
+                component: Text,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    data: explicitData,
+                    x: 'date',
+                    y: 'value',
+                    value: 'label',
+                },
+            });
+            const texts = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => texts.length).toBe(1);
+        });
+    });
+});

package/dist/components/Threshold.svelte

@@ -48,6 +48,9 @@
 
   const ctx = getChartContext();
 
+  // Mark as composite so child Areas don't register
+  ctx.registerComponent({ name: 'Threshold', kind: 'composite-mark' });
+
   let { curve, defined, below, above, children }: ThresholdProps = $props();
 </script>