layerchart 0.54.0 → 0.54.1

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?: {

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

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?: {

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 -->