layerchart 2.0.0-next.50 → 2.0.0-next.51

package/dist/components/Axis.svelte

@@ -101,6 +101,18 @@
      */
     scale?: any;
 
+    /**
+     * Stroke color for axis rule, grid lines, and tick marks.
+     * Useful for server-side rendering where CSS variables are not available.
+     */
+    stroke?: string;
+
+    /**
+     * Fill color for tick labels and axis label.
+     * Useful for server-side rendering where CSS variables are not available.
+     */
+    fill?: string;
+
     /**
      * Classes for styling various parts of the axis
      * @default {}
@@ -156,6 +168,8 @@
     tickMarks = true,
     format,
     tickLabelProps,
+    stroke,
+    fill,
     motion,
     transitionIn,
     transitionInParams,
@@ -168,6 +182,8 @@
 
   const ctx = getChartContext();
 
+  ctx.registerComponent({ name: 'Axis', kind: 'composite-mark' });
+
   const orientation = $derived(
     placement === 'angle'
       ? 'angle'
@@ -465,6 +481,8 @@
     // complement 10px text (until Text supports custom styles)
     capHeight: '7px',
     lineHeight: '11px',
+    fill,
+    stroke,
     ...labelProps,
     class: cls('lc-axis-label', classes.label, labelProps?.class),
   }) satisfies ComponentProps<typeof Text>;
@@ -479,6 +497,7 @@
     <Rule
       x={placement === 'left' ? '$left' : placement === 'right' ? '$right' : placement === 'angle'}
       y={placement === 'top' ? '$top' : placement === 'bottom' ? '$bottom' : placement === 'radius'}
+      {stroke}
       {motion}
       {...extractLayerProps(rule, 'lc-axis-rule', classes.rule ?? '')}
     />
@@ -506,6 +525,8 @@
       // complement 10px text (until Text supports custom styles)
       capHeight: '7px',
       lineHeight: '11px',
+      fill,
+      stroke,
       ...tickLabelProps,
       class: cls('lc-axis-tick-label', classes.tickLabel, tickLabelProps?.class),
     }}
@@ -515,6 +536,7 @@
         <Rule
           x={orientation === 'horizontal' || orientation === 'angle' ? tick : false}
           y={orientation === 'vertical' || orientation === 'radius' ? tick : false}
+          {stroke}
           {motion}
           {...extractLayerProps(grid, 'lc-axis-grid', classes.rule ?? '')}
         />
@@ -528,6 +550,7 @@
             y1={tickCoords.y}
             x2={tickCoords.x}
             y2={tickCoords.y + (placement === 'top' ? -tickLength : tickLength)}
+            {stroke}
             {motion}
             class={tickClasses}
           />
@@ -537,6 +560,7 @@
             y1={tickCoords.y}
             x2={tickCoords.x + (placement === 'left' ? -tickLength : tickLength)}
             y2={tickCoords.y}
+            {stroke}
             {motion}
             class={tickClasses}
           />
@@ -546,6 +570,7 @@
             y1={radialTickCoordsY}
             x2={radialTickMarkCoordsX}
             y2={radialTickMarkCoordsY}
+            {stroke}
             {motion}
             class={tickClasses}
           />

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

@@ -87,6 +87,16 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
      * Override scale for the axis
      */
     scale?: any;
+    /**
+     * Stroke color for axis rule, grid lines, and tick marks.
+     * Useful for server-side rendering where CSS variables are not available.
+     */
+    stroke?: string;
+    /**
+     * Fill color for tick labels and axis label.
+     * Useful for server-side rendering where CSS variables are not available.
+     */
+    fill?: string;
     /**
      * Classes for styling various parts of the axis
      * @default {}

package/dist/components/Circle.svelte

@@ -95,7 +95,13 @@
   import { untrack } from 'svelte';
   import { createMotion, createDataMotionMap, type MotionProp } from '../utils/motion.svelte.js';
   import { renderCircle, type ComputedStylesOptions } from '../utils/canvas.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 type { SVGAttributes } from 'svelte/elements';
@@ -130,9 +136,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 pixel coordinates
   function resolveCircle(d: any) {
@@ -201,21 +205,16 @@
 
   const layerCtx = getLayerContext();
 
-  const motionCx = createMotion(
-    initialCx,
-    () => (typeof cx === 'number' ? cx : 0),
-    motion
-  );
-  const motionCy = createMotion(
-    initialCy,
-    () => (typeof cy === 'number' ? cy : 0),
-    motion
-  );
-  const motionR = createMotion(
-    initialR,
-    () => (typeof r === 'number' ? r : 1),
-    motion
-  );
+  const motionCx = createMotion(initialCx, () => (typeof cx === 'number' ? cx : 0), motion);
+  const motionCy = createMotion(initialCy, () => (typeof cy === 'number' ? cy : 0), motion);
+  const motionR = createMotion(initialR, () => (typeof r === 'number' ? r : 1), 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);
 
   // Style options (shared between pixel and data mode)
   function getStyleOptions(
@@ -228,16 +227,29 @@
     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),
           },
-          classes: cls('lc-circle', itemClass ?? (typeof className === 'string' ? className : undefined)),
+          classes: cls(
+            'lc-circle',
+            itemClass ?? (typeof className === 'string' ? className : undefined)
+          ),
           style: restProps.style as string | undefined,
         };
   }
@@ -254,7 +266,15 @@
         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, resolvedStrokeWidth, resolvedOpacity, resolvedClass);
+        const styleOpts = getStyleOptions(
+          styleOverrides,
+          resolvedFill,
+          resolvedStroke,
+          resolvedFillOpacity,
+          resolvedStrokeWidth,
+          resolvedOpacity,
+          resolvedClass
+        );
         renderCircle(ctx, item, styleOpts);
       }
     } else {
@@ -284,30 +304,33 @@
         color: typeof fill === 'string' ? fill : undefined,
       };
     },
-    canvasRender: layerCtx === 'canvas' ? {
-      render,
-      events: {
-        click: restProps.onclick,
-        pointerdown: restProps.onpointerdown,
-        pointerenter: restProps.onpointerenter,
-        pointermove: restProps.onpointermove,
-        pointerleave: restProps.onpointerleave,
-      },
-      deps: () => [
-        dataMode,
-        dataMode ? resolvedItems : null,
-        motionCx.current,
-        motionCy.current,
-        motionR.current,
-        fillKey!.current,
-        fillOpacity,
-        strokeKey!.current,
-        strokeWidth,
-        opacity,
-        className,
-        restProps.style,
-      ],
-    } : undefined,
+    canvasRender:
+      layerCtx === 'canvas'
+        ? {
+            render,
+            events: {
+              click: restProps.onclick,
+              pointerdown: restProps.onpointerdown,
+              pointerenter: restProps.onpointerenter,
+              pointermove: restProps.onpointermove,
+              pointerleave: restProps.onpointerleave,
+            },
+            deps: () => [
+              dataMode,
+              dataMode ? resolvedItems : null,
+              motionCx.current,
+              motionCy.current,
+              motionR.current,
+              fillKey!.current,
+              fillOpacity,
+              strokeKey!.current,
+              strokeWidth,
+              opacity,
+              className,
+              restProps.style,
+            ],
+          }
+        : undefined,
   });
 </script>
 
@@ -339,12 +362,12 @@
       cx={motionCx.current}
       cy={motionCy.current}
       r={motionR.current}
-      fill={fill as string}
-      fill-opacity={fillOpacity as number}
-      stroke={stroke as string}
-      stroke-width={strokeWidth as number}
-      opacity={opacity as number}
-      class={cls('lc-circle', className as string)}
+      fill={staticFill}
+      fill-opacity={staticFillOpacity}
+      stroke={staticStroke}
+      stroke-width={staticStrokeWidth}
+      opacity={staticOpacity}
+      class={cls('lc-circle', staticClassName)}
       {...restProps}
     />
   {/if}
@@ -382,13 +405,13 @@
       style:width="{motionR.current * 2}px"
       style:height="{motionR.current * 2}px"
       style:border-radius="50%"
-      style:background-color={fill as string}
-      style:opacity={opacity as number}
-      style:border-width={strokeWidth as number}
-      style:border-color={stroke as string}
+      style:background-color={staticFill}
+      style:opacity={staticOpacity}
+      style:border-width={staticStrokeWidth}
+      style:border-color={staticStroke}
       style:border-style="solid"
       style:transform="translate(-50%, -50%)"
-      class={cls('lc-circle', className as string)}
+      class={cls('lc-circle', staticClassName)}
       {...restProps}
     >
       {@render children?.()}

package/dist/components/Ellipse.svelte

@@ -108,7 +108,13 @@
   import { getChartContext } from '../contexts/chart.js';
   import { createMotion, createDataMotionMap, type MotionProp } from '../utils/motion.svelte.js';
   import { renderEllipse, type ComputedStylesOptions } from '../utils/canvas.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 type { SVGAttributes } from 'svelte/elements';
@@ -144,9 +150,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 pixel coordinates
   function resolveEllipse(d: any) {
@@ -217,26 +221,10 @@
 
   const layerCtx = getLayerContext();
 
-  const motionCx = createMotion(
-    initialCx,
-    () => (typeof cx === 'number' ? cx : 0),
-    motion
-  );
-  const motionCy = createMotion(
-    initialCy,
-    () => (typeof cy === 'number' ? cy : 0),
-    motion
-  );
-  const motionRx = createMotion(
-    initialRx,
-    () => (typeof rx === 'number' ? rx : 1),
-    motion
-  );
-  const motionRy = createMotion(
-    initialRy,
-    () => (typeof ry === 'number' ? ry : 1),
-    motion
-  );
+  const motionCx = createMotion(initialCx, () => (typeof cx === 'number' ? cx : 0), motion);
+  const motionCy = createMotion(initialCy, () => (typeof cy === 'number' ? cy : 0), motion);
+  const motionRx = createMotion(initialRx, () => (typeof rx === 'number' ? rx : 1), motion);
+  const motionRy = createMotion(initialRy, () => (typeof ry === 'number' ? ry : 1), motion);
 
   function getStyleOptions(
     styleOverrides: ComputedStylesOptions | undefined,
@@ -248,16 +236,29 @@
     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),
           },
-          classes: cls('lc-ellipse', itemClass ?? (typeof className === 'string' ? className : undefined)),
+          classes: cls(
+            'lc-ellipse',
+            itemClass ?? (typeof className === 'string' ? className : undefined)
+          ),
         };
   }
 
@@ -273,7 +274,15 @@
         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, resolvedStrokeWidth, resolvedOpacity, resolvedClass);
+        const styleOpts = getStyleOptions(
+          styleOverrides,
+          resolvedFill,
+          resolvedStroke,
+          resolvedFillOpacity,
+          resolvedStrokeWidth,
+          resolvedOpacity,
+          resolvedClass
+        );
         renderEllipse(ctx, item, styleOpts);
       }
     } else {
@@ -295,6 +304,13 @@
   const fillKey = layerCtx === 'canvas' ? createKey(() => fill) : undefined;
   const strokeKey = layerCtx === 'canvas' ? createKey(() => stroke) : undefined;
 
+  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);
+
   chartCtx.registerComponent({
     name: 'Ellipse',
     kind: 'mark',
@@ -307,30 +323,33 @@
         color: typeof fill === 'string' ? fill : typeof stroke === 'string' ? stroke : undefined,
       };
     },
-    canvasRender: layerCtx === 'canvas' ? {
-      render,
-      events: {
-        click: restProps.onclick,
-        pointerdown: restProps.onpointerdown,
-        pointerenter: restProps.onpointerenter,
-        pointermove: restProps.onpointermove,
-        pointerleave: restProps.onpointerleave,
-      },
-      deps: () => [
-        dataMode,
-        dataMode ? resolvedItems : null,
-        motionCx.current,
-        motionCy.current,
-        motionRx.current,
-        motionRy.current,
-        fillKey!.current,
-        fillOpacity,
-        strokeKey!.current,
-        strokeWidth,
-        opacity,
-        className,
-      ],
-    } : undefined,
+    canvasRender:
+      layerCtx === 'canvas'
+        ? {
+            render,
+            events: {
+              click: restProps.onclick,
+              pointerdown: restProps.onpointerdown,
+              pointerenter: restProps.onpointerenter,
+              pointermove: restProps.onpointermove,
+              pointerleave: restProps.onpointerleave,
+            },
+            deps: () => [
+              dataMode,
+              dataMode ? resolvedItems : null,
+              motionCx.current,
+              motionCy.current,
+              motionRx.current,
+              motionRy.current,
+              fillKey!.current,
+              fillOpacity,
+              strokeKey!.current,
+              strokeWidth,
+              opacity,
+              className,
+            ],
+          }
+        : undefined,
   });
 </script>
 
@@ -364,12 +383,12 @@
       cy={motionCy.current}
       rx={motionRx.current}
       ry={motionRy.current}
-      fill={fill as string}
-      fill-opacity={fillOpacity as number}
-      stroke={stroke as string}
-      stroke-width={strokeWidth as number}
-      opacity={opacity as number}
-      class={cls('lc-ellipse', className as string)}
+      fill={staticFill}
+      fill-opacity={staticFillOpacity}
+      stroke={staticStroke}
+      stroke-width={staticStrokeWidth}
+      opacity={staticOpacity}
+      class={cls('lc-ellipse', staticClassName)}
       {...restProps}
     />
   {/if}
@@ -407,13 +426,13 @@
       style:width="{motionRx.current * 2}px"
       style:height="{motionRy.current * 2}px"
       style:border-radius="50%"
-      style:background-color={fill as string}
-      style:opacity={opacity as number}
-      style:border-width={strokeWidth as number}
-      style:border-color={stroke as string}
+      style:background-color={staticFill}
+      style:opacity={staticOpacity}
+      style:border-width={staticStrokeWidth}
+      style:border-color={staticStroke}
       style:border-style="solid"
       style:transform="translate(-50%, -50%)"
-      class={cls('lc-ellipse', className as string)}
+      class={cls('lc-ellipse', staticClassName)}
       {...restProps}
     ></div>
   {/if}