svelte-plots-basic 2.5.7 → 3.0.0

package/src/2d/Axes.svelte

@@ -1,380 +1,332 @@
+<!--
+@component Parent component for any plot, all other components should be nested inside `<Axes></Axes>`.
+
+   Main properties:
+   - `limX` - array with limits for x-axis (in plot units), default: `[0, 1]`.
+   - `limY` - array with limits for y-axis (in plot units), default: `[0, 1]`.
+   - `title` - title of the plot (string).
+   - `margins` - array with relative margins (bottom, left, top, right), default `[1.0, 0.85, 0.5, 0.5]`.
+
+   Properties for downloading the plot as PNG or SVG file or copying it to clipboard:
+   - `downloadLinks` - how to show download links panel (`'none'` - default, `'hover'`, `'fixed'`).
+   - `fileName` - file name for download (without extension), default: `'plot'`.
+   - `pngWidth` - width of PNG image in cm, default `8`
+   - `pngHeight` - height of PNG image in cm, default `8`.
+   - `pngRes` - resolution of PNG image (pixels per inch), default `300`.
+   - `clipboardWidth` - width of plot image to copy to clipboard in pixels.
+   - `clipboardHeight` - height of plot image to copy to clipboard in pixels.Axes
+
+   Example:
+
+   ```svelte
+   <script>
+      import {Axes} from 'svelte-plots-basic/2d';
+   </script>
+
+   <Axes limX={[2000, 2050]} limY={[0, 100]} title="GDP of contries" >
+   </Axes>
+   ```
+-->
 <script>
-   /****************************************************
-   * Axes                                              *
-   * --------------------                              *
-   * root item for any plot                            *
-   *****************************************************/
-
-	import { setContext, createEventDispatcher, onMount, onDestroy } from 'svelte';
-	import { writable } from 'svelte/store';
-   import { isvector, vector, Vector } from 'mdatools/arrays';
-   import { roundCoords, getScale, downloadSVG, downloadPNG, createPngBlob } from '../Utils.js';
-
-
-   /*****************************************/
-   /* Input parameters                      */
-   /*****************************************/
-
-   export let limX;                                   // array with limits for x-axis (in plot units) [min, max]
-   export let limY;                                   // array with limits for y-axis (in plot units) [min, max]
-   export let title = '';                             // title of the plot
-   export let xLabel = '';                            // label for x-axis
-   export let yLabel = '';                            // label for y-axis
-   export let margins = [1.0, 0.75, 0.5, 0.5];        // margins [bottom, left, top, right] )
-
-
-   /***********************************************/
-   /* Input parameters for downloading and copy   */
-   /***********************************************/
-   export let downloadLinks = 'none';                // 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)
-   export let clipboardWidth = 1200;                  // width of PNG image to copy to clipboard in pixels
-   export let clipboardHeight = 800;                  // height of PNG image to copy to clipboard in pixels
-
-
-   /*****************************************/
-   /* Constants                             */
-   /*****************************************/
-
-   // 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 = {
-      'small': 30,
-      'medium': 40,
-      'large': 50,
-      'xlarge': 60
+   import { setContext } from 'svelte';
+   import { Colors, PLOT_FONT_SIZE, AXES_MARGIN_FACTORS, TICK_SIZE, LINE_STYLES, MARKER_SYMBOLS } from '../constants.js';
+   import { downloadSVG, downloadPNG, copyToClipboard, checkArray, getScale, getAxisScale, getXAxisParams, getYAxisParams,
+            transformCoords, getColormapLegendParams, getColormapLegendCoords, getTickFactorLabel,
+            getGroupLegendCoords, text2svg,
+            invTransformCoords,
+            invTransformObjects} from '../methods.js';
+
+   import AxisLines from './AxisLines.svelte';
+   import AxisTickLabels from './AxisTickLabels.svelte';
+
+
+   let {
+      title,
+      limX = [0, 1],
+      limY = [0, 1],
+      margins = [1.0, 1.1, 0.55, 0.60],
+      downloadLinks = 'none',
+      fileName = 'plot',
+      pngWidth = 8,
+      pngHeight = 8,
+      pngRes = 300,
+      clipboardWidth = 1200,
+      clipboardHeight = 800,
+      onclick = null,
+      onmousemove = null,
+      onmousedown = null,
+      onmouseup = null,
+      children
+   } = $props();
+
+
+   /* handler for mouse  events */
+   function handleMouse(e, f) {
+      if (f && e.target.id == "axes-box") {
+         const x = invTransformCoords([e.offsetX], tX)[0];
+         const y = invTransformCoords([e.offsetY], tY)[0];
+         f(x, y);
+      }
    }
 
-   // number of ticks along each axis
-   const TICK_NUM = {
-      'small': 5,
-      'medium': 8,
-      'large': 12,
-      'xlarge': 15
-   };
-
-   // size of ticks
-   const TICK_SIZE = {
-      'small': 4,
-      'medium': 6,
-      'large': 8,
-      'xlarge': 10
-   };
-
-   // font size for plot element
-   const LEGEND_FONT_SIZE = {
-      "small": 11,
-      "medium": 14,
-      "large": 16,
-      "xlarge": 18
-   };
-
-   // font size for legend items in pixels
-   const PLOT_FONT_SIZE = {
-      "small": 12,
-      "medium": 15,
-      "large": 19,
-      "xlarge": 21
-   };
-
-   // margin between plot series elements and data labels
-   const LABELS_MARGIN = {
-      'small': 11,
-      'medium': 15,
-      'large': 17,
-      'xlarge': 19
-   };
-
-   // line styles for different scales and types
-   const LINE_STYLES = {
-      small: ['0', '3,3', '1,1', '3,1'],
-      medium: ['0', '5,5', '2,2', '5,2'],
-      large: ['0', '7,7', '3,3', '7,3'],
-      xlarge: ['0', '9,9', '4,4', '9,3'],
+   function handleDown(e) {
+      handleMouse(e, onmousedown)
    }
 
-   // marker symbols
-   const MARKER_SYMBOLS = ["●", "◼", "▲", "▼", "⬥", "＋", "✳", "✕"];
-
-   // constant to make clip path ID unique
-   const clipPathID = 'plottingArea' + Math.round(Math.random() * 10000);
-
-
-   /*****************************************/
-   /* Variable parameters for internal use  */
-   /*****************************************/
-
-   /* parameters for internal use inside the component */
-   let plotElement;
-   let width = 100, height = 100;
-   let left = 0, bottom = 0, top = 0;
-
-
-   /*****************************************/
-   /* Helper functions                      */
-   /*****************************************/
+   function handleUp(e) {
+      handleMouse(e, onmouseup)
+   }
 
-   /**
-    * Dispatcher for click events.
-    * @param {string} eventName - name of the event.
-    * @param {HTMLDOMElement} el - DOM element the click was registered for.
-    *
-    */
-   function dispatchClickEvent(eventName, el) {
-      const id = Array.prototype.indexOf.call(el.parentNode.children, el)
-      dispatch(eventName, {seriesTitle: el.parentNode.getAttribute('title'), elementID: id});
+   function handleMove(e) {
+      handleMouse(e, onmousemove)
    }
 
-   /**
-    * Handler (router) for axes or series click events.
-    *
-    * @param {event} e - event object.
-    *
-    * @description
-    * Checks which element the click was made on and dispatch a corresponding event.
-    *
-    */
    function handleClick(e) {
-
-      // click on scatter plot markers
-      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')) {
-         dispatchClickEvent('barclick', e.target);
-         return;
-      }
-
-      // click outside any plot element
-      dispatch('axesclick');
+      handleMouse(e, onclick)
    }
 
-
-   /**
-    * Handler (router) for click event on copy plot button.
-    *
-    * @description
-    * Copy plot to clipboard as PNG image.
-    *
-    */
+   /* Copy plot to clipboard as PNG image. */
    async function handleClickCopy(e) {
-      navigator.clipboard.write([
-         new ClipboardItem({ 'image/png': createPngBlob(plotElement, clipboardWidth, clipboardHeight) })
-      ]).catch(function (error) { console.error(error); });
-
-      const content = e.target.textContent;
-      e.target.classList.add('copied');
-      e.target.textContent = '✓ done';
-
-      // Remove the class after 1 second and revert the text
-      setTimeout(() => {
-        e.target.classList.remove('copied');
-        e.target.textContent = content;
-      }, 500);
+      copyToClipboard(e.target, plotElement, clipboardWidth, clipboardHeight);
    }
 
-
-   /**
-    * Handler (router) for click event to download SVG image.
-    *
-    * @description
-    * Copy plot to clipboard as SVG image.
-    *
-    */
+   /* Download plot as SVG image. */
    function handleClickSVG() {
       downloadSVG(plotElement, fileName);
    }
 
-
-   /**
-    * Handler (router) for click event to download PNG image.
-    *
-    * @description
-    * Copy plot to clipboard as PNG image.
-    *
-    */
+   /* Download plot as PNG image. */
    function handleClickPNG() {
       downloadPNG(plotElement, fileName, pngWidth, pngHeight, pngRes);
    }
 
-   /**
-    * Generic function to transform x or y-values from plot coordinates to screen (SVG) coordinates.
-    *
-    * @param {Array|Vector} v - vector with coordinates (or objects size) in original plot coordinates.
-    * @param {Object} tA - array with scaling and translation factors.
-    *
-    * @returns {Vector} vector with rescaled values
-    *
-    */
-   const transform = function(v, tA) {
-
-      if (!$isOk || v === undefined || v === null) return undefined;
-      if (Array.isArray(v)) v = vector(v);
-      if (!isvector(v) || v.length < 1) return undefined;
-
-      return v.apply(a => roundCoords((a - tA[1]) * tA[0] + tA[2])).v;
-   }
-
-
-   /**
-    * Generic function to transform x or y-values from screen (SVG) coordinates to plot coordinates.
-    *
-    * @param {Array|Vector} v - vector with coordinates (or objects size) in screen (SVG) coordinates.
-    * @param {Object} tA - array with scaling and translation factors.
-    *
-    * @returns {Vector} vector plot coordinates.
-    *
-    */
-   const invTransform = function(v, tA) {
-
-      if (!$isOk || v === undefined || v === null) return undefined;
-      if (Array.isArray(v)) v = vector(v);
-      if (!isvector(v) || v.length < 1) return undefined;
-
-      return v.apply(a => (a - tA[2]) / tA[0] + tA[1]).v;
-   }
 
-   /*****************************************/
-   /* Storage to share with children        */
-   /*****************************************/
-
-   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
-
-
-   /*****************************************/
-   /* Axes context                          */
-   /*****************************************/
-
-   let context = {
-
-      // methods
-      transform: transform,
-      invTransform: invTransform,
-
-      // variables
-      scale: scale,
-      isOk: isOk,
-      xLim: xLim,
-      yLim: yLim,
-      tX: tX,
-      tY: tY,
-      xLabel: xLabel,
-      yLabel: yLabel,
-
-      // constants
-      LINE_STYLES: LINE_STYLES,
-      LABELS_MARGIN: LABELS_MARGIN,
-      TICK_NUM: TICK_NUM,
-      TICK_SIZE: TICK_SIZE,
-      MARKER_SYMBOLS: MARKER_SYMBOLS,
-      LEGEND_FONT_SIZE: LEGEND_FONT_SIZE
-   }
+   // unique ID for clip path
+   const clipPathID = 'plottingArea' + Math.round(Math.random() * 10000);
 
-	setContext('axes', context);
-
-   /*****************************************/
-   /* Reactive updates of the parameters    */
-   /*****************************************/
-
-   // computes real margins in pixels based on current scale
-   $: pxMargins = margins.map(v => v * AXES_MARGIN_FACTORS[$scale]);
-
-   // update limits if necessary
-   $: xLim.update(v => limX);
-   $: yLim.update(v => limY);
-
-   // computes status which tells that axes limits look fine and it is safe to draw
-   // the status is based on the axis limits validity
-   $: isOk.update(v =>
-      Array.isArray($yLim) &&
-      Array.isArray($xLim) &&
-      $xLim.length === 2 &&
-      $yLim.length === 2 &&
-      !$yLim.some(v => v === undefined) &&
-      !$xLim.some(v => v === undefined) &&
-      !$yLim.some(v => isNaN(v)) &&
-      !$xLim.some(v => isNaN(v)) &&
-      $xLim[1] !== $xLim[0] &&
-      $yLim[1] !== $yLim[0] &&
+   // pointers to plot DOM element and its width and height
+   let plotElement = $state(0);
+   let plotWidth = $state(0);
+   let plotHeight = $state(0);
+
+   // scales and related parameters
+   const scales = $derived({'plot': getScale(plotWidth, plotHeight), 'x': getAxisScale(plotWidth), 'y': getAxisScale(plotHeight)});
+   const pxMargins = $derived(margins.map(v => v * AXES_MARGIN_FACTORS[scales.plot]));
+   const fontSize = $derived(PLOT_FONT_SIZE[scales.plot]);
+   const tickSize = $derived(TICK_SIZE[scales.plot]);
+   const lineStyles = $derived(LINE_STYLES[scales.plot]);
+
+   // left and bottom margins as well as width and height of the axes area (including margins)
+   const bottom = $derived(xaxis.show && xaxis.label !== '' ? fontSize * 1.5 : 0);
+   const left = $derived(yaxis.show && yaxis.label !== '' ? fontSize * 1.5 : 0);
+   const top = $derived(title && title !== '' ? fontSize * 1.5 : 0);
+   const width = $derived(plotWidth > left ? plotWidth - left : 0);
+   const height = $derived(plotHeight > (bottom + top) ? plotHeight - bottom - top : 0);
+
+   // size of the axes area without margins
+   const axisHeight = $derived(height - pxMargins[0] - pxMargins[2]);
+   const axisWidth = $derived(width - pxMargins[1] - pxMargins[3]);
+
+   // plot status
+   const isOk = $derived(
+      checkArray(limX, 2) &&
+      checkArray(limY, 2) &&
+      limX[0] < limX[1] &&
+      limY[0] < limY[1] &&
       width > (pxMargins[1] + pxMargins[3]) &&
       height > (pxMargins[0] + pxMargins[2])
-   )
-
-   // update transformation array for x-coordinates
-   $: {
-      if ($isOk) {
-         tX.update(v => ({
-            'coords':  [ (width - pxMargins[1] - pxMargins[3]) / ($xLim[1] - $xLim[0]), $xLim[0], pxMargins[1]],
-            'objects': [ (width - pxMargins[1] - pxMargins[3]) / ($xLim[1] - $xLim[0]),       0,             0]
-         }));
-      }
-   };
-
-   // update transformation array for y-coordinates
-   $: {
-      if ($isOk) {
-         tY.update(v => ({
-            'coords':  [-(height - pxMargins[0] - pxMargins[2]) / ($yLim[1] - $yLim[0]), $yLim[1], pxMargins[2]],
-            'objects': [ (height - pxMargins[0] - pxMargins[2]) / ($yLim[1] - $yLim[0]),        0,            0]
-         }));
+   );
+
+
+   // transformation matrix for x
+   const tX = $derived(!isOk ? {'coords': [1, 0, 0], 'objects': [1, 0, 0]} :
+      {
+         'coords':  [ axisWidth / (limX[1] - limX[0]), limX[0], pxMargins[1]],
+         'objects': [ axisWidth / (limX[1] - limX[0]),       0,            0]
       }
-   };
-
-   // computes coordinates for clip path box
-   $: cpx = $isOk ? transform($xLim, $tX.coords) : [0, 1];
-   $: cpy = $isOk ? transform($yLim, $tY.coords) : [1, 0];
-
-
-   /*****************************************/
-   /* Events observers                      */
-   /*****************************************/
-
-   // observer for the plot area size — to update the scale
-   const ro = new ResizeObserver(entries => {
-      for (let entry of entries) {
-         const pcr = plotElement.getBoundingClientRect();
-         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 ? pcr.width - left : 0;
-         height = pcr.height > (bottom + top) ? pcr.height - bottom - top : 0;
+   );
+
+   // transformation matrix for y
+   const tY = $derived(!isOk ? {'coords': [0, 1, 0], 'objects': [0, 1, 0]} :
+      {
+         'coords':  [-axisHeight / (limY[1] - limY[0]), limY[1], pxMargins[2]],
+         'objects': [ axisHeight / (limY[1] - limY[0]),       0,            0]
       }
+   );
+
+   // coordinates if the middle point of plotting area (needed for axis labels location)
+   const my = $derived(axisHeight * 0.5 + top + pxMargins[2]);
+   const mx = $derived(axisWidth * 0.5 + left + pxMargins[1]);
+
+   // coordinates for clip path box
+   const cpx = $derived(isOk ? transformCoords(limX, tX) : [0, 1]);
+   const cpy = $derived(isOk ? transformCoords(limY, tY) : [1, 0]);
+
+   // parameters of plot title
+   const plotTitle = $derived(text2svg(title));
+   const titleHeight = $derived(plotTitle ? (plotTitle.length === title.left ? 1.0 : 1.4) : 0);
+
+   // default parameters of box, axis elements, colomap legend and group legend
+   let box = $state({show: false});
+   let xaxis = $state({show: false, error: ''});
+   let yaxis = $state({show: false, error: ''});
+   let clg = $state({show: false, colmap: null, breaks: null});
+   let glg = $state({show: false, items: null, position: null});
+
+   // set colormap legend parameters if requested
+   const clgParams = $derived(isOk && clg && clg.show ? getColormapLegendParams(clg) : null);
+
+   // compute world coordinates of axis elements
+   const xaxisCoords = $derived(isOk && xaxis.show ? getXAxisParams(limX, limY, scales, tY, xaxis) : null);
+   const yaxisCoords = $derived(isOk && yaxis.show ? getYAxisParams(limX, limY, scales, tX, yaxis) : null);
+
+   // compute screen coordinates of legend elements
+   const clgCoords = $derived(isOk && clgParams ? getColormapLegendCoords(clgParams, axisWidth, pxMargins, scales) : null);
+   const glgCoords = $derived(isOk && glg && glg.show && cpx? getGroupLegendCoords(glg, cpx, cpy, fontSize, tickSize) : null);
+
+   // axes context to share with children
+   setContext('axes', {
+      setBox: (v) => box = v,
+      setXAxis: (v) => xaxis = v,
+      setYAxis: (v) => yaxis = v,
+      setColmapLegend: (v) => clg = v,
+      setGroupLegend: (v) => glg = v,
+      scales: () => scales,
+      tX: () => tX,
+      tY: () => tY,
+      limX: () => limX,
+      limY: () => limY
    });
+</script>
 
-   $: fontSize = PLOT_FONT_SIZE[$scale];
+<!-- snippet for axis -->
+{#snippet axisSnippet(coords, params)}
 
-   onMount(() => {
-      ro.observe(plotElement);
-   });
+   {#if params.error}
+      {#if params.pos === 4}
+      <text x={cpx[0] - 10} y={my} fill="crimson" transform={`rotate(-90, ${cpx[0] - 10}, ${my})`} text-anchor="middle">{params.error}</text>
+      {:else}
+      <text x={mx} y={cpy[0]} dy='10px' fill="crimson" text-anchor="middle" dominant-baseline="hanging">{params.error}</text>
+      {/if}
+   {:else}
+      {#if params.showGrid }
+         <AxisLines lineCoords={coords.grid} lineColor={Colors.MIDDLEGRAY} lineType={3} />
+      {/if}
+
+      <AxisLines lineCoords={coords.axisLine} lineColor={Colors.DARKGRAY} lineType={1} />
+      <AxisLines lineCoords={coords.tickCoords} lineColor={Colors.DARKGRAY} lineType={1} />
+
+      {#if coords.tickCoords.length === 2 && coords.tickLabels.length === coords.tickCoords[1][0].length}
+      <AxisTickLabels las={params.las} pos={params.pos} tickCoords={coords.tickCoords}
+         tickLabels={coords.tickLabels} tickColor={Colors.DARKGRAY} hideLast={params.hideLast}/>
+      {/if}
+
+      <!-- tick factor -->
+      {#if coords.tickFactor !== 0}
+      <AxisTickLabels pos={params.pos} tickCoords={coords.tfCoords} tickLabels={[coords.tfLabel]} textColor={Colors.DARKGRAY} />
+      {/if}
+   {/if}
 
-   onDestroy(() => {
-      ro.unobserve(plotElement);
-   })
+{/snippet}
+
+<!-- snippedt for colormap legend -->
+{#snippet clgSnippet(params, coords)}
+
+   {@const dy = coords.height * 1.25}
+   {@const n = params.colmap.length}
+
+   {#each params.colmap as col, i}
+      {@const x = coords.start + i * coords.width}
+      <rect {x} y={coords.top} width={coords.width} height={coords.height} fill={col} />
+      <text {x} y={coords.ltop} dx={coords.dxl} dy={0} dominant-baseline="hanging"
+         fill={params.labelColor}
+         font-size={params.fontSize + "em"}
+         text-anchor="middle"
+      >{@html params.labels[i]}</text>
+   {/each}
+
+   {#if !params.isCentered}
+      {@const x = coords.start + n * coords.width }
+      <text {x} y={coords.ltop} dx={0} dy={0} dominant-baseline="hanging"
+         fill={params.labelColor}
+         font-size="{params.fontSize}em"
+         text-anchor="middle"
+      >{@html params.labels[n]}</text>
+   {/if}
 
-</script>
 
-<div class="plot-container show-download-links-{downloadLinks}" class:plot_error={!$isOk}>
+   {#if params.labelsFactor !== 0}
+      {@const x = coords.start + (n + 0.85) * coords.width  }
+      <text {x} y={coords.ltop} dx={0} dy={0} dominant-baseline="hanging"
+         fill={params.labelColor}
+         font-size="{params.fontSize}em"
+         text-anchor="middle"
+      >{@html getTickFactorLabel(params.labelsFactor)}</text>
+   {/if}
+{/snippet}
+
+<!-- snipped for group legend -->
+{#snippet glgSnippet(params, coords)}
+   {@const elw = coords.elw + 2 * coords.elp}
+   {@const elp = coords.elp}
+   {@const elh = coords.elh}
+   {@const ely = coords.ely}
+
+   <svg x={coords.lgl} y={coords.lgt} height={coords.lgh} width={coords.lgw}>
+      <rect height="100%" width="100%" fill={params.faceColor} stroke={params.lineColor} stroke-width={params.lineWidth} />
+
+      {#each params.items as item, i}
+      <svg x={0} y={ely[i]} width={coords.lgw} height={elh[i]}>
+
+         <!-- line -->
+         {#if item.line}
+         <line
+            x1={elp}
+            x2={elw - elp}
+            y1={elh[i]/2}
+            y2={elh[i]/2}
+            stroke={item.line.lineColor}
+            stroke-width={item.line.lineWidth}
+            stroke-dasharray={lineStyles[item.line.lineType - 1]}
+         />
+         {/if}
+
+         <!-- marker -->
+         {#if item.point}
+         <text
+            x={elw/2}
+            y={elh[i]/2}
+            dominant-baseline="middle"
+            text-anchor="middle"
+            fill={item.point.faceColor}
+            stroke-width={item.point.lineWidth}
+            stroke={item.point.lineColor}
+            font-size={fontSize}
+         >{MARKER_SYMBOLS[item.point.marker - 1]}</text>
+         {/if}
 
-   <svg class="plot" bind:this={plotElement} xmlns="http://www.w3.org/2000/svg"
-      style={`font-size:${fontSize}px`}>
+         <!-- text -->
+         <text
+            class="legend-text"
+            xml:space="preserve"
+            x={elw + elp}
+            y={elh[i]/2}
+            dominant-baseline="middle"
+            text-anchor="start"
+            fill={Colors.LEGEND}
+            font-size="{params.fontSize}em"
+         > {@html item.label}</text>
 
+      </svg>
+      {/each}
+   </svg>
+{/snippet}
+
+
+<div class="plot-container show-download-links-{downloadLinks}" class:plot-error={!isOk}>
+
+   <svg class="plot" bind:this={plotElement} bind:clientWidth={plotWidth} bind:clientHeight={plotHeight}
+      xmlns="http://www.w3.org/2000/svg" style="font-size:{fontSize}px">
       <style>
          .plot {
             font-family: Arial, Helvetica, sans-serif;
@@ -383,82 +335,159 @@
          .plot-labels text {
             font-weight:bold;
             text-anchor:middle;
+            user-select: none;
+         }
+
+         .series-points text {
+            /* dominant-baseline: central;
+            alignment-baseline: central */
          }
 
          .tick-labels text,
          .tick-labels tspan,
+         .series-textlabels text,
+         .series-textlabels tspan,
          .series-text text,
-         .series-text tspan,
+         .series-text tspan {
+            dominant-baseline: middle;
+            cursor: default;
+            user-select: none;
+            -webkit-user-select: none;
+         }
+
+
          .series-points text,
          .series-points tspan {
-            dominant-baseline: middle;
             cursor: default;
             user-select: none;
+            -webkit-user-select: none;
          }
 
          .series-text text,
          .series-text tspan {
             text-anchor: middle;
+            user-select: none;
+            -webkit-user-select: none;
          }
 
          .tick-labels text,
          .tick-labels tspan {
-            font-size:1em;
+            user-select: none;
+            -webkit-user-select: none;
          }
       </style>
 
+      {#if isOk}
       <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>
-         {/if}
          <!-- x-axis label -->
-         {#if xLabel && xLabel !== ''}
-         <text x={left + width/2 } y={height + top} dx={0} dy={5} dominant-baseline="middle" style="font-size:1.1em;">{@html xLabel}</text>
+         {#if xaxis.show && xaxis.label && xaxis.label !== ''}
+         <text x={mx} y={height + top} dx={0} dy={0} dominant-baseline="middle" style="font-size:1.1em;">{@html xaxis.label}</text>
          {/if}
+
+         <!-- y-axis label -->
+         {#if yaxis.show && yaxis.label && yaxis.label !== ''}
+         <text x={fontSize / 1.1 * yaxis.labelHeight} y={my} dx={0} dy={0} dominant-baseline="middle"
+            transform={`rotate(-90, ${fontSize * yaxis.labelHeight / 1.1}, ${my})`} style="font-size:1.1em;">{@html yaxis.label}</text>
+         {/if}
+
          <!-- plot title -->
-         {#if title && title !== ''}
-         <text x={left + width/2 } y={0} dx={0} dy={10}  dominant-baseline="hanging" style="font-size:1.2em;">{@html title}</text>
+         {#if plotTitle && plotTitle !== ''}
+         <text x={mx} y={fontSize * titleHeight} dx={0} dy={0}  dominant-baseline="middle"
+            style="font-size:1.2em;">{@html plotTitle}</text>
          {/if}
       </g>
+      {/if}
 
-      <svg x={left} y={top} width={width} height={height} on:click={handleClick}
-         on:keydown={handleClick} preserveAspectRatio="none" class="axes">
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <svg x={left} y={top} width={width} height={height} preserveAspectRatio="none" class="axes">
 
          <!-- define clipping path -->
          <defs>
             <clipPath id={clipPathID}>
-               <rect style="pointer-events:none" x={cpx[0]} y={cpy[1]} width={cpx[1]-cpx[0]} height={cpy[0]-cpy[1]} />
+               <rect x={cpx[0]} y={cpy[1]} width={cpx[1]-cpx[0]} height={cpy[0]-cpy[1]} />
             </clipPath>
          </defs>
 
-         <!-- axis and box -->
-         <slot name="xaxis"></slot>
-         <slot name="yaxis"></slot>
+         {#if isOk }
+
+            <!-- xaxis -->
+            {#if xaxis.show && xaxisCoords}
+            <g class="axis x-axis">
+               {@render axisSnippet(xaxisCoords, xaxis)}
+            </g>
+            {/if}
+
+            <!-- yaxis -->
+            {#if yaxis.show && yaxisCoords}
+            <g class="axis y-axis">
+               {@render axisSnippet(yaxisCoords, yaxis)}
+            </g>
+            {/if}
+
+            <!-- box -->
+            <g class="axes-box">
+            {#if box.show}
+            <rect stroke={box.lineColor} stroke-width="{box.lineWidth}px" fill="transparent"
+               x={cpx[0]} y={cpy[1]} width={cpx[1] - cpx[0]} height={cpy[0] - cpy[1]}
+               id="axes-box"
+               onkeydown={handleClick}
+               onclick={handleClick}
+               onmousemove={handleMove}
+               onmousedown={handleDown}
+               onmouseup={handleUp}
+            />
+            {:else}
+            <rect stroke="transparent" fill="transparent"
+               x={cpx[0]} y={cpy[1]} width={cpx[1] - cpx[0]} height={cpy[0] - cpy[1]}
+               id="axes-box"
+               onkeydown={handleClick}
+               onclick={handleClick}
+               onmousemove={handleMove}
+               onmousedown={handleDown}
+               onmouseup={handleUp}
+            />
+            {/if}
+            </g>
+
+
+            <!-- main plot content -->
+            <g class="axes-content" clip-path="url(#{clipPathID})">
+               {@render children?.()}
+            </g>
+
+            <!-- colormap legend -->
+            {#if clgCoords }
+            <g class="colormap-legend" style="stroke:0;stroke-width:0px;">
+               {@render clgSnippet(clgParams, clgCoords)}
+            </g>
+            {/if}
+
+            <!-- group legend -->
+            {#if glgCoords }
+            <g class="group-legend" style="stroke:0;stroke-width:0px;">
+               {@render glgSnippet(glg, glgCoords)}
+            </g>
+            {/if}
 
-         <!-- main plot content -->
-         <g class="axes-content" clip-path="url(#{clipPathID})">
-            <slot></slot>
-         </g>
 
-         <!-- axis and box -->
-         <slot name="box"></slot>
+
+         {/if}
+
       </svg>
    </svg>
 
-   {#if !$isOk}
-   <p class="message_error">
+   {#if !isOk}
+   <p class="message-error">
       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>
-      <button on:click={handleClickCopy} on:keydown={handleClickCopy}>⧉ copy</button>
+      <button onclick={handleClickSVG} onkeydown={handleClickSVG}>⇩ svg</button>
+      <button onclick={handleClickPNG} onkeydown={handleClickPNG}>⇩ png</button>
+      <button onclick={handleClickCopy} onkeydown={handleClickCopy}>⧉ copy</button>
    </div>
    {/if}
-
 </div>
 
 <style>
@@ -476,7 +505,6 @@
 
    .download-links {
       box-sizing: border-box;
-      bottom: right 0.5s ease;
       position: absolute;
       font-size: 0.8em;
       bottom: -50%;
@@ -510,6 +538,14 @@
       color: #fafafa;
    }
 
+   .download-links > :global(button.error){
+      background: #ee4433;
+   }
+
+   .download-links > :global(button.copied){
+      background: #4488ee;
+   }
+
 
    /* Plot container */
    .plot-container {
@@ -526,13 +562,13 @@
       background: #fff;
    }
 
-   .plot_error {
+   .plot-error {
       display: flex;
       justify-content: center;
       align-items: center;
    }
 
-   .message_error {
+   .message-error {
       font-size: 1.2em;
       color: crimson;
       padding: 1em;