svelte-plots-basic 3.0.0 → 3.0.2

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.2",
    "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,8 +62,8 @@
    /* handler for mouse  events */
    function handleMouse(e, f) {
       if (f && e.target.id == "axes-box") {
-         const x = invTransformCoords([e.offsetX], tX)[0];
-         const y = invTransformCoords([e.offsetY], tY)[0];
+         const x = invTransformCoords([e.offsetX - left], tX)[0];
+         const y = invTransformCoords([e.offsetY - top], 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]],
@@ -363,8 +363,22 @@
             -webkit-user-select: none;
          }
 
+         .series-points1 text,
+         .series-points1 tspan {
+            dominant-baseline: middle;
+            alignment-baseline: middle;
+         }
+
+         .series-points2 text,
+         .series-points2 tspan {
+            dominant-baseline: central;
+            alignment-baseline: central;
+         }
+
          .series-text text,
          .series-text tspan {
+            dominant-baseline: middle;
+            alignment-baseline: middle;
             text-anchor: middle;
             user-select: none;
             -webkit-user-select: none;

package/src/2d/Points.svelte

@@ -68,10 +68,8 @@
        `fill:${faceColor};stroke-width:${lineWidth}px;stroke:${lineColor}; font-size:${markerSize}em;`
    );
 
-   const alignStyleStr = $derived(['◼', '⬥', '＋', '✳', '✕'].includes(markerSymbol)  ?
-       `dominant-baseline:central;alignment-baseline:mathematical;` :
-       `dominant-baseline:middle;alignment-baseline:middle;`
-   );
+   const className = $derived(['◼', '⬥', '＋', '✳', '✕'].includes(markerSymbol)  ? 'series-points2' : 'series-points1');
+
    // check if all coordinates are correct
    const isOk = $derived(x && y && x.length === y.length);
 </script>
@@ -80,7 +78,7 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <g onclick={(e) => handleClick(e, 'text', onclick)}
-   class="series series-points" style={textStyleStr + alignStyleStr} text-anchor="middle">
+   class="series series-points {className}" style={textStyleStr} text-anchor="middle">
    {#each x as v, i}
       <text x={x[i]} y={y[i]}>{markerSymbol}</text>
    {/each}