svelte-plots-basic 2.5.7 → 2.5.8

package/package.json

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

package/src/2d/Axes.svelte

@@ -8,7 +8,7 @@
 	import { setContext, createEventDispatcher, onMount, onDestroy } from 'svelte';
 	import { writable } from 'svelte/store';
    import { isvector, vector, Vector } from 'mdatools/arrays';
-   import { roundCoords, getScale, downloadSVG, downloadPNG, createPngBlob } from '../Utils.js';
+   import { roundCoords, getScale, downloadSVG, downloadPNG, createPngBlob, getAxisScale } from '../Utils.js';
 
 
    /*****************************************/
@@ -50,14 +50,22 @@
       'xlarge': 60
    }
 
-   // number of ticks along each axis
-   const TICK_NUM = {
+   // number of x-ticks along each axis
+   const XTICK_NUM = {
       'small': 5,
       'medium': 8,
       'large': 12,
       'xlarge': 15
    };
 
+   // number of y-ticks along each axis
+   const YTICK_NUM = {
+      'small': 6,
+      'medium': 10,
+      'large': 14,
+      'xlarge': 18
+   };
+
    // size of ticks
    const TICK_SIZE = {
       'small': 4,
@@ -246,6 +254,8 @@
    /* Storage to share with children        */
    /*****************************************/
 
+   const xscale = writable('medium');                                 // scale factor for x-axis (influences number of ticks)
+   const yscale = writable('medium');                                 // scale factor for y-axis (influences number of ticks)
    const scale = writable('medium');                                  // scale factor (how big the shown plot is)
    const isOk = writable(false);                                      // are axes ready for drawing
    const xLim = writable(limX);                                       // validated values for x-axis limits
@@ -266,6 +276,8 @@
 
       // variables
       scale: scale,
+      xscale: xscale,
+      yscale: yscale,
       isOk: isOk,
       xLim: xLim,
       yLim: yLim,
@@ -277,7 +289,8 @@
       // constants
       LINE_STYLES: LINE_STYLES,
       LABELS_MARGIN: LABELS_MARGIN,
-      TICK_NUM: TICK_NUM,
+      XTICK_NUM: XTICK_NUM,
+      YTICK_NUM: YTICK_NUM,
       TICK_SIZE: TICK_SIZE,
       MARKER_SYMBOLS: MARKER_SYMBOLS,
       LEGEND_FONT_SIZE: LEGEND_FONT_SIZE
@@ -347,7 +360,11 @@
       for (let entry of entries) {
          const pcr = plotElement.getBoundingClientRect();
          const scl = getScale(pcr.width, pcr.height);
+         const xscl = getAxisScale(pcr.width);
+         const yscl = getAxisScale(pcr.height);
          scale.update(x => scl);
+         xscale.update(x => xscl);
+         yscale.update(x => yscl);
 
          const m = PLOT_FONT_SIZE[scl] * 1.5;
          left = xLabel && xLabel !== '' ? m : 0;

package/src/2d/XAxis.svelte

@@ -1,9 +1,9 @@
 <script>
-   /****************************************************
-   * X-Axis                                            *
-   * --------------------                              *
-   * shows x-axis and its elements (ticks, grid, etc.) *
-   *****************************************************/
+   /*****************************************************/
+   /* X-Axis                                            */
+   /* --------------------                              */
+   /* shows x-axis and its elements (ticks, grid, etc.) */
+   /*****************************************************/
 
    import { getContext } from 'svelte';
    import { Vector, vector } from 'mdatools/arrays';
@@ -44,6 +44,7 @@
    const xLim = axes.xLim;
    const yLim = axes.yLim;
    const scale = axes.scale;
+   const xscale = axes.xscale;
    const isOk = axes.isOk;
    const tY = axes.tY;
 
@@ -58,7 +59,7 @@
    $: if ($isOk) {
 
       // compute x-coordinates of the ticks or take the ones manually specified by user
-      const ticksX = getAxisTicks(ticks, $xLim, axes.TICK_NUM[$scale], true, whole);
+      const ticksX = getAxisTicks(ticks, $xLim, axes.XTICK_NUM[$xscale], true, whole);
       const tickNum = ticksX.length;
 
       // compute tick y-coordinates (up and bottom)

package/src/2d/YAxis.svelte

@@ -44,6 +44,7 @@
    const xLim = axes.xLim;
    const yLim = axes.yLim;
    const scale = axes.scale;
+   const yscale = axes.yscale;
    const isOk = axes.isOk;
    const tX = axes.tX;
 
@@ -58,7 +59,7 @@
    $: if ($isOk) {
 
       // compute x-coordinates of the ticks or take the ones manually specified by user
-      const ticksY = getAxisTicks(ticks, $yLim, axes.TICK_NUM[$scale], true, whole);
+      const ticksY = getAxisTicks(ticks, $yLim, axes.YTICK_NUM[$yscale], true, whole);
       const tickNum = ticksY.length;
 
       // compute tick y-coordinates (up and bottom)

package/src/Utils.js

@@ -206,13 +206,13 @@ export function getAxisTicks(ticks, lim, maxTickNum, round, whole, deltaFactor)
    if (typeof(lim) !== "object" || lim[0] === undefined || lim[1] === undefined) return undefined;
 
    // get range as a nice number and compute min, max and steps for the tick sequence
-   const delta = (lim[1] - lim[0]) * deltaFactor;
-   const localRange = lim[1] - lim[0] - delta;
+   const delta = Math.abs((lim[1] - lim[0])) * deltaFactor;
+   const localRange = lim[1] - lim[0] - 2 * delta;
    const exponent = Math.floor(Math.log10(localRange));
    const fraction =  1 / Math.pow(10, exponent - 1);
    const range = Math.round(localRange * fraction) / fraction;
 
-   let tickSpacing = niceNum(range / (maxTickNum - 1), round);
+   let tickSpacing = niceNum(range / maxTickNum, false);
    if (whole) {
       if (tickSpacing < 1) tickSpacing = 1;
       tickSpacing = Math.round(tickSpacing);
@@ -310,6 +310,19 @@ export function getScale(width, height) {
    return "xlarge";
 }
 
+/**
+ * Computes a scale level for single axis.
+ *
+ * @param {numeric} size - width or height of plotting area in pixels.
+ * @returns {text} the scale level ("small", "medium" or "large").
+ *
+ */
+export function getAxisScale(width, size) {
+   if (width < 400.2) return "small";
+   if (width < 700.2) return "medium";
+   if (width < 900.2) return "large";
+   return "xlarge";
+}
 
 /*************************************************************/
 /* Functions needed to adjust DPI of resulting PNG image     */