layerchart 0.93.10 → 0.94.1

package/dist/components/charts/AreaChart.svelte

@@ -339,6 +339,8 @@
   }}
 
   <slot {...slotProps}>
+    <slot name="belowContext" {...slotProps} />
+
     <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} center={radial} {debug}>
       <slot name="grid" {...slotProps}>
         {#if grid}
@@ -402,17 +404,12 @@
           {#each visibleSeries as s, i (s.key)}
             {@const seriesTooltipData =
               s.data && tooltip.data ? findRelatedData(s.data, tooltip.data, x) : null}
+            {@const highlightPointsProps =
+              typeof props.highlight?.points === 'object' ? props.highlight.points : null}
 
             <Highlight
               data={seriesTooltipData}
               y={stackSeries ? (d) => d.stackData[i][1] : (s.value ?? (s.data ? undefined : s.key))}
-              points={{
-                fill: s.color,
-                class: cls(
-                  'transition-opacity',
-                  highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10'
-                ),
-              }}
               lines={i == 0}
               onpointclick={onpointclick
                 ? (e, detail) => onpointclick(e, { ...detail, series: s })
@@ -420,6 +417,15 @@
               onpointenter={() => (highlightSeriesKey = s.key)}
               onpointleave={() => (highlightSeriesKey = null)}
               {...props.highlight}
+              points={{
+                ...highlightPointsProps,
+                fill: s.color,
+                class: cls(
+                  'transition-opacity',
+                  highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
+                  highlightPointsProps?.class
+                ),
+              }}
             />
           {/each}
         </slot>
@@ -432,6 +438,8 @@
       </ChartClipPath>
     </svelte:component>
 
+    <slot name="aboveContext" {...slotProps} />
+
     <slot name="legend" {...slotProps}>
       {#if legend}
         <Legend

package/dist/components/charts/BarChart.svelte

@@ -345,6 +345,8 @@
     getLabelsProps,
   }}
   <slot {...slotProps}>
+    <slot name="belowContext" {...slotProps} />
+
     <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} {debug}>
       <slot name="grid" {...slotProps}>
         {#if grid}
@@ -421,6 +423,8 @@
       {/if}
     </svelte:component>
 
+    <slot name="aboveContext" {...slotProps} />
+
     <slot name="legend" {...slotProps}>
       {#if legend}
         <Legend

package/dist/components/charts/LineChart.svelte

@@ -269,6 +269,8 @@
     getSplineProps,
   }}
   <slot {...slotProps}>
+    <slot name="belowContext" {...slotProps} />
+
     <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} center={radial} {debug}>
       <slot name="grid" {...slotProps}>
         {#if grid}
@@ -332,16 +334,12 @@
           {#each visibleSeries as s, i (s.key)}
             {@const seriesTooltipData =
               s.data && tooltip.data ? findRelatedData(s.data, tooltip.data, x) : null}
+            {@const highlightPointsProps =
+              typeof props.highlight?.points === 'object' ? props.highlight.points : null}
+
             <Highlight
               data={seriesTooltipData}
               y={s.value ?? (s.data ? undefined : s.key)}
-              points={{
-                fill: s.color,
-                class: cls(
-                  'transition-opacity',
-                  highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10'
-                ),
-              }}
               lines={i === 0}
               onpointclick={onpointclick
                 ? (e, detail) => onpointclick(e, { ...detail, series: s })
@@ -349,12 +347,23 @@
               onpointenter={() => (highlightSeriesKey = s.key)}
               onpointleave={() => (highlightSeriesKey = null)}
               {...props.highlight}
+              points={{
+                ...highlightPointsProps,
+                fill: s.color,
+                class: cls(
+                  'transition-opacity',
+                  highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
+                  highlightPointsProps?.class
+                ),
+              }}
             />
           {/each}
         </slot>
       </ChartClipPath>
     </svelte:component>
 
+    <slot name="aboveContext" {...slotProps} />
+
     <slot name="legend" {...slotProps}>
       {#if legend}
         <Legend

package/dist/components/charts/PieChart.svelte

@@ -206,6 +206,8 @@
     visibleData,
   }}
   <slot {...slotProps}>
+    <slot name="belowContext" {...slotProps} />
+
     <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} {center} {debug}>
       <slot name="belowMarks" {...slotProps} />
 
@@ -293,6 +295,8 @@
       <slot name="aboveMarks" {...slotProps} />
     </svelte:component>
 
+    <slot name="aboveContext" {...slotProps} />
+
     <slot name="legend" {...slotProps}>
       {#if legend}
         <Legend

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

@@ -340,9 +340,11 @@ declare class __sveltets_Render<TData> {
     };
     slots(): {
         default: any;
+        belowContext: any;
         belowMarks: any;
         marks: any;
         aboveMarks: any;
+        aboveContext: any;
         legend: any;
         tooltip: any;
     };

package/dist/components/charts/ScatterChart.svelte

@@ -235,6 +235,8 @@
     : null}
 
   <slot {...slotProps}>
+    <slot name="belowContext" {...slotProps} />
+
     <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} {debug}>
       <slot name="grid" {...slotProps}>
         {#if grid}
@@ -284,10 +286,13 @@
       <ChartClipPath disabled={!brush} full>
         <slot name="highlight" {...slotProps}>
           <Highlight
-            points={{ fill: activeSeries?.color }}
             lines
             axis="both"
             {...props.highlight}
+            points={{
+              fill: activeSeries?.color,
+              ...(typeof props.highlight?.points === 'object' ? props.highlight.points : null),
+            }}
           />
         </slot>
 
@@ -299,6 +304,8 @@
       </ChartClipPath>
     </svelte:component>
 
+    <slot name="aboveContext" {...slotProps} />
+
     <slot name="legend" {...slotProps}>
       {#if legend}
         <Legend

package/package.json

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