svelte-plots-basic 1.1.4 → 2.1.0

package/src/2d/Bars.svelte

@@ -0,0 +1,65 @@
+<script>
+   /****************************************************
+   * Bars                                              *
+   * --------------------                              *
+   * shows series of bars on a plot                    *
+   *****************************************************/
+
+   import { max, diff } from 'mdatools/stat';
+   import { Vector } from 'mdatools/arrays';
+   import { Colors } from '../Colors';
+   import { checkCoords } from '../Utils';
+
+   import Rectangles from './Rectangles.svelte';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+	export let xValues;                       // vector with x-coordinates of middle points of the bars
+   export let yValues;                       // vector with y-coordinates of top points of the bars
+   export let barWidth = 0.8;                // width of bars as per cent of maximum width
+   export let faceColor = Colors.PRIMARY;    // face color of the bars
+   export let borderColor = Colors.PRIMARY;  // border color of the bars
+   export let title = '';                    // title of the bar series (reserved for future use)
+
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   let width, left, top, height;
+
+   // reactive code for computing position of left sides and bar width
+   $: {
+
+      if (!barWidth) {
+         barWidth = 0.8;
+      }
+
+      if (barWidth <= 0 || barWidth > 1) {
+         throw Error('BarSeries: parameters "barWidth" should be between 0 and 1.');
+      }
+
+      // compute maximum bar width and position of left side
+      const xv = checkCoords(xValues, 'BarSeries');
+      const w = max(diff(xv.v)) * barWidth;
+      left = xv.subtract(w/2);
+      width = Vector.fill(w, xv.length);
+   }
+
+   // reactive code for computing position of top sides and bar height
+   $: {
+
+      const yv = checkCoords(yValues, 'BarSeries');
+      if (yv.length !== left.length) {
+         throw Error('BarSeries: parameters "yValues" must be vector of the same length as "xValues".');
+      }
+
+      top = yv.apply(v => v > 0 ? v : 0);
+      height = yv.apply(v => Math.abs(v));
+   }
+</script>
+
+<Rectangles className="series_bar" {left} {top} {width} {height} {borderColor} {faceColor} {title} />

package/src/2d/Box.svelte

@@ -0,0 +1,50 @@
+<script>
+   /****************************************************
+   * Box                                               *
+   * --------------------                              *
+   * shows border box around axes                      *
+   *****************************************************/
+
+   import { getContext } from 'svelte';
+   import { Colors } from '../Colors';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+   export let slot;  // slot name, must be "box"
+
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   // check that the box is located in a correct slot
+   if (slot !== 'box') {
+      throw('Component Box must have \'slot="box"\' attribute.')
+   }
+
+   // box style
+   const rectStyleStr = `fill:transparent;stroke:${Colors.DARKGRAY};stroke-width:1px;`;
+
+   // get axes context and reactive variables needed to compute coordinates
+   const axes = getContext('axes');
+   const xLim = axes.xLim;
+   const yLim = axes.yLim;
+   const isOk = axes.isOk;
+   const tX = axes.tX;
+   const tY = axes.tY;
+
+   // reactive variables for coordinates of box points in pixels
+   $: xx = $isOk ? axes.transform($xLim, $tX.coords) : undefined;
+   $: yy = $isOk ? axes.transform($yLim, $tY.coords) : undefined;
+
+</script>
+
+{#if $isOk}
+   <g style="pointer-events:none" class="mdaplot__axes-box">
+   <rect x={xx[0]} y={yy[1]} width={xx[1] - xx[0]} height={yy[0] - yy[1]} style={rectStyleStr} />
+   </g>
+{/if}
+

package/src/2d/ColorLegend.svelte

@@ -0,0 +1,36 @@
+<script>
+   /****************************************************
+   * ColorLegend                                       *
+   * --------------------                              *
+   * shows color legend on top part of the plot        *
+   *****************************************************/
+
+   import { getContext } from 'svelte';
+   import { Colors } from '../Colors';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+	export let colormap;    // colormap returned by method getcolormap() from colors
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   const axes = getContext('axes');
+   const xLim = axes.xLim;
+   const yLim = axes.yLim;
+   const tX = axes.tX;
+   const tY = axes.tY;
+   const isOk = axes.isOk;
+
+
+   // TODO: will be implemented as a sequence of rectangles and text labels beneath them
+
+   // compute coordinates of rectangles and their colors
+
+   // compute coordinates of text labels
+</script>
+

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/Legend.svelte

@@ -0,0 +1,148 @@
+<script>
+   /****************************************************
+   * Legend                                            *
+   * --------------------                              *
+   * shows legend for plot components                  *
+   *****************************************************/
+
+   import { mean } from 'mdatools/stat';
+   import { getContext } from 'svelte';
+   import { Colors } from '../Colors';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+   export let items;                 // array with text labels for each legend element
+	export let position = "topleft";  // position of the legend ("topleft", "top", "topright", "right", "bottomright", etc).
+
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   const axes = getContext('axes');
+   const scale = axes.scale;
+   const xLim = axes.xLim;
+   const yLim = axes.yLim;
+   const tX = axes.tX;
+   const tY = axes.tY;
+   const isOk = axes.isOk;
+
+
+   /**
+    * Computes width of text element for given font.
+    *
+    * @param {string} text - string with text
+    * @param {string} font - font name and size, e.g. '12px Arial'
+    *
+    * @return {number} size of element in pixels
+    */
+   function getTextWidth(text, font) {
+      const element = document.createElement('canvas');
+      const context = element.getContext('2d');
+      context.font = font;
+      return context.measureText(text).width;
+   }
+
+   /**
+    * Compute size of main legend elements.
+    *
+    * @param {Array} items - array of legend items and their properties.
+    * @param {number} fontSize - font size of a legend element.
+    * @param {string} position - position of the legend.
+    *
+    * @return {Array} array with height and width og graphical part of legend item, padding size,
+    * height and width of text labels (all in pixels).
+    */
+   function getLegendSize(items, fontSize, position)  {
+
+      // compute size of graphical elements
+      const elHeight = fontSize;       // height of legend element without padding
+      const elPadding = elHeight / 4;  // top and bottom padding
+      const elWidth = elHeight * 1.5;  // width of legend element without padding
+
+      // compute size of text label elements
+      // TODO: implement one row legend if position is "top" or "bottom"
+      const lbHeight = elHeight;
+      let lbWidth = 0;
+      for (let i = 0; i < items.length; i++) {
+         const w = getTextWidth('  ' + items[i].label + '  ', fontSize + 'px Arial');
+         lbWidth = w > lbWidth ? w : lbWidth;
+      }
+
+      return [elHeight, elWidth, elPadding, lbHeight, lbWidth];
+   }
+
+   // reactive expression to compute all sizes and coordinates
+   let left, top, elHeight, elWidth, elPadding, lbHeight, lbWidth, legendHeight, legendWidth, fontSize;
+   $: if ($isOk) {
+
+      fontSize = axes.LEGEND_FONT_SIZE[$scale];
+
+      // compute size of elements
+      [elHeight, elWidth, elPadding, lbHeight, lbWidth] = getLegendSize(items, fontSize, position);
+
+      // compute size of whole legend box
+      legendHeight = (elHeight + 2 * elPadding) * items.length;
+      legendWidth = (elWidth + 2 * elPadding + lbWidth);
+
+      // compute coordinates of top left corner of the legend box
+      const xLimPx = axes.transform($xLim, $tX.coords);
+      left = position.includes("left") ? xLimPx[0] + axes.TICK_SIZE[$scale] :
+          position.includes("right") ? xLimPx[1] - legendWidth - axes.TICK_SIZE[$scale] :
+          mean(xLimPx) - legendWidth/2;
+
+      const yLimPx = axes.transform($yLim, $tY.coords);
+      top = position.includes("top") ? yLimPx[1] + axes.TICK_SIZE[$scale] :
+          position.includes("bottom") ? yLimPx[0] - legendHeight - axes.TICK_SIZE[$scale] :
+          mean(yLimPx) - legendHeight/2;
+   }
+</script>
+
+{#if $isOk }
+
+<!-- outer legend box, background and frame -->
+<svg x="{left}px" y="{top}px" height="{legendHeight}px" width="{legendWidth}">
+<rect height="100%" width="100%" style="fill:white;stroke:{Colors.MIDDLEGRAY};"></rect>
+
+{#each items as item, i}
+
+<!-- individual legend item -->
+<svg x="{0}px" y="{i * (elHeight + 2 * elPadding)}px" width="{legendWidth}px" height="{elHeight + 2 * elPadding}px">
+
+   <!-- line -->
+   {#if item.lineType && item.lineType > 0 && item.lineType <= 4}
+   <line x1={elPadding} x2={elPadding + elWidth} y1={(elHeight + elPadding * 2)/2} y2={(elHeight + elPadding * 2)/2} style={`
+      stroke:${item.lineColor ? item.lineColor : Colors.PRIMARY};
+      stroke-width: ${item.lineWidth ? item.lineWidth : 1}px;
+      stroke-dasharray:${axes.LINE_STYLES[$scale][item.lineType - 1]}
+   `}/>
+   {/if}
+
+   <!-- marker -->
+   {#if item.marker && item.marker > 0 && item.marker < axes.MARKER_SYMBOLS.length}
+   <text x="{(elWidth + 2 * elPadding)/2}px" y="{(elHeight + 2 * elPadding)/2}px"
+      dominant-baseline="middle"
+      style={`
+         fill:${item.faceColor ? item.faceColor : "transparent"};
+         stroke-width:${item.borderWidth ? item.borderWidth : 1}px;
+         stroke:${item.borderColor ? item.borderColor : Colors.PRIMARY};
+         font-size:${fontSize}px;
+         text-anchor:middle;`}
+   >{axes.MARKER_SYMBOLS[item.marker - 1]}</text>
+   {/if}
+
+
+
+   <!-- text -->
+   <text x="{elWidth + elPadding * 3}px" y="{elPadding}px"
+      dominant-baseline="hanging"
+      style={`text-anchor:start;fill:${Colors.LEGEND};font-size:${fontSize}px`};
+   >{@html '&nbsp;' + item.label}</text>
+
+</svg>
+{/each}
+</svg>
+{/if}

package/src/2d/Lines.svelte

@@ -0,0 +1,49 @@
+<script>
+   /****************************************************
+   * Lines                                             *
+   * --------------------                              *
+   * shows lines connected sequence of points          *
+   *****************************************************/
+
+   import { getContext } from 'svelte';
+   import { Colors } from '../Colors';
+   import { val2p } from '../Utils';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+	export let xValues;                       // vector or array with x-coordinates of the points
+   export let yValues;                       // vector or array with y-coordinates of the points
+   export let lineWidth = 1;                 // width (thickness) of the lines
+   export let lineColor = Colors.PRIMARY;    // color of the lines
+   export let lineType = 1;                  // type of the lines (1 - solid, 2 - dashed, 3 - dotted, 4 - dashdot)
+   export let title = '';                    // title of the bar series (reserved for future use)
+
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   // get axes context
+   const axes = getContext('axes');
+
+   const scale = axes.scale;
+   const isOk = axes.isOk;
+   const tX = axes.tX;
+   const tY = axes.tY;
+
+   // compute polynomial coordinates as string
+   $: p = $isOk ? val2p(xValues, yValues, $tX, $tY, axes) : undefined;
+
+   // reactive variables for coordinates of data points in pixels
+   $: lineStyleStr = `fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px; stroke-dasharray:${axes.LINE_STYLES[$scale][lineType-1]}`;
+</script>
+
+{#if $isOk && p !== undefined}
+   <g class="series series_line" style={lineStyleStr} title={title}>
+      <polyline class="line" points={p}/>
+   </g>
+{/if}
+

package/src/2d/Multilines.svelte

@@ -0,0 +1,67 @@
+<script>
+   /****************************************************
+   * Multilines                                        *
+   * --------------------                              *
+   * shows series of lines components                  *
+   *****************************************************/
+
+   import { getContext } from 'svelte';
+   import { ismatrix } from 'mdatools/arrays';
+   import { Colors } from '../Colors';
+   import { val2p } from '../Utils';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+	export let xValues;                       // vector or array with x-coordinates of the points
+   export let yValues;                       // matrix (!) with y-coordinates of the points - every column is separate line
+   export let lineWidth = 1;                 // width (thickness) of the lines
+   export let lineColor = Colors.PRIMARY;    // color of the lines
+   export let lineType = 1;                  // type of the lines (1 - solid, 2 - dashed, 3 - dotted, 4 - dashdot)
+   export let title = '';                    // title of the bar series (reserved for future use)
+
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   // get axes context
+   const axes = getContext('axes');
+
+   const scale = axes.scale;
+   const isOk = axes.isOk;
+   const tX = axes.tX;
+   const tY = axes.tY;
+
+   // compute polynomial coordinates as string
+   let pp;
+   $: if ($isOk) {
+
+      if (!ismatrix(yValues)) {
+         throw Error('Multilines: parameter "yValues" must be a matrix.');
+      }
+
+      if (xValues.length !== yValues.nrows) {
+         throw Error('Multilines: parameter "xValues" must have the same number of values as number of rows in "yValues".');
+      }
+
+      pp = new Array(yValues.ncols);
+      for (let i = 0; i < pp.length; i++) {
+         pp[i] = val2p(xValues, yValues.getcolumn(i + 1), $tX, $tY, axes);
+      }
+   }
+
+   // reactive variables for coordinates of data points in pixels
+   $: lineStyleStr = `fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px; stroke-dasharray:${axes.LINE_STYLES[$scale][lineType-1]}`;
+</script>
+
+{#if $isOk && pp !== undefined && pp.length > 0}
+   <g class="series series_multiline" style={lineStyleStr} title={title}>
+      {#each pp as p}
+      <polyline class="line" points={p}/>
+      {/each}
+   </g>
+{/if}
+