svelte-plots-basic 2.0.1 → 2.1.0

package/README.md

@@ -4,7 +4,13 @@ The library is under development and breaking changes may occur in the coming ve
 
 ## News
 
-New release (v. 2.0.0) introduces many breaking changes as the library was completely re-written. If you use previous versions of `svelte-plots-basic` in your projects, and do not want to change anything, stick to the latest 1.x.x version (v. 1.1.4).
+New major release (v. 2.0.0) introduces many breaking changes as the library was completely re-written. If you use previous versions of `svelte-plots-basic` in your projects, and do not want to change anything, stick to the latest 1.x.x version (v. 1.1.4).
+
+### 2.1.0
+
+* Added new elements, `Heatmap` and `ColormapLegend`.
+* Improvements to tick labels, in particular if values are too small (< 0.01) or too large (>99) the values are adjusted and a common factor is shown at the end of axis. This is applied only to automatic ticks, manually provided ticks and tick labels are shown as is.
+* Small improvements and bug fixes.
 
 ## Description
 

package/package.json

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

package/src/2d/Axis.svelte

@@ -24,10 +24,22 @@
    export let grid = [];                     // array with grid coordinates
    export let axisLine = [];                 // array with coordinates of main axis line
    export let tickCoords = [];               // array with axis tick coordinates
+   export let tfCoords = [];                 // array with tick factor coordinates
+   export let tickFactor = 0;                // tick factor (as power of 10)
 
    export let lineColor = Colors.DARKGRAY;   // color of main axis line
    export let gridColor = Colors.MIDDLEGRAY; // color of grid lines
    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 baseline-shift = "super">${(tf).toString()}</tspan>`;
+      } else {
+         return `&times;10<tspan baseline-shift = "super">${(tf).toString()}</tspan>`;
+      }
+   }
 </script>
 
 <g class="mdaplot__axis {className}">
@@ -44,7 +56,12 @@
 
    <!-- labels -->
    {#if tickCoords.length === 2 && tickLabels.length === tickCoords[1][0].length}
-   <AxisTickLabels {las} {pos} {tickCoords} {tickLabels} {textColor}/>
+   <AxisTickLabels {las} {pos} {tickCoords} {tickLabels} {textColor} />
+   {/if}
+
+   <!-- tick factor -->
+   {#if tickFactor !== 0}
+   <AxisTickLabels {pos} tickCoords={tfCoords} tickLabels={[getTickFactorLabel(tickFactor)]} {textColor} />
    {/if}
 </g>
 

package/src/2d/Bars.svelte

@@ -44,7 +44,7 @@
 
       // compute maximum bar width and position of left side
       const xv = checkCoords(xValues, 'BarSeries');
-      const w = max(diff(xv)) * barWidth;
+      const w = max(diff(xv.v)) * barWidth;
       left = xv.subtract(w/2);
       width = Vector.fill(w, xv.length);
    }

package/src/2d/ColormapLegend.svelte

@@ -0,0 +1,100 @@
+<script>
+   /*********************************************************
+   * ColormapLegend                                         *
+   * --------------------                                   *
+   * shows color map legend on a plot                       *
+   **********************************************************/
+
+   import { getContext } from 'svelte';
+   import { checkCoords } from '../Utils';
+   import { Vector, isvector } from 'mdatools/arrays';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+   export let breaks;                  // vector with breaks for color intervals
+   export let colmap;                  // array with colors for each interval
+   export let decNum = 1;              // number of decimals to show the interval boundaries with
+   export let labels = null;           // optional vector with labels for interval boundaries
+   export let labelColor = '#909090';  // color of labels
+   export let fontSize = 0.85;         // font size for labels in em
+
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   // constant parameters
+   const WIDTH_RATIO = 0.80;    // legend will span 80% of plot width
+   const HEIGHT_RATIO = 0.02;   // legend will span 2% of plot height
+   const TOP_MARGIN = 0.25;     // legend top margin is 25% of its height
+
+   // height of the legend elements in pixels
+   const EL_HEIGHTS_PX = {'small': 5, 'medium': 10, 'large': 15, 'xlarge': 20};
+
+   // check breaks values
+   $: if (!breaks || breaks.length < 2) {
+      throw new Error('ColormapLegend: breaks values must be provided.');
+   }
+
+   // check colormap values
+   $: if (!colmap || colmap.length !== breaks.length - 1) {
+      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());
+
+   // get axes context and reactive variables needed to compute coordinates
+   const axes = getContext('axes');
+   const tX = axes.tX;
+   const tY = axes.tY;
+   const xLim = axes.xLim;
+   const yLim = axes.yLim;
+   const scale = axes.scale;
+   const isOk = axes.isOk;
+
+   // number of elements
+   $: n = colmap.length;
+
+   // compute screen coordinates of the elements
+   let rx, ry, rw, rh = undefined;
+   $: {
+      if ($isOk) {
+         // compute size of the whole block in plot coordinates
+         const axesWidth = $xLim[1] - $xLim[0];
+         const axesHeight = $yLim[1] - $yLim[0];
+         const width = axesWidth * WIDTH_RATIO;
+         const height = axesHeight * HEIGHT_RATIO;
+
+         // compute elements size and position
+         const elWidth = width / n;
+         const left = $xLim[0] + axesWidth * (1 - WIDTH_RATIO) * 0.5 ;
+         const elTop = $yLim[1] - height * TOP_MARGIN;
+
+         // compute screen coordinates and sized
+         ry = axes.transform(checkCoords([elTop], 'Rectangles'), $tY.coords);
+         rx = axes.transform(Vector.seq(0, n).apply(v => left + v * elWidth), $tX.coords);
+         rw = axes.transform([elWidth], $tX.objects);
+         rh = EL_HEIGHTS_PX[$scale];
+      }
+   };
+</script>
+
+{#if $isOk && rx.length > 0}
+   <g class="series colormap_legend" style="stroke:0;stroke-width:0px;">
+   {#each colmap as col, i}
+      <rect x={rx[i]} y={ry} width={rw} height={rh} fill="{col}"/>
+      <text x={rx[i]} y={ry} dx={0} dy={rh * 1.25} alignment-baseline="hanging" fill={labelColor} font-size="{fontSize}em" text-anchor="middle">{@html lLabels[i]}</text>
+   {/each}
+   <text x={rx[n]} y={ry} dx={0} dy={rh * 1.25} alignment-baseline="hanging" fill={labelColor} font-size="{fontSize}em" text-anchor="middle">{@html lLabels[n]}</text>
+   </g>
+{/if}
+
+
+

package/src/2d/Heatmap.svelte

@@ -0,0 +1,109 @@
+<script>
+   /*********************************************************
+   * Heatmap                                                *
+   * --------------------                                   *
+   * shows matrix values as a heatmap                       *
+   **********************************************************/
+
+   import { getContext } from 'svelte';
+   import { Vector, ismatrix } from 'mdatools/arrays';
+   import { expandgrid } from 'mdatools/misc';
+   import { split } from 'mdatools/stat';
+
+   import { getcolmap } from '../Colors';
+   import { checkCoords } from '../Utils';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+   export let values;                        // Matrix with values to show heatmap for
+   export let breaks = null;                 // vector with breaks to distribute the values in
+   export let colmap = null;                 // array with colors for each interval
+
+   export let className = 'series_heatmap';  // CSS class name of the SVG group
+   export let title = '';                    // title of the rectangle series (reserved for future use)
+
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   // check values
+   $: if (!ismatrix(values) || values.v.length === 0) {
+      throw new Error('Heatmap: parameter "values" must be a matrix.');
+   }
+
+   // check breaks values
+   $: if (!lBreaks || lBreaks.length < 2) {
+      throw new Error('Heatmap: breaks values are neither defined nor can not be computed.');
+   }
+
+   // check colormap values
+   $: if (!lColmap || lColmap.length !== lBreaks.length - 1) {
+      throw new Error('Heatmap: number of color values in colormap does not match number of intervals defined by breaks.');
+   }
+
+   // define local variables for breaks and colormap
+   $: lBreaks = breaks ? breaks.v : split(values.v, 13).v;
+   $: lColmap = colmap ? colmap : getcolmap(lBreaks.length - 1);
+
+   // get axes context and reactive variables needed to compute coordinates
+   const axes = getContext('axes');
+   const tX = axes.tX;
+   const tY = axes.tY;
+   const isOk = axes.isOk;
+
+   // compute combinations of heatmap element positions
+   let top, left;
+   $: {
+      const x = Vector.seq(1, values.ncols);
+      const y = Vector.seq(1, values.nrows);
+      [top, left] = expandgrid(y.v, x.v);
+   }
+
+   // compute screen coordinates of the elements for each interval
+   let rx, ry, rw, rh = undefined;
+   $: {
+      if ($isOk) {
+         rx = [];
+         ry = [];
+         for (let i = 1; i < lBreaks.length; i++) {
+            let lleft = [];
+            let ltop = [];
+            for (let j = 0; j < values.v.length; j++) {
+               const v = values.v[j];
+               if (v > lBreaks[i - 1] && v <= lBreaks[i]) {
+                  lleft.push(left.v[j] - 0.5);
+                  ltop.push(top.v[j] + 0.5);
+               }
+            }
+            rx.push(lleft.length === 0 ? [] : axes.transform(checkCoords(lleft, 'Rectangles'), $tX.coords));
+            ry.push(ltop.length === 0 ? [] : axes.transform(checkCoords(ltop, 'Rectangles'), $tY.coords));
+         };
+
+         rw = axes.transform([1], $tX.objects);
+         rh = axes.transform([1], $tY.objects);
+      }
+   };
+
+</script>
+
+{#if $isOk && rx.length > 0}
+   <g class="series {className}" title={title} style="stroke:0;stroke-width:0px;">
+   <!-- loop over colors/intervals -->
+   {#each lColmap as col, i}
+      <g title="heatmap_group" style="fill:{col};">
+      {#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} />
+         {/each}
+      {/if}
+      </g>
+   {/each}
+   </g>
+{/if}
+
+

package/src/2d/Points.svelte

@@ -40,7 +40,7 @@
    $: if ($isOk) {
 
       if (typeof(marker) !== "number" || marker < 1 || marker > axes.MARKER_SYMBOLS.length) {
-         throw Error(`ScatterSeries: parameter "marker" must be a number from 1 to ${axes.MARKER_SYMBOLS.length}.`);
+         throw Error(`Points: parameter "marker" must be a number from 1 to ${axes.MARKER_SYMBOLS.length}.`);
       }
 
       markerSymbol = axes.MARKER_SYMBOLS[marker - 1];

package/src/2d/XAxis.svelte

@@ -8,7 +8,7 @@
    import { getContext } from 'svelte';
    import { Vector, vector } from 'mdatools/arrays';
    import { Colors } from '../Colors.js';
-   import { getAxisTicks } from '../Utils.js';
+   import { getAxisTicks, getTickLabels } from '../Utils.js';
    import Axis from './Axis.svelte';
 
 
@@ -50,6 +50,8 @@
    let grid = [];
    let axisLine = [];
    let tickCoords = [];
+   let tfCoords = [];
+   let tickFactor = 0;
 
    // compute coordinates for ticks, grid and axis line
    $: if ($isOk) {
@@ -66,8 +68,11 @@
       // compute coordinates for the ends of grid
       const gridYEnd = Vector.fill($yLim[1], tickNum);
 
-      // tick labels
-      tickLabels = (ticks === undefined || tickLabels === undefined) ? ticksX.v : tickLabels;
+      // tick labels and tick factor
+      if (ticks === undefined || tickLabels === undefined) {
+         [tickFactor, tickLabels] = getTickLabels(ticksX.v);
+      }
+
       if (tickLabels.length !== ticksX.length) {
          throw('XAxis: "tickLabels" must be a array of the same size as ticks.')
       }
@@ -87,6 +92,11 @@
          [ticksX, ticksY2],
          [ticksX, ticksY1]
       ];
+
+      tfCoords = [
+         [null, null],
+         [[$xLim[1]], [ticksY1.v[tickNum - 1]]],
+      ];
    }
 </script>
 
@@ -94,6 +104,6 @@
 <Axis
    className="mdaplot__xaxis" pos={1}
    {lineColor} {gridColor} {textColor}
-   {showGrid} {grid} {axisLine} {tickCoords} {tickLabels} {las}
+   {showGrid} {grid} {axisLine} {tickCoords} {tickLabels} {tfCoords} {tickFactor} {las}
 />
 {/if}

package/src/2d/YAxis.svelte

@@ -8,7 +8,7 @@
    import { getContext } from 'svelte';
    import { Vector, vector } from 'mdatools/arrays';
    import { Colors } from '../Colors.js';
-   import { getAxisTicks } from '../Utils.js';
+   import { getAxisTicks, getTickLabels } from '../Utils.js';
    import Axis from './Axis.svelte';
 
 
@@ -50,6 +50,8 @@
    let grid = [];
    let axisLine = [];
    let tickCoords = [];
+   let tfCoords = [];
+   let tickFactor = 0;
 
    // compute tick x-coordinates
    $: if ($isOk) {
@@ -66,8 +68,11 @@
       // coordinates for the ends of grid
       const gridXEnd = Vector.fill($xLim[1], tickNum);
 
-      // tick labels
-      tickLabels = (ticks === undefined || tickLabels === undefined) ? ticksY.v : tickLabels;
+      // tick labels and tick factor
+      if (ticks === undefined || tickLabels === undefined) {
+         [tickFactor, tickLabels] = getTickLabels(ticksY.v)
+      }
+
       if (tickLabels.length !== ticksY.length) {
          throw('YAxis: "tickLabels" must be a array of the same size as ticks.')
       }
@@ -87,6 +92,11 @@
          [ticksX1, ticksY],
          [ticksX2, ticksY]
       ];
+
+      tfCoords = [
+         [[], []],
+         [[ticksX1.v[tickNum - 1]], [$yLim[1]]],
+      ];
    }
 </script>
 
@@ -94,6 +104,6 @@
 <Axis
    className="mdaplot__yaxis" pos={4}
    {lineColor} {gridColor} {textColor}
-   {showGrid} {grid} {axisLine} {tickCoords} {tickLabels} {las}
+   {showGrid} {grid} {axisLine} {tickCoords} {tickLabels} {tfCoords} {tickFactor} {las}
 />
 {/if}

package/src/2d/index.js

@@ -12,9 +12,10 @@ export { default as Bars } from './Bars.svelte';
 export { default as Points } from './Points.svelte';
 export { default as Lines } from './Lines.svelte';
 export { default as Multilines } from './Multilines.svelte';
+export { default as Heatmap } from './Heatmap.svelte';
 
-export { default as ColorLegend } from './ColorLegend.svelte';
 export { default as Legend } from './Legend.svelte';
 export { default as TextLegend } from './TextLegend.svelte';
+export { default as ColormapLegend } from './ColormapLegend.svelte';
 
 export { getcolmap, Colors } from '../Colors.js';

package/src/3d/Mesh.svelte

@@ -60,8 +60,6 @@
       const left = nr[0] - dnr;
       const right = nr[1] + dnr;
       const span = right - left;
-      console.log(nr)
-      console.log([left, right, span])
 
       // compute coordinates for mesh segments lines
       xMesh1Start = Vector.zeros((nx - 1) * nz);
@@ -171,7 +169,6 @@
       }
    };
 
-   $: console.log(meshColor1)
    $: lineStyleStr = `stroke-width: ${lineWidth}px;stroke-dasharray:${axes.LINE_STYLES[$scale][lineType-1]};`;
 </script>
 

package/src/Utils.js

@@ -1,4 +1,40 @@
 import { cbind, vector, isvector, Vector } from 'mdatools/arrays';
+import { min, max, diff } from 'mdatools/stat';
+
+
+/**
+ * Generate vector with axis tick labels and tick factor based on numeric tick values.
+ *
+ * @param {Vector} ticks - vector with numeric tick values.
+ *
+ * @returns {Array} an array with tick factor and array with tick labels.
+ */
+export function getTickLabels(ticks) {
+
+   if (ticks === undefined) return undefined;
+
+   const step = Math.abs(min(diff(ticks)));
+   let tickFactor = 0;
+   if (step < 1 && Math.abs(max(ticks)) < 1) {
+      // values between 0 and 1 (absolute)
+      let decNum = Math.ceil(-Math.log10(step));
+      if (decNum <= 2) {
+         return [0, Array.from(ticks).map(v => v.toFixed(decNum).toString())];
+      }
+      tickFactor = decNum - 2;
+      decNum = 2;
+      return [-tickFactor, Array.from(ticks).map(v => (v * Math.pow(10, tickFactor)).toFixed(decNum).toString())];
+   } else {
+      let decNum = Math.ceil(Math.log10(step));
+      if (decNum <= 2) {
+         return [0, Array.from(ticks).map(v => v.toString())];
+      }
+      tickFactor = decNum - 2;
+      decNum = 2;
+      return [tickFactor, Array.from(ticks).map(v => (v / Math.pow(10, tickFactor)).toString())];
+   }
+}
+
 
 /**
  * Check coordinates and convert them to vector if necessary.
@@ -26,6 +62,7 @@ export function checkCoords(x, source) {
    return x;
 }
 
+
 /**
  * Create string with coordinates of SVG polygon in 3D.
  *
@@ -130,10 +167,11 @@ export function getAxisTicks(ticks, lim, maxTickNum, round = true) {
    // create a sequence of ticks
    ticks = Vector.seq(tickMin, tickMax, tickSpacing);
 
-   // if step is smaller than 1 round values to remove small decimals accidentiall added by JS
+   // if step is smaller than 1 round values to remove small decimals accidentially added by JS
    if (Math.abs(tickSpacing) < 1) {
+      const decNum = Math.round(-Math.log10(tickSpacing));
       const r = Math.pow(10, 1 + Math.round(-Math.log10(tickSpacing)));
-      ticks = ticks.apply(v => Math.round((v + Number.EPSILON) * r) / r)
+      ticks = ticks.apply(v => (Math.round((v + Number.EPSILON) * r) / r));
    }
 
    // make sure the ticks are not aligned with axes limits