svelte-plots-basic 1.1.4 → 2.1.0

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,69 +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}
-/>
-

package/src/Segments.svelte

@@ -1,52 +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;
-   export let title = "";
-   export let style = "series_seg";
-
-   /* 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}
-   <g class="series {style}" title={title} style={lineStyleStr}>
-   {#each x1 as v, i}
-      <line x1={x1[i]} x2={x2[i]} y1={y1[i]} y2={y2[i]}></line>
-   {/each}
-   </g>
-{/if}
-
-<style>
-</style>

package/src/TextLabels.svelte

@@ -1,88 +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';
-   import { subset } from 'mdatools/stat';
-   import { vmult } from 'mdatools/matrix';
-
-   // 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";
-
-
-   // function to prepare values for variables 'label' and 'pos'
-   function processValues(v, n, name) {
-      if (!Array.isArray(v)) return Array(n).fill(v);
-      if (v.length !== n) {
-         throw(`TextLabels: parameter ${name} must be a single number or a vector of the same size as 'x' and 'y'.`)
-      }
-      return v;
-   }
-
-   // 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.")
-   }
-
-   // prepare values for labels and positions
-   $: labelsLocal = processValues(labels, xValues.length);
-   $: posLocal = pos === 0 ? pos : processValues(pos, xValues.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
-   $: x = axes.scaleX(xValues, $xLim, $axesWidth);
-   $: y = axes.scaleY(yValues, $yLim, $axesHeight);
-   $: dx = pos === 0 ? 0 : subset(vmult([0, 1, 0, -1], axes.LABELS_MARGIN[$scale]), posLocal)
-   $: dy = pos === 0 ? 0 : subset(vmult([1, 0, -1, 0], axes.LABELS_MARGIN[$scale]), posLocal)
-   $: textAnchors = pos === 0 ? "middle" : subset([ "middle", "start", "middle", "end"], posLocal);
-
-   // 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 x !== undefined && y !== undefined}
-   <g class="series {style}" title={title} style={textStyleStr} >
-
-   {#if pos === 0}
-   {#each x as v, i}
-      <text data-id={i} x={x[i]} y={y[i]}>{@html labelsLocal[i]}</text>
-   {/each}
-
-   {:else}
-   {#each x as v, i}
-      <text data-id={i} x={x[i]} y={y[i]} dx={dx[i]} dy={dy[i]} text-anchor={textAnchors[i]}>{@html labelsLocal[i]}</text>
-   {/each}
-   {/if}
-
-   </g>
-{/if}
-
-<style>
-   text, text > :global(tspan) {
-      cursor: default;
-      user-select: none;
-      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>

package/src/index.js

@@ -1,16 +0,0 @@
-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 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 { Colors } from './Colors.js';