layerchart 1.0.1 → 1.0.3

package/dist/components/Area.svelte

@@ -95,7 +95,7 @@
     return path(data ?? $contextData);
   }
 
-  $: tweenedOptions = tweened
+  const tweenedOptions = tweened
     ? { interpolate: interpolatePath, ...(typeof tweened === 'object' ? tweened : null) }
     : false;
   $: tweened_d = motionStore(defaultPathData(), { tweened: tweenedOptions });

package/dist/components/Link.svelte

@@ -65,8 +65,9 @@
   $: markerEndId = markerEnd || $$slots['markerEnd'] ? uniqueId('marker-') : '';
 
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
-  // @ts-expect-error
-  $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
+  const tweenedOptions = tweened
+    ? { interpolate: interpolatePath, ...(typeof tweened === 'object' ? tweened : null) }
+    : false;
   $: tweened_d = motionStore('', { tweened: tweenedOptions });
 
   $: {

package/dist/components/Spline.svelte

@@ -149,8 +149,9 @@
   }
 
   let d: string | null = '';
-  // @ts-expect-error
-  $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
+  const tweenedOptions = tweened
+    ? { interpolate: interpolatePath, ...(typeof tweened === 'object' ? tweened : null) }
+    : false;
   $: tweened_d = motionStore(defaultPathData(), { tweened: tweenedOptions });
   $: {
     const path = $radial

package/dist/components/TransformContext.svelte

@@ -130,15 +130,15 @@
     center: { x: number; y: number },
     rect?: { width: number; height: number }
   ) {
-    // TODO: Improve with geo/projection
+    const newScale = rect ? ($width < $height ? $width / rect.width : $height / rect.height) : 1;
 
     $translate = {
-      x: $width / 2 - center.x,
-      y: $height / 2 - center.y,
+      x: $width / 2 - center.x * newScale,
+      y: $height / 2 - center.y * newScale,
     };
 
     if (rect) {
-      $scale = $width < $height ? $width / rect.width : $height / rect.height;
+      $scale = newScale;
     }
   }
 

package/dist/components/charts/AreaChart.svelte

@@ -103,6 +103,7 @@
   export let props: {
     area?: Partial<ComponentProps<Area>>;
     brush?: Partial<ComponentProps<BrushContext>>;
+    canvas?: Partial<ComponentProps<Canvas>>;
     grid?: Partial<ComponentProps<Grid>>;
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
@@ -110,6 +111,7 @@
     line?: Partial<ComponentProps<Line>>;
     points?: Partial<ComponentProps<Points>>;
     rule?: Partial<ComponentProps<Rule>>;
+    svg?: Partial<ComponentProps<Svg>>;
     tooltip?: {
       context?: Partial<ComponentProps<Tooltip.Context>>;
       root?: Partial<ComponentProps<Tooltip.Root>>;
@@ -173,7 +175,7 @@
     highlightSeriesKey = seriesKey;
   }
 
-  function getAreaProps(s: (typeof series)[number], i: number) {
+  $: getAreaProps = (s: (typeof series)[number], i: number) => {
     const lineProps = {
       ...props.line,
       ...(typeof props.area?.line === 'object' ? props.area.line : null),
@@ -217,7 +219,7 @@
     };
 
     return areaProps;
-  }
+  };
 
   function getPointsProps(s: (typeof series)[number], i: number) {
     const pointsProps: ComponentProps<Points> = {
@@ -350,7 +352,12 @@
   <slot {...slotProps}>
     <slot name="belowContext" {...slotProps} />
 
-    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} center={radial} {debug}>
+    <svelte:component
+      this={renderContext === 'canvas' ? Canvas : Svg}
+      {...asAny(renderContext === 'canvas' ? props.canvas : props.svg)}
+      center={radial}
+      {debug}
+    >
       <slot name="grid" {...slotProps}>
         {#if grid}
           <Grid x={radial} y {...typeof grid === 'object' ? grid : null} {...props.grid} />

package/dist/components/charts/BarChart.svelte

@@ -135,12 +135,14 @@
   export let props: {
     xAxis?: Partial<ComponentProps<Axis>>;
     yAxis?: Partial<ComponentProps<Axis>>;
+    canvas?: Partial<ComponentProps<Canvas>>;
     grid?: Partial<ComponentProps<Grid>>;
     rule?: Partial<ComponentProps<Rule>>;
     bars?: Partial<ComponentProps<Bars>>;
     legend?: Partial<ComponentProps<Legend>>;
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
+    svg?: Partial<ComponentProps<Svg>>;
     tooltip?: {
       context?: Partial<ComponentProps<Tooltip.Context>>;
       root?: Partial<ComponentProps<Tooltip.Root>>;
@@ -203,7 +205,7 @@
     highlightSeriesKey = seriesKey;
   }
 
-  function getBarsProps(s: (typeof series)[number], i: number) {
+  $: getBarsProps = (s: (typeof series)[number], i: number) => {
     const isFirst = i == 0;
     const isLast = i == visibleSeries.length - 1;
 
@@ -252,7 +254,7 @@
     };
 
     return barsProps;
-  }
+  };
 
   function getLabelsProps(s: (typeof series)[number], i: number) {
     const labelsProps: ComponentProps<Labels> = {
@@ -356,7 +358,11 @@
   <slot {...slotProps}>
     <slot name="belowContext" {...slotProps} />
 
-    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} {debug}>
+    <svelte:component
+      this={renderContext === 'canvas' ? Canvas : Svg}
+      {...asAny(renderContext === 'canvas' ? props.canvas : props.svg)}
+      {debug}
+    >
       <slot name="grid" {...slotProps}>
         {#if grid}
           <Grid

package/dist/components/charts/LineChart.svelte

@@ -94,6 +94,7 @@
 
   export let props: {
     brush?: Partial<ComponentProps<BrushContext>>;
+    canvas?: Partial<ComponentProps<Canvas>>;
     grid?: Partial<ComponentProps<Grid>>;
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
@@ -101,6 +102,7 @@
     points?: Partial<ComponentProps<Points>>;
     rule?: Partial<ComponentProps<Rule>>;
     spline?: Partial<ComponentProps<Spline>>;
+    svg?: Partial<ComponentProps<Svg>>;
     tooltip?: {
       context?: Partial<ComponentProps<Tooltip.Context>>;
       root?: Partial<ComponentProps<Tooltip.Root>>;
@@ -139,7 +141,7 @@
     highlightSeriesKey = seriesKey;
   }
 
-  function getSplineProps(s: (typeof series)[number], i: number) {
+  $: getSplineProps = (s: (typeof series)[number], i: number) => {
     const splineProps: ComponentProps<Spline> = {
       data: s.data,
       y: s.value ?? (s.data ? undefined : s.key),
@@ -159,7 +161,7 @@
     };
 
     return splineProps;
-  }
+  };
 
   function getPointsProps(s: (typeof series)[number], i: number) {
     const pointsProps: ComponentProps<Points> = {
@@ -280,7 +282,12 @@
   <slot {...slotProps}>
     <slot name="belowContext" {...slotProps} />
 
-    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} center={radial} {debug}>
+    <svelte:component
+      this={renderContext === 'canvas' ? Canvas : Svg}
+      {...asAny(renderContext === 'canvas' ? props.canvas : props.svg)}
+      center={radial}
+      {debug}
+    >
       <slot name="grid" {...slotProps}>
         {#if grid}
           <Grid x={radial} y {...typeof grid === 'object' ? grid : null} {...props.grid} />

package/dist/components/charts/PieChart.svelte

@@ -15,6 +15,7 @@
   import * as Tooltip from '../tooltip/index.js';
 
   import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+  import { asAny } from '../../utils/types.js';
 
   interface $$Props extends ComponentProps<Chart<TData>> {
     cornerRadius?: typeof cornerRadius;
@@ -119,6 +120,8 @@
     group?: Partial<ComponentProps<Group>>;
     arc?: Partial<ComponentProps<Arc>>;
     legend?: Partial<ComponentProps<Legend>>;
+    canvas?: Partial<ComponentProps<Canvas>>;
+    svg?: Partial<ComponentProps<Svg>>;
     tooltip?: {
       context?: Partial<ComponentProps<Tooltip.Context>>;
       root?: Partial<ComponentProps<Tooltip.Root>>;
@@ -223,7 +226,12 @@
   <slot {...slotProps}>
     <slot name="belowContext" {...slotProps} />
 
-    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} {center} {debug}>
+    <svelte:component
+      this={renderContext === 'canvas' ? Canvas : Svg}
+      {...asAny(renderContext === 'canvas' ? props.canvas : props.svg)}
+      {center}
+      {debug}
+    >
       <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>

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

@@ -1,9 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from 'svelte';
 import Arc from '../Arc.svelte';
+import Canvas from '../layout/Canvas.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 { type Accessor } from '../../utils/common.js';
 declare class __sveltets_Render<TData> {
@@ -294,6 +296,8 @@ declare class __sveltets_Render<TData> {
             group?: Partial<ComponentProps<Group>>;
             arc?: Partial<ComponentProps<Arc>>;
             legend?: Partial<ComponentProps<Legend>>;
+            canvas?: Partial<ComponentProps<Canvas>>;
+            svg?: Partial<ComponentProps<Svg>>;
             tooltip?: {
                 context?: Partial<ComponentProps<Tooltip.Context>>;
                 root?: Partial<ComponentProps<Tooltip.Root>>;

package/dist/components/charts/ScatterChart.svelte

@@ -25,6 +25,7 @@
     defaultChartPadding,
     type Accessor,
   } from '../../utils/common.js';
+  import { asAny } from '../../utils/types.js';
 
   interface $$Props extends ComponentProps<Chart<TData>> {
     axis?: typeof axis;
@@ -72,6 +73,7 @@
 
   export let props: {
     brush?: Partial<ComponentProps<BrushContext>>;
+    canvas?: Partial<ComponentProps<Canvas>>;
     debug?: typeof debug;
     grid?: Partial<ComponentProps<Grid>>;
     highlight?: Partial<ComponentProps<Highlight>>;
@@ -80,6 +82,7 @@
     points?: Partial<ComponentProps<Points>>;
     profile?: typeof profile;
     rule?: Partial<ComponentProps<Rule>>;
+    svg?: Partial<ComponentProps<Svg>>;
     tooltip?: {
       context?: Partial<ComponentProps<Tooltip.Context>>;
       root?: Partial<ComponentProps<Tooltip.Root>>;
@@ -120,7 +123,7 @@
     highlightSeriesKey = seriesKey ?? null;
   }
 
-  function getPointsProps(s: (typeof series)[number], i: number) {
+  $: getPointsProps = (s: (typeof series)[number], i: number) => {
     const pointsProps: ComponentProps<Points> = {
       data: s.data,
       stroke: s.color,
@@ -137,7 +140,7 @@
     };
 
     return pointsProps;
-  }
+  };
 
   function getLabelsProps(s: (typeof series)[number], i: number) {
     const labelsProps: ComponentProps<Labels> = {
@@ -246,7 +249,11 @@
   <slot {...slotProps}>
     <slot name="belowContext" {...slotProps} />
 
-    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} {debug}>
+    <svelte:component
+      this={renderContext === 'canvas' ? Canvas : Svg}
+      {...asAny(renderContext === 'canvas' ? props.canvas : props.svg)}
+      {debug}
+    >
       <slot name="grid" {...slotProps}>
         {#if grid}
           <Grid x y {...typeof grid === 'object' ? grid : null} {...props.grid} />

package/dist/components/tooltip/TooltipContext.svelte

@@ -192,7 +192,7 @@
     const point = localPoint(e, containerNode);
 
     if (
-      mode !== 'manual' &&
+      tooltipData == null && // mode !== 'manual' but support annotations
       (point.x < tooltipContextNode.offsetLeft ||
         point.x > tooltipContextNode.offsetLeft + tooltipContextNode.offsetWidth ||
         point.y < tooltipContextNode.offsetTop ||

package/dist/utils/object.js

@@ -0,0 +1,2 @@
+import { memoize } from 'lodash-es';
+export const memoizeObject = memoize((obj) => obj, (obj) => JSON.stringify(obj));

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "devDependencies": {
     "@changesets/cli": "^2.28.1",
     "@mdi/js": "^7.4.47",