svelte-plots-basic 2.5.7 → 3.0.0

package/src/2d/Heatmap.svelte

@@ -1,99 +1,123 @@
+<!--
+@component Adds a heatmap visializing values of a matrix.
+
+   Main properties:
+   - `values` - matrix (object of class `Matrix` from `mdatools` package) with values to visualize.
+   - `breaks` - array (or vector) with interval breaks boundaries (optional).
+   - `colmap` - array with colors for each break (optional).
+
+   Example:
+
+   ```svelte
+   <script>
+      import { Matrix } from 'mdatools/arrays';
+      import { Axes, Heatmap } from 'svelte-plots-basic/2d';
+
+      // create matrix with 5 rows and 10 columns filled with 5random values.
+      const x = Matrix.rand(5, 10);
+   </script>
+
+   <Axes>
+      <Heatmap values={x} />
+   </Axes>
+   ```
+-->
 <script>
-   /*********************************************************
-   * Heatmap                                                *
-   * --------------------                                   *
-   * shows matrix values as a heatmap                       *
-   **********************************************************/
 
    import { getContext } from 'svelte';
-   import { Vector, ismatrix } from 'mdatools/arrays';
+   import { ismatrix, isvector } from 'mdatools/arrays';
    import { expandgrid } from 'mdatools/misc';
    import { split } from 'mdatools/stat';
 
-   import { getcolmap } from '../Colors';
-   import { checkCoords } from '../Utils';
-
-
-   /*****************************************/
-   /* Input parameters                      */
-   /*****************************************/
-
-   export let values;                        // Matrix with values to show heatmap for
-   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 title = '';                    // title of the rectangle series (reserved for future use)
-
-
-   /*****************************************/
-   /* Component code                        */
-   /*****************************************/
-
-   // check values
-   $: if (!ismatrix(values) || values.v.length === 0) {
-      throw new Error('Heatmap: parameter "values" must be a matrix.');
-   }
-
-   // check breaks values
-   $: if (!lBreaks || lBreaks.length < 2) {
-      throw new Error('Heatmap: breaks values are neither defined nor can not be computed.');
-   }
-
-   // check colormap values
-   $: if (!lColmap || lColmap.length !== lBreaks.length - 1) {
-      throw new Error('Heatmap: number of color values in colormap does not match number of intervals defined by breaks.');
-   }
+   import { getcolmap, transformObjects, transformCoords, seq } from '../methods';
+   import { HEATMAP_NUM_SPLITS } from '../constants';
+
+
+   /** @type {Props} */
+   let {
+      values,                        // Matrix with values to show heatmap for
+      breaks,                        // vector with breaks to distribute the values in
+      colmap = null,                 // array with colors for each interval
+   } = $props();
+
+
+   // check that values are provided as a matrix
+   let v = $derived(ismatrix(values) && values.nrows > 0 && values.ncols > 0 ? values : null);
+
+   // check and process left values for breaks
+   let lb = $derived.by(() => {
+      if (!v) return null;
+      if (breaks && Array.isArray(breaks)) return breaks;
+      if (breaks && isvector(breaks)) return breaks.v;
+      return split(v.v, HEATMAP_NUM_SPLITS).v;
+   });
+
+   // check and process colormap values
+   let lc = $derived.by(() => {
+      if (colmap) {
+         if (!Array.isArray(colmap)) {
+            console.error('Heatmap: parameter "colmap" must be array with colors.');
+            return null;
+         }
+         if (colmap.length !== breaks.length - 1) {
+            console.error('Heatmap: number of color values in colormap does not match number of intervals defined by breaks.');
+            return null;
+         }
+         return colmap;
+      }
+      return getcolmap(lb.length - 1);
+   });
+
+   // compute coordinates of heatmap elements (left top corners)
+   let l = $derived(v ? seq(v.ncols) : null);
+   let t = $derived(v ? seq(v.nrows) : null);
+   let lt = $derived(l && t ? expandgrid(t, l) : null);
+
+   // compute world coordinates of the elements for each interval in world coordinates
+   let wc = $derived.by( () => {
+      if (!lt || !lb || !lc) return null;
+      const [top, left] = lt;
+      const nv = left.length;  // number of values in matrix
+      const nb = lb.length;    // number of breaks
+      const rl = Array(nb).fill().map(() => []);     // coordinates of left for every break
+      const rt = Array(nb).fill().map(() => []);     // coordinates of top for every break
+
+      // adjust left side for the first break and right side for the last
+      const llb = lb.slice();
+      const w = llb[1] - llb[0];
+      llb[0] = llb[0] - 0.1 * w;
+      llb[nb - 1] = llb[nb - 1] + 0.1 * w;
+
+      // loop over all breaks
+      for (let j = 0; j < nv; j++) {
+         const vj = v.v[j];
+         for (let i = 0; i < nb - 1; i++) {
+            if (vj > llb[i] && vj <= llb[i + 1]) {
+               rl[i].push(left.v[j] - 0.5);
+               rt[i].push(v.nrows - top.v[j] + 1.5);
+               break;
+            }
+         }
+      };
+      return {rl, rt};
+   });
 
-   // define local variables for breaks and colormap
-   $: lBreaks = breaks ? breaks.v : split(values.v, 13).v;
-   $: lColmap = colmap ? colmap : getcolmap(lBreaks.length - 1);
 
-   // get axes context and reactive variables needed to compute coordinates
+   // get axes context and compute screen coordinates
    const axes = getContext('axes');
-   const tX = axes.tX;
-   const tY = axes.tY;
-   const isOk = axes.isOk;
-
-   // compute combinations of heatmap element positions
-   let top, left;
-   $: {
-      const x = Vector.seq(1, values.ncols);
-      const y = Vector.seq(1, values.nrows);
-      [top, left] = expandgrid(y.v, x.v);
-   }
-
-   // compute screen coordinates of the elements for each interval
-   let rx, ry, rw, rh = undefined;
-   $: {
-      if ($isOk) {
-         rx = [];
-         ry = [];
-         for (let i = 1; i < lBreaks.length; i++) {
-            let lleft = [];
-            let ltop = [];
-            for (let j = 0; j < values.v.length; j++) {
-               const v = values.v[j];
-               if (v > lBreaks[i - 1] && v <= lBreaks[i]) {
-                  lleft.push(left.v[j] - 0.5);
-                  ltop.push(top.v[j] + 0.5);
-               }
-            }
-            rx.push(lleft.length === 0 ? [] : axes.transform(checkCoords(lleft, 'Rectangles'), $tX.coords));
-            ry.push(ltop.length === 0 ? [] : axes.transform(checkCoords(ltop, 'Rectangles'), $tY.coords));
-         };
-
-         rw = axes.transform([1], $tX.objects);
-         rh = axes.transform([1], $tY.objects);
-      }
-   };
+   let rx = $derived(wc ? wc.rl.map(v => v.length >  0 ? transformCoords(v, axes.tX()) : []) : null);
+   let ry = $derived(wc ? wc.rt.map(v => v.length >  0 ? transformCoords(v, axes.tY()) : []) : null);
+   let rw = $derived(transformObjects([1], axes.tX()));
+   let rh = $derived(transformObjects([1], axes.tY()));
 
+   // check status
+   let isOk = $derived(rx && ry && rx.length === ry.length);
 </script>
 
-{#if $isOk && rx.length > 0}
-   <g class="series {className}" title={title} style="stroke:0;stroke-width:0px;">
+{#if isOk}
+   <g class="heatmap" style="stroke:0;stroke-width:0px;">
    <!-- loop over colors/intervals -->
-   {#each lColmap as col, i}
+   {#each lc as col, i}
       <g title="heatmap-group" style="fill:{col};">
       {#if rx[i].length > 0}
          <!-- loop over elements which fall into the interval -->
@@ -105,5 +129,3 @@
    {/each}
    </g>
 {/if}
-
-

package/src/2d/Legend.svelte

@@ -1,140 +1,129 @@
+<!--
+@component Adds legend for groups of series.
+
+   Main properties:
+   - `items` - array with text labels and their visual properties for each legend element.
+   - `position` - position of the legend ("topleft", "top", "topright", "right", etc), default: `"topleft"`.
+   - `lineColor` - color of the legend box line, default: `Colors.LEGEND`.
+   - `lineWidth` - width (thickness) of the legend box line in pixels: `1`.
+   - `faceColor` - color of the legend box background: `'#fff'`.
+   - `fontSize` - font size for the legend labels in em, default `0.85`.
+
+   Example:
+
+   ```svelte
+   <script>
+      import {Vector} from 'mdatools/array';
+
+      const x = Vector.seq(-10, 10, 0.1);
+      const y1 = x.apply(v => Math.cos(v));
+      const y2 = x.apply(v => Math.sin(v));
+   </script>
+
+   <Axes limX={[-10, 10]} limY={[-1.1, 1.1]} >
+
+      <Lines xValues={x} yValues={y1} lineColor="red" lineType="3" />
+      <Lines xValues={x} yValues={y2} lineColor="blue" lineType="1" />
+      <Points xValues={x} yValues={y2} faceColor="white" borderColor="blue" />
+
+      <Legend
+         position="topright"
+         items = {[
+            {"label": "cos(x)", "lineType": 1, "lineColor": "red"},
+            {"label": "sin(x)", "lineType": 1, "lineColor": "blue", "marker": 1, "faceColor": "white", "borderColor": "blue"},
+         ]}
+      />
+
+      <Box />
+      <XAxis label="x" showGrid={true} />
+      <YAxis label="f(x)" showGrid={true} />
+   </Axes>
+-->
 <script>
-   /****************************************************
-   * Legend                                            *
-   * --------------------                              *
-   * shows legend for plot components                  *
-   *****************************************************/
-
-   import { mean } from 'mdatools/stat';
    import { getContext } from 'svelte';
-   import { Colors } from '../Colors';
-
+   import { Colors, MARKER_SYMBOLS } from '../constants';
+   import { text2svg } from '../methods';
 
-   /*****************************************/
-   /* Input parameters                      */
-   /*****************************************/
+   let {
+      items,                     // array with text labels and their visual properties for each legend element.
+	   position = 'topleft',      // position of the legend ("topleft", "top", "topright", "right", "bottomright", etc).
+      lineColor = Colors.LEGEND, // color of the legend box line
+      lineWidth = 1,             // width (thickness) of the legend box line
+      faceColor = '#fff',        // background color of the legend box
+      fontSize = 0.85            // font size for labels in em.
+   } = $props();
 
-   export let items;                 // array with text labels for each legend element
-	export let position = "topleft";  // position of the legend ("topleft", "top", "topright", "right", "bottomright", etc).
 
+   /* check if user provided position is correct */
+   function checkPosition(position) {
 
-   /*****************************************/
-   /* Component code                        */
-   /*****************************************/
-
-   const axes = getContext('axes');
-   const scale = axes.scale;
-   const xLim = axes.xLim;
-   const yLim = axes.yLim;
-   const tX = axes.tX;
-   const tY = axes.tY;
-   const isOk = axes.isOk;
-
-
-   /**
-    * Computes width of text element for given font.
-    *
-    * @param {string} text - string with text
-    * @param {string} font - font name and size, e.g. '12px Arial'
-    *
-    * @return {number} size of element in pixels
-    */
-   function getTextWidth(text, font) {
-      const element = document.createElement('canvas');
-      const context = element.getContext('2d');
-      context.font = font;
-      return context.measureText(text.replace(/<(.|\n)*?>/g, '')).width;
-   }
-
-   /**
-    * Compute size of main legend elements.
-    *
-    * @param {Array} items - array of legend items and their properties.
-    * @param {number} fontSize - font size of a legend element.
-    * @param {string} position - position of the legend.
-    *
-    * @return {Array} array with height and width og graphical part of legend item, padding size,
-    * height and width of text labels (all in pixels).
-    */
-   function getLegendSize(items, fontSize, position)  {
-
-      // compute size of graphical elements
-      const elHeight = fontSize;       // height of legend element without padding
-      const elPadding = elHeight / 4;  // top and bottom padding
-      const elWidth = elHeight * 1.5;  // width of legend element without padding
-
-      // compute size of text label elements
-      // TODO: implement one row legend if position is "top" or "bottom"
-      const lbHeight = elHeight;
-      let lbWidth = 0;
-      for (let i = 0; i < items.length; i++) {
-         const w = getTextWidth('  ' + items[i].label + '  ', fontSize + 'px Arial');
-         lbWidth = w > lbWidth ? w : lbWidth;
+      if (typeof position !== 'string') {
+         console.error('Legend: value of "position" must be a string.');
+         return null;
       }
 
-      return [elHeight, elWidth, elPadding, lbHeight, lbWidth];
-   }
-
-   // reactive expression to compute all sizes and coordinates
-   let left, top, elHeight, elWidth, elPadding, lbHeight, lbWidth, legendHeight, legendWidth, fontSize;
-   $: if ($isOk) {
-
-      fontSize = axes.LEGEND_FONT_SIZE[$scale];
-
-      // compute size of elements
-      [elHeight, elWidth, elPadding, lbHeight, lbWidth] = getLegendSize(items, fontSize, position);
-
-      // compute size of whole legend box
-      legendHeight = (elHeight + 2 * elPadding) * items.length;
-      legendWidth = (elWidth + 2 * elPadding + lbWidth);
-
-      // compute coordinates of top left corner of the legend box
-      const xLimPx = axes.transform($xLim, $tX.coords);
-      left = position.includes("left") ? xLimPx[0] + axes.TICK_SIZE[$scale] :
-          position.includes("right") ? xLimPx[1] - legendWidth - axes.TICK_SIZE[$scale] :
-          mean(xLimPx) - legendWidth/2;
-
-      const yLimPx = axes.transform($yLim, $tY.coords);
-      top = position.includes("top") ? yLimPx[1] + axes.TICK_SIZE[$scale] :
-          position.includes("bottom") ? yLimPx[0] - legendHeight - axes.TICK_SIZE[$scale] :
-          mean(yLimPx) - legendHeight/2;
+      if (!['top', 'left', 'right', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'].includes(position)) {
+         console.error('Legend: wrong value of "position" property');
+         return null;
+      }
+      return position;
    }
-</script>
-
-{#if $isOk }
-
-<!-- outer legend box, background and frame -->
-<svg x="{left}px" y="{top}px" height="{legendHeight}px" width="{legendWidth}">
-<rect height="100%" width="100%" fill="white" stroke="{Colors.MIDDLEGRAY}"></rect>
 
-{#each items as item, i}
+   /* check if user provided items are correct, transform text labels and set default values if they are absent */
+   function processItems(items) {
 
-<!-- individual legend item -->
-<svg x="{0}px" y="{i * (elHeight + 2 * elPadding)}px" width="{legendWidth}px" height="{elHeight + 2 * elPadding}px">
+      if (!items || !Array.isArray(items) || items.length < 1) {
+         console.error('Legend: property "items" must be provided as array of JSONs.');
+         return null;
+      }
 
-   <style>
-   .legend-text,
-   .legend-text tspan {
-      dominant-baseline: hanging;
+      for (let i = 0; i < items.length; i++) {
+         const item = items[i];
+
+         // check and transform label
+         if (!item.label) {
+            console.error('Legend: all elements of "items" must include at least one field: "label".');
+            return null;
+         }
+
+         const newLabel = text2svg(item.label);
+         const labelHeight = newLabel.length === item.label ? 1 : 1.4;
+         item.label = newLabel;
+         item['labelHeight'] = labelHeight;
+
+         // set default values for lines
+         if (item.line) {
+            if (!item.line.lineType) item.line['lineType'] = 1
+            if (!(item.line.lineType > 0 && item.line.lineType <= 4)) {
+               console.error('Legend: parameter "lineType" for legend item ' + (i + 1) + ' is incorrect.');
+            }
+            item.line.lineColor = item.line.lineColor ? item.line.lineColor : Colors.PRIMARY;
+            item.line.lineWidth = item.line.lineWidth ? item.line.lineWidth : 1;
+         }
+
+         // set default values for markers
+         if (item.point) {
+            if (!item.point.marker) item.point['marker'] = 1
+            if (!(item.point.marker > 0 && item.point.marker <= MARKER_SYMBOLS.length)) {
+               console.error('Legend: parameter "marker" for legend item ' + (i + 1) + ' is incorrect.');
+            }
+            item.point.faceColor =  item.point.faceColor ? item.point.faceColor : 'transparent';
+            item.point.lineWidth = item.point.lineWidth ? item.point.lineWidth : 1;
+            item.point.lineColor = item.point.lineColor ? item.point.lineColor : Colors.PRIMARY;
+         }
+      }
+      return items;
    }
-   </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} 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" 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 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}
-</svg>
-{/if}
+   // get context and update group legend parameters reactivey
+   const axes = getContext('axes');
+   $effect(() => {
+      const newItems = processItems(items);
+      const newPosition = checkPosition(position);
+      axes.setGroupLegend(
+         newItems && newPosition ?
+         {show: true, position, items, lineColor, faceColor, lineWidth, fontSize} :
+         {show: false, position: null, items: null}
+      );
+   });
+</script>

package/src/2d/Lines.svelte

@@ -1,49 +1,63 @@
+<!--
+@component Adds a series of lines connecting points with provided coordinates (polyline).
+
+   Main properties:
+   - `xValues` - array of vector with x-coordinates of the points.
+   - `yValues` - array of vector with y-coordinates of the points.
+   - `lineColor` - lines color, default: `Colors.PRIMARY`.
+   - `lineWidth` - width (thickness) of the lines in pixels, defailt: `1`.
+   - `lineType` -  type of lines (`1` - solid, `2` - dashed, `3` - dotted, `4` - dashdot).
+   - `onclick` - function (callback) to be called when user clicks on a polyline.
+
+   Example:
+
+   ```svelte
+   <script>
+      import { Axes, Lines } from 'svelte-plots-basic/2d';
+
+      const xValues = [-3, -2, -1, 0, 1, 2, 3];
+      const yValues = [9, 4, 1, 0, 1, 4, 9];
+   </script>
+
+   <Axes limX={[-4, 4]} limY={[-2, 10]}>
+      <Lines {xValues} {yValues}  />
+   </Axes>
+   ```
+-->
 <script>
-   /****************************************************
-   * Lines                                             *
-   * --------------------                              *
-   * shows lines connected sequence of points          *
-   *****************************************************/
-
    import { getContext } from 'svelte';
-   import { Colors } from '../Colors';
-   import { val2p } from '../Utils';
-
-
-   /*****************************************/
-   /* Input parameters                      */
-   /*****************************************/
-
-	export let xValues;                       // vector or array with x-coordinates of the points
-   export let yValues;                       // vector or array with y-coordinates of the points
-   export let lineWidth = 1;                 // width (thickness) of the lines
-   export let lineColor = Colors.PRIMARY;    // color of the lines
-   export let lineType = 1;                  // type of the lines (1 - solid, 2 - dashed, 3 - dotted, 4 - dashdot)
-   export let title = '';                    // title of the bar series (reserved for future use)
-
-
-   /*****************************************/
-   /* Component code                        */
-   /*****************************************/
-
-   // get axes context
+   import { Colors } from '../constants';
+   import { val2p, checkCoords, handleClick } from '../methods';
+   import { LINE_STYLES } from '../constants';
+
+   /** @type {Props} */
+   let {
+	   xValues,                       // vector or array with x-coordinates of the points
+      yValues,                       // vector or array with y-coordinates of the points
+      lineColor = Colors.PRIMARY,    // color of segment lines
+      lineType = 1,                  // type of segment lines (1 - solid, 2 - dashed, 3 - dotted, 4 - dashdot)
+      lineWidth = 1,                 // width (thickness) of segment lines
+      onclick,                       // function to be called if onclick event fires
+   } = $props();
+
+
+   // check user provided coordinates
+   const xv = $derived(checkCoords(xValues, 'Lines'));
+   const yv = $derived(xv ? checkCoords(yValues, 'Lines', xv.length) : null);
+
+   // get axes context and compute coordinates of polyline
    const axes = getContext('axes');
-
-   const scale = axes.scale;
-   const isOk = axes.isOk;
-   const tX = axes.tX;
-   const tY = axes.tY;
-
-   // compute polynomial coordinates as string
-   $: p = $isOk ? val2p(xValues, yValues, $tX, $tY, axes) : undefined;
+   const p = $derived(xv && yv ? val2p(xv, yv, axes.tX(), axes.tY()) : null);
 
    // reactive variables for coordinates of data points in pixels
-   $: lineStyleStr = `fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px; stroke-dasharray:${axes.LINE_STYLES[$scale][lineType-1]}`;
+   const lineStyleStr = $derived(`fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px; stroke-dasharray:${LINE_STYLES[axes.scales().plot][lineType-1]}`);
 </script>
 
-{#if $isOk && p !== undefined}
-   <g class="series series-line" style={lineStyleStr} title={title}>
-      <polyline class="line" points={p}/>
-   </g>
+{#if p}
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<g onclick={(e) => handleClick(e, 'polyline', onclick)} class="series series-line" style={lineStyleStr} >
+   <polyline class="line" points={p}/>
+</g>
 {/if}