svelteplot 0.0.1-alpha.22 → 0.0.1-alpha.23

package/dist/marks/BarX.svelte

@@ -8,11 +8,14 @@ import { stackX } from "../transforms/stack.js";
 import { recordizeX } from "../transforms/recordize.js";
 const BaseMark_BarX = BaseMark;
 const plot = getContext("svelteplot");
-let { data: rawData, inset = 0, ...rawChannels } = $props();
+let { data: rawData, inset = 0, onclick, onmouseenter, onmouseleave, ...rawChannels } = $props();
 let { data, ...channels } = $derived(stackX(recordizeX({ data: rawData, ...rawChannels })));
 function isValid(value) {
   return value !== null && !Number.isNaN(value);
 }
+function wrapEvent(handler, d) {
+  return handler ? () => handler(d.___orig___ !== void 0 ? d.___orig___ : d) : null;
+}
 </script>
 
 <BaseMark_BarX type="bar-x" {data} channels={['y', 'x1', 'x2', 'fill', 'stroke']} {...channels}>
@@ -37,6 +40,10 @@ function isValid(value) {
                     transform="translate({[minx, plot.yScale(cy) + inset]})"
                     width={maxx - minx}
                     height={plot.yScale.bandwidth() - inset * 2}
+                    role={onclick ? 'button' : null}
+                    onclick={wrapEvent(onclick, datum)}
+                    onmouseenter={wrapEvent(onmouseenter, datum)}
+                    onmouseleave={wrapEvent(onmouseleave, datum)}
                 />
             {/if}
         {/each}

package/dist/marks/BarY.svelte

@@ -8,11 +8,22 @@ import { stackY } from "../transforms/stack.js";
 import { recordizeY } from "../transforms/recordize.js";
 const BaseMark_BarY = BaseMark;
 const plot = getContext("svelteplot");
-let { data: rawData, insetLeft, insetRight, ...rawChannels } = $props();
+let {
+  data: rawData,
+  insetLeft,
+  insetRight,
+  onclick,
+  onmouseenter,
+  onmouseleave,
+  ...rawChannels
+} = $props();
 let { data, ...channels } = $derived(stackY(recordizeY({ data: rawData, ...rawChannels })));
 function isValid(value) {
   return value !== null && !Number.isNaN(value);
 }
+function wrapEvent(handler, d) {
+  return handler ? () => handler(d.___orig___ !== void 0 ? d.___orig___ : d) : null;
+}
 </script>
 
 <BaseMark_BarY type="bar-y" {data} channels={['x', 'y1', 'y2', 'fill', 'stroke']} {...channels}>
@@ -37,6 +48,10 @@ function isValid(value) {
                     transform="translate({[plot.xScale(cx), miny]})"
                     height={maxy - miny}
                     width={plot.xScale.bandwidth()}
+                    role={onclick ? 'button' : null}
+                    onclick={wrapEvent(onclick, datum)}
+                    onmouseenter={wrapEvent(onmouseenter, datum)}
+                    onmouseleave={wrapEvent(onmouseleave, datum)}
                 />
             {/if}
         {/each}

package/dist/marks/HTMLTooltip.svelte

@@ -1,4 +1,5 @@
 <script context="module"></script>
+
 <script>import { getContext } from "svelte";
 import resolveChannel from "../helpers/resolveChannel.js";
 import { quadtree } from "d3-quadtree";
@@ -28,18 +29,18 @@ let tree = $derived(
 );
 </script>
 
-
-<div class="tooltip" class:hide={!!!datum} 
+<div
+    class="tooltip"
+    class:hide={!!!datum}
     style:left="{tooltipX ? plot.xScale(tooltipX) : 0}px"
     style:top="{tooltipY ? plot.yScale(tooltipY) : 0}px"
-    >
+>
     <div class="tooltip-body">
         <slot {datum} />
     </div>
 </div>
 
 <style>
-   
     div.tooltip {
         background: white;
         background: var(--svelteplot-tooltip-bg);
@@ -48,7 +49,9 @@ let tree = $derived(
         font-size: 13px;
         padding: 1ex 1em;
         border-radius: 3px;
-        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+        box-shadow:
+            rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+            rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
         position: absolute;
         pointer-events: none;
     }

package/dist/types.d.ts

@@ -145,6 +145,9 @@ export type ValueOf<T> = T[keyof T];
 export type ChannelType = ValueOf<typeof SCALE_TYPES>;
 export interface MarkProps {
     data: DataRow[];
+    onclick?: MouseEventHandler<SVGPathElement>;
+    onmouseenter?: MouseEventHandler<SVGPathElement>;
+    onmouseleave?: MouseEventHandler<SVGPathElement>;
 }
 export type BaseMarkProps = MarkProps & {
     type: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.0.1-alpha.22",
+    "version": "0.0.1-alpha.23",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build",