svelte-plots-basic 1.1.3 → 2.0.1

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)) * 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/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}
+

package/src/2d/Points.svelte

@@ -0,0 +1,79 @@
+<script>
+   /****************************************************
+   * Points                                            *
+   * --------------------                              *
+   * shows series of points/markers on a plot          *
+   *****************************************************/
+
+   import { getContext } from 'svelte';
+   import { Colors } from '../Colors';
+   import { checkCoords } from '../Utils';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+	export let xValues;                          // array of vector with x-coordinates of points
+   export let yValues;                          // array of vector with y-coordinates of points
+   export let marker = 1                        // index for point symbol (from 1 to 8): "●", "◼", "▲", "▼", "⬥", "＋", "*", "✕"
+   export let faceColor = 'transparent';        // face (fill) color of the points
+   export let borderColor = Colors.PRIMARY;     // border color of the points
+   export let borderWidth = 1;                  // width (thickness) of the points
+   export let markerSize = 1;                   // size of the marker symbols
+   export let title = '';                       // title of the point series - required for handling mouse click events
+
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   // get axes context and adjust x margins
+   const axes = getContext('axes');
+   const tX = axes.tX;
+   const tY = axes.tY;
+   const isOk = axes.isOk;
+
+   let x, y, markerSymbol;
+
+   // reactive calculations triggered by changes in coordinates and plot parameters
+   $: 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}.`);
+      }
+
+      markerSymbol = axes.MARKER_SYMBOLS[marker - 1];
+
+
+      x = axes.transform(checkCoords(xValues, 'Points'), $tX.coords);
+      y = axes.transform(checkCoords(yValues, 'Points'), $tY.coords);
+
+      // sanity check for input parameters
+      if (x.length !== y.length) {
+         throw Error('Points: parameters "xValues" and "yValues" must be vectors of the same length.')
+      }
+   }
+
+
+   // styles for the elements
+   $: textStyleStr = `dominant-baseline:middle;fill:${faceColor};stroke-width:${borderWidth}px;stroke:${borderColor};
+      font-size:${markerSize}em; text-anchor:middle;cursor:default;user-select:none;`;
+</script>
+
+{#if $isOk && x !== undefined && y !== undefined}
+<g class="series series_points" title={title} style={textStyleStr} >
+   {#each x as v, i}
+      <text x={x[i]} y={y[i]}>{markerSymbol}</text>
+   {/each}
+</g>
+{/if}
+
+<style>
+text, text > :global(tspan) {
+   dominant-baseline: middle;
+   text-anchor: middle;
+   cursor: default;
+   user-select: none;
+}
+</style>

package/src/2d/Rectangles.svelte

@@ -0,0 +1,74 @@
+<script>
+   /****************************************************
+   * Rectangles                                        *
+   * --------------------                              *
+   * shows series of rectangles                        *
+   *****************************************************/
+
+   import { getContext } from 'svelte';
+   import { Vector } from 'mdatools/arrays';
+   import { Colors } from '../Colors';
+   import { checkCoords } from '../Utils';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+	export let left;                          // array of vector with coordinates of left sides of the bars
+   export let top;                           // array of vector with coordinates of top sides of the bars
+   export let width;                         // single value (same for all) or vector/array with bar width
+   export let height;                        // single value (same for all) or vector/array with bar height
+   export let faceColor = Colors.PRIMARY;    // color of bar faces (fill)
+   export let borderColor = faceColor;       // color of bar borders
+   export let lineWidth = 1;                 // width (thickness) of bar border lines
+   export let className = 'series_rect';     // CSS class name of the SVG group
+   export let title = '';                    // title of the rectangle series (reserved for future use)
+
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   // 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;
+
+   let rx, ry, rw, rh = undefined;
+   $: {
+      if ($isOk) {
+         rx = axes.transform(checkCoords(left, 'Rectangles'), $tX.coords);
+         ry = axes.transform(checkCoords(top, 'Rectangles'), $tY.coords);
+
+         if (rx.length !== ry.length) {
+            throw Error('Rectangles: parameters "left" and "top" must be vectors of the same length.');
+         }
+
+         if (typeof width !== 'object') {
+            width = Vector.fill(width, left.length);
+         }
+
+         if (typeof height !== 'object') {
+            height = Vector.fill(height, left.length);
+         }
+
+         rw = axes.transform(width, $tX.objects);
+         rh = axes.transform(height, $tY.objects);
+      }
+   }
+
+   // styles for bars and labels
+   $: barsStyleStr = `fill:${faceColor};stroke:${borderColor};stroke-width:${lineWidth}px;`;
+</script>
+
+{#if $isOk}
+   <g class="series {className}" title={title} style={barsStyleStr}>
+   {#each left as v, i}
+      <rect x={rx[i]} y={ry[i]} width={rw[i]} height={rh[i]} />
+   {/each}
+   </g>
+{/if}
+
+

package/src/2d/Segments.svelte

@@ -0,0 +1,65 @@
+<script>
+   /****************************************************
+   * Segments                                          *
+   * --------------------                              *
+   * shows series of line segments                     *
+   *****************************************************/
+
+   import { getContext } from 'svelte';
+   import { Colors } from '../Colors';
+   import { checkCoords } from '../Utils';
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+	export let xStart;                        // vector or array with x-coordinates of starting points
+   export let xEnd;                          // vector or array with x-coordinates of end points
+   export let yStart;                        // vector or array with y-coordinates of starting points
+   export let yEnd;                          // vector or array with y-coordinates of end points
+   export let lineColor = Colors.PRIMARY;    // color of segment lines
+   export let lineType = 1;                  // type of segment lines (1 - solid, 2 - dashed, 3 - dotted, 4 - dashdot)
+   export let lineWidth = 1;                 // width (thickness) of segment lines
+   export let className = 'series_seg';      // CSS class name of the SVG group
+   export let title = '';                    // title of the segment series (reserved for future use)
+
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   // get axes context and reactive variables needed to compute coordinates
+   const axes = getContext('axes');
+   const scale = axes.scale;
+   const isOk = axes.isOk;
+   const tX = axes.tX;
+   const tY = axes.tY;
+
+   let x1, x2, y1, y2 = undefined;
+   $: {
+      if ($isOk) {
+
+         x1 = axes.transform(checkCoords(xStart, 'Segments'), $tX.coords);
+         y1 = axes.transform(checkCoords(yStart, 'Segments'), $tY.coords);
+         x2 = axes.transform(checkCoords(xEnd, 'Segments'), $tX.coords);
+         y2 = axes.transform(checkCoords(yEnd, 'Segments'), $tY.coords);
+
+         const n = x1.length;
+         if (x2.length !== n || y1.length !== n || y2.length !== n) {
+            throw Error('Segments: parameters "xStart", "yStart", "xEnd" and "yEnd" should have the same length.');
+         }
+      }
+   }
+
+   // reactive variables for coordinates of data points in pixels (and line style)
+   $: lineStyleStr = `stroke:${lineColor};stroke-width: ${lineWidth}px;stroke-dasharray:${axes.LINE_STYLES[$scale][lineType-1]}`;
+</script>
+
+{#if $isOk}
+   <g class="series {className}" title={title} style={lineStyleStr}>
+   {#each x1 as v, i}
+      <line x1={x1[i]} x2={x2[i]} y1={y1[i]} y2={y2[i]} />
+   {/each}
+   </g>
+{/if}
+