svelte-plots-basic 1.1.3 → 2.0.1

package/src/3d/Mesh.svelte

@@ -0,0 +1,188 @@
+<script>
+   /****************************************************
+   * Segments for 3D plot                              *
+   * --------------------                              *
+   * shows a series of line segments on the plot       *
+   *****************************************************/
+
+   import { Vector, cbind, ismatrix, isvector } from 'mdatools/arrays';
+   import { range } from 'mdatools/stat';
+   import { getContext } from 'svelte';
+   import { Colors } from '../Colors';
+   import { checkCoords } from '../Utils';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+   export let title = '';
+	export let xValues;
+   export let yValues;
+   export let zValues;
+
+   export let colmap = [Colors.PRIMARY, Colors.PRIMARY];
+   export let lineType = 1;
+   export let lineWidth = 1;
+
+   // get axes context and reactive variables needed to compute coordinates
+   const axes = getContext('axes');
+   const scale = axes.scale;
+   const tM = axes.tM;
+   const isOk = axes.isOk;
+
+   let xMesh1Start, xMesh1End, yMesh1Start, yMesh1End, zMesh1Start, zMesh1End, meshColor1;
+   let xMesh2Start, xMesh2End, yMesh2Start, yMesh2End, zMesh2Start, zMesh2End, meshColor2;
+
+   $: {
+      if (!ismatrix(yValues)) {
+         throw Error('Mesh: parameter "yValues" must be a matrix with height values of mesh points.');
+      }
+
+      if (Array.isArray(xValues)) {
+         xValues = vector(xValues);
+      }
+
+      if (Array.isArray(zValues)) {
+         zValues = vector(zValues);
+      }
+
+      if (!isvector(zValues) || !isvector(xValues)) {
+         throw Error('Mesh: parameters "xValues" and "zValues" must be vectors or arrays with values.');
+      }
+
+      const nbins = colmap.length;
+      const nx = yValues.nrows;
+      const nz = yValues.ncols;
+
+      const nr = range(yValues.v);
+      const dnr = (nr[1] - nr[0]) / 100;
+      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);
+      zMesh1Start = Vector.zeros((nx - 1) * nz);
+      yMesh1Start = Vector.zeros((nx - 1) * nz);
+
+      xMesh2Start = Vector.zeros((nx - 1) * nz);
+      zMesh2Start = Vector.zeros((nx - 1) * nz);
+      yMesh2Start = Vector.zeros((nx - 1) * nz);
+
+      meshColor1 = Vector.zeros((nx - 1) * nz);
+
+      xMesh1End = Vector.zeros((nx - 1) * nz);
+      zMesh1End = Vector.zeros((nx - 1) * nz);
+      yMesh1End = Vector.zeros((nx - 1) * nz);
+
+      xMesh2End = Vector.zeros((nx - 1) * nz);
+      zMesh2End = Vector.zeros((nx - 1) * nz);
+      yMesh2End = Vector.zeros((nx - 1) * nz);
+
+      meshColor2 = Vector.zeros((nx - 1) * nz);
+
+      let n1 = 0, n2 = 0;
+      for (let z = 0; z < nz; z++) {
+         for (let x = 0; x < nx; x++) {
+
+            if (x < nx - 1) {
+
+               // x-direction - start
+               xMesh1Start.v[n1] = xValues.v[x];
+               zMesh1Start.v[n1] = zValues.v[z];
+               yMesh1Start.v[n1] = yValues.v[z * nz + x];
+
+               // x-direction - end
+               xMesh1End.v[n1] = xValues.v[x + 1];
+               zMesh1End.v[n1] = zValues.v[z];
+               yMesh1End.v[n1] = yValues.v[z * nz + x + 1];
+
+               const colInd = Math.round(((yValues.v[z * nz + x] + yValues.v[z * nz + x + 1]) / 2 - left) / span * (nbins - 1));
+               meshColor1.v[n1] = colInd;
+               n1 = n1 + 1;
+            }
+
+            if (z < nz - 1) {
+
+               // z-direction - start
+               xMesh2Start.v[n2] = xValues.v[x];
+               zMesh2Start.v[n2] = zValues.v[z];
+               yMesh2Start.v[n2] = yValues.v[z * nz + x];
+
+               // z-direction - end
+               xMesh2End.v[n2] = xValues.v[x];
+               zMesh2End.v[n2] = zValues.v[z + 1];
+               yMesh2End.v[n2] = yValues.v[(z + 1) * nz + x];
+
+               const colInd = Math.round(((yValues.v[z * nz + x] + yValues.v[(z + 1) * nz + x]) / 2 - left) / span * (nbins - 1));
+               meshColor2.v[n2] = colInd;
+               n2 = n2 + 1;
+            }
+         }
+      }
+
+      xMesh1Start = xMesh1Start.copy()
+      xMesh1End = xMesh1End.copy()
+      yMesh1Start = yMesh1Start.copy()
+      yMesh1End = yMesh1End.copy()
+      zMesh1Start = zMesh1Start.copy()
+      zMesh1End = zMesh1End.copy()
+   };
+
+   let x11, y11, x12, y12;
+   let x21, y21, x22, y22;
+
+   $: {
+      if ($isOk) {
+         [x11, y11] = axes.transform(
+            cbind(
+               checkCoords(xMesh1Start, 'Segments'),
+               checkCoords(yMesh1Start, 'Segments'),
+               checkCoords(zMesh1Start, 'Segments')
+            ), $tM
+         );
+
+         [x12, y12] = axes.transform(
+            cbind(
+               checkCoords(xMesh1End, 'Segments'),
+               checkCoords(yMesh1End, 'Segments'),
+               checkCoords(zMesh1End, 'Segments')
+            ), $tM
+         );
+
+         [x21, y21] = axes.transform(
+            cbind(
+               checkCoords(xMesh2Start, 'Segments'),
+               checkCoords(yMesh2Start, 'Segments'),
+               checkCoords(zMesh2Start, 'Segments')
+            ), $tM
+         );
+
+         [x22, y22] = axes.transform(
+            cbind(
+               checkCoords(xMesh2End, 'Segments'),
+               checkCoords(yMesh2End, 'Segments'),
+               checkCoords(zMesh2End, 'Segments')
+            ), $tM
+         );
+      }
+   };
+
+   $: console.log(meshColor1)
+   $: lineStyleStr = `stroke-width: ${lineWidth}px;stroke-dasharray:${axes.LINE_STYLES[$scale][lineType-1]};`;
+</script>
+
+<g class="series series_mesh" style={lineStyleStr} data-title={title}>
+{#if $isOk }
+   {#each x11 as v, i}
+      <line vector-effect="non-scaling-stroke" x1={x11[i]} x2={x12[i]} y1={y11[i]} y2={y12[i]} style={`stroke:${colmap[meshColor1.v[i]]};`} />
+   {/each}
+   {#each x21 as v, i}
+      <line vector-effect="non-scaling-stroke" x1={x21[i]} x2={x22[i]} y1={y21[i]} y2={y22[i]} style={`stroke:${colmap[meshColor2.v[i]]};`} />
+   {/each}
+{/if}
+</g>
+

package/src/3d/Points.svelte

@@ -0,0 +1,61 @@
+<script>
+   /****************************************************
+   * ScatterSeries component                           *
+   * --------------------                              *
+   * shows a series of points on the plot              *
+   *                                                   *
+   *****************************************************/
+
+   import { Colors } from '../Colors';
+   import TextLabels from './TextLabels.svelte';
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+   // input parameters
+	export let xValues;
+   export let yValues;
+   export let zValues = undefined
+   export let marker = 1
+   export let title = "";
+   export let faceColor = "transparent";
+   export let borderColor = Colors.PRIMARY;
+   export let borderWidth = 1;
+   export let markerSize = 1;
+
+   /* constants for internal use */
+   const markers = ["●", "◼", "▲", "▼", "⬥", "+", "*", "⨯"];
+   let markerSymbol;
+
+   /* sanity check of input parameters */
+   if (typeof(marker) !== "number" || marker < 1 || marker > markers.length) {
+      throw(`ScatterSeries: parameter 'marker' must be a number from 1 to ${markers.length}."`);
+   }
+
+   // reactive variables for coordinates of data points in pixels (and line style)
+   $: markerSymbol = markers[marker - 1];
+</script>
+
+<TextLabels
+   {xValues} {yValues} {zValues} {faceColor} {borderColor} {borderWidth} {title}
+   className="series_scatter"
+   labels={markerSymbol}
+   textSize={markerSize}
+/>
+
+<style>
+   :global(.series_scatter > text) {
+      font-size: 1em;
+      cursor: default;
+   }
+
+   :global(.series_scatter > text:hover) {
+      opacity: 90%;
+   }
+
+   :global(.series_scatter > *:hover + .labels_hover) {
+      visibility: visible;
+      opacity: 1;
+   }
+</style>

package/src/3d/Segments.svelte

@@ -0,0 +1,69 @@
+<script>
+   /****************************************************
+   * Segments for 3D plot                              *
+   * --------------------                              *
+   * shows a series of line segments on the plot       *
+   *****************************************************/
+
+   import { cbind } from 'mdatools/arrays';
+   import { getContext } from 'svelte';
+   import { Colors } from '../Colors';
+   import { checkCoords } from '../Utils';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+   export let title = '';
+	export let xStart;
+   export let xEnd;
+   export let yStart;
+   export let yEnd;
+   export let zStart;
+   export let zEnd;
+
+   export let lineColor = Colors.PRIMARY;
+   export let lineType = 1;
+   export let lineWidth = 1;
+
+   // get axes context and reactive variables needed to compute coordinates
+   const axes = getContext('axes');
+   const scale = axes.scale;
+   const tM = axes.tM;
+   const isOk = axes.isOk;
+
+   let x1, y1, x2, y2 = undefined;
+   $: {
+      if ($isOk) {
+
+         [x1, y1] = axes.transform(
+            cbind(
+               checkCoords(xStart, 'Segments'),
+               checkCoords(yStart, 'Segments'),
+               checkCoords(zStart, 'Segments')
+            ), $tM
+         );
+
+         [x2, y2] = axes.transform(
+            cbind(
+               checkCoords(xEnd, 'Segments'),
+               checkCoords(yEnd, 'Segments'),
+               checkCoords(zEnd, 'Segments')
+            ), $tM
+         );
+
+      }
+   }
+
+   $: lineStyleStr = `stroke:${lineColor};stroke-width: ${lineWidth}px;stroke-dasharray:${axes.LINE_STYLES[$scale][lineType-1]}`;
+</script>
+
+<g class="series series_segment" data-title="{title}" style={lineStyleStr}>
+{#if $isOk && x1 !== undefined && y1 !== undefined && x2 !== undefined && y2 !== undefined}
+   {#each x1 as v, i}
+      <line vector-effect="non-scaling-stroke" x1={x1[i]} x2={x2[i]} y1={y1[i]} y2={y2[i]} />
+   {/each}
+{/if}
+</g>
+

package/src/3d/TextLabels.svelte

@@ -0,0 +1,79 @@
+<script>
+   /****************************************************
+   * TextLabels for 3D plots                           *
+   * -----------------------                           *
+   * shows a series of text labels on the plot         *
+   *****************************************************/
+
+   import { cbind } from 'mdatools/arrays';
+   import { getContext } from 'svelte';
+   import { Colors } from '../Colors';
+   import { checkCoords } from '../Utils';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+   export let title = '';
+	export let xValues;
+   export let yValues;
+   export let zValues;
+   export let labels;
+
+   export let faceColor = Colors.PRIMARY_TEXT;
+   export let borderColor = 'transparent';
+   export let borderWidth = 0;
+   export let textSize = 1;
+   export let className = 'series_textlabel';
+
+
+   // get axes context and reactive variables needed to compute coordinates
+   const axes = getContext('axes');
+   const tM = axes.tM;
+   const isOk = axes.isOk;
+
+   // compute screen coordinates
+   let x, y = undefined;
+   $: {
+      if ($isOk) {
+
+         [x, y] = axes.transform(
+            cbind(
+               checkCoords(xValues, 'TextValues'),
+               checkCoords(yValues, 'TextValues'),
+               checkCoords(zValues, 'TextValues')
+            ), $tM
+         );
+
+         if (Array.isArray(labels) && labels.length !== x.length ) {
+            throw('TextLabels: number of elements in "labels" does not match number of coordinates.')
+         }
+      }
+   }
+
+   // styles for the elements
+   $: textStyleStr = `dominant-baseline:middle;fill:${faceColor};stroke-width:${borderWidth}px;stroke:${borderColor};
+      font-size:${textSize}em; text-anchor:middle;`;
+</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={0} dy={0}>{@html labels}</text>
+   {/each}
+   {:else}
+   {#each x as v, i}
+      <text data-id={i} x={x[i]} y={y[i]} dx={0} dy={0}>{@html labels[i]}</text>
+   {/each}
+   {/if}
+</g>
+{/if}
+
+<style>
+   text, text > :global(tspan) {
+      dominant-baseline: middle;
+   }
+</style>

package/src/3d/XAxis.svelte

@@ -0,0 +1,123 @@
+<script>
+   /****************************************************
+   * X-Axis for 3D plots                               *
+   * --------------------                              *
+   * shows x-axis and its elements (ticks, grid, etc.) *
+   *****************************************************/
+
+   import { cbind, matrix, Vector } from 'mdatools/arrays';
+   import { getContext } from 'svelte';
+   import { Colors } from '../Colors';
+   import { getAxisTicks } from '../Utils.js';
+   import Axis from './Axis.svelte';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+   export let slot = 'xaxis';         // slot the component must be placed in
+   export let ticks = undefined;      // vector with numeric tick positions in plot units
+   export let tickLabels = ticks;     // vector with labels for each tick
+   export let showGrid = false;       // logical, show or not grid lines
+   export let title = '';             // axis title
+
+   export let lineColor = Colors.DARKGRAY;
+   export let gridColor = Colors.MIDDLEGRAY;
+   export let textColor = Colors.DARKGRAY;
+
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   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 zLim = axes.zLim;
+   const scale = axes.scale;
+   const isOk = axes.isOk;
+
+   // prepare variables for coordinates
+   let titleCoords = [];
+   let grid1 = [];
+   let grid2 = [];
+   let axisLine = [];
+   let tickCoords = [];
+
+   // compute tick x-coordinates
+   $: if ($isOk) {
+      const dX = ($xLim[1] - $xLim[0]) / 100; // 1% of axis size
+      const ticksX = getAxisTicks(ticks, $xLim, axes.TICK_NUM[$scale], true);
+      const tickNum = ticksX.length;
+
+      // compute tick y-coordinates (middle, up and bottom)
+      const dY = ($yLim[1] - $yLim[0]) / 100; // 1% of axis size
+      const ticksY  = Vector.fill($yLim[0], tickNum);
+      const ticksY1 = ticksY.subtract(dY * 1.5);
+      const ticksY2 = ticksY.add(dY * 1.5);
+      const ticksY3 = ticksY.subtract(dY * 5);
+
+      // tick z-coordinates (middle, up and bottom)
+      const dZ = ($zLim[1] - $zLim[0]) / 100; // 1% of axis size
+      const ticksZ  = Vector.fill($zLim[0], tickNum);
+      const ticksZ1 = ticksZ.subtract(dZ * 1.5);
+      const ticksZ2 = ticksZ.add(dZ * 1.5);
+      const ticksZ3 = ticksZ.subtract(dZ * 2);
+
+      // coordinates for the ends of grid
+      const gridYEnd = Vector.fill($yLim[1], tickNum);
+      const gridZEnd = Vector.fill($zLim[1], tickNum);
+
+      // tick labels
+      tickLabels = (ticks === undefined || tickLabels === undefined) ? ticksX.v : tickLabels;
+      if (tickLabels.length !== ticksX.length) {
+         throw Error('XAxis: "tickLabels" must be a array of the same size as ticks.');
+      }
+
+      // combine all coordinates together
+      grid1 = [
+         cbind(ticksX, ticksY, ticksZ),
+         cbind(ticksX, gridYEnd, ticksZ)
+      ];
+
+      grid2 = [
+         cbind(ticksX, ticksY, ticksZ),
+         cbind(ticksX, ticksY2, gridZEnd)
+      ];
+
+      axisLine = [
+         matrix([$xLim[0], $yLim[0], $zLim[0]], 1, 3),
+         matrix([$xLim[1], $yLim[0], $zLim[0]], 1, 3)
+      ]
+
+      tickCoords = [
+         cbind(ticksX, ticksY, ticksZ),   // middle point
+         cbind(ticksX, ticksY2, ticksZ),  // middle point with positive shift along Y
+         cbind(ticksX, ticksY, ticksZ2),  // middle point with positive shift along Z
+         cbind(ticksX, ticksY1, ticksZ1),  // middle point with negative shift along Y and Z
+         cbind(ticksX, ticksY3, ticksZ3)  // middle point with negative shift along Y and Z for ticks
+      ];
+
+      // here we do not need to make a matrix as the three values will be used as vectors
+      titleCoords = [
+         [$xLim[1] + 3 * dX], [$yLim[0] - 2 * dY], [$zLim[0] - 2 * dZ]
+      ];
+   }
+</script>
+
+{#if $isOk && axisLine.length > 0}
+<Axis
+   className="mdaplot__xaxis"
+   {title} {lineColor} {gridColor} {textColor} {titleCoords}
+   {showGrid} {grid1} {grid2} {axisLine} {tickCoords} {tickLabels}
+/>
+{/if}
+

package/src/3d/YAxis.svelte

@@ -0,0 +1,123 @@
+<script>
+   /****************************************************
+   * Y-Axis for 3D plots                               *
+   * --------------------                              *
+   * shows y-axis and its elements (ticks, grid, etc.) *
+   *****************************************************/
+
+   import { cbind, matrix, Vector } from 'mdatools/arrays';
+   import { getContext } from 'svelte';
+   import { Colors } from '../Colors';
+   import { getAxisTicks } from '../Utils.js';
+   import Axis from './Axis.svelte';
+
+
+   /*****************************************/
+   /* Input parameters                      */
+   /*****************************************/
+
+   export let slot = 'yaxis';         // slot the component must be placed in
+   export let ticks = undefined;      // vector with numeric tick positions in plot units
+   export let tickLabels = ticks;     // vector with labels for each tick
+   export let showGrid = false;       // logical, show or not grid lines
+   export let title = '';             // axis title
+
+   export let lineColor = Colors.DARKGRAY;
+   export let gridColor = Colors.MIDDLEGRAY;
+   export let textColor = Colors.DARKGRAY;
+
+
+   /*****************************************/
+   /* Component code                        */
+   /*****************************************/
+
+   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 zLim = axes.zLim;
+   const scale = axes.scale;
+   const isOk = axes.isOk;
+
+   // prepare variables for coordinates
+   let titleCoords = [];
+   let grid1 = [];
+   let grid2 = [];
+   let axisLine = [];
+   let tickCoords = [];
+
+   // compute tick x-coordinates
+   $: if ($isOk) {
+      const dY = ($yLim[1] - $yLim[0]) / 100; // 1% of axis size
+      const ticksY = getAxisTicks(ticks, $yLim, axes.TICK_NUM[$scale], true);
+      const tickNum = ticksY.length;
+
+      // compute tick y-coordinates (middle, up and bottom)
+      const dX = ($xLim[1] - $xLim[0]) / 100; // 1% of axis size
+      const ticksX  = Vector.fill($xLim[0], tickNum);
+      const ticksX1 = ticksX.subtract(dX * 1.5);
+      const ticksX2 = ticksX.add(dX * 1.5);
+      const ticksX3 = ticksX.subtract(dX * 3);
+
+      // tick z-coordinates (middle, up and bottom)
+      const dZ = ($zLim[1] - $zLim[0]) / 100; // 1% of axis size
+      const ticksZ  = Vector.fill($zLim[0], tickNum);
+      const ticksZ1 = ticksZ.subtract(dZ * 1.5);
+      const ticksZ2 = ticksZ.add(dZ * 1.5);
+      const ticksZ3 = ticksZ.subtract(dZ * 2);
+
+      // coordinates for the ends of grid
+      const gridXEnd = Vector.fill($xLim[1], tickNum);
+      const gridZEnd = Vector.fill($zLim[1], tickNum);
+
+      // tick labels
+      tickLabels = (ticks === undefined || tickLabels === undefined) ? ticksY.v : tickLabels;
+      if (tickLabels.length !== ticksY.length) {
+         throw Error('YAxis: "tickLabels" must be a array of the same size as ticks.');
+      }
+
+      // combine all coordinates together
+      grid1 = [
+         cbind(ticksX, ticksY, ticksZ),
+         cbind(gridXEnd, ticksY, ticksZ)
+      ];
+
+      grid2 = [
+         cbind(ticksX, ticksY, ticksZ),
+         cbind(ticksX, ticksY, gridZEnd)
+      ];
+
+      axisLine = [
+         matrix([$xLim[0], $yLim[0], $zLim[0]], 1, 3),
+         matrix([$xLim[0], $yLim[1], $zLim[0]], 1, 3)
+      ]
+
+      tickCoords = [
+         cbind(ticksX, ticksY, ticksZ),   // middle point
+         cbind(ticksX2, ticksY, ticksZ),  // middle point with positive shift along X
+         cbind(ticksX, ticksY, ticksZ2),  // middle point with positive shift along Z
+         cbind(ticksX1, ticksY, ticksZ1),  // middle point with negative shift along X and Z
+         cbind(ticksX3, ticksY, ticksZ3)  // middle point with negative shift along X and Z for ticks
+      ];
+
+      // here we do not need to make a matrix as the three values will be used as vectors
+      titleCoords = [
+         [$xLim[0] - 2 * dX], [$yLim[1] + 3 * dY], [$zLim[0] - 2 * dZ]
+      ];
+   }
+</script>
+
+{#if $isOk && axisLine.length > 0}
+<Axis
+   className="mdaplot__yaxis"
+   {title} {lineColor} {gridColor} {textColor} {titleCoords}
+   {showGrid} {grid1} {grid2} {axisLine} {tickCoords} {tickLabels}
+/>
+{/if}
+