svelteplot 0.0.1-alpha.20 → 0.0.1-alpha.22

package/dist/Plot.svelte

@@ -67,21 +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">
-        <svg
-            role="document"
-            {width}
-            height={plot.height}
-            onmousemove={onmousemove ? onMouseMove : null}
-        >
+    <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 {width} height={plot.height}>
             <!-- automatic grids -->
             {#if (grid && plot.hasScaleX) || x?.grid}<GridX automatic />{/if}
             {#if (grid && plot.hasScaleY) || y?.grid}<GridY automatic />{/if}
@@ -108,9 +111,6 @@ let hasLegend = $derived(color?.legend || symbol?.legend);
             {#if frame}<Frame />{/if}
             {#if children}{@render children(plot)}{/if}
         </svg>
-        <div class="overlay">
-            {#if overlay}{@render overlay(plot)}{/if}
-        </div>
     </div>
 
     {#if plot.options.title || plot.options.subtitle || header || hasLegend}
@@ -155,13 +155,19 @@ let hasLegend = $derived(color?.legend || symbol?.legend);
     figure .plot-header {
         order: 1;
     }
+    .overlay {
+        z-index: 2;
+    }
     h2,
     h3 {
         margin: 0;
     }
-    svg {
+    .plot-body {
         order: 2;
+    }
+    svg {
         overflow: visible;
+        z-index: 1;
     }
     figure .plot-footer {
         order: 3;

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/HTMLTooltip.svelte

@@ -0,0 +1,58 @@
+<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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.0.1-alpha.20",
+    "version": "0.0.1-alpha.22",
     "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",