svelte-plots-basic 3.1.6 → 3.2.0

package/README.md

@@ -15,6 +15,11 @@ These websites and web-applications use `svelte-plots-basic` library:
 
 ## News
 
+### 3.2.0
+
+* Added mouse click handler option for `Heatmap.svelte` component (returns row and column index of the element).
+
+
 ### 3.1.1-3.1.6
 
 * Fixed bug which sometimes caused an error when manual text tick labels provided.

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "svelte-plots-basic",
    "description": "Svelte components for creating simple plots",
-   "version": "3.1.6",
+   "version": "3.2.0",
    "author": "Sergey Kucheryavskiy",
    "license": "MIT",
    "private": false,

package/src/2d/Heatmap.svelte

@@ -38,9 +38,11 @@
       values,                        // Matrix with values to show heatmap for
       breaks,                        // vector with breaks to distribute the values in
       colmap = null,                 // array with colors for each interval
+      onclick = null,                // callback for onclick (returns row and column indices of element)
    } = $props();
 
 
+
    // check that values are provided as a matrix
    let v = $derived(ismatrix(values) && values.nrows > 0 && values.ncols > 0 ? values : null);
 
@@ -110,19 +112,35 @@
    let rw = $derived(transformObjects([1], axes.tX()));
    let rh = $derived(transformObjects([1], axes.tY()));
 
+
+   // mouse click handler
+   function handleClick(e) {
+      if (!onclick || typeof onclick !== 'function') return;
+      const el = e.target;
+      if (el.tagName !== 'rect') return;
+      const r = el.getBoundingClientRect();
+      const x = r.x + r.width / 2;
+      const y = r.y - r.height / 2;
+      onclick(Math.round(y / r.height) - 1, Math.round(x / r.width) - 1)
+      e.stopPropagation();
+   }
+
+
    // check status
    let isOk = $derived(rx && ry && rx.length === ry.length);
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 {#if isOk}
-   <g class="heatmap" style="stroke:0;stroke-width:0px;">
+   <!-- svelte-ignore a11y_click_events_have_key_events -->
+   <g class="heatmap" style="stroke:0;stroke-width:0px;" onclick={handleClick}>
    <!-- loop over colors/intervals -->
    {#each lc as col, i}
       <g title="heatmap-group" style="fill:{col};">
       {#if rx[i].length > 0}
          <!-- loop over elements which fall into the interval -->
          {#each rx[i] as v, j}
-            <rect x={rx[i][j]} y={ry[i][j]} width={rw} height={rh} />
+            <rect x={rx[i][j]} y={ry[i][j]} width={rw} height={rh}/>
          {/each}
       {/if}
       </g>