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

package/dist/components/charts/PieChart.svelte

@@ -6,6 +6,7 @@
   import type { SeriesData } from './types.js';
 
   import Arc from '../Arc.svelte';
+  import ArcLabel, { type ArcLabelConfig } from '../ArcLabel.svelte';
   import Group from '../Group.svelte';
   import Pie from '../Pie.svelte';
 
@@ -28,6 +29,13 @@
     // Props that don't apply to PieChart
     '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 });
       /**
        * The series data to be used for the chart.
        */
@@ -214,10 +222,17 @@
     tooltip: tooltipProp,
     pie,
     arc,
+    labels = false,
     context = $bindable(),
     ...restProps
   }: PieChartProps<TData> = $props();
 
+  const labelsConfig = $derived.by<(ArcLabelConfig & { value?: Accessor }) | null>(() => {
+    if (labels === true) return { placement: 'callout' };
+    if (labels) return { placement: 'callout', ...labels };
+    return null;
+  });
+
   const series = $derived(
     seriesProp === undefined ? [{ key: 'default', value: value }] : seriesProp
   );
@@ -231,7 +246,7 @@
   // Reading context.series.allSeriesData here would create a derived_references_self cycle:
   //   SeriesState.#series → ChartState.props → data={visibleData} → chartData → context.series.allSeriesData → #series
   const chartData = $derived.by(() => {
-    const seriesData = series.flatMap((s) => s.data ?? []);
+    const seriesData = series.flatMap((s) => ('data' in s ? s.data : undefined) ?? []);
     return (seriesData.length > 0 ? seriesData : chartDataArray(data)) as Array<TData>;
   });
 
@@ -245,7 +260,7 @@
 
   // Compute series colors locally to avoid derived_references_self cycle through context.series.allSeriesColors
   const allSeriesColors = $derived(
-    series.map((s) => s.color).filter((c) => c != null) as string[]
+    series.map((s) => ('color' in s ? s.color : undefined)).filter((c) => c != null) as string[]
   );
 
   // Custom tickFormat for PieChart legends - uses data labels instead of series labels
@@ -402,6 +417,29 @@
                       index: arcIdx,
                       seriesIndex: seriesIdx,
                     })}
+                  {:else if labelsConfig}
+                    <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)(arcData.data)}
+                          {...labelRest}
+                        />
+                      {/snippet}
+                    </Arc>
                   {:else}
                     <Arc {...arcProps} />
                   {/if}

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

@@ -4,6 +4,7 @@ import type { ChartState } from '../../contexts/chart.js';
 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';
 import Pie from '../Pie.svelte';
 export type PieChartExtraSnippetProps<TData> = {
@@ -19,6 +20,15 @@ export type PieChartProps<TData> = {
      */
     data?: TData[] | readonly TData[];
 } & 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;
+    });
     /**
      * The series data to be used for the chart.
      */

package/dist/components/index.d.ts

@@ -8,6 +8,8 @@ export { default as AnnotationRange } from './AnnotationRange.svelte';
 export * from './AnnotationRange.svelte';
 export { default as Arc } from './Arc.svelte';
 export * from './Arc.svelte';
+export { default as ArcLabel } from './ArcLabel.svelte';
+export * from './ArcLabel.svelte';
 export { default as Area } from './Area.svelte';
 export * from './Area.svelte';
 export { default as Axis } from './Axis.svelte';
@@ -68,6 +70,8 @@ export { default as GeoPath } from './GeoPath.svelte';
 export * from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';
 export * from './GeoPoint.svelte';
+export { default as GeoRaster } from './GeoRaster.svelte';
+export * from './GeoRaster.svelte';
 export { default as GeoSpline } from './GeoSpline.svelte';
 export * from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
@@ -92,6 +96,10 @@ export { default as Labels } from './Labels.svelte';
 export * from './Labels.svelte';
 export { default as Layer } from './layers/Layer.svelte';
 export * from './layers/Layer.svelte';
+export { default as CircleLegend } from './CircleLegend.svelte';
+export * from './CircleLegend.svelte';
+export { default as GeoLegend } from './GeoLegend.svelte';
+export * from './GeoLegend.svelte';
 export { default as Legend } from './Legend.svelte';
 export * from './Legend.svelte';
 export { default as Line } from './Line.svelte';

package/dist/components/index.js

@@ -8,6 +8,8 @@ export { default as AnnotationRange } from './AnnotationRange.svelte';
 export * from './AnnotationRange.svelte';
 export { default as Arc } from './Arc.svelte';
 export * from './Arc.svelte';
+export { default as ArcLabel } from './ArcLabel.svelte';
+export * from './ArcLabel.svelte';
 export { default as Area } from './Area.svelte';
 export * from './Area.svelte';
 export { default as Axis } from './Axis.svelte';
@@ -68,6 +70,8 @@ export { default as GeoPath } from './GeoPath.svelte';
 export * from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';
 export * from './GeoPoint.svelte';
+export { default as GeoRaster } from './GeoRaster.svelte';
+export * from './GeoRaster.svelte';
 export { default as GeoSpline } from './GeoSpline.svelte';
 export * from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
@@ -92,6 +96,10 @@ export { default as Labels } from './Labels.svelte';
 export * from './Labels.svelte';
 export { default as Layer } from './layers/Layer.svelte';
 export * from './layers/Layer.svelte';
+export { default as CircleLegend } from './CircleLegend.svelte';
+export * from './CircleLegend.svelte';
+export { default as GeoLegend } from './GeoLegend.svelte';
+export * from './GeoLegend.svelte';
 export { default as Legend } from './Legend.svelte';
 export * from './Legend.svelte';
 export { default as Line } from './Line.svelte';

package/dist/components/layers/Canvas.svelte

@@ -1,5 +1,11 @@
 <script lang="ts" module>
   import type { ComponentNode } from '../../contexts/chart.js';
+  import type { ChartState } from '../../states/chart.svelte.js';
+
+  type SSRCaptureTarget = {
+    chartState?: ChartState<any, any, any>;
+    rootNode?: ComponentNode;
+  };
 
   export type CanvasPropsWithoutHTML = {
     /**
@@ -80,6 +86,12 @@
      */
     debug?: boolean;
 
+    /** @internal Server-side capture target used by layerchart/server. */
+    ssrCapture?: SSRCaptureTarget;
+
+    /** @internal Server-side capture callback used by layerchart/server. */
+    ssrCaptureCallback?: (data: SSRCaptureTarget) => void;
+
     children?: Snippet<
       [{ ref: HTMLCanvasElement; canvasContext: CanvasRenderingContext2D | undefined }]
     >;
@@ -87,7 +99,6 @@
 
   export type CanvasProps = CanvasPropsWithoutHTML &
     Without<HTMLCanvasAttributes, CanvasPropsWithoutHTML>;
-
 </script>
 
 <script lang="ts">
@@ -107,10 +118,13 @@
     type CanvasContextValue,
     type ComponentRender,
   } from '../../contexts/canvas.js';
+  import { renderTree } from '../../server/renderTree.js';
 
   let {
     ref: refProp = $bindable(),
     canvasContext: canvasContextProp = $bindable(),
+    ssrCapture,
+    ssrCaptureCallback,
     willReadFrequently = false,
     debug = false,
     zIndex = 0,
@@ -183,9 +197,10 @@
     // Bubble up to ancestor groups
     let ancestor = node?.parent;
     while (ancestor) {
-      const handler = ancestor.kind === 'group'
-        ? ancestor.canvasRender?.events?.[eventName] as ((e: Event) => void) | null | undefined
-        : undefined;
+      const handler =
+        ancestor.kind === 'group'
+          ? (ancestor.canvasRender?.events?.[eventName] as ((e: Event) => void) | null | undefined)
+          : undefined;
       handler?.(e);
       ancestor = ancestor.parent;
     }
@@ -225,21 +240,23 @@
    */
 
   // Invalidate/redraw if color scheme changes, either via browser `prefers-color-scheme` (including emulation) or by changing `<html class="dark">` or `<html data-theme="...">`
-  const { dark } = new MediaQueryPresets();
-  watch(
-    () => dark.current,
-    () => {
-      canvasContext.invalidate();
-    }
-  );
-  useMutationObserver(
-    () => document.documentElement,
-    () => canvasContext.invalidate(),
-    {
-      attributes: true,
-      attributeFilter: ['class', 'data-theme'],
-    }
-  );
+  if (typeof window !== 'undefined') {
+    const { dark } = new MediaQueryPresets();
+    watch(
+      () => dark.current,
+      () => {
+        canvasContext.invalidate();
+      }
+    );
+    useMutationObserver(
+      () => document.documentElement,
+      () => canvasContext.invalidate(),
+      {
+        attributes: true,
+        attributeFilter: ['class', 'data-theme'],
+      }
+    );
+  }
 
   onMount(() => {
     context = ref?.getContext('2d', { willReadFrequently }) as CanvasRenderingContext2D;
@@ -310,33 +327,6 @@
     pendingInvalidation = false;
   }
 
-  /**
-   * Recursively render the component tree.
-   * Group nodes: save → render (translate/opacity) → recurse children → restore
-   * Leaf nodes: save → render → restore
-   */
-  function renderTree(canvasCtx: CanvasRenderingContext2D, node: ComponentNode) {
-    if (node.kind === 'group' && node.canvasRender) {
-      // Group: save state, apply transform, render children, restore
-      canvasCtx.save();
-      node.canvasRender.render(canvasCtx);
-      for (const child of node.children) {
-        renderTree(canvasCtx, child);
-      }
-      canvasCtx.restore();
-    } else if (node.canvasRender) {
-      // Leaf mark: save, render, restore
-      canvasCtx.save();
-      node.canvasRender.render(canvasCtx);
-      canvasCtx.restore();
-    } else {
-      // Non-rendering node (e.g. root, composite-mark): just recurse children
-      for (const child of node.children) {
-        renderTree(canvasCtx, child);
-      }
-    }
-  }
-
   function nodeHasEvents(node: ComponentNode) {
     return node.canvasRender?.events && Object.values(node.canvasRender.events).some((d) => d);
   }
@@ -345,7 +335,11 @@
    * Recursively render the hit canvas tree for pointer event detection.
    * Renders components that have event handlers (or whose ancestor group does), using unique colors.
    */
-  function renderHitTree(hitCtx: CanvasRenderingContext2D, node: ComponentNode, ancestorHasEvents = false) {
+  function renderHitTree(
+    hitCtx: CanvasRenderingContext2D,
+    node: ComponentNode,
+    ancestorHasEvents = false
+  ) {
     if (node.kind === 'group' && node.canvasRender) {
       const groupHasEvents = ancestorHasEvents || nodeHasEvents(node);
       // Group: apply transform, recurse children (scoped by save/restore)
@@ -383,11 +377,33 @@
 
     function invalidate() {
       if (pendingInvalidation) return;
+      if (typeof requestAnimationFrame === 'undefined') return;
       pendingInvalidation = true;
       frameId = requestAnimationFrame(update);
     }
 
-    return { register, invalidate };
+    function getRootNode() {
+      return rootNode;
+    }
+
+    return { register, invalidate, getRootNode };
+  }
+
+  function captureSSR() {
+    if (typeof window !== 'undefined') return '';
+    if (!ssrCapture && !ssrCaptureCallback) return '';
+
+    const captured: SSRCaptureTarget = {
+      chartState: ctx,
+      rootNode,
+    };
+
+    if (ssrCapture) {
+      Object.assign(ssrCapture, captured);
+    }
+
+    ssrCaptureCallback?.(captured);
+    return '';
   }
 
   const canvasContext = createCanvasContext();
@@ -457,6 +473,7 @@
 <canvas bind:this={hitCanvasElement} class="lc-hit-canvas" class:debug></canvas>
 
 {@render children?.({ ref, canvasContext: context })}
+{captureSSR()}
 
 <style>
   @layer base {

package/dist/components/layers/Canvas.svelte.d.ts

@@ -1,3 +1,9 @@
+import type { ComponentNode } from '../../contexts/chart.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+type SSRCaptureTarget = {
+    chartState?: ChartState<any, any, any>;
+    rootNode?: ComponentNode;
+};
 export type CanvasPropsWithoutHTML = {
     /**
      * The `<canvas>` tag. Useful for bindings.
@@ -67,6 +73,10 @@ export type CanvasPropsWithoutHTML = {
      * @default false
      */
     debug?: boolean;
+    /** @internal Server-side capture target used by layerchart/server. */
+    ssrCapture?: SSRCaptureTarget;
+    /** @internal Server-side capture callback used by layerchart/server. */
+    ssrCaptureCallback?: (data: SSRCaptureTarget) => void;
     children?: Snippet<[
         {
             ref: HTMLCanvasElement;

package/dist/contexts/canvas.d.ts

@@ -1,5 +1,6 @@
 import type { MouseEventHandler, PointerEventHandler, TouchEventHandler } from 'svelte/elements';
 import type { ComputedStylesOptions } from '../utils/canvas.js';
+import type { ComponentNode } from '../states/chart.svelte.js';
 export type ComponentRender<T extends Element = Element> = {
     render: (ctx: CanvasRenderingContext2D, styleOverrides?: ComputedStylesOptions) => any;
     events?: {
@@ -26,6 +27,8 @@ export type CanvasContextValue = {
      */
     register<T extends Element>(component: ComponentRender<T>): () => void;
     invalidate(): void;
+    /** Get the root ComponentNode of the canvas render tree. Used for server-side rendering. */
+    getRootNode?: () => ComponentNode;
 };
 export declare function getCanvasContext(): CanvasContextValue;
 export declare function setCanvasContext(context: CanvasContextValue): CanvasContextValue;

package/dist/server/ContextCapture.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { getChartContext } from '../contexts/chart.js';
+  import { getCanvasContext } from '../contexts/canvas.js';
+  import { setSSRCapture, type CaptureTarget } from './captureStore.js';
+
+  let {
+    capture,
+    onCapture,
+  }: {
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+  } = $props();
+
+  const chartState = getChartContext();
+  const canvasCtx = getCanvasContext();
+
+  const captured = {
+    chartState,
+    rootNode: canvasCtx.getRootNode?.(),
+  };
+
+  if (typeof window === 'undefined') {
+    if (capture) {
+      Object.assign(capture, captured);
+    }
+
+    setSSRCapture(captured);
+    onCapture?.(captured);
+  }
+</script>

package/dist/server/ContextCapture.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type CaptureTarget } from './captureStore.js';
+type $$ComponentProps = {
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+};
+declare const ContextCapture: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContextCapture = ReturnType<typeof ContextCapture>;
+export default ContextCapture;

package/dist/server/ServerChart.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Chart from '../components/Chart.svelte';
+  import type { ChartProps } from '../components/Chart.svelte';
+  import Canvas from '../components/layers/Canvas.svelte';
+  import type { CaptureTarget } from './captureStore.js';
+
+  let {
+    children,
+    capture,
+    onCapture,
+    ...chartProps
+  }: {
+    children?: Snippet;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+  } & Omit<ChartProps<any>, 'children'> = $props();
+</script>
+
+<Chart ssr={true} {...chartProps}>
+  <Canvas ssrCapture={capture} ssrCaptureCallback={onCapture}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </Canvas>
+</Chart>

package/dist/server/ServerChart.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { ChartProps } from '../components/Chart.svelte';
+import type { CaptureTarget } from './captureStore.js';
+type $$ComponentProps = {
+    children?: Snippet;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+} & Omit<ChartProps<any>, 'children'>;
+declare const ServerChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type ServerChart = ReturnType<typeof ServerChart>;
+export default ServerChart;

package/dist/server/TestBarChart.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { scaleBand } from 'd3-scale';
+	import ServerChart from './ServerChart.svelte';
+	import type { CaptureTarget } from './captureStore.js';
+	import Bars from '../components/Bars.svelte';
+
+	let {
+		data,
+		width,
+		height,
+		capture,
+		onCapture
+	}: {
+		data: { category: string; value: number }[];
+		width: number;
+		height: number;
+		capture?: CaptureTarget;
+		onCapture?: (data: CaptureTarget) => void;
+	} = $props();
+</script>
+
+<ServerChart
+	{capture}
+	{onCapture}
+	{width}
+	{height}
+	{data}
+	x="category"
+	xScale={scaleBand().paddingInner(0.2).paddingOuter(0.1)}
+	y="value"
+	yDomain={[0, null]}
+	padding={{ top: 20, right: 20, bottom: 30, left: 40 }}
+>
+	<Bars fill="rgb(59, 130, 246)" radius={4} />
+</ServerChart>

package/dist/server/TestBarChart.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { CaptureTarget } from './captureStore.js';
+type $$ComponentProps = {
+    data: {
+        category: string;
+        value: number;
+    }[];
+    width: number;
+    height: number;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+};
+declare const TestBarChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type TestBarChart = ReturnType<typeof TestBarChart>;
+export default TestBarChart;

package/dist/server/TestLineChart.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import ServerChart from './ServerChart.svelte';
+	import type { CaptureTarget } from './captureStore.js';
+	import Area from '../components/Area.svelte';
+	import Spline from '../components/Spline.svelte';
+
+	let {
+		data,
+		width,
+		height,
+		capture,
+		onCapture
+	}: {
+		data: { date: number; value: number }[];
+		width: number;
+		height: number;
+		capture?: CaptureTarget;
+		onCapture?: (data: CaptureTarget) => void;
+	} = $props();
+</script>
+
+<ServerChart
+	{capture}
+	{onCapture}
+	{width}
+	{height}
+	{data}
+	x="date"
+	y="value"
+	yDomain={[0, null]}
+	padding={{ top: 20, right: 20, bottom: 20, left: 20 }}
+>
+	<Area fill="rgba(59, 130, 246, 0.15)" stroke="none" />
+	<Spline stroke="rgb(59, 130, 246)" strokeWidth={2} />
+</ServerChart>

package/dist/server/TestLineChart.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { CaptureTarget } from './captureStore.js';
+type $$ComponentProps = {
+    data: {
+        date: number;
+        value: number;
+    }[];
+    width: number;
+    height: number;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+};
+declare const TestLineChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type TestLineChart = ReturnType<typeof TestLineChart>;
+export default TestLineChart;

package/dist/server/captureStore.d.ts

@@ -0,0 +1,8 @@
+import type { ChartState, ComponentNode } from '../states/chart.svelte.js';
+export type CaptureTarget = {
+    chartState?: ChartState;
+    rootNode?: ComponentNode;
+};
+export type SSRCapture = CaptureTarget | null;
+export declare function setSSRCapture(target: SSRCapture): void;
+export declare function getSSRCapture(): SSRCapture;

package/dist/server/captureStore.js

@@ -0,0 +1,18 @@
+const SSR_CAPTURE_KEY = Symbol.for('layerchart.ssr-capture');
+let _capture = null;
+function getGlobalCaptureStore() {
+    return globalThis;
+}
+export function setSSRCapture(target) {
+    _capture = target;
+    const globalStore = getGlobalCaptureStore();
+    if (target == null) {
+        delete globalStore[SSR_CAPTURE_KEY];
+    }
+    else {
+        globalStore[SSR_CAPTURE_KEY] = target;
+    }
+}
+export function getSSRCapture() {
+    return getGlobalCaptureStore()[SSR_CAPTURE_KEY] ?? _capture;
+}