layerchart 0.53.0 → 0.54.0

package/dist/components/Rule.svelte

@@ -15,6 +15,8 @@ $: [yRangeMin, yRangeMax] = extent($yRange);
  * - Use number | Date value for annotation (yScale(value))
  */
 export let x = false;
+/** Pixel offset to apply to `x` coordinate */
+export let xOffset = 0;
 /**
  * Create a horizontal `y` line
  * - If true or 'bottom', will draw at chart bottom (yRange[0])
@@ -23,6 +25,8 @@ export let x = false;
  * - Use number | Date value for annotation (xScale(value))
  */
 export let y = false;
+/** Pixel offset to apply to `y` coordinate */
+export let yOffset = 0;
 function showRule(value, axis) {
     switch (typeof value) {
         case 'boolean':
@@ -43,7 +47,7 @@ function showRule(value, axis) {
 <g class="rule">
   {#if showRule(x, 'x')}
     {@const xCoord =
-      x === true || x === 'left' ? xRangeMin : x === 'right' ? xRangeMax : $xScale(x)}
+      x === true || x === 'left' ? xRangeMin : x === 'right' ? xRangeMax : $xScale(x) + xOffset}
 
     {#if $radial}
       {@const [x1, y1] = pointRadial(xCoord, Number(yRangeMin))}
@@ -72,15 +76,27 @@ function showRule(value, axis) {
   {#if showRule(y, 'y')}
     {#if $radial}
       <Circle
-        r={y === true || y === 'bottom' ? yRangeMax : y === 'top' ? yRangeMin : $yScale(y)}
+        r={y === true || y === 'bottom'
+          ? yRangeMax
+          : y === 'top'
+            ? yRangeMin
+            : $yScale(y) + yOffset}
         class={cls('fill-none stroke-surface-content/50', $$props.class)}
       />
     {:else}
       <Line
         x1={$xRange[0] || 0}
         x2={$xRange[1] || 0}
-        y1={y === true || y === 'bottom' ? yRangeMax : y === 'top' ? yRangeMin : $yScale(y)}
-        y2={y === true || y === 'bottom' ? yRangeMax : y === 'top' ? yRangeMin : $yScale(y)}
+        y1={y === true || y === 'bottom'
+          ? yRangeMax
+          : y === 'top'
+            ? yRangeMin
+            : $yScale(y) + yOffset}
+        y2={y === true || y === 'bottom'
+          ? yRangeMax
+          : y === 'top'
+            ? yRangeMin
+            : $yScale(y) + yOffset}
         {...$$restProps}
         class={cls('stroke-surface-content/50', $$props.class)}
       />

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

@@ -3,7 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         x?: (number | Date | boolean | "left" | "right") | undefined;
+        xOffset?: number | undefined;
         y?: (number | Date | boolean | "top" | "bottom") | undefined;
+        yOffset?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/TransformContext.svelte

@@ -226,7 +226,9 @@ setTransformContext({
     // Touch events cause pointer events to be interrupted.
     // Typically `touch-action: none` works, but doesn't appear to with SVG, but `preventDefault()` works here
     // https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#touch-action_css_property
-    e.preventDefault();
+    if (mode !== 'none' && !disablePointer) {
+      e.preventDefault();
+    }
   }}
   on:pointerup={onPointerUp}
   on:dblclick={onDoubleClick}

package/dist/components/charts/AreaChart.svelte

@@ -6,6 +6,7 @@ import { format } from '@layerstack/utils';
 import Area from '../Area.svelte';
 import Axis from '../Axis.svelte';
 import Chart from '../Chart.svelte';
+import Grid from '../Grid.svelte';
 import Highlight from '../Highlight.svelte';
 import Labels from '../Labels.svelte';
 import Legend from '../Legend.svelte';
@@ -21,10 +22,12 @@ export let y = undefined;
 /** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
 export let radial = false;
 export let series = [{ key: 'default', value: y, color: 'hsl(var(--color-primary))' }];
+$: isDefaultSeries = series.length === 1 && series[0].key === 'default';
 /** Determine how to layout series.  Overlap (default) or stack */
 export let seriesLayout = 'overlap';
 $: stackSeries = seriesLayout.startsWith('stack');
 export let axis = true;
+export let grid = true;
 export let rule = true;
 export let labels = false;
 export let legend = false;
@@ -57,6 +60,32 @@ $: if (stackSeries) {
 }
 // Default xScale based on first data's `x` value
 $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear();
+function getAreaProps(s, i) {
+    const lineProps = {
+        ...props.line,
+        ...(typeof props.area?.line === 'object' ? props.area.line : null),
+        ...(typeof s.props?.line === 'object' ? s.props.line : null),
+    };
+    const areaProps = {
+        data: s.data,
+        y0: stackSeries ? (d) => d.stackData[i][0] : Array.isArray(s.value) ? s.value[0] : undefined,
+        y1: stackSeries
+            ? (d) => d.stackData[i][1]
+            : Array.isArray(s.value)
+                ? s.value[1]
+                : (s.value ?? s.key),
+        fill: s.color,
+        'fill-opacity': 0.3,
+        ...props.area,
+        ...s.props,
+        line: {
+            class: !('stroke-width' in lineProps) ? 'stroke-2' : '',
+            stroke: s.color,
+            ...lineProps,
+        },
+    };
+    return areaProps;
+}
 </script>
 
 <Chart
@@ -82,20 +111,41 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
   let:xScale
   let:y
   let:yScale
+  let:c
+  let:cScale
   let:width
   let:height
   let:padding
   let:tooltip
 >
-  {@const slotProps = { x, xScale, y, yScale, width, height, padding, tooltip, series }}
+  {@const slotProps = {
+    x,
+    xScale,
+    y,
+    yScale,
+    c,
+    cScale,
+    width,
+    height,
+    padding,
+    tooltip,
+    series,
+    getAreaProps,
+  }}
+
   <slot {...slotProps}>
     <Svg center={radial}>
+      <slot name="grid" {...slotProps}>
+        {#if grid}
+          <Grid x={radial} y {...typeof grid === 'object' ? grid : null} {...props.grid} />
+        {/if}
+      </slot>
+
       <slot name="axis" {...slotProps}>
         {#if axis}
           {#if axis !== 'x'}
             <Axis
               placement={radial ? 'radius' : 'left'}
-              grid
               format={(value) => {
                 if (seriesLayout === 'stackExpand') {
                   return format(value, 'percentRound');
@@ -111,7 +161,6 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
           {#if axis !== 'y'}
             <Axis
               placement={radial ? 'angle' : 'bottom'}
-              grid={radial}
               format={(value) => format(value, undefined, { variant: 'short' })}
               {...typeof axis === 'object' ? axis : null}
               {...props.xAxis}
@@ -128,34 +177,7 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
 
       <slot name="marks" {...slotProps}>
         {#each series as s, i}
-          {@const lineProps = {
-            ...props.line,
-            ...(typeof props.area?.line === 'object' ? props.area.line : null),
-            ...(typeof s.props?.line === 'object' ? s.props.line : null),
-          }}
-
-          <Area
-            data={s.data}
-            y0={stackSeries
-              ? (d) => d.stackData[i][0]
-              : Array.isArray(s.value)
-                ? s.value[0]
-                : undefined}
-            y1={stackSeries
-              ? (d) => d.stackData[i][1]
-              : Array.isArray(s.value)
-                ? s.value[1]
-                : (s.value ?? s.key)}
-            fill={s.color}
-            fill-opacity={0.3}
-            {...props.area}
-            {...s.props}
-            line={{
-              class: !('stroke-width' in lineProps) ? 'stroke-2' : '',
-              stroke: s.color,
-              ...lineProps,
-            }}
-          />
+          <Area {...getAreaProps(s, i)} />
         {/each}
       </slot>
 
@@ -192,10 +214,12 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
     <slot name="legend" {...slotProps}>
       {#if legend}
         <Legend
-          scale={scaleOrdinal(
-            series.map((s) => s.label ?? s.key),
-            series.map((s) => s.color)
-          )}
+          scale={isDefaultSeries
+            ? undefined
+            : scaleOrdinal(
+                series.map((s) => s.label ?? s.key),
+                series.map((s) => s.color)
+              )}
           placement="bottom"
           variant="swatches"
           {...props.legend}

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from 'svelte';
 import Area from '../Area.svelte';
 import Axis from '../Axis.svelte';
+import Grid from '../Grid.svelte';
 import Highlight from '../Highlight.svelte';
 import Labels from '../Labels.svelte';
 import Legend from '../Legend.svelte';
@@ -77,7 +78,7 @@ declare class __sveltets_Render<TData> {
             width: number;
             height: number;
         }) => number[] | string[]) | undefined;
-        cRange?: string[];
+        cRange?: string[] | readonly string[];
         xReverse?: boolean;
         yReverse?: boolean;
         zReverse?: boolean;
@@ -132,6 +133,13 @@ declare class __sveltets_Render<TData> {
             onClick?: ({ data }: {
                 data: any;
             }) => any;
+            tooltip?: import("svelte/store").Writable<{
+                y: number;
+                x: number;
+                data: any;
+                show: (e: PointerEvent, tooltipData?: any) => void;
+                hide: () => void;
+            }>;
         }> | undefined;
         transform?: Partial<{
             mode?: "canvas" | "manual" | "none";
@@ -180,6 +188,14 @@ declare class __sveltets_Render<TData> {
             setScale?: (value: number, options?: import("../../stores/motionStore").MotionOptions) => void;
         }> | undefined;
         transformContext?: import("..").TransformContext;
+        geoProjection?: import("svelte/store").Writable<import("d3-geo").GeoProjection> | undefined;
+        tooltipContext?: import("svelte/store").Writable<{
+            y: number;
+            x: number;
+            data: any;
+            show: (e: PointerEvent, tooltipData?: any) => void;
+            hide: () => void;
+        }> | undefined;
     } & {
         axis?: boolean | "x" | "y" | {
             [x: string]: any;
@@ -187,7 +203,7 @@ declare class __sveltets_Render<TData> {
             label?: string | undefined;
             labelPlacement?: ("start" | "middle" | "end") | undefined;
             labelProps?: Partial<ComponentProps<import("..").Text>> | undefined;
-            rule?: (boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">) | undefined;
+            rule?: (boolean | Partial<ComponentProps<Rule>>) | undefined;
             grid?: (boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">) | undefined;
             ticks?: number | any[] | ((scale: import("../../utils/scales").AnyScale) => any) | null | undefined;
             tickLength?: number | undefined;
@@ -203,8 +219,26 @@ declare class __sveltets_Render<TData> {
                 label?: string;
             } | undefined;
         };
+        grid?: boolean | {
+            [x: string]: any;
+            x?: (boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">) | undefined;
+            y?: (boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">) | undefined;
+            xTicks?: number | any[] | ((scale: import("../../utils/scales").AnyScale) => any) | null | undefined;
+            yTicks?: number | any[] | ((scale: import("../../utils/scales").AnyScale) => any) | null | undefined;
+            bandAlign?: ("center" | "between") | undefined;
+            radialY?: ("circle" | "linear") | undefined;
+            spring?: boolean | Parameters<typeof import("svelte/motion").spring>[1];
+            tweened?: boolean | Parameters<typeof import("svelte/motion").tweened>[1];
+            transitionIn?: (typeof import("svelte/transition").fade | (() => {})) | undefined;
+            transitionInParams?: import("svelte-ux").TransitionParams | undefined;
+            classes?: {
+                root?: string;
+                line?: string;
+            } | undefined;
+        };
         labels?: boolean | {
             [x: string]: any;
+            value?: Accessor;
             placement?: ("inside" | "outside" | "center") | undefined;
             offset?: number | undefined;
             format?: import("@layerstack/utils").FormatType | undefined;
@@ -248,6 +282,7 @@ declare class __sveltets_Render<TData> {
         props?: {
             xAxis?: Partial<ComponentProps<Axis>>;
             yAxis?: Partial<ComponentProps<Axis>>;
+            grid?: Partial<ComponentProps<Grid>>;
             rule?: Partial<ComponentProps<Rule>>;
             area?: Partial<ComponentProps<Area>>;
             line?: Partial<ComponentProps<Line>>;
@@ -259,7 +294,9 @@ declare class __sveltets_Render<TData> {
         rule?: boolean | {
             [x: string]: any;
             x?: (number | Date | boolean | "left" | "right") | undefined;
+            xOffset?: number | undefined;
             y?: (number | Date | boolean | "top" | "bottom") | undefined;
+            yOffset?: number | undefined;
         };
         series?: {
             key: string;
@@ -277,6 +314,7 @@ declare class __sveltets_Render<TData> {
     };
     slots(): {
         default: any;
+        grid: any;
         axis: any;
         'below-marks': any;
         marks: any;

package/dist/components/charts/BarChart.svelte

@@ -6,6 +6,7 @@ import { format } from '@layerstack/utils';
 import Axis from '../Axis.svelte';
 import Bars from '../Bars.svelte';
 import Chart from '../Chart.svelte';
+import Grid from '../Grid.svelte';
 import Highlight from '../Highlight.svelte';
 import Labels from '../Labels.svelte';
 import Legend from '../Legend.svelte';
@@ -22,15 +23,16 @@ export let series = [
     {
         key: 'default',
         value: orientation === 'vertical' ? y : x,
-        color: 'hsl(var(--color-primary))',
     },
 ];
+$: isDefaultSeries = series.length === 1 && series[0].key === 'default';
 /** Determine how to layout series.  Overlap (default), stack, or group side by side */
 export let seriesLayout = 'overlap';
 $: stackSeries = seriesLayout.startsWith('stack');
 $: groupSeries = seriesLayout === 'group';
 export let axis = true;
 export let rule = true;
+export let grid = true;
 export let labels = false;
 export let legend = false;
 /** Padding between primary x or y bands/bars, applied to scaleBand().padding() */
@@ -88,6 +90,29 @@ $: if (stackSeries) {
         };
     });
 }
+function getBarsProps(s, i) {
+    const barsProps = {
+        data: s.data,
+        x: !isVertical
+            ? stackSeries
+                ? (d) => d.stackData[i]
+                : (s.value ?? (s.data ? undefined : s.key))
+            : undefined,
+        y: isVertical
+            ? stackSeries
+                ? (d) => d.stackData[i]
+                : (s.value ?? (s.data ? undefined : s.key))
+            : undefined,
+        x1: isVertical && groupSeries ? (d) => s.value ?? s.key : undefined,
+        y1: !isVertical && groupSeries ? (d) => s.value ?? s.key : undefined,
+        radius: 4,
+        strokeWidth: 1,
+        fill: s.color,
+        ...props.bars,
+        ...s.props,
+    };
+    return barsProps;
+}
 </script>
 
 <Chart
@@ -112,6 +137,8 @@ $: if (stackSeries) {
   {y1Scale}
   {y1Domain}
   {y1Range}
+  c={isVertical ? y : x}
+  cRange={['hsl(var(--color-primary))']}
   padding={axis === false
     ? undefined
     : {
@@ -124,20 +151,45 @@ $: if (stackSeries) {
   let:xScale
   let:y
   let:yScale
+  let:c
+  let:cScale
   let:width
   let:height
   let:padding
   let:tooltip
 >
-  {@const slotProps = { x, xScale, y, yScale, width, height, padding, tooltip, series }}
+  {@const slotProps = {
+    x,
+    xScale,
+    y,
+    yScale,
+    c,
+    cScale,
+    width,
+    height,
+    padding,
+    tooltip,
+    series,
+    getBarsProps,
+  }}
   <slot {...slotProps}>
     <Svg>
+      <slot name="grid" {...slotProps}>
+        {#if grid}
+          <Grid
+            x={!isVertical}
+            y={isVertical}
+            {...typeof grid === 'object' ? grid : null}
+            {...props.grid}
+          />
+        {/if}
+      </slot>
+
       <slot name="axis" {...slotProps}>
         {#if axis}
           {#if axis !== 'x'}
             <Axis
               placement="left"
-              grid={isVertical}
               format={(value) => {
                 if (isVertical && seriesLayout === 'stackExpand') {
                   return format(value, 'percentRound');
@@ -153,7 +205,6 @@ $: if (stackSeries) {
           {#if axis !== 'y'}
             <Axis
               placement="bottom"
-              grid={!isVertical}
               format={(value) => {
                 if (!isVertical && seriesLayout === 'stackExpand') {
                   return format(value, 'percentRound');
@@ -176,26 +227,7 @@ $: if (stackSeries) {
 
       <slot name="marks" {...slotProps}>
         {#each series as s, i}
-          <Bars
-            data={s.data}
-            x={!isVertical
-              ? stackSeries
-                ? (d) => d.stackData[i]
-                : (s.value ?? (s.data ? undefined : s.key))
-              : undefined}
-            y={isVertical
-              ? stackSeries
-                ? (d) => d.stackData[i]
-                : (s.value ?? (s.data ? undefined : s.key))
-              : undefined}
-            x1={isVertical && groupSeries ? (d) => s.value ?? s.key : undefined}
-            y1={!isVertical && groupSeries ? (d) => s.value ?? s.key : undefined}
-            radius={4}
-            strokeWidth={1}
-            fill={s.color}
-            {...props.bars}
-            {...s.props}
-          />
+          <Bars {...getBarsProps(s, i)} />
         {/each}
       </slot>
 
@@ -213,10 +245,12 @@ $: if (stackSeries) {
     <slot name="legend" {...slotProps}>
       {#if legend}
         <Legend
-          scale={scaleOrdinal(
-            series.map((s) => s.label ?? s.key),
-            series.map((s) => s.color)
-          )}
+          scale={isDefaultSeries
+            ? undefined
+            : scaleOrdinal(
+                series.map((s) => s.label ?? s.key),
+                series.map((s) => s.color)
+              )}
           placement="bottom"
           variant="swatches"
           {...props.legend}
@@ -236,7 +270,7 @@ $: if (stackSeries) {
             <Tooltip.Item
               label={s.label ?? (s.key !== 'default' ? s.key : 'value')}
               value={valueAccessor(data)}
-              color={s.color}
+              color={s.color ?? cScale(c(data))}
               {format}
               valueAlign="right"
             />

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from 'svelte';
 import Axis from '../Axis.svelte';
 import Bars from '../Bars.svelte';
+import Grid from '../Grid.svelte';
 import Highlight from '../Highlight.svelte';
 import Labels from '../Labels.svelte';
 import Legend from '../Legend.svelte';
@@ -75,7 +76,7 @@ declare class __sveltets_Render<TData> {
             width: number;
             height: number;
         }) => number[] | string[]) | undefined;
-        cRange?: string[];
+        cRange?: string[] | readonly string[];
         xReverse?: boolean;
         yReverse?: boolean;
         zReverse?: boolean;
@@ -130,6 +131,13 @@ declare class __sveltets_Render<TData> {
             onClick?: ({ data }: {
                 data: any;
             }) => any;
+            tooltip?: import("svelte/store").Writable<{
+                y: number;
+                x: number;
+                data: any;
+                show: (e: PointerEvent, tooltipData?: any) => void;
+                hide: () => void;
+            }>;
         }> | undefined;
         transform?: Partial<{
             mode?: "canvas" | "manual" | "none";
@@ -178,6 +186,14 @@ declare class __sveltets_Render<TData> {
             setScale?: (value: number, options?: import("../../stores/motionStore").MotionOptions) => void;
         }> | undefined;
         transformContext?: import("..").TransformContext;
+        geoProjection?: import("svelte/store").Writable<import("d3-geo").GeoProjection> | undefined;
+        tooltipContext?: import("svelte/store").Writable<{
+            y: number;
+            x: number;
+            data: any;
+            show: (e: PointerEvent, tooltipData?: any) => void;
+            hide: () => void;
+        }> | undefined;
     } & {
         axis?: boolean | "x" | "y" | {
             [x: string]: any;
@@ -185,7 +201,7 @@ declare class __sveltets_Render<TData> {
             label?: string | undefined;
             labelPlacement?: ("start" | "middle" | "end") | undefined;
             labelProps?: Partial<ComponentProps<import("..").Text>> | undefined;
-            rule?: (boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">) | undefined;
+            rule?: (boolean | Partial<ComponentProps<Rule>>) | undefined;
             grid?: (boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">) | undefined;
             ticks?: number | any[] | ((scale: import("../../utils/scales").AnyScale) => any) | null | undefined;
             tickLength?: number | undefined;
@@ -201,10 +217,28 @@ declare class __sveltets_Render<TData> {
                 label?: string;
             } | undefined;
         };
+        grid?: boolean | {
+            [x: string]: any;
+            x?: (boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">) | undefined;
+            y?: (boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">) | undefined;
+            xTicks?: number | any[] | ((scale: import("../../utils/scales").AnyScale) => any) | null | undefined;
+            yTicks?: number | any[] | ((scale: import("../../utils/scales").AnyScale) => any) | null | undefined;
+            bandAlign?: ("center" | "between") | undefined;
+            radialY?: ("circle" | "linear") | undefined;
+            spring?: boolean | Parameters<typeof import("svelte/motion").spring>[1];
+            tweened?: boolean | Parameters<typeof import("svelte/motion").tweened>[1];
+            transitionIn?: (typeof import("svelte/transition").fade | (() => {})) | undefined;
+            transitionInParams?: import("svelte-ux").TransitionParams | undefined;
+            classes?: {
+                root?: string;
+                line?: string;
+            } | undefined;
+        };
         bandPadding?: number;
         groupPadding?: number;
         labels?: boolean | {
             [x: string]: any;
+            value?: Accessor;
             placement?: ("inside" | "outside" | "center") | undefined;
             offset?: number | undefined;
             format?: import("@layerstack/utils").FormatType | undefined;
@@ -236,6 +270,7 @@ declare class __sveltets_Render<TData> {
         props?: {
             xAxis?: Partial<ComponentProps<Axis>>;
             yAxis?: Partial<ComponentProps<Axis>>;
+            grid?: Partial<ComponentProps<Grid>>;
             rule?: Partial<ComponentProps<Rule>>;
             bars?: Partial<ComponentProps<Bars>>;
             legend?: Partial<ComponentProps<Legend>>;
@@ -245,7 +280,9 @@ declare class __sveltets_Render<TData> {
         rule?: boolean | {
             [x: string]: any;
             x?: (number | Date | boolean | "left" | "right") | undefined;
+            xOffset?: number | undefined;
             y?: (number | Date | boolean | "top" | "bottom") | undefined;
+            yOffset?: number | undefined;
         };
         series?: {
             key: string;
@@ -263,6 +300,7 @@ declare class __sveltets_Render<TData> {
     };
     slots(): {
         default: any;
+        grid: any;
         axis: any;
         'below-marks': any;
         marks: any;