svelte-plots-basic 1.1.2 → 1.1.4

package/README.md

@@ -2,9 +2,8 @@
 
 ## Description
 
-`svelte-plots-basic` is a [Svelte](https://svelte.dev) component library for creating very simple 2D plots/charts. It is currently under active development and breaking changes may occur. In its current state (v. 1.1.2) it allows to create bar, scatter, area and line charts as well as any combination of the four. The charts are created using [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) and are re-scalable.
+`svelte-plots-basic` is a [Svelte](https://svelte.dev) component library for creating very simple 2D plots/charts. It is currently under active development and breaking changes may occur. In its current state (v. 1.1.4) it allows to create bar, scatter, area and line charts as well as any combination of the four. The charts are created using [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) and are re-scalable.
 
-The description is not complete yet and will be updated during February-March of 2022.
 
 ## Installation
 
@@ -52,7 +51,7 @@ Just create a new Svelte app following the [quick start guide](https://svelte.de
 </div>
 ```
 
-Then run `npm run dev` in terminal and open `localhost:5000` in browser. That is it.
+Then run `npm run dev` in terminal and open the URL provided by npm in browser. That is it.
 
 Example below shows how to create a plot with axis, box and grid as well as how to combine several plot series together.
 

package/package.json

@@ -1,35 +1,24 @@
 {
-  "name": "svelte-plots-basic",
-  "svelte": "src/index.js",
-  "module": "dist/index.mjs",
-  "main": "dist/index.js",
-  "scripts": {
-    "build": "rollup -c",
-    "prepublishOnly": "npm run build"
-  },
-  "devDependencies": {
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "rollup": "^2.0.0",
-    "rollup-plugin-svelte": "^6.0.0",
-    "svelte": "^3.0.0"
-  },
-  "dependencies": {
-    "mdatools": "^0.5.3"
-  },
-  "keywords": [
-    "svelte",
-    "svelte plots"
-  ],
-  "files": [
-    "src",
-    "dist"
-  ],
-  "description": "Svelte components for creating simple plots",
-  "version": "1.1.2",
-  "repository": {
-    "type": "git",
-    "url": "svkucheryavski/svelte-plots-basic"
-  },
-  "author": "Sergey Kucheryavskiy",
-  "license": "MIT"
+   "name": "svelte-plots-basic",
+   "description": "Svelte components for creating simple plots",
+   "version": "1.1.4",
+   "author": "Sergey Kucheryavskiy",
+   "license": "MIT",
+   "private": false,
+   "main": "src/index.js",
+
+   "dependencies": {
+      "mdatools": "^0.6.1"
+   },
+   "keywords": [
+      "svelte",
+      "svelte plots"
+   ],
+   "files": [
+      "src"
+   ],
+   "repository": {
+      "type": "git",
+      "url": "svkucheryavski/svelte-plots-basic"
+   }
 }

package/src/Axes.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { setContext, createEventDispatcher, onMount } from 'svelte';
+	import { setContext, createEventDispatcher, onMount, onDestroy } from 'svelte';
 	import { writable } from 'svelte/store';
 
    /* input parameters */
@@ -118,6 +118,13 @@
       return adjustedLim;
    }
 
+   /**
+    * Rounds coordinate values to single decimal
+   */
+   const roundCoords = function(x) {
+      return Math.round(x * 10) / 10
+   }
+
    /** Rescales x-values from plot coordinates to screen (SVG) coordinates
     *  @param {Array} x - vector with coordinates (or objects size) in original plot coordinates
     *  @param {Array} xLim - vector with current limits for x-axis in original plot coordinates
@@ -126,14 +133,16 @@
     *  @returns {Array} vector with rescaled values
     */
    const scaleX = function(x, xLim, width, doSizeScale = false) {
-      if (!$isOk  || x === undefined || !Array.isArray(x)) return undefined;
+      if (!$isOk  || x === undefined || !Array.isArray(x)) return undefined;
 
       if (doSizeScale) {
          // scale size of objects instead of coordinates
-         return x.map(v => v / (xLim[1] - xLim[0]) * (width - margins[1] - margins[3]));
+         return x.map(v => roundCoords(v / (xLim[1] - xLim[0]) * (width - margins[1] - margins[3])));
       }
 
-      return x.map(v => (v - xLim[0]) / (xLim[1] - xLim[0]) * (width - margins[1] - margins[3]) + margins[1]);
+      return x.map(v =>
+         roundCoords((v - xLim[0]) / (xLim[1] - xLim[0]) * (width - margins[1] - margins[3]) + margins[1])
+      );
    }
 
    /** Rescales x-values from plot coordinates to screen (SVG) coordinates
@@ -144,15 +153,17 @@
     *  @returns {Array} vector with rescaled values
     */
    const scaleY = function(y, yLim, height, doSizeScale = false) {
-      if (!$isOk  || y === undefined || !Array.isArray(y)) return undefined;
+      if (!$isOk  || y === undefined || !Array.isArray(y)) return undefined;
 
       if (doSizeScale) {
          // scale size of objects instead of coordinates
-         return y.map(v => v / (yLim[1] - yLim[0]) * (height - margins[0] - margins[2]));
+         return y.map(v => roundCoords(v / (yLim[1] - yLim[0]) * (height - margins[0] - margins[2])));
       }
 
       // for coordinates we also need to invert (flip) the y-axis
-      return y.map(v => (yLim[1] - v) / (yLim[1] - yLim[0]) * (height - margins[0] - margins[2]) + margins[2]);
+      return y.map(v =>
+         roundCoords((yLim[1] - v) / (yLim[1] - yLim[0]) * (height - margins[0] - margins[2]) + margins[2])
+      );
    }
 
    /** Computes nice tick values for axis
@@ -317,22 +328,32 @@
    $: cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1];
    $: cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0];
 
-   /* observer for the plotting area size */
-    var ro = new ResizeObserver(entries => {
+   /* observer for the axes area size - to update size of axes */
+    const ro2 = new ResizeObserver(entries => {
        for (let entry of entries) {
-
-         const pcr = plotElement.getBoundingClientRect();
          const acr = axesElement.getBoundingClientRect();
-
          width.update(x => acr.width);
          height.update(x => acr.height);
+       }
+    });
+
+   /* observer for the plot area size — to update scale */
+    const ro1 = new ResizeObserver(entries => {
+       for (let entry of entries) {
+         const pcr = plotElement.getBoundingClientRect();
          scale.update(x => getScale(pcr.width, pcr.height));
        }
     });
 
     onMount(() => {
-       ro.observe(plotElement);
+       ro1.observe(plotElement);
+       ro2.observe(axesElement);
     });
+
+    onDestroy(() => {
+       ro1.unobserve(plotElement);
+       ro2.unobserve(axesElement);
+    })
 </script>
 
 
@@ -345,7 +366,7 @@
 
    <!-- axes (coordinate system) -->
    <div class="axes-wrapper" bind:this={axesElement} >
-      <svg on:click={handleClick} preserveAspectRatio="none" class="axes">
+      <svg on:click={handleClick} on:keydown={handleClick} preserveAspectRatio="none" class="axes">
 
          <!-- define clipping path -->
          <defs>
@@ -367,26 +388,26 @@
          <slot name="box"></slot>
 
       </svg>
-   </div>
-
    {#if !$isOk}
    <p class="message_error">
       Axes component was not properly initialized. <br />
       Add plot series (check that coordinates are numeric) or define axes limits manually.
    </p>
    {/if}
+   </div>
+
 
 </div>
 
 <style>
 
    /* Plot (main container) */
-   :global(.plot) {
+   .plot {
       font-family: Arial, Helvetica, sans-serif;
 
       display: grid;
-      grid-template-columns: min-content 1fr;
-      grid-template-rows: auto 1fr auto;
+      grid-template-columns: min-content auto;
+      grid-template-rows: min-content auto min-content;
       grid-template-areas:
          ". title"
          "ylab axes"
@@ -425,7 +446,8 @@
    :global(.message_error) {
       font-size: 1.2em;
       color: crimson;
-      padding: 20px;
+      padding: 1em;
+      box-sizing: border-box;
       text-align: center;
    }
 

package/src/BarSeries.svelte

@@ -66,13 +66,3 @@
 </script>
 
 <Rectangles style="series_bar" {left} {top} {width} {height} {borderColor} {faceColor} {title} />
-
-<style>
-   :global(.series_bar > rect){
-      stroke-width: 1px;
-   }
-
-   :global(.series_bar > rect:hover){
-      opacity: 90%;
-   }
-</style>

package/src/Rectangles.svelte

@@ -48,7 +48,7 @@
    $: rh = axes.scaleY(height, $yLim, $axesHeight, true);
 
    // styles for bars and labels
-   $: barsStyleStr = `fill:${faceColor};stroke:${borderColor};stroke-width: ${lineWidth}px;`;
+   $: barsStyleStr = `fill:${faceColor};stroke:${borderColor};stroke-width:${lineWidth}px;`;
 
 </script>
 

package/src/ScatterSeries.svelte

@@ -67,19 +67,3 @@
    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

@@ -10,6 +10,8 @@
    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)) {
@@ -39,9 +41,11 @@
 </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]}" style="{lineStyleStr}"></line>
+      <line x1={x1[i]} x2={x2[i]} y1={y1[i]} y2={y2[i]}></line>
    {/each}
+   </g>
 {/if}
 
 <style>

package/src/TextLabels.svelte

@@ -8,6 +8,8 @@
 
    import { getContext } from 'svelte';
    import { Colors } from './Colors';
+   import { subset } from 'mdatools/stat';
+   import { vmult } from 'mdatools/matrix';
 
    // input parameters
 	export let xValues;
@@ -21,28 +23,24 @@
    export let style = "";
    export let title = "series_text";
 
-   // text-anchor values depending on position
-   const textAnchors = ["middle", "middle", "start", "middle", "end"];
+
+   // 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) {
+   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'.")
-      }
-   }
+   // 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');
@@ -55,24 +53,36 @@
    // 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];
+   $: 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 = `fill:${faceColor};stroke-width:${borderWidth}px;stroke:${borderColor};
-      font-size:${textSize}em; text-anchor:${textAnchors[pos]};`;
+   $: 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} dy={dy}>{@html labels[i]}</text>
+      <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>