svelte-plots-basic 4.1.0 → 4.1.2

package/NEWS.md

@@ -2,6 +2,17 @@
 
 This file contains the full release history of `svelte-plots-basic`. The [README](README.md) shows only the most recent releases.
 
+## 4.1.2
+
+* Fixed `Bars` on a reversed x-axis: bars are now centred on their x-values. In 4.1.1 they were drawn shifted by one bar width.
+* Fixed `Bars` and `Rectangles` on a reversed y-axis, where they were not shown.
+* Fixed `Heatmap` on a reversed x- or y-axis, where its cells were not shown.
+* Documented how `Rectangles` positions are interpreted on reversed axes: `left` and `top` are the sides drawn on the left and on top of the plot, so on a reversed x-axis `left` is the larger x-value and on a reversed y-axis `top` is the smaller y-value. Output on axes that are not reversed is unchanged.
+
+## 4.1.1
+
+* Fixed `Rectangles` on a reversed x-axis, where they were not shown. The rectangle width is now always positive and rectangles extend to the right of `left` on screen.
+
 ## 4.1.0
 
 * Added a `svelte` export condition to every entry point, so bundlers recognize the package as a Svelte library. This matters when `prebundleSvelteLibraries` is disabled, where the components must be excluded from dependency pre-bundling.

package/README.md

@@ -15,6 +15,17 @@ These websites and web-applications use `svelte-plots-basic` library:
 
 ## News
 
+### 4.1.2
+
+* Fixed `Bars` on a reversed x-axis: bars are now centred on their x-values. In 4.1.1 they were drawn shifted by one bar width.
+* Fixed `Bars` and `Rectangles` on a reversed y-axis, where they were not shown.
+* Fixed `Heatmap` on a reversed x- or y-axis, where its cells were not shown.
+* Documented how `Rectangles` positions are interpreted on reversed axes: `left` and `top` are the sides drawn on the left and on top of the plot, so on a reversed x-axis `left` is the larger x-value and on a reversed y-axis `top` is the smaller y-value. Output on axes that are not reversed is unchanged.
+
+### 4.1.1
+
+* Fixed `Rectangles` on a reversed x-axis, where they were not shown. The rectangle width is now always positive and rectangles extend to the right of `left` on screen.
+
 ### 4.1.0
 
 * Added a `svelte` export condition to every entry point, so bundlers recognize the package as a Svelte library. This matters when `prebundleSvelteLibraries` is disabled, where the components must be excluded from dependency pre-bundling.
@@ -28,30 +39,6 @@ These websites and web-applications use `svelte-plots-basic` library:
 * Made subscripts, superscripts, and tick-factor labels consistent across modern browsers.
 * Updated to `mdatools ^1.5.0`, now declared as a peer dependency to prevent incompatible duplicate instances.
 
-### 3.4.0
-
-* Added the `plotActions` property to `Axes` for adding custom buttons to the download panel.
-* Added advanced validation for axis limits, text-label positions, heatmap breaks, and custom plot actions.
-* Fixed text-label positioning and rotation when individual positions are provided.
-* Fixed heatmaps with automatic, custom, or constant-value breaks.
-* Added support for rectangular and constant-height 3D meshes.
-* Improved PNG, SVG, and clipboard export by serializing a clone instead of modifying the visible plot.
-* Fixed the advanced PNG export dialog so a default resolution is always selected, falling back to 300 dpi when necessary.
-* Prevented plot controls from submitting an enclosing HTML form.
-* Added package validation before publishing and synchronized Svelte 5 peer-dependency metadata.
-* Fixed conditionally rendered axes, boxes, and legends so their parent state is cleared when they are removed.
-* Improved heatmap interval processing and added automatically generated colormaps with more than 16 colors.
-* Fixed `TextLegend` positioning at zero and strengthened finite-range validation for 3D axes.
-* Reduced reactive and repeated allocation overhead for axis configuration, text measurement, PNG export, and colormap generation.
-* Added dependency-free regression tests and made them run automatically before packaging.
-* Documented the trust requirements for labels rendered as SVG/HTML markup.
-
-### 3.3.0
-
-* Added advanced "save as PNG" option where user can select size and resolution of the image as well as change the filename.
-* several small improvements and bug fixes.
-
-
 Notes for earlier releases, including the list of breaking changes introduced in 3.0.0 when the library was re-written using Svelte 5, are available in the [full release notes](https://github.com/svkucheryavski/svelte-plots-basic/blob/main/NEWS.md).
 
 

package/package.json

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

package/src/2d/Bars.svelte

@@ -27,6 +27,7 @@
    ```
 -->
 <script>
+   import { getContext } from 'svelte';
    import { Vector } from 'mdatools/arrays';
    import { Colors } from '../constants';
    import { checkCoords } from '../methods';
@@ -74,6 +75,13 @@
       return {provided: true, value};
    });
 
+   // get axes context, on reversed x-axis the edge drawn on the left is the larger value
+   const axes = getContext('axes');
+   const dir = $derived(Math.sign(axes.tX().objects[0]) || 1);
+
+   // on reversed y-axis the edge drawn on top is the smaller value
+   const dirY = $derived(Math.sign(axes.tY().objects[0]) || 1);
+
    const x = $derived.by(() => {
       if (bw === null || exactWidth === null) return null;
       const xv = checkCoords(xValues, 'BarSeries');
@@ -100,7 +108,7 @@
       const left = Vector.zeros(n);
       const width = Vector.zeros(n);
       for (let i = 0; i < n; i++) {
-         left.v[i] = xv.v[i] - whalf;
+         left.v[i] = xv.v[i] - dir * whalf;
          width.v[i] = w;
       }
 
@@ -122,7 +130,7 @@
 
       for (let i = 0; i < n; i++) {
          const v = yv.v[i];
-         top.v[i] = (v > 0 ? v : 0);
+         top.v[i] = dirY > 0 ? (v > 0 ? v : 0) : (v < 0 ? v : 0);
          height.v[i] = Math.abs(v);
       }
 

package/src/2d/Heatmap.svelte

@@ -149,6 +149,12 @@
    let t = $derived(v ? seq(v.nrows) : null);
    let lt = $derived(l && t ? expandgrid(t, l) : null);
 
+   // get axes context, on reversed axes the edge drawn on the left is the larger x value
+   // and the edge drawn on top is the smaller y value
+   const axes = getContext('axes');
+   const dirX = $derived(Math.sign(axes.tX().objects[0]) || 1);
+   const dirY = $derived(Math.sign(axes.tY().objects[0]) || 1);
+
    // compute world coordinates of the elements for each interval in world coordinates
    let wc = $derived.by( () => {
       if (!lt || !lb || !lc) return null;
@@ -173,8 +179,8 @@
          const i = findInterval(vj, llb);
          if (i === -1) continue;
 
-         rl[i].push(left.v[j] - 0.5);
-         rt[i].push(v.nrows - top.v[j] + 1.5);
+         rl[i].push(dirX > 0 ? left.v[j] - 0.5 : left.v[j] + 0.5);
+         rt[i].push(dirY > 0 ? v.nrows - top.v[j] + 1.5 : v.nrows - top.v[j] + 0.5);
          rr[i].push(top.v[j]);
          rc[i].push(left.v[j]);
       };
@@ -182,8 +188,7 @@
    });
 
 
-   // get axes context and compute screen coordinates
-   const axes = getContext('axes');
+   // compute screen coordinates
    let rx = $derived(wc ? wc.rl.map(v => v.length >  0 ? transformCoords(v, axes.tX()) : []) : null);
    let ry = $derived(wc ? wc.rt.map(v => v.length >  0 ? transformCoords(v, axes.tY()) : []) : null);
    let rw = $derived(transformObjects([1], axes.tX()));
@@ -219,7 +224,7 @@
       {#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} data-row={wc.rr[i][j]} data-col={wc.rc[i][j]}/>
+            <rect x={rx[i][j]} y={ry[i][j]} width={Math.abs(rw[0])} height={Math.abs(rh[0])} data-row={wc.rr[i][j]} data-col={wc.rc[i][j]}/>
          {/each}
       {/if}
       </g>

package/src/2d/Rectangles.svelte

@@ -12,6 +12,9 @@
    - `className` - CSS class name for the rectangles group, default: `'series-rect'`.
    - `onclick` - function (callback) to be called when user clicks on any rectangle.
 
+   Width and height are always non-negative and rectangles extend from `left` to the right and
+   from `top` downwards on screen. So on a reversed x-axis `left` must be the larger value of the
+   two sides, and on a reversed y-axis `top` must be the smaller one.
 
    Example:
    ```svelte
@@ -104,7 +107,7 @@
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <g class="series {className}"  style={barsStyleStr} onclick={(e) => handleClick(e, 'rect', onclick)} >
    {#each left as v, i}
-      <rect x={rx[i]} y={ry[i]} width={rw[i]} height={rh[i]} />
+      <rect x={rx[i]} y={ry[i]} width={Math.abs(rw[i])} height={Math.abs(rh[i])} />
    {/each}
    </g>
 {/if}