svelteplot 0.0.1-alpha.21 → 0.0.1-alpha.23

package/dist/Plot.svelte

@@ -67,24 +67,24 @@ $effect(() => {
     caption
   });
 });
-function onMouseMove(evt) {
+const onMouseMove = (evt) => {
   if (onmousemove)
     onmousemove({ ...evt, plot });
-}
+};
 let hasLegend = $derived(color?.legend || symbol?.legend);
 </script>
 
 <figure data-testid={testid} class="svelteplot" bind:clientWidth={width} style:max-width={maxWidth}>
-    <div class="plot-body">
+    <div
+        role="document"
+        class="plot-body"
+        bind:this={plot.body}
+        on:mousemove={onmousemove ? onMouseMove : null}
+    >
         <div class="overlay">
             {#if overlay}{@render overlay(plot)}{/if}
         </div>
-        <svg
-            role="document"
-            {width}
-            height={plot.height}
-            onmousemove={onmousemove ? onMouseMove : null}
-        >
+        <svg {width} height={plot.height}>
             <!-- automatic grids -->
             {#if (grid && plot.hasScaleX) || x?.grid}<GridX automatic />{/if}
             {#if (grid && plot.hasScaleY) || y?.grid}<GridY automatic />{/if}
@@ -111,7 +111,6 @@ let hasLegend = $derived(color?.legend || symbol?.legend);
             {#if frame}<Frame />{/if}
             {#if children}{@render children(plot)}{/if}
         </svg>
-        
     </div>
 
     {#if plot.options.title || plot.options.subtitle || header || hasLegend}
@@ -165,7 +164,6 @@ let hasLegend = $derived(color?.legend || symbol?.legend);
     }
     .plot-body {
         order: 2;
-        
     }
     svg {
         overflow: visible;

package/dist/classes/Plot.svelte.js

@@ -72,6 +72,7 @@ export class Plot {
     radius = new Scale('radius', this);
     color = new Scale('color', this);
     symbol = new Scale('symbol', this);
+    body = $state();
     colorSymbolRedundant = $derived(this.color.uniqueMarkProps.length === 1 &&
         this.symbol.uniqueMarkProps.length === 1 &&
         this.color.uniqueMarkProps[0] === this.symbol.uniqueMarkProps[0]);

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { default as DotY } from './marks/DotY.svelte';
 export { default as Frame } from './marks/Frame.svelte';
 export { default as GridX } from './marks/GridX.svelte';
 export { default as GridY } from './marks/GridY.svelte';
+export { default as HTMLTooltip } from './marks/HTMLTooltip.svelte';
 export { default as Line } from './marks/Line.svelte';
 export { default as LineX } from './marks/LineX.svelte';
 export { default as LineY } from './marks/LineY.svelte';

package/dist/index.js

@@ -15,6 +15,7 @@ export { default as DotY } from './marks/DotY.svelte';
 export { default as Frame } from './marks/Frame.svelte';
 export { default as GridX } from './marks/GridX.svelte';
 export { default as GridY } from './marks/GridY.svelte';
+export { default as HTMLTooltip } from './marks/HTMLTooltip.svelte';
 export { default as Line } from './marks/Line.svelte';
 export { default as LineX } from './marks/LineX.svelte';
 export { default as LineY } from './marks/LineY.svelte';

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

@@ -0,0 +1,61 @@
+<script context="module"></script>
+
+<script>import { getContext } from "svelte";
+import resolveChannel from "../helpers/resolveChannel.js";
+import { quadtree } from "d3-quadtree";
+const plot = getContext("svelteplot");
+let { data, x, y, r } = $props();
+let datum = $state(false);
+let tooltipX = $state();
+let tooltipY = $state();
+function onMouseMove(evt) {
+  const pt = tree.find(evt.layerX, evt.layerY, 15);
+  if (pt) {
+    tooltipX = resolveChannel("x", pt, { x, y, r });
+    tooltipY = resolveChannel("y", pt, { x, y, r });
+    datum = pt;
+  } else {
+    datum = false;
+  }
+}
+$effect(() => {
+  plot.body?.addEventListener("mousemove", onMouseMove);
+  return () => {
+    plot.body?.removeEventListener("mousemove", onMouseMove);
+  };
+});
+let tree = $derived(
+  quadtree().x((d) => plot.xScale(resolveChannel("x", d, { x, y, r }))).y((d) => plot.yScale(resolveChannel("y", d, { x, y, r }))).addAll(data)
+);
+</script>
+
+<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);
+        border: 1px solid #ccc;
+        border-color: var(--svelteplot-tooltip-border);
+        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;
+        position: absolute;
+        pointer-events: none;
+    }
+    .tooltip.hide {
+        display: none;
+    }
+</style>

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ChannelAccessor, DataRow } from '../types.js';
+export type HTMLTooltipMarkProps = {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    r?: ChannelAccessor;
+};
+declare const __propDef: {
+    props: HTMLTooltipMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            datum: boolean;
+        };
+    };
+};
+export type HtmlTooltipProps = typeof __propDef.props;
+export type HtmlTooltipEvents = typeof __propDef.events;
+export type HtmlTooltipSlots = typeof __propDef.slots;
+export default class HtmlTooltip extends SvelteComponentTyped<HtmlTooltipProps, HtmlTooltipEvents, HtmlTooltipSlots> {
+}
+export {};

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.21",
+    "version": "0.0.1-alpha.23",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build",
@@ -27,24 +27,24 @@
         "!dist/**/*.spec.*"
     ],
     "devDependencies": {
-        "@sveltejs/package": "^2.2.5",
         "@playwright/test": "^1.40.1",
         "@sveltejs/adapter-auto": "^3.1.0",
         "@sveltejs/kit": "^2.3.2",
+        "@sveltejs/package": "^2.2.5",
+        "@sveltejs/vite-plugin-svelte": "^3.0.1",
+        "@sveltepress/theme-default": "^1.22.3",
+        "@sveltepress/vite": "^0.31.3",
         "@types/chroma-js": "^2.4.3",
+        "@types/d3-array": "^3.2.1",
         "@types/d3-dsv": "^3.0.7",
         "@types/d3-interpolate": "^3.0.4",
         "@types/d3-random": "^3.0.3",
+        "@types/d3-scale": "^4.0.8",
         "@types/d3-scale-chromatic": "^3.0.3",
         "@types/d3-shape": "^3.1.6",
-        "@types/d3-array": "^3.2.1",
-        "@types/d3-scale": "^4.0.8",
         "@types/underscore": "^1.11.15",
         "@typescript-eslint/eslint-plugin": "^6.19.0",
         "@typescript-eslint/parser": "^6.19.0",
-        "@sveltejs/vite-plugin-svelte": "^3.0.1",
-        "@sveltepress/theme-default": "^1.22.3",
-        "@sveltepress/vite": "^0.31.3",
         "bulma": "^0.9.4",
         "d3-dsv": "^3.0.1",
         "eslint": "^8.56.0",
@@ -71,6 +71,7 @@
         "chroma-js": "^2.4.2",
         "d3-array": "^3.2.4",
         "d3-interpolate": "^3.0.1",
+        "d3-quadtree": "^3.0.1",
         "d3-random": "^3.0.1",
         "d3-scale": "^4.0.2",
         "d3-scale-chromatic": "^3.0.0",