layerchart 2.0.0-next.1 → 2.0.0-next.3

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

@@ -0,0 +1,117 @@
+import type { Transition, TransitionParams, Without } from '../utils/types.js';
+export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
+    /**
+     * Location of axis
+     */
+    placement: 'top' | 'bottom' | 'left' | 'right' | 'angle' | 'radius';
+    /**
+     * The label for the axis.
+     *
+     * Can either be a string or a snippet to render custom content.
+     * The snippet receives spreadable props to apply to the label.
+     */
+    label?: string | Snippet<[{
+        props: ComponentProps<typeof Text>;
+    }]>;
+    /**
+     * Location of axis label
+     * @default 'middle'
+     */
+    labelPlacement?: 'start' | 'middle' | 'end';
+    /**
+     * Props applied to label Text
+     */
+    labelProps?: Partial<ComponentProps<typeof Text>>;
+    /**
+     * Draw a rule line. Use Rule component for greater rendering order control
+     * @default false
+     */
+    rule?: boolean | Partial<ComponentProps<typeof Rule>>;
+    /**
+     * Draw grid lines
+     * @default false
+     */
+    grid?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    /**
+     * Control the number of ticks
+     */
+    ticks?: TicksConfig;
+    /**
+     * Length of the tick line
+     * @default 4
+     */
+    tickLength?: number;
+    /**
+     * Whether to render tick marks.
+     *
+     * @default true
+     */
+    tickMarks?: boolean;
+    /**
+     * Format tick labels
+     */
+    format?: FormatType;
+    /**
+     * Props to apply to each tick label
+     */
+    tickLabelProps?: Partial<ComponentProps<typeof Text>>;
+    /**
+     * A snippet to render your own custom tick label.
+     */
+    tickLabel?: Snippet<[{
+        props: ComponentProps<typeof Text>;
+        index: number;
+    }]>;
+    /**
+     * Transition function for entering elements
+     * @default defaults to fade if the motion prop is set to tweened
+     */
+    transitionIn?: In;
+    /**
+     * Parameters for the transitionIn function
+     * @default { easing: cubicIn }
+     */
+    transitionInParams?: TransitionParams<In>;
+    /**
+     * Scale for the axis
+     */
+    scale?: any;
+    /**
+     * Classes for styling various parts of the axis
+     * @default {}
+     */
+    classes?: {
+        root?: string;
+        label?: string;
+        rule?: string;
+        tick?: string;
+        tickLabel?: string;
+    };
+    motion?: MotionProp;
+};
+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 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 class __sveltets_Render<T extends Transition = Transition> {
+    props(): AxisProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Transition = Transition>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Transition = Transition>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Axis: $$IsomorphicComponent;
+type Axis<T extends Transition = Transition> = InstanceType<typeof Axis<T>>;
+export default Axis;

package/dist/components/Bar.svelte

@@ -1,89 +1,140 @@
+<script lang="ts" module>
+  import { createDimensionGetter, type Insets } from '../utils/rect.svelte.js';
+
+  export type BarPropsWithoutHTML = {
+    /**
+     * data to render the bar from
+     */
+    data: Object;
+
+    /**
+     * Override `x` from context. Useful for multiple Bar instances
+     *
+     * @default ctx.x
+     */
+    x?: Accessor;
+
+    /**
+     * Override `y` from context. Useful for multiple Bar instances
+     *
+     * @default ctx.y
+     */
+    y?: Accessor;
+
+    /**
+     * Override `x1` from context. Useful for multiple Bar instances
+     *
+     * @default ctx.x1
+     */
+    x1?: Accessor;
+
+    /**
+     * Override `y1` from context. Useful for multiple Bar instances
+     *
+     * @default ctx.y1
+     */
+    y1?: Accessor;
+
+    radius?: number;
+
+    insets?: Insets;
+
+    initialX?: number;
+
+    initialY?: number;
+
+    initialHeight?: number;
+
+    initialWidth?: number;
+
+    /**
+     * Control which corners are rounded with radius. Uses <path> instead of <rect> when not set
+     * to `all`
+     */
+    rounded?:
+      | 'all'
+      | 'none'
+      | 'edge'
+      | 'top'
+      | 'bottom'
+      | 'left'
+      | 'right'
+      | 'top-left'
+      | 'top-right'
+      | 'bottom-left'
+      | 'bottom-right';
+
+    motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
+  } & CommonStyleProps;
+
+  export type BarProps = BarPropsWithoutHTML &
+    Without<
+      Omit<SVGAttributes<SVGElement>, 'width' | 'height' | 'x' | 'y' | 'offset'>,
+      BarPropsWithoutHTML
+    >;
+</script>
+
 <script lang="ts">
-  import { type ComponentProps } from 'svelte';
+  import type { SVGAttributes } from 'svelte/elements';
+  import { greatestAbs } from '@layerstack/utils';
 
-  import { chartContext } from './ChartContext.svelte';
   import Rect from './Rect.svelte';
   import Spline from './Spline.svelte';
 
-  import { createDimensionGetter, type Insets } from '../utils/rect.js';
-  import { isScaleBand } from '../utils/scales.js';
+  import { isScaleBand } from '../utils/scales.svelte.js';
   import { accessor, type Accessor } from '../utils/common.js';
-  import { greatestAbs } from '@layerstack/utils';
-
-  const { x: xContext, y: yContext, xScale } = chartContext();
-
-  export let bar: Object;
-
-  /**
-   * Override `x` from context.  Useful for multiple Bar instances
-   */
-  export let x: Accessor = $xContext;
-
-  /**
-   * Override `y` from context.  Useful for multiple Bar instances
-   */
-  export let y: Accessor = $yContext;
-
-  /**
-   * Override `x1` from context.  Useful for multiple Bar instances
-   */
-  export let x1: Accessor = undefined;
-
-  /**
-   * Override `y1` from context.  Useful for multiple Bar instances
-   */
-  export let y1: Accessor = undefined;
-
-  export let fill: string | undefined = undefined;
-  export let fillOpacity: number | undefined = undefined;
-  export let stroke = 'black';
-  export let strokeWidth = 0;
-  export let opacity: number | undefined = undefined;
-  export let radius = 0;
-
-  /** Control which corners are rounded with radius.  Uses <path> instead of <rect> when not set to `all` */
-  export let rounded:
-    | 'all'
-    | 'none'
-    | 'edge'
-    | 'top'
-    | 'bottom'
-    | 'left'
-    | 'right'
-    | 'top-left'
-    | 'top-right'
-    | 'bottom-left'
-    | 'bottom-right' = 'all';
-
-  export let insets: Insets | undefined = undefined;
-
-  export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
-  export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
-  export let onpointermove: ((e: PointerEvent) => void) | undefined = undefined;
-  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
-
-  export let spring: ComponentProps<Rect>['spring'] = undefined;
-  export let tweened: ComponentProps<Rect>['tweened'] = undefined;
-
-  $: if (stroke === null || stroke === undefined) stroke = 'black';
-
-  $: getDimensions = createDimensionGetter(chartContext(), {
-    x,
-    y,
+  import { getChartContext } from './Chart.svelte';
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import { extractLayerProps } from '../utils/attributes.js';
+  import { extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
+  import Arc from './Arc.svelte';
+
+  const ctx = getChartContext();
+
+  let {
+    data,
+    x = ctx.x,
+    y = ctx.y,
     x1,
     y1,
+    fill,
+    fillOpacity,
+    stroke: strokeProp = 'black',
+    strokeWidth = 0,
+    opacity,
+    radius = 0,
+    rounded: roundedProp = 'all',
+    motion,
     insets,
-  });
-  $: dimensions = $getDimensions(bar) ?? { x: 0, y: 0, width: 0, height: 0 };
-
-  $: isVertical = isScaleBand($xScale);
-  $: valueAccessor = accessor(isVertical ? y : x);
-  $: value = valueAccessor(bar);
-  $: resolvedValue = Array.isArray(value) ? greatestAbs(value) : value;
+    initialX,
+    initialY,
+    initialHeight,
+    initialWidth,
+    ...restProps
+  }: BarProps = $props();
+
+  const stroke = $derived(strokeProp === null || strokeProp === undefined ? 'black' : strokeProp);
+
+  const getDimensions = $derived(
+    createDimensionGetter(ctx, () => ({
+      x,
+      y,
+      x1,
+      y1,
+      insets,
+    }))
+  );
+
+  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(data));
+  const resolvedValue = $derived(Array.isArray(value) ? greatestAbs(value) : value);
 
   // Resolved `rounded="edge"` based on orientation and value
-  $: _rounded =
-    rounded === 'edge'
+  const rounded = $derived(
+    roundedProp === 'edge'
       ? isVertical
         ? resolvedValue >= 0
           ? 'top'
@@ -91,18 +142,18 @@
         : resolvedValue >= 0
           ? 'right'
           : 'left'
-      : rounded;
-
-  $: topLeft = ['all', 'top', 'left', 'top-left'].includes(_rounded);
-  $: topRight = ['all', 'top', 'right', 'top-right'].includes(_rounded);
-  $: bottomLeft = ['all', 'bottom', 'left', 'bottom-left'].includes(_rounded);
-  $: bottomRight = ['all', 'bottom', 'right', 'bottom-right'].includes(_rounded);
-
-  $: width = dimensions.width;
-  $: height = dimensions.height;
-  $: diameter = 2 * radius;
-
-  $: pathData = `M${dimensions.x + radius},${dimensions.y} h${width - diameter}
+      : roundedProp
+  );
+
+  const topLeft = $derived(['all', 'top', 'left', 'top-left'].includes(rounded));
+  const topRight = $derived(['all', 'top', 'right', 'top-right'].includes(rounded));
+  const bottomLeft = $derived(['all', 'bottom', 'left', 'bottom-left'].includes(rounded));
+  const bottomRight = $derived(['all', 'bottom', 'right', 'bottom-right'].includes(rounded));
+  const width = $derived(dimensions.width);
+  const height = $derived(dimensions.height);
+  const diameter = $derived(2 * radius);
+  const pathData = $derived(
+    `M${dimensions.x + radius},${dimensions.y} h${width - diameter}
       ${topRight ? `a${radius},${radius} 0 0 1 ${radius},${radius}` : `h${radius}v${radius}`}
       v${height - diameter}
       ${bottomRight ? `a${radius},${radius} 0 0 1 ${-radius},${radius}` : `v${radius}h${-radius}`}
@@ -111,29 +162,43 @@
       v${diameter - height}
       ${topLeft ? `a${radius},${radius} 0 0 1 ${radius},${-radius}` : `v${-radius}h${radius}`}
       z`
-    .split('\n')
-    .join('');
+      .split('\n')
+      .join('')
+  );
 </script>
 
-{#if _rounded === 'all' || _rounded === 'none' || radius === 0}
+{#if ctx.radial}
+  <Arc
+    innerRadius={dimensions.y}
+    outerRadius={dimensions.y + dimensions.height}
+    startAngle={dimensions.x}
+    endAngle={dimensions.x + dimensions.width}
+    {fill}
+    {fillOpacity}
+    {stroke}
+    {strokeWidth}
+    {opacity}
+    cornerRadius={radius}
+    {...extractLayerProps(restProps, 'bar')}
+  />
+{:else if rounded === 'all' || rounded === 'none' || radius === 0}
   <Rect
     {fill}
     {fillOpacity}
     {stroke}
     {strokeWidth}
     {opacity}
-    rx={_rounded === 'none' ? 0 : radius}
-    {spring}
-    {tweened}
-    {onclick}
-    {onpointerenter}
-    {onpointermove}
-    {onpointerleave}
-    on:touchmove
+    rx={rounded === 'none' ? 0 : radius}
+    {motion}
+    {initialX}
+    {initialY}
+    {initialHeight}
+    {initialWidth}
     {...dimensions}
-    {...$$restProps}
+    {...extractLayerProps(restProps, 'bar')}
   />
 {:else}
+  {@const tweenMotion = extractTweenConfig(motion)}
   <Spline
     {pathData}
     {fill}
@@ -141,13 +206,7 @@
     {stroke}
     {strokeWidth}
     {opacity}
-    {spring}
-    {tweened}
-    {onclick}
-    {onpointerenter}
-    {onpointermove}
-    {onpointerleave}
-    on:touchmove
-    {...$$restProps}
+    motion={tweenMotion}
+    {...extractLayerProps(restProps, 'bar')}
   />
 {/if}

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

@@ -0,0 +1,51 @@
+import { type Insets } from '../utils/rect.svelte.js';
+export type BarPropsWithoutHTML = {
+    /**
+     * data to render the bar from
+     */
+    data: Object;
+    /**
+     * Override `x` from context. Useful for multiple Bar instances
+     *
+     * @default ctx.x
+     */
+    x?: Accessor;
+    /**
+     * Override `y` from context. Useful for multiple Bar instances
+     *
+     * @default ctx.y
+     */
+    y?: Accessor;
+    /**
+     * Override `x1` from context. Useful for multiple Bar instances
+     *
+     * @default ctx.x1
+     */
+    x1?: Accessor;
+    /**
+     * Override `y1` from context. Useful for multiple Bar instances
+     *
+     * @default ctx.y1
+     */
+    y1?: Accessor;
+    radius?: number;
+    insets?: Insets;
+    initialX?: number;
+    initialY?: number;
+    initialHeight?: number;
+    initialWidth?: number;
+    /**
+     * Control which corners are rounded with radius. Uses <path> instead of <rect> when not set
+     * to `all`
+     */
+    rounded?: 'all' | 'none' | 'edge' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
+} & CommonStyleProps;
+export type BarProps = BarPropsWithoutHTML & Without<Omit<SVGAttributes<SVGElement>, 'width' | 'height' | 'x' | 'y' | 'offset'>, BarPropsWithoutHTML>;
+import type { SVGAttributes } from 'svelte/elements';
+import { type Accessor } from '../utils/common.js';
+import type { CommonStyleProps, Without } from '../utils/types.js';
+import { type MotionProp } from '../utils/motion.svelte.js';
+declare const Bar: import("svelte").Component<BarProps, {}, "">;
+type Bar = ReturnType<typeof Bar>;
+export default Bar;

package/dist/components/Bars.svelte

@@ -1,82 +1,71 @@
-<script lang="ts">
-  import { type ComponentProps } from 'svelte';
-
-  import { chartContext } from './ChartContext.svelte';
-  import Bar from './Bar.svelte';
-  import Rect from './Rect.svelte';
-  import { chartDataArray, type Accessor } from '../utils/common.js';
-  import type { Insets } from '../utils/rect.js';
-
-  const { data: contextData, cGet, config } = chartContext();
+<script lang="ts" module>
+  export type BarsPropsWithoutHTML = {
+    /**
+     * Override the data from the context.
+     */
+    data?: any;
 
-  /**
-   * Override `data` from context.  Useful for multiple Bar instances
-   */
-  export let data: any = undefined;
+    /**
+     * Define unique value for {#each} `(key)` expressions
+     * to improve transitions.
+     *
+     * @default (d, index) => index
+     */
+    key?: (d: any, index: number) => any;
 
-  /**
-   * Override `x` from context.  Useful for multiple Bar instances
-   */
-  export let x: Accessor = undefined;
+    /**
+     * Event dispatched when an individual bar is clicked.
+     */
+    onBarClick?: (e: MouseEvent, detail: { data: any }) => void;
 
-  /**
-   * Override `y` from context.  Useful for multiple Bar instances
-   */
-  export let y: Accessor = undefined;
+    children?: Snippet;
+    // TODO: investigate
+    [key: string]: any;
+  } & Omit<BarPropsWithoutHTML, 'data' | 'children'>;
 
-  /**
-   * Override `x1` from context.  Useful for multiple Bar instances
-   */
-  export let x1: Accessor = undefined;
-
-  /**
-   * Override `y1` from context.  Useful for multiple Bar instances
-   */
-  export let y1: Accessor = undefined;
-
-  export let stroke = 'black';
-  export let strokeWidth = 0;
-  export let radius = 0;
-  export let fill: string | undefined = undefined;
-  export let fillOpacity: number | undefined = undefined;
-  export let opacity: number | undefined = undefined;
+  export type BarsProps = BarsPropsWithoutHTML & Omit<BarProps, 'data'>;
+</script>
 
-  /** Inset the rect for amount of padding.  Useful with multiple bars (bullet, overlap, etc) */
-  export let insets: Insets | undefined = undefined;
+<script lang="ts">
+  import type { Snippet } from 'svelte';
 
-  /** Define unique value for {#each} `(key)` expressions to improve transitions.  `index` position used by default */
-  export let key: (d: any, index: number) => any = (d, i) => i;
+  import Bar, { type BarProps, type BarPropsWithoutHTML } from './Bar.svelte';
+  import Group from './Group.svelte';
 
-  export let spring: ComponentProps<Rect>['spring'] = undefined;
-  export let tweened: ComponentProps<Rect>['tweened'] = undefined;
+  import { chartDataArray } from '../utils/common.js';
+  import { getChartContext } from './Chart.svelte';
+  import { extractLayerProps, layerClass } from '../utils/attributes.js';
 
-  /** Event dispatched when individual Bar is clicked */
-  export let onbarclick: (e: MouseEvent, detail: { data: any }) => void = () => {};
+  let {
+    fill,
+    key = (_, i) => i,
+    data: dataProp,
+    onBarClick = () => {},
+    children,
+    radius = 0,
+    strokeWidth = 0,
+    stroke = 'black',
+    ...restProps
+  }: BarsProps = $props();
 
-  $: _data = chartDataArray(data ?? $contextData);
+  const ctx = getChartContext();
+  const data = $derived(chartDataArray(dataProp ?? ctx.data));
 </script>
 
-<g class="Bars">
-  <slot>
-    {#each _data as d, i (key(d, i))}
+<Group class={layerClass('bars')}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {#each data as d, i (key(d, i))}
       <Bar
-        bar={d}
-        {x}
-        {y}
-        {x1}
-        {y1}
-        fill={fill ?? ($config.c ? $cGet(d) : null)}
-        {fillOpacity}
-        {stroke}
-        {strokeWidth}
-        {opacity}
+        data={d}
         {radius}
-        {insets}
-        {spring}
-        {tweened}
-        onclick={(e) => onbarclick(e, { data: d })}
-        {...$$restProps}
+        {strokeWidth}
+        {stroke}
+        fill={fill ?? (ctx.config.c ? ctx.cGet(d) : null)}
+        onclick={(e) => onBarClick(e, { data: d })}
+        {...extractLayerProps(restProps, 'bars-bar')}
       />
     {/each}
-  </slot>
-</g>
+  {/if}
+</Group>

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

@@ -0,0 +1,27 @@
+export type BarsPropsWithoutHTML = {
+    /**
+     * Override the data from the context.
+     */
+    data?: any;
+    /**
+     * Define unique value for {#each} `(key)` expressions
+     * to improve transitions.
+     *
+     * @default (d, index) => index
+     */
+    key?: (d: any, index: number) => any;
+    /**
+     * Event dispatched when an individual bar is clicked.
+     */
+    onBarClick?: (e: MouseEvent, detail: {
+        data: any;
+    }) => void;
+    children?: Snippet;
+    [key: string]: any;
+} & 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;