layerchart 2.0.0-next.6 → 2.0.0-next.60

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

@@ -1,7 +1,7 @@
 import type { ComponentProps, Snippet } from 'svelte';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';
-import Bar from './Bar.svelte';
+import type Bar from './Bar.svelte';
 import Rect from './Rect.svelte';
 import { type Accessor } from '../utils/common.js';
 export type HighlightPointData = {
@@ -11,8 +11,10 @@ export type HighlightPointData = {
 export type HighlightPoint = {
     x: number;
     y: number;
+    r?: number;
     fill: string;
     data: HighlightPointData;
+    seriesKey?: string;
 };
 export type HighlightPropsWithoutHTML = {
     /**
@@ -27,6 +29,12 @@ export type HighlightPropsWithoutHTML = {
      * Override `y` from context
      */
     y?: Accessor;
+    /**
+     * Use the chart's radius scale for highlight point size.
+     * When `true`, uses the `r` config from the chart context.
+     * When an accessor is provided, uses it to read the radius value from the data.
+     */
+    r?: boolean | Accessor;
     axis?: 'x' | 'y' | 'both' | 'none';
     /**
      * Show points and pass props to Circles
@@ -82,6 +90,10 @@ export type HighlightPropsWithoutHTML = {
      * @default true
      */
     motion?: MotionProp;
+    /**
+     * The opacity of the element. (0 to 1)
+     */
+    opacity?: number;
     onAreaClick?: (e: MouseEvent, detail: {
         data: any;
     }) => void;

package/dist/components/Hull.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { Without } from '../utils/types.js';
+  import type { Without, CommonStyleProps } from '../utils/types.js';
   import type { SVGAttributes } from 'svelte/elements';
   import type { ComponentProps } from 'svelte';
 
@@ -47,7 +47,7 @@
      * @bindable
      */
     ref?: SVGGElement;
-  };
+  } & CommonStyleProps;
 
   export type HullProps = HullPropsWithoutHTML & Without<GroupProps, HullPropsWithoutHTML>;
 </script>
@@ -55,17 +55,22 @@
 <script lang="ts">
   import { min } from 'd3-array';
   import { Delaunay } from 'd3-delaunay';
-  // @ts-expect-error
+  // @ts-expect-error - no types available
   import { geoVoronoi } from 'd3-geo-voronoi';
   import { curveLinearClosed } from 'd3-shape';
   import { cls } from '@layerstack/tailwind';
 
-  import GeoPath from './GeoPath.svelte';
+  import GeoPath from './geo/GeoPath.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';
+  import { getChartContext } from '../contexts/chart.js';
+  import { getGeoContext } from '../contexts/geo.js';
+
+  const ctx = getChartContext();
+  const geo = getGeoContext();
+
+  // Mark as composite so child Spline doesn't register
+  ctx.registerComponent({ name: 'Hull', kind: 'composite-mark' });
 
   let {
     data,
@@ -74,6 +79,12 @@
     onpointermove,
     onclick,
     onpointerleave,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeOpacity,
+    strokeWidth,
+    opacity,
     class: className,
     ref: refProp = $bindable(),
     ...restProps
@@ -85,9 +96,6 @@
     refProp = ref;
   });
 
-  const ctx = getChartContext();
-  const geoCtx = getGeoContext();
-
   const points = $derived(
     (data ?? ctx.flatData).map((d: any) => {
       const xValue = ctx.x(d);
@@ -104,13 +112,19 @@
   );
 </script>
 
-<Group {...restProps} class={cls(layerClass('hull-g'), classes.root, className)} bind:ref>
-  {#if geoCtx.projection}
+<Group {...restProps} class={cls('lc-hull-g', classes.root, className)} bind:ref>
+  {#if geo.projection}
     {@const polygon = geoVoronoi().hull(points)}
     <GeoPath
       geojson={polygon}
       {curve}
-      class={cls(layerClass('hull-path'), 'fill-transparent', classes.path)}
+      {fill}
+      {fillOpacity}
+      {stroke}
+      {strokeOpacity}
+      {strokeWidth}
+      {opacity}
+      class={['lc-hull-path', classes.path]}
       onclick={(e) => onclick?.(e, { points, polygon })}
       onpointermove={(e) => onpointermove?.(e, { points, polygon })}
       {onpointerleave}
@@ -123,10 +137,24 @@
       x={(d) => d[0]}
       y={(d) => d[1]}
       {curve}
-      class={cls(layerClass('hull-class'), 'fill-transparent', classes.path)}
+      {fill}
+      {fillOpacity}
+      {stroke}
+      {strokeOpacity}
+      {strokeWidth}
+      {opacity}
+      class={['lc-hull-class', classes.path]}
       onclick={(e) => onclick?.(e, { points, polygon })}
       onpointermove={(e) => onpointermove?.(e, { points, polygon })}
       {onpointerleave}
     />
   {/if}
 </Group>
+
+<style>
+  @layer components {
+    :global(:where(.lc-hull-path, .lc-hull-geo-path)) {
+      fill: transparent;
+    }
+  }
+</style>

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

@@ -1,4 +1,4 @@
-import type { Without } from '../utils/types.js';
+import type { Without, CommonStyleProps } from '../utils/types.js';
 import type { ComponentProps } from 'svelte';
 export type HullPropsWithoutHTML = {
     /**
@@ -32,7 +32,7 @@ export type HullPropsWithoutHTML = {
      * @bindable
      */
     ref?: SVGGElement;
-};
+} & CommonStyleProps;
 export type HullProps = HullPropsWithoutHTML & Without<GroupProps, HullPropsWithoutHTML>;
 import { Delaunay } from 'd3-delaunay';
 import { type GroupProps } from './Group.svelte';