layerchart 1.0.0 → 1.0.2

package/dist/components/Spline.svelte

@@ -124,7 +124,10 @@
 
   /** Provide initial `0` horizontal baseline and initially hide/untrack scale changes so not reactive (only set on initial mount) */
   function defaultPathData() {
-    if (pathData) {
+    if (!tweenedOptions) {
+      // If not tweened, return empty string (faster initial render)
+      return '';
+    } else if (pathData) {
       // Flatten all `y` coordinates of pre-defined `pathData`
       return flattenPathData(pathData, Math.min($yScale(0), $yRange[0]));
     } else if ($config.x) {

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;
@@ -52,6 +53,10 @@
   export let value: Accessor<TData> = 'value';
   $: valueAccessor = accessor(value);
 
+  /** Color accessor*/
+  export let c: Accessor<TData> = key;
+  $: cAccessor = accessor(c);
+
   /** Maximum possible value, useful when `data` is single item */
   export let maxValue: number | undefined = undefined;
 
@@ -115,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>>;
@@ -169,18 +176,20 @@
   data={visibleData}
   x={value}
   y={key}
-  c={key}
+  {c}
   cDomain={chartData.map(keyAccessor)}
   cRange={seriesColors.length
     ? seriesColors
-    : [
-        'hsl(var(--color-primary))',
-        'hsl(var(--color-secondary))',
-        'hsl(var(--color-info))',
-        'hsl(var(--color-success))',
-        'hsl(var(--color-warning))',
-        'hsl(var(--color-danger))',
-      ]}
+    : c !== key
+      ? chartData.map((d) => cAccessor(d))
+      : [
+          'hsl(var(--color-primary))',
+          'hsl(var(--color-secondary))',
+          'hsl(var(--color-info))',
+          'hsl(var(--color-success))',
+          'hsl(var(--color-warning))',
+          'hsl(var(--color-danger))',
+        ]}
   padding={{ bottom: legend === true ? 32 : 0 }}
   {...$$restProps}
   tooltip={props.tooltip?.context}
@@ -217,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/layout/Canvas.svelte

@@ -118,19 +118,17 @@
     activeCanvas = true;
     const component = getPointerComponent(e);
 
-    if (lastActiveComponent == null) {
-      // TODO: Should these be handled differently
+    if (component != lastActiveComponent) {
+      // TODO: Should `pointerleave`/`pointerout` and `pointerenter`/`pointerover` be handled differently?
+      if (lastActiveComponent) {
+        lastActiveComponent.events?.pointerleave?.(e);
+        lastActiveComponent.events?.pointerout?.(e);
+      }
+
       component?.events?.pointerenter?.(e);
       component?.events?.pointerover?.(e);
-    } else if (lastActiveComponent != component) {
-      // TODO: Should these be handled differently
-      lastActiveComponent?.events?.pointerleave?.(e);
-      lastActiveComponent?.events?.pointerout?.(e);
-
-      component?.events?.pointermove?.(e);
-    } else {
-      component?.events?.pointermove?.(e);
     }
+    component?.events?.pointermove?.(e);
 
     lastActiveComponent = component;
   }

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/package.json

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