layerchart 2.0.0-next.1 → 2.0.0-next.3

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

@@ -0,0 +1,107 @@
+import type { ComponentProps, Snippet } from 'svelte';
+import Circle from './Circle.svelte';
+import Line from './Line.svelte';
+import Bar from './Bar.svelte';
+import Rect from './Rect.svelte';
+import { type Accessor } from '../utils/common.js';
+export type HighlightPointData = {
+    x: any;
+    y: any;
+};
+export type HighlightPoint = {
+    x: number;
+    y: number;
+    fill: string;
+    data: HighlightPointData;
+};
+export type HighlightPropsWithoutHTML = {
+    /**
+     * Highlight specific data (annotate), especte uses tooltip data
+     */
+    data?: any;
+    /**
+     * Override `x` from context
+     */
+    x?: Accessor;
+    /**
+     * Override `y` from context
+     */
+    y?: Accessor;
+    axis?: 'x' | 'y' | 'both' | 'none';
+    /**
+     * Show points and pass props to Circles
+     * @default false
+     */
+    points?: boolean | Partial<ComponentProps<typeof Circle>> | Snippet<[
+        {
+            points: {
+                x: number;
+                y: number;
+                fill: string;
+                data: HighlightPointData;
+            }[];
+        }
+    ]>;
+    /**
+     * Show lines and pass props to Lines
+     * @default false
+     */
+    lines?: boolean | Partial<ComponentProps<typeof Line>> | Snippet<[
+        {
+            lines: {
+                x1: number;
+                y1: number;
+                x2: number;
+                y2: number;
+            }[];
+        }
+    ]>;
+    /**
+     * Show area and pass props to Rect
+     * @default false
+     */
+    area?: boolean | Partial<ComponentProps<typeof Rect>> | Snippet<[
+        {
+            area: {
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+            };
+        }
+    ]>;
+    /**
+     * Show bar and pass props to Rect
+     *
+     * @default false
+     */
+    bar?: boolean | Partial<ComponentProps<typeof Bar>> | Snippet;
+    /**
+     * Set to false to disable spring transitions
+     *
+     * @default true
+     */
+    motion?: MotionProp;
+    onAreaClick?: (e: MouseEvent, detail: {
+        data: any;
+    }) => void;
+    onBarClick?: (e: MouseEvent, detail: {
+        data: any;
+    }) => void;
+    onPointClick?: (e: MouseEvent, detail: {
+        point: HighlightPoint;
+        data: any;
+    }) => void;
+    onPointEnter?: (e: MouseEvent, detail: {
+        point: HighlightPoint;
+        data: any;
+    }) => void;
+    onPointLeave?: (e: MouseEvent, detail: {
+        point: HighlightPoint;
+        data: any;
+    }) => void;
+};
+import type { MotionProp } from '../utils/motion.svelte.js';
+declare const Highlight: import("svelte").Component<HighlightPropsWithoutHTML, {}, "">;
+type Highlight = ReturnType<typeof Highlight>;
+export default Highlight;

package/dist/components/Hull.svelte

@@ -1,5 +1,58 @@
+<script lang="ts" module>
+  import type { Without } from '../utils/types.js';
+  import type { SVGAttributes } from 'svelte/elements';
+  import type { ComponentProps } from 'svelte';
+
+  export type HullPropsWithoutHTML = {
+    /**
+     * Override data instead of using context
+     */
+    data?: any;
+
+    /**
+     * The curve factory to use for the hull
+     * @default curveLinearClosed
+     */
+    curve?: ComponentProps<typeof Spline>['curve'];
+
+    /**
+     * Classes to apply to the elements.
+     */
+    classes?: {
+      root?: string;
+      path?: string;
+    };
+
+    onpointermove?: (
+      e: PointerEvent,
+      details: {
+        points: [number, number][];
+        polygon: Delaunay.Polygon;
+      }
+    ) => void;
+
+    onclick?: (
+      e: MouseEvent,
+      details: {
+        points: [number, number][];
+        polygon: Delaunay.Polygon;
+      }
+    ) => void;
+
+    onpointerleave?: (e: PointerEvent) => void;
+
+    /**
+     * A bindable reference to the wrapping `<g>` element.
+     *
+     * @bindable
+     */
+    ref?: SVGGElement;
+  };
+
+  export type HullProps = HullPropsWithoutHTML & Without<GroupProps, HullPropsWithoutHTML>;
+</script>
+
 <script lang="ts">
-  import { type ComponentProps } from 'svelte';
   import { min } from 'd3-array';
   import { Delaunay } from 'd3-delaunay';
   // @ts-expect-error
@@ -7,59 +60,57 @@
   import { curveLinearClosed } from 'd3-shape';
   import { cls } from '@layerstack/tailwind';
 
-  import { chartContext } from './ChartContext.svelte';
   import GeoPath from './GeoPath.svelte';
-  import { geoContext, type GeoContext } from './GeoContext.svelte';
+  import Group, { type GroupProps } from './Group.svelte';
   import Spline from './Spline.svelte';
+  import { getChartContext } from './Chart.svelte';
+  import { getGeoContext } from './GeoContext.svelte';
+  import { layerClass } from '../utils/attributes.js';
+
+  let {
+    data,
+    curve = curveLinearClosed,
+    classes = {},
+    onpointermove,
+    onclick,
+    onpointerleave,
+    class: className,
+    ref: refProp = $bindable(),
+    ...restProps
+  }: HullProps = $props();
+
+  let ref = $state<SVGGElement>();
 
-  const { flatData, x: xContext, y: yContext } = chartContext();
-  const geo = geoContext() as GeoContext | undefined;
-
-  /** Override data instead of using context */
-  export let data: any = undefined;
-
-  export let curve: ComponentProps<Spline>['curve'] = curveLinearClosed;
-
-  export let classes: {
-    root?: string;
-    path?: string;
-  } = {};
-
-  export let onclick:
-    | ((e: MouseEvent, details: { points: [number, number][]; polygon: Delaunay.Polygon }) => void)
-    | undefined = undefined;
-  export let onpointermove:
-    | ((
-        e: PointerEvent,
-        details: {
-          points: [number, number][];
-          polygon: Delaunay.Polygon;
-        }
-      ) => void)
-    | undefined = undefined;
-  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
-
-  $: points = (data ?? $flatData).map((d: any) => {
-    const xValue = $xContext(d);
-    const yValue = $yContext(d);
-
-    const x = Array.isArray(xValue) ? min(xValue) : xValue;
-    const y = Array.isArray(yValue) ? min(yValue) : yValue;
-
-    const point = [x, y];
-    // @ts-expect-error
-    point.data = d;
-    return point;
+  $effect.pre(() => {
+    refProp = ref;
   });
+
+  const ctx = getChartContext();
+  const geoCtx = getGeoContext();
+
+  const points = $derived(
+    (data ?? ctx.flatData).map((d: any) => {
+      const xValue = ctx.x(d);
+      const yValue = ctx.y(d);
+
+      const x = Array.isArray(xValue) ? min(xValue) : xValue;
+      const y = Array.isArray(yValue) ? min(yValue) : yValue;
+
+      const point = [x, y];
+      // @ts-expect-error
+      point.data = d;
+      return point;
+    })
+  );
 </script>
 
-<g {...$$restProps} class={cls(classes.root, $$props.class)}>
-  {#if $geo}
+<Group {...restProps} class={cls(layerClass('hull-g'), classes.root, className)} bind:ref>
+  {#if geoCtx.projection}
     {@const polygon = geoVoronoi().hull(points)}
     <GeoPath
       geojson={polygon}
       {curve}
-      class={cls('fill-transparent', classes.path)}
+      class={cls(layerClass('hull-path'), 'fill-transparent', classes.path)}
       onclick={(e) => onclick?.(e, { points, polygon })}
       onpointermove={(e) => onpointermove?.(e, { points, polygon })}
       {onpointerleave}
@@ -72,10 +123,10 @@
       x={(d) => d[0]}
       y={(d) => d[1]}
       {curve}
-      class={cls('fill-transparent', classes.path)}
+      class={cls(layerClass('hull-class'), 'fill-transparent', classes.path)}
       onclick={(e) => onclick?.(e, { points, polygon })}
       onpointermove={(e) => onpointermove?.(e, { points, polygon })}
       {onpointerleave}
     />
   {/if}
-</g>
+</Group>

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

@@ -1,32 +1,42 @@
-import { SvelteComponentTyped } from "svelte";
-import { Delaunay } from 'd3-delaunay';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        data?: any;
-        curve?: import("d3-shape").CurveFactory | import("d3-shape").CurveFactoryLineOnly | undefined;
-        classes?: {
-            root?: string;
-            path?: string;
-        } | undefined;
-        onclick?: ((e: MouseEvent, details: {
-            points: [number, number][];
-            polygon: Delaunay.Polygon;
-        }) => void) | undefined | undefined;
-        onpointermove?: ((e: PointerEvent, details: {
-            points: [number, number][];
-            polygon: Delaunay.Polygon;
-        }) => void) | undefined | undefined;
-        onpointerleave?: ((e: PointerEvent) => void) | undefined | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { Without } from '../utils/types.js';
+import type { ComponentProps } from 'svelte';
+export type HullPropsWithoutHTML = {
+    /**
+     * Override data instead of using context
+     */
+    data?: any;
+    /**
+     * The curve factory to use for the hull
+     * @default curveLinearClosed
+     */
+    curve?: ComponentProps<typeof Spline>['curve'];
+    /**
+     * Classes to apply to the elements.
+     */
+    classes?: {
+        root?: string;
+        path?: string;
     };
-    slots: {};
+    onpointermove?: (e: PointerEvent, details: {
+        points: [number, number][];
+        polygon: Delaunay.Polygon;
+    }) => void;
+    onclick?: (e: MouseEvent, details: {
+        points: [number, number][];
+        polygon: Delaunay.Polygon;
+    }) => void;
+    onpointerleave?: (e: PointerEvent) => void;
+    /**
+     * A bindable reference to the wrapping `<g>` element.
+     *
+     * @bindable
+     */
+    ref?: SVGGElement;
 };
-export type HullProps = typeof __propDef.props;
-export type HullEvents = typeof __propDef.events;
-export type HullSlots = typeof __propDef.slots;
-export default class Hull extends SvelteComponentTyped<HullProps, HullEvents, HullSlots> {
-}
-export {};
+export type HullProps = HullPropsWithoutHTML & Without<GroupProps, HullPropsWithoutHTML>;
+import { Delaunay } from 'd3-delaunay';
+import { type GroupProps } from './Group.svelte';
+import Spline from './Spline.svelte';
+declare const Hull: import("svelte").Component<HullProps, {}, "ref">;
+type Hull = ReturnType<typeof Hull>;
+export default Hull;

package/dist/components/Labels.svelte

@@ -1,56 +1,129 @@
-<script lang="ts">
-  import { type ComponentProps } from 'svelte';
+<script lang="ts" module>
+  import Text, { type TextProps } from './Text.svelte';
+  import { type ComponentProps, type Snippet } from 'svelte';
   import { format as formatValue, type FormatType } from '@layerstack/utils';
-  import { cls } from '@layerstack/tailwind';
-
-  import Text from './Text.svelte';
-  import { isScaleBand } from '../utils/scales.js';
-  import { chartContext } from './ChartContext.svelte';
+  import type { Without } from '../utils/types.js';
   import Points, { type Point } from './Points.svelte';
   import { accessor, type Accessor } from '../utils/common.js';
 
-  const { xScale, yScale } = chartContext();
+  export type LabelsPropsWithoutHTML<T = any> = {
+    /**
+     * Override data instead of using context
+     */
+    data?: T;
+
+    /**
+     * Override display value accessor.  By default, uses `y` unless yScale is band scale
+     */
+    value?: Accessor<T>;
+
+    /**
+     * The fill color of the label, which can either be a string or an accessor function
+     * that returns a valid `fill` color value.
+     *
+     * The accessor is useful for dynamic fill colors based on the data the label represents.
+     */
+    fill?: string | Accessor<T>;
+
+    /**
+     * Override `x` accessor from Chart context
+     */
+    x?: Accessor<T>;
+
+    /**
+     * Override `y` accessor from Chart context
+     */
+    y?: Accessor<T>;
+
+    /**
+     * The placement of the label relative to the point
+     * @default 'outside'
+     */
+    placement?: 'inside' | 'outside' | 'center';
+
+    /**
+     * The offset of the label from the point
+     *
+     * @default placement === 'center' ? 0 : 4
+     */
+    offset?: number;
 
-  /** Override data instead of using context */
-  export let data: any = undefined;
+    /**
+     * The format of the label
+     */
+    format?: FormatType;
 
-  /** Override display value accessor.  By default, uses `y` unless yScale is band scale   */
-  export let value: Accessor = undefined;
+    /**
+     * Define unique value for {#each} `(key)` expressions to improve transitions.
+     * `index` position used by default
+     *
+     * @default (d, index) => index
+     */
+    key?: (d: T, index: number) => any;
 
-  /** Override `x` accessor from Chart context */
-  export let x: Accessor = undefined;
-  /** Override `y` accessor from Chart context */
-  export let y: Accessor = undefined;
+    children?: Snippet<[{ data: Point; textProps: ComponentProps<typeof Text> }]>;
+  };
+
+  export type LabelsProps<T = any> = LabelsPropsWithoutHTML<T> &
+    Without<TextProps, LabelsPropsWithoutHTML<T>>;
+</script>
+
+<script lang="ts" generics="TData = any">
+  import { cls } from '@layerstack/tailwind';
+
+  import { isScaleBand } from '../utils/scales.svelte.js';
+  import { getChartContext } from './Chart.svelte';
+  import Group from './Group.svelte';
+  import { extractLayerProps, layerClass } from '../utils/attributes.js';
 
-  export let placement: 'inside' | 'outside' | 'center' = 'outside';
-  export let offset = placement === 'center' ? 0 : 4;
-  export let format: FormatType | undefined = undefined;
+  const ctx = getChartContext();
 
-  /** 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;
+  let {
+    data,
+    value,
+    x,
+    y,
+    placement = 'outside',
+    offset = placement === 'center' ? 0 : 4,
+    format,
+    key = (_: any, i: number) => i,
+    children: childrenProp,
+    class: className,
+    fill,
+    ...restProps
+  }: LabelsProps<TData> = $props();
 
-  $: getTextProps = (point: Point): ComponentProps<Text> => {
+  function getTextProps(point: Point): ComponentProps<typeof Text> {
     // Used for positioning
-    const pointValue = isScaleBand($yScale) ? point.xValue : point.yValue;
+    const pointValue = isScaleBand(ctx.yScale) ? point.xValue : point.yValue;
+
+    // extract the true fill value from `fill` which could be an
+    // accessor function or string/undefined
+    const fillValue = typeof fill === 'function' ? accessor(fill)(point.data) : fill;
 
     const displayValue = value
       ? accessor(value)(point.data)
-      : isScaleBand($yScale)
+      : isScaleBand(ctx.yScale)
         ? point.xValue
         : point.yValue;
 
     const formattedValue = formatValue(
       displayValue,
       format ??
-        (value ? undefined : isScaleBand($yScale) ? $xScale.tickFormat?.() : $yScale.tickFormat?.())
+        (value
+          ? undefined
+          : isScaleBand(ctx.yScale)
+            ? ctx.xScale.tickFormat?.()
+            : ctx.yScale.tickFormat?.())
     );
 
-    if (isScaleBand($yScale)) {
+    if (isScaleBand(ctx.yScale)) {
       // Position label left/right on horizontal bars
       if (pointValue < 0) {
         // left
         return {
           value: formattedValue,
+          fill: fillValue,
           x: point.x + (placement === 'outside' ? -offset : offset),
           y: point.y,
           textAnchor: placement === 'outside' ? 'end' : 'start',
@@ -61,6 +134,7 @@
         // right
         return {
           value: formattedValue,
+          fill: fillValue,
           x: point.x + (placement === 'outside' ? offset : -offset),
           y: point.y,
           textAnchor: placement === 'outside' ? 'start' : 'end',
@@ -74,6 +148,7 @@
         // bottom
         return {
           value: formattedValue,
+          fill: fillValue,
           x: point.x,
           y: point.y + (placement === 'outside' ? offset : -offset),
           capHeight: '.6rem',
@@ -85,6 +160,7 @@
         // top
         return {
           value: formattedValue,
+          fill: fillValue,
           x: point.x,
           y: point.y + (placement === 'outside' ? -offset : offset),
           capHeight: '.6rem',
@@ -94,27 +170,31 @@
         };
       }
     }
-  };
+  }
 </script>
 
-<g class="Labels">
-  <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',
-            textProps.class,
-            $$props.class
-          )}
-        />
-      </slot>
-    {/each}
+<Group class={layerClass('labels-g')}>
+  <Points {data} {x} {y}>
+    {#snippet children({ points })}
+      {#each points as point, i (key(point.data, i))}
+        {@const textProps = extractLayerProps(getTextProps(point), 'labels-text')}
+        {#if childrenProp}
+          {@render childrenProp({ data: point, textProps })}
+        {:else}
+          <Text
+            {...textProps}
+            {...restProps}
+            class={cls(
+              'text-xs',
+              placement === 'inside'
+                ? 'fill-surface-300 stroke-surface-content'
+                : 'fill-surface-content stroke-surface-100',
+              textProps.class,
+              className
+            )}
+          />
+        {/if}
+      {/each}
+    {/snippet}
   </Points>
-</g>
+</Group>