layerchart 2.0.0-next.62 → 2.0.0-next.64

package/dist/components/Text/Text.canvas.svelte

@@ -50,6 +50,14 @@
             strokeWidth: itemStrokeWidth ?? c.staticStrokeWidth,
             opacity: itemOpacity ?? c.staticOpacity,
             paintOrder: 'stroke',
+            ...(rest.fontSize != null
+              ? {
+                  fontSize:
+                    typeof rest.fontSize === 'number'
+                      ? `${rest.fontSize}px`
+                      : rest.fontSize,
+                }
+              : {}),
             ...((rest.textAnchor ?? 'start') !== 'start'
               ? { textAnchor: rest.textAnchor }
               : {}),
@@ -195,6 +203,7 @@
         rest.class,
         c.truncateConfig,
         rest.rotate,
+        rest.fontSize,
         rest.lineHeight,
         rest.textAnchor,
         rest.verticalAnchor,

package/dist/components/Text/Text.html.svelte

@@ -46,6 +46,9 @@
       {textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'right' : 'left'}"
       style:white-space="pre-wrap"
       style:line-height={rest.lineHeight ?? '1em'}
+      style:font-size={typeof rest.fontSize === 'number'
+        ? `${rest.fontSize}px`
+        : rest.fontSize}
       style:color={resolvedFill}
       style:opacity={resolvedOpacity ?? resolvedFillOpacity}
       class={['lc-text', resolvedClass]}
@@ -74,6 +77,9 @@
     {textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'right' : 'left'}"
     style:white-space="pre-wrap"
     style:line-height={rest.lineHeight ?? '1em'}
+    style:font-size={typeof rest.fontSize === 'number'
+      ? `${rest.fontSize}px`
+      : rest.fontSize}
     style:color={c.staticFill}
     style:opacity={c.staticOpacity ?? c.staticFillOpacity}
     class={['lc-text', c.staticClassName]}

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

@@ -88,8 +88,20 @@ export type TextPropsWithoutHTML = {
      */
     lineHeight?: string;
     /**
-     * Cap height of the text
-     * @default '0.71em'
+     * Font size of the text. A number is treated as pixels; a string passes
+     * through (e.g. `'12px'`, `'1.25em'`). When set, vertical centering math
+     * derives `capHeight` from this value automatically (as `fontSize * 0.71`),
+     * so per-item scaled labels with `verticalAnchor="middle"` align correctly
+     * without an explicit `capHeight` override.
+     */
+    fontSize?: number | string;
+    /**
+     * Cap height of the text — used by vertical anchor math to align the text
+     * to its visual center (as opposed to the font box). Defaults to `0.71em`,
+     * but if `fontSize` is set, defaults to `fontSize * 0.71` so centering
+     * stays correct as text scales.
+     *
+     * @default '0.71em' (or `fontSize * 0.71` when `fontSize` is set)
      */
     capHeight?: string;
     /**
@@ -182,6 +194,17 @@ export declare function getPathLength(pathRef: SVGPathElement | undefined): numb
  * Convert css value to pixel value (ex. 0.71em => 11.36)
  */
 export declare function getPixelValue(cssValue: number | string): number;
+/**
+ * Resolve the cap-height used by vertical-anchor math.
+ *
+ * Priority:
+ *   1. Explicit `capHeight` prop
+ *   2. `fontSize * 0.71` when `fontSize` is set (keeps centering correct as
+ *      labels scale per-item)
+ *   3. `'0.71em'` (legacy default — only correct for ~16px text since
+ *      `getPixelValue` resolves `em` against 16, not the actual font-size)
+ */
+export declare function resolveCapHeight(capHeight: string | undefined, fontSize: number | string | undefined): number | string;
 export declare function isValidXOrY(xOrY: string | number | undefined): boolean;
 /** Build the standard `markInfo` payload used by every Text variant. */
 export declare function textMarkInfo(props: TextProps, dataMode: boolean): {

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

@@ -58,6 +58,23 @@ export function getPixelValue(cssValue) {
             return 0;
     }
 }
+/**
+ * Resolve the cap-height used by vertical-anchor math.
+ *
+ * Priority:
+ *   1. Explicit `capHeight` prop
+ *   2. `fontSize * 0.71` when `fontSize` is set (keeps centering correct as
+ *      labels scale per-item)
+ *   3. `'0.71em'` (legacy default — only correct for ~16px text since
+ *      `getPixelValue` resolves `em` against 16, not the actual font-size)
+ */
+export function resolveCapHeight(capHeight, fontSize) {
+    if (capHeight != null)
+        return capHeight;
+    if (fontSize != null)
+        return getPixelValue(fontSize) * 0.71;
+    return '0.71em';
+}
 export function isValidXOrY(xOrY) {
     return ((typeof xOrY === 'number' && Number.isFinite(xOrY)) ||
         typeof xOrY === 'string');
@@ -89,7 +106,9 @@ export class TextState {
     // Path measurement (only meaningful for SVG layer where the textPath element exists)
     pathRef = $state();
     // Data mode detection
-    dataMode = $derived(isTextDataProp(this.#getProps().x) || isTextDataProp(this.#getProps().y));
+    dataMode = $derived(this.#getProps().data != null ||
+        isTextDataProp(this.#getProps().x) ||
+        isTextDataProp(this.#getProps().y));
     // Data resolution
     #resolvedData = $derived(this.dataMode ? (this.#getProps().data ?? chartDataArray(this.chartCtx.data)) : []);
     resolvedItems = $derived.by(() => {
@@ -115,9 +134,21 @@ export class TextState {
             const [projX, projY] = resolveGeoDataPair(props.x, props.y, d, this.geo.projection);
             return { x: projX, y: projY };
         }
+        // When x/y are omitted, fall back to the chart's accessors (xGet/yGet) —
+        // mirroring the Circle / Points / Dodge pattern.
+        const xDefault = typeof props.x === 'number'
+            ? props.x
+            : props.x == null && this.chartCtx.config.x != null
+                ? Number(this.chartCtx.xGet(d)) || 0
+                : 0;
+        const yDefault = typeof props.y === 'number'
+            ? props.y
+            : props.y == null && this.chartCtx.config.y != null
+                ? Number(this.chartCtx.yGet(d)) || 0
+                : 0;
         return {
-            x: resolveDataProp(props.x, d, this.chartCtx.xScale, 0),
-            y: resolveDataProp(props.y, d, this.chartCtx.yScale, 0),
+            x: resolveDataProp(props.x, d, this.chartCtx.xScale, xDefault),
+            y: resolveDataProp(props.y, d, this.chartCtx.yScale, yDefault),
         };
     }
     resolveTextValue(d) {
@@ -220,7 +251,7 @@ export class TextState {
         const props = this.#getProps();
         const verticalAnchor = props.verticalAnchor ?? 'end';
         const lineHeight = props.lineHeight ?? '1em';
-        const capHeight = props.capHeight ?? '0.71em';
+        const capHeight = resolveCapHeight(props.capHeight, props.fontSize);
         if (verticalAnchor === 'start') {
             return getPixelValue(lineHeight);
         }
@@ -233,7 +264,7 @@ export class TextState {
         const props = this.#getProps();
         const verticalAnchor = props.verticalAnchor ?? 'end';
         const lineHeight = props.lineHeight ?? '1em';
-        const capHeight = props.capHeight ?? '0.71em';
+        const capHeight = resolveCapHeight(props.capHeight, props.fontSize);
         if (verticalAnchor === 'start')
             return getPixelValue(lineHeight);
         if (verticalAnchor === 'middle')

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

@@ -148,5 +148,45 @@ describe('Text', () => {
             const texts = page.getByTestId(componentTestId).elements();
             await expect.poll(() => texts.length).toBe(1);
         });
+        it('should enter data mode when only `data` prop is set, using chart accessors', async () => {
+            render(TestHarness, {
+                component: Text,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    data,
+                    value: 'label',
+                },
+            });
+            const texts = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => texts.length).toBe(3);
+            const ys = texts.map((t) => Number(t.getAttribute('y')));
+            expect(ys[0]).toBeGreaterThan(ys[1]);
+            expect(ys[1]).toBeGreaterThan(ys[2]);
+        });
+        it('should fall back to chart x accessor when only y is omitted', async () => {
+            render(TestHarness, {
+                component: Text,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    data,
+                    x: 'date',
+                    value: 'label',
+                },
+            });
+            const texts = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => texts.length).toBe(3);
+            const ys = texts.map((t) => Number(t.getAttribute('y')));
+            expect(ys[0]).toBeGreaterThan(ys[2]);
+        });
     });
 });

package/dist/components/Text/Text.svg.svelte

@@ -30,10 +30,13 @@
     rotate,
     dx,
     dy,
+    // `fontSize` is a typed prop (drives `capHeight` defaults), but on the
+    // DOM it must be rendered as the kebab-case `font-size` attribute.
+    fontSize,
     ...rest
   }: TextProps = $props();
 
-  const c = new TextState(() => ({ rotate, dx, dy, ...rest } as TextProps));
+  const c = new TextState(() => ({ rotate, dx, dy, fontSize, ...rest } as TextProps));
 
   let ref = $state<SVGTextElement>();
   let svgRef = $state<SVGElement>();
@@ -78,6 +81,7 @@
         transform={(rest.transform as string | undefined) ?? dataRotateTransform}
         text-anchor={rest.textAnchor ?? 'start'}
         dominant-baseline={rest.dominantBaseline ?? 'auto'}
+        font-size={fontSize}
         fill={resolvedFill}
         fill-opacity={resolvedFillOpacity}
         stroke={resolvedStroke}
@@ -109,6 +113,7 @@
         {...rest as any}
         bind:this={ref}
         dy={dy ?? 0}
+        font-size={fontSize}
         fill={c.staticFill}
         fill-opacity={c.staticFillOpacity}
         stroke={c.staticStroke}
@@ -140,6 +145,7 @@
         transform={c.transform}
         text-anchor={rest.textAnchor ?? 'start'}
         dominant-baseline={rest.dominantBaseline ?? 'auto'}
+        font-size={fontSize}
         fill={c.staticFill}
         fill-opacity={c.staticFillOpacity}
         stroke={c.staticStroke}

package/dist/components/Waffle/Waffle.shared.svelte.d.ts

@@ -0,0 +1,182 @@
+import type { Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { ChartState } from '../../states/chart.svelte.js';
+import { type Accessor } from '../../utils/common.js';
+import { type Insets } from '../../utils/rect.svelte.js';
+import type { CommonStyleProps, Without } from '../../utils/types.js';
+export type WaffleRound = boolean | ((n: number) => number);
+export type WafflePropsWithoutHTML = {
+    /** Override chart context data. */
+    data?: any[];
+    /** Override `x` from context. @default ctx.x */
+    x?: Accessor;
+    /** Override `y` from context. @default ctx.y */
+    y?: Accessor;
+    /** Override `x1` from context. @default ctx.x1 */
+    x1?: Accessor;
+    /** Override `y1` from context. @default ctx.y1 */
+    y1?: Accessor;
+    /**
+     * Axis the waffle extends along (the value axis).
+     *
+     * - `'y'` (default): vertical waffle, like Plot's `waffleY`. Cells stack
+     *   upward from the value=0 baseline.
+     * - `'x'`: horizontal waffle, like Plot's `waffleX`. Cells extend rightward.
+     *
+     * Falls back to the chart's `valueAxis`.
+     */
+    axis?: 'x' | 'y';
+    /**
+     * The quantity each cell represents. Larger units produce fewer cells.
+     * @default 1
+     */
+    unit?: number;
+    /**
+     * The number of cells per row (along the anchor axis). When omitted,
+     * computed automatically from the bar width and unit so cells stay
+     * approximately square.
+     */
+    multiple?: number;
+    /**
+     * Pixel separation between adjacent cells.
+     * @default 1
+     */
+    gap?: number;
+    /**
+     * How to handle non-integer cell counts.
+     *
+     * - `false` (default) — keep the partial cell as a fractional cut-off
+     * - `true` — `Math.round`
+     * - function — custom rounding (e.g. `Math.floor`, `Math.ceil`)
+     */
+    round?: WaffleRound;
+    /** Cell horizontal corner radius (number of pixels, or "100%" for circles). */
+    rx?: number | string;
+    /** Cell vertical corner radius (number of pixels, or "100%" for circles). */
+    ry?: number | string;
+    /** Series key for stacked-waffle support. */
+    seriesKey?: string;
+    /** Insets to shrink each waffle's bounding band. */
+    insets?: Insets;
+    /** Fixed band-axis size in pixels. Override the band width / height. */
+    width?: number;
+    /** Fixed band-axis size in pixels. Override the band width / height. */
+    height?: number;
+    /** Default `(d, i) => i` */
+    key?: (d: any, index: number) => any;
+    /** Setup pointer events to show tooltip for the hovered datum. */
+    tooltip?: boolean;
+    /** Click handler invoked with `(event, { data })` for the hovered waffle. */
+    onWaffleClick?: (e: MouseEvent, detail: {
+        data: any;
+    }) => void;
+    /**
+     * Render a custom symbol per cell instead of the default rect. The snippet
+     * receives the cell's `width`/`height` and the resolved `color` for the
+     * cell. The CSS `color` is applied to the wrapping element, so any nested
+     * SVG using `fill="currentColor"` (or stroke) inherits it automatically.
+     *
+     * SVG layer only — canvas falls back to the default rect.
+     */
+    symbol?: Snippet<[
+        {
+            width: number;
+            height: number;
+            datum: any;
+            color: string;
+        }
+    ]>;
+} & CommonStyleProps;
+export type WaffleProps = WafflePropsWithoutHTML & Without<Omit<SVGAttributes<SVGElement>, 'width' | 'height' | 'x' | 'y'>, WafflePropsWithoutHTML>;
+/** Per-datum, fully-resolved waffle layout — pixel coords ready to render. */
+export type WaffleItem = {
+    data: any;
+    index: number;
+    /** SVG path data for the waffle outline (relative to translate). */
+    pathData: string;
+    /** Pixel translate origin — apply to the path/pattern as `translate(tx, ty)`. */
+    tx: number;
+    ty: number;
+    /** Cell box width in pixels (pattern tile width). */
+    cx: number;
+    /** Cell box height in pixels (pattern tile height). */
+    cy: number;
+    /** Cell centroid in pixel coords (translated). */
+    centroid: {
+        x: number;
+        y: number;
+    };
+    /** Resolved fill color. */
+    fill: string | null;
+};
+export type WaffleLayoutOptions = {
+    axis: 'x' | 'y';
+    unit: number;
+    multiple?: number;
+    round: (n: number) => number;
+    /** Anchor-axis size in pixels (the bar's other-axis extent). */
+    barSize: number;
+    /** Anchor-axis pixel position (the bar's other-axis start). */
+    barStart: number;
+    /** Pixels per data unit on the value axis (signed; negative = inverted). */
+    pixelsPerUnit: number;
+    /** Pixel position of the value=0 baseline along the value axis. */
+    valueZero: number;
+    /** Value range in data units. */
+    v1: number;
+    v2: number;
+};
+/**
+ * Shared reactive state for Waffle. Resolves accessors, computes per-datum
+ * dimensions and waffle layouts (pattern tile size, polygon path, centroid),
+ * and exposes them via `items`.
+ */
+export declare class WaffleState {
+    #private;
+    ctx: ChartState;
+    constructor(getProps: () => WaffleProps);
+    axis: "x" | "y";
+    unit: number;
+    gap: number;
+    round: (n: number) => number;
+    multipleProp: number | undefined;
+    series: import("../index.js").SeriesData<any, any> | undefined;
+    /** Opacity multiplier — fades to 0.1 when another series is highlighted. */
+    seriesOpacity: number;
+    seriesAccessor: string | number | ((d: any) => any) | Accessor<any>[] | undefined;
+    stackAccessors: {
+        y0: (d: any) => number;
+        y1: (d: any) => number;
+        value: (d: any) => [number, number] | null;
+    } | null;
+    data: any[];
+    x: Accessor;
+    y: Accessor;
+    getDimensions: (item: any) => {
+        x: any;
+        y: any;
+        width: number;
+        height: number;
+    } | undefined;
+    /** Pixel slope of the value-axis scale (signed). */
+    pixelsPerUnit: number;
+    /** Pixel position of value=0 along the value axis. */
+    valueZero: number;
+    items: WaffleItem[];
+    /** Resolved gap. */
+    resolvedGap: number;
+}
+/**
+ * Generate the polygon outline of a waffle covering the cell interval
+ * `[i1, i2)` on a grid of `columns` columns. The shape is approximately
+ * rectangular but may have one or two corner cuts when the start or end
+ * value is not aligned to a row boundary, plus extra cuts for fractional
+ * intervals. The last point is the centroid (popped by callers for tooltips
+ * and tip placement).
+ *
+ * Coordinate space is `(column, row)` in cell units — callers transform to
+ * pixel space (and may negate the row axis for screen y).
+ *
+ * @see https://github.com/observablehq/plot/blob/main/src/marks/waffle.js
+ */
+export declare function wafflePoints(i1: number, i2: number, columns: number): [number, number][];