svelte-plots-basic 3.1.5 → 3.2.0

package/README.md

@@ -15,8 +15,14 @@ These websites and web-applications use `svelte-plots-basic` library:
 
 ## News
 
-### 3.1.1-3.1.5
+### 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.
 * Added `markerSize` specification to legend items.
 * Small improvements and bug fixes.
 

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "svelte-plots-basic",
    "description": "Svelte components for creating simple plots",
-   "version": "3.1.5",
+   "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>

package/src/2d/XAxis.svelte

@@ -47,16 +47,17 @@
       // if ticks are provided check if they are valid and preprocess them
       let ticksProcessed, error = '';
       if (ticks) {
-         [ticksProcessed, error] = validateTicks(ticks, axes.limX())
+         [ticksProcessed, error] = validateTicks(ticks, axes.limX());
       }
 
       // if tick labels are provided check if they are valid and preprocess them
+      let tickLabelsProcessed;
       if (!error && tickLabels) {
-         [tickLabels, error] = validateTickLabels(tickLabels, ticksProcessed);
+         [tickLabelsProcessed, error] = validateTickLabels(tickLabels, ticksProcessed);
       }
 
       // activate axis
       axes.setXAxis({show, error: error, label: axisLabel, ticks: ticksProcessed,
-         labelHeight, showGrid, las, whole, tickLabels});
+         labelHeight, showGrid, las, whole, tickLabels: tickLabelsProcessed});
    });
 </script>

package/src/2d/YAxis.svelte

@@ -50,16 +50,17 @@
       // if ticks are provided check if they are valid and preprocess them
       let ticksProcessed, error = '';
       if (ticks) {
-         [ticksProcessed, error] = validateTicks(ticks, axes.limY())
+         [ticksProcessed, error] = validateTicks(ticks, axes.limY());
       }
 
       // if tick labels are provided check if they are valid and preprocess them
+      let tickLabelsProcessed;
       if (!error && tickLabels) {
-         [tickLabels, error] = validateTickLabels(tickLabels, ticksProcessed);
+         [tickLabelsProcessed, error] = validateTickLabels(tickLabels, ticksProcessed);
       }
 
       // activate axis
       axes.setYAxis({show, error: error, label: axisLabel, ticks: ticksProcessed,
-         labelHeight, showGrid, las, whole, tickLabels, pos: 4});
+         labelHeight, showGrid, las, whole, tickLabels: tickLabelsProcessed, pos: 4});
    });
 </script>

package/src/methods.js

@@ -885,8 +885,9 @@ export function getcolmap(n, alpha) {
  */
 export function getXAxisParams(limX, limY, scales, tY, axis) {
 
-   let ticks = axis.ticks;
-   let tickLabels = axis.tickLabels;
+
+   let ticks = axis.error ? null : axis.ticks ;
+   let tickLabels = axis.error  ? null : axis.tickLabels;
    let tickFactor = 0;
 
    // compute x-coordinates of the ticks or take the ones manually specified by user