layerchart 0.54.1 → 0.56.0

package/dist/components/Brush.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, type ComponentProps } from 'svelte';
   import type { SVGAttributes } from 'svelte/elements';
-  import { extent } from 'd3-array';
+  import { extent, min, max } from 'd3-array';
   import { clamp } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
+  import { format as formatValue, type FormatType } from '@layerstack/utils';
 
   import { chartContext } from './ChartContext.svelte';
   import Frame from './Frame.svelte';
-  import { localPoint } from '../utils/event.js';
   import Group from './Group.svelte';
+  import Text from './Text.svelte';
+
+  import { localPoint } from '../utils/event.js';
 
   const { xScale, yScale, width, height, padding } = chartContext();
 
@@ -36,6 +39,8 @@
     number,
   ];
 
+  export let labels: ComponentProps<Text> | boolean = false;
+
   // Capture original domains for reset()
   const originalXDomain = $xScale.domain() as [number, number];
   const originalYDomain = $yScale.domain() as [number, number];
@@ -49,11 +54,15 @@
   /** Attributes passed to handle <rect> elements */
   export let handle: SVGAttributes<SVGRectElement> | undefined = undefined;
 
+  /** Apply format to labels, if shown */
+  export let format: FormatType | undefined = undefined;
+
   export let classes: {
     root?: string;
     frame?: string;
     range?: string;
     handle?: string;
+    labels?: string;
   } = {};
 
   let frameEl: SVGRectElement;
@@ -115,17 +124,31 @@
     };
   }
 
+  /** Add second value while maintaining `Date` or `number` type */
+  function add(value1: Date | number, value2: number) {
+    if (value1 instanceof Date) {
+      return new Date(value1.getTime() + value2);
+    } else {
+      return value1 + value2;
+    }
+  }
+
   const createRange = handler((start, value) => {
     isActive = true;
 
     xDomain = [
-      clamp(Math.min(start.value.x, value.x), xDomainMin, xDomainMax),
-      clamp(Math.max(start.value.x, value.x), xDomainMin, xDomainMax),
+      // @ts-expect-error
+      clamp(min([start.value.x, value.x]), xDomainMin, xDomainMax),
+      // @ts-expect-error
+      clamp(max([start.value.x, value.x]), xDomainMin, xDomainMax),
     ];
+    // xDomain = [start.value.x, value.x];
 
     yDomain = [
-      clamp(Math.min(start.value.y, value.y), yDomainMin, yDomainMax),
-      clamp(Math.max(start.value.y, value.y), yDomainMin, yDomainMax),
+      // @ts-expect-error
+      clamp(min([start.value.y, value.y]), yDomainMin, yDomainMax),
+      // @ts-expect-error
+      clamp(max([start.value.y, value.y]), yDomainMin, yDomainMax),
     ];
   });
 
@@ -135,14 +158,14 @@
       xDomainMin - start.xDomain[0],
       xDomainMax - start.xDomain[1]
     );
-    xDomain = [Number(start.xDomain[0]) + dx, Number(start.xDomain[1]) + dx];
+    xDomain = [add(start.xDomain[0], dx), add(start.xDomain[1], dx)];
 
     const dy = clamp(
       value.y - start.value.y,
       yDomainMin - start.yDomain[0],
       yDomainMax - start.yDomain[1]
     );
-    yDomain = [Number(start.yDomain[0]) + dy, Number(start.yDomain[1]) + dy];
+    yDomain = [add(start.yDomain[0], dy), add(start.yDomain[1], dy)];
   });
 
   const adjustBottom = handler((start, value) => {
@@ -201,6 +224,11 @@
     xDomain[1]?.valueOf() !== originalXDomain[1]?.valueOf() ||
     yDomain[0]?.valueOf() !== originalYDomain[0]?.valueOf() ||
     yDomain[1]?.valueOf() !== originalYDomain[1]?.valueOf();
+
+  /** TODO: Fix types and remove workaround (Svelte 5)*/
+  function any(value: any): any {
+    return value;
+  }
 </script>
 
 <g class={cls('Brush select-none', classes.root, $$props.class)}>
@@ -313,6 +341,64 @@
       </Group>
     {/if}
 
+    <slot name="labels">
+      {#if labels}
+        {@const labelClass = cls(
+          'text-xs',
+          classes.labels,
+          typeof labels === 'object' ? labels.class : null
+        )}
+
+        {#if axis === 'x' || axis === 'both'}
+          <Text
+            x={left}
+            y={rangeTop + rangeHeight / 2}
+            dx={-4}
+            textAnchor="end"
+            verticalAnchor="middle"
+            value={formatValue(any(xDomain[0]), format)}
+            {...typeof labels === 'object' ? labels : null}
+            class={labelClass}
+          />
+
+          <Text
+            x={right}
+            y={rangeTop + rangeHeight / 2}
+            dx={4}
+            textAnchor="start"
+            verticalAnchor="middle"
+            value={formatValue(any(xDomain[1]), format)}
+            {...typeof labels === 'object' ? labels : null}
+            class={labelClass}
+          />
+        {/if}
+
+        {#if axis === 'y' || axis === 'both'}
+          <Text
+            x={rangeLeft + rangeWidth / 2}
+            y={top}
+            dy={-4}
+            textAnchor="middle"
+            verticalAnchor="end"
+            value={formatValue(any(yDomain[1]), format)}
+            {...typeof labels === 'object' ? labels : null}
+            class={labelClass}
+          />
+
+          <Text
+            x={rangeLeft + rangeWidth / 2}
+            y={bottom}
+            dy={4}
+            textAnchor="middle"
+            verticalAnchor="start"
+            value={formatValue(any(yDomain[0]), format)}
+            {...typeof labels === 'object' ? labels : null}
+            class={labelClass}
+          />
+        {/if}
+      {/if}
+    </slot>
+
     <!-- TODO: Add diagonal/corner handles -->
   {/if}
 </g>

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

@@ -1,5 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
+import { type FormatType } from '@layerstack/utils';
+import Text from './Text.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -8,13 +11,16 @@ declare const __propDef: {
         resetOnEnd?: boolean | undefined;
         xDomain?: [number | Date | null, number | Date | null] | undefined;
         yDomain?: [number | Date | null, number | Date | null] | undefined;
+        labels?: (ComponentProps<Text> | boolean) | undefined;
         range?: SVGAttributes<SVGRectElement> | undefined;
         handle?: SVGAttributes<SVGRectElement> | undefined;
+        format?: FormatType | undefined;
         classes?: {
             root?: string;
             frame?: string;
             range?: string;
             handle?: string;
+            labels?: string;
         } | undefined;
     };
     events: {
@@ -43,6 +49,7 @@ declare const __propDef: {
             rangeWidth: any;
             rangeHeight: any;
         };
+        labels: {};
     };
 };
 export type BrushProps = typeof __propDef.props;

package/dist/components/Line.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { tick, type ComponentProps } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
   import { cls } from '@layerstack/tailwind';
 
   import { motionStore } from '../stores/motionStore.js';
+  import { uniqueId } from '@layerstack/utils';
+
+  import Marker from './Marker.svelte';
 
   export let x1: number;
   export let initialX1 = x1;
@@ -17,6 +20,19 @@
   export let y2: number;
   export let initialY2 = y2;
 
+  /** Marker to attach to start and end points of path */
+  export let marker: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    undefined;
+  /** Marker to attach to start point of path */
+  export let markerStart: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    marker;
+  /** Marker to attach to end point of path */
+  export let markerEnd: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    marker;
+
+  $: markerStartId = markerStart || $$slots['markerStart'] ? uniqueId('marker-') : '';
+  $: markerEndId = markerEnd || $$slots['markerEnd'] ? uniqueId('marker-') : '';
+
   export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
 
@@ -39,9 +55,29 @@
   y1={$tweened_y1}
   x2={$tweened_x2}
   y2={$tweened_y2}
+  marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
+  marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
   class={cls($$props.stroke === undefined && 'stroke-surface-content')}
   {...$$restProps}
   on:click
   on:pointermove
   on:pointerleave
 />
+
+<slot name="markerStart" id={markerStartId}>
+  {#if markerStart}
+    <Marker
+      id={markerStartId}
+      type={typeof markerStart === 'string' ? markerStart : undefined}
+      {...typeof markerStart === 'object' ? markerStart : null}
+    />
+  {/if}
+</slot>
+
+<slot name="markerEnd" id={markerEndId}>
+  <Marker
+    id={markerEndId}
+    type={typeof markerEnd === 'string' ? markerEnd : undefined}
+    {...typeof markerEnd === 'object' ? markerEnd : null}
+  />
+</slot>

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

@@ -1,5 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
 import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+import Marker from './Marker.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -11,6 +13,9 @@ declare const __propDef: {
         initialX2?: number | undefined;
         y2: number;
         initialY2?: number | undefined;
+        marker?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
+        markerStart?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
+        markerEnd?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
@@ -21,7 +26,14 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        markerStart: {
+            id: string;
+        };
+        markerEnd: {
+            id: string;
+        };
+    };
 };
 export type LineProps = typeof __propDef.props;
 export type LineEvents = typeof __propDef.events;

package/dist/components/Link.svelte

@@ -13,11 +13,15 @@
     - [ ] Investigate: https://observablehq.com/@fil/sankey-link-paths
     - [ ] Use for annotations - https://github.com/techniq/layerchart/issues/11
 	*/
+  import type { ComponentProps } from 'svelte';
   import type { tweened as tweenedStore } from 'svelte/motion';
   import { link as d3Link, curveBumpX, curveBumpY } from 'd3-shape';
   import { interpolatePath } from 'd3-interpolate-path';
 
   import { motionStore } from '../stores/motionStore.js';
+  import { uniqueId } from '@layerstack/utils';
+
+  import Marker from './Marker.svelte';
 
   // Override what is used from context
   export let data: any = undefined; // TODO: Update Type
@@ -35,6 +39,23 @@
   export let y = (d: any) => (sankey ? d[1] : orientation === 'horizontal' ? d.x : d.y);
   export let curve = orientation === 'horizontal' ? curveBumpX : curveBumpY;
 
+  /** Marker to attach to start, mid, and end points of path */
+  export let marker: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    undefined;
+  /** Marker to attach to start point of path */
+  export let markerStart: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    marker;
+  /** Marker to attach to all mid points of path */
+  export let markerMid: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    marker;
+  /** Marker to attach to end point of path */
+  export let markerEnd: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    marker;
+
+  $: markerStartId = markerStart || $$slots['markerStart'] ? uniqueId('marker-') : '';
+  $: markerMidId = markerMid || $$slots['markerMid'] ? uniqueId('marker-') : '';
+  $: markerEndId = markerEnd || $$slots['markerEnd'] ? uniqueId('marker-') : '';
+
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
   // @ts-expect-error
   $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
@@ -54,6 +75,9 @@
   class="path-link"
   d={$tweened_d}
   fill="none"
+  marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
+  marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
+  marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
   on:click
   on:pointerover
   on:pointermove
@@ -61,3 +85,29 @@
   on:pointerleave
   {...$$restProps}
 />
+
+<slot name="markerStart" id={markerStartId}>
+  {#if markerStart}
+    <Marker
+      id={markerStartId}
+      type={typeof markerStart === 'string' ? markerStart : undefined}
+      {...typeof markerStart === 'object' ? markerStart : null}
+    />
+  {/if}
+</slot>
+
+<slot name="markerMid" id={markerMidId}>
+  <Marker
+    id={markerMidId}
+    type={typeof markerMid === 'string' ? markerMid : undefined}
+    {...typeof markerMid === 'object' ? markerMid : null}
+  />
+</slot>
+
+<slot name="markerEnd" id={markerEndId}>
+  <Marker
+    id={markerEndId}
+    type={typeof markerEnd === 'string' ? markerEnd : undefined}
+    {...typeof markerEnd === 'object' ? markerEnd : null}
+  />
+</slot>

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

@@ -1,5 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ComponentProps } from 'svelte';
 import type { tweened as tweenedStore } from 'svelte/motion';
+import Marker from './Marker.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -11,6 +13,10 @@ declare const __propDef: {
         x?: ((d: any) => any) | undefined;
         y?: ((d: any) => any) | undefined;
         curve?: import("d3-shape").CurveFactory | undefined;
+        marker?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
+        markerStart?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
+        markerMid?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
+        markerEnd?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
@@ -22,7 +28,17 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        markerStart: {
+            id: string;
+        };
+        markerMid: {
+            id: string;
+        };
+        markerEnd: {
+            id: string;
+        };
+    };
 };
 export type LinkProps = typeof __propDef.props;
 export type LinkEvents = typeof __propDef.events;

package/dist/components/Marker.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { uniqueId } from '@layerstack/utils';
+
+  /** Defined the type of a default marker, or define your own in the slot */
+  export let type: 'arrow' | 'triangle' | 'line' | 'circle' | 'circle-stroke' | 'dot' | undefined =
+    undefined;
+
+  /** Unique id for marker */
+  export let id: string = uniqueId('marker-');
+
+  /** A number used to determine the size of the bounding box the marker content. */
+  export let size = 10;
+
+  /** The width of the marker viewport */
+  export let markerWidth: string | number = size;
+
+  /** The height of the marker viewport */
+  export let markerHeight: string | number = size;
+
+  /** Set the coordinate system for the markerWidth, markerHeight, and `<marker>` contents  */
+  export let markerUnits: 'userSpaceOnUse' | 'strokeWidth' = 'userSpaceOnUse';
+
+  /** The orientation of the marker relative to the shape it is attached to */
+  export let orient: 'auto' | 'auto-start-reverse' | number = 'auto-start-reverse';
+
+  /** The x coordinate for the reference point of the marker */
+  export let refX: string | number = ['arrow', 'triangle'].includes(type ?? '') ? 9 : 5;
+
+  /** The y coordinate for the reference point of the maker */
+  export let refY: string | number = 5;
+
+  /** The bound of the SVG viewport for the current SVG fragment */
+  export let viewBox = '0 0 10 10';
+</script>
+
+<defs>
+  <marker
+    {id}
+    {markerWidth}
+    {markerHeight}
+    {markerUnits}
+    {orient}
+    {refX}
+    {refY}
+    {viewBox}
+    {...$$restProps}
+    class={cls(
+      'overflow-visible',
+      // stroke
+      $$props.stroke == null &&
+        (['arrow', 'circle-stroke', 'line'].includes(type ?? '')
+          ? 'stroke-[context-stroke]'
+          : type === 'circle'
+            ? 'stroke-surface-100'
+            : 'stroke-none'),
+      // extra stroke attrs
+      '[stroke-linecap:round] [stroke-linejoin:round]',
+      //fill
+      $$props.fill == null &&
+        (['triangle', 'dot', 'circle'].includes(type ?? '')
+          ? 'fill-[context-stroke]'
+          : type === 'circle-stroke'
+            ? 'fill-surface-100'
+            : 'fill-none'),
+      $$props.class
+    )}
+  >
+    <slot>
+      {#if type === 'triangle'}
+        <path d="M 0 0 L 10 5 L 0 10 z" />
+      {:else if type === 'arrow'}
+        <polyline points="0 0, 10 5, 0 10" />
+      {:else if type === 'circle' || type === 'circle-stroke' || type === 'dot'}
+        <circle cx={5} cy={5} r={5} />
+      {:else if type === 'line'}
+        <polyline points="5 0, 5 10" />
+      {/if}
+    </slot>
+  </marker>
+</defs>

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

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        type?: "arrow" | "triangle" | "line" | "circle" | "circle-stroke" | "dot" | undefined;
+        id?: string | undefined;
+        size?: number | undefined;
+        markerWidth?: (string | number) | undefined;
+        markerHeight?: (string | number) | undefined;
+        markerUnits?: ("userSpaceOnUse" | "strokeWidth") | undefined;
+        orient?: ("auto" | "auto-start-reverse" | number) | undefined;
+        refX?: (string | number) | undefined;
+        refY?: (string | number) | undefined;
+        viewBox?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type MarkerProps = typeof __propDef.props;
+export type MarkerEvents = typeof __propDef.events;
+export type MarkerSlots = typeof __propDef.slots;
+export default class Marker extends SvelteComponentTyped<MarkerProps, MarkerEvents, MarkerSlots> {
+}
+export {};

package/dist/components/Spline.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { tick, type ComponentProps } from 'svelte';
   import { writable } from 'svelte/store';
   import { tweened as tweenedStore } from 'svelte/motion';
   import { draw as _drawTransition } from 'svelte/transition';
@@ -11,9 +11,12 @@
   import { interpolatePath } from 'd3-interpolate-path';
   import { max } from 'd3-array';
   import { cls } from '@layerstack/tailwind';
+  import { uniqueId } from '@layerstack/utils';
 
   import { chartContext } from './ChartContext.svelte';
   import Group from './Group.svelte';
+  import Marker from './Marker.svelte';
+
   import { motionStore } from '../stores/motionStore.js';
   import { accessor, type Accessor } from '../utils/common.js';
   import { isScaleBand } from '../utils/scales.js';
@@ -48,6 +51,23 @@
   export let curve: CurveFactory | CurveFactoryLineOnly | undefined = undefined;
   export let defined: Parameters<Line<any>['defined']>[0] | undefined = undefined;
 
+  /** Marker to attach to start, mid, and end points of path */
+  export let marker: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    undefined;
+  /** Marker to attach to start point of path */
+  export let markerStart: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    marker;
+  /** Marker to attach to all mid points of path */
+  export let markerMid: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    marker;
+  /** Marker to attach to end point of path */
+  export let markerEnd: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    marker;
+
+  $: markerStartId = markerStart || $$slots['markerStart'] ? uniqueId('marker-') : '';
+  $: markerMidId = markerMid || $$slots['markerMid'] ? uniqueId('marker-') : '';
+  $: markerEndId = markerEnd || $$slots['markerEnd'] ? uniqueId('marker-') : '';
+
   function getScaleValue(data: any, scale: typeof $xScale | typeof $yScale, accessor: Function) {
     let value = accessor(data);
 
@@ -145,6 +165,9 @@
       !$$props.stroke && 'stroke-surface-content',
       $$props.class
     )}
+    marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
+    marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
+    marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
     in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
     on:click
     on:pointerenter
@@ -153,6 +176,32 @@
     bind:this={pathEl}
   />
 
+  <slot name="markerStart" id={markerStartId}>
+    {#if markerStart}
+      <Marker
+        id={markerStartId}
+        type={typeof markerStart === 'string' ? markerStart : undefined}
+        {...typeof markerStart === 'object' ? markerStart : null}
+      />
+    {/if}
+  </slot>
+
+  <slot name="markerMid" id={markerMidId}>
+    <Marker
+      id={markerMidId}
+      type={typeof markerMid === 'string' ? markerMid : undefined}
+      {...typeof markerMid === 'object' ? markerMid : null}
+    />
+  </slot>
+
+  <slot name="markerEnd" id={markerEndId}>
+    <Marker
+      id={markerEndId}
+      type={typeof markerEnd === 'string' ? markerEnd : undefined}
+      {...typeof markerEnd === 'object' ? markerEnd : null}
+    />
+  </slot>
+
   {#if $$slots.start && $startPoint}
     <Group x={$startPoint.x} y={$startPoint.y}>
       <slot name="start" point={$startPoint} />

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

@@ -1,7 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
 import { tweened as tweenedStore } from 'svelte/motion';
 import { draw as _drawTransition } from 'svelte/transition';
 import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
+import Marker from './Marker.svelte';
 import { type Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
@@ -14,6 +16,10 @@ declare const __propDef: {
         draw?: boolean | Parameters<typeof _drawTransition>[1];
         curve?: CurveFactory | CurveFactoryLineOnly | undefined;
         defined?: Parameters<Line<any>["defined"]>[0] | undefined;
+        marker?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
+        markerStart?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
+        markerMid?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
+        markerEnd?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
     };
     events: {
         click: MouseEvent;
@@ -24,6 +30,15 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        markerStart: {
+            id: string;
+        };
+        markerMid: {
+            id: string;
+        };
+        markerEnd: {
+            id: string;
+        };
         start: {
             point: DOMPoint | undefined;
         };

package/dist/components/charts/AreaChart.svelte

@@ -192,6 +192,16 @@
         {/if}
       </slot>
 
+      <slot name="belowMarks" {...slotProps} />
+
+      <slot name="marks" {...slotProps}>
+        {#each series as s, i}
+          <Area {...getAreaProps(s, i)} />
+        {/each}
+      </slot>
+
+      <slot name="aboveMarks" {...slotProps} />
+
       <slot name="axis" {...slotProps}>
         {#if axis}
           {#if axis !== 'x'}
@@ -224,16 +234,6 @@
         {/if}
       </slot>
 
-      <slot name="below-marks" {...slotProps} />
-
-      <slot name="marks" {...slotProps}>
-        {#each series as s, i}
-          <Area {...getAreaProps(s, i)} />
-        {/each}
-      </slot>
-
-      <slot name="above-marks" {...slotProps} />
-
       {#if points}
         {#each series as s}
           <Points

package/dist/components/charts/AreaChart.svelte.d.ts

@@ -315,10 +315,10 @@ declare class __sveltets_Render<TData> {
     slots(): {
         default: any;
         grid: any;
-        axis: any;
-        'below-marks': any;
+        belowMarks: any;
         marks: any;
-        'above-marks': any;
+        aboveMarks: any;
+        axis: any;
         highlight: any;
         legend: any;
         tooltip: any;

package/dist/components/charts/BarChart.svelte

@@ -245,6 +245,16 @@
         {/if}
       </slot>
 
+      <slot name="belowMarks" {...slotProps} />
+
+      <slot name="marks" {...slotProps}>
+        {#each series as s, i}
+          <Bars {...getBarsProps(s, i)} />
+        {/each}
+      </slot>
+
+      <slot name="aboveMarks" {...slotProps} />
+
       <slot name="axis" {...slotProps}>
         {#if axis}
           {#if axis !== 'x'}
@@ -288,16 +298,6 @@
         {/if}
       </slot>
 
-      <slot name="below-marks" {...slotProps} />
-
-      <slot name="marks" {...slotProps}>
-        {#each series as s, i}
-          <Bars {...getBarsProps(s, i)} />
-        {/each}
-      </slot>
-
-      <slot name="above-marks" {...slotProps} />
-
       <slot name="highlight" {...slotProps}>
         <Highlight area {...props.highlight} />
       </slot>

package/dist/components/charts/BarChart.svelte.d.ts

@@ -301,10 +301,10 @@ declare class __sveltets_Render<TData> {
     slots(): {
         default: any;
         grid: any;
-        axis: any;
-        'below-marks': any;
+        belowMarks: any;
         marks: any;
-        'above-marks': any;
+        aboveMarks: any;
+        axis: any;
         highlight: any;
         legend: any;
         tooltip: any;

package/dist/components/charts/LineChart.svelte

@@ -139,6 +139,16 @@
         {/if}
       </slot>
 
+      <slot name="belowMarks" {...slotProps} />
+
+      <slot name="marks" {...slotProps}>
+        {#each series as s, i}
+          <Spline {...getSplineProps(s, i)} />
+        {/each}
+      </slot>
+
+      <slot name="aboveMarks" {...slotProps} />
+
       <slot name="axis" {...slotProps}>
         {#if axis}
           {#if axis !== 'x'}
@@ -165,16 +175,6 @@
         {/if}
       </slot>
 
-      <slot name="below-marks" {...slotProps} />
-
-      <slot name="marks" {...slotProps}>
-        {#each series as s, i}
-          <Spline {...getSplineProps(s, i)} />
-        {/each}
-      </slot>
-
-      <slot name="above-marks" {...slotProps} />
-
       {#if points}
         {#each series as s}
           <Points

package/dist/components/charts/LineChart.svelte.d.ts

@@ -312,10 +312,10 @@ declare class __sveltets_Render<TData> {
     slots(): {
         default: any;
         grid: any;
-        axis: any;
-        'below-marks': any;
+        belowMarks: any;
         marks: any;
-        'above-marks': any;
+        aboveMarks: any;
+        axis: any;
         highlight: any;
         legend: any;
         tooltip: any;

package/dist/components/charts/PieChart.svelte

@@ -24,6 +24,7 @@
     maxValue?: typeof maxValue;
     outerRadius?: typeof outerRadius;
     padAngle?: typeof padAngle;
+    center?: typeof center;
     props?: typeof props;
     range?: typeof range;
     series?: typeof series;
@@ -83,6 +84,9 @@
   export let cornerRadius = 0;
   export let padAngle = 0;
 
+  /** Center chart.  Override and use `props.group` for more control */
+  export let center = true;
+
   export let props: {
     pie?: Partial<ComponentProps<Pie>>;
     group?: Partial<ComponentProps<Group>>;
@@ -143,8 +147,8 @@
     tooltip,
   }}
   <slot {...slotProps}>
-    <Svg center>
-      <slot name="below-marks" {...slotProps} />
+    <Svg {center}>
+      <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
         <Group {...props.group}>
@@ -199,7 +203,7 @@
         </Group>
       </slot>
 
-      <slot name="above-marks" {...slotProps} />
+      <slot name="aboveMarks" {...slotProps} />
     </Svg>
 
     <slot name="legend" {...slotProps}>

package/dist/components/charts/PieChart.svelte.d.ts

@@ -222,6 +222,7 @@ declare class __sveltets_Render<TData> {
         maxValue?: number | undefined;
         outerRadius?: number | undefined;
         padAngle?: number;
+        center?: boolean;
         props?: {
             pie?: Partial<ComponentProps<Pie>>;
             group?: Partial<ComponentProps<Group>>;
@@ -247,9 +248,9 @@ declare class __sveltets_Render<TData> {
     };
     slots(): {
         default: any;
-        'below-marks': any;
+        belowMarks: any;
         marks: any;
-        'above-marks': any;
+        aboveMarks: any;
         legend: any;
         tooltip: any;
     };

package/dist/components/charts/ScatterChart.svelte

@@ -116,6 +116,16 @@
         {/if}
       </slot>
 
+      <slot name="belowMarks" {...slotProps} />
+
+      <slot name="marks" {...slotProps}>
+        {#each series as s, i}
+          <Points {...getPointsProps(s, i)} />
+        {/each}
+      </slot>
+
+      <slot name="aboveMarks" {...slotProps} />
+
       <slot name="axis" {...slotProps}>
         {#if axis}
           {#if axis !== 'x'}
@@ -142,16 +152,6 @@
         {/if}
       </slot>
 
-      <slot name="below-marks" {...slotProps} />
-
-      <slot name="marks" {...slotProps}>
-        {#each series as s, i}
-          <Points {...getPointsProps(s, i)} />
-        {/each}
-      </slot>
-
-      <slot name="above-marks" {...slotProps} />
-
       <slot name="highlight" {...slotProps}>
         <Highlight points={{ fill: activeSeries?.color }} lines axis="both" {...props.highlight} />
       </slot>

package/dist/components/charts/ScatterChart.svelte.d.ts

@@ -288,10 +288,10 @@ declare class __sveltets_Render<TData> {
     slots(): {
         default: any;
         grid: any;
-        axis: any;
-        'below-marks': any;
+        belowMarks: any;
         marks: any;
-        'above-marks': any;
+        aboveMarks: any;
+        axis: any;
         highlight: any;
         legend: any;
         tooltip: any;

package/dist/docs/TilesetField.svelte

@@ -39,6 +39,21 @@
     // https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/12/1572/1108.pbf
   };
 
+  // https://github.com/leaflet-extras/leaflet-providers/blob/master/leaflet-providers.js#L79
+  // https://www.openstreetmap.org/
+  const openStreetMap = (tileset: string) => (x: number, y: number, z: number) => {
+    // CyclOSM:  https://a.tile-cyclosm.openstreetmap.fr/cyclosm/9/142/197.png
+    // Cycle Map: https://b.tile.thunderforest.com/cycle/9/141/199@2x.png?apikey=6e5478c8a4f54c779f85573c0e399391
+    // TransportMap: https://b.tile.thunderforest.com/transport/9/136/195@2x.png?apikey=6e5478c8a4f54c779f85573c0e399391
+    return `https://tile.openstreetmap.org/${z}/${x}/${y}.png`;
+  };
+
+  // opentopomap.org/
+  const openTopoMap = (tileset: string) => (x: number, y: number, z: number) => {
+    const s = 'a';
+    return `https://${s}.tile.opentopomap.org/${z}/${x}/${y}.png`;
+  };
+
   $: services = {
     'mapbox v1': {
       'streets-v11': mapboxv1('streets-v11'),
@@ -59,6 +74,12 @@
       traffic: mapboxv4('mapbox.mapbox-traffic-v1'),
       // 'transit (mapbox v4)': mapboxv4('mapbox.transit-v2'),
     },
+    OpenStreetMap: {
+      Stardard: openStreetMap(''),
+    },
+    OpenTopoMap: {
+      Stardard: openTopoMap(''),
+    },
     'National Map Services': {
       Hydrography: nationalmap('USGSHydroCached'),
       'USGS Imagery Topo Base Map': nationalmap('USGSImageryTopo'),

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.54.1",
+  "version": "0.56.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.9",
     "@mdi/js": "^7.4.47",