svelte-plots-basic 2.5.5 → 2.5.7

package/package.json

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

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/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;
@@ -157,11 +170,12 @@ export function val2p(x, y, tX, tY, axes) {
  * @param {number} maxTickNum - maximum number of ticks to compute.
  * @param {boolean} round - round or not the fractions when computing nice numbers for the ticks.
  * @param {boolean} whole - should the ticks be a whole number.
+ * @param {Number} deltaFactor - percent of range to use as internal margins
  *
  * @returns {Array} an array with computed tick positions.
  *
  */
-export function getAxisTicks(ticks, lim, maxTickNum, round, whole) {
+export function getAxisTicks(ticks, lim, maxTickNum, round, whole, deltaFactor) {
 
    if (round === undefined || round === null) {
       round = true;
@@ -171,6 +185,10 @@ export function getAxisTicks(ticks, lim, maxTickNum, round, whole) {
       whole = false;
    }
 
+   if (deltaFactor === undefined) {
+      deltaFactor = 0.001;
+   }
+
    // if ticks are already provided do not recompute them
    if (ticks !== undefined) {
       if (Array.isArray(ticks)) {
@@ -188,7 +206,7 @@ export function getAxisTicks(ticks, lim, maxTickNum, round, whole) {
    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]) / 100;
+   const delta = (lim[1] - lim[0]) * deltaFactor;
    const localRange = lim[1] - lim[0] - delta;
    const exponent = Math.floor(Math.log10(localRange));
    const fraction =  1 / Math.pow(10, exponent - 1);