layerchart 2.0.0-next.6 → 2.0.0-next.60

package/dist/components/Axis.svelte

@@ -33,16 +33,37 @@
     rule?: boolean | Partial<ComponentProps<typeof Rule>>;
 
     /**
-     * Draw grid lines
+     * Draw grid lines. Pass props (class, style, stroke, strokeWidth, opacity,
+     * dashArray) to forward onto the underlying grid line.
      * @default false
      */
-    grid?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    grid?:
+      | boolean
+      | (Pick<SVGAttributes<SVGElement>, 'class' | 'style'> & {
+          stroke?: string;
+          strokeWidth?: number;
+          opacity?: number;
+          dashArray?: number | number[] | string;
+        });
 
     /**
      * Control the number of ticks
      */
     ticks?: TicksConfig;
 
+    /**
+     * Width or height of each tick in pixels (enabling responsive count)
+     * @default 80 (top|bottom|angle) or 50 (left|right|radius)
+     */
+    tickSpacing?: number | null;
+
+    /**
+     * Whether to render tick labels on multiple lines for additional context
+     *
+     * @default false
+     */
+    tickMultiline?: boolean;
+
     /**
      * Length of the tick line
      * @default 4
@@ -59,7 +80,7 @@
     /**
      * Format tick labels
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
 
     /**
      * Props to apply to each tick label
@@ -84,10 +105,22 @@
     transitionInParams?: TransitionParams<In>;
 
     /**
-     * Scale for the axis
+     * 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 {}
@@ -113,8 +146,9 @@
 
   import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
+  import { timeDay, timeHour, timeMillisecond, timeMinute, timeSecond, timeYear } from 'd3-time';
 
-  import { format as formatValue, type FormatType } from '@layerstack/utils';
+  import { type FormatType, type FormatConfig, unique, PeriodType } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Group, { type GroupProps } from './Group.svelte';
@@ -123,10 +157,10 @@
   import Text from './Text.svelte';
   import { isScaleBand } from '../utils/scales.svelte.js';
 
-  import { getChartContext } from './Chart.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { getChartContext } from '../contexts/chart.js';
+  import { extractLayerProps } from '../utils/attributes.js';
   import { type MotionProp } from '../utils/motion.svelte.js';
-  import { resolveTickVals, type TicksConfig } from '../utils/ticks.js';
+  import { autoTickVals, autoTickFormat, type TicksConfig } from '../utils/ticks.js';
 
   let {
     placement,
@@ -136,10 +170,14 @@
     rule = false,
     grid = false,
     ticks,
+    tickSpacing: tickSpacingProp,
+    tickMultiline = false,
     tickLength = 4,
     tickMarks = true,
     format,
     tickLabelProps,
+    stroke,
+    fill,
     motion,
     transitionIn,
     transitionInParams,
@@ -152,6 +190,8 @@
 
   const ctx = getChartContext();
 
+  ctx.registerComponent({ name: 'Axis', kind: 'composite-mark' });
+
   const orientation = $derived(
     placement === 'angle'
       ? 'angle'
@@ -166,35 +206,161 @@
     scaleProp ?? (['horizontal', 'angle'].includes(orientation) ? ctx.xScale : ctx.yScale)
   );
 
+  const interval = $derived(
+    ['horizontal', 'angle'].includes(orientation) ? ctx.xInterval : ctx.yInterval
+  );
+
+  const defaultTickSpacing = $derived(
+    ['top', 'bottom', 'angle'].includes(placement)
+      ? 80
+      : ['left', 'right', 'radius'].includes(placement)
+        ? 50
+        : undefined
+  );
+
+  // Disable tick thinning for categorical band scales (no interval), but keep spacing for date-based band scales
+  const tickSpacing = $derived(
+    tickSpacingProp !== undefined
+      ? tickSpacingProp
+      : isScaleBand(scale) && interval == null
+        ? null
+        : defaultTickSpacing
+  );
+
+  // Default format to 'percentRound' for stackExpand layout considering axis direction
+  const resolvedFormat = $derived.by(() => {
+    if (format !== undefined) return format;
+
+    if (ctx.series.stackLayout === 'stackExpand') {
+      const isValueAxis =
+        (ctx.valueAxis === 'x' && ['horizontal', 'angle'].includes(orientation)) ||
+        (ctx.valueAxis === 'y' && ['vertical', 'radius'].includes(orientation));
+      if (isValueAxis) {
+        return 'percentRound';
+      }
+    }
+
+    return undefined;
+  });
+
   const xRangeMinMax = $derived(extent<number>(ctx.xRange)) as [number, number];
   const yRangeMinMax = $derived(extent<number>(ctx.yRange)) as [number, number];
 
-  const tickVals = $derived(resolveTickVals(scale, ticks, placement));
+  const ctxSize = $derived(
+    orientation === 'vertical'
+      ? ctx.height
+      : orientation === 'horizontal'
+        ? ctx.width
+        : orientation === 'radius'
+          ? ctx.height / 2
+          : orientation === 'angle'
+            ? ctx.width
+            : null
+  );
+
+  // For band scales with domain-mode transform, scale up effective size by the zoom factor
+  // so that more tick labels appear as bands get wider when zoomed in
+  const effectiveSize = $derived.by(() => {
+    if (!ctxSize) return ctxSize;
+    const ts = ctx.transformState;
+    if (ts?.mode === 'domain' && isScaleBand(scale) && ts.scale > 1) {
+      return ctxSize * ts.scale;
+    }
+    return ctxSize;
+  });
+
+  // Count used for tick thinning (null tickSpacing disables thinning)
+  const tickCount = $derived(
+    typeof ticks === 'number'
+      ? ticks
+      : tickSpacing && effectiveSize
+        ? Math.round(effectiveSize / tickSpacing)
+        : undefined
+  );
+
+  // Count used for formatting (always based on default spacing so time formatting works)
+  const formatCount = $derived(
+    typeof ticks === 'number'
+      ? ticks
+      : defaultTickSpacing && effectiveSize
+        ? Math.round(effectiveSize / defaultTickSpacing)
+        : undefined
+  );
+  const tickVals = $derived.by(() => {
+    let tickVals = autoTickVals(scale, ticks, tickCount);
+
+    if (interval != null) {
+      // Remove last tick when interval is provided (such as for bar charts with center aligned (offset) ticks)
+      tickVals.pop();
+    }
+
+    // Use format to filter ticks (helpful to keep ticks above a threshold for wide charts or short durations)
+    const formatType = typeof resolvedFormat === 'object' ? resolvedFormat?.type : resolvedFormat;
+
+    if (formatType === 'integer') {
+      tickVals = tickVals.filter(Number.isInteger);
+    } else if (formatType === 'year' || formatType === PeriodType.CalendarYear) {
+      tickVals = tickVals.filter((val) => +timeYear.floor(val) === +val);
+    } else if (
+      formatType === 'month' ||
+      formatType === PeriodType.Month ||
+      formatType === PeriodType.MonthYear
+    ) {
+      // tickVals = tickVals.filter((val) => +timeMonth.floor(val) === +val);
+      tickVals = tickVals.filter((val) => val.getDate() < 7); // first week of the month
+    } else if (formatType === 'day' || formatType === PeriodType.Day) {
+      tickVals = tickVals.filter((val) => +timeDay.floor(val) === +val);
+    } else if (formatType === 'hour' || formatType === PeriodType.Hour) {
+      tickVals = tickVals.filter((val) => +timeHour.floor(val) === +val);
+    } else if (formatType === 'minute' || formatType === PeriodType.Minute) {
+      tickVals = tickVals.filter((val) => +timeMinute.floor(val) === +val);
+    } else if (formatType === 'second' || formatType === PeriodType.Second) {
+      tickVals = tickVals.filter((val) => +timeSecond.floor(val) === +val);
+    } else if (formatType === 'millisecond' || formatType === PeriodType.Millisecond) {
+      tickVals = tickVals.filter((val) => +timeMillisecond.floor(val) === +val);
+    }
+
+    // Remove any duplicates (manually added)
+    return unique(tickVals);
+  });
+
+  const tickFormat = $derived(
+    autoTickFormat({
+      scale,
+      ticks,
+      count: formatCount,
+      formatType: resolvedFormat,
+      multiline: tickMultiline,
+      placement,
+    })
+  );
 
   function getCoords(tick: any) {
     switch (placement) {
       case 'top':
-        return {
-          x: scale(tick) + (isScaleBand(scale) ? scale.bandwidth() / 2 : 0),
-          y: yRangeMinMax[0],
-        };
-
       case 'bottom':
         return {
-          x: scale(tick) + (isScaleBand(scale) ? scale.bandwidth() / 2 : 0),
-          y: yRangeMinMax[1],
+          x:
+            scale(tick) +
+            (isScaleBand(scale)
+              ? scale.bandwidth() / 2
+              : ctx.xInterval
+                ? (scale(ctx.xInterval.offset(tick)) - scale(tick)) / 2 // offset 1/2 width of time interval
+                : 0),
+          y: placement === 'top' ? yRangeMinMax[0] : yRangeMinMax[1],
         };
 
       case 'left':
-        return {
-          x: xRangeMinMax[0],
-          y: scale(tick) + (isScaleBand(scale) ? scale.bandwidth() / 2 : 0),
-        };
-
       case 'right':
         return {
-          x: xRangeMinMax[1],
-          y: scale(tick) + (isScaleBand(scale) ? scale.bandwidth() / 2 : 0),
+          x: placement === 'left' ? xRangeMinMax[0] : xRangeMinMax[1],
+          y:
+            scale(tick) +
+            (isScaleBand(scale)
+              ? scale.bandwidth() / 2
+              : ctx.yInterval
+                ? (scale(ctx.yInterval.offset(tick)) - scale(tick)) / 2 // offset 1/2 height of time interval
+                : 0),
         };
 
       case 'angle':
@@ -217,14 +383,14 @@
         return {
           textAnchor: 'middle',
           verticalAnchor: 'end',
-          dy: -tickLength - 2, // manually adjusted until Text supports custom styles
+          dy: -tickLength,
         };
 
       case 'bottom':
         return {
           textAnchor: 'middle',
           verticalAnchor: 'start',
-          dy: tickLength, // manually adjusted until Text supports custom styles
+          dy: tickLength,
         };
 
       case 'left':
@@ -232,7 +398,6 @@
           textAnchor: 'end',
           verticalAnchor: 'middle',
           dx: -tickLength,
-          dy: -2, // manually adjusted until Text supports custom styles
         };
 
       case 'right':
@@ -240,7 +405,6 @@
           textAnchor: 'start',
           verticalAnchor: 'middle',
           dx: tickLength,
-          dy: -2, // manually adjusted until Text supports custom styles
         };
 
       case 'angle':
@@ -255,7 +419,7 @@
                 ? 'end'
                 : 'start',
           verticalAnchor: 'middle',
-          dx: Math.sin(xValue) * (tickLength + 2),
+          dx: Math.sin(xValue) * tickLength,
           dy: -Math.cos(xValue) * (tickLength + 4), // manually adjusted until Text supports custom styles
         };
 
@@ -264,7 +428,6 @@
           textAnchor: 'middle',
           verticalAnchor: 'middle',
           dx: 2,
-          dy: -2, // manually adjusted until Text supports custom styles
         };
     }
   }
@@ -317,36 +480,34 @@
   });
 
   const resolvedLabelProps = $derived({
-    value: typeof label === 'function' ? '' : undefined,
+    value: typeof label === 'function' ? '' : label,
     x: resolvedLabelX,
     y: resolvedLabelY,
     textAnchor: resolvedLabelTextAnchor,
     verticalAnchor: resolvedLabelVerticalAnchor,
     rotate: orientation === 'vertical' && labelPlacement === 'middle' ? -90 : 0,
-    capHeight: '.5rem', // text-[10px]
+    // complement 10px text (until Text supports custom styles)
+    capHeight: '7px',
+    lineHeight: '11px',
+    fill,
+    stroke,
     ...labelProps,
-    class: cls(
-      layerClass('axis-label'),
-      'text-[10px] stroke-surface-100 [stroke-width:2px] font-light',
-      classes.label,
-      labelProps?.class
-    ),
+    class: cls('lc-axis-label', classes.label, labelProps?.class),
   }) satisfies ComponentProps<typeof Text>;
 </script>
 
 <Group
   {...restProps}
   data-placement={placement}
-  class={cls(layerClass('axis'), `placement-${placement}`, classes.root, className)}
+  class={cls('lc-axis', `placement-${placement}`, classes.root, className)}
 >
   {#if rule !== false}
-    {@const ruleProps = extractLayerProps(rule, 'axis-rule')}
     <Rule
-      x={placement === 'left' || placement === 'right' ? placement : placement === 'angle'}
-      y={placement === 'top' || placement === 'bottom' ? placement : placement === 'radius'}
+      x={placement === 'left' ? '$left' : placement === 'right' ? '$right' : placement === 'angle'}
+      y={placement === 'top' ? '$top' : placement === 'bottom' ? '$bottom' : placement === 'radius'}
+      {stroke}
       {motion}
-      {...ruleProps}
-      class={cls('stroke-surface-content/50', classes.rule, ruleProps?.class)}
+      {...extractLayerProps(rule, 'lc-axis-rule', classes.rule ?? '')}
     />
   {/if}
 
@@ -356,7 +517,7 @@
     <Text {...resolvedLabelProps} />
   {/if}
 
-  {#each tickVals as tick, index (tick.toString())}
+  {#each tickVals as tick, index (tick.valueOf())}
     {@const tickCoords = getCoords(tick)}
     {@const [radialTickCoordsX, radialTickCoordsY] = pointRadial(tickCoords.x, tickCoords.y)}
     {@const [radialTickMarkCoordsX, radialTickMarkCoordsY] = pointRadial(
@@ -366,42 +527,38 @@
     {@const resolvedTickLabelProps = {
       x: orientation === 'angle' ? radialTickCoordsX : tickCoords.x,
       y: orientation === 'angle' ? radialTickCoordsY : tickCoords.y,
-      value: formatValue(tick, format ?? scale.tickFormat?.() ?? ((v) => v)),
+      value: tickFormat(tick, index),
       ...getDefaultTickLabelProps(tick),
       motion,
+      // complement 10px text (until Text supports custom styles)
+      capHeight: '7px',
+      lineHeight: '11px',
+      fill,
+      stroke,
       ...tickLabelProps,
-      class: cls(
-        layerClass('axis-tick-label'),
-        'text-[10px] stroke-surface-100 [stroke-width:2px] font-light',
-        classes.tickLabel,
-        tickLabelProps?.class
-      ),
+      class: cls('lc-axis-tick-label', classes.tickLabel, tickLabelProps?.class),
     }}
 
-    <Group {transitionIn} {transitionInParams} class={layerClass('axis-tick-group')}>
+    <Group {transitionIn} {transitionInParams} class="lc-axis-tick-group">
       {#if grid !== false}
-        {@const ruleProps = extractLayerProps(grid, 'axis-grid')}
         <Rule
           x={orientation === 'horizontal' || orientation === 'angle' ? tick : false}
           y={orientation === 'vertical' || orientation === 'radius' ? tick : false}
+          {stroke}
           {motion}
-          {...ruleProps}
-          class={cls('stroke-surface-content/10', classes.rule, ruleProps?.class)}
+          {...extractLayerProps(grid, 'lc-axis-grid', classes.rule ?? '')}
         />
       {/if}
 
       {#if tickMarks}
-        {@const tickClasses = cls(
-          layerClass('axis-tick'),
-          'stroke-surface-content/50',
-          classes.tick
-        )}
+        {@const tickClasses = cls('lc-axis-tick', classes.tick)}
         {#if orientation === 'horizontal'}
           <Line
             x1={tickCoords.x}
             y1={tickCoords.y}
             x2={tickCoords.x}
             y2={tickCoords.y + (placement === 'top' ? -tickLength : tickLength)}
+            {stroke}
             {motion}
             class={tickClasses}
           />
@@ -411,6 +568,7 @@
             y1={tickCoords.y}
             x2={tickCoords.x + (placement === 'left' ? -tickLength : tickLength)}
             y2={tickCoords.y}
+            {stroke}
             {motion}
             class={tickClasses}
           />
@@ -420,6 +578,7 @@
             y1={radialTickCoordsY}
             x2={radialTickMarkCoordsX}
             y2={radialTickMarkCoordsY}
+            {stroke}
             {motion}
             class={tickClasses}
           />
@@ -434,3 +593,38 @@
     </Group>
   {/each}
 </Group>
+
+<style>
+  @layer components {
+    :global(:where(.lc-axis-rule)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 50%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-axis-tick)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 50%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-axis-grid)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 10%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-axis-label, .lc-axis-tick-label)) {
+      font-size: 10px;
+      stroke: var(--color-surface-100, light-dark(white, black));
+      stroke-width: 2px;
+      font-weight: 300;
+    }
+  }
+</style>

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

@@ -28,14 +28,31 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
      */
     rule?: boolean | Partial<ComponentProps<typeof Rule>>;
     /**
-     * Draw grid lines
+     * Draw grid lines. Pass props (class, style, stroke, strokeWidth, opacity,
+     * dashArray) to forward onto the underlying grid line.
      * @default false
      */
-    grid?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    grid?: boolean | (Pick<SVGAttributes<SVGElement>, 'class' | 'style'> & {
+        stroke?: string;
+        strokeWidth?: number;
+        opacity?: number;
+        dashArray?: number | number[] | string;
+    });
     /**
      * Control the number of ticks
      */
     ticks?: TicksConfig;
+    /**
+     * Width or height of each tick in pixels (enabling responsive count)
+     * @default 80 (top|bottom|angle) or 50 (left|right|radius)
+     */
+    tickSpacing?: number | null;
+    /**
+     * Whether to render tick labels on multiple lines for additional context
+     *
+     * @default false
+     */
+    tickMultiline?: boolean;
     /**
      * Length of the tick line
      * @default 4
@@ -50,7 +67,7 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
     /**
      * Format tick labels
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
     /**
      * Props to apply to each tick label
      */
@@ -73,9 +90,19 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
      */
     transitionInParams?: TransitionParams<In>;
     /**
-     * Scale for the axis
+     * 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 {}
@@ -92,16 +119,23 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
 export type AxisProps<In extends Transition = Transition> = AxisPropsWithoutHTML<In> & Without<GroupProps, AxisPropsWithoutHTML<In>>;
 import { type ComponentProps, type Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 import { type GroupProps } from './Group.svelte';
 import Rule from './Rule.svelte';
 import Text from './Text.svelte';
 import { type MotionProp } from '../utils/motion.svelte.js';
 import { type TicksConfig } from '../utils/ticks.js';
+declare function $$render<T extends Transition = Transition>(): {
+    props: AxisProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends Transition = Transition> {
-    props(): AxisProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
     exports(): {};
 }