svelte-plots-basic 1.0.2 → 1.0.5

package/package.json

@@ -25,7 +25,7 @@
     "dist"
   ],
   "description": "Svelte components for creating simple plots",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "repository": {
     "type": "git",
     "url": "svkucheryavski/svelte-plots-basic"

package/src/Axes.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount, setContext } from 'svelte';
+	import { onMount, setContext, createEventDispatcher } from 'svelte';
 	import { writable } from 'svelte/store';
 
    /* input parameters */
@@ -10,7 +10,8 @@
    export let yLabel = "";                      // label for y-axis
    export let multiSeries = true;               // is the plot for one series or for many
 
-   /* constants for internal use */
+   // event dispatcher
+   const dispatch = createEventDispatcher();
 
    // how big are margins (number of pixels in unit margin value) between axis and plot area if axis are shown
    const AXES_MARGIN_FACTORS = {
@@ -277,6 +278,30 @@
    });
 
 
+   // handle click on plot elements and dispatch manual events
+   function dispatchClickEvent(eventName, el) {
+      dispatch(eventName, {seriesTitle: el.parentNode.getAttribute('title'), elementID: el.dataset.id});
+   }
+
+   function handleClick(e) {
+
+      // scatter plot markers
+      if (e.target.tagName === "text" && e.target.parentNode.classList.contains("series_scatter")) {
+         dispatchClickEvent("markerclick", e.target);
+         return;
+      }
+
+      // bar plot bars
+      if (e.target.tagName === "rect" && e.target.parentNode.classList.contains("series_bar")) {
+         dispatchClickEvent("barclick", e.target);
+         return;
+      }
+
+      // outside any plot element
+      dispatch("axesclick")
+   }
+
+
    // this is reactive in case if limX and limY are interactively changed by parent script
    $: if (!limX.some(v => v === undefined)) xLim.update(v => limX);
    $: if (!limY.some(v => v === undefined)) yLim.update(v => limY);
@@ -315,13 +340,13 @@
    {#if xLabel !== ""}<div class="axes__xlabel"><span>{@html xLabel}</span></div>{/if}
 
    <!-- axes (coordinate system) -->
-   <div class="axes-wrapper" bind:this="{axesWrapper}" >
-      <svg preserveAspectRatio="none" class="axes">
+   <div class="axes-wrapper" bind:this={axesWrapper} >
+      <svg on:click={handleClick} preserveAspectRatio="none" class="axes">
 
          <!-- define clipping path -->
          <defs>
             <clipPath id="{clipPathID}">
-               <rect x="{cpx[0]}" y="{cpy[1]}" width = "{cpx[1] - cpx[0]}" height="{cpy[0] - cpy[1]}"></rect>
+               <rect style="pointer-events:none" x="{cpx[0]}" y="{cpy[1]}" width = "{cpx[1] - cpx[0]}" height="{cpy[0] - cpy[1]}"></rect>
             </clipPath>
          </defs>
 
@@ -401,11 +426,13 @@
    }
 
    /* Axes (coordinate system) */
-   :global(.axes-wrapper) {
+   .axes-wrapper {
       grid-area: axes;
       position:relative;
       box-sizing: border-box;
       display: flex;
+      width: 100%;
+      height: 100%;
       padding: 0;
       margin: 0;
    }

package/src/BarSeries.svelte

@@ -65,9 +65,7 @@
    }
 </script>
 
-<g class="series series_bar" title="{title}">
-   <Rectangles {left} {top} {width} {height} {borderColor} {faceColor} />
-</g>
+<Rectangles style="series_bar" {left} {top} {width} {height} {borderColor} {faceColor} {title} />
 
 <style>
    :global(.series_bar > rect){

package/src/Box.svelte

@@ -26,7 +26,7 @@
 </script>
 
 {#if $isOk}
-   <g class="mdaplot__axes-box">
+   <g style="pointer-events:none" class="mdaplot__axes-box">
       <Rectangles {left} {top} {width} {height} borderColor="{Colors.DARKGRAY}" faceColor="transparent"></Rectangles>
    </g>
 {/if}

package/src/LineSeries.svelte

@@ -1,5 +1,4 @@
 <script>
-
    import { getContext } from 'svelte';
    import { mrange } from 'mdatools/stat';
    import { Colors } from './Colors';
@@ -37,12 +36,13 @@
    $: 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]}`;
+   $: 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 class="series series_line" style={lineStyleStr} title={title}>
+      <polyline class="line" points={p}/>
    </g>
 {/if}
 

package/src/Rectangles.svelte

@@ -11,6 +11,8 @@
    export let faceColor = Colors.PRIMARY;
    export let borderColor = faceColor;
    export let lineWidth = 1;
+   export let title = "";
+   export let style = "series_rect";
 
    // styles for bars and labels
    const barsStyleStr = `fill:${faceColor};stroke:${borderColor};stroke-width: ${lineWidth}px;`;
@@ -49,9 +51,11 @@
 </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]}" style="{barsStyleStr}"></rect>
+      <rect x={rx[i]} y={ry[i]} width={rw[i]} height={rh[i]} />
    {/each}
+   </g>
 {/if}
 
 <style>

package/src/ScatterSeries.svelte

@@ -19,6 +19,7 @@
    //export let labels = yValues;
    //export let showLabels = "no"; // can be "no", "hover", "always"
 
+   /* constants for internal use */
    const markers = ["●", "◼", "▲", "▼", "⬥", "+", "*", "⨯"];
    let markerSymbol;
 
@@ -57,20 +58,23 @@
       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>
+<TextLabels
+   {xValues} {yValues} {faceColor} {borderColor} {borderWidth} {title}
+   style="series_scatter"
+   labels={markerSymbol}
+   textSize={markerSize}
+/>
 
 <style>
-:global(.marker) {
+
+:global(.series_scatter > text) {
    font-size: 1em;
    cursor: default;
 }
 
-:global(.marker:hover) {
+:global(.series_scatter > text:hover) {
    opacity: 90%;
 }
 

package/src/TextLabels.svelte

@@ -1,8 +1,15 @@
 <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 */
+   // input parameters
 	export let xValues;
    export let yValues;
    export let labels;
@@ -11,16 +18,18 @@
    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 */
+   // 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
+   // multiply label values if needed
    $: {
       const n = xValues.length;
       if (!Array.isArray(labels)) labels = Array(n).fill(labels);
@@ -49,15 +58,21 @@
    $: 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;`;
+   // 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 style={textStyleStr} x={x[i]} y={y[i]} dx={dx} dy={dy} dominant-baseline="middle" text-anchor={textAnchors[pos]}>{@html labels[i]}</text>
+      <text data-id={i} x={x[i]} y={y[i]} dx={dx} dy={dy}>{@html labels[i]}</text>
    {/each}
+   </g>
 {/if}
 
 <style>
-</style>
+   text {
+      dominant-baseline: middle;
+   }
+</style>

package/src/TextLegend.svelte

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