svelte-plots-basic 1.1.4 → 2.1.0

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(`Points: 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}
+

package/src/2d/TextLabels.svelte

@@ -0,0 +1,107 @@
+<script>
+   /****************************************************
+   * TextLabels component                              *
+   * --------------------                              *
+   * shows a series of text labels on the plot         *
+   *****************************************************/
+
+   import { getContext } from 'svelte';
+   import { Colors } from '../Colors';
+   import { checkCoords } from '../Utils';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+	export let xValues;                             // vector or array with x-coordinates for each label
+   export let yValues;                             // vector or array with y-coordinates for each label
+   export let labels;                              // array with labels (strings)
+   export let pos = 0;                             // position of labels related to coordinates (middle, bottom, left, top, right)
+   export let faceColor = Colors.PRIMARY_TEXT;     // face color of label symbols
+   export let borderColor = 'transparent';         // border colors of label symbols
+   export let borderWidth = 0;                     // border width of label symbols
+   export let textSize = 1;                        // size of label symbols
+   export let className = 'series_text';           // CSS class name for the labels group
+   export let title = 'series_text';               // title of the labels SVG group
+   export let rotateAngle = 0;                     // angle to rotate labels
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   // get axes context and reactive variables needed to compute coordinates
+   const axes = getContext('axes');
+   const scale = axes.scale;
+   const tX = axes.tX;
+   const tY = axes.tY;
+   const isOk = axes.isOk;
+
+   const textAnchors = ['middle', 'middle', 'start', 'middle', 'end'];
+
+   let x, y = undefined;
+   let dx = 0, dy = 0;
+
+   // reactive calculations triggered by changes in coordinates and plot parameters
+   $: if ($isOk) {
+
+      if (typeof labels === 'string' && typeof pos !== 'number' ) {
+         throw Error('TextLabels: parameter "labels" is provided as single string, so "pos" must be a single number.');
+      }
+
+      x = axes.transform(checkCoords(xValues, 'TextLabels'), $tX.coords);
+      y = axes.transform(checkCoords(yValues, 'TextLabels'), $tY.coords);
+
+      // sanity check for input parameters
+      if (x.length !== y.length) {
+         throw Error('TextLabels: parameters "xValues" and "yValues" must be vectors of the same length.');
+      }
+
+      if (Array.isArray(labels) && labels.length !== x.length ) {
+         throw Error('TextLabels: number of elements in "labels" does not match number of coordinates.');
+      }
+   }
+
+   // reactive calculations triggered by changes in scale
+   $: {
+      const m = axes.LABELS_MARGIN[$scale];
+      dx = [0, 0, m,  0, -m, m];
+      dy = [0, m, 0, -m, 0, m];
+   }
+
+   // styles for the elements
+   $: textStyleStr = `dominant-baseline:middle;fill:${faceColor};stroke-width:${borderWidth}px;stroke:${borderColor};
+      font-size:${textSize}em;`;
+</script>
+
+{#if $isOk && x !== undefined && y !== undefined}
+<g class="series {className}" title={title} style={textStyleStr} >
+
+   {#if typeof labels === 'string'}
+   {#each x as v, i}
+      <text data-id={i} x={x[i]} y={y[i]} dx={dx[pos]} dy={dy[pos]}
+         transform={rotateAngle !== undefined ? `rotate(${rotateAngle}, ${x[i] + dx[pos]}, ${y[i] + dy[pos]})` : ''}
+         text-anchor={textAnchors[pos[i]]}>{@html labels}</text>
+   {/each}
+
+   {:else if (Array.isArray(pos) || ArrayBuffer.isView(pos))}
+   {#each x as v, i}
+      <text data-id={i} x={x[i]} y={y[i]} dx={dx[pos[i]]} dy={dy[pos[i]]} text-anchor={textAnchors[pos[i]]}>{@html labels[i]}</text>
+   {/each}
+
+   {:else}
+   {#each x as v, i}
+      <text data-id={i} x={x[i]} y={y[i]} dx={dx[pos]} dy={dy[pos]} text-anchor={textAnchors[pos]}>{@html labels[i]}</text>
+   {/each}
+   {/if}
+</g>
+{/if}
+
+<style>
+text, text > :global(tspan) {
+   dominant-baseline: middle;
+   text-anchor: middle;
+   cursor: default;
+   user-select: none;
+}
+</style>

package/src/2d/TextLegend.svelte

@@ -0,0 +1,53 @@
+<script>
+   /****************************************************
+   * TextLegend                                        *
+   * --------------------                              *
+   * shows list of several formatted text elements     *
+   *****************************************************/
+
+   import { getContext } from 'svelte';
+   import { Colors } from '../Colors';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+	export let left;                                // vector/array with coordinates of lef side of each text box
+   export let top;                                 // vector/array with coordinates of top side of each text box
+   export let dx = "0";                            // horizontal margin between left size and text in 'em' units
+   export let dy = "1.25em";                       // vertical margin between elements in 'em' units
+   export let elements;                            // array with text elements (svg tags are acceptable)
+   export let faceColor = Colors.PRIMARY_TEXT;     // face color of the text symbols
+   export let borderColor = "transparent";         // border color of the text symbols
+   export let borderWidth = 0;                     // border width of the text symbols
+   export let textSize = 1;                        // size of the text symbols
+
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   const axes = getContext('axes');
+   const tX = axes.tX;
+   const tY = axes.tY;
+   const isOk = axes.isOk;
+
+   // reactive variables for coordinates of data points in pixels
+   let x, y = undefined;
+   $: if ($isOk) {
+      x = axes.transform([left], $tX.coords);
+      y = axes.transform([top], $tY.coords);
+   }
+
+   // styles for bars and labels
+   $: textStyleStr = `fill:${faceColor};stroke-width:${borderWidth}px;stroke:${borderColor};font-size:${textSize}em;`;
+</script>
+
+{#if $isOk && x !== undefined && y !== undefined && elements.length > 0}
+   <text style={textStyleStr} x={x} y={y} dx={dx} dy={dy} dominant-baseline="middle" text-anchor="start">
+      {#each elements as el, i}
+         <tspan {x} {dx} dy={i === 0 ? 0 : dy}>{@html el}</tspan>
+      {/each}
+   </text>
+{/if}

package/src/2d/XAxis.svelte

@@ -0,0 +1,109 @@
+<script>
+   /****************************************************
+   * X-Axis                                            *
+   * --------------------                              *
+   * shows x-axis and its elements (ticks, grid, etc.) *
+   *****************************************************/
+
+   import { getContext } from 'svelte';
+   import { Vector, vector } from 'mdatools/arrays';
+   import { Colors } from '../Colors.js';
+   import { getAxisTicks, getTickLabels } from '../Utils.js';
+   import Axis from './Axis.svelte';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+   export let slot = 'xaxis';                // slot the component must be placed in (must be "xaxis")
+   export let ticks = undefined;             // vector with numeric tick positions (by default is computed automatically)
+   export let tickLabels = undefined;        // vector with labels for each tick (by default tick values will be used)
+   export let showGrid = false;              // logical, show or not grid lines
+   export let las = 1;                       // orientation of tick labels (1 - horizontal, 2 - vertical)
+
+   export let lineColor = Colors.DARKGRAY;   // color of axis and tick lines
+   export let gridColor = Colors.MIDDLEGRAY; // color og grid lines
+   export let textColor = Colors.DARKGRAY;   // color of text tick labels
+
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   // sanity checks of input parameters
+   if (slot !== 'xaxis') {
+      throw('Component XAxis must have "slot=\'xaxis\'" attribute.');
+   }
+
+   // get axes context and adjust x margins
+   const axes = getContext('axes');
+
+   // get reactive variables needed to compute coordinates
+   const xLim = axes.xLim;
+   const yLim = axes.yLim;
+   const scale = axes.scale;
+   const isOk = axes.isOk;
+   const tY = axes.tY;
+
+   // prepare variables for coordinates
+   let grid = [];
+   let axisLine = [];
+   let tickCoords = [];
+   let tfCoords = [];
+   let tickFactor = 0;
+
+   // compute coordinates for ticks, grid and axis line
+   $: 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);
+      const tickNum = ticksX.length;
+
+      // compute tick y-coordinates (up and bottom)
+      const dY = axes.invTransform([axes.TICK_SIZE[$scale]], $tY.objects)[0];
+      const ticksY1 = Vector.fill($yLim[0], tickNum);
+      const ticksY2 = ticksY1.add(dY);
+
+      // compute coordinates for the ends of grid
+      const gridYEnd = Vector.fill($yLim[1], tickNum);
+
+      // 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.')
+      }
+
+      // combine all coordinates together
+      grid = [
+         [ticksX, ticksY1],
+         [ticksX, gridYEnd]
+      ];
+
+      axisLine = [
+         [vector([$xLim[0]]), vector([$yLim[0]])],
+         [vector([$xLim[1]]), vector([$yLim[0]])]
+      ]
+
+      tickCoords = [
+         [ticksX, ticksY2],
+         [ticksX, ticksY1]
+      ];
+
+      tfCoords = [
+         [null, null],
+         [[$xLim[1]], [ticksY1.v[tickNum - 1]]],
+      ];
+   }
+</script>
+
+{#if $isOk && axisLine.length > 0}
+<Axis
+   className="mdaplot__xaxis" pos={1}
+   {lineColor} {gridColor} {textColor}
+   {showGrid} {grid} {axisLine} {tickCoords} {tickLabels} {tfCoords} {tickFactor} {las}
+/>
+{/if}

package/src/2d/YAxis.svelte

@@ -0,0 +1,109 @@
+<script>
+   /****************************************************
+   * Y-Axis                                            *
+   * --------------------                              *
+   * shows y-axis and its elements (ticks, grid, etc.) *
+   *****************************************************/
+
+   import { getContext } from 'svelte';
+   import { Vector, vector } from 'mdatools/arrays';
+   import { Colors } from '../Colors.js';
+   import { getAxisTicks, getTickLabels } from '../Utils.js';
+   import Axis from './Axis.svelte';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+   export let slot = 'yaxis';                // slot the component must be placed in (must be "yaxis")
+   export let ticks = undefined;             // vector with numeric tick positions (by default is computed automatically)
+   export let tickLabels = undefined;        // vector with labels for each tick (by default tick values will be used)
+   export let showGrid = false;              // logical, show or not grid lines
+   export let las = 1;                       // orientation of tick labels (1 - horizontal, 2 - vertical)
+
+   export let lineColor = Colors.DARKGRAY;   // color of axis and tick lines
+   export let gridColor = Colors.MIDDLEGRAY; // color og grid lines
+   export let textColor = Colors.DARKGRAY;   // color of text tick labels
+
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   // sanity checks of input parameters
+   if (slot !== 'yaxis') {
+      throw('Component YAxis must have "slot=\'yaxis\'" attribute.');
+   }
+
+   // get axes context and adjust x margins
+   const axes = getContext('axes');
+
+   // get reactive variables needed to compute coordinates
+   const xLim = axes.xLim;
+   const yLim = axes.yLim;
+   const scale = axes.scale;
+   const isOk = axes.isOk;
+   const tX = axes.tX;
+
+   // prepare variables for coordinates
+   let grid = [];
+   let axisLine = [];
+   let tickCoords = [];
+   let tfCoords = [];
+   let tickFactor = 0;
+
+   // compute tick x-coordinates
+   $: 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);
+      const tickNum = ticksY.length;
+
+      // compute tick y-coordinates (up and bottom)
+      const dX = axes.invTransform([axes.TICK_SIZE[$scale]], $tX.objects)[0];
+      const ticksX1 = Vector.fill($xLim[0], tickNum)
+      const ticksX2 = ticksX1.add(dX)
+
+      // coordinates for the ends of grid
+      const gridXEnd = Vector.fill($xLim[1], tickNum);
+
+      // 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.')
+      }
+
+      // combine all coordinates together
+      grid = [
+         [ticksX1, ticksY],
+         [gridXEnd, ticksY]
+      ];
+
+      axisLine = [
+         [vector([$xLim[0]]), vector([$yLim[0]])],
+         [vector([$xLim[0]]), vector([$yLim[1]])]
+      ]
+
+      tickCoords = [
+         [ticksX1, ticksY],
+         [ticksX2, ticksY]
+      ];
+
+      tfCoords = [
+         [[], []],
+         [[ticksX1.v[tickNum - 1]], [$yLim[1]]],
+      ];
+   }
+</script>
+
+{#if $isOk && axisLine.length > 0}
+<Axis
+   className="mdaplot__yaxis" pos={4}
+   {lineColor} {gridColor} {textColor}
+   {showGrid} {grid} {axisLine} {tickCoords} {tickLabels} {tfCoords} {tickFactor} {las}
+/>
+{/if}

package/src/2d/index.js

@@ -0,0 +1,21 @@
+export { default as Axes } from './Axes.svelte';
+export { default as XAxis } from './XAxis.svelte';
+export { default as YAxis } from './YAxis.svelte';
+export { default as Box } from './Box.svelte';
+
+export { default as Rectangles } from './Rectangles.svelte';
+export { default as Segments } from './Segments.svelte';
+export { default as TextLabels } from './TextLabels.svelte';
+
+export { default as Area } from './Area.svelte';
+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 Legend } from './Legend.svelte';
+export { default as TextLegend } from './TextLegend.svelte';
+export { default as ColormapLegend } from './ColormapLegend.svelte';
+
+export { getcolmap, Colors } from '../Colors.js';