svelte-plots-basic 1.1.3 → 2.0.1

package/src/LineSeries.svelte

@@ -1,50 +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 lineType = 1;
-
-   /* sanity check of input parameters */
-   if (!Array.isArray(xValues) || !Array.isArray(yValues) || xValues.length != yValues.length) {
-      throw("LineSeries: 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
-   $: 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;
-   $: lineStyleStr = `fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px;
-      stroke-dasharray:${axes.LINE_STYLES[$scale][lineType - 1]}`;
-</script>
-
-{#if p !== undefined}
-   <g class="series series_line" style={lineStyleStr} title={title}>
-      <polyline class="line" points={p}/>
-   </g>
-{/if}
-
-<style>
-</style>

package/src/Rectangles.svelte

@@ -1,64 +0,0 @@
-<script>
-   import { getContext } from 'svelte';
-   import { Colors } from './Colors';
-
-   /* input parameters */
-	export let left;
-   export let top;
-   export let width;
-   export let height;
-   export let labels = undefined;
-   export let faceColor = Colors.PRIMARY;
-   export let borderColor = faceColor;
-   export let lineWidth = 1;
-   export let title = "";
-   export let style = "series_rect";
-
-
-   // multiply width and height values if needed
-   if (!Array.isArray(left) || !Array.isArray(top) || left.length < 1 || left.length != top.length) {
-      throw("Rectangles: parameters 'left' and 'top' must be vectors of the same size.")
-   }
-
-   // we make this reactive in case if left and right has been changed but not width
-   const n = left.length;
-   if (!Array.isArray(height)) height = Array(n).fill(height);
-   if (!Array.isArray(width)) width = Array(n).fill(width);
-
-   /* sanity check for input parameters */
-   if (top.length !== n || width.length !== n || height.length !== n) {
-      throw("Rectangles: x, y, w and h should have the same length (w and h can be single values).")
-   }
-
-   if (labels !== undefined && (!Array.isArray(labels) || labels.length !== n)) {
-      throw("Rectangles: vector with labels should have the same length as vectors with x and y coordinates.")
-   }
-
-   // get axes context and reactive variables needed to compute coordinates
-   const axes = getContext('axes');
-   const xLim = axes.xLim;
-   const yLim = axes.yLim;
-   const axesWidth = axes.width;
-   const axesHeight = axes.height;
-
-   // reactive variables for coordinates of data points in pixels
-   $: rx = axes.scaleX(left, $xLim, $axesWidth);
-   $: ry = axes.scaleY(top, $yLim, $axesHeight);
-   $: rw = axes.scaleX(width, $xLim, $axesWidth, true);
-   $: rh = axes.scaleY(height, $yLim, $axesHeight, true);
-
-   // styles for bars and labels
-   $: barsStyleStr = `fill:${faceColor};stroke:${borderColor};stroke-width: ${lineWidth}px;`;
-
-</script>
-
-{#if rx !== undefined && ry !== undefined}
-   <g class="series {style}" 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}
-
-<style>
-</style>

package/src/ScatterSeries.svelte

@@ -1,85 +0,0 @@
-<script>
-
-   import { getContext } from 'svelte';
-   import { mrange } from 'mdatools/stat';
-   import { Colors } from './Colors';
-   import TextLabels from './TextLabels.svelte';
-
-   // input parameters
-	export let xValues;
-   export let yValues;
-   export let marker = 1
-   export let title = "";
-   export let faceColor = "transparent";
-   export let borderColor = Colors.PRIMARY;
-   export let borderWidth = 1;
-   export let markerSize = 1;
-
-   // TODO: implement later
-   //export let labels = yValues;
-   //export let showLabels = "no"; // can be "no", "hover", "always"
-
-   /* 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}."`);
-   }
-
-   // to access shared parameters and methods from Axes
-   const axes = getContext('axes');
-
-   /* reactive actions related to x-values, fires when there are changes in:
-    * - xValues
-    * - marker
-    */
-   $: {
-      if (!Array.isArray(xValues)) {
-         throw("ScatterSeries: parameter 'xValues' must be a numeric vector.");
-      }
-
-      const xValuesRange = mrange(xValues, 0.05);
-      axes.adjustXAxisLimits(xValuesRange);
-
-      markerSymbol = "";
-      markerSymbol = markers[marker - 1];
-   }
-
-   /* reactive actions related to y-values, fires when there are changes in:
-    * - yValues
-    */
-   $: {
-      if (!Array.isArray(yValues) || xValues.length != yValues.length) {
-         throw("BarSeries: parameter 'yValues' must be a numeric vector of the same length as 'xValues'.");
-      }
-
-      const yValuesRange = mrange(yValues, 0.05);
-      axes.adjustYAxisLimits(yValuesRange);
-   }
-</script>
-
-<TextLabels
-   {xValues} {yValues} {faceColor} {borderColor} {borderWidth} {title}
-   style="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/Segments.svelte

@@ -1,48 +0,0 @@
-<script>
-   import { getContext } from 'svelte';
-   import { Colors } from './Colors';
-
-   /* input parameters */
-	export let xStart;
-   export let xEnd;
-   export let yStart;
-   export let yEnd;
-   export let lineColor = Colors.PRIMARY;
-   export let lineType = 1;
-   export let lineWidth = 1;
-
-   /* sanity check for input parameters */
-   if (!Array.isArray(xStart) || !Array.isArray(xEnd) || !Array.isArray(yStart) || !Array.isArray(yEnd)) {
-      throw("Segments: parameters 'xStart', 'yStart', 'xEnd' and 'yEnd' must be vectors.")
-   }
-
-   const n = xStart.length;
-   if (xEnd.length !== n || yStart.length !== n || yEnd.length !== n) {
-      throw("Segments: parameters 'xStart', 'yStart', 'xEnd' and 'yEnd' should have the same length.")
-   }
-
-   // get axes context and reactive variables needed to compute coordinates
-   const axes = getContext('axes');
-   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 (and line style)
-   $: x1 = axes.scaleX(xStart, $xLim, $axesWidth);
-   $: x2 = axes.scaleX(xEnd, $xLim, $axesWidth);
-   $: y1 = axes.scaleY(yStart, $yLim, $axesHeight);
-   $: y2 = axes.scaleY(yEnd, $yLim, $axesHeight);
-   $: lineStyleStr = `stroke:${lineColor};stroke-width: ${lineWidth}px;stroke-dasharray:${axes.LINE_STYLES[$scale][lineType - 1]}`;
-
-</script>
-
-{#if x1 !== undefined && y1 !== undefined}
-   {#each x1 as v, i}
-      <line x1="{x1[i]}" x2="{x2[i]}" y1="{y1[i]}" y2="{y2[i]}" style="{lineStyleStr}"></line>
-   {/each}
-{/if}
-
-<style>
-</style>

package/src/TextLabels.svelte

@@ -1,78 +0,0 @@
-<script>
-   /****************************************************
-   * TextLabels component                              *
-   * --------------------                              *
-   * shows a series of text labels on the plot         *
-   * can be used as basis for marker plot              *
-   *****************************************************/
-
-   import { getContext } from 'svelte';
-   import { Colors } from './Colors';
-
-   // input parameters
-	export let xValues;
-   export let yValues;
-   export let labels;
-   export let pos = 0;
-   export let faceColor = Colors.PRIMARY_TEXT;
-   export let borderColor = "transparent";
-   export let borderWidth = 0;
-   export let textSize = 1;
-   export let style = "";
-   export let title = "series_text";
-
-   // text-anchor values depending on position
-   const textAnchors = ["middle", "middle", "start", "middle", "end"];
-
-   // sanity check for input parameters
-   if (!Array.isArray(xValues) || !Array.isArray(yValues) || xValues.length !== yValues.length) {
-      throw("TextLabels: parameters 'xValues' and 'yValues' must be vectors of the same length.")
-   }
-
-   // multiply label values if needed
-   $: {
-      const n = xValues.length;
-      if (!Array.isArray(labels)) labels = Array(n).fill(labels);
-
-      // workaround for an issue when xValues and yValues are changed in parent app
-      // but array of labels is still the same as in the
-      if (labels.length != n) labels = Array(n).fill(labels[0]);
-
-      // check that the length of labels vector is correct
-      if (labels.length !== n) {
-         throw("TextLabels: parameter 'labels' must be a single text value or a vector of the same size as 'x' and 'y'.")
-      }
-   }
-
-   // get axes context and reactive variables needed to compute coordinates
-   const axes = getContext('axes');
-   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
-   $: x = axes.scaleX(xValues, $xLim, $axesWidth);
-   $: y = axes.scaleY(yValues, $yLim, $axesHeight);
-   $: dx = [0, 0, 1, 0, -1][pos] * axes.LABELS_MARGIN[$scale];
-   $: dy = [0, 1, 0, -1, 0][pos] * axes.LABELS_MARGIN[$scale];
-
-   // styles for the elements
-   $: textStyleStr = `fill:${faceColor};stroke-width:${borderWidth}px;stroke:${borderColor};
-      font-size:${textSize}em; text-anchor:${textAnchors[pos]};`;
-</script>
-
-{#if x !== undefined && y !== undefined}
-   <g class="series {style}" title={title} style={textStyleStr} >
-   {#each x as v, i}
-      <text data-id={i} x={x[i]} y={y[i]} dx={dx} dy={dy}>{@html labels[i]}</text>
-   {/each}
-   </g>
-{/if}
-
-<style>
-   text, text > :global(tspan) {
-      dominant-baseline: middle;
-   }
-</style>

package/src/TextLegend.svelte

@@ -1,38 +0,0 @@
-<script>
-   import { getContext } from 'svelte';
-   import { Colors } from './Colors';
-
-   /* input parameters */
-	export let left;
-   export let top;
-   export let dx = "0";
-   export let dy = "1.25em";
-   export let elements;
-   export let faceColor = Colors.PRIMARY_TEXT;
-   export let borderColor = "transparent";
-   export let borderWidth = 0;
-   export let textSize = 1;
-
-   // get axes context and reactive variables needed to compute coordinates
-   const axes = getContext('axes');
-   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
-   $: x = axes.scaleX([left], $xLim, $axesWidth);
-   $: y = axes.scaleY([top], $yLim, $axesHeight);
-
-   // styles for bars and labels
-   $: textStyleStr = `fill:${faceColor};stroke-width:${borderWidth}px;stroke:${borderColor};font-size:${textSize}em;`;
-</script>
-
-{#if 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/XAxis.svelte

@@ -1,69 +0,0 @@
-<script>
-   import { getContext } from 'svelte';
-   import { Colors } from './Colors';
-
-   // 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
-
-   // set up tick mode
-   const tickMode = ticks === undefined ? "auto" : "manual";
-
-   /* sanity checks of input parameters */
-   if (slot !== "xaxis") {
-      throw("Component XAxis must have \"slot='xaxis'\" attribute.")
-   }
-
-   if (ticks !== undefined && !Array.isArray(ticks)) {
-      throw("XAxis: 'ticks' must be a vector of numbers.")
-   }
-
-   if (ticks !== undefined && !(Array.isArray(tickLabels) && tickLabels.length == ticks.length)) {
-      throw("XAxis: 'tickLabels' must be a vector of the same size as ticks.")
-   }
-
-   /* styles for axis and grid lines */
-   const axisLineStyleStr = `stroke:${Colors.DARKGRAY};line-width:1px;`;
-   const gridLineStyleStr = `stroke:${Colors.MIDDLEGRAY};stroke-opacity:${showGrid?1:0};stroke-dasharray:2px;`;
-
-
-   // get axes context and adjust x margins
-   const axes = getContext('axes');
-   axes.addXAxisMargins();
-
-   // 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;
-   const isOk = axes.isOk;
-
-   // reactive variables for coordinates of axis lines
-   $: x = axes.scaleX($xLim, $xLim, $axesWidth);
-   $: y = axes.scaleY($yLim, $yLim, $axesHeight);
-
-   // reactive variables for ticks and their coordinates
-   $: dy = $scale === "small" ? 7 : 10;
-   $: tickNum = axes.TICK_NUM[$scale];
-   $: ticks = tickMode === "auto" ? axes.getAxisTicks(undefined, $xLim, tickNum, true) : ticks;
-   $: tickLabels = tickMode === "auto" ? ticks : tickLabels;
-   $: ticksX = axes.scaleX(ticks, $xLim, $axesWidth);
-   $: ticksY = y === undefined ? undefined : [y[0], y[0] + dy];
-</script>
-
-{#if $isOk && x !== undefined && y !== undefined }
-   <g class="mdaplot__axis mdaplot__xaxis">
-   {#each ticksX as tx, i}
-      <line x1="{tx}" x2="{tx}" y1="{y[0]}" y2="{y[1]}" style="{gridLineStyleStr}"></line>
-      <line x1="{tx}" x2="{tx}" y1="{ticksY[0]}" y2="{ticksY[1]}" style="{axisLineStyleStr}"></line>
-      <text x="{tx}" y="{ticksY[1]}" dx="0" dy="{dy}" class="mdaplot__axis-labels" dominant-baseline="middle" text-anchor="middle">{tickLabels[i]}</text>
-   {/each}
-   <line x1="{x[0]}" x2="{x[1]}" y1="{y[0]}" y2="{y[0]}"  style="{axisLineStyleStr}"></line>
-   </g>
-{/if}
-
-<style>
-</style>

package/src/YAxis.svelte

@@ -1,72 +0,0 @@
-<script>
-   import { getContext } from 'svelte';
-   import { Colors } from './Colors';
-
-   // 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 las = 1;
-
-   // set up tick mode
-   const tickMode = ticks === undefined ? "auto" : "manual";
-
-   // TODO: set up tick text translation
-   const transform = las > 1 ? "" : "";
-
-   /* sanity checks of input parameters */
-   if (slot !== "yaxis") {
-      throw("Component YAxis must have \"slot='yaxis'\" attribute.")
-   }
-
-   if (ticks !== undefined && !Array.isArray(ticks)) {
-      throw("YAxis: 'ticks' must be a vector of numbers.")
-   }
-
-   if (ticks !== undefined && !(Array.isArray(tickLabels) && tickLabels.length == ticks.length)) {
-      throw("YAxis: 'tickLabels' must be a vector of the same size as ticks.")
-   }
-
-   /* styles for axis and grid lines */
-   const axisLineStyleStr = `stroke:${Colors.DARKGRAY};line-width:1px;`;
-   const gridLineStyleStr = `stroke:${Colors.MIDDLEGRAY};stroke-opacity:${showGrid?1:0};stroke-dasharray:2px;`;
-
-
-   // get axes context and adjust x margins
-   const axes = getContext('axes');
-   axes.addYAxisMargins();
-
-   // 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 axis lines
-   $: x = axes.scaleX($xLim, $xLim, $axesWidth);
-   $: y = axes.scaleY($yLim, $yLim, $axesHeight);
-
-   // reactive variables for ticks and their coordinates
-   $: dx = $scale === "small" ? -4 : -6;
-   $: tickNum = axes.TICK_NUM[$scale];
-   $: ticks = tickMode === "auto" ? axes.getAxisTicks(undefined, $yLim, tickNum, true) : ticks;
-   $: tickLabels = tickMode === "auto" ? ticks : tickLabels;
-   $: ticksY = axes.scaleY(ticks, $yLim, $axesHeight);
-   $: ticksX = x === undefined ? undefined : [x[0] + dx, x[0]];
-</script>
-
-{#if x !== undefined && y !== undefined }
-   <g class="mdaplot__axis mdaplot__yaxis">
-   {#each ticksY as ty, i}
-      <line x1="{x[0]}" x2="{x[1]}" y1="{ty}" y2="{ty}" style="{gridLineStyleStr}"></line>
-      <line x1="{ticksX[0]}" x2="{ticksX[1]}" y1="{ty}" y2="{ty}" style="{axisLineStyleStr}" ></line>
-      <text x="{ticksX[0]}" y="{ty}" dx="{dx}" dy="{0}" {transform} style="background:red" class="mdaplot__axis-labels" dominant-baseline="middle" text-anchor="end">{tickLabels[i]}</text>
-   {/each}
-   <line x1="{x[0]}" x2="{x[0]}" y1="{y[0]}" y2="{y[1]}" style="{axisLineStyleStr}" ></line>
-   </g>
-{/if}
-
-<style>
-</style>