layerchart 0.60.3 → 0.70.0

package/dist/components/charts/BarChart.svelte

@@ -7,6 +7,7 @@
 
   import Axis from '../Axis.svelte';
   import Bars from '../Bars.svelte';
+  import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import Grid from '../Grid.svelte';
   import Highlight from '../Highlight.svelte';
@@ -16,7 +17,12 @@
   import Svg from '../layout/Svg.svelte';
   import * as Tooltip from '../tooltip/index.js';
 
-  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+  import {
+    accessor,
+    chartDataArray,
+    defaultChartPadding,
+    type Accessor,
+  } from '../../utils/common.js';
 
   type ChartProps = ComponentProps<Chart<TData>>;
 
@@ -32,6 +38,7 @@
     rule?: typeof rule;
     series?: typeof series;
     seriesLayout?: typeof seriesLayout;
+    renderContext?: typeof renderContext;
   }
 
   export let data: $$Props['data'] = [];
@@ -111,6 +118,8 @@
     labels?: Partial<ComponentProps<Labels>>;
   } = {};
 
+  export let renderContext: 'svg' | 'canvas' = 'svg';
+
   $: allSeriesData = series
     .flatMap((s) =>
       s.data?.map((d) => {
@@ -195,12 +204,7 @@
   {y1Range}
   c={isVertical ? y : x}
   cRange={['hsl(var(--color-primary))']}
-  padding={axis === false
-    ? undefined
-    : {
-        left: axis === true || axis === 'y' ? 16 : 0,
-        bottom: (axis === true || axis === 'x' ? 16 : 0) + (legend === true ? 32 : 0),
-      }}
+  padding={defaultChartPadding(axis, legend)}
   tooltip={{ mode: 'band' }}
   {...$$restProps}
   let:x
@@ -229,7 +233,7 @@
     getBarsProps,
   }}
   <slot {...slotProps}>
-    <Svg>
+    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg}>
       <slot name="grid" {...slotProps}>
         {#if grid}
           <Grid
@@ -301,7 +305,7 @@
       {#if labels}
         <Labels {...props.labels} {...typeof labels === 'object' ? labels : null} />
       {/if}
-    </Svg>
+    </svelte:component>
 
     <slot name="legend" {...slotProps}>
       {#if legend}

package/dist/components/charts/LineChart.svelte

@@ -4,6 +4,7 @@
   import { format } from '@layerstack/utils';
 
   import Axis from '../Axis.svelte';
+  import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import Grid from '../Grid.svelte';
   import Highlight from '../Highlight.svelte';
@@ -15,7 +16,12 @@
   import Svg from '../layout/Svg.svelte';
   import * as Tooltip from '../tooltip/index.js';
 
-  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+  import {
+    accessor,
+    chartDataArray,
+    defaultChartPadding,
+    type Accessor,
+  } from '../../utils/common.js';
 
   interface $$Props extends ComponentProps<Chart<TData>> {
     axis?: typeof axis;
@@ -26,6 +32,7 @@
     props?: typeof props;
     rule?: typeof rule;
     series?: typeof series;
+    renderContext?: typeof renderContext;
   }
 
   export let data: $$Props['data'] = [];
@@ -65,6 +72,8 @@
     points?: Partial<ComponentProps<Points>>;
   } = {};
 
+  export let renderContext: 'svg' | 'canvas' = 'svg';
+
   $: allSeriesData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
     .filter((d) => d) as Array<TData & { stackData?: any }>;
@@ -99,12 +108,7 @@
   yBaseline={0}
   yNice
   {radial}
-  padding={radial || axis === false
-    ? undefined
-    : {
-        left: axis === true || axis === 'y' ? 16 : 0,
-        bottom: (axis === true || axis === 'x' ? 16 : 0) + (legend === true ? 32 : 0),
-      }}
+  padding={radial ? undefined : defaultChartPadding(axis, legend)}
   tooltip={{ mode: 'bisect-x' }}
   {...$$restProps}
   let:x
@@ -133,7 +137,7 @@
     getSplineProps,
   }}
   <slot {...slotProps}>
-    <Svg center={radial}>
+    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} center={radial}>
       <slot name="grid" {...slotProps}>
         {#if grid}
           <Grid x={radial} y {...typeof grid === 'object' ? grid : null} {...props.grid} />
@@ -203,7 +207,7 @@
           />
         {/each}
       </slot>
-    </Svg>
+    </svelte:component>
 
     <slot name="legend" {...slotProps}>
       {#if legend}

package/dist/components/charts/PieChart.svelte

@@ -4,6 +4,7 @@
   import { format } from '@layerstack/utils';
 
   import Arc from '../Arc.svelte';
+  import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import Group from '../Group.svelte';
   import Legend from '../Legend.svelte';
@@ -30,6 +31,7 @@
     range?: typeof range;
     series?: typeof series;
     value?: typeof label;
+    renderContext?: typeof renderContext;
   }
 
   export let data: ChartProps['data'] = [];
@@ -98,6 +100,8 @@
     legend?: Partial<ComponentProps<Legend>>;
   } = {};
 
+  export let renderContext: 'svg' | 'canvas' = 'svg';
+
   $: allSeriesData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
     .filter((d) => d) as Array<TData>;
@@ -151,7 +155,7 @@
     tooltip,
   }}
   <slot {...slotProps}>
-    <Svg {center}>
+    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} {center}>
       <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
@@ -216,7 +220,7 @@
       </slot>
 
       <slot name="aboveMarks" {...slotProps} />
-    </Svg>
+    </svelte:component>
 
     <slot name="legend" {...slotProps}>
       {#if legend}

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

@@ -207,7 +207,7 @@ declare class __sveltets_Render<TData> {
             tickValues?: any[] | undefined | undefined;
             tickFontSize?: number | undefined;
             tickLength?: number | undefined;
-            placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+            placement?: ("center" | "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
             orientation?: "horizontal" | "vertical" | undefined;
             onClick?: ((tick: any) => any) | undefined | undefined;
             variant?: "ramp" | "swatches" | undefined;
@@ -244,6 +244,7 @@ declare class __sveltets_Render<TData> {
             props?: Partial<ComponentProps<Arc>>;
         }[] | undefined;
         value?: Accessor<TData>;
+        renderContext?: "canvas" | "svg";
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/dist/components/charts/ScatterChart.svelte

@@ -4,6 +4,7 @@
   import { format } from '@layerstack/utils';
 
   import Axis from '../Axis.svelte';
+  import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import Grid from '../Grid.svelte';
   import Highlight from '../Highlight.svelte';
@@ -14,7 +15,12 @@
   import Svg from '../layout/Svg.svelte';
   import * as Tooltip from '../tooltip/index.js';
 
-  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+  import {
+    accessor,
+    chartDataArray,
+    defaultChartPadding,
+    type Accessor,
+  } from '../../utils/common.js';
 
   interface $$Props extends ComponentProps<Chart<TData>> {
     axis?: typeof axis;
@@ -23,6 +29,7 @@
     legend?: typeof legend;
     props?: typeof props;
     series?: typeof series;
+    renderContext?: typeof renderContext;
   }
 
   export let data: $$Props['data'] = [];
@@ -55,6 +62,8 @@
     rule?: Partial<ComponentProps<Rule>>;
   } = {};
 
+  export let renderContext: 'svg' | 'canvas' = 'svg';
+
   // Default xScale based on first data's `x` value
   $: xScale =
     $$props.xScale ??
@@ -74,7 +83,7 @@
       data: s.data,
       stroke: s.color,
       fill: s.color,
-      'fill-opacity': 0.3,
+      fillOpacity: 0.3,
       ...props.points,
       ...s.props,
     };
@@ -90,12 +99,7 @@
   {y}
   {yScale}
   yNice
-  padding={axis === false
-    ? undefined
-    : {
-        left: axis === true || axis === 'y' ? 16 : 0,
-        bottom: (axis === true || axis === 'x' ? 16 : 0) + (legend === true ? 32 : 0),
-      }}
+  padding={defaultChartPadding(axis, legend)}
   tooltip={{ mode: 'voronoi' }}
   {...$$restProps}
   let:x
@@ -117,7 +121,7 @@
     : null}
 
   <slot {...slotProps}>
-    <Svg>
+    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg}>
       <slot name="grid" {...slotProps}>
         {#if grid}
           <Grid x y {...typeof grid === 'object' ? grid : null} {...props.grid} />
@@ -171,7 +175,7 @@
           {...typeof labels === 'object' ? labels : null}
         />
       {/if}
-    </Svg>
+    </svelte:component>
 
     <slot name="legend" {...slotProps}>
       {#if legend}

package/dist/components/layout/Canvas.svelte

@@ -1,11 +1,36 @@
+<script lang="ts" context="module">
+  import { getContext, onDestroy, setContext } from 'svelte';
+
+  type ComponentRender = {
+    name: string;
+    render: (ctx: CanvasRenderingContext2D) => any;
+    retainState?: boolean;
+  };
+
+  export type CanvasContext = {
+    /** Register component to render.  Returns method to unregister on component destory */
+    register(component: ComponentRender): () => void;
+    invalidate(): void;
+  };
+
+  export const canvasContextKey = Symbol();
+
+  export function getCanvasContext() {
+    return getContext<CanvasContext>(canvasContextKey);
+  }
+
+  function setCanvasContext(context: CanvasContext) {
+    setContext(canvasContextKey, context);
+  }
+</script>
+
 <script lang="ts">
-  import { onMount, setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-  import { scaleCanvas } from 'layercake';
+  import { onMount } from 'svelte';
   import { cls } from '@layerstack/tailwind';
 
   import { chartContext } from '../ChartContext.svelte';
   import { transformContext } from '../TransformContext.svelte';
+  import { scaleCanvas } from '../../utils/canvas.js';
 
   const { width, height, containerWidth, containerHeight, padding } = chartContext();
 
@@ -38,21 +63,44 @@
   /** A string passed to `aria-describedby` property on the `<canvas>` tag. */
   export let describedBy: string | undefined = undefined;
 
-  const ctx = writable({});
+  /**
+   * Translate children to center (useful for radial layouts)
+   */
+  export let center: boolean | 'x' | 'y' = false;
+
+  let components = new Map<Symbol, ComponentRender>();
+  let pendingInvalidation = false;
+  let frameId: number | undefined;
+
+  const { mode, scale, translate } = transformContext();
 
   onMount(() => {
     context = element?.getContext('2d', { willReadFrequently }) as CanvasRenderingContext2D;
   });
 
-  const { mode, scale, translate } = transformContext();
+  onDestroy(() => {
+    if (frameId) {
+      cancelAnimationFrame(frameId);
+    }
+  });
 
-  $: if (context) {
+  function update() {
+    if (!context) return;
+    // TODO: only `scaleCanvas()` when containerWidth/Height change (not all invalidations)
+    // scaleCanvas in `update()` to fix `requestAnimationFrame()` timing causing flash of blank canvas
     scaleCanvas(context, $containerWidth, $containerHeight);
+
     context.clearRect(0, 0, $containerWidth, $containerHeight);
 
     context.translate($padding.left ?? 0, $padding.top ?? 0);
 
-    if (mode === 'canvas') {
+    if (center) {
+      const newTranslate = {
+        x: center === 'x' || center === true ? $width / 2 : 0,
+        y: center === 'y' || center === true ? $height / 2 : 0,
+      };
+      context.translate(newTranslate.x, newTranslate.y);
+    } else if (mode === 'canvas') {
       const center = { x: $width / 2, y: $height / 2 };
       const newTranslate = {
         x: $translate.x * $scale + center.x - center.x * $scale,
@@ -62,12 +110,46 @@
       context.scale($scale, $scale);
     }
 
-    // Force children to re-draw
-    $ctx = context;
+    components.forEach((c) => {
+      if (c.retainState) {
+        // Do not call save/restore canvas draw state (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save) (ex. Group ctx.translate() affecting children)
+        c.render(context);
+      } else {
+        context.save();
+        c.render(context);
+        context.restore();
+      }
+    });
+
+    pendingInvalidation = false;
+  }
+
+  const canvasContext: CanvasContext = {
+    register(component) {
+      const key = Symbol();
+      components.set(key, component);
+      this.invalidate();
+
+      // Unregister
+      return () => {
+        components.delete(key);
+        this.invalidate();
+      };
+    },
+    invalidate() {
+      if (pendingInvalidation) return;
+      pendingInvalidation = true;
+      frameId = requestAnimationFrame(update);
+    },
+  };
+
+  $: {
+    // Redraw when resized
+    $containerWidth, $containerHeight;
+    canvasContext.invalidate();
   }
 
-  $: ctx.set(context);
-  setContext('canvas', { ctx });
+  setCanvasContext(canvasContext);
 </script>
 
 <canvas

package/dist/components/layout/Canvas.svelte.d.ts

@@ -1,4 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
+type ComponentRender = {
+    name: string;
+    render: (ctx: CanvasRenderingContext2D) => any;
+    retainState?: boolean;
+};
+export type CanvasContext = {
+    /** Register component to render.  Returns method to unregister on component destory */
+    register(component: ComponentRender): () => void;
+    invalidate(): void;
+};
+export declare const canvasContextKey: unique symbol;
+export declare function getCanvasContext(): CanvasContext;
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -11,6 +23,7 @@ declare const __propDef: {
         label?: string | undefined | undefined;
         labelledBy?: string | undefined | undefined;
         describedBy?: string | undefined | undefined;
+        center?: boolean | "x" | "y" | undefined;
     };
     events: {
         pointerenter: PointerEvent;

package/dist/components/layout/Svg.svelte

@@ -32,7 +32,7 @@
   export let title: string | undefined = undefined;
 
   /**
-   * Translate children to center, useful for radial layouts
+   * Translate children to center (useful for radial layouts)
    */
   export let center: boolean | 'x' | 'y' = false;
 

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

@@ -6,7 +6,7 @@ declare const __propDef: {
         y?: "pointer" | "data" | number | undefined | undefined;
         xOffset?: number | undefined;
         yOffset?: number | undefined;
-        anchor?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        anchor?: ("center" | "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         contained?: "container" | false | undefined;
         variant?: "default" | "invert" | "none" | undefined;
         motion?: boolean | undefined;

package/dist/utils/canvas.d.ts

@@ -0,0 +1,46 @@
+export declare const DEFAULT_FILL = "rgb(0, 0, 0)";
+type ComputedStylesOptions = {
+    styles?: Partial<Omit<CSSStyleDeclaration, 'fillOpacity' | 'strokeWidth' | 'opacity'> & {
+        fillOpacity?: number | string;
+        strokeWidth?: number | string;
+        opacity?: number | string;
+    }>;
+    classes?: string;
+};
+/**
+ * Appends or reuses `<svg>` element below `<canvas>` to resolve CSS variables and classes (ex. `stroke: hsl(var(--color-primary))` => `stroke: rgb(...)` )
+ */
+export declare function getComputedStyles(canvas: HTMLCanvasElement, { styles, classes }?: ComputedStylesOptions): CSSStyleDeclaration;
+/** Render SVG path data onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
+export declare function renderPathData(canvasCtx: CanvasRenderingContext2D, pathData: string | null | undefined, styleOptions?: ComputedStylesOptions): void;
+export declare function renderText(canvasCtx: CanvasRenderingContext2D, text: string | number | null | undefined, coords: {
+    x: number;
+    y: number;
+}, styleOptions?: ComputedStylesOptions): void;
+export declare function renderRect(canvasCtx: CanvasRenderingContext2D, coords: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, styleOptions?: ComputedStylesOptions): void;
+/** Clear canvas accounting for Canvas `context.translate(...)` */
+export declare function clearCanvasContext(canvasCtx: CanvasRenderingContext2D, options: {
+    containerWidth: number;
+    containerHeight: number;
+    padding: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+}): void;
+/**
+    Scales a canvas for high DPI / retina displays.
+  @see: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#examples
+  @see: https://web.dev/articles/canvas-hidipi
+*/
+export declare function scaleCanvas(ctx: CanvasRenderingContext2D, width: number, height: number): {
+    width: number;
+    height: number;
+};
+export {};

package/dist/utils/canvas.js

@@ -0,0 +1,146 @@
+export const DEFAULT_FILL = 'rgb(0, 0, 0)';
+const CANVAS_STYLES_ELEMENT_ID = '__layerchart_canvas_styles_id';
+/**
+ * Appends or reuses `<svg>` element below `<canvas>` to resolve CSS variables and classes (ex. `stroke: hsl(var(--color-primary))` => `stroke: rgb(...)` )
+ */
+export function getComputedStyles(canvas, { styles, classes } = {}) {
+    try {
+        // Get or create `<svg>` below `<canvas>`
+        let svg = document.getElementById(CANVAS_STYLES_ELEMENT_ID);
+        if (!svg) {
+            svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svg.setAttribute('id', CANVAS_STYLES_ELEMENT_ID);
+            svg.style.display = 'none';
+            // Add `<svg>` next to `<canvas>` to allow same scope resolution for CSS variables
+            canvas.after(svg);
+        }
+        svg = svg; // guarantee SVG is set
+        // Remove any previously set styles or classes.  Not able to do as part of cleanup below as `window.getComputedStyles()` appearing to be lazily read and removing `style` results in incorrect values, and copying result is very slow
+        svg.removeAttribute('style');
+        svg.removeAttribute('class');
+        // Add styles and class to svg element
+        if (styles) {
+            Object.assign(svg.style, styles);
+        }
+        if (classes) {
+            svg.setAttribute('class', classes);
+        }
+        const computedStyles = window.getComputedStyle(svg);
+        return computedStyles;
+    }
+    catch (e) {
+        console.error('Unable to get computed styles', e);
+        return {};
+    }
+}
+/** Render onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
+function render(canvasCtx, render, styleOptions = {}) {
+    // TODO: Consider memoizing?  How about reactiving to CSS variable changes (light/dark mode toggle)
+    const computedStyles = getComputedStyles(canvasCtx.canvas, styleOptions);
+    // Adhere to CSS paint order: https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order
+    const paintOrder = computedStyles?.paintOrder === 'stroke' ? ['stroke', 'fill'] : ['fill', 'stroke'];
+    if (computedStyles?.opacity) {
+        canvasCtx.globalAlpha = Number(computedStyles?.opacity);
+    }
+    // Text properties
+    canvasCtx.font = `${computedStyles.fontSize} ${computedStyles.fontFamily}`; // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
+    // TODO: Hack to handle `textAnchor` with canvas.  Try to find a better approach
+    if (computedStyles.textAnchor === 'middle') {
+        canvasCtx.textAlign = 'center';
+    }
+    else if (computedStyles.textAnchor === 'end') {
+        canvasCtx.textAlign = 'right';
+    }
+    else {
+        canvasCtx.textAlign = computedStyles.textAlign; // TODO: Handle/map `justify` and `match-parent`?
+    }
+    // TODO: Handle `textBaseline` / `verticalAnchor` (Text)
+    // canvasCtx.textBaseline = 'top';
+    // canvasCtx.textBaseline = 'middle';
+    // canvasCtx.textBaseline = 'bottom';
+    // canvasCtx.textBaseline = 'alphabetic';
+    // canvasCtx.textBaseline = 'hanging';
+    // canvasCtx.textBaseline = 'ideographic';
+    // Dashed lines
+    if (computedStyles.strokeDasharray.includes(',')) {
+        const dashArray = computedStyles.strokeDasharray
+            .split(',')
+            .map((s) => Number(s.replace('px', '')));
+        canvasCtx.setLineDash(dashArray);
+    }
+    paintOrder.forEach((attr) => {
+        if (attr === 'fill') {
+            const fill = styleOptions.styles?.fill instanceof CanvasGradient
+                ? styleOptions.styles?.fill
+                : ['none', DEFAULT_FILL].includes(computedStyles?.fill)
+                    ? null
+                    : computedStyles?.fill;
+            if (fill) {
+                const currentGlobalAlpha = canvasCtx.globalAlpha;
+                if (computedStyles?.fillOpacity) {
+                    canvasCtx.globalAlpha = Number(computedStyles?.fillOpacity);
+                }
+                canvasCtx.fillStyle = fill;
+                render.fill(canvasCtx);
+                // Restore in case it was modified by `fillOpacity`
+                canvasCtx.globalAlpha = currentGlobalAlpha;
+            }
+        }
+        else if (attr === 'stroke') {
+            const stroke = styleOptions.styles?.stroke instanceof CanvasGradient
+                ? styleOptions.styles?.stroke
+                : computedStyles?.stroke === 'none'
+                    ? null
+                    : computedStyles?.stroke;
+            if (stroke) {
+                canvasCtx.lineWidth =
+                    typeof computedStyles?.strokeWidth === 'string'
+                        ? Number(computedStyles?.strokeWidth?.replace('px', ''))
+                        : (computedStyles?.strokeWidth ?? 1);
+                canvasCtx.strokeStyle = stroke;
+                render.stroke(canvasCtx);
+            }
+        }
+    });
+}
+/** Render SVG path data onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
+export function renderPathData(canvasCtx, pathData, styleOptions = {}) {
+    const path = new Path2D(pathData ?? '');
+    render(canvasCtx, {
+        fill: (ctx) => ctx.fill(path),
+        stroke: (ctx) => ctx.stroke(path),
+    }, styleOptions);
+}
+export function renderText(canvasCtx, text, coords, styleOptions = {}) {
+    if (text) {
+        render(canvasCtx, {
+            fill: (ctx) => ctx.fillText(text.toString(), coords.x, coords.y),
+            stroke: (ctx) => ctx.strokeText(text.toString(), coords.x, coords.y),
+        }, styleOptions);
+    }
+}
+export function renderRect(canvasCtx, coords, styleOptions = {}) {
+    render(canvasCtx, {
+        fill: (ctx) => ctx.fillRect(coords.x, coords.y, coords.width, coords.height),
+        stroke: (ctx) => ctx.strokeRect(coords.x, coords.y, coords.width, coords.height),
+    }, styleOptions);
+}
+/** Clear canvas accounting for Canvas `context.translate(...)` */
+export function clearCanvasContext(canvasCtx, options) {
+    // Clear with negative offset due to Canvas `context.translate(...)`
+    canvasCtx.clearRect(-options.padding.left, -options.padding.top, options.containerWidth, options.containerHeight);
+}
+/**
+    Scales a canvas for high DPI / retina displays.
+  @see: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#examples
+  @see: https://web.dev/articles/canvas-hidipi
+*/
+export function scaleCanvas(ctx, width, height) {
+    const devicePixelRatio = window.devicePixelRatio || 1;
+    ctx.canvas.width = width * devicePixelRatio;
+    ctx.canvas.height = height * devicePixelRatio;
+    ctx.canvas.style.width = `${width}px`;
+    ctx.canvas.style.height = `${height}px`;
+    ctx.scale(devicePixelRatio, devicePixelRatio);
+    return { width: ctx.canvas.width, height: ctx.canvas.height };
+}

package/dist/utils/common.d.ts

@@ -1,6 +1,15 @@
-import type Chart from '../components/Chart.svelte';
 import type { ComponentProps } from 'svelte';
+import type Chart from '../components/Chart.svelte';
+import type LineChart from '../components/charts/LineChart.svelte';
 export type Accessor<TData = any> = number | string | ((d: TData) => any) | undefined | null | Accessor<TData>[];
 export declare function accessor<TData = any>(prop: Accessor<TData>): (d: TData) => any;
 /** Guarantee chart data is an array */
 export declare function chartDataArray<TData = any>(data: ComponentProps<Chart<TData>>['data']): any[];
+type SimplifiedChartProps = ComponentProps<LineChart<any>>;
+export declare function defaultChartPadding(axis: SimplifiedChartProps['axis'], legend: SimplifiedChartProps['legend']): {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+} | undefined;
+export {};