svelte-plots-basic 1.0.0

package/src/LineSeries.svelte

@@ -0,0 +1,50 @@
+<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 lineseries" style="{lineStyleStr}" title="{title}">
+   <polyline class="line" points="{p}"/>
+   </g>
+{/if}
+
+<style>
+</style>

package/src/Rectangles.svelte

@@ -0,0 +1,58 @@
+<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;
+
+   // styles for bars and labels
+   const barsStyleStr = `fill:${faceColor};stroke:${borderColor};stroke-width: ${lineWidth}px;`;
+
+   // 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);
+</script>
+
+{#if rx !== undefined && ry !== undefined}
+   {#each left as v, i}
+      <rect x="{rx[i]}" y="{ry[i]}" width="{rw[i]}" height="{rh[i]}" style="{barsStyleStr}"></rect>
+   {/each}
+{/if}
+
+<style>
+</style>

package/src/ScatterSeries.svelte

@@ -0,0 +1,81 @@
+<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"
+
+   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>
+
+<g class="series series_scatter" title="{title}">
+   <TextLabels {xValues} {yValues} labels="{markerSymbol}" textSize="{markerSize}" {faceColor} {borderColor} {borderWidth} />
+</g>
+
+<style>
+:global(.marker) {
+   font-size: 1em;
+   cursor: default;
+}
+
+:global(.marker:hover) {
+   opacity: 90%;
+}
+
+:global(.series_scatter > *:hover + .labels_hover) {
+   visibility: visible;
+   opacity: 1;
+}
+</style>

package/src/Segments.svelte

@@ -0,0 +1,48 @@
+<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

@@ -0,0 +1,63 @@
+<script>
+   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;
+
+   // 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 labels 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 bars and labels
+   $: textStyleStr = `fill:${faceColor};stroke-width:${borderWidth}px;stroke:${borderColor};font-size:${textSize}em;`;
+</script>
+
+{#if x !== undefined && y !== undefined}
+   {#each x as v, i}
+      <text style={textStyleStr} x={x[i]} y={y[i]} dx={dx} dy={dy} dominant-baseline="middle" text-anchor={textAnchors[pos]}>{@html labels[i]}</text>
+   {/each}
+{/if}
+
+<style>
+</style>

package/src/TextLegend.svelte

@@ -0,0 +1,38 @@
+<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={x} dx={dx} dy={i === 0 ? 0 : dy}>{@html el}</tspan>
+      {/each}
+   </text>
+{/if}

package/src/XAxis.svelte

@@ -0,0 +1,69 @@
+<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

@@ -0,0 +1,72 @@
+<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

@@ -0,0 +1,16 @@
+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';