layerchart 0.53.0 → 0.54.1

package/dist/components/charts/ScatterChart.svelte

@@ -1,30 +1,79 @@
-<script generics="TData">import {} from 'svelte';
-import { scaleLinear, scaleOrdinal, scaleTime } from 'd3-scale';
-import { format } from '@layerstack/utils';
-import Axis from '../Axis.svelte';
-import Chart from '../Chart.svelte';
-import Highlight from '../Highlight.svelte';
-import Labels from '../Labels.svelte';
-import Legend from '../Legend.svelte';
-import Points from '../Points.svelte';
-import Rule from '../Rule.svelte';
-import Svg from '../layout/Svg.svelte';
-import * as Tooltip from '../tooltip/index.js';
-import { accessor, chartDataArray } from '../../utils/common.js';
-export let data = [];
-export let x = undefined;
-export let y = undefined;
-export let series = [{ key: 'default', data: chartDataArray(data), color: 'hsl(var(--color-primary))' }];
-export let axis = true;
-export let labels = false;
-export let legend = false;
-export let rule = true;
-export let props = {};
-// Default xScale based on first data's `x` value
-$: xScale = accessor(x)(chartDataArray(data)[0]) instanceof Date ? scaleTime() : scaleLinear();
-let chartData = series
+<script lang="ts" generics="TData">
+  import { type ComponentProps } from 'svelte';
+  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';
+  import Points from '../Points.svelte';
+  import Rule from '../Rule.svelte';
+  import Svg from '../layout/Svg.svelte';
+  import * as Tooltip from '../tooltip/index.js';
+
+  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+
+  interface $$Props extends ComponentProps<Chart<TData>> {
+    axis?: typeof axis;
+    grid?: typeof grid;
+    labels?: typeof labels;
+    legend?: typeof legend;
+    props?: typeof props;
+    series?: typeof series;
+  }
+
+  export let data: $$Props['data'] = [];
+  export let x: Accessor<TData> = undefined;
+  export let y: Accessor<TData> = undefined;
+
+  export let series: {
+    key: string;
+    label?: string;
+    data: TData[];
+    color?: string;
+    props?: Partial<ComponentProps<Points>>;
+  }[] = [{ key: 'default', data: chartDataArray(data), color: 'hsl(var(--color-primary))' }];
+  $: isDefaultSeries = series.length === 1 && series[0].key === 'default';
+
+  export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
+  export let grid: ComponentProps<Grid> | boolean = true;
+  export let labels: ComponentProps<Labels> | boolean = false;
+  export let legend: ComponentProps<Legend> | boolean = false;
+  export let rule: ComponentProps<Rule> | boolean = true;
+
+  export let 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>>;
+    legend?: Partial<ComponentProps<Legend>>;
+    rule?: Partial<ComponentProps<Rule>>;
+  } = {};
+
+  // Default xScale based on first data's `x` value
+  $: xScale = accessor(x)(chartDataArray(data)[0]) instanceof Date ? scaleTime() : scaleLinear();
+
+  let chartData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
-    .filter((d) => d);
+    .filter((d) => d) as Array<TData>;
+
+  function getPointsProps(s: (typeof series)[number], i: number) {
+    const pointsProps: ComponentProps<Points> = {
+      data: s.data,
+      stroke: s.color,
+      fill: s.color,
+      'fill-opacity': 0.3,
+      ...props.points,
+      ...s.props,
+    };
+
+    return pointsProps;
+  }
 </script>
 
 <Chart
@@ -45,6 +94,8 @@ let chartData = series
   let:xScale
   let:y
   let:yScale
+  let:c
+  let:cScale
   let:r
   let:width
   let:height
@@ -52,19 +103,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 +130,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 +145,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 +168,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;
@@ -218,7 +252,7 @@ declare class __sveltets_Render<TData> {
             tickValues?: any[] | undefined;
             tickFontSize?: number | undefined;
             tickLength?: number | undefined;
-            placement?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+            placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
             orientation?: ("horizontal" | "vertical") | undefined;
             variant?: ("ramp" | "swatches") | undefined;
             classes?: {
@@ -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/layout/Canvas.svelte

@@ -1,53 +1,73 @@
-<script>import { onMount, setContext } from 'svelte';
-import { writable } from 'svelte/store';
-import { scaleCanvas } from 'layercake';
-import { cls } from '@layerstack/tailwind';
-import { chartContext } from '../ChartContext.svelte';
-import { transformContext } from '../TransformContext.svelte';
-const { width, height, containerWidth, containerHeight, padding } = chartContext();
-/** The `<canvas>` tag. Useful for bindings. */
-export let element = undefined;
-/** The `<canvas>`'s 2d context. Useful for bindings. */
-// @ts-expect-error: set during onMount()
-export let context = undefined;
-/** Force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling getImageData() frequently.
- * see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#willreadfrequently */
-export let willReadFrequently = false;
-/** The layer's z-index. */
-export let zIndex = undefined;
-/** Set this to `false` to set `pointer-events: none;` on the entire layer. */
-export let pointerEvents = undefined;
-/** Text to display if the browser won't render a canvas tag. You can also set arbitrary HTML via the "fallback" slot but this is fine if you just need text. If you use the "fallback" slot, this prop is ignored. */
-export let fallback = '';
-/** A string passed to the `aria-label` on the `<canvas>` tag. */
-export let label = undefined;
-/** A string passed to the `aria-labelledby` on the `<canvas>` tag. */
-export let labelledBy = undefined;
-/** A string passed to `aria-describedby` property on the `<canvas>` tag. */
-export let describedBy = undefined;
-const ctx = writable({});
-onMount(() => {
-    context = element?.getContext('2d', { willReadFrequently });
-});
-const { mode, scale, translate } = transformContext();
-$: if (context) {
+<script lang="ts">
+  import { onMount, setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { scaleCanvas } from 'layercake';
+  import { cls } from '@layerstack/tailwind';
+
+  import { chartContext } from '../ChartContext.svelte';
+  import { transformContext } from '../TransformContext.svelte';
+
+  const { width, height, containerWidth, containerHeight, padding } = chartContext();
+
+  /** The `<canvas>` tag. Useful for bindings. */
+  export let element: HTMLCanvasElement | undefined = undefined;
+
+  /** The `<canvas>`'s 2d context. Useful for bindings. */
+  // @ts-expect-error: set during onMount()
+  export let context: CanvasRenderingContext2D = undefined;
+
+  /** Force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling getImageData() frequently.
+   * see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#willreadfrequently */
+  export let willReadFrequently = false;
+
+  /** The layer's z-index. */
+  export let zIndex = undefined;
+
+  /** Set this to `false` to set `pointer-events: none;` on the entire layer. */
+  export let pointerEvents: boolean | undefined = undefined;
+
+  /** Text to display if the browser won't render a canvas tag. You can also set arbitrary HTML via the "fallback" slot but this is fine if you just need text. If you use the "fallback" slot, this prop is ignored. */
+  export let fallback = '';
+
+  /** A string passed to the `aria-label` on the `<canvas>` tag. */
+  export let label: string | undefined = undefined;
+
+  /** A string passed to the `aria-labelledby` on the `<canvas>` tag. */
+  export let labelledBy: string | undefined = undefined;
+
+  /** A string passed to `aria-describedby` property on the `<canvas>` tag. */
+  export let describedBy: string | undefined = undefined;
+
+  const ctx = writable({});
+
+  onMount(() => {
+    context = element?.getContext('2d', { willReadFrequently }) as CanvasRenderingContext2D;
+  });
+
+  const { mode, scale, translate } = transformContext();
+
+  $: if (context) {
     scaleCanvas(context, $containerWidth, $containerHeight);
     context.clearRect(0, 0, $containerWidth, $containerHeight);
+
     context.translate($padding.left ?? 0, $padding.top ?? 0);
+
     if (mode === 'canvas') {
-        const center = { x: $width / 2, y: $height / 2 };
-        const newTranslate = {
-            x: $translate.x * $scale + center.x - center.x * $scale,
-            y: $translate.y * $scale + center.y - center.y * $scale,
-        };
-        context.translate(newTranslate.x, newTranslate.y);
-        context.scale($scale, $scale);
+      const center = { x: $width / 2, y: $height / 2 };
+      const newTranslate = {
+        x: $translate.x * $scale + center.x - center.x * $scale,
+        y: $translate.y * $scale + center.y - center.y * $scale,
+      };
+      context.translate(newTranslate.x, newTranslate.y);
+      context.scale($scale, $scale);
     }
+
     // Force children to re-draw
     $ctx = context;
-}
-$: ctx.set(context);
-setContext('canvas', { ctx });
+  }
+
+  $: ctx.set(context);
+  setContext('canvas', { ctx });
 </script>
 
 <canvas

package/dist/components/layout/Html.svelte

@@ -1,21 +1,31 @@
-<script>import { cls } from '@layerstack/tailwind';
-import { chartContext } from '../ChartContext.svelte';
-/** The layer's outermost `<div>` tag. Useful for bindings. */
-export let element = undefined;
-/** The layer's z-index. */
-export let zIndex = undefined;
-/** Set this to `false` to set `pointer-events: none;` on the entire layer. */
-export let pointerEvents = undefined;
-/** A string passed to the `aria-role` on the `<div>` tag. This is `undefined` by default but will be set by default to `'figure'` if `label`, `labelledby` or `describedby` is set. That default will be overridden by whatever is passed in. */
-export let role = undefined;
-/** A string passed to the `aria-label` property on the `<div>` tag. */
-export let label = undefined;
-/** A string passed to the `aria-labelledby property` on the `<div>` tag. */
-export let labelledBy = undefined;
-/** A string passed to the `aria-describedby` property on the `<div>` tag. */
-export let describedBy = undefined;
-const { padding } = chartContext();
-$: roleVal = role || (label || labelledBy || describedBy ? 'figure' : undefined);
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { chartContext } from '../ChartContext.svelte';
+
+  /** The layer's outermost `<div>` tag. Useful for bindings. */
+  export let element: HTMLDivElement | undefined = undefined;
+
+  /** The layer's z-index. */
+  export let zIndex = undefined;
+
+  /** Set this to `false` to set `pointer-events: none;` on the entire layer. */
+  export let pointerEvents: boolean | undefined = undefined;
+
+  /** A string passed to the `aria-role` on the `<div>` tag. This is `undefined` by default but will be set by default to `'figure'` if `label`, `labelledby` or `describedby` is set. That default will be overridden by whatever is passed in. */
+  export let role: string | undefined = undefined;
+
+  /** A string passed to the `aria-label` property on the `<div>` tag. */
+  export let label: string | undefined = undefined;
+
+  /** A string passed to the `aria-labelledby property` on the `<div>` tag. */
+  export let labelledBy: string | undefined = undefined;
+
+  /** A string passed to the `aria-describedby` property on the `<div>` tag. */
+  export let describedBy: string | undefined = undefined;
+
+  const { padding } = chartContext();
+
+  $: roleVal = role || (label || labelledBy || describedBy ? 'figure' : undefined);
 </script>
 
 <div

package/dist/components/layout/Svg.svelte

@@ -1,41 +1,56 @@
-<script>import { cls } from '@layerstack/tailwind';
-import { chartContext } from '../ChartContext.svelte';
-import { transformContext } from '../TransformContext.svelte';
-/** The layer's `<svg>` tag. Useful for bindings. */
-export let element = undefined;
-/** The layer's `<g>` tag. Useful for bindings. */
-export let innerElement = undefined;
-/** The layer's z-index. */
-export let zIndex = undefined;
-/** Set this to `false` to set `pointer-events: none;` on the entire layer. */
-export let pointerEvents = undefined;
-/** A string passed to the `viewBox` property on the `<svg>` tag. */
-export let viewBox = undefined;
-/** A string passed to the `aria-label` property on the `<svg>` tag. */
-export let label = undefined;
-/** A string passed to the `aria-labelledby property` on the `<svg>` tag. */
-export let labelledBy = undefined;
-/** A string passed to the `aria-describedby` property on the `<svg>` tag. */
-export let describedBy = undefined;
-/** Shorthand to set the contents of `<title></title>` for accessibility. You can also set arbitrary HTML via the "title" slot but this is a convenient shorthand. If you use the "title" slot, this prop is ignored. */
-export let title = undefined;
-/**
- * Translate children to center, useful for radial layouts
- */
-export let center = false;
-const { containerWidth, containerHeight, width, height, padding } = chartContext();
-const { mode, scale, translate } = transformContext();
-$: transform = center
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+
+  import { chartContext } from '../ChartContext.svelte';
+  import { transformContext } from '../TransformContext.svelte';
+
+  /** The layer's `<svg>` tag. Useful for bindings. */
+  export let element: SVGElement | undefined = undefined;
+
+  /** The layer's `<g>` tag. Useful for bindings. */
+  export let innerElement: SVGGElement | undefined = undefined;
+
+  /** The layer's z-index. */
+  export let zIndex = undefined;
+
+  /** Set this to `false` to set `pointer-events: none;` on the entire layer. */
+  export let pointerEvents: boolean | undefined = undefined;
+
+  /** A string passed to the `viewBox` property on the `<svg>` tag. */
+  export let viewBox: string | undefined = undefined;
+
+  /** A string passed to the `aria-label` property on the `<svg>` tag. */
+  export let label: string | undefined = undefined;
+
+  /** A string passed to the `aria-labelledby property` on the `<svg>` tag. */
+  export let labelledBy: string | undefined = undefined;
+
+  /** A string passed to the `aria-describedby` property on the `<svg>` tag. */
+  export let describedBy: string | undefined = undefined;
+
+  /** Shorthand to set the contents of `<title></title>` for accessibility. You can also set arbitrary HTML via the "title" slot but this is a convenient shorthand. If you use the "title" slot, this prop is ignored. */
+  export let title: string | undefined = undefined;
+
+  /**
+   * Translate children to center, useful for radial layouts
+   */
+  export let center: boolean | 'x' | 'y' = false;
+
+  const { containerWidth, containerHeight, width, height, padding } = chartContext();
+
+  const { mode, scale, translate } = transformContext();
+
+  $: transform = center
     ? `translate(${center === 'x' || center === true ? $width / 2 : 0}, ${center === 'y' || center === true ? $height / 2 : 0})`
     : '';
-$: if (mode === 'canvas') {
+  $: if (mode === 'canvas') {
     const center = { x: $width / 2, y: $height / 2 };
     const newTranslate = {
-        x: $translate.x * $scale + center.x - center.x * $scale,
-        y: $translate.y * $scale + center.y - center.y * $scale,
+      x: $translate.x * $scale + center.x - center.x * $scale,
+      y: $translate.y * $scale + center.y - center.y * $scale,
     };
     transform = `translate(${newTranslate.x},${newTranslate.y}) scale(${$scale})`;
-}
+  }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->