svelteplot 0.0.1-alpha.22 → 0.0.1-alpha.24

package/dist/marks/Area.svelte

@@ -14,8 +14,10 @@ let {
   data,
   curve,
   tension,
+  x = null,
   x1 = null,
   x2 = null,
+  y = null,
   y1 = null,
   y2 = null,
   z = null,
@@ -25,9 +27,9 @@ let {
   ...styleProps
 } = $props();
 let channels = $derived({
-  x1,
+  x1: x1 == null ? x : x1,
   x2,
-  y1,
+  y1: y1 == null ? y : y1,
   y2,
   fill,
   stroke,
@@ -45,7 +47,7 @@ let sortedGroups = $derived(
 let areaPath = $derived(
   callWithProps(area, [], {
     curve: maybeCurve(curve, tension),
-    ...x1 != null && x2 != null ? {
+    ...channels.x1 != null && channels.x2 != null ? {
       // "vertical" area
       x0: (d) => plot.xScale(resolveChannel("x1", d, channels)),
       x1: (d) => plot.xScale(resolveChannel("x2", d, channels)),
@@ -58,15 +60,16 @@ let areaPath = $derived(
     }
   })
 );
+$inspect({ channels, x });
 </script>
 
 <BaseMark_Area
     type="area"
     {data}
     channels={['x1', 'x2', 'y1', 'y2', 'fill', 'stroke']}
-    {x1}
+    x1={x1 != null ? x1 : x}
     {x2}
-    {y1}
+    y1={y1 != null ? y1 : y}
     {y2}
     {fill}
     {stroke}

package/dist/marks/Area.svelte.d.ts

@@ -1,8 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve } from '../types.js';
 export type AreaMarkProps = MarkProps & BaseMarkStyleProps & {
+    x?: ChannelAccessor;
     x1?: ChannelAccessor;
     x2?: ChannelAccessor;
+    y?: ChannelAccessor;
     y1?: ChannelAccessor;
     y2?: ChannelAccessor;
     z?: ChannelAccessor;

package/dist/marks/AreaX.svelte

@@ -1,10 +1,10 @@
 <script context="module"></script>
 
 <script>import Area from "./Area.svelte";
-import { stackX, recordizeX, renameChannels } from "..";
+import { stackX, recordizeX } from "..";
 let { data: rawData, stack, ...rawChannels } = $props();
 let { data, ...channels } = $derived(
-  renameChannels(stackX(recordizeX({ data: rawData, ...rawChannels }), stack), { y: "y1" })
+  stackX(recordizeX({ data: rawData, ...rawChannels }), stack)
 );
 </script>
 

package/dist/marks/AreaY.svelte

@@ -1,10 +1,10 @@
 <script context="module"></script>
 
 <script>import Area from "./Area.svelte";
-import { stackY, recordizeY, renameChannels } from "..";
+import { stackY, recordizeY } from "..";
 let { data: rawData, stack, ...rawChannels } = $props();
 let { data, ...channels } = $derived(
-  renameChannels(stackY(recordizeY({ data: rawData, ...rawChannels }), stack), { x: "x1" })
+  stackY(recordizeY({ data: rawData, ...rawChannels }), stack)
 );
 $inspect({ data, channels });
 </script>

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/transforms/stack.js

@@ -56,7 +56,6 @@ function stackXY(byDim, data, channels, options) {
             });
         })
             .flat(1);
-        console.log({ newData });
         return {
             data: newData,
             ...channels,

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.24",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build",