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

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/CircleLegend.svelte

@@ -0,0 +1,389 @@
+<script lang="ts" module>
+  import type { Placement } from './types.js';
+  import { asAny, type Without } from '../utils/types.js';
+
+  export type CircleLegendPropsWithoutHTML = {
+    /**
+     * The scale to use for the legend. Defaults to the chart's `rScale`.
+     */
+    scale?: AnyScale;
+
+    /**
+     * The title of the legend.
+     *
+     * @default ''
+     */
+    title?: string;
+
+    /**
+     * The number of ticks to show.
+     *
+     * @default 4
+     */
+    ticks?: number;
+
+    /**
+     * Explicit tick values to show. Overrides `ticks`.
+     */
+    tickValues?: number[];
+
+    /**
+     * Format for the tick labels.
+     */
+    tickFormat?: FormatType | FormatConfig;
+
+    /**
+     * The font size of the tick labels.
+     *
+     * @default 10
+     */
+    tickFontSize?: number;
+
+    /**
+     * The font size of the title.
+     *
+     * @default 10
+     */
+    titleFontSize?: number;
+
+    /**
+     * Width reserved for the tick labels next to the circles.
+     *
+     * @default 40
+     */
+    labelWidth?: number;
+
+    /**
+     * Gap between the top of each circle and the leader line/label.
+     *
+     * @default 4
+     */
+    labelGap?: number;
+
+    /**
+     * Where to render the tick labels.
+     * - `'right'` / `'left'`: outside the circles with a leader line
+     * - `'inline'`: centered inside each circle, near the top
+     *
+     * @default 'right'
+     */
+    labelPlacement?: 'left' | 'right' | 'inline';
+
+    /**
+     * The placement of the legend.
+     */
+    placement?: Placement;
+
+    /**
+     * The fill color of the circles.
+     *
+     * @default 'none'
+     */
+    fill?: string;
+
+    /**
+     * The stroke color of the circles and leader lines.
+     *
+     * @default 'currentColor'
+     */
+    stroke?: string;
+
+    /**
+     * The stroke width of the circles.
+     *
+     * @default 1
+     */
+    strokeWidth?: number;
+
+    /**
+     * Value to indicate on the legend (e.g. the currently hovered data point).
+     * When set, a 50%-opacity filled circle is drawn at this value's radius.
+     * Defaults to auto-detecting from `ctx.tooltip.data` via the chart's
+     * radius accessor (`ctx.r`).
+     */
+    value?: number | null;
+
+    /**
+     * Classes to apply to the elements.
+     *
+     * @default {}
+     */
+    classes?: {
+      root?: string;
+      title?: string;
+      circle?: string;
+      tick?: string;
+      label?: string;
+    };
+
+    /**
+     * A bindable reference to the wrapping `<div>` element.
+     *
+     * @bindable
+     */
+    ref?: HTMLElement;
+  };
+
+  export type CircleLegendProps = CircleLegendPropsWithoutHTML &
+    Without<HTMLAttributes<HTMLElement>, CircleLegendPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { format, type FormatType, type FormatConfig } from '@layerstack/utils';
+
+  import { cls } from '@layerstack/tailwind';
+  import type { AnyScale } from '../utils/scales.svelte.js';
+  import { getChartContext } from '../contexts/chart.js';
+
+  let {
+    scale: scaleProp,
+    title = '',
+    ticks = 4,
+    tickValues: tickValuesProp,
+    tickFormat: tickFormatProp,
+    tickFontSize = 10,
+    titleFontSize = 10,
+    labelWidth = 40,
+    labelGap = 4,
+    labelPlacement = 'right',
+    placement,
+    fill = 'none',
+    stroke = 'currentColor',
+    strokeWidth = 1,
+    value: valueProp,
+    classes = {},
+    ref: refProp = $bindable(),
+    class: className,
+    ...restProps
+  }: CircleLegendProps = $props();
+
+  let ref = $state<HTMLElement>();
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  const ctx = getChartContext();
+
+  const scale = $derived(scaleProp ?? ctx.rScale);
+
+  const tickValues = $derived.by(() => {
+    if (tickValuesProp) return tickValuesProp;
+    if (!scale) return [] as number[];
+
+    // Prefer scale.ticks (continuous scales) and pick the largest `ticks` positive values
+    if (typeof (scale as any).ticks === 'function') {
+      const all = ((scale as any).ticks(ticks) as number[]).filter((v) => Number(scale(v)) > 0);
+      if (all.length >= 2) {
+        return all.slice(-ticks);
+      }
+    }
+
+    // Fallback: derive evenly spaced values from the domain extent
+    const domain = scale.domain() as number[];
+    const min = Number(domain[0]);
+    const max = Number(domain[domain.length - 1]);
+    const n = Math.max(2, ticks);
+    return Array.from({ length: n }, (_, i) => min + ((max - min) * (i + 1)) / n);
+  });
+
+  const items = $derived.by(() => {
+    if (!scale) return [] as Array<{ value: number; radius: number }>;
+    return tickValues
+      .map((value) => ({ value, radius: Number(scale(value)) }))
+      .filter((d) => Number.isFinite(d.radius) && d.radius > 0)
+      .sort((a, b) => b.radius - a.radius);
+  });
+
+  const maxRadius = $derived(items[0]?.radius ?? 0);
+
+  // Indicator for the currently hovered value. If `value` is explicitly
+  // provided, use it; otherwise fall back to `ctx.tooltip.data` piped through
+  // the chart's radius accessor (`ctx.r`).
+  const indicatorRadius = $derived.by(() => {
+    if (!scale) return null;
+    let value: any = valueProp;
+    if (value == null) {
+      const data = ctx.tooltip?.data;
+      if (data == null) return null;
+      value = ctx.r?.(data);
+    }
+    if (value == null) return null;
+    const r = Number(scale(value));
+    if (!Number.isFinite(r) || r <= 0) return null;
+    return r;
+  });
+
+  const padding = $derived(Math.ceil(strokeWidth / 2));
+  const titleHeight = $derived(title ? titleFontSize + 6 : 0);
+  const width = $derived(
+    labelPlacement === 'inline'
+      ? maxRadius * 2 + padding * 2
+      : maxRadius * 2 + padding * 2 + labelGap + labelWidth
+  );
+  const svgHeight = $derived(maxRadius * 2 + padding * 2 + titleHeight);
+  const cx = $derived(
+    labelPlacement === 'left' ? labelWidth + labelGap + maxRadius + padding : maxRadius + padding
+  );
+  const baseY = $derived(maxRadius * 2 + padding + titleHeight);
+
+  // Leader line / label x positions (only used for left/right placement)
+  const labelLineX = $derived(
+    labelPlacement === 'left' ? cx - maxRadius - labelGap : cx + maxRadius + labelGap
+  );
+  const labelTextX = $derived(
+    labelPlacement === 'inline' ? cx : labelPlacement === 'left' ? labelLineX - 2 : labelLineX + 2
+  );
+  const labelTextAnchor = $derived(
+    labelPlacement === 'inline' ? 'middle' : labelPlacement === 'left' ? 'end' : 'start'
+  );
+</script>
+
+<div
+  bind:this={ref}
+  {...restProps}
+  data-placement={placement}
+  class={cls('lc-circle-legend-container', className, classes.root)}
+>
+  {#if items.length}
+    <svg {width} height={svgHeight} viewBox="0 0 {width} {svgHeight}" class="lc-circle-legend-svg">
+      {#if title}
+        <text
+          x={cx}
+          y={titleFontSize}
+          text-anchor="middle"
+          style:font-size={titleFontSize}
+          class={cls('lc-circle-legend-title', classes.title)}
+        >
+          {title}
+        </text>
+      {/if}
+      <g class="lc-circle-legend-g">
+        {#if indicatorRadius != null}
+          <circle
+            {cx}
+            cy={baseY - indicatorRadius}
+            r={indicatorRadius}
+            fill={stroke}
+            fill-opacity="0.5"
+            class={cls('lc-circle-legend-indicator')}
+          />
+        {/if}
+        {#each items as item (item.value)}
+          <circle
+            {cx}
+            cy={baseY - item.radius}
+            r={item.radius}
+            {fill}
+            {stroke}
+            stroke-width={strokeWidth}
+            class={cls('lc-circle-legend-circle', classes.circle)}
+          />
+          {#if labelPlacement !== 'inline'}
+            <line
+              x1={cx}
+              y1={baseY - item.radius * 2}
+              x2={labelLineX}
+              y2={baseY - item.radius * 2}
+              {stroke}
+              stroke-dasharray="2,2"
+              class={cls('lc-circle-legend-tick', classes.tick)}
+            />
+          {/if}
+          <text
+            x={labelTextX}
+            y={labelPlacement === 'inline'
+              ? baseY - item.radius * 2 + tickFontSize
+              : baseY - item.radius * 2}
+            text-anchor={labelTextAnchor}
+            dominant-baseline={labelPlacement === 'inline' ? 'auto' : 'middle'}
+            style:font-size={tickFontSize}
+            class={cls('lc-circle-legend-label', classes.label)}
+          >
+            {tickFormatProp ? format(item.value, asAny(tickFormatProp)) : item.value}
+          </text>
+        {/each}
+      </g>
+    </svg>
+  {/if}
+</div>
+
+<style>
+  @layer components {
+    :where(.lc-circle-legend-container) {
+      display: inline-block;
+      z-index: 1;
+
+      &[data-placement] {
+        position: absolute;
+      }
+
+      &[data-placement='top-left'] {
+        top: 0;
+        left: 0;
+      }
+      &[data-placement='top'] {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      &[data-placement='top-right'] {
+        top: 0;
+        right: 0;
+      }
+      &[data-placement='left'] {
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+      }
+      &[data-placement='center'] {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+      &[data-placement='right'] {
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+      }
+      &[data-placement='bottom-left'] {
+        bottom: 0;
+        left: 0;
+      }
+      &[data-placement='bottom'] {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      &[data-placement='bottom-right'] {
+        bottom: 0;
+        right: 0;
+      }
+    }
+
+    :where(.lc-circle-legend-title) {
+      font-weight: 600;
+      fill: var(--color-surface-content, currentColor);
+    }
+
+    :where(.lc-circle-legend-svg) {
+      overflow: visible;
+    }
+
+    :where(.lc-circle-legend-label) {
+      fill: var(--color-surface-content, currentColor);
+    }
+
+    :where(.lc-circle-legend-tick) {
+      stroke: var(--color-surface-content, currentColor);
+    }
+
+    :where(.lc-circle-legend-circle) {
+      stroke: var(--color-surface-content, currentColor);
+    }
+
+    :where(.lc-circle-legend-indicator) {
+      fill: var(--color-surface-content, currentColor);
+    }
+  }
+</style>