layerchart 0.59.1 → 0.59.2

package/dist/components/Bars.svelte

@@ -41,6 +41,9 @@
   /** Inset the rect for amount of padding.  Useful with multiple bars (bullet, overlap, etc) */
   export let inset = 0;
 
+  /** Define unique value for {#each} `(key)` expressions to improve transitions.  `index` position used by default */
+  export let key: (d: any, index: number) => any = (d, i) => i;
+
   export let spring: ComponentProps<Rect>['spring'] = undefined;
   export let tweened: ComponentProps<Rect>['tweened'] = undefined;
 
@@ -49,7 +52,7 @@
 
 <g class="Bars">
   <slot>
-    {#each _data as d, i}
+    {#each _data as d, i (key(d, i))}
       <Bar
         bar={d}
         {x}

package/dist/components/Bars.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         radius?: number | undefined;
         fill?: string | undefined;
         inset?: number | undefined;
+        key?: ((d: any, index: number) => any) | undefined;
         spring?: ComponentProps<Rect>["spring"];
         tweened?: ComponentProps<Rect>["tweened"];
     };

package/dist/components/Labels.svelte

@@ -18,6 +18,9 @@
   export let offset = placement === 'center' ? 0 : 4;
   export let format: FormatType | undefined = undefined;
 
+  /** Define unique value for {#each} `(key)` expressions to improve transitions.  `index` position used by default */
+  export let key: (d: any, index: number) => any = (d, i) => i;
+
   $: getTextProps = (point: Point): ComponentProps<Text> => {
     // Used for positioning
     const pointValue = isScaleBand($yScale) ? point.xValue : point.yValue;
@@ -88,17 +91,20 @@
 
 <g class="Labels">
   <Points let:points>
-    {#each points as point}
-      <Text
-        class={cls(
-          'text-xs',
-          placement === 'inside'
-            ? 'fill-surface-300 stroke-surface-content'
-            : 'fill-surface-content stroke-surface-100'
-        )}
-        {...getTextProps(point)}
-        {...$$restProps}
-      />
+    {#each points as point, i (key(point.data, i))}
+      {@const textProps = getTextProps(point)}
+      <slot data={point} {textProps}>
+        <Text
+          class={cls(
+            'text-xs',
+            placement === 'inside'
+              ? 'fill-surface-300 stroke-surface-content'
+              : 'fill-surface-content stroke-surface-100'
+          )}
+          {...textProps}
+          {...$$restProps}
+        />
+      </slot>
     {/each}
   </Points>
 </g>

package/dist/components/Labels.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import { type FormatType } from '@layerstack/utils';
+import { type Point } from './Points.svelte';
 import { type Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
@@ -8,11 +9,17 @@ declare const __propDef: {
         placement?: ("inside" | "outside" | "center") | undefined;
         offset?: number | undefined;
         format?: FormatType | undefined;
+        key?: ((d: any, index: number) => any) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {
+            data: Point;
+            textProps: any;
+        };
+    };
 };
 export type LabelsProps = typeof __propDef.props;
 export type LabelsEvents = typeof __propDef.events;

package/dist/components/charts/AreaChart.svelte

@@ -195,7 +195,7 @@
       <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
-        {#each series as s, i}
+        {#each series as s, i (s.key)}
           <Area {...getAreaProps(s, i)} />
         {/each}
       </slot>
@@ -247,7 +247,7 @@
       {/if}
 
       <slot name="highlight" {...slotProps}>
-        {#each series as s, i}
+        {#each series as s, i (s.key)}
           <Highlight
             y={stackSeries ? (d) => d.stackData[i][1] : (s.value ?? s.key)}
             points={{ fill: s.color }}

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

@@ -242,6 +242,7 @@ declare class __sveltets_Render<TData> {
             placement?: ("inside" | "outside" | "center") | undefined;
             offset?: number | undefined;
             format?: import("@layerstack/utils").FormatType | undefined;
+            key?: ((d: any, index: number) => any) | undefined;
         };
         legend?: boolean | {
             [x: string]: any;

package/dist/components/charts/BarChart.svelte

@@ -244,7 +244,7 @@
       <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
-        {#each series as s, i}
+        {#each series as s, i (s.key)}
           <Bars {...getBarsProps(s, i)} />
         {/each}
       </slot>

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

@@ -242,6 +242,7 @@ declare class __sveltets_Render<TData> {
             placement?: ("inside" | "outside" | "center") | undefined;
             offset?: number | undefined;
             format?: import("@layerstack/utils").FormatType | undefined;
+            key?: ((d: any, index: number) => any) | undefined;
         };
         legend?: boolean | {
             [x: string]: any;

package/dist/components/charts/LineChart.svelte

@@ -142,7 +142,7 @@
       <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
-        {#each series as s, i}
+        {#each series as s, i (s.key)}
           <Spline {...getSplineProps(s, i)} />
         {/each}
       </slot>
@@ -192,7 +192,7 @@
       {/if}
 
       <slot name="highlight" {...slotProps}>
-        {#each series as s, i}
+        {#each series as s, i (s.key)}
           <Highlight
             data={s.data}
             y={s.value ?? s.key}

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

@@ -241,6 +241,7 @@ declare class __sveltets_Render<TData> {
             placement?: ("inside" | "outside" | "center") | undefined;
             offset?: number | undefined;
             format?: import("@layerstack/utils").FormatType | undefined;
+            key?: ((d: any, index: number) => any) | undefined;
         };
         legend?: boolean | {
             [x: string]: any;

package/dist/components/charts/PieChart.svelte

@@ -164,7 +164,7 @@
           center={['left', 'right'].includes(placement) ? 'y' : undefined}
           {...props.group}
         >
-          {#each series as s, i}
+          {#each series as s, i (s.key)}
             {@const singleArc = s.data?.length === 1 || chartData.length === 1}
             {#if singleArc}
               {@const d = s.data?.[0] || chartData[0]}

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

@@ -217,7 +217,8 @@ declare class __sveltets_Render<TData> {
                 label?: string;
                 tick?: string;
                 swatches?: string;
-                swatch?: string;
+                swatch
+                /** Key accessor */ ? /** Key accessor */: string;
             } | undefined;
         };
         maxValue?: number | undefined;

package/dist/components/charts/ScatterChart.svelte

@@ -119,7 +119,7 @@
       <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
-        {#each series as s, i}
+        {#each series as s, i (s.key)}
           <Points {...getPointsProps(s, i)} />
         {/each}
       </slot>

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

@@ -240,6 +240,7 @@ declare class __sveltets_Render<TData> {
             placement?: ("inside" | "outside" | "center") | undefined;
             offset?: number | undefined;
             format?: import("@layerstack/utils").FormatType | undefined;
+            key?: ((d: any, index: number) => any) | undefined;
         };
         legend?: boolean | {
             [x: string]: any;

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.59.1",
+  "version": "0.59.2",
   "devDependencies": {
     "@changesets/cli": "^2.27.9",
     "@mdi/js": "^7.4.47",
@@ -104,11 +104,13 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./utils/*": {
       "types": "./dist/utils/*.d.ts",
-      "svelte": "./dist/utils/*.js"
+      "svelte": "./dist/utils/*.js",
+      "default": "./dist/utils/*.js"
     }
   },
   "files": [