svelte-plots-basic 1.1.3 → 2.0.1

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,99 @@
+<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 } 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 = [];
+
+   // 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
+      tickLabels = (ticks === undefined || tickLabels === undefined) ? ticksX.v : tickLabels;
+      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]
+      ];
+   }
+</script>
+
+{#if $isOk && axisLine.length > 0}
+<Axis
+   className="mdaplot__xaxis" pos={1}
+   {lineColor} {gridColor} {textColor}
+   {showGrid} {grid} {axisLine} {tickCoords} {tickLabels} {las}
+/>
+{/if}

package/src/2d/YAxis.svelte

@@ -0,0 +1,99 @@
+<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 } 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 = [];
+
+   // 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
+      tickLabels = (ticks === undefined || tickLabels === undefined) ? ticksY.v : tickLabels;
+      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]
+      ];
+   }
+</script>
+
+{#if $isOk && axisLine.length > 0}
+<Axis
+   className="mdaplot__yaxis" pos={4}
+   {lineColor} {gridColor} {textColor}
+   {showGrid} {grid} {axisLine} {tickCoords} {tickLabels} {las}
+/>
+{/if}

package/src/{index.js → 2d/index.js}

@@ -6,11 +6,15 @@ 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 TextLegend } from './TextLegend.svelte';
 
-export { default as BarSeries } from './BarSeries.svelte';
-export { default as ScatterSeries } from './ScatterSeries.svelte';
-export { default as LineSeries } from './LineSeries.svelte';
-export { default as AreaSeries } from './AreaSeries.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 ColorLegend } from './ColorLegend.svelte';
+export { default as Legend } from './Legend.svelte';
+export { default as TextLegend } from './TextLegend.svelte';
 
-export { Colors } from './Colors.js';
+export { getcolmap, Colors } from '../Colors.js';