layerchart 2.0.0-next.2 → 2.0.0-next.20

package/dist/components/AnnotationLine.svelte

@@ -17,8 +17,11 @@
     /** Placement of the label */
     labelPlacement?: Placement;
 
-    /** Offset of the label */
-    labelOffset?: number;
+    /** X offset of the label */
+    labelXOffset?: number;
+
+    /** Y offset of the label */
+    labelYOffset?: number;
 
     /** Classes for inner elements */
     props?: {
@@ -44,7 +47,8 @@
     y,
     label,
     labelPlacement = 'top-right',
-    labelOffset = 0,
+    labelXOffset = 0,
+    labelYOffset = 0,
     props,
   }: AnnotationLineProps = $props();
 
@@ -62,25 +66,17 @@
   const labelProps = $derived<ComponentProps<typeof Text>>(
     isVertical
       ? {
-          x:
-            line.x1 +
-            (['top', 'bottom'].includes(labelPlacement)
-              ? 0 // Offset applies to `y`
-              : labelPlacement.includes('left')
-                ? -labelOffset
-                : labelOffset),
+          x: line.x1 + (labelPlacement.includes('left') ? -labelXOffset : labelXOffset),
           y:
             (labelPlacement.includes('top')
               ? line.y2
               : labelPlacement.includes('bottom')
                 ? line.y1
                 : (line.y1 - line.y2) / 2) +
-            (labelPlacement === 'top'
-              ? -labelOffset
-              : labelPlacement === 'bottom'
-                ? labelOffset
-                : 0),
-          dy: -2, // adjust for smaler font size
+            (['top', 'bottom-left', 'bottom-right'].includes(labelPlacement)
+              ? -labelYOffset
+              : labelYOffset),
+          dy: -2, // adjust for smaller font size
           textAnchor: labelPlacement.includes('left')
             ? 'end'
             : labelPlacement.includes('right')
@@ -104,19 +100,11 @@
               : labelPlacement.includes('right')
                 ? line.x2
                 : (line.x2 - line.x1) / 2) +
-            (labelPlacement === 'left'
-              ? -labelOffset
-              : labelPlacement === 'right'
-                ? labelOffset
-                : 0),
-          y:
-            line.y1 +
-            (['left', 'right'].includes(labelPlacement)
-              ? 0 // Offset applies to `x`
-              : labelPlacement.includes('top')
-                ? -labelOffset
-                : labelOffset),
-          dy: -2, // adjust for smaler font size
+            (['left', 'top-right', 'bottom-right'].includes(labelPlacement)
+              ? -labelXOffset
+              : labelXOffset),
+          y: line.y1 + (labelPlacement.includes('top') ? -labelYOffset : labelYOffset),
+          dy: -2, // adjust for smaller font size
           textAnchor:
             labelPlacement === 'left'
               ? 'end' // place beside line

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

@@ -11,8 +11,10 @@ export type AnnotationLinePropsWithoutHTML = {
     label?: string;
     /** Placement of the label */
     labelPlacement?: Placement;
-    /** Offset of the label */
-    labelOffset?: number;
+    /** X offset of the label */
+    labelXOffset?: number;
+    /** Y offset of the label */
+    labelYOffset?: number;
     /** Classes for inner elements */
     props?: {
         label?: Partial<ComponentProps<typeof Text>>;

package/dist/components/AnnotationPoint.svelte

@@ -20,8 +20,11 @@
     /** Placement of the label */
     labelPlacement?: Placement;
 
-    /** Offset of the label */
-    labelOffset?: number;
+    /** X offset of the label */
+    labelXOffset?: number;
+
+    /** Y offset of the label */
+    labelYOffset?: number;
 
     /** Details (description, etc) useful to display in tooltip */
     details?: any;
@@ -51,7 +54,8 @@
     r = 4,
     label,
     labelPlacement = 'center',
-    labelOffset = 0,
+    labelXOffset = 0,
+    labelYOffset = 0,
     details,
     props,
   }: AnnotationPointProps = $props();
@@ -66,18 +70,12 @@
   const labelProps = $derived<ComponentProps<typeof Text>>({
     x:
       point.x +
-      (labelPlacement.includes('left')
-        ? -(r + labelOffset)
-        : labelPlacement.includes('right')
-          ? r + labelOffset
-          : 0),
+      ((['top', 'center', 'bottom'].includes(labelPlacement) ? 0 : r) + labelXOffset) *
+        (labelPlacement.includes('left') ? -1 : 1),
     y:
       point.y +
-      (labelPlacement.includes('top')
-        ? -(r + labelOffset)
-        : labelPlacement.includes('bottom')
-          ? r + labelOffset
-          : 0),
+      ((['left', 'center', 'right'].includes(labelPlacement) ? 0 : r) + labelYOffset) *
+        (labelPlacement.includes('top') ? -1 : 1),
     dy: -2, // adjust for smaler font size
     textAnchor: labelPlacement.includes('left')
       ? 'end'

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

@@ -13,8 +13,10 @@ export type AnnotationPointPropsWithoutHTML = {
     label?: string;
     /** Placement of the label */
     labelPlacement?: Placement;
-    /** Offset of the label */
-    labelOffset?: number;
+    /** X offset of the label */
+    labelXOffset?: number;
+    /** Y offset of the label */
+    labelYOffset?: number;
     /** Details (description, etc) useful to display in tooltip */
     details?: any;
     /** Classes for inner elements */

package/dist/components/AnnotationRange.svelte

@@ -118,13 +118,13 @@
 </script>
 
 {#if fill || className}
-  <Rect {...rect} {fill} class={cls(props?.rect?.class, className)} />
+  <Rect {...rect} {...props?.rect} {fill} class={cls(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 +132,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}

package/dist/components/Arc.svelte

@@ -401,13 +401,13 @@
   <Spline
     pathData={trackArc()}
     stroke="none"
-    bind:splineRef={trackRef}
+    bind:pathRef={trackRef}
     {...extractLayerProps(track, 'arc-track')}
   />
 {/if}
 
 <Spline
-  bind:splineRef={ref}
+  bind:pathRef={ref}
   pathData={arc()}
   transform="translate({xOffset}, {yOffset})"
   {fill}

package/dist/components/Axis.svelte

@@ -43,6 +43,18 @@
      */
     ticks?: TicksConfig;
 
+    /**
+     * Width or height of each tick in pxiels (responsive reduce)
+     */
+    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
@@ -104,21 +116,20 @@
   };
 
   export type AxisProps<In extends Transition = Transition> = AxisPropsWithoutHTML<In> &
-    Without<SVGAttributes<SVGGElement>, AxisPropsWithoutHTML<In>>;
+    Without<GroupProps, AxisPropsWithoutHTML<In>>;
 </script>
 
 <script lang="ts" generics="T extends Transition = Transition">
   import { type ComponentProps, type Snippet } from 'svelte';
-  import { fade } from 'svelte/transition';
-  import { cubicIn } from 'svelte/easing';
   import type { SVGAttributes } from 'svelte/elements';
 
   import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
 
-  import { format as formatValue, type FormatType } from '@layerstack/utils';
+  import { type FormatType, type FormatConfig } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
+  import Group, { type GroupProps } from './Group.svelte';
   import Line from './Line.svelte';
   import Rule from './Rule.svelte';
   import Text from './Text.svelte';
@@ -126,8 +137,8 @@
 
   import { getChartContext } from './Chart.svelte';
   import { extractLayerProps, layerClass } from '../utils/attributes.js';
-  import { extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
-  import { resolveTickVals, type TicksConfig } from '../utils/ticks.js';
+  import { type MotionProp } from '../utils/motion.svelte.js';
+  import { resolveTickFormat, resolveTickVals, type TicksConfig } from '../utils/ticks.js';
 
   let {
     placement,
@@ -137,13 +148,19 @@
     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,
     tickLabelProps,
     motion,
-    transitionIn: transitionInProp,
-    transitionInParams: transitionInParamsProp,
+    transitionIn,
+    transitionInParams,
     scale: scaleProp,
     classes = {},
     class: className,
@@ -151,13 +168,6 @@
     ...restProps
   }: AxisProps<T> = $props();
 
-  const transitionIn = $derived(
-    transitionInProp ? transitionInProp : extractTweenConfig(motion)?.options ? fade : () => {}
-  ) as T;
-  const transitionInParams = $derived(
-    transitionInParamsProp ? transitionInParamsProp : { easing: cubicIn }
-  );
-
   const ctx = getChartContext();
 
   const orientation = $derived(
@@ -177,7 +187,27 @@
   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(resolveTickVals(scale, ticks, tickCount));
+  const tickFormat = $derived(resolveTickFormat(scale, ticks, tickCount, format, tickMultiline));
 
   function getCoords(tick: any) {
     switch (placement) {
@@ -342,7 +372,7 @@
   }) satisfies ComponentProps<typeof Text>;
 </script>
 
-<g
+<Group
   {...restProps}
   data-placement={placement}
   class={cls(layerClass('axis'), `placement-${placement}`, classes.root, className)}
@@ -374,7 +404,7 @@
     {@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,
       ...tickLabelProps,
@@ -386,7 +416,7 @@
       ),
     }}
 
-    <g in:transitionIn={transitionInParams} class={layerClass('axis-tick-group')}>
+    <Group {transitionIn} {transitionInParams} class={layerClass('axis-tick-group')}>
       {#if grid !== false}
         {@const ruleProps = extractLayerProps(grid, 'axis-grid')}
         <Rule
@@ -404,7 +434,6 @@
           'stroke-surface-content/50',
           classes.tick
         )}
-        <!-- Tick marks -->
         {#if orientation === 'horizontal'}
           <Line
             x1={tickCoords.x}
@@ -434,13 +463,12 @@
           />
         {/if}
       {/if}
-      <!-- TODO: Add tick marks for radial (angle)? -->
 
       {#if tickLabel}
         {@render tickLabel({ props: resolvedTickLabelProps, index })}
       {:else}
         <Text {...resolvedTickLabelProps} />
       {/if}
-    </g>
+    </Group>
   {/each}
-</g>
+</Group>

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 pxiels (responsive reduce)
+     */
+    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
      */
@@ -89,10 +99,11 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
     };
     motion?: MotionProp;
 };
-export type AxisProps<In extends Transition = Transition> = AxisPropsWithoutHTML<In> & Without<SVGAttributes<SVGGElement>, AxisPropsWithoutHTML<In>>;
+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';

package/dist/components/Bar.svelte

@@ -2,7 +2,10 @@
   import { createDimensionGetter, type Insets } from '../utils/rect.svelte.js';
 
   export type BarPropsWithoutHTML = {
-    bar: Object;
+    /**
+     * data to render the bar from
+     */
+    data: Object;
 
     /**
      * Override `x` from context. Useful for multiple Bar instances
@@ -89,7 +92,7 @@
   const ctx = getChartContext();
 
   let {
-    bar,
+    data,
     x = ctx.x,
     y = ctx.y,
     x1,
@@ -122,11 +125,11 @@
     }))
   );
 
-  const dimensions = $derived(getDimensions(bar) ?? { x: 0, y: 0, width: 0, height: 0 });
+  const dimensions = $derived(getDimensions(data) ?? { x: 0, y: 0, width: 0, height: 0 });
 
   const isVertical = $derived(isScaleBand(ctx.xScale));
   const valueAccessor = $derived(accessor(isVertical ? y : x));
-  const value = $derived(valueAccessor(bar));
+  const value = $derived(valueAccessor(data));
   const resolvedValue = $derived(Array.isArray(value) ? greatestAbs(value) : value);
 
   // Resolved `rounded="edge"` based on orientation and value

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

@@ -1,6 +1,9 @@
 import { type Insets } from '../utils/rect.svelte.js';
 export type BarPropsWithoutHTML = {
-    bar: Object;
+    /**
+     * data to render the bar from
+     */
+    data: Object;
     /**
      * Override `x` from context. Useful for multiple Bar instances
      *

package/dist/components/Bars.svelte

@@ -21,16 +21,19 @@
     children?: Snippet;
     // TODO: investigate
     [key: string]: any;
-  } & Omit<BarPropsWithoutHTML, 'bar' | 'children'>;
+  } & Omit<BarPropsWithoutHTML, 'data' | 'children'>;
 
-  export type BarsProps = BarsPropsWithoutHTML & Omit<BarProps, 'bar'>;
+  export type BarsProps = BarsPropsWithoutHTML & Omit<BarProps, 'data'>;
 </script>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import Bar, { type BarProps, type BarPropsWithoutHTML } from './Bar.svelte';
+  import Group from './Group.svelte';
+
   import { chartDataArray } from '../utils/common.js';
   import { getChartContext } from './Chart.svelte';
-  import type { Snippet } from 'svelte';
   import { extractLayerProps, layerClass } from '../utils/attributes.js';
 
   let {
@@ -49,20 +52,20 @@
   const data = $derived(chartDataArray(dataProp ?? ctx.data));
 </script>
 
-<g class={layerClass('bars')}>
+<Group class={layerClass('bars')}>
   {#if children}
     {@render children()}
   {:else}
     {#each data as d, i (key(d, i))}
       <Bar
+        data={d}
         {radius}
         {strokeWidth}
         {stroke}
-        bar={d}
         fill={fill ?? (ctx.config.c ? ctx.cGet(d) : null)}
         onclick={(e) => onBarClick(e, { data: d })}
         {...extractLayerProps(restProps, 'bars-bar')}
       />
     {/each}
   {/if}
-</g>
+</Group>

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

@@ -18,10 +18,10 @@ export type BarsPropsWithoutHTML = {
     }) => void;
     children?: Snippet;
     [key: string]: any;
-} & Omit<BarPropsWithoutHTML, 'bar' | 'children'>;
-export type BarsProps = BarsPropsWithoutHTML & Omit<BarProps, 'bar'>;
-import { type BarProps, type BarPropsWithoutHTML } from './Bar.svelte';
+} & Omit<BarPropsWithoutHTML, 'data' | 'children'>;
+export type BarsProps = BarsPropsWithoutHTML & Omit<BarProps, 'data'>;
 import type { Snippet } from 'svelte';
+import { type BarProps, type BarPropsWithoutHTML } from './Bar.svelte';
 declare const Bars: import("svelte").Component<BarsProps, {}, "">;
 type Bars = ReturnType<typeof Bars>;
 export default Bars;

package/dist/components/Blur.svelte

@@ -14,29 +14,37 @@
 
     /**
      * The default children snippet which provides
-     * the id and url for the filter.
+     * the id for the filter.
      */
-    children?: Snippet<[{ id: string; url: string }]>;
+    children?: Snippet;
   };
 </script>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getRenderContext } from './Chart.svelte';
   import { createId } from '../utils/createId.js';
   import { layerClass } from '../utils/attributes.js';
-  import type { Snippet } from 'svelte';
+
   const uid = $props.id();
 
   let { id = createId('blur-', uid), stdDeviation = 5, children }: BlurProps = $props();
+
+  const renderContext = getRenderContext();
 </script>
 
-<defs>
-  <filter {id} class={layerClass('blur-filter')}>
-    <feGaussianBlur in="SourceGraphic" {stdDeviation} />
-  </filter>
-</defs>
+{#if renderContext === 'svg'}
+  <defs>
+    <filter {id} class={layerClass('blur-filter')}>
+      <feGaussianBlur in="SourceGraphic" {stdDeviation} />
+    </filter>
+  </defs>
 
-{#if children}
-  <g filter="url(#{id})" class={layerClass('blur-g')}>
-    {@render children({ id, url: `url(#${id})` })}
-  </g>
+  {#if children}
+    <g filter="url(#{id})" class={layerClass('blur-g')}>
+      {@render children()}
+    </g>
+  {/if}
+{:else if children}
+  {@render children()}
 {/if}

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

@@ -11,12 +11,9 @@ export type BlurProps = {
     stdDeviation?: number;
     /**
      * The default children snippet which provides
-     * the id and url for the filter.
+     * the id for the filter.
      */
-    children?: Snippet<[{
-        id: string;
-        url: string;
-    }]>;
+    children?: Snippet;
 };
 import type { Snippet } from 'svelte';
 declare const Blur: import("svelte").Component<BlurProps, {}, "">;

package/dist/components/Calendar.svelte

@@ -36,14 +36,14 @@
     /**
      * Props to pass to the `<text>` element for month labels.
      */
-    monthLabel?: Partial<ComponentProps<typeof Text>>;
+    monthLabel?: boolean | Partial<ComponentProps<typeof Text>>;
 
     /**
      * Tooltip context to setup mouse events to show tooltip for related data
      */
     tooltipContext?: TooltipContextValue;
 
-    children?: Snippet<[{ cells: CalendarCell[] }]>;
+    children?: Snippet<[{ cells: CalendarCell[]; cellSize: [number, number] }]>;
   } & Omit<
     RectPropsWithoutHTML,
     'children' | 'x' | 'y' | 'width' | 'height' | 'fill' | 'onpointermove' | 'onpointerleave'
@@ -57,7 +57,7 @@
   import { type ComponentProps, type Snippet } from 'svelte';
   import { timeDays, timeMonths, timeWeek, timeYear } from 'd3-time';
   import { index } from 'd3-array';
-  import { format } from 'date-fns';
+  import { format } from '@layerstack/utils';
 
   import Rect, { type RectPropsWithoutHTML } from './Rect.svelte';
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
@@ -74,9 +74,9 @@
     start,
     cellSize: cellSizeProp,
     monthPath = false,
+    monthLabel = true,
     tooltipContext: tooltip,
     children,
-    monthLabel,
     ...restProps
   }: CalendarPropsWithoutHTML = $props();
 
@@ -117,7 +117,7 @@
 </script>
 
 {#if children}
-  {@render children({ cells })}
+  {@render children({ cells, cellSize })}
 {:else}
   {#each cells as cell}
     <Rect
@@ -136,11 +136,15 @@
 {#if monthPath}
   {#each yearMonths as date}
     <MonthPath {date} {cellSize} {...extractLayerProps(monthPath, 'calendar-month-path')} />
+  {/each}
+{/if}
 
+{#if monthLabel}
+  {#each yearMonths as date}
     <Text
       x={timeWeek.count(timeYear.floor(date), timeWeek.ceil(date)) * cellSize[0]}
       y={-4}
-      value={format(date, 'MMM')}
+      value={format(date, 'month', { variant: 'short' })}
       {...extractLayerProps(monthLabel, 'calendar-month-label', 'text-xs')}
     />
   {/each}

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

@@ -30,13 +30,14 @@ export type CalendarPropsWithoutHTML = {
     /**
      * Props to pass to the `<text>` element for month labels.
      */
-    monthLabel?: Partial<ComponentProps<typeof Text>>;
+    monthLabel?: boolean | Partial<ComponentProps<typeof Text>>;
     /**
      * Tooltip context to setup mouse events to show tooltip for related data
      */
     tooltipContext?: TooltipContextValue;
     children?: Snippet<[{
         cells: CalendarCell[];
+        cellSize: [number, number];
     }]>;
 } & Omit<RectPropsWithoutHTML, 'children' | 'x' | 'y' | 'width' | 'height' | 'fill' | 'onpointermove' | 'onpointerleave'>;
 export type CalendarProps = CalendarPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, CalendarPropsWithoutHTML>;