layerchart 2.0.0-next.4 → 2.0.0-next.41

package/dist/components/AnnotationLine.svelte

@@ -130,7 +130,7 @@
   x2={line.x2}
   y2={line.y2}
   {...props?.line}
-  class={cls('stroke-surface-content', props?.line?.class)}
+  class={cls('lc-annotation-line', props?.line?.class)}
 />
 
 {#if label}
@@ -138,6 +138,19 @@
     value={label}
     {...labelProps}
     {...props?.label}
-    class={cls('text-xs pointer-events-none', props?.label?.class)}
+    class={cls('lc-annotation-line-label', props?.label?.class)}
   />
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-annotation-line)) {
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+
+    :global(:where(.lc-annotation-line-label)) {
+      font-size: 12px;
+      pointer-events: none;
+    }
+  }
+</style>

package/dist/components/AnnotationPoint.svelte

@@ -88,25 +88,34 @@
         ? 'start'
         : 'middle',
   });
-</script>
 
-<Circle
-  cx={point.x}
-  cy={point.y}
-  {r}
-  onpointermove={(e) => {
+  function onPointerMove(e: PointerEvent | MouseEvent | TouchEvent) {
     if (details) {
       e.stopPropagation();
       ctx.tooltip.show(e, { annotation: { label, details } });
     }
-  }}
-  onpointerleave={() => {
+  }
+
+  function onPointerLeave(e: PointerEvent | MouseEvent | TouchEvent) {
     if (details) {
+      e.stopPropagation();
       ctx.tooltip.hide();
     }
-  }}
+  }
+</script>
+
+<Circle
+  cx={point.x}
+  cy={point.y}
+  {r}
+  onpointermove={onPointerMove}
+  onmousemove={onPointerMove}
+  ontouchmove={onPointerMove}
+  onpointerleave={onPointerLeave}
+  onmouseleave={onPointerLeave}
+  ontouchend={onPointerLeave}
   {...props?.circle}
-  class={cls('stroke-surface-100', props?.circle?.class)}
+  class={cls('lc-annotation-point', props?.circle?.class)}
 />
 
 {#if label}
@@ -114,6 +123,15 @@
     value={label}
     {...labelProps}
     {...props?.label}
-    class={cls('text-xs pointer-events-none', props?.label?.class)}
+    class={cls('lc-annotation-point-label', props?.label?.class)}
   />
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-annotation-point-label)) {
+      font-size: 12px;
+      pointer-events: none;
+    }
+  }
+</style>

package/dist/components/AnnotationRange.svelte

@@ -118,13 +118,18 @@
 </script>
 
 {#if fill || className}
-  <Rect {...rect} {fill} class={cls(props?.rect?.class, className)} />
+  <Rect
+    {...rect}
+    {...props?.rect}
+    {fill}
+    class={cls('lc-annotation-range', props?.rect?.class, className)}
+  />
 {/if}
 
 {#if gradient}
   <LinearGradient {...gradient}>
     {#snippet children({ gradient })}
-      <Rect {...rect} fill={gradient} class={props?.rect?.class} />
+      <Rect {...rect} {...props?.rect} fill={gradient} />
     {/snippet}
   </LinearGradient>
 {/if}
@@ -132,7 +137,7 @@
 {#if pattern}
   <Pattern {...pattern}>
     {#snippet children({ pattern })}
-      <Rect {...rect} fill={pattern} class={props?.rect?.class} />
+      <Rect {...rect} {...props?.rect} fill={pattern} />
     {/snippet}
   </Pattern>
 {/if}
@@ -142,6 +147,15 @@
     value={label}
     {...labelProps}
     {...props?.label}
-    class={cls('text-xs pointer-events-none', props?.label?.class)}
+    class={cls('lc-annotation-range-label', props?.label?.class)}
   />
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-annotation-range-label)) {
+      font-size: 12px;
+      pointer-events: none;
+    }
+  }
+</style>

package/dist/components/Arc.svelte

@@ -189,7 +189,7 @@
 
   import { degreesToRadians } from '../utils/math.js';
   import { getChartContext } from './Chart.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
   import { cls } from '@layerstack/tailwind';
   import { max } from 'd3-array';
   import {
@@ -401,13 +401,13 @@
   <Spline
     pathData={trackArc()}
     stroke="none"
-    bind:splineRef={trackRef}
-    {...extractLayerProps(track, 'arc-track')}
+    bind:pathRef={trackRef}
+    {...extractLayerProps(track, 'lc-arc-track')}
   />
 {/if}
 
 <Spline
-  bind:splineRef={ref}
+  bind:pathRef={ref}
   pathData={arc()}
   transform="translate({xOffset}, {yOffset})"
   {fill}
@@ -416,7 +416,7 @@
   stroke-width={strokeWidth}
   {opacity}
   {...restProps}
-  class={cls(layerClass('arc-line'), className)}
+  class={cls('lc-arc-line', className)}
   onpointerenter={onPointerEnter}
   onpointermove={onPointerMove}
   onpointerleave={onPointerLeave}

package/dist/components/Area.svelte

@@ -239,7 +239,15 @@
 </script>
 
 {#if line}
-  <Spline {data} {x} y={y1} {curve} {defined} {motion} {...extractLayerProps(line, 'area-line')} />
+  <Spline
+    {data}
+    {x}
+    y={y1}
+    {curve}
+    {defined}
+    {motion}
+    {...extractLayerProps(line, 'lc-area-line')}
+  />
 {/if}
 
 {#if renderCtx === 'svg'}
@@ -251,6 +259,6 @@
     {stroke}
     stroke-width={strokeWidth}
     {opacity}
-    {...extractLayerProps(restProps, 'area-path')}
+    {...extractLayerProps(restProps, 'lc-area-path')}
   />
 {/if}

package/dist/components/Axis.svelte

@@ -43,6 +43,18 @@
      */
     ticks?: TicksConfig;
 
+    /**
+     * Width or height of each tick in pixels (enabling responsive count)
+     */
+    tickSpacing?: number;
+
+    /**
+     * Whether to render tick labels on multiple lines for additional context
+     *
+     * @default false
+     */
+    tickMultiline?: boolean;
+
     /**
      * Length of the tick line
      * @default 4
@@ -59,7 +71,7 @@
     /**
      * Format tick labels
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
 
     /**
      * Props to apply to each tick label
@@ -84,7 +96,7 @@
     transitionInParams?: TransitionParams<In>;
 
     /**
-     * Scale for the axis
+     * Override scale for the axis
      */
     scale?: any;
 
@@ -113,8 +125,17 @@
 
   import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
-
-  import { format as formatValue, type FormatType } from '@layerstack/utils';
+  import {
+    timeDay,
+    timeHour,
+    timeMillisecond,
+    timeMinute,
+    timeMonth,
+    timeSecond,
+    timeYear,
+  } from 'd3-time';
+
+  import { type FormatType, type FormatConfig, unique, PeriodType } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Group, { type GroupProps } from './Group.svelte';
@@ -124,9 +145,9 @@
   import { isScaleBand } from '../utils/scales.svelte.js';
 
   import { getChartContext } from './Chart.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.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 +157,12 @@
     rule = false,
     grid = false,
     ticks,
+    tickSpacing = ['top', 'bottom', 'angle'].includes(placement)
+      ? 80
+      : ['left', 'right', 'radius'].includes(placement)
+        ? 50
+        : undefined,
+    tickMultiline = false,
     tickLength = 4,
     tickMarks = true,
     format,
@@ -165,36 +192,107 @@
   const scale = $derived(
     scaleProp ?? (['horizontal', 'angle'].includes(orientation) ? ctx.xScale : ctx.yScale)
   );
+  const interval = $derived(
+    ['horizontal', 'angle'].includes(orientation) ? ctx.xInterval : ctx.yInterval
+  );
 
   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
+  );
+
+  const tickCount = $derived(
+    typeof ticks === 'number'
+      ? ticks
+      : tickSpacing && ctxSize
+        ? Math.round(ctxSize / tickSpacing)
+        : 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 format === 'object' ? format?.type : format;
+
+    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: tickCount,
+      formatType: format,
+      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 +315,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 +330,6 @@
           textAnchor: 'end',
           verticalAnchor: 'middle',
           dx: -tickLength,
-          dy: -2, // manually adjusted until Text supports custom styles
         };
 
       case 'right':
@@ -240,7 +337,6 @@
           textAnchor: 'start',
           verticalAnchor: 'middle',
           dx: tickLength,
-          dy: -2, // manually adjusted until Text supports custom styles
         };
 
       case 'angle':
@@ -255,7 +351,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 +360,6 @@
           textAnchor: 'middle',
           verticalAnchor: 'middle',
           dx: 2,
-          dy: -2, // manually adjusted until Text supports custom styles
         };
     }
   }
@@ -317,36 +412,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 +446,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 +456,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 +516,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,16 @@ 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)
+     */
+    tickSpacing?: number;
+    /**
+     * Whether to render tick labels on multiple lines for additional context
+     *
+     * @default false
+     */
+    tickMultiline?: boolean;
     /**
      * Length of the tick line
      * @default 4
@@ -50,7 +60,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 +83,7 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
      */
     transitionInParams?: TransitionParams<In>;
     /**
-     * Scale for the axis
+     * Override scale for the axis
      */
     scale?: any;
     /**
@@ -92,16 +102,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(): {};
 }