layerchart 0.54.0 → 0.55.0

package/dist/components/charts/PieChart.svelte

@@ -1,52 +1,102 @@
-<script generics="TData">import {} from 'svelte';
-import { sum } from 'd3-array';
-import { format } from '@layerstack/utils';
-import Arc from '../Arc.svelte';
-import Chart from '../Chart.svelte';
-import Group from '../Group.svelte';
-import Legend from '../Legend.svelte';
-import Pie from '../Pie.svelte';
-import Svg from '../layout/Svg.svelte';
-import * as Tooltip from '../tooltip/index.js';
-import { accessor, chartDataArray } from '../../utils/common.js';
-export let data = [];
-/** Key accessor */
-export let key = 'key';
-$: keyAccessor = accessor(key);
-/** Label accessor */
-export let label = 'label';
-$: labelAccessor = accessor(label);
-/** Value accessor */
-export let value = 'value';
-$: valueAccessor = accessor(value);
-/** Maximum possible value, useful when `data` is single item */
-export let maxValue = undefined;
-export let series = [{ key: 'default', value: value /*, color: 'hsl(var(--color-primary))'*/ }];
-export let legend = false;
-/**
- * Range [min,max] in degrees.  See also startAngle/endAngle
- */
-export let range = [0, 360];
-/**
- * Define innerRadius.
- *   value >= 1: discrete value
- *   value >  0: percent of `outerRadius`
- *   value <  0: offset of `outerRadius`
- *   default: yRange min
- */
-export let innerRadius = undefined;
-/**
- * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
- */
-export let outerRadius = undefined;
-export let cornerRadius = 0;
-export let padAngle = 0;
-export let props = {};
-$: allSeriesData = series
+<script lang="ts" generics="TData">
+  import { type ComponentProps } from 'svelte';
+  import { sum } from 'd3-array';
+  import { format } from '@layerstack/utils';
+
+  import Arc from '../Arc.svelte';
+  import Chart from '../Chart.svelte';
+  import Group from '../Group.svelte';
+  import Legend from '../Legend.svelte';
+  import Pie from '../Pie.svelte';
+  import Svg from '../layout/Svg.svelte';
+  import * as Tooltip from '../tooltip/index.js';
+
+  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+
+  type ChartProps = ComponentProps<Chart<TData>>;
+
+  interface $$Props extends ChartProps {
+    cornerRadius?: typeof cornerRadius;
+    innerRadius?: typeof innerRadius;
+    key?: typeof key;
+    label?: typeof label;
+    legend?: typeof legend;
+    maxValue?: typeof maxValue;
+    outerRadius?: typeof outerRadius;
+    padAngle?: typeof padAngle;
+    props?: typeof props;
+    range?: typeof range;
+    series?: typeof series;
+    value?: typeof label;
+  }
+
+  export let data: ChartProps['data'] = [];
+
+  /** Key accessor */
+  export let key: Accessor<TData> = 'key';
+  $: keyAccessor = accessor(key);
+
+  /** Label accessor */
+  export let label: Accessor<TData> = 'label';
+  $: labelAccessor = accessor(label);
+
+  /** Value accessor */
+  export let value: Accessor<TData> = 'value';
+  $: valueAccessor = accessor(value);
+
+  /** Maximum possible value, useful when `data` is single item */
+  export let maxValue: number | undefined = undefined;
+
+  export let series: {
+    key: string | number;
+    label?: string;
+    value?: Accessor<TData>;
+    /** Provider series data, else uses chart data (with value/key accessor) */
+    data?: TData[];
+    /** Maximum possible value, useful when `data` is single item */
+    maxValue?: number;
+    color?: string;
+    props?: Partial<ComponentProps<Arc>>;
+  }[] = [{ key: 'default', value: value /*, color: 'hsl(var(--color-primary))'*/ }];
+
+  export let legend: ComponentProps<Legend> | boolean = false;
+
+  /**
+   * Range [min,max] in degrees.  See also startAngle/endAngle
+   */
+  export let range = [0, 360];
+
+  /**
+   * Define innerRadius.
+   *   value >= 1: discrete value
+   *   value >  0: percent of `outerRadius`
+   *   value <  0: offset of `outerRadius`
+   *   default: yRange min
+   */
+  export let innerRadius: number | undefined = undefined;
+
+  /**
+   * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
+   */
+  export let outerRadius: number | undefined = undefined;
+
+  export let cornerRadius = 0;
+  export let padAngle = 0;
+
+  export let props: {
+    pie?: Partial<ComponentProps<Pie>>;
+    group?: Partial<ComponentProps<Group>>;
+    arc?: Partial<ComponentProps<Arc>>;
+    legend?: Partial<ComponentProps<Legend>>;
+  } = {};
+
+  $: allSeriesData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
-    .filter((d) => d);
-$: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data));
-$: seriesColors = series.map((s) => s.color).filter((d) => d != null);
+    .filter((d) => d) as Array<TData>;
+
+  $: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data)) as Array<TData>;
+
+  $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
 </script>
 
 <Chart
@@ -94,7 +144,7 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
   }}
   <slot {...slotProps}>
     <Svg center>
-      <slot name="below-marks" {...slotProps} />
+      <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
         <Group {...props.group}>
@@ -110,8 +160,8 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
                 outerRadius={(outerRadius ?? 0) < 0 ? i * (outerRadius ?? 0) : outerRadius}
                 {cornerRadius}
                 {padAngle}
-                fill={s.color ?? cScale(c(d))}
-                track={{ fill: s.color ?? cScale(c(d)), 'fill-opacity': 0.1 }}
+                fill={s.color ?? cScale?.(c(d))}
+                track={{ fill: s.color ?? cScale?.(c(d)), 'fill-opacity': 0.1 }}
                 {tooltip}
                 data={d}
                 {...props.arc}
@@ -136,7 +186,7 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
                     {innerRadius}
                     {cornerRadius}
                     {padAngle}
-                    fill={cScale(c(arc.data))}
+                    fill={cScale?.(c(arc.data))}
                     data={arc.data}
                     {tooltip}
                     {...props.arc}
@@ -149,7 +199,7 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
         </Group>
       </slot>
 
-      <slot name="above-marks" {...slotProps} />
+      <slot name="aboveMarks" {...slotProps} />
     </Svg>
 
     <slot name="legend" {...slotProps}>
@@ -173,7 +223,7 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
           <Tooltip.Item
             label={labelAccessor(data) || keyAccessor(data)}
             value={valueAccessor(data)}
-            color={cScale(c(data))}
+            color={cScale?.(c(data))}
             {format}
           />
         </Tooltip.List>

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

@@ -207,7 +207,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?: {
@@ -247,9 +247,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

@@ -1,44 +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 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 } 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))' }];
-$: 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;
-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);
-function getPointsProps(s, i) {
-    const pointsProps = {
-        data: s.data,
-        stroke: s.color,
-        fill: s.color,
-        'fill-opacity': 0.3,
-        ...props.points,
-        ...s.props,
+    .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
@@ -81,6 +116,16 @@ function getPointsProps(s, i) {
         {/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'}
@@ -107,16 +152,6 @@ function getPointsProps(s, i) {
         {/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

@@ -252,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?: {
@@ -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/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