layerchart 0.79.2 → 0.79.3

package/dist/components/Labels.svelte

@@ -11,9 +11,17 @@
 
   const { xScale, yScale } = chartContext();
 
+  /** Override data instead of using context */
+  export let data: any = undefined;
+
   /** Override display value accessor.  By default, uses `y` unless yScale is band scale   */
   export let value: Accessor = undefined;
 
+  /** Override `x` accessor from Chart context */
+  export let x: Accessor = undefined;
+  /** Override `y` accessor from Chart context */
+  export let y: Accessor = undefined;
+
   export let placement: 'inside' | 'outside' | 'center' = 'outside';
   export let offset = placement === 'center' ? 0 : 4;
   export let format: FormatType | undefined = undefined;
@@ -90,19 +98,21 @@
 </script>
 
 <g class="Labels">
-  <Points let:points>
+  <Points {data} {x} {y} let:points>
     {#each points as point, i (key(point.data, i))}
       {@const textProps = getTextProps(point)}
       <slot data={point} {textProps}>
         <Text
+          {...textProps}
+          {...$$restProps}
           class={cls(
             'text-xs',
             placement === 'inside'
               ? 'fill-surface-300 stroke-surface-content'
-              : 'fill-surface-content stroke-surface-100'
+              : 'fill-surface-content stroke-surface-100',
+            textProps.class,
+            $$props.class
           )}
-          {...textProps}
-          {...$$restProps}
         />
       </slot>
     {/each}

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

@@ -5,7 +5,10 @@ import { type Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        data?: any;
         value?: Accessor;
+        x?: Accessor;
+        y?: Accessor;
         placement?: "inside" | "outside" | "center" | undefined;
         offset?: number | undefined;
         format?: FormatType | undefined;

package/dist/components/Points.svelte

@@ -13,14 +13,15 @@
   import Link from './Link.svelte';
   import { isScaleBand, type AnyScale } from '../utils/scales.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
+  import { accessor, type Accessor } from '../utils/common.js';
 
   const context = chartContext() as any;
   const {
     data: contextData,
-    x,
+    x: contextX,
     xScale,
     xGet,
-    y,
+    y: contextY,
     yScale,
     yGet,
     cGet,
@@ -34,6 +35,11 @@
   /** Override data instead of using context */
   export let data: any = undefined;
 
+  /** Override `x` accessor from Chart context */
+  export let x: Accessor = undefined;
+  /** Override `y` accessor from Chart context */
+  export let y: Accessor = undefined;
+
   export let r = 5;
   export let offsetX: Offset = undefined;
   export let offsetY: Offset = undefined;
@@ -65,12 +71,15 @@
     }
   }
 
+  $: xAccessor = x ? accessor(x) : $contextX;
+  $: yAccessor = y ? accessor(y) : $contextY;
+
   $: pointsData = data ?? $contextData;
 
   $: points = pointsData
     .flatMap((d: any) => {
-      const xValue = $x(d);
-      const yValue = $y(d);
+      const xValue = xAccessor(d);
+      const yValue = yAccessor(d);
 
       if (Array.isArray(xValue)) {
         /*
@@ -120,8 +129,8 @@
     .filter((p: Point) => p) as Point[];
 
   $: _links = pointsData.flatMap((d: any) => {
-    const xValue = $x(d);
-    const yValue = $y(d);
+    const xValue = xAccessor(d);
+    const yValue = yAccessor(d);
 
     if (Array.isArray(xValue)) {
       /*

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

@@ -9,10 +9,13 @@ export type Point = {
 };
 import { type ComponentProps } from 'svelte';
 import Link from './Link.svelte';
+import { type Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
         data?: any;
+        x?: Accessor;
+        y?: Accessor;
         r?: number | undefined;
         offsetX?: number | ((value: number, context: any) => number) | undefined;
         offsetY?: number | ((value: number, context: any) => number) | undefined;

package/dist/components/charts/AreaChart.svelte

@@ -187,6 +187,49 @@
     return areaProps;
   }
 
+  function getPointsProps(s: (typeof series)[number], i: number) {
+    const pointsProps: ComponentProps<Points> = {
+      data: s.data,
+      y: stackSeries
+        ? (d) => d.stackData[i][1]
+        : Array.isArray(s.value)
+          ? s.value[1]
+          : (s.value ?? (s.data ? undefined : s.key)),
+      fill: s.color,
+      ...props.points,
+      ...(typeof points === 'object' ? points : null),
+      class: cls(
+        'stroke-surface-200 transition-opacity',
+        highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
+        props.points?.class,
+        typeof points === 'object' && points.class
+      ),
+    };
+
+    return pointsProps;
+  }
+
+  function getLabelsProps(s: (typeof series)[number], i: number) {
+    const labelsProps: ComponentProps<Labels> = {
+      data: s.data,
+      y: stackSeries
+        ? (d) => d.stackData[i][1]
+        : Array.isArray(s.value)
+          ? s.value[1]
+          : (s.value ?? (s.data ? undefined : s.key)),
+      ...props.labels,
+      ...(typeof labels === 'object' ? labels : null),
+      class: cls(
+        'stroke-surface-200 transition-opacity',
+        highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
+        props.labels?.class,
+        typeof labels === 'object' && labels.class
+      ),
+    };
+
+    return labelsProps;
+  }
+
   const selectedSeries = selectionStore();
   $: visibleSeries = series.filter((s) => {
     return (
@@ -243,6 +286,8 @@
     series,
     visibleSeries,
     getAreaProps,
+    getLabelsProps,
+    getPointsProps,
   }}
 
   <slot {...slotProps}>
@@ -296,14 +341,8 @@
       </slot>
 
       {#if points}
-        {#each visibleSeries as s}
-          <Points
-            data={s.data}
-            fill={s.color}
-            class="stroke-surface-200"
-            {...props.points}
-            {...typeof points === 'object' ? points : null}
-          />
+        {#each visibleSeries as s, i (s.key)}
+          <Points {...getPointsProps(s, i)} />
         {/each}
       {/if}
 
@@ -326,7 +365,9 @@
       </slot>
 
       {#if labels}
-        <Labels {...props.labels} {...typeof labels === 'object' ? labels : null} />
+        {#each visibleSeries as s, i (s.key)}
+          <Labels {...getLabelsProps(s, i)} />
+        {/each}
       {/if}
     </svelte:component>
 

package/dist/components/charts/BarChart.svelte

@@ -163,7 +163,6 @@
 
   $: if (stackSeries) {
     const seriesKeys = visibleSeries.map((s) => s.key);
-    // const stackData = stack().keys(seriesKeys)(chartDataArray(data)) as any[];
 
     const offset =
       seriesLayout === 'stackExpand'
@@ -240,6 +239,24 @@
     return barsProps;
   }
 
+  function getLabelsProps(s: (typeof series)[number], i: number) {
+    const labelsProps: ComponentProps<Labels> = {
+      // TODO: Improve placement when using `seriesLayout="group"`
+      // data: s.data,
+      // y: s.value ?? (s.data ? undefined : s.key),
+      ...props.labels,
+      ...(typeof labels === 'object' ? labels : null),
+      class: cls(
+        'stroke-surface-200 transition-opacity',
+        highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
+        props.labels?.class,
+        typeof labels === 'object' && labels.class
+      ),
+    };
+
+    return labelsProps;
+  }
+
   const selectedSeries = selectionStore();
   $: visibleSeries = series.filter((s) => {
     return (
@@ -309,6 +326,7 @@
     series,
     visibleSeries,
     getBarsProps,
+    getLabelsProps,
   }}
   <slot {...slotProps}>
     <svelte:component this={renderContext === 'canvas' ? Canvas : Svg}>
@@ -381,7 +399,9 @@
       </slot>
 
       {#if labels}
-        <Labels {...props.labels} {...typeof labels === 'object' ? labels : null} />
+        {#each visibleSeries as s, i (s.key)}
+          <Labels {...getLabelsProps(s, i)} />
+        {/each}
       {/if}
     </svelte:component>
 

package/dist/components/charts/LineChart.svelte

@@ -132,6 +132,41 @@
     return splineProps;
   }
 
+  function getPointsProps(s: (typeof series)[number], i: number) {
+    const pointsProps: ComponentProps<Points> = {
+      data: s.data,
+      y: s.value ?? (s.data ? undefined : s.key),
+      fill: s.color,
+      ...props.points,
+      ...(typeof points === 'object' ? points : null),
+      class: cls(
+        'stroke-surface-200 transition-opacity',
+        highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
+        props.points?.class,
+        typeof points === 'object' && points.class
+      ),
+    };
+
+    return pointsProps;
+  }
+
+  function getLabelsProps(s: (typeof series)[number], i: number) {
+    const labelsProps: ComponentProps<Labels> = {
+      data: s.data,
+      y: s.value ?? (s.data ? undefined : s.key),
+      ...props.labels,
+      ...(typeof labels === 'object' ? labels : null),
+      class: cls(
+        'stroke-surface-200 transition-opacity',
+        highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
+        props.labels?.class,
+        typeof labels === 'object' && labels.class
+      ),
+    };
+
+    return labelsProps;
+  }
+
   const selectedSeries = selectionStore();
   $: visibleSeries = series.filter((s) => {
     return (
@@ -184,6 +219,8 @@
     tooltip,
     series,
     visibleSeries,
+    getLabelsProps,
+    getPointsProps,
     getSplineProps,
   }}
   <slot {...slotProps}>
@@ -231,19 +268,15 @@
       </slot>
 
       {#if points}
-        {#each visibleSeries as s}
-          <Points
-            data={s.data}
-            fill={s.color}
-            class="stroke-surface-200"
-            {...props.points}
-            {...typeof points === 'object' ? points : null}
-          />
+        {#each visibleSeries as s, i (s.key)}
+          <Points {...getPointsProps(s, i)} />
         {/each}
       {/if}
 
       {#if labels}
-        <Labels {...props.labels} {...typeof labels === 'object' ? labels : null} />
+        {#each visibleSeries as s, i (s.key)}
+          <Labels {...getLabelsProps(s, i)} />
+        {/each}
       {/if}
 
       <slot name="highlight" {...slotProps}>

package/dist/components/charts/ScatterChart.svelte

@@ -116,6 +116,22 @@
     return pointsProps;
   }
 
+  function getLabelsProps(s: (typeof series)[number], i: number) {
+    const labelsProps: ComponentProps<Labels> = {
+      data: s.data,
+      ...props.labels,
+      ...(typeof labels === 'object' ? labels : null),
+      class: cls(
+        'stroke-surface-200 transition-opacity',
+        highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
+        props.labels?.class,
+        typeof labels === 'object' && labels.class
+      ),
+    };
+
+    return labelsProps;
+  }
+
   const selectedSeries = selectionStore();
   $: visibleSeries = series.filter((s) => {
     return (
@@ -169,6 +185,7 @@
     tooltip,
     series,
     visibleSeries,
+    getLabelsProps,
     getPointsProps,
   }}
   {@const activeSeries = tooltip.data
@@ -224,11 +241,9 @@
       </slot>
 
       {#if labels}
-        <Labels
-          format={(value) => format(value)}
-          {...props.highlight}
-          {...typeof labels === 'object' ? labels : null}
-        />
+        {#each visibleSeries as s, i (s.key)}
+          <Labels {...getLabelsProps(s, i)} />
+        {/each}
       {/if}
     </svelte:component>
 

package/package.json

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