svelte-plots-basic 2.1.6 → 2.2.0

package/README.md

@@ -6,9 +6,10 @@ The library is under development and breaking changes may occur in the coming ve
 
 New major release (v. 2.0.0) introduces many breaking changes as the library was completely re-written. If you use previous versions of `svelte-plots-basic` in your projects, and do not want to change anything, stick to the latest 1.x.x version (v. 1.1.4).
 
-### 2.1.1—2.1.6
+### 2.2.0
 
-* Small improvements and bug fixes.
+* Better handling of axes labels and plot title (now they are part of SVG object).
+* Other small improvements and bug fixes.
 
 ### 2.1.0
 

package/package.json

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

package/src/2d/Axes.svelte

@@ -54,7 +54,7 @@
       'xlarge': 10
    };
 
-   // font size for legend items in pixels
+   // font size for plot element
    const LEGEND_FONT_SIZE = {
       "small": 10,
       "medium": 12,
@@ -62,6 +62,14 @@
       "xlarge": 16
    };
 
+   // font size for legend items in pixels
+   const PLOT_FONT_SIZE = {
+      "small": 11,
+      "medium": 13,
+      "large": 16,
+      "xlarge": 19
+   };
+
    // margin between plot series elements and data labels
    const LABELS_MARGIN = {
       'small': 10,
@@ -91,8 +99,8 @@
 
    /* parameters for internal use inside the component */
    let plotElement;
-   let axesElement;
-   let width, height = 100;
+   let width = 100, height = 100;
+   let left = 0, bottom = 0, top = 0;
 
 
    /*****************************************/
@@ -203,6 +211,8 @@
       yLim: yLim,
       tX: tX,
       tY: tY,
+      xLabel: xLabel,
+      yLabel: yLabel,
 
       // constants
       LINE_STYLES: LINE_STYLES,
@@ -273,43 +283,57 @@
    /*****************************************/
 
    // observer for the plot area size — to update the scale
-   const ro1 = new ResizeObserver(entries => {
+   const ro = new ResizeObserver(entries => {
       for (let entry of entries) {
          const pcr = plotElement.getBoundingClientRect();
-         scale.update(x => getScale(pcr.width, pcr.height));
+         const scl = getScale(pcr.width, pcr.height);
+         scale.update(x => scl);
+
+         const m = PLOT_FONT_SIZE[scl] * 1.5;
+         left = xLabel && xLabel !== '' ? m : 0;
+         bottom = yLabel && yLabel !== '' ? m : 0;
+         top = title && title !== '' ? m : 0;
+         width = pcr.width - left;
+         height = pcr.height - bottom - top;
       }
    });
 
-   // observer for the axes area size - to update size of axes
-   const ro2 = new ResizeObserver(entries => {
-      for (let entry of entries) {
-         const acr = axesElement.getBoundingClientRect();
-         width = acr.width;
-         height = acr.height;
-      }
-   });
+   $: fontSize = PLOT_FONT_SIZE[$scale];
 
    onMount(() => {
-      ro1.observe(plotElement);
-      ro2.observe(axesElement);
+      ro.observe(plotElement);
    });
 
    onDestroy(() => {
-      ro1.unobserve(plotElement);
-      ro2.unobserve(axesElement);
+      ro.unobserve(plotElement);
    })
 
-</script>
+   $: lblStyleStr = `font-weight:bold;text-anchor:middle;`;
 
-<div class="plot {'plot_' + $scale}"  bind:this={plotElement} class:plot_error={!$isOk}>
-   <!-- plot title and axis labels -->
-   {#if title !== ''}<div class="axes__title">{@html title}</div>{/if}
-   {#if yLabel !== ''}<div class="axes__ylabel"><span>{@html yLabel}</span></div>{/if}
-   {#if xLabel !== ''}<div class="axes__xlabel"><span>{@html xLabel}</span></div>{/if}
+</script>
 
-   <!-- axes (coordinate system) -->
-   <div class="axes-wrapper" bind:this={axesElement} >
-      <svg on:click={handleClick} on:keydown={handleClick} preserveAspectRatio="none" class="axes">
+<div class="plot-container {'plot_' + $scale}"  bind:this={plotElement} 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}>
+         <!-- x-axis label -->
+         {#if xLabel && xLabel !== ''}
+         <text x={0} y={(height + top) /2} dx={0} dy={0} transform={`rotate(-90, 10, ${height/2})`} style="font-size:1.1em;">{@html yLabel}</text>
+         {/if}
+         <!-- y-axis label -->
+         {#if yLabel && yLabel !== ''}
+         <text x={left + width/2 } y={height + top} dx={0} dy={5} style="font-size:1.1em;">{@html xLabel}</text>
+         {/if}
+         <!-- plot title -->
+         {#if title && title !== ''}
+         <text x={left + width/2 } y={0} dx={0} dy={0} alignment-baseline="hanging" style="font-size:1.2em;">{@html title}</text>
+         {/if}
+      </g>
+
+      <svg x={left} y={top} width={width} height={height} on:click={handleClick}
+         on:keydown={handleClick} preserveAspectRatio="none" class="axes">
 
          <!-- define clipping path -->
          <defs>
@@ -318,7 +342,6 @@
             </clipPath>
          </defs>
 
-
          <!-- axis and box -->
          <slot name="xaxis"></slot>
          <slot name="yaxis"></slot>
@@ -328,11 +351,10 @@
             <slot></slot>
          </g>
 
-
          <!-- axis and box -->
          <slot name="box"></slot>
-
       </svg>
+   </svg>
 
    {#if !$isOk}
    <p class="message_error">
@@ -340,27 +362,14 @@
       Check that you defined axes limits and margins correctly.
    </p>
    {/if}
-   </div>
-
-
 </div>
 
 <style>
 
-   /* Plot (main container) */
-   .plot {
+   /* Plot container */
+   .plot-container {
       font-family: Arial, Helvetica, sans-serif;
-
-      display: grid;
-      grid-template-columns: min-content auto;
-      grid-template-rows: min-content auto min-content;
-      grid-template-areas:
-         ". title"
-         "ylab axes"
-         ". xlab";
-
       box-sizing: border-box;
-      /* background: #fefefe; */
       min-width: 100px;
       min-height: 50px;
       width: 100%;
@@ -369,28 +378,10 @@
       margin: 0;
    }
 
-   .plot_small {
-      font-size: 11px;
-   }
-
-   .plot_medium {
-      font-size: 13px;
-   }
-
-   .plot_large {
-      font-size: 16px;
-   }
-
-   .plot_xlarge {
-      font-size: 19px;
-   }
-
    .plot_error {
       display: flex;
-   }
-
-   .plot_error > .axes-wrapper > svg {
-      display: none;
+      justify-content: center;
+      align-items: center;
    }
 
    .message_error {
@@ -401,19 +392,9 @@
       text-align: center;
    }
 
-   /* Axes (coordinate system) */
-   .axes-wrapper {
-      grid-area: axes;
-      position:relative;
-      box-sizing: border-box;
-      display: flex;
-      width: 100%;
-      height: 100%;
-      padding: 0;
-      margin: 0;
-   }
+   /* Plot and axes (coordinate system) */
 
-   .axes {
+   .plot {
       display: block;
       box-sizing: border-box;
       position:absolute;
@@ -437,64 +418,6 @@
       max-width: 100%;
       min-height: 100%;
       min-width: 100%;
-
-   }
-
-   .axes__xlabel {
-      grid-area: xlab;
-      font-size: 1.0em;
-      font-weight: 600;
-      padding: 0.25em;
-      text-align: center;
-   }
-
-
-   .axes__ylabel {
-      grid-area: ylab;
-      font-size: 1.0em;
-      font-weight: 600;
-      padding: 0.25em;
-      text-align: center;
-      vertical-align: middle;
-      display: flex;
-   }
-
-   .axes__ylabel > span {
-      width: 1.5em;
-      line-height: 1.5em;
-      display: inline-block;
-      writing-mode: vertical-rl;
-      transform: rotate(180deg);
-   }
-
-
-   .axes__title {
-      background: transparent;
-      grid-area: title;
-
-      font-size: 1.3em;
-      font-weight: bold;
-      line-height: 1.2em;
-      padding: 0.5em 0;
-      text-align: center;
-   }
-
-   /* Axis */
-   :global(.axis-labels) {
-      fill: #303030;
-      font-size: 0.95em;
-   }
-
-   /* Data labels */
-   :global(.labels) {
-      fill: #606060;
-      font-size: 0.90em;
-   }
-
-   :global(.labels) {
-      visibility: hidden;
-      transition:visibility 0.25s linear, opacity 0.25s linear;
-      opacity: 0;
    }
 
 </style>

package/src/2d/Axis.svelte

@@ -35,9 +35,9 @@
    function getTickFactorLabel(tf) {
       if (tf === 0) return '';
       if (tf < 0) {
-         return `&times;10<tspan vertical-align="super">${(tf).toString()}</tspan>`;
+         return `&times;10<tspan dy="-0.5em">${(tf).toString()}</tspan>`;
       } else {
-         return `&times;10<tspan vertical-align="super">${(tf).toString()}</tspan>`;
+         return `&times;10<tspan dy="-0.5em">${(tf).toString()}</tspan>`;
       }
    }
 </script>

package/src/2d/AxisTickLabels.svelte

@@ -31,6 +31,7 @@
    const tY = axes.tY;
    const isOk = axes.isOk;
 
+   let el;
 
    let x, y = undefined;
    let dx = 0, dy = 0, textAnchor;
@@ -56,7 +57,7 @@
 </script>
 
 {#if x !== undefined && y !== undefined}
-<g class="tick_labels" 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>

package/src/2d/XAxis.svelte

@@ -103,7 +103,7 @@
 {#if $isOk && axisLine.length > 0}
 <Axis
    className="mdaplot__xaxis" pos={1}
-   {lineColor} {gridColor} {textColor}
-   {showGrid} {grid} {axisLine} {tickCoords} {tickLabels} {tfCoords} {tickFactor} {las}
+   {lineColor} {gridColor} {textColor} {showGrid} {grid} {axisLine}
+   {tickCoords} {tickLabels} {tfCoords} {tickFactor} {las}
 />
 {/if}

package/src/2d/YAxis.svelte

@@ -103,7 +103,7 @@
 {#if $isOk && axisLine.length > 0}
 <Axis
    className="mdaplot__yaxis" pos={4}
-   {lineColor} {gridColor} {textColor}
-   {showGrid} {grid} {axisLine} {tickCoords} {tickLabels} {tfCoords} {tickFactor} {las}
+   {lineColor} {gridColor} {textColor} {showGrid} {grid} {axisLine}
+   {tickCoords} {tickLabels} {tfCoords} {tickFactor} {las}
 />
 {/if}