layerchart 2.0.0-next.5 → 2.0.0-next.50

package/dist/components/Axis.svelte

@@ -43,6 +43,19 @@
      */
     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 +72,7 @@
     /**
      * Format tick labels
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
 
     /**
      * Props to apply to each tick label
@@ -84,7 +97,7 @@
     transitionInParams?: TransitionParams<In>;
 
     /**
-     * Scale for the axis
+     * Override scale for the axis
      */
     scale?: any;
 
@@ -113,8 +126,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 +137,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,6 +150,8 @@
     rule = false,
     grid = false,
     ticks,
+    tickSpacing: tickSpacingProp,
+    tickMultiline = false,
     tickLength = 4,
     tickMarks = true,
     format,
@@ -166,35 +182,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 +359,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 +374,6 @@
           textAnchor: 'end',
           verticalAnchor: 'middle',
           dx: -tickLength,
-          dy: -2, // manually adjusted until Text supports custom styles
         };
 
       case 'right':
@@ -240,7 +381,6 @@
           textAnchor: 'start',
           verticalAnchor: 'middle',
           dx: tickLength,
-          dy: -2, // manually adjusted until Text supports custom styles
         };
 
       case 'angle':
@@ -255,7 +395,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 +404,6 @@
           textAnchor: 'middle',
           verticalAnchor: 'middle',
           dx: 2,
-          dy: -2, // manually adjusted until Text supports custom styles
         };
     }
   }
@@ -317,36 +456,31 @@
   });
 
   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',
     ...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'}
       {motion}
-      {...ruleProps}
-      class={cls('stroke-surface-content/50', classes.rule, ruleProps?.class)}
+      {...extractLayerProps(rule, 'lc-axis-rule', classes.rule ?? '')}
     />
   {/if}
 
@@ -356,7 +490,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,36 +500,28 @@
     {@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',
       ...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}
           {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}
@@ -434,3 +560,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

@@ -36,6 +36,17 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
      * 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 +61,7 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
     /**
      * Format tick labels
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
     /**
      * Props to apply to each tick label
      */
@@ -73,7 +84,7 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
      */
     transitionInParams?: TransitionParams<In>;
     /**
-     * Scale for the axis
+     * Override scale for the axis
      */
     scale?: any;
     /**
@@ -92,16 +103,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(): {};
 }