svelte-plots-basic 3.3.0 → 4.0.0

package/src/2d/Heatmap.svelte

@@ -1,5 +1,5 @@
 <!--
-@component Adds a heatmap visializing values of a matrix.
+@component Adds a heatmap visualizing values of a matrix.
 
    Main properties:
    - `values` - matrix (object of class `Matrix` from `mdatools` package) with values to visualize.
@@ -13,7 +13,7 @@
       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.
+      // create matrix with 5 rows and 10 columns filled with random values.
       const x = Matrix.rand(5, 10);
    </script>
 
@@ -27,13 +27,12 @@
    import { getContext } from 'svelte';
    import { ismatrix, isvector } from 'mdatools/arrays';
    import { expandgrid } from 'mdatools/misc';
-   import { split } from 'mdatools/stat';
+   import { range, split } from 'mdatools/stat';
 
    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
@@ -42,26 +41,101 @@
    } = $props();
 
 
+   function validateBreaks(values) {
+      if (!values || values.length < 2) {
+         console.error('Heatmap: "breaks" must contain at least two values.');
+         return null;
+      }
+
+      const items = Array.from(values);
+
+      if (items.some(value =>
+         typeof value !== 'number' || Number.isNaN(value)
+      )) {
+         console.error('Heatmap: values in "breaks" must be numeric.');
+         return null;
+      }
+
+      if (items.some((value, index) =>
+         index > 0 && value <= items[index - 1]
+      )) {
+         console.error('Heatmap: values in "breaks" must be strictly increasing.');
+         return null;
+      }
+
+      return values;
+   }
+
+
+   function findInterval(value, breaks) {
+      let low = 1;
+      let high = breaks.length - 1;
+
+      while (low < high) {
+         const middle = Math.floor((low + high) / 2);
+
+         if (value <= breaks[middle]) {
+            high = middle;
+         } else {
+            low = middle + 1;
+         }
+      }
+
+      const index = low - 1;
+
+      return value > breaks[index] && value <= breaks[index + 1]
+         ? index
+         : -1;
+   }
+
+
 
    // check that values are provided as a matrix
-   let v = $derived(ismatrix(values) && values.nrows > 0 && values.ncols > 0 ? values : null);
+   const v = $derived.by(() => {
+      if (!ismatrix(values) || values.nrows < 1 || values.ncols < 1) {
+         console.error('Heatmap: parameter "values" must be a non-empty Matrix.');
+         return null;
+      }
+
+      return values;
+   });
 
    // 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;
+
+      if (breaks !== undefined && breaks !== null) {
+         if (Array.isArray(breaks)) return validateBreaks(breaks);
+         if (isvector(breaks)) return validateBreaks(breaks.v);
+
+         console.error('Heatmap: "breaks" must be an array or Vector.');
+         return null;
+      }
+
+      const valueRange = range(v.v);
+      if (valueRange[0] === valueRange[1]) {
+         const value = valueRange[0];
+         const delta = Math.abs(value) > 0 ? Math.abs(value) * 0.01 : 1;
+         const lower = Number.isFinite(value - delta) ? value - delta : value;
+         const upper = Number.isFinite(value + delta) ? value + delta : value;
+         return validateBreaks([lower, upper]);
+      }
+
+      return validateBreaks(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.');
+      if (!lb) return null;
+
+      if (colmap !== null && colmap !== undefined) {
+         if (!Array.isArray(colmap) || colmap.some(color =>
+            typeof color !== 'string' || color.trim() === ''
+         )) {
+            console.error('Heatmap: parameter "colmap" must be an array of non-empty color strings.');
             return null;
          }
-         if (colmap.length !== breaks.length - 1) {
+         if (colmap.length !== lb.length - 1) {
             console.error('Heatmap: number of color values in colormap does not match number of intervals defined by breaks.');
             return null;
          }
@@ -81,10 +155,11 @@
       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
-      const rr = Array(nb).fill().map(() => []);     // row indices for every break
-      const rc = Array(nb).fill().map(() => []);     // column indices for every break
+      const intervalCount = nb - 1;
+      const rl = Array.from({length: intervalCount}, () => []);  // coordinates of left for every interval
+      const rt = Array.from({length: intervalCount}, () => []);  // coordinates of top for every interval
+      const rr = Array.from({length: intervalCount}, () => []);  // row indices for every interval
+      const rc = Array.from({length: intervalCount}, () => []);  // column indices for every interval
 
       // adjust left side for the first break and right side for the last
       const llb = lb.slice();
@@ -95,15 +170,13 @@
       // 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);
-               rr[i].push(top.v[j]);
-               rc[i].push(left.v[j]);
-               break;
-            }
-         }
+         const i = findInterval(vj, llb);
+         if (i === -1) continue;
+
+         rl[i].push(left.v[j] - 0.5);
+         rt[i].push(v.nrows - top.v[j] + 1.5);
+         rr[i].push(top.v[j]);
+         rc[i].push(left.v[j]);
       };
       return {rl, rt, rr, rc};
    });

package/src/2d/Legend.svelte

@@ -4,6 +4,7 @@
    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"`.
+   - `orientation` - arrangement of legend items (`"vertical"` or `"horizontal"`), default: `"vertical"`.
    - `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'`.
@@ -13,41 +14,47 @@
 
    ```svelte
    <script>
-      import {Vector} from 'mdatools/array';
+      import { Vector } from 'mdatools/arrays';
+      import { Axes, Box, Legend, Lines, Points, XAxis, YAxis } from 'svelte-plots-basic/2d';
 
       const x = Vector.seq(-10, 10, 0.1);
       const y1 = x.apply(v => Math.cos(v));
       const y2 = x.apply(v => Math.sin(v));
+
+      const line1 = { lineType: 3, lineColor: 'red' };
+      const line2 = { lineType: 1, lineColor: 'blue' };
+      const point2 = { marker: 1, faceColor: 'white', lineColor: 'blue' };
+
+      const items = [
+         { label: 'cos(x)', line: line1 },
+         { label: 'sin(x)', line: line2, point: point2 }
+      ];
    </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" />
+      <Lines xValues={x} yValues={y1} {...line1} />
+      <Lines xValues={x} yValues={y2} {...line2} />
+      <Points xValues={x} yValues={y2} {...point2} />
 
-      <Legend
-         position="topright"
-         items = {[
-            {"label": "cos(x)", "lineType": 1, "lineColor": "red"},
-            {"label": "sin(x)", "lineType": 1, "lineColor": "blue", "marker": 1, "faceColor": "white", "borderColor": "blue"},
-         ]}
-      />
+      <Legend position="top" orientation="horizontal" {items} />
 
       <Box />
       <XAxis label="x" showGrid={true} />
       <YAxis label="f(x)" showGrid={true} />
    </Axes>
+   ```
 -->
 <script>
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { Colors, MARKER_SYMBOLS } from '../constants';
-   import { text2svg } from '../methods';
+   import { text2svg, normalizeLineType } from '../methods';
 
    let {
       items,                     // array with text labels and their visual properties for each legend element.
       show = true,               // logical, use to hide the element
-	   position = 'topleft',      // position of the legend ("topleft", "top", "topright", "right", "bottomright", etc).
+      position = 'topleft',      // position of the legend ("topleft", "top", "topright", "right", "bottomright", etc).
+      orientation = 'vertical', // arrangement of legend items ("vertical" or "horizontal")
       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
@@ -70,6 +77,21 @@
       return position;
    }
 
+   /* check if user provided orientation is correct */
+   function checkOrientation(orientation) {
+
+      if (typeof orientation !== 'string') {
+         console.error('Legend: value of "orientation" must be a string.');
+         return null;
+      }
+
+      if (!['vertical', 'horizontal'].includes(orientation)) {
+         console.error('Legend: wrong value of "orientation" property');
+         return null;
+      }
+      return orientation;
+   }
+
    /* check if user provided items are correct, transform text labels and set default values if they are absent */
    function processItems(items) {
 
@@ -96,25 +118,35 @@
          // set default values for lines
          if (item.line) {
             item.line = {...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.lineType = normalizeLineType(
+               item.line.lineType ?? 1,
+               `Legend item ${i + 1}`
+            );
             item.line.lineColor = item.line.lineColor ? item.line.lineColor : Colors.PRIMARY;
-            item.line.lineWidth = item.line.lineWidth ? item.line.lineWidth : 1;
+            item.line.lineWidth = item.line.lineWidth ?? 1;
          }
 
          // set default values for markers
          if (item.point) {
             item.point = {...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.');
+            const canConvertMarker =
+               typeof item.point.marker === 'number' ||
+               (typeof item.point.marker === 'string' && item.point.marker.trim() !== '');
+            const marker = item.point.marker == null ? 1 :
+               canConvertMarker ? Number(item.point.marker) : NaN;
+
+            if (!Number.isInteger(marker) || marker < 1 || marker > MARKER_SYMBOLS.length) {
+               console.error(
+                  `Legend item ${i + 1}: parameter "marker" must be a whole number from 1 to ${MARKER_SYMBOLS.length}.`
+               );
+               item.point = null;
+            } else {
+               item.point.marker = marker;
+               item.point.faceColor = item.point.faceColor ? item.point.faceColor : 'transparent';
+               item.point.lineWidth = item.point.lineWidth ?? 1;
+               item.point.markerSize = item.point.markerSize ?? 1;
+               item.point.lineColor = item.point.lineColor ? item.point.lineColor : Colors.PRIMARY;
             }
-            item.point.faceColor =  item.point.faceColor ? item.point.faceColor : 'transparent';
-            item.point.lineWidth = item.point.lineWidth ? item.point.lineWidth : 1;
-            item.point.markerSize = item.point.markerSize ? item.point.markerSize : 1;
-            item.point.lineColor = item.point.lineColor ? item.point.lineColor : Colors.PRIMARY;
          }
 
          result.push(item);
@@ -122,15 +154,35 @@
       return result;
    }
 
-   // get context and update group legend parameters reactivey
+   // Validate and transform only when the corresponding input changes.
+   const processedItems = $derived(processItems(items));
+   const validPosition = $derived(checkPosition(position));
+   const validOrientation = $derived(checkOrientation(orientation));
+
+   // get context and update group legend parameters reactively
    const axes = getContext('axes');
    $effect(() => {
-      const newItems = processItems(items);
-      const newPosition = checkPosition(position);
       axes.setGroupLegend(
-         newItems && newPosition ?
-         {show, position, items: newItems, lineColor, faceColor, lineWidth, fontSize} :
+         processedItems && validPosition && validOrientation ?
+         {
+            show,
+            position: validPosition,
+            orientation: validOrientation,
+            items: processedItems,
+            lineColor,
+            faceColor,
+            lineWidth,
+            fontSize
+         } :
          {show: false, position: null, items: null}
       );
    });
+
+   onDestroy(() => {
+      axes.setGroupLegend({
+         show: false,
+         position: null,
+         items: null
+      });
+   });
 </script>

package/src/2d/Lines.svelte

@@ -2,10 +2,10 @@
 @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.
+   - `xValues` - array or vector with x-coordinates of the points.
+   - `yValues` - array or vector with y-coordinates of the points.
    - `lineColor` - lines color, default: `Colors.PRIMARY`.
-   - `lineWidth` - width (thickness) of the lines in pixels, defailt: `1`.
+   - `lineWidth` - width (thickness) of the lines in pixels, default: `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.
 
@@ -27,10 +27,9 @@
 <script>
    import { getContext } from 'svelte';
    import { Colors } from '../constants';
-   import { val2p, checkCoords, handleClick } from '../methods';
+   import { val2p, checkCoords, handleClick, normalizeLineType } 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
@@ -44,13 +43,14 @@
    // check user provided coordinates
    const xv = $derived(checkCoords(xValues, 'Lines'));
    const yv = $derived(xv ? checkCoords(yValues, 'Lines', xv.length) : null);
+   const validLineType = $derived(normalizeLineType(lineType, 'Lines'));
 
    // get axes context and compute coordinates of polyline
    const axes = getContext('axes');
    const p = $derived(xv && yv ? val2p(xv, yv, axes.tX(), axes.tY()) : null);
 
    // reactive variables for coordinates of data points in pixels
-   const lineStyleStr = $derived(`fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px; stroke-dasharray:${LINE_STYLES[axes.scales().plot][lineType-1]}`);
+   const lineStyleStr = $derived(`fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px; stroke-dasharray:${LINE_STYLES[axes.scales().plot][validLineType - 1]}`);
 </script>
 
 {#if p}
@@ -60,4 +60,3 @@
    <polyline class="line" points={p}/>
 </g>
 {/if}
-

package/src/2d/Multilines.svelte

@@ -2,10 +2,10 @@
 @component Adds a series of polylines (like `<Lines>` but with several of those).
 
    Main properties:
-   - `xValues` - array of vector with x-coordinates of the points.
-   - `yValues` - Matrix (object of class `Matrix` from `mdatools/array`) with y-coordinates of the points.
+   - `xValues` - array or vector with x-coordinates of the points.
+   - `yValues` - Matrix (object of class `Matrix` from `mdatools/arrays`) with y-coordinates of the points.
    - `lineColor` - lines color, default: `Colors.PRIMARY`.
-   - `lineWidth` - width (thickness) of the lines in pixels, defailt: `1`.
+   - `lineWidth` - width (thickness) of the lines in pixels, default: `1`.
    - `lineType` -  type of segment lines (`1` - solid, `2` - dashed, `3` - dotted, `4` - dashdot).
    - `onclick` - function (callback) to be called when user clicks on a polyline.
 
@@ -16,8 +16,8 @@
       import { Vector, cbind } from 'mdatools/arrays';
       import { Axes, Multilines } from 'svelte-plots-basic/2d';
 
-      const xValues = Vector.seq(0, 100, 100);
-      const YY = cbind(
+      const xValues = Vector.seq(0, 10, 0.1);
+      const yValues = cbind(
          xValues.apply(v => Math.sin(v)),
          xValues.apply(v => Math.sin(v + 0.5) + 0.1),
          xValues.apply(v => Math.sin(v - 0.5) - 0.1),
@@ -35,13 +35,12 @@
    import { getContext } from 'svelte';
    import { ismatrix } from 'mdatools/arrays';
    import { Colors } from '../constants';
-   import { val2p, checkCoords, handleClick } from '../methods';
+   import { val2p, checkCoords, handleClick, normalizeLineType } 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
+      yValues,                       // matrix 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
@@ -50,6 +49,7 @@
 
    // check user provided coordinates
    const xv = $derived(checkCoords(xValues, 'Multilines'));
+   const validLineType = $derived(normalizeLineType(lineType, 'Multilines'));
    const yv = $derived.by(() => {
 
       if (!xv) return null;
@@ -61,6 +61,7 @@
 
       if (xv.length !== yValues.nrows) {
          console.error('Multilines: parameter "xValues" must have the same number of values as number of rows in "yValues".');
+         return null;
       }
 
       return yValues;
@@ -79,7 +80,7 @@
    });
 
    // reactive variables for coordinates of data points in pixels
-   const lineStyleStr = $derived(`fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px; stroke-dasharray:${LINE_STYLES[axes.scales().plot][lineType-1]}`);
+   const lineStyleStr = $derived(`fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px; stroke-dasharray:${LINE_STYLES[axes.scales().plot][validLineType - 1]}`);
 </script>
 
 {#if pp && pp.length > 0}
@@ -91,4 +92,3 @@
    {/each}
 </g>
 {/if}
-

package/src/2d/Points.svelte

@@ -2,13 +2,13 @@
 @component Adds a series of points.
 
    Main properties:
-   - `xValues` - array of vector with x-coordinates of the points.
-   - `yValues` - array of vector with y-coordinates of the points.
+   - `xValues` - array or vector with x-coordinates of the points.
+   - `yValues` - array or vector with y-coordinates of the points.
    - `marker` - index for a point symbol (from 1 - default - to 8): `"●", "◼", "▲", "▼", "⬥", "＋", "*", "✕"`.
    - `faceColor` - face (fill) color of the markers, default: `'transparent'`.
    - `lineColor` - border color of the markers, default: `Colors.PRIMARY`.
-   - `lineWidth` - width (thickness) of the markers' border in pixels, defailt: `1`.
-   - `markerSize` - size of the markers in em, defailt: `1`.
+   - `lineWidth` - width (thickness) of the markers' border in pixels, default: `1`.
+   - `markerSize` - size of the markers in em, default: `1`.
    - `onclick` - function (callback) to be called when user clicks on a marker.
 
    Example:
@@ -31,10 +31,9 @@
    import { Colors, MARKER_SYMBOLS } from '../constants';
    import { checkCoords, transformCoords, handleClick } from '../methods';
 
-   /** @type {Props} */
    let {
-	   xValues,                          // array of vector with x-coordinates of points
-      yValues,                          // array of vector with y-coordinates of points
+	   xValues,                          // array or vector with x-coordinates of points
+      yValues,                          // array or vector with y-coordinates of points
       marker = 1,                       // index for point symbol (from 1 to 8): "●", "◼", "▲", "▼", "⬥", "＋", "*", "✕"
       faceColor = 'transparent',        // face (fill) color of the points
       lineColor = Colors.PRIMARY,     // border color of the points
@@ -46,8 +45,8 @@
 
    // select which symbol to use as a marker
    const markerSymbol = $derived.by(() => {
-      if (typeof(marker) !== 'number' || marker < 1 || marker > MARKER_SYMBOLS.length) {
-         console.error('Points: parameter "marker" must be a number from 1 to ' + MARKER_SYMBOLS.length + '.');
+      if (!Number.isInteger(marker) || marker < 1 || marker > MARKER_SYMBOLS.length) {
+         console.error('Points: parameter "marker" must be a whole number from 1 to ' + MARKER_SYMBOLS.length + '.');
          return null;
       }
       return MARKER_SYMBOLS[marker - 1]
@@ -71,7 +70,7 @@
    const className = $derived(['◼', '⬥', '＋', '✳', '✕'].includes(markerSymbol)  ? 'series-points2' : 'series-points1');
 
    // check if all coordinates are correct
-   const isOk = $derived(x && y && x.length === y.length);
+   const isOk = $derived(markerSymbol && x && y && x.length === y.length);
 </script>
 
 {#if isOk}

package/src/2d/Rectangles.svelte

@@ -3,20 +3,19 @@
 
    Main properties:
    - `left` - array or vector with world coordinates of left side of the rectangles.
-   - `top` - array or vector with world coordinates of left side of the rectangles.
+   - `top` - array or vector with world coordinates of top side of the rectangles.
    - `width` - width of the rectangles (one value or array/vector with individual values).
    - `height` - height of the rectangles (one value or array/vector with individual values).
-   - `facColor` - face color of the rectangles (same for all).
+   - `faceColor` - face color of the rectangles (same for all).
    - `lineColor` - border color of each rectangle.
    - `lineWidth` - width (thickness) of border lines in pixels.
-   - `className`- CSS class name for the labels group, default: `'series-rect'`.
+   - `className` - CSS class name for the rectangles group, default: `'series-rect'`.
    - `onclick` - function (callback) to be called when user clicks on any rectangle.
 
 
    Example:
-   ```jsx
+   ```svelte
    <script>
-      import { Matrix } from 'mdatools/arrays';
       import { Axes, Rectangles } from 'svelte-plots-basic/2d';
 
       const left = [0, 10, 20, 30];
@@ -32,28 +31,58 @@
 -->
 <script>
    import { getContext } from 'svelte';
-   import { Vector } from 'mdatools/arrays';
+   import { Vector, isvector } from 'mdatools/arrays';
    import { Colors } from '../constants';
    import { checkCoords, transformCoords, transformObjects, handleClick } from '../methods';
 
-   /** @type {Props} */
    let {
-	   left,                          // array of vector with coordinates of left sides of the bars
-      top,                           // array of vector with coordinates of top sides of the bars
-      width,                         // single value (same for all) or vector/array with bar width
-      height,                        // single value (same for all) or vector/array with bar height
-      faceColor = Colors.PRIMARY,    // color of bar faces (fill)
-      lineColor = faceColor,       // color of bar borders
-      lineWidth = 1,                 // width (thickness) of bar border lines
+	   left,                          // array or vector with coordinates of left sides of the rectangles
+      top,                           // array or vector with coordinates of top sides of the rectangles
+      width,                         // single value (same for all) or vector/array with rectangle width
+      height,                        // single value (same for all) or vector/array with rectangle height
+      faceColor = Colors.PRIMARY,    // color of rectangle faces (fill)
+      lineColor = faceColor,         // color of rectangle borders
+      lineWidth = 1,                 // width (thickness) of rectangle border lines
       className = 'series-rect',     // CSS class name of the SVG group
       onclick,                       // function to be called if onclick event fires
    } = $props();
 
+   function checkDimensions(value, name, len) {
+      const canConvert =
+         typeof value === 'number' ||
+         (typeof value === 'string' && value.trim() !== '');
+      let dimensions;
+
+      if (canConvert) {
+         const scalar = Number(value);
+         if (!Number.isFinite(scalar) || scalar < 0) {
+            console.error(`Rectangles: parameter "${name}" must contain only finite non-negative values.`);
+            return null;
+         }
+         dimensions = Vector.fill(scalar, len);
+      } else if (Array.isArray(value) || isvector(value)) {
+         dimensions = checkCoords(value, `Rectangles (${name})`, len);
+         if (!dimensions) return null;
+      } else {
+         console.error(`Rectangles: parameter "${name}" must be a number, array, or Vector.`);
+         return null;
+      }
+
+      for (let i = 0; i < dimensions.length; i++) {
+         if (dimensions.v[i] < 0) {
+            console.error(`Rectangles: parameter "${name}" must contain only finite non-negative values.`);
+            return null;
+         }
+      }
+
+      return dimensions;
+   }
+
    // process provided values and compute world coordinates of rectangles
    const l = $derived(checkCoords(left, 'Rectangles (left)'));
    const t = $derived(l ? checkCoords(top, 'Rectangles (top)', l.length) : null);
-   const w = $derived(t ? (typeof width !== 'object' ? Vector.fill(width, l.length) : width) : null);
-   const h = $derived(t ? (typeof height !== 'object' ? Vector.fill(height, l.length) : height) : null);
+   const w = $derived(t ? checkDimensions(width, 'width', l.length) : null);
+   const h = $derived(t ? checkDimensions(height, 'height', l.length) : null);
 
    // get axes context and compute screen coordinates
    const axes = getContext('axes');
@@ -63,11 +92,11 @@
    const rw = $derived(w ? transformObjects(w, axes.tX()) : null);
    const rh = $derived(h ? transformObjects(h, axes.tY()) : null);
 
-   // styles for bars and labels
+   // styles for rectangles
    const barsStyleStr = $derived(`fill:${faceColor};stroke:${lineColor};stroke-width:${lineWidth}px;`);
 
    // check if all coordinates are correct
-   const isOk = $derived(rx && ry && rw && rh && (rw.length === rx.length) && (rh.length === rx.length));
+   const isOk = $derived(rx && ry && rw && rh);
 </script>
 
 {#if isOk}
@@ -79,5 +108,3 @@
    {/each}
    </g>
 {/if}
-
-