svelte-plots-basic 3.4.0 → 4.1.0

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, 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,14 +154,26 @@
       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}
       );
    });

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,7 +27,7 @@
 <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';
 
    let {
@@ -43,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}

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,12 +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';
 
    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
@@ -49,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;
@@ -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}

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:
@@ -32,8 +32,8 @@
    import { checkCoords, transformCoords, handleClick } from '../methods';
 
    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
@@ -45,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]
@@ -70,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,27 +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';
 
    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');
@@ -62,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}
@@ -78,4 +108,3 @@
    {/each}
    </g>
 {/if}
-

package/src/2d/Segments.svelte

@@ -31,7 +31,7 @@
 <script>
    import { getContext } from 'svelte';
    import { Colors } from '../constants';
-   import { checkCoords, transformCoords, handleClick } from '../methods';
+   import { checkCoords, transformCoords, handleClick, normalizeLineType } from '../methods';
    import { LINE_STYLES } from '../constants';
 
    let {
@@ -51,6 +51,7 @@
    const sy = $derived(sx ? checkCoords(yStart, 'Segments', sx.length) : null);
    const ex = $derived(sy ? checkCoords(xEnd, 'Segments', sx.length) : null);
    const ey = $derived(ex ? checkCoords(yEnd, 'Segments', sx.length) : null);
+   const validLineType = $derived(normalizeLineType(lineType, 'Segments'));
 
    // get axes context and reactive variables needed to compute coordinates
    const axes = getContext('axes');
@@ -60,7 +61,7 @@
    const y2 = $derived(ey ? transformCoords(ey, axes.tY()) : null);
 
    // reactive variables for coordinates of data points in pixels (and line style)
-   const lineStyleStr = $derived(`stroke:${lineColor};stroke-width: ${lineWidth}px;stroke-dasharray:${LINE_STYLES[axes.scales().plot][lineType-1]}`);
+   const lineStyleStr = $derived(`stroke:${lineColor};stroke-width: ${lineWidth}px;stroke-dasharray:${LINE_STYLES[axes.scales().plot][validLineType - 1]}`);
 
    // local status
    const isOk = $derived(x1 && x2 && y1 && y2);
@@ -75,4 +76,3 @@
    {/each}
    </g>
 {/if}
-

package/src/2d/TextLabels.svelte

@@ -1,18 +1,20 @@
 <!--
-@component Adds a series with line segments.
+@component Adds text labels at specified plot coordinates.
 
    Main properties:
-   - `xValues`- vector or array with x-coordinates for each label.
-   - `yValues`- vector or array with y-coordinates for each label.
-   - `labels`- single string or array with labels (strings).
-   - `pos`- position of labels related to coordinates (`0` - middle - default, `1` - bottom, `2` - left, `3` - top, `4` - right).
-   - `faceColor`-  face color of label symbols, default: `Colors.PRIMARY_TEXT`.
-   - `lineColor`- border colors of label symbols, default: `'transparent'`.
-   - `lineWidth`- border width of label symbols in pixels, default: `0`.
-   - `textSize`- size of label symbols in em, default: `1`.
-   - `rotateAngle`- angle to rotate labels, default: `0`.
+   - `xValues` - vector or array with x-coordinates for each label.
+   - `yValues` - vector or array with y-coordinates for each label.
+   - `labels` - single string used at every coordinate or array with one string per coordinate.
+   - `pos` - one position used for every label, or an array/typed array with one position per label (`0` - middle - default, `1` - bottom, `2` - left, `3` - top, `4` - right).
+   - `faceColor` - text fill color, default: `Colors.PRIMARY_TEXT`.
+   - `lineColor` - text outline color, default: `'transparent'`.
+   - `lineWidth` - text outline width in pixels, default: `0`.
+   - `textSize` - text size in em, default: `1`.
+   - `rotateAngle` - angle to rotate labels, default: `0`.
    - `onclick` - function (callback) to be called when user clicks on a label.
 
+   Values in `labels` are rendered as raw SVG/HTML markup. Only pass trusted content.
+
    Example:
 
    ```svelte

package/src/2d/TextLegend.svelte

@@ -1,7 +1,38 @@
+<!--
+@component Adds a vertical text legend at a specified plot position.
+
+   Main properties:
+   - `left` - x-coordinate of the legend in plot units.
+   - `top` - y-coordinate of the legend in plot units.
+   - `elements` - non-empty array of text labels. SVG/HTML markup is supported.
+   - `dx` - horizontal text offset, default: `"0"`.
+   - `dy` - vertical spacing between labels, default: `"1.25em"`.
+   - `faceColor` - text fill color, default: `Colors.PRIMARY_TEXT`.
+   - `lineColor` - text outline color, default: `"transparent"`.
+   - `lineWidth` - text outline width in pixels, default: `0`.
+   - `textSize` - text size in em, default: `1`.
+
+   Values in `elements` are rendered as raw SVG/HTML markup. Only pass trusted content.
+
+   Example:
+
+   ```svelte
+   <script>
+      import { Axes, TextLegend } from 'svelte-plots-basic/2d';
+
+      const elements = ['First group', 'Second group'];
+   </script>
+
+   <Axes limX={[0, 10]} limY={[0, 10]}>
+      <TextLegend left={1} top={9} {elements} />
+   </Axes>
+   ```
+-->
+
 <script>
    import { getContext } from 'svelte';
    import { Colors } from '../constants';
-   import { transformCoords } from '../methods';
+   import { checkCoords, transformCoords } from '../methods';
 
    let {
       left,                                // vector/array with coordinates of lef side of each text box
@@ -16,24 +47,31 @@
    } = $props()
 
    const axes = getContext('axes');
-   const x = $derived(
-      left !== undefined && left !== null
-         ? transformCoords([left], axes.tX())
-         : null
+   const lx = $derived(
+      left !== undefined && left !== null ? checkCoords([left], 'TextLegend (left)') : null
    );
-   const y = $derived(
-      top !== undefined && top !== null
-         ? transformCoords([top], axes.tY())
-         : null
+   const ty = $derived(
+      top !== undefined && top !== null ? checkCoords([top], 'TextLegend (top)') : null
    );
+   const x = $derived(lx ? transformCoords(lx, axes.tX()) : null);
+   const y = $derived(ty ? transformCoords(ty, axes.tY()) : null);
+
+   const validElements = $derived.by(() => {
+      if (!Array.isArray(elements) || elements.length < 1) {
+         console.error('TextLegend: parameter "elements" must be a non-empty array.');
+         return null;
+      }
+
+      return elements;
+   });
 
    // styles for bars and labels
    const textStyleStr = $derived(`fill:${faceColor};stroke-width:${lineWidth}px;stroke:${lineColor};font-size:${textSize}em;`);
 </script>
 
-{#if x && y && elements.length > 0}
+{#if x && y && validElements}
    <text style={textStyleStr} x={x} y={y} dx={dx} dy={dy} dominant-baseline="middle" text-anchor="start">
-      {#each elements as el, i}
+      {#each validElements as el, i}
          <tspan {x} {dx} dy={i === 0 ? 0 : dy}>{@html el}</tspan>
       {/each}
    </text>

package/src/2d/YAxis.svelte

@@ -4,7 +4,7 @@
    Main properties:
    - `label` - text label for the axis (optional).
    - `showGrid` - logical, show or not horizontal grid lines, default: `false`.
-   - `ticks` - array or vector with tick positions (by default will be generated automatically based on `limX`).
+   - `ticks` - array or vector with tick positions (by default will be generated automatically based on `limY`).
    - `tickLabels` - array with tick labels to show at each tick (by default will be generated automatically).
    - `las` - orientation of tick labels (`1` - horizontal - default, `2` - vertical).
    - `whole` - logical, show numeric tick labels as whole numbers (without decimals) or not, default: `false`.

package/src/3d/Axes.svelte

@@ -4,7 +4,7 @@
    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]`.
-   - `limZ` - array with limits for y-axis (in plot units), default: `[0, 1]`.
+   - `limZ` - array with limits for z-axis (in plot units), default: `[0, 1]`.
    - `theta` - angle (in radians) for orientation of projection plane, default: `-10`.
    - `phi` - angle (in radians) for orientation of projection plane, default: `-10`.
    - `zoom` - zooming factor, default: `0.5`.
@@ -15,18 +15,16 @@
    - `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.
+   - `clipboardWidth` - width of plot image to copy to clipboard in pixels, default `1200`.
+   - `clipboardHeight` - height of plot image to copy to clipboard in pixels, default `800`.
 
    Example:
-   ```jsx
+   ```svelte
    <script>
       import {Axes} from 'svelte-plots-basic/3d';
    </script>
 
-   <Axes limX={[-10, 10]} limY={[-10, 10]} limZ={[-10, 10]}>
-      //all other plotting components are here
-   </Axes>
+   <Axes limX={[-10, 10]} limY={[-10, 10]} limZ={[-10, 10]} />
    ```
 -->
 <script>

package/src/3d/AxisLines.svelte

@@ -1,5 +1,5 @@
 <!--
-@component draws line segments for axis elements (ticks. etc), not for manual use.
+@component Draws line segments for axis elements (ticks, etc.); not intended for direct use.
 -->
 <script>
    import { getContext } from 'svelte';
@@ -13,9 +13,9 @@
       lineWidth = 1,                   // line width (thickness) in pixels.
    } = $props();
 
-   // get axes context and and compute screen coordinates
+   // get axes context and compute screen coordinates
    const axes = getContext('axes');
-   const s1 = $derived(lineCoords.length == 2 ? transform3D(lineCoords[0], axes.tM()) : null);
+   const s1 = $derived(lineCoords.length === 2 ? transform3D(lineCoords[0], axes.tM()) : null);
    const s2 = $derived(s1 ? transform3D(lineCoords[1], axes.tM()) : null);
 
    // line style
@@ -29,4 +29,3 @@
    {/each}
 </g>
 {/if}
-

package/src/3d/AxisTickLabels.svelte

@@ -1,5 +1,5 @@
 <!--
-@component shows tick labels.
+@component Shows tick labels.
 -->
 <script>
 
@@ -34,4 +34,4 @@
       user-select: none;
       dominant-baseline: middle;
    }
-</style>
+</style>