svelte-plots-basic 2.5.6 → 2.5.8

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "svelte-plots-basic",
    "description": "Svelte components for creating simple plots",
-   "version": "2.5.6",
+   "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/Axis.svelte

@@ -7,10 +7,11 @@
    *****************************************************/
 
    import { Colors } from '../Colors.js';
+   import { getTickFactorLabel } from '../Utils.js';
+
    import AxisLines from './AxisLines.svelte';
    import AxisTickLabels from './AxisTickLabels.svelte';
 
-
    /*****************************************/
    /* Input parameters                      */
    /*****************************************/
@@ -32,14 +33,6 @@
    export let textColor = Colors.DARKGRAY;   // color of tick labels
 
    // generate text for tick factor label
-   function getTickFactorLabel(tf) {
-      if (tf === 0) return '';
-      if (tf < 0) {
-         return `&times;10<tspan dy="-0.5em">${(tf).toString()}</tspan>`;
-      } else {
-         return `&times;10<tspan dy="-0.5em">${(tf).toString()}</tspan>`;
-      }
-   }
 </script>
 
 <g class="mdaplot__axis {className}">

package/src/2d/ColormapLegend.svelte

@@ -6,7 +6,7 @@
    **********************************************************/
 
    import { getContext } from 'svelte';
-   import { checkCoords } from '../Utils';
+   import { checkCoords, getTickLabels, getTickFactorLabel } from '../Utils';
    import { Vector, isvector } from 'mdatools/arrays';
 
 
@@ -44,17 +44,21 @@
 
    // check colormap values
    $: if (!colmap || !(colmap.length === breaks.length - 1 || colmap.length === breaks.length )) {
-      console.log(colmap)
-      console.log(breaks)
-      console.log(labels)
       throw new Error('ColormapLegend: number of color values in colormap does not match number of intervals defined by breaks.');
    }
 
    // define local variables for breaks and prepare breaks labels
    $: lBreaks = isvector(breaks) ? breaks.v : breaks;
-   $: lLabels = labels && labels.length === lBreaks.length ?
-         labels :
-         Array.from(lBreaks).map(v => v.toFixed(decNum).toString());
+
+   let breakFactor, breakLabels;
+   $: if (lBreaks) {
+      [breakFactor, breakLabels] = getTickLabels(lBreaks);
+   } else {
+      breakFactor = null;
+      breakLabels = null;
+   }
+
+   $: lLabels = labels && labels.length === lBreaks.length ? labels : breakLabels;
 
    // get axes context and reactive variables needed to compute coordinates
    const axes = getContext('axes');
@@ -80,7 +84,7 @@
          const height = axesHeight * HEIGHT_RATIO;
 
          // compute elements size and position
-         const elWidth = width / n;
+         const elWidth = width / (n + (breakFactor !== 0));
          const left = $xLim[0] + axesWidth * (1 - WIDTH_RATIO) * 0.5 ;
          const elTop = $yLim[1] - height * TOP_MARGIN;
 
@@ -103,7 +107,14 @@
    {#if !isCentered}
    <text x={rx[n]} y={ry} dx={0} dy={rh * 1.25} dominant-baseline="hanging" fill={labelColor} font-size="{fontSize}em" text-anchor="middle">{@html lLabels[n]}</text>
    {/if}
+
+   {#if breakFactor !== 0}
+   <text x={rx[n] + rw[0] * 0.85} y={ry[0] + rh * 2.2} dx={0} dy={0} dominant-baseline="hanging" fill={labelColor} font-size="{fontSize}em" text-anchor="middle">{@html getTickFactorLabel(breakFactor)}</text>
+   {/if}
+
    </g>
+
+
 {/if}
 
 

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

@@ -1,12 +1,25 @@
 import { cbind, vector, isvector, Vector } from 'mdatools/arrays';
 import { min, max, diff } from 'mdatools/stat';
 
+
+/**
+ * Creates label for a tick factor.
+ *
+ * @param {Number} tf - tick factor value (negative or positive)
+ * @returns
+ */
+export function getTickFactorLabel(tf) {
+   if (tf === 0) return '';
+   return `<tspan>&times;10</tspan><tspan baseline-shift="super">${(tf).toString()}</tspan>`;
+}
+
+
 /**
  * Trim number leaving only significant decimals.
  * @param {number} num
  * @returns trimmed number
  */
-function trimNum(num) {
+export function trimNum(num) {
 
    // check if number is whole — return as is
    if (num === Math.round(num)) return num;
@@ -193,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);
@@ -297,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     */