feat(AreaChart|BarChart|LineChart|PieChart|ScatterChart): Expose `too…

…ltipContext` to enable `bind:` usage for external access (#394)
techniq · Feb 11, 2025 · 634336d · 634336d
1 parent f2fc0c8
commit 634336d
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 0 deletions.
diff --git a/.changeset/wild-pumas-doubt.md b/.changeset/wild-pumas-doubt.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(AreaChart|BarChart|LineChart|PieChart|ScatterChart): Expose `tooltipContext` to enable `bind:` usage for external access
diff --git a/packages/layerchart/src/lib/components/charts/AreaChart.svelte b/packages/layerchart/src/lib/components/charts/AreaChart.svelte
@@ -83,6 +83,9 @@
   export let points: ComponentProps<Points> | boolean = false;
   export let rule: ComponentProps<Rule> | boolean = true;
 
+  /** Expose tooltip context for external access */
+  export let tooltipContext: ComponentProps<Tooltip.Context>['tooltip'] = undefined;
+
   /** Event dispatched with current tooltip data */
   export let ontooltipclick: (e: MouseEvent, details: { data: any }) => void = () => {};
 
@@ -301,6 +304,7 @@
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
+  bind:tooltipContext
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {
         axis: 'x',

diff --git a/packages/layerchart/src/lib/components/charts/BarChart.svelte b/packages/layerchart/src/lib/components/charts/BarChart.svelte
@@ -93,6 +93,9 @@
   /** Padding between series items within bars when using 'seriesLayout="stack"' */
   export let stackPadding = 0;
 
+  /** Expose tooltip context for external access */
+  export let tooltipContext: ComponentProps<Tooltip.Context>['tooltip'] = undefined;
+
   /** Event dispatched with current tooltip data */
   export let ontooltipclick: (e: MouseEvent, detail: { data: any }) => void = () => {};
 
@@ -321,6 +324,7 @@
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
+  bind:tooltipContext
   let:x
   let:xScale
   let:y

diff --git a/packages/layerchart/src/lib/components/charts/LineChart.svelte b/packages/layerchart/src/lib/components/charts/LineChart.svelte
@@ -75,6 +75,9 @@
   export let points: ComponentProps<Points> | boolean = false;
   export let rule: ComponentProps<Rule> | boolean = true;
 
+  /** Expose tooltip context for external access */
+  export let tooltipContext: ComponentProps<Tooltip.Context>['tooltip'] = undefined;
+
   /** Event dispatched with current tooltip data */
   export let ontooltipclick: (e: MouseEvent, details: { data: any }) => void = () => {};
 
@@ -232,6 +235,7 @@
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
+  bind:tooltipContext
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {
         axis: 'x',

diff --git a/packages/layerchart/src/lib/components/charts/PieChart.svelte b/packages/layerchart/src/lib/components/charts/PieChart.svelte
@@ -97,6 +97,9 @@
   /** Center chart.  Override and use `props.group` for more control */
   export let center = placement === 'center';
 
+  /** Expose tooltip context for external access */
+  export let tooltipContext: ComponentProps<Tooltip.Context>['tooltip'] = undefined;
+
   // TODO: Not usable with manual tooltip / arc path.  Use `onarcclick`?
   /** Event dispatched with current tooltip data */
   export let ontooltipclick: (e: MouseEvent, detail: { data: any }) => void = () => {};
@@ -181,6 +184,7 @@
   padding={{ bottom: legend === true ? 32 : 0 }}
   {...$$restProps}
   tooltip={props.tooltip?.context}
+  bind:tooltipContext
   let:x
   let:xScale
   let:y

diff --git a/packages/layerchart/src/lib/components/charts/ScatterChart.svelte b/packages/layerchart/src/lib/components/charts/ScatterChart.svelte
@@ -64,6 +64,9 @@
   export let legend: ComponentProps<Legend> | boolean = false;
   export let rule: ComponentProps<Rule> | boolean = true;
 
+  /** Expose tooltip context for external access */
+  export let tooltipContext: ComponentProps<Tooltip.Context>['tooltip'] = undefined;
+
   /** Event dispatched with current tooltip data */
   export let ontooltipclick: (e: MouseEvent, detail: { data: any }) => void = () => {};
 
@@ -191,6 +194,7 @@
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
+  bind:tooltipContext
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {
         axis: 'both',

diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
@@ -25,6 +25,7 @@
   import type { DomainType } from '$lib/utils/scales.js';
   import Html from 'layerchart/components/layout/Html.svelte';
   import Blockquote from 'layerchart/docs/Blockquote.svelte';
+  import type { ComponentProps } from 'svelte';
 
   export let data;
 
@@ -104,6 +105,7 @@
   let debug = false;
 
   let markerPoints: { date: Date; value: number }[] = [];
+  let tooltipContext: ComponentProps<AreaChart<any>>['tooltipContext'];
 </script>
 
 <svelte:window
@@ -922,6 +924,76 @@
   </div>
 </Preview>
 
+<h2>Externally access tooltip data</h2>
+
+<Preview data={{ denseDateSeriesData, denseDateSeriesData2 }}>
+  <div class="text-sm">
+    {#if $tooltipContext?.data}
+      date: {format($tooltipContext?.data?.date, PeriodType.Day, { variant: 'short' })}
+      value: {$tooltipContext?.data?.value}
+    {:else}
+      [hover chart]
+    {/if}
+  </div>
+  <div class="h-[300px] p-4 border rounded">
+    <AreaChart
+      data={denseDateSeriesData}
+      x="date"
+      y="value"
+      {xDomain}
+      bind:tooltipContext
+      props={{
+        area: { tweened: { duration: 200 } },
+        xAxis: { format: undefined, tweened: { duration: 200 } },
+      }}
+      {renderContext}
+      {debug}
+    />
+  </div>
+</Preview>
+
+<!-- <Preview data={dateSeries}>
+  <div class="text-sm">
+    {#if $tooltipContext?.data}
+      date: {formatDate($tooltipContext?.data?.date, PeriodType.Day, { variant: 'short' })}
+      value: {$tooltipContext?.data?.value}
+    {:else}
+      [hover chart]
+    {/if}
+  </div>
+
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={dateSeries}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yDomain={[0, null]}
+      yNice
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'bisect-x' }}
+      bind:tooltipContext
+    >
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis
+          placement="bottom"
+          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          rule
+        />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
+        <Highlight points lines />
+      </Svg>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </Chart>
+  </div>
+</Preview> -->
+
 <h2>Brushing</h2>
 
 <Preview data={dateSeriesData}>