svelte-plots-basic 1.1.4 → 2.1.0

package/src/3d/ZAxis.svelte

@@ -0,0 +1,123 @@
+<script>
+   /****************************************************
+   * Z-Axis for 3D plots                               *
+   * --------------------                              *
+   * shows z-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 = 'zaxis';         // 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 !== 'zaxis') {
+      throw('Component ZAxis must have "slot=\'zaxis\'" attribute.');
+   }
+
+   // get axes context
+   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 dZ = ($zLim[1] - $zLim[0]) / 100; // 1% of axis size
+      const ticksZ = getAxisTicks(ticks, $zLim, axes.TICK_NUM[$scale], true);
+      const tickNum = ticksZ.length;
+
+      // compute tick x-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 * 1);
+
+      // tick y-coordinates
+      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);
+
+      // coordinates for the ends of grid
+      const gridXEnd = Vector.fill($xLim[1], tickNum);
+      const gridYEnd = Vector.fill($yLim[1], tickNum);
+
+      // tick labels
+      tickLabels = (ticks === undefined || tickLabels === undefined) ? ticksZ.v : tickLabels;
+      if (tickLabels.length !== ticksZ.length) {
+         throw Error('ZAxis: "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, gridYEnd, ticksZ)
+      ];
+
+      axisLine = [
+         matrix([$xLim[0], $yLim[0], $zLim[0]], 1, 3),
+         matrix([$xLim[0], $yLim[0], $zLim[1]], 1, 3)
+      ]
+
+      tickCoords = [
+         cbind(ticksX, ticksY, ticksZ),   // middle point
+         cbind(ticksX2, ticksY, ticksZ),  // middle point with positive shift along X
+         cbind(ticksX, ticksY2, ticksZ),  // middle point with positive shift along Y
+         cbind(ticksX1, ticksY1, ticksZ), // middle point with negative shift along X and Y
+         cbind(ticksX3, ticksY3, ticksZ)  // middle point with negative shift along X and Y 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[0] - 2 * dY], [$zLim[1] + 3 * dZ]
+      ];
+   }
+</script>
+
+{#if $isOk && axisLine.length > 0}
+<Axis
+   className="mdaplot__zaxis"
+   {title} {lineColor} {gridColor} {textColor} {titleCoords}
+   {showGrid} {grid1} {grid2} {axisLine} {tickCoords} {tickLabels}
+/>
+{/if}
+

package/src/3d/index.js

@@ -0,0 +1,13 @@
+export { default as Axes } from './Axes.svelte';
+
+export { default as XAxis } from './XAxis.svelte';
+export { default as YAxis } from './YAxis.svelte';
+export { default as ZAxis } from './ZAxis.svelte';
+
+export { default as TextLabels } from './TextLabels.svelte';
+export { default as Segments } from './Segments.svelte';
+export { default as Lines } from './Lines.svelte';
+export { default as Mesh } from './Mesh.svelte';
+export { default as Points } from './Points.svelte';
+
+export { getcolmap, Colors } from '../Colors.js';

package/src/Colors.js

@@ -7,9 +7,44 @@ export const Colors = {
    "MIDDLEGRAY": "#dadada",
    "LIGHTGRAY": "#f0f0f0",
    "DARKGRAY":  "#606060",
+   "LEGEND": "#303030",
 
-   "PRIMARY": "#2266ff",
+   "PRIMARY": "#2679B2",
    "PRIMARY_TEXT": "#333",
 }
 
 
+/**
+ * Returns an array with 'n' colors.
+ *
+ * @param {number} n - number of colors to return.
+ *
+ * @returns {Array} array with colors as strings (hexadecimal).
+ *
+ */
+export function getcolmap(n) {
+   if (n ==  1) return ["#2679B2"];
+   if (n ==  2) return ["#2679B2", "#D22C2F"];
+   if (n ==  3) return ["#2679B2", "#92B42A", "#D22C2F"];
+   if (n ==  4) return ["#2679B2", "#2E9658", "#F2B825", "#D22C2F"];
+   if (n ==  5) return ["#2679B2", "#22988A", "#92B42A", "#F79426", "#D22C2F"];
+   if (n ==  6) return ["#2679B2", "#1C9AA8", "#379531", "#EED524", "#FB7F28", "#D22C2F"];
+   if (n ==  7) return ["#2679B2", "#1D94A9", "#2E9658", "#92B42A", "#F2B825", "#F47129", "#D22C2F"];
+   if (n ==  8) return ["#2679B2", "#1E90AA", "#279775", "#519E2F", "#D3CB25", "#F5A326", "#EF672A", "#D22C2F"];
+   if (n ==  9) return ["#2679B2", "#1F8DAB", "#22988A", "#33953F", "#92B42A", "#EFCA24", "#F79426", "#EB5F2A", "#D22C2F"];
+   if (n == 10) return ["#2679B2", "#208BAC", "#1E999A", "#2E9658", "#5FA32E", "#C5C626", "#F2B825", "#F98827", "#E85A2B", "#D22C2F"];
+   if (n == 11) return ["#2679B2", "#2089AD", "#1C9AA8", "#29976C", "#379531", "#92B42A", "#EED524", "#F4AA26", "#FB7F28",
+      "#E6552B", "#D22C2F"];
+   if (n == 12) return ["#2679B2", "#2188AD", "#1C97A8", "#25987C", "#329546", "#68A62D", "#BCC327", "#F0C524", "#F69E26",
+      "#F77728", "#E4512B", "#D22C2F"];
+   if (n == 13) return ["#2679B2", "#2186AD", "#1D94A9", "#22988A", "#2E9658", "#469A2F", "#92B42A", "#DECF25", "#F2B825",
+      "#F79426", "#F47129", "#E34E2C", "#D22C2F"];
+   if (n == 14) return ["#2679B2", "#2285AE", "#1E92AA", "#209995", "#2A9767", "#34953A", "#6FA82D", "#B5C128", "#EFCE24", "#F3AD25",
+      "#F98C27", "#F16B29", "#E14B2C", "#D22C2F"];
+   if (n == 15) return ["#2679B2", "#2284AE", "#1E90AA", "#1D999F", "#279775", "#31964A", "#519E2F", "#92B42A", "#D3CB25", "#F0C224",
+      "#F5A326", "#FA8527", "#EF672A", "#E0492C", "#D22C2F"];
+
+   // if n > 15 return 16 colors
+   return ["#2679B2", "#2283AE", "#1F8FAB", "#1C9AA8", "#249880", "#2E9658", "#379531", "#73AA2C", "#B0BF28", "#EDD424", "#F2B825",
+      "#F69B26", "#FB7F28", "#ED632A", "#DF472C", "#D22C2F"];
+}

package/src/Utils.js

@@ -0,0 +1,243 @@
+import { cbind, vector, isvector, Vector } from 'mdatools/arrays';
+import { min, max, diff } from 'mdatools/stat';
+
+
+/**
+ * Generate vector with axis tick labels and tick factor based on numeric tick values.
+ *
+ * @param {Vector} ticks - vector with numeric tick values.
+ *
+ * @returns {Array} an array with tick factor and array with tick labels.
+ */
+export function getTickLabels(ticks) {
+
+   if (ticks === undefined) return undefined;
+
+   const step = Math.abs(min(diff(ticks)));
+   let tickFactor = 0;
+   if (step < 1 && Math.abs(max(ticks)) < 1) {
+      // values between 0 and 1 (absolute)
+      let decNum = Math.ceil(-Math.log10(step));
+      if (decNum <= 2) {
+         return [0, Array.from(ticks).map(v => v.toFixed(decNum).toString())];
+      }
+      tickFactor = decNum - 2;
+      decNum = 2;
+      return [-tickFactor, Array.from(ticks).map(v => (v * Math.pow(10, tickFactor)).toFixed(decNum).toString())];
+   } else {
+      let decNum = Math.ceil(Math.log10(step));
+      if (decNum <= 2) {
+         return [0, Array.from(ticks).map(v => v.toString())];
+      }
+      tickFactor = decNum - 2;
+      decNum = 2;
+      return [tickFactor, Array.from(ticks).map(v => (v / Math.pow(10, tickFactor)).toString())];
+   }
+}
+
+
+/**
+ * Check coordinates and convert them to vector if necessary.
+ *
+ * @param {Array|Vector} x - vector or array with coordinates.
+ * @param {string} source - name of component which called the method (needed for error message).
+ *
+ * @returns {Vector}
+ *
+ */
+export function checkCoords(x, source) {
+
+   if (Array.isArray(x)) {
+      x = vector(x);
+   }
+
+   if (!isvector(x)) {
+      throw Error(source + ": coordinates must be provided as array or instance of Vector class.");
+   }
+
+   if (x.length < 1) {
+      throw Error(source + ": vector with coordinates is empty.");
+   }
+
+   return x;
+}
+
+
+/**
+ * Create string with coordinates of SVG polygon in 3D.
+ *
+ * @param {Array|Vector} x - vector with x-coordinates of polygon points.
+ * @param {Array|Vector} y - vector with y-coordinates of polygon points.
+ * @param {Array|Vector} z - vector with y-coordinates of polygon points.
+ * @param {Array} tM - transformation matrix for 3D->2D (from 'Axes').
+ * @param {Object} axes - JSON with Axes context.
+ *
+ * @returns {string} string with coordinates.
+ *
+ */
+export function val2p3d(x, y, z, tM, axes) {
+
+   if (x === undefined || y === undefined) return undefined;
+
+   const [px, py] = axes.transform(cbind(checkCoords(x), checkCoords(y), checkCoords(z)), tM);
+
+   if (px.length !== py.length) {
+      throw Error('PlotSeries: parameters "xValues", "yValues" and "zValues" must be numeric vectors of the same length.');
+   }
+
+   let p = "";
+   for (let i = 0; i < px.length; i++) {
+      p += px[i] + "," + py[i] + " ";
+   }
+
+   return p;
+}
+
+
+/**
+ * Create string with coordinates of SVG polygon.
+ *
+ * @param {Array|Vector} x - vector with x-coordinates of polygon points.
+ * @param {Array|Vector} y - vector with y-coordinates of polygon points.
+ * @param {Array} tX - transformation parameters for x-coordinates (from 'Axes').
+ * @param {Array} tY - transformation parameters for y-coordinates (from 'Axes').
+ * @param {Object} axes - JSON with Axes context.
+ *
+ * @returns {string} string with coordinates.
+ *
+ */
+export function val2p(x, y, tX, tY, axes) {
+
+   if (x === undefined || y === undefined) return undefined;
+
+   const px = axes.transform(checkCoords(x), tX.coords);
+   const py = axes.transform(checkCoords(y), tY.coords);
+
+   if (px.length != py.length) {
+      throw Error('PlotSeries: parameters "xValues" and "yValues" must be numeric vectors of the same length.');
+   }
+
+   let p = "";
+   for (let i = 0; i < px.length; i++) {
+      p += px[i] + "," + py[i] + " ";
+   }
+
+   return p;
+}
+
+/**
+ * Computes nice tick values for axis.
+ *
+ * @param {Array} ticks - vector with ticks if alredy available (if not, new will be computed).
+ * @param {Array} lim - vector with axis limits tickets must be computed for.
+ * @param {number} maxTickNum - maximum number of ticks to compute.
+ * @param {boolean} round - round or not the fractions when computing nice numbers for the ticks.
+ *
+ * @returns {Array} an array with computed tick positions.
+ *
+ */
+export function getAxisTicks(ticks, lim, maxTickNum, round = true) {
+
+   // if ticks are already provided do not recompute them
+   if (ticks !== undefined) {
+      if (Array.isArray(ticks)) {
+         ticks = vector(ticks);
+      }
+
+      if (!isvector(ticks)) {
+         throw Error('getAxisTicks: axis ticks must be provided as an array or as a vector.');
+      }
+
+      return ticks.filter(x => x >= lim[0] & x <= lim[1]);
+   }
+
+   // check if limits are ok
+   if (typeof(lim) !== "object" || lim[0] === undefined || lim[1] === undefined) return undefined;
+
+   // get range as a nice number and compute min, max and steps for the tick sequence
+   const delta = (lim[1] - lim[0]) / 50;
+   const range = niceNum(lim[1] - lim[0] - 1 * delta, round);
+   const tickSpacing = niceNum(range / (maxTickNum - 1), round);
+   const tickMin = Math.ceil((lim[0] + delta) / tickSpacing) * tickSpacing;
+   const tickMax = Math.floor((lim[1] - delta) / tickSpacing) * tickSpacing;
+
+   // recompute maxTickNum
+   maxTickNum = Math.round((tickMax - tickMin + 1) / tickSpacing) + 1;
+
+   // create a sequence of ticks
+   ticks = Vector.seq(tickMin, tickMax, tickSpacing);
+
+   // if step is smaller than 1 round values to remove small decimals accidentially added by JS
+   if (Math.abs(tickSpacing) < 1) {
+      const decNum = Math.round(-Math.log10(tickSpacing));
+      const r = Math.pow(10, 1 + Math.round(-Math.log10(tickSpacing)));
+      ticks = ticks.apply(v => (Math.round((v + Number.EPSILON) * r) / r));
+   }
+
+   // make sure the ticks are not aligned with axes limits
+   return ticks.filter(x => x >= lim[0] & x <= lim[1]);
+}
+
+
+/**
+ * Computes a nice spacing value for a given range.
+ *
+ * @param {Number} localRange - a range (max - min).
+ * @param {boolean} round - round or not the fractions when computing the number.
+ *
+ * @returns {Number} the computed spacing value.
+ *
+ */
+export function niceNum( localRange,  round) {
+
+   const exponent = Math.floor(Math.log10(localRange));
+   const fraction = localRange / Math.pow(10, exponent);
+   let niceFraction;
+
+   if (round) {
+      if (fraction < 1.5)
+         niceFraction = 1;
+      else if (fraction < 3)
+         niceFraction = 2;
+      else if (fraction < 7)
+         niceFraction = 5;
+      else
+         niceFraction = 10;
+   } else {
+      if (fraction <= 1)
+         niceFraction = 1;
+      else if (fraction <= 2)
+         niceFraction = 2;
+      else if (fraction <= 5)
+         niceFraction = 5;
+      else
+         niceFraction = 10;
+   }
+
+   return niceFraction * Math.pow(10, exponent);
+}
+
+
+/**
+ * Rounds coordinate values to single decimal
+ */
+export function roundCoords(x) {
+   return Math.round(x * 10) / 10
+}
+
+
+/**
+ * Computes a scale level.
+ *
+ * @param {numeric} width - width of plotting area in pixels.
+ * @param {numeric} height - height of plotting area in pixels.
+ *
+ * @returns {text} the scale level ("small", "medium" or "large").
+ *
+ */
+export function getScale(width, height) {
+   if (height < 300.2 || width < 300.2) return "small";
+   if (height < 600.2 || width < 600.2) return "medium";
+   if (height < 850.2 || width < 850.2) return "large";
+   return "xlarge";
+}

package/src/AreaSeries.svelte

@@ -1,53 +0,0 @@
-<script>
-
-   import { getContext } from 'svelte';
-   import { mrange } from 'mdatools/stat';
-   import { Colors } from './Colors';
-
-   // input parameters
-	export let xValues;
-   export let yValues;
-   export let title = "";
-   export let lineWidth = 1;
-   export let lineColor = Colors.PRIMARY;
-   export let fillColor = Colors.PRIMARY;
-   export let opacity = 1;
-   export let lineType = 1;
-
-   /* sanity check of input parameters */
-   if (!Array.isArray(xValues) || !Array.isArray(yValues) || xValues.length != yValues.length) {
-      throw("AreaSeries: parameters 'xValues' and 'yValues' must be numeric vectors of the same length.");
-   }
-
-   // compute ranges for x and y values
-   const xValuesRange = mrange(xValues, 0.05);
-   const yValuesRange = mrange(yValues, 0.05);
-
-   // get axes context and adjust axes limits
-   const axes = getContext('axes');
-   axes.adjustXAxisLimits(xValuesRange);
-   axes.adjustYAxisLimits(yValuesRange);
-
-   // get reactive variables needed to compute coordinates
-   const xLim = axes.xLim;
-   const yLim = axes.yLim;
-   const axesWidth = axes.width;
-   const axesHeight = axes.height;
-   const scale = axes.scale;
-
-   // reactive variables for coordinates of data points in pixels
-   $: y0 = axes.scaleY([0], $yLim, $axesHeight);
-   $: x = axes.scaleX(xValues, $xLim, $axesWidth);
-   $: y = axes.scaleY(yValues, $yLim, $axesHeight);
-   $: p = x !== undefined && y !== undefined ? x.map((v, i) => `${v},${y[i]}`).join(' ') : undefined;
-   $: areaStyleStr = `opacity:${opacity};fill:${fillColor};stroke:${lineColor};stroke-width: ${lineWidth}px;stroke-dasharray:${axes.LINE_STYLES[$scale][lineType - 1]}`;
-</script>
-
-{#if p !== undefined}
-   <g class="series lineseries" style="{areaStyleStr}" title="{title}">
-   <polygon points="{x[0] + "," + y0 + " " + p + " " + x[x.length - 1] + "," + y0[0]}"/>
-   </g>
-{/if}
-
-<style>
-</style>