layerchart 2.0.0-next.50 → 2.0.0-next.52

package/dist/components/Rect.svelte

@@ -131,13 +131,20 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
   import { merge } from '@layerstack/utils';
+  import type { HTMLAttributes } from 'svelte/elements';
 
   import { untrack } from 'svelte';
   import { getLayerContext } from '../contexts/layer.js';
   import { getChartContext } from '../contexts/chart.js';
   import { createDataMotionMap, type MotionOptions } from '../utils/motion.svelte.js';
   import { createKey } from '../utils/key.svelte.js';
-  import { hasAnyDataProp, resolveDataProp, resolveColorProp, resolveGeoDataPair, resolveStyleProp } from '../utils/dataProp.js';
+  import {
+    hasAnyDataProp,
+    resolveDataProp,
+    resolveColorProp,
+    resolveGeoDataPair,
+    resolveStyleProp,
+  } from '../utils/dataProp.js';
   import { getGeoContext } from '../contexts/geo.js';
   import { chartDataArray } from '../utils/common.js';
   import { resolveInsets } from '../utils/rect.svelte.js';
@@ -189,9 +196,7 @@
   const geo = getGeoContext();
 
   // Data to iterate over in data mode
-  const resolvedData: any[] = $derived(
-    dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []
-  );
+  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
 
   // Resolve a single data item to rect dimensions
   function resolveRect(d: any) {
@@ -288,8 +293,8 @@
 
   const _initialX = initialX ?? (typeof x === 'number' ? x : 0);
   const _initialY = initialY ?? (typeof y === 'number' ? y : 0);
-  const _initialWidth = initialWidth ?? (width ?? 0);
-  const _initialHeight = initialHeight ?? (height ?? 0);
+  const _initialWidth = initialWidth ?? width ?? 0;
+  const _initialHeight = initialHeight ?? height ?? 0;
 
   // Parse motion config once, then pass resolved config to each axis
   // (avoids 4 separate parseMotionProp calls that re-parse the same prop)
@@ -316,6 +321,20 @@
 
   const layerCtx = getLayerContext();
 
+  const staticFill = $derived(typeof fill === 'string' ? fill : undefined);
+  const staticFillOpacity = $derived(typeof fillOpacity === 'number' ? fillOpacity : undefined);
+  const staticStroke = $derived(typeof stroke === 'string' ? stroke : undefined);
+  const staticStrokeOpacity = $derived(
+    typeof strokeOpacity === 'number' ? strokeOpacity : undefined
+  );
+  const staticStrokeWidth = $derived(typeof strokeWidth === 'number' ? strokeWidth : undefined);
+  const staticOpacity = $derived(typeof opacity === 'number' ? opacity : undefined);
+  const staticClassName = $derived(typeof className === 'string' ? className : undefined);
+  const staticBorderWidth = $derived(
+    typeof strokeWidth === 'number' ? `${strokeWidth}px` : undefined
+  );
+  const htmlRestProps = $derived(restProps as unknown as HTMLAttributes<HTMLDivElement>);
+
   function getStyleOptions(
     styleOverrides: ComputedStylesOptions | undefined,
     itemFill?: string | undefined,
@@ -327,17 +346,31 @@
     itemClass?: string | undefined
   ) {
     return styleOverrides
-      ? merge({ styles: { strokeWidth: itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined) } }, styleOverrides)
+      ? merge(
+          {
+            styles: {
+              strokeWidth:
+                itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
+            },
+          },
+          styleOverrides
+        )
       : {
           styles: {
             fill: itemFill ?? fill,
-            fillOpacity: itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
+            fillOpacity:
+              itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
             stroke: itemStroke ?? stroke,
-            strokeOpacity: itemStrokeOpacity ?? (typeof strokeOpacity === 'number' ? strokeOpacity : undefined),
-            strokeWidth: itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
+            strokeOpacity:
+              itemStrokeOpacity ?? (typeof strokeOpacity === 'number' ? strokeOpacity : undefined),
+            strokeWidth:
+              itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
             opacity: itemOpacity ?? (typeof opacity === 'number' ? opacity : undefined),
           },
-          classes: cls('lc-rect', itemClass ?? (typeof className === 'string' ? className : undefined)),
+          classes: cls(
+            'lc-rect',
+            itemClass ?? (typeof className === 'string' ? className : undefined)
+          ),
           style: restProps.style as string | undefined,
         };
   }
@@ -355,15 +388,28 @@
         const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d);
         const resolvedOpacity = resolveStyleProp(opacity, item.d);
         const resolvedClass = resolveStyleProp(className, item.d);
-        const styleOpts = getStyleOptions(styleOverrides, resolvedFill, resolvedStroke, resolvedFillOpacity, resolvedStrokeOpacity, resolvedStrokeWidth, resolvedOpacity, resolvedClass);
-        renderRect(ctx, {
-          x: item.x,
-          y: item.y,
-          width: item.width,
-          height: item.height,
-          rx,
-          ry,
-        }, styleOpts);
+        const styleOpts = getStyleOptions(
+          styleOverrides,
+          resolvedFill,
+          resolvedStroke,
+          resolvedFillOpacity,
+          resolvedStrokeOpacity,
+          resolvedStrokeWidth,
+          resolvedOpacity,
+          resolvedClass
+        );
+        renderRect(
+          ctx,
+          {
+            x: item.x,
+            y: item.y,
+            width: item.width,
+            height: item.height,
+            rx,
+            ry,
+          },
+          styleOpts
+        );
       }
     } else {
       const styleOpts = getStyleOptions(styleOverrides);
@@ -399,36 +445,39 @@
         color: typeof fill === 'string' ? fill : typeof stroke === 'string' ? stroke : undefined,
       };
     },
-    canvasRender: layerCtx === 'canvas' ? {
-      render,
-      events: {
-        click: onclick,
-        dblclick: ondblclick,
-        pointerenter: onpointerenter,
-        pointermove: onpointermove,
-        pointerleave: onpointerleave,
-        pointerover: onpointerover,
-        pointerout: onpointerout,
-      },
-      deps: () => [
-        dataMode,
-        dataMode ? resolvedItems : null,
-        motionX.current,
-        motionY.current,
-        motionWidth.current,
-        motionHeight.current,
-        fillKey!.current,
-        strokeKey!.current,
-        fillOpacity,
-        strokeOpacity,
-        strokeWidth,
-        opacity,
-        className,
-        restProps.style,
-        rx,
-        ry,
-      ],
-    } : undefined,
+    canvasRender:
+      layerCtx === 'canvas'
+        ? {
+            render,
+            events: {
+              click: onclick,
+              dblclick: ondblclick,
+              pointerenter: onpointerenter,
+              pointermove: onpointermove,
+              pointerleave: onpointerleave,
+              pointerover: onpointerover,
+              pointerout: onpointerout,
+            },
+            deps: () => [
+              dataMode,
+              dataMode ? resolvedItems : null,
+              motionX.current,
+              motionY.current,
+              motionWidth.current,
+              motionHeight.current,
+              fillKey!.current,
+              strokeKey!.current,
+              fillOpacity,
+              strokeOpacity,
+              strokeWidth,
+              opacity,
+              className,
+              restProps.style,
+              rx,
+              ry,
+            ],
+          }
+        : undefined,
   });
 </script>
 
@@ -472,15 +521,15 @@
       y={motionY.current}
       width={motionWidth.current}
       height={motionHeight.current}
-      fill={fill as string}
-      fill-opacity={fillOpacity as number}
-      stroke={stroke as string}
-      stroke-opacity={strokeOpacity as number}
-      stroke-width={strokeWidth as number}
-      opacity={opacity as number}
+      fill={staticFill}
+      fill-opacity={staticFillOpacity}
+      stroke={staticStroke}
+      stroke-opacity={staticStrokeOpacity}
+      stroke-width={staticStrokeWidth}
+      opacity={staticOpacity}
       {rx}
       {ry}
-      class={cls('lc-rect', className as string)}
+      class={cls('lc-rect', staticClassName)}
       {...restProps}
       {onclick}
       {ondblclick}
@@ -516,7 +565,7 @@
         style:border-color={resolvedStroke}
         style:border-radius="{rx}px"
         class={cls('lc-rect', resolvedClass)}
-        {...restProps as any}
+        {...htmlRestProps}
         {onclick}
         {ondblclick}
         {onpointerenter}
@@ -535,14 +584,14 @@
       style:top="{motionY.current}px"
       style:width="{motionWidth.current}px"
       style:height="{motionHeight.current}px"
-      style:background={fill as string}
-      style:opacity={opacity as number}
-      style:border-width="{strokeWidth as number}px"
+      style:background={staticFill}
+      style:opacity={staticOpacity}
+      style:border-width={staticBorderWidth}
       style:border-style="solid"
-      style:border-color={stroke as string}
+      style:border-color={staticStroke}
       style:border-radius="{rx}px"
-      class={cls('lc-rect', className as string)}
-      {...restProps as any}
+      class={cls('lc-rect', staticClassName)}
+      {...htmlRestProps}
       {onclick}
       {ondblclick}
       {onpointerenter}

package/dist/components/Rule.svelte

@@ -77,6 +77,8 @@
 
   const ctx = getChartContext();
 
+  ctx.registerComponent({ name: 'Rule', kind: 'composite-mark' });
+
   const data = $derived(chartDataArray(dataProp ?? ctx.data));
 
   const singleX = $derived(

package/dist/components/Sankey.svelte

@@ -107,8 +107,6 @@
   const ctx = getChartContext();
 
   const sankeyData = $derived.by(() => {
-    if (typeof document === 'undefined') return { nodes: [], links: [] };
-
     return (
       d3Sankey()
         .size([ctx.width, ctx.height])

package/dist/components/Text.svelte

@@ -238,7 +238,12 @@
   import { createDataMotionMap } from '../utils/motion.svelte.js';
   import { getStringWidth, truncateText, type TruncateTextOptions } from '../utils/string.js';
   import { getComputedStyles, renderText, type ComputedStylesOptions } from '../utils/canvas.js';
-  import { resolveDataProp, resolveColorProp, resolveGeoDataPair, resolveStyleProp } from '../utils/dataProp.js';
+  import {
+    resolveDataProp,
+    resolveColorProp,
+    resolveGeoDataPair,
+    resolveStyleProp,
+  } from '../utils/dataProp.js';
   import { getGeoContext } from '../contexts/geo.js';
   import { get } from '@layerstack/utils';
   import { chartDataArray } from '../utils/common.js';
@@ -294,9 +299,7 @@
   const geo = getGeoContext();
 
   // Data to iterate over in data mode
-  const resolvedData: any[] = $derived(
-    dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []
-  );
+  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
 
   // Resolve position for a data item
   function resolveTextPosition(d: any) {
@@ -401,7 +404,11 @@
   const motionValue = createMotion(
     typeof value === 'number' ? value : 0,
     () => (typeof value === 'number' ? value : 0),
-    typeof value === 'number' && motion ? (typeof motion === 'object' && 'type' in motion ? motion : undefined) : undefined
+    typeof value === 'number' && motion
+      ? typeof motion === 'object' && 'type' in motion
+        ? motion
+        : undefined
+      : undefined
   );
 
   // Handle null and convert `\n` strings back to newline characters
@@ -549,6 +556,13 @@
     motion
   );
 
+  const staticFill = $derived(typeof fill === 'string' ? fill : undefined);
+  const staticFillOpacity = $derived(typeof fillOpacity === 'number' ? fillOpacity : undefined);
+  const staticStroke = $derived(typeof stroke === 'string' ? stroke : undefined);
+  const staticStrokeWidth = $derived(typeof strokeWidth === 'number' ? strokeWidth : undefined);
+  const staticOpacity = $derived(typeof opacity === 'number' ? opacity : undefined);
+  const staticClassName = $derived(typeof className === 'string' ? className : undefined);
+
   function render(
     ctx: CanvasRenderingContext2D,
     styleOverrides: ComputedStylesOptions | undefined
@@ -562,20 +576,33 @@
       itemClass?: string | undefined
     ) {
       return styleOverrides
-        ? merge({ styles: { strokeWidth: itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined) } }, styleOverrides)
+        ? merge(
+            {
+              styles: {
+                strokeWidth:
+                  itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
+              },
+            },
+            styleOverrides
+          )
         : {
             styles: {
               fill: itemFill ?? fill,
-              fillOpacity: itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
+              fillOpacity:
+                itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
               stroke: itemStroke ?? stroke,
-              strokeWidth: itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
+              strokeWidth:
+                itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
               opacity: itemOpacity ?? (typeof opacity === 'number' ? opacity : undefined),
               paintOrder: 'stroke',
               // Only include textAnchor in constantStyles when explicitly non-default,
               // so that CSS class-based text-anchor (e.g. [text-anchor:middle]) can take effect
               ...(textAnchor !== 'start' ? { textAnchor } : {}),
             },
-            classes: cls('lc-text', itemClass ?? (typeof className === 'string' ? className : undefined)),
+            classes: cls(
+              'lc-text',
+              itemClass ?? (typeof className === 'string' ? className : undefined)
+            ),
             style: restProps.style as string | undefined,
           };
     }
@@ -584,8 +611,7 @@
       const baseStyles = getTextStyles();
       const computedStyles = getComputedStyles(ctx.canvas, baseStyles);
       ctx.font = `${computedStyles.fontSize} ${computedStyles.fontFamily}`;
-      const textAlign =
-        textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'end' : 'start';
+      const textAlign = textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'end' : 'start';
       ctx.textAlign = textAlign;
 
       for (const item of resolvedItems) {
@@ -596,7 +622,14 @@
         const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d);
         const resolvedOpacity = resolveStyleProp(opacity, item.d);
         const resolvedClass = resolveStyleProp(className, item.d);
-        const itemStyles = getTextStyles(resolvedFill, resolvedStroke, resolvedFillOpacity, resolvedStrokeWidth, resolvedOpacity, resolvedClass);
+        const itemStyles = getTextStyles(
+          resolvedFill,
+          resolvedStroke,
+          resolvedFillOpacity,
+          resolvedStrokeWidth,
+          resolvedOpacity,
+          resolvedClass
+        );
         ctx.save();
         if (rotate !== undefined) {
           const radians = degreesToRadians(rotate);
@@ -634,8 +667,7 @@
 
       ctx.font = `${computedStyles.fontSize} ${computedStyles.fontFamily}`;
 
-      const textAlign =
-        textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'end' : 'start';
+      const textAlign = textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'end' : 'start';
       ctx.textAlign = textAlign;
 
       for (let index = 0; index < wordsByLines.length; index++) {
@@ -668,26 +700,29 @@
         color: typeof fill === 'string' ? fill : undefined,
       };
     },
-    canvasRender: layerCtx === 'canvas' ? {
-      render,
-      deps: () => [
-        dataMode,
-        dataMode ? resolvedItems : null,
-        value,
-        motionX.current,
-        motionY.current,
-        fillKey!.current,
-        strokeKey!.current,
-        strokeWidth,
-        opacity,
-        className,
-        truncateConfig,
-        rotate,
-        lineHeight,
-        textAnchor,
-        verticalAnchor,
-      ],
-    } : undefined,
+    canvasRender:
+      layerCtx === 'canvas'
+        ? {
+            render,
+            deps: () => [
+              dataMode,
+              dataMode ? resolvedItems : null,
+              value,
+              motionX.current,
+              motionY.current,
+              fillKey!.current,
+              strokeKey!.current,
+              strokeWidth,
+              opacity,
+              className,
+              truncateConfig,
+              rotate,
+              lineHeight,
+              textAnchor,
+              verticalAnchor,
+            ],
+          }
+        : undefined,
   });
 </script>
 
@@ -717,11 +752,7 @@
           opacity={resolvedOpacity}
           class={['lc-text', resolvedClass]}
         >
-          <tspan
-            x={item.x}
-            dy={dataModeStartDy}
-            class="lc-text-tspan"
-          >
+          <tspan x={item.x} dy={dataModeStartDy} class="lc-text-tspan">
             {text}
           </tspan>
         </text>
@@ -741,13 +772,13 @@
           bind:this={ref}
           {dy}
           {...restProps}
-          fill={fill as string}
-          fill-opacity={fillOpacity as number}
-          stroke={stroke as string}
-          stroke-width={strokeWidth as number}
-          opacity={opacity as number}
+          fill={staticFill}
+          fill-opacity={staticFillOpacity}
+          stroke={staticStroke}
+          stroke-width={staticStrokeWidth}
+          opacity={staticOpacity}
           transform={transformProp}
-          class={['lc-text', className as string]}
+          class={['lc-text', staticClassName]}
         >
           <textPath
             style="text-anchor: {textAnchor};"
@@ -768,12 +799,12 @@
           text-anchor={textAnchor}
           dominant-baseline={dominantBaseline}
           {...restProps}
-          fill={fill as string}
-          fill-opacity={fillOpacity as number}
-          stroke={stroke as string}
-          stroke-width={strokeWidth as number}
-          opacity={opacity as number}
-          class={['lc-text', className as string]}
+          fill={staticFill}
+          fill-opacity={staticFillOpacity}
+          stroke={staticStroke}
+          stroke-width={staticStrokeWidth}
+          opacity={staticOpacity}
+          class={['lc-text', staticClassName]}
         >
           {#each wordsByLines as line, index}
             <tspan
@@ -831,7 +862,7 @@
       {textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'right' : 'left'}"
       style:white-space="pre-wrap"
       style:line-height={lineHeight}
-      class={['lc-text', className as string]}
+      class={['lc-text', staticClassName]}
     >
       {textValue}
     </div>

package/dist/components/charts/ArcChart.svelte

@@ -7,6 +7,7 @@
   import type { SeriesData } from './types.js';
 
   import Arc from '../Arc.svelte';
+  import ArcLabel, { type ArcLabelConfig } from '../ArcLabel.svelte';
   import Group from '../Group.svelte';
 
   export type ArcChartExtraSnippetProps<TData> = {
@@ -28,8 +29,15 @@
     ChartProps<any>,
     // Props that don't apply to ArcChart
     'data' | 'axis' | 'brush' | 'grid' | 'highlight' | 'labels' | 'points' | 'rule'
-  > &
-    Pick<
+  > & {
+      /**
+       * Render text labels on each arc.
+       *
+       * Pass `true` to enable with default placement (`centroid`), or an object
+       * to customize via `ArcLabel` props (placement, format, value accessor, etc).
+       */
+      labels?: boolean | (ArcLabelConfig & { value?: Accessor });
+    } & Pick<
       ArcPropsWithoutHTML,
       | 'cornerRadius'
       | 'trackCornerRadius'
@@ -163,6 +171,7 @@
     marks,
     tooltip: tooltipProp,
     arc,
+    labels = false,
     context = $bindable(),
     trackCornerRadius,
     trackPadAngle,
@@ -175,6 +184,10 @@
 
   const center = $derived(centerProp ?? placement === 'center');
 
+  const labelsConfig = $derived(
+    labels === true ? ({} as ArcLabelConfig & { value?: Accessor }) : labels || null
+  );
+
   const c = $derived(cProp ?? key);
 
   const keyAccessor = $derived(accessor(key));
@@ -359,6 +372,30 @@
               seriesIndex: i,
               props: getArcProps(s, i),
             })}
+          {:else if labelsConfig}
+            {@const arcProps = getArcProps(s, i)}
+            <Arc {...arcProps}>
+              {#snippet children({
+                centroid,
+                startAngle,
+                endAngle,
+                innerRadius: arcInnerRadius,
+                outerRadius: arcOuterRadius,
+                getArcTextProps,
+              })}
+                {@const { value: labelValue, ...labelRest } = labelsConfig}
+                <ArcLabel
+                  {centroid}
+                  {startAngle}
+                  {endAngle}
+                  innerRadius={arcInnerRadius}
+                  outerRadius={arcOuterRadius}
+                  {getArcTextProps}
+                  value={accessor(labelValue ?? value)(s.data?.[0] || chartData[0])}
+                  {...labelRest}
+                />
+              {/snippet}
+            </Arc>
           {:else}
             <Arc {...getArcProps(s, i)} />
           {/if}

package/dist/components/charts/ArcChart.svelte.d.ts

@@ -5,6 +5,7 @@ import type { ArcPropsWithoutHTML } from '../Arc.svelte';
 import type { Accessor } from '../../utils/common.js';
 import type { SeriesData } from './types.js';
 import Arc from '../Arc.svelte';
+import { type ArcLabelConfig } from '../ArcLabel.svelte';
 import Group from '../Group.svelte';
 export type ArcChartExtraSnippetProps<TData> = {
     key: Accessor<TData>;
@@ -19,7 +20,17 @@ export type ArcChartProps<TData> = {
      * The data for the chart
      */
     data?: TData[] | readonly TData[];
-} & Omit<ChartProps<any>, 'data' | 'axis' | 'brush' | 'grid' | 'highlight' | 'labels' | 'points' | 'rule'> & Pick<ArcPropsWithoutHTML, 'cornerRadius' | 'trackCornerRadius' | 'padAngle' | 'trackPadAngle' | 'trackStartAngle' | 'trackEndAngle' | 'trackInnerRadius' | 'trackOuterRadius' | 'innerRadius' | 'outerRadius' | 'range'> & {
+} & Omit<ChartProps<any>, 'data' | 'axis' | 'brush' | 'grid' | 'highlight' | 'labels' | 'points' | 'rule'> & {
+    /**
+     * Render text labels on each arc.
+     *
+     * Pass `true` to enable with default placement (`centroid`), or an object
+     * to customize via `ArcLabel` props (placement, format, value accessor, etc).
+     */
+    labels?: boolean | (ArcLabelConfig & {
+        value?: Accessor;
+    });
+} & Pick<ArcPropsWithoutHTML, 'cornerRadius' | 'trackCornerRadius' | 'padAngle' | 'trackPadAngle' | 'trackStartAngle' | 'trackEndAngle' | 'trackInnerRadius' | 'trackOuterRadius' | 'innerRadius' | 'outerRadius' | 'range'> & {
     /**
      * The series data to be used for the chart.
      */