svelte-plots-basic 3.0.7 → 3.1.1

package/README.md

@@ -15,6 +15,11 @@ These websites and web-applications use `svelte-plots-basic` library:
 
 ## News
 
+### 3.1.0
+
+* Added possibility to reverse the axis, just swap the limit values.
+
+
 ### 3.0.0
 
 New major release (v. 3.0.0, released 20/01/2025) introduces many breaking changes as the library has been re-written using Svelte 5. If you use previous versions of `svelte-plots-basic` in your projects, and do not want to change anything, stick to the latest 2.x.x version.
@@ -77,7 +82,7 @@ Properties `limX` and `limY` define limits of the coordinates system in *plot's
 </style>
 ```
 
-These two properties must always be provided as an array with two values, and the first value must be smaller than the second. Both properties have default value of `[0, 1]`.
+These two properties must always be provided as an array with two values (left and right). If the first value is larger than the second one, the corresponding axis will be reversed. Both properties have default value of `[0, 1]`.
 
 Second important property is `margins`, it defines margins around the plotting area — the one which will be used for positioning of actual plot elements. Margins should be provided as an array with four values: relative margins for bottom, left, top and right parts of the plot.
 

package/package.json

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

package/src/2d/Axes.svelte

@@ -130,8 +130,6 @@
    const isOk = $derived(
       checkArray(limX, 2) &&
       checkArray(limY, 2) &&
-      limX[0] < limX[1] &&
-      limY[0] < limY[1] &&
       width > (pxMargins[1] + pxMargins[3]) &&
       height > (pxMargins[0] + pxMargins[2])
    );

package/src/methods.js

@@ -154,6 +154,7 @@ export function getTickLabels(ticks) {
    if (decNum <= 2) {
       return [0, Array.from(ticks).map(v => v.toFixed(decNum))];
    }
+
    tickFactor = decNum - 2;
    decNum = 2;
 
@@ -284,12 +285,15 @@ export function validateTicks(ticks, lim) {
       return [null, 'ticks values must be unique.'];
    }
 
+   // swap limits if necessary
+   const left = lim[0] < lim[1] ? lim[0] : lim[1];
+   const right = lim[0] < lim[1] ? lim[1] : lim[0];
+
    // check if provided ticks values are outside the axis limit range continue with automatic ticks
-   const newTicks = ticks.filter(x => x >= lim[0] & x <= lim[1]);
+   const newTicks = ticks.filter(x => x >= left & x <= right);
    if (newTicks.length !== ticks.length) {
       return [null, 'some of ticks values are outside axis limits.'];
    }
-
    return [newTicks, ''];
 }
 
@@ -307,7 +311,7 @@ export function validateTicks(ticks, lim) {
  * @returns {Array} an array with computed tick positions.
  *
  */
-export function getAxisTicks(ticks, lim, maxTickNum, round, whole, deltaFactor) {
+export function getAxisTicks(ticks, limIn, maxTickNum, round, whole, deltaFactor) {
 
    if (round === undefined || round === null) {
       round = true;
@@ -321,6 +325,9 @@ export function getAxisTicks(ticks, lim, maxTickNum, round, whole, deltaFactor)
       deltaFactor = 0.0001;
    }
 
+   // correct limits internally if they are reverse
+   const lim = limIn[0] < limIn[1] ? limIn : [limIn[1], limIn[0]];
+
    // if ticks are already provided do not recompute them
    // the validation is done in corresponding component, so no need to do it again
    if (ticks) return ticks;
@@ -935,11 +942,14 @@ export function getXAxisParams(limX, limY, scales, tY, axis) {
    const tfLabel = getTickFactorLabel(tickFactor);
 
    // hide last label if it is too close to tick factor
-   const dtl = Math.abs(limX[1] - ticksX.v[ticksX.length - 1]);
-   const dl = limX[1] - limX[0];
+   const n = tickLabels.length;
+   const dtl = Math.abs(limX[1] > limX[0] ? limX[1] - ticksX.v[n - 1] : limX[1] - ticksX.v[0]);
+   const dl = Math.abs(limX[1] - limX[0]);
    const dt = Math.abs(ticksX.v[1] - ticksX.v[0]);
-   if (tfLabel.length > 0 && dtl < dl * 0.10 && dtl < dt * 0.5) {
-      tickLabels[tickLabels.length - 1] = ' ';
+
+  if (tfLabel.length > 0 && dtl < dl * 0.10 && dtl < dt * 0.5) {
+      const pos = limX[1] > limX[0] ? n - 1 : 0
+      tickLabels[pos] = ' ';
    }
 
    return {grid, axisLine, tickCoords, tfCoords, ticks, tickLabels, tickFactor, tfLabel};
@@ -1014,10 +1024,21 @@ export function getYAxisParams(limX, limY, scales, tX, axis) {
    const tfLabel = getTickFactorLabel(tickFactor);
 
    // hide last label if it is too close to tick factor
-   if (tfLabel.length > 0 && (limY[1] - ticksY.v[ticksY.length - 1]) < ((limY[1] - limY[0]) * 0.05)) {
-      tickLabels[tickLabels.length - 1] = ' ';
+   const n = tickLabels.length;
+   const dtl = Math.abs(limY[1] > limY[0] ? limY[1] - ticksY.v[n - 1] : limY[1] - ticksY.v[0]);
+   const dl = Math.abs(limY[1] - limY[0]);
+   const dt = Math.abs(ticksY.v[1] - ticksY.v[0]);
+
+  if (tfLabel.length > 0 && dtl < dl * 0.10 && dtl < dt * 0.5) {
+      const pos = limY[1] > limY[0] ? n - 1 : 0
+      tickLabels[pos] = ' ';
    }
 
+   // old version of the code above - remove after testing
+   // if (tfLabel.length > 0 && (limY[1] - ticksY.v[ticksY.length - 1]) < ((limY[1] - limY[0]) * 0.05)) {
+   //    tickLabels[tickLabels.length - 1] = ' ';
+   // }
+
    return {grid, axisLine, tickCoords, tfCoords, ticks, tickLabels, tickFactor, tfLabel};
 }