svelte-plots-basic 2.2.4 → 2.3.1

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "svelte-plots-basic",
    "description": "Svelte components for creating simple plots",
-   "version": "2.2.4",
+   "version": "2.3.1",
    "author": "Sergey Kucheryavskiy",
    "license": "MIT",
    "private": false,

package/src/2d/Axes.svelte

@@ -8,7 +8,7 @@
 	import { setContext, createEventDispatcher, onMount, onDestroy } from 'svelte';
 	import { writable } from 'svelte/store';
    import { isvector, vector, Vector } from 'mdatools/arrays';
-   import { roundCoords, getScale } from '../Utils.js';
+   import { roundCoords, getScale, downloadSVG, downloadPNG } from '../Utils.js';
 
 
    /*****************************************/
@@ -23,6 +23,16 @@
    export let margins = [1.0, 0.75, 0.5, 0.5];        // margins [bottom, left, top, right] )
 
 
+   /*****************************************/
+   /* Input parameters for downloading      */
+   /*****************************************/
+   export let downloadLinks = 'hover';                // how to show download links panel ('none', 'hover', 'fixed')
+   export let fileName = 'plot';                      // file name for download (without extension)
+   export let pngWidth = 8;                           // width of PNG image in cm
+   export let pngHeight = 8;                          // height of PNG image in cm
+   export let pngRes = 300;                           // resolution of PNG image (pixels per inch)
+
+
    /*****************************************/
    /* Constants                             */
    /*****************************************/
@@ -56,26 +66,26 @@
 
    // font size for plot element
    const LEGEND_FONT_SIZE = {
-      "small": 10,
-      "medium": 12,
-      "large": 14,
-      "xlarge": 16
+      "small": 11,
+      "medium": 13,
+      "large": 15,
+      "xlarge": 17
    };
 
    // font size for legend items in pixels
    const PLOT_FONT_SIZE = {
-      "small": 11,
-      "medium": 13,
-      "large": 16,
-      "xlarge": 19
+      "small": 12,
+      "medium": 14,
+      "large": 17,
+      "xlarge": 20
    };
 
    // margin between plot series elements and data labels
    const LABELS_MARGIN = {
-      'small': 10,
-      'medium': 13,
-      'large': 15,
-      'xlarge': 17
+      'small': 11,
+      'medium': 14,
+      'large': 16,
+      'xlarge': 18
    };
 
    // line styles for different scales and types
@@ -87,7 +97,7 @@
    }
 
    // marker symbols
-   const MARKER_SYMBOLS = ["●", "◼", "▲", "▼", "⬥", "＋", "*", "×"];
+   const MARKER_SYMBOLS = ["●", "◼", "▲", "▼", "⬥", "＋", "✳", "✕"];
 
    // constant to make clip path ID unique
    const clipPathID = 'plottingArea' + Math.round(Math.random() * 10000);
@@ -130,13 +140,13 @@
    function handleClick(e) {
 
       // click on scatter plot markers
-      if (e.target.tagName === 'text' && e.target.parentNode.classList.contains('series_points')) {
+      if (e.target.tagName === 'text' && e.target.parentNode.classList.contains('series-points')) {
          dispatchClickEvent('markerclick', e.target);
          return;
       }
 
       // click on bar plot bars
-      if (e.target.tagName === 'rect' && e.target.parentNode.classList.contains('series_bar')) {
+      if (e.target.tagName === 'rect' && e.target.parentNode.classList.contains('series-bar')) {
          dispatchClickEvent('barclick', e.target);
          return;
       }
@@ -145,6 +155,14 @@
       dispatch('axesclick');
    }
 
+   function handleClickSVG() {
+      downloadSVG(plotElement, fileName)
+   }
+
+   function handleClickPNG() {
+      downloadPNG(plotElement, fileName, pngWidth, pngHeight, pngRes)
+   }
+
    /**
     * Generic function to transform x or y-values from plot coordinates to screen (SVG) coordinates.
     *
@@ -187,11 +205,11 @@
    /*****************************************/
 
    const scale = writable('medium');                                  // scale factor (how big the shown plot is)
+   const isOk = writable(false);                                      // are axes ready for drawing
+   const xLim = writable(limX);                                       // validated values for x-axis limits
+   const yLim = writable(limY);                                       // validated values for y-axis limits
    const tX = writable({'coords': [1, 0, 0], 'objects': [1, 0, 0]});  // scaling and translation factors for x-dimension
    const tY = writable({'coords': [1, 0, 0], 'objects': [1, 0, 0]});  // scaling and translation factors for y-dimension
-   const isOk = writable(false);                                      // are axes ready for drawing
-   const xLim = writable(limX);
-   const yLim = writable(limY);
 
 
    /*****************************************/
@@ -308,16 +326,46 @@
       ro.unobserve(plotElement);
    })
 
-   $: lblStyleStr = `font-weight:bold;text-anchor:middle;`;
-
 </script>
 
-<div class="plot-container" bind:this={plotElement} class:plot_error={!$isOk}>
+<div class="plot-container show-download-links-{downloadLinks}" class:plot_error={!$isOk}>
 
    <svg class="plot" bind:this={plotElement} xmlns="http://www.w3.org/2000/svg"
-      style={`font-family: Arial, Helvetica, sans-serif;font-size:${fontSize}px`}>
-
-      <g style={lblStyleStr}>
+      style={`font-size:${fontSize}px`}>
+
+      <style>
+         .plot {
+            font-family: Arial, Helvetica, sans-serif;
+         }
+
+         .plot-labels text {
+            font-weight:bold;
+            text-anchor:middle;
+         }
+
+         .tick-labels text,
+         .tick-labels tspan,
+         .series-text text,
+         .series-text tspan,
+         .series-points text,
+         .series-points tspan {
+            dominant-baseline: middle;
+            cursor: default;
+            user-select: none;
+         }
+
+         .series-text text,
+         .series-text tspan {
+            text-anchor: middle;
+         }
+
+         .tick-labels text,
+         .tick-labels tspan {
+            font-size:1em;
+         }
+      </style>
+
+      <g class="plot-labels">
          <!-- y-axis label -->
          {#if yLabel && yLabel !== ''}
          <text x={0} y={(height + top) /2} dx={0} dy={0} dominant-baseline="top" transform={`rotate(-90, 10, ${height/2})`} style="font-size:1.1em;">{@html yLabel}</text>
@@ -361,10 +409,61 @@
       Axes component was not properly initialized. <br />
       Check that you defined axes limits and margins correctly.
    </p>
+   {:else}
+   <div class="download-links">
+      <button on:click={handleClickSVG} on:keydown={handleClickSVG}>⇩ svg</button>
+      <button on:click={handleClickPNG} on:keydown={handleClickPNG}>⇩ png</button>
+   </div>
    {/if}
+
 </div>
 
 <style>
+   .show-download-links-none > .download-links{
+      display: none;
+   }
+
+   .show-download-links-hover:hover > .download-links {
+      bottom: 0;
+   }
+
+   .show-download-links-fixed > .download-links{
+      bottom: 0;
+   }
+
+   .download-links {
+      bottom: right 0.5s ease;
+      position: absolute;
+      font-size: 0.8em;
+      bottom: -50%;
+      right: 0;
+      z-index: 10;
+      padding: 0.5em 1em 0.5em 1em;
+      background: #fefefe;
+      border-radius: 0.5em;
+      transition: bottom 0.35s ease;
+      box-shadow: 0 0 1em #00000040;
+      margin: 0.5em;
+      box-sizing: border-box;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+   }
+
+   .download-links > button{
+      color: #606060;
+      border: none;
+      box-shadow: none;
+      background: #fafafa;
+      border-radius: 0.35em;
+      padding: 0.25em 0.5em;
+   }
+
+   .download-links > button:hover{
+      background: #443333;
+      color: #fafafa;
+   }
 
    /* Plot container */
    .plot-container {
@@ -377,6 +476,8 @@
       height: 100%;
       padding: 0;
       margin: 0;
+      overflow: hidden;
+      background: #fff;
    }
 
    .plot_error {

package/src/2d/AxisTickLabels.svelte

@@ -53,11 +53,11 @@
    }
 
    // styles for the elements
-   $: textStyleStr = `dominant-baseline:middle;fill:${textColor};font-size:1em; text-anchor:middle;`;
+   $: textStyleStr = `fill:${textColor};`;
 </script>
 
 {#if x !== undefined && y !== undefined}
-<g class="tick_labels" bind:this={el} style={textStyleStr} >
+<g class="tick-labels" bind:this={el} style={textStyleStr} >
    {#if las === 2 && pos === 4}
    {#each x as v, i}
       <text data-id={i} x={x[i]} y={y[i]} dx={0} dy={dx*1.25} transform={`rotate(-90, ${x[i]}, ${y[i]})`} text-anchor={"middle"}>{@html tickLabels[i]}</text>
@@ -73,11 +73,3 @@
    {/if}
 </g>
 {/if}
-
-<style>
-   text, text > :global(tspan) {
-      cursor: default;
-      user-select: none;
-      dominant-baseline: middle;
-   }
-</style>

package/src/2d/Bars.svelte

@@ -62,4 +62,4 @@
    }
 </script>
 
-<Rectangles className="series_bar" {left} {top} {width} {height} {borderColor} {faceColor} {title} />
+<Rectangles className="series-bar" {left} {top} {width} {height} {borderColor} {faceColor} {title} />

package/src/2d/Box.svelte

@@ -25,8 +25,6 @@
       throw('Component Box must have \'slot="box"\' attribute.')
    }
 
-   // box style
-   const rectStyleStr = `fill:transparent;stroke:${Colors.DARKGRAY};stroke-width:1px;`;
 
    // get axes context and reactive variables needed to compute coordinates
    const axes = getContext('axes');
@@ -44,7 +42,7 @@
 
 {#if $isOk}
    <g style="pointer-events:none" class="mdaplot__axes-box">
-   <rect x={xx[0]} y={yy[1]} width={xx[1] - xx[0]} height={yy[0] - yy[1]} style={rectStyleStr} />
+   <rect stroke="{Colors.DARKGRAY}" stroke-width="0.1em" fill="transparent" x={xx[0]} y={yy[1]} width={xx[1] - xx[0]} height={yy[0] - yy[1]} />
    </g>
 {/if}
 

package/src/2d/Heatmap.svelte

@@ -22,7 +22,7 @@
    export let breaks = null;                 // vector with breaks to distribute the values in
    export let colmap = null;                 // array with colors for each interval
 
-   export let className = 'series_heatmap';  // CSS class name of the SVG group
+   export let className = 'series-heatmap';  // CSS class name of the SVG group
    export let title = '';                    // title of the rectangle series (reserved for future use)
 
 
@@ -94,7 +94,7 @@
    <g class="series {className}" title={title} style="stroke:0;stroke-width:0px;">
    <!-- loop over colors/intervals -->
    {#each lColmap as col, i}
-      <g title="heatmap_group" style="fill:{col};">
+      <g title="heatmap-group" style="fill:{col};">
       {#if rx[i].length > 0}
          <!-- loop over elements which fall into the interval -->
          {#each rx[i] as v, j}

package/src/2d/Legend.svelte

@@ -43,7 +43,7 @@
       const element = document.createElement('canvas');
       const context = element.getContext('2d');
       context.font = font;
-      return context.measureText(text).width;
+      return context.measureText(text.replace(/<(.|\n)*?>/g, '')).width;
    }
 
    /**
@@ -105,42 +105,34 @@
 
 <!-- outer legend box, background and frame -->
 <svg x="{left}px" y="{top}px" height="{legendHeight}px" width="{legendWidth}">
-<rect height="100%" width="100%" style="fill:white;stroke:{Colors.MIDDLEGRAY};"></rect>
+<rect height="100%" width="100%" fill="white" stroke="{Colors.MIDDLEGRAY}"></rect>
 
 {#each items as item, i}
 
 <!-- individual legend item -->
 <svg x="{0}px" y="{i * (elHeight + 2 * elPadding)}px" width="{legendWidth}px" height="{elHeight + 2 * elPadding}px">
 
+   <style>
+   .legend-text,
+   .legend-text tspan {
+      dominant-baseline: hanging;
+   }
+   </style>
+
    <!-- line -->
    {#if item.lineType && item.lineType > 0 && item.lineType <= 4}
-   <line x1={elPadding} x2={elPadding + elWidth} y1={(elHeight + elPadding * 2)/2} y2={(elHeight + elPadding * 2)/2} style={`
-      stroke:${item.lineColor ? item.lineColor : Colors.PRIMARY};
-      stroke-width: ${item.lineWidth ? item.lineWidth : 1}px;
-      stroke-dasharray:${axes.LINE_STYLES[$scale][item.lineType - 1]}
-   `}/>
+   <line x1={elPadding} x2={elPadding + elWidth} y1={(elHeight + elPadding * 2)/2} y2={(elHeight + elPadding * 2)/2} stroke="{item.lineColor ? item.lineColor : Colors.PRIMARY}" stroke-width="{item.lineWidth ? item.lineWidth : 1}px" stroke-dasharray="{axes.LINE_STYLES[$scale][item.lineType - 1]}"/>
    {/if}
 
    <!-- marker -->
    {#if item.marker && item.marker > 0 && item.marker < axes.MARKER_SYMBOLS.length}
    <text x="{(elWidth + 2 * elPadding)/2}px" y="{(elHeight + 2 * elPadding)/2}px"
-      dominant-baseline="middle"
-      style={`
-         fill:${item.faceColor ? item.faceColor : "transparent"};
-         stroke-width:${item.borderWidth ? item.borderWidth : 1}px;
-         stroke:${item.borderColor ? item.borderColor : Colors.PRIMARY};
-         font-size:${fontSize}px;
-         text-anchor:middle;`}
-   >{axes.MARKER_SYMBOLS[item.marker - 1]}</text>
+      dominant-baseline="middle" fill="{item.faceColor ? item.faceColor : 'transparent'}" stroke-width="{item.borderWidth ? item.borderWidth : 1}px" stroke="{item.borderColor ? item.borderColor : Colors.PRIMARY}" font-size="{fontSize}px" text-anchor="middle">{axes.MARKER_SYMBOLS[item.marker - 1]}</text>
    {/if}
 
 
-
    <!-- text -->
-   <text x="{elWidth + elPadding * 3}px" y="{elPadding}px"
-      dominant-baseline="hanging"
-      style={`text-anchor:start;fill:${Colors.LEGEND};font-size:${fontSize}px`};
-   >{@html '&nbsp;' + item.label}</text>
+   <text class="legend-text" xml:space="preserve" x="{elWidth + elPadding * 3}px" y="{elPadding}px" text-anchor="start" fill="{Colors.LEGEND}" font-size="{fontSize}px"> {@html item.label}</text>
 
 </svg>
 {/each}

package/src/2d/Lines.svelte

@@ -42,7 +42,7 @@
 </script>
 
 {#if $isOk && p !== undefined}
-   <g class="series series_line" style={lineStyleStr} title={title}>
+   <g class="series series-line" style={lineStyleStr} title={title}>
       <polyline class="line" points={p}/>
    </g>
 {/if}

package/src/2d/Multilines.svelte

@@ -58,7 +58,7 @@
 </script>
 
 {#if $isOk && pp !== undefined && pp.length > 0}
-   <g class="series series_multiline" style={lineStyleStr} title={title}>
+   <g class="series series-multiline" style={lineStyleStr} title={title}>
       {#each pp as p}
       <polyline class="line" points={p}/>
       {/each}

package/src/2d/Points.svelte

@@ -45,7 +45,6 @@
 
       markerSymbol = axes.MARKER_SYMBOLS[marker - 1];
 
-
       x = axes.transform(checkCoords(xValues, 'Points'), $tX.coords);
       y = axes.transform(checkCoords(yValues, 'Points'), $tY.coords);
 
@@ -55,25 +54,17 @@
       }
    }
 
-
    // styles for the elements
-   $: textStyleStr = `dominant-baseline:middle;fill:${faceColor};stroke-width:${borderWidth}px;stroke:${borderColor};
-      font-size:${markerSize}em; text-anchor:middle;cursor:default;user-select:none;`;
+   $: textStyleStr = ['＋', '✳', '✕'].includes(markerSymbol)  ?
+       `fill:${borderColor && borderColor !== 'transparent' ? borderColor : faceColor};stroke-width:0px;font-size:${markerSize}em;` :
+       `fill:${faceColor};stroke-width:${borderWidth}px;stroke:${borderColor}; font-size:${markerSize}em;`;
+
 </script>
 
 {#if $isOk && x !== undefined && y !== undefined}
-<g class="series series_points" title={title} style={textStyleStr} >
+<g class="series series-points" title={title} style={textStyleStr} dominant-baseline="middle" text-anchor="middle">
    {#each x as v, i}
       <text x={x[i]} y={y[i]}>{markerSymbol}</text>
    {/each}
 </g>
 {/if}
-
-<style>
-text, text > :global(tspan) {
-   dominant-baseline: middle;
-   text-anchor: middle;
-   cursor: default;
-   user-select: none;
-}
-</style>

package/src/2d/Rectangles.svelte

@@ -22,7 +22,7 @@
    export let faceColor = Colors.PRIMARY;    // color of bar faces (fill)
    export let borderColor = faceColor;       // color of bar borders
    export let lineWidth = 1;                 // width (thickness) of bar border lines
-   export let className = 'series_rect';     // CSS class name of the SVG group
+   export let className = 'series-rect';     // CSS class name of the SVG group
    export let title = '';                    // title of the rectangle series (reserved for future use)
 
 

package/src/2d/Segments.svelte

@@ -20,7 +20,7 @@
    export let lineColor = Colors.PRIMARY;    // color of segment lines
    export let lineType = 1;                  // type of segment lines (1 - solid, 2 - dashed, 3 - dotted, 4 - dashdot)
    export let lineWidth = 1;                 // width (thickness) of segment lines
-   export let className = 'series_seg';      // CSS class name of the SVG group
+   export let className = 'series-seg';      // CSS class name of the SVG group
    export let title = '';                    // title of the segment series (reserved for future use)
 
 

package/src/2d/TextLabels.svelte

@@ -22,8 +22,8 @@
    export let borderColor = 'transparent';         // border colors of label symbols
    export let borderWidth = 0;                     // border width of label symbols
    export let textSize = 1;                        // size of label symbols
-   export let className = 'series_text';           // CSS class name for the labels group
-   export let title = 'series_text';               // title of the labels SVG group
+   export let className = 'series-text';           // CSS class name for the labels group
+   export let title = 'series-text';               // title of the labels SVG group
    export let rotateAngle = 0;                     // angle to rotate labels
 
    /*****************************************/
@@ -70,8 +70,7 @@
    }
 
    // styles for the elements
-   $: textStyleStr = `dominant-baseline:middle;fill:${faceColor};stroke-width:${borderWidth}px;stroke:${borderColor};
-      font-size:${textSize}em;`;
+   $: textStyleStr = `fill:${faceColor};stroke-width:${borderWidth}px;stroke:${borderColor};font-size:${textSize}em;`;
 </script>
 
 {#if $isOk && x !== undefined && y !== undefined}
@@ -96,12 +95,3 @@
    {/if}
 </g>
 {/if}
-
-<style>
-text, text > :global(tspan) {
-   dominant-baseline: middle;
-   text-anchor: middle;
-   cursor: default;
-   user-select: none;
-}
-</style>