layerchart 0.53.0 → 0.54.0

package/dist/components/charts/LineChart.svelte

@@ -3,6 +3,7 @@ import { scaleLinear, scaleOrdinal, scaleTime } from 'd3-scale';
 import { format } from '@layerstack/utils';
 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';
@@ -18,8 +19,10 @@ 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';
 export let axis = true;
 export let rule = true;
+export let grid = true;
 export let labels = false;
 export let legend = false;
 export let points = false;
@@ -30,6 +33,17 @@ $: allSeriesData = series
 $: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data));
 // Default xScale based on first data's `x` value
 $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear();
+function getSplineProps(s, i) {
+    const splineProps = {
+        data: s.data,
+        y: s.value ?? (s.data ? undefined : s.key),
+        class: 'stroke-2',
+        stroke: s.color,
+        ...props.spline,
+        ...s.props,
+    };
+    return splineProps;
+}
 </script>
 
 <Chart
@@ -52,20 +66,40 @@ $: 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,
+    getSplineProps,
+  }}
   <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) => format(value, undefined, { variant: 'short' })}
               {...typeof axis === 'object' ? axis : null}
               {...props.yAxis}
@@ -75,7 +109,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}
@@ -91,15 +124,8 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
       <slot name="below-marks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
-        {#each series as s}
-          <Spline
-            data={s.data}
-            y={s.value ?? (s.data ? undefined : s.key)}
-            class="stroke-2"
-            stroke={s.color}
-            {...props.spline}
-            {...s.props}
-          />
+        {#each series as s, i}
+          <Spline {...getSplineProps(s, i)} />
         {/each}
       </slot>
 
@@ -137,10 +163,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/LineChart.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from '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';
@@ -76,7 +77,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;
@@ -131,6 +132,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";
@@ -179,6 +187,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;
@@ -186,7 +202,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;
@@ -202,8 +218,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;
@@ -247,6 +281,7 @@ declare class __sveltets_Render<TData> {
         props?: {
             xAxis?: Partial<ComponentProps<Axis>>;
             yAxis?: Partial<ComponentProps<Axis>>;
+            grid?: Partial<ComponentProps<Grid>>;
             rule?: Partial<ComponentProps<Rule>>;
             spline?: Partial<ComponentProps<Spline>>;
             legend?: Partial<ComponentProps<Legend>>;
@@ -257,7 +292,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 | number;
@@ -274,6 +311,7 @@ declare class __sveltets_Render<TData> {
     };
     slots(): {
         default: any;
+        grid: any;
         axis: any;
         'below-marks': any;
         marks: any;

package/dist/components/charts/PieChart.svelte

@@ -77,7 +77,21 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
   let:padding
   let:tooltip
 >
-  {@const slotProps = { key, label, value, x, xScale, y, yScale, width, height, padding, tooltip }}
+  {@const slotProps = {
+    key,
+    label,
+    value,
+    x,
+    xScale,
+    y,
+    yScale,
+    c,
+    cScale,
+    width,
+    height,
+    padding,
+    tooltip,
+  }}
   <slot {...slotProps}>
     <Svg center>
       <slot name="below-marks" {...slotProps} />

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

@@ -73,7 +73,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;
@@ -128,6 +128,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";
@@ -176,6 +183,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;
     } & {
         cornerRadius?: number;
         innerRadius?: number | undefined;

package/dist/components/charts/ScatterChart.svelte

@@ -3,6 +3,7 @@ import { scaleLinear, scaleOrdinal, scaleTime } from 'd3-scale';
 import { format } from '@layerstack/utils';
 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';
@@ -15,7 +16,9 @@ export let data = [];
 export let x = undefined;
 export let y = undefined;
 export let series = [{ key: 'default', data: chartDataArray(data), color: 'hsl(var(--color-primary))' }];
+$: isDefaultSeries = series.length === 1 && series[0].key === 'default';
 export let axis = true;
+export let grid = true;
 export let labels = false;
 export let legend = false;
 export let rule = true;
@@ -25,6 +28,17 @@ $: xScale = accessor(x)(chartDataArray(data)[0]) instanceof Date ? scaleTime() :
 let chartData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
     .filter((d) => d);
+function getPointsProps(s, i) {
+    const pointsProps = {
+        data: s.data,
+        stroke: s.color,
+        fill: s.color,
+        'fill-opacity': 0.3,
+        ...props.points,
+        ...s.props,
+    };
+    return pointsProps;
+}
 </script>
 
 <Chart
@@ -45,6 +59,8 @@ let chartData = series
   let:xScale
   let:y
   let:yScale
+  let:c
+  let:cScale
   let:r
   let:width
   let:height
@@ -52,19 +68,24 @@ let chartData = series
   let:tooltip
   let:config
 >
-  {@const slotProps = { x, xScale, y, yScale, width, height, padding, tooltip, series }}
+  {@const slotProps = { x, xScale, y, yScale, c, cScale, width, height, padding, tooltip, series }}
   {@const activeSeries = tooltip.data
     ? (series.find((s) => s.key === tooltip.data.seriesKey) ?? series[0])
     : null}
 
   <slot {...slotProps}>
     <Svg>
+      <slot name="grid" {...slotProps}>
+        {#if grid}
+          <Grid x y {...typeof grid === 'object' ? grid : null} {...props.grid} />
+        {/if}
+      </slot>
+
       <slot name="axis" {...slotProps}>
         {#if axis}
           {#if axis !== 'x'}
             <Axis
               placement="left"
-              grid
               format={(value) => format(value, undefined, { variant: 'short' })}
               {...typeof axis === 'object' ? axis : null}
               {...props.yAxis}
@@ -74,7 +95,6 @@ let chartData = series
           {#if axis !== 'y'}
             <Axis
               placement="bottom"
-              grid
               format={(value) => format(value, undefined, { variant: 'short' })}
               {...typeof axis === 'object' ? axis : null}
               {...props.xAxis}
@@ -90,15 +110,8 @@ let chartData = series
       <slot name="below-marks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
-        {#each series as s}
-          <Points
-            data={s.data}
-            stroke={s.color}
-            fill={s.color}
-            fill-opacity={0.3}
-            {...props.points}
-            {...s.props}
-          />
+        {#each series as s, i}
+          <Points {...getPointsProps(s, i)} />
         {/each}
       </slot>
 
@@ -120,10 +133,12 @@ let chartData = series
     <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/ScatterChart.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from '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';
@@ -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,8 +217,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;
@@ -233,6 +267,7 @@ declare class __sveltets_Render<TData> {
         props?: {
             xAxis?: Partial<ComponentProps<Axis>>;
             yAxis?: Partial<ComponentProps<Axis>>;
+            grid?: Partial<ComponentProps<Grid>>;
             points?: Partial<ComponentProps<Points>>;
             highlight?: Partial<ComponentProps<Highlight>>;
             labels?: Partial<ComponentProps<Labels>>;
@@ -252,6 +287,7 @@ declare class __sveltets_Render<TData> {
     };
     slots(): {
         default: any;
+        grid: any;
         axis: any;
         'below-marks': any;
         marks: any;

package/dist/components/index.d.ts

@@ -27,6 +27,7 @@ export { default as GeoSpline } from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
 export { default as GeoVisible } from './GeoVisible.svelte';
 export { default as Graticule } from './Graticule.svelte';
+export { default as Grid } from './Grid.svelte';
 export { default as Group } from './Group.svelte';
 export { default as Highlight } from './Highlight.svelte';
 export { default as HitCanvas } from './HitCanvas.svelte';

package/dist/components/index.js

@@ -28,6 +28,7 @@ export { default as GeoSpline } from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
 export { default as GeoVisible } from './GeoVisible.svelte';
 export { default as Graticule } from './Graticule.svelte';
+export { default as Grid } from './Grid.svelte';
 export { default as Group } from './Group.svelte';
 export { default as Highlight } from './Highlight.svelte';
 export { default as HitCanvas } from './HitCanvas.svelte';

package/dist/components/tooltip/Tooltip.svelte

@@ -3,21 +3,22 @@ import { cls } from '@layerstack/tailwind';
 import { chartContext } from './../ChartContext.svelte';
 import { tooltipContext } from './TooltipContext.svelte';
 import { motionStore } from '../../stores/motionStore.js';
+import { isScaleBand } from '../../utils/scales.js';
 /** `x` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
 export let x = 'pointer';
 /** `y` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
 export let y = 'pointer';
 /** Offset added to `x` position */
-export let xOffset = typeof x === 'number' || typeof y === 'number' ? 0 : 10;
+export let xOffset = x === 'pointer' ? 10 : 0;
 /** Offset added to `y` position */
-export let yOffset = typeof x === 'number' || typeof y === 'number' ? 0 : 10;
+export let yOffset = y === 'pointer' ? 10 : 0;
 export let anchor = 'top-left';
 export let contained = 'container'; // TODO: Support 'window' using getBoundingClientRect()
 export let variant = 'default';
 /** Set to `false` to disable spring transitions */
 export let motion = true;
 export let classes = {};
-const { padding, xGet, yGet, containerWidth, containerHeight } = chartContext();
+const { padding, xScale, xGet, yScale, yGet, containerWidth, containerHeight } = chartContext();
 const tooltip = tooltipContext();
 let tooltipWidth = 0;
 let tooltipHeight = 0;
@@ -28,7 +29,14 @@ function alignValue(value, align, addlOffset, tooltipSize) {
     return value + (align === 'end' ? -addlOffset : addlOffset) - alignOffset;
 }
 $: if ($tooltip?.data) {
-    const xValue = typeof x === 'number' ? x : x === 'data' ? $xGet($tooltip.data) + $padding.left : $tooltip.x;
+    const xBandOffset = isScaleBand($xScale)
+        ? $xScale.step() / 2 - ($xScale.padding() * $xScale.step()) / 2
+        : 0;
+    const xValue = typeof x === 'number'
+        ? x
+        : x === 'data'
+            ? $xGet($tooltip.data) + $padding.left + xBandOffset
+            : $tooltip.x;
     let xAlign = 'start';
     switch (anchor) {
         case 'top-left':
@@ -47,7 +55,14 @@ $: if ($tooltip?.data) {
             xAlign = 'end';
             break;
     }
-    const yValue = typeof y === 'number' ? y : y === 'data' ? $yGet($tooltip.data) + $padding.top : $tooltip.y;
+    const yBandOffset = isScaleBand($yScale)
+        ? $yScale.step() / 2 - ($yScale.padding() * $yScale.step()) / 2
+        : 0;
+    const yValue = typeof y === 'number'
+        ? y
+        : y === 'data'
+            ? $yGet($tooltip.data) + $padding.top + yBandOffset
+            : $tooltip.y;
     let yAlign = 'start';
     switch (anchor) {
         case 'top-left':

package/dist/components/tooltip/TooltipContext.svelte

@@ -57,7 +57,8 @@ export let radius = Infinity;
 /** Enable debug view (show hit targets, etc) */
 export let debug = false;
 export let onClick = () => { };
-const tooltip = writable({
+/** Exposed to allow binding in Chart */
+export let tooltip = writable({
     y: 0,
     x: 0,
     data: null,

package/dist/components/tooltip/TooltipContext.svelte.d.ts

@@ -26,6 +26,13 @@ declare const __propDef: {
         onClick?: ({ data }: {
             data: any;
         }) => any;
+        /** Exposed to allow binding in Chart */ tooltip?: import("svelte/store").Writable<{
+            y: number;
+            x: number;
+            data: any;
+            show: (e: PointerEvent, tooltipData?: any) => void;
+            hide: () => void;
+        }>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/docs/Preview.svelte

@@ -5,6 +5,8 @@ import 'prism-svelte';
 import { mdiCodeTags, mdiTable } from '@mdi/js';
 import { Button, CopyButton, Dialog, Toggle, Tooltip } from 'svelte-ux';
 import { cls } from '@layerstack/tailwind';
+import { entries, fromEntries } from '@layerstack/utils';
+import { isLiteralObject } from '@layerstack/utils/object';
 import Code from './Code.svelte';
 import Json from './Json.svelte';
 export let code = undefined;
@@ -12,13 +14,26 @@ export let data = undefined;
 export let language = 'svelte';
 export let highlightedCode = code ? Prism.highlight(code, Prism.languages.svelte, language) : '';
 export let showCode = false;
-let copyValue = null;
-try {
-    // TODO: Improve handling of circular structures
-    copyValue = JSON.stringify(data, null, 2);
+/**
+ * Custom JSON replacer (to use with JSON.stringify()) to convert `Date` instances to `new Date()`
+ */
+function replacer(key, value) {
+    // TODO: Improve handling of circular structures and handle other data types (Map, Set, etc)
+    if (this[key] instanceof Date) {
+        return `new Date('${this[key].toISOString()}')`;
+    }
+    return value;
 }
-catch (e) {
-    console.error('Error capturing value to copy', e);
+function getDataAsString(_data) {
+    try {
+        // Regular expression to match quoted instantiation (ex. `"new Date(...)"`) and stripe the quotes  (`new Date(...)`)
+        const datePattern = /"(new \w+\([^)]*\))"/g;
+        return JSON.stringify(_data, replacer, 2).replace(datePattern, '$1');
+    }
+    catch (e) {
+        console.error('Error capturing value to copy', e);
+        return '';
+    }
 }
 </script>
 
@@ -58,11 +73,9 @@ catch (e) {
           <div class="text-lg font-semibold">Chart data</div>
         </div>
 
-        {#if copyValue}
-          <Tooltip title="Copy">
-            <CopyButton value={copyValue} variant="fill-light" color="primary" />
-          </Tooltip>
-        {/if}
+        <Tooltip title="Copy">
+          <CopyButton value={() => getDataAsString(data)} variant="fill-light" color="primary" />
+        </Tooltip>
       </div>
 
       <Json value={data} />

package/dist/utils/scales.d.ts

@@ -32,7 +32,7 @@ export declare function isScaleBand(scale: AnyScale<any, any>): scale is ScaleBa
  */
 export declare function scaleInvert(scale: AnyScale<any, any>, value: number): any;
 /** Create new copy of scale with domain and range */
-export declare function createScale(scale: AnyScale, domain: DomainType, range: any[] | Function, context?: Record<any, any>): AnyScale<any, any, any, any>;
+export declare function createScale(scale: AnyScale, domain: DomainType, range: any[] | readonly any[] | Function, context?: Record<any, any>): AnyScale<any, any, any, any>;
 /** Create a `scaleBand()` within another scaleBand()'s bandwidth (typically a x1 of an x0 scale, used for grouping) */
 export declare function groupScaleBand<Domain extends {
     toString(): string;