svelte-plots-basic 3.0.0 → 3.0.1

package/README.md

@@ -373,7 +373,7 @@ Lines components is similar to `<Points>` but instead of showing markers, it con
 </script>
 
 <div class="plot-wrapper">
-<Axes limX={[0, 6]} limY={[0, 10]} >
+<Axes limX={[-10, 10]} limY={[-2, 20]} >
 
    <Lines {xValues} {yValues} lineWidth={2} lineColor="#ff4422" />
 
@@ -419,20 +419,20 @@ Here is an example of using the component with all available parameters:
    import { Vector, cbind } from 'mdatools/arrays';
 
    // create x-values
-   const x = Vector.seq(0, 15, 0.1);
+   const xValues = Vector.seq(0, 15, 0.1);
 
    // compute y-values for four lines
-   const y1 = x.apply(v => Math.sin(v));
+   const y1 = xValues.apply(v => Math.sin(v));
    const y2 = y1.add(0.2);
    const y3 = y2.add(0.2);
    const y4 = y3.add(0.2);
 
    // combine y-values so they form columns of matrix Y
-   const Y = cbind(y1, y2, y3, y4);
+   const yValues = cbind(y1, y2, y3, y4);
 </script>
 
 <div class="plot-wrapper">
-<Axes limX={[0, 6]} limY={[0, 10]} >
+<Axes limX={[-1, 16]} limY={[-2,2]} >
 
    <Multilines {xValues} {yValues} lineWidth={2} lineColor="#ff4422" />
 
@@ -465,7 +465,7 @@ Use this component if you want to show a series of rectangles. The component has
    const left = [-3, -2, -1, 0, 1, 2, 3];
    const top = [9, 8, 7, 6, 7, 8, 9];
    const width = [0.75, 0.75, 0.75, 0.75, 0.75, 0.75, 0.75];
-   const height = [8, 6, 7, 5, 6, 7, 8];
+   const height = [8, 6, 4, 2, 4, 6, 8];
 
 </script>
 

package/package.json

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

package/src/2d/Axes.svelte

@@ -33,8 +33,7 @@
    import { downloadSVG, downloadPNG, copyToClipboard, checkArray, getScale, getAxisScale, getXAxisParams, getYAxisParams,
             transformCoords, getColormapLegendParams, getColormapLegendCoords, getTickFactorLabel,
             getGroupLegendCoords, text2svg,
-            invTransformCoords,
-            invTransformObjects} from '../methods.js';
+            invTransformCoords } from '../methods.js';
 
    import AxisLines from './AxisLines.svelte';
    import AxisTickLabels from './AxisTickLabels.svelte';
@@ -63,7 +62,7 @@
    /* handler for mouse  events */
    function handleMouse(e, f) {
       if (f && e.target.id == "axes-box") {
-         const x = invTransformCoords([e.offsetX], tX)[0];
+         const x = invTransformCoords([e.offsetX - fontSize * 1.5], tX)[0];
          const y = invTransformCoords([e.offsetY], tY)[0];
          f(x, y);
       }
@@ -137,8 +136,9 @@
       height > (pxMargins[0] + pxMargins[2])
    );
 
-
    // transformation matrix for x
+   // fw: a - tA[1]) * tA[0] + tA[2]
+   // in: a - tA[2]) / tA[0] + tA[1]
    const tX = $derived(!isOk ? {'coords': [1, 0, 0], 'objects': [1, 0, 0]} :
       {
          'coords':  [ axisWidth / (limX[1] - limX[0]), limX[0], pxMargins[1]],