svelte-plots-basic 3.4.0 → 4.1.0

package/NEWS.md

@@ -0,0 +1,76 @@
+# Release notes
+
+This file contains the full release history of `svelte-plots-basic`. The [README](README.md) shows only the most recent releases.
+
+## 4.1.0
+
+* Added a `svelte` export condition to every entry point, so bundlers recognize the package as a Svelte library. This matters when `prebundleSvelteLibraries` is disabled, where the components must be excluded from dependency pre-bundling.
+* Added `./package.json` to the exported paths, so tools that read the package manifest can resolve it.
+
+## 4.0.0
+
+* Added horizontal legend layout and improved legend sizing and alignment.
+* Improved PNG/SVG export reliability, export-dialog accessibility, and clipboard handling.
+* Strengthened validation, automatic axis ticks, marker rendering, and component cleanup.
+* Made subscripts, superscripts, and tick-factor labels consistent across modern browsers.
+* Updated to `mdatools ^1.5.0`, now declared as a peer dependency to prevent incompatible duplicate instances.
+
+## 3.4.0
+
+* Added the `plotActions` property to `Axes` for adding custom buttons to the download panel.
+* Added advanced validation for axis limits, text-label positions, heatmap breaks, and custom plot actions.
+* Fixed text-label positioning and rotation when individual positions are provided.
+* Fixed heatmaps with automatic, custom, or constant-value breaks.
+* Added support for rectangular and constant-height 3D meshes.
+* Improved PNG, SVG, and clipboard export by serializing a clone instead of modifying the visible plot.
+* Fixed the advanced PNG export dialog so a default resolution is always selected, falling back to 300 dpi when necessary.
+* Prevented plot controls from submitting an enclosing HTML form.
+* Added package validation before publishing and synchronized Svelte 5 peer-dependency metadata.
+* Fixed conditionally rendered axes, boxes, and legends so their parent state is cleared when they are removed.
+* Improved heatmap interval processing and added automatically generated colormaps with more than 16 colors.
+* Fixed `TextLegend` positioning at zero and strengthened finite-range validation for 3D axes.
+* Reduced reactive and repeated allocation overhead for axis configuration, text measurement, PNG export, and colormap generation.
+* Added dependency-free regression tests and made them run automatically before packaging.
+* Documented the trust requirements for labels rendered as SVG/HTML markup.
+
+## 3.3.0
+
+* Added advanced "save as PNG" option where user can select size and resolution of the image as well as change the filename.
+* several small improvements and bug fixes.
+
+
+## 3.2.1
+
+* Added mouse click handler option for `Heatmap.svelte` component (returns row and column index of the element).
+
+
+## 3.1.1-3.1.6
+
+* Fixed bug which sometimes caused an error when manual text tick labels provided.
+* Added `markerSize` specification to legend items.
+* Small improvements and bug fixes.
+
+## 3.1.0
+
+* Added possibility to reverse the axis, just swap the limit values.
+
+
+## 3.0.0
+
+New major release (v. 3.0.0, released 20/01/2025) introduces many breaking changes as the library has been re-written using Svelte 5. If you use previous versions of `svelte-plots-basic` in your projects, and do not want to change anything, stick to the latest 2.x.x version.
+
+In addition to Svelte 5 syntax and functionality, this release also introduces a lot of  improvements, such as better handling of axis ticks, new syntax for axis elements, etc. See examples below for inspiration. Here is a short list what has been changed from 2.x.x:
+
+* **No more slots**  — components `<Box>`, `<XAxis>`, `<YAxis>`, and `<ZAxis>` (for 3D) do not require attribute `slot` anymore. Moreover, you have to remove this attribute from all your old code in order to use the new version.
+
+* **Axis labels** — in version 2.x.x. labels for x- and y-axis were a part of `<Axes>` component. From 3.x.x. they are part of corresponding axis components, for example:<br> `<XAxis label="x-axis label"/>`.
+
+* **Support for subscripts and superscripts**  — you can now use simple syntax for subscripts (`_`) and superscripts (`^`) in axis labels, tick labels, legend labels and plot title. For example, such labels as `'x^2'`, `x^-1` or `x_(34)` — will be correctly transformed to corresponding SVG text elements in order to visualize them correctly. You can also use HTML symbols, such as `&alpha;`.
+
+* **Mouse events** — previosly, handling mouse events was done through a coplex system of manual events dispatched by `<Axes>` component. From 3.x.x this is much easier, almost every 2D series component (`<Rectangles>`, `<Bars>`, `<Points>`, `<Segments>`, `<Lines>`, `<Areas>`) can handle its own `onclick` event. You just need to provide a callback — a function that will be run if this event is fired. The callback should have one argument — id (position) of an element the click was made on. For example `<Points ... onclick={(id) => console.log(id)}>`. Because of this modification, the  property `title` has been removed from all components. 2D component `<Axes>` also supports `onclick` event, it provides coordinates of the clicked point as arguments for the callback function. 3D plots do not support mouse events.
+
+* **Save and copy 3D plots** — from 3.x.x you can also save and copy to clipboard 3D plots (same way as for 2D).
+
+* **Doc strings** — every component has a corresponding doc string with description of its properties and a simple code example. It should be available when you move your mouse over the component tag in your editor/IDE if it supports this option (works in VSCode).
+
+* **Properites** — from 3.x.x the naming of the properties is more consistent. For example, before the library used properties `borderColor` and `borderWidth` for areas, rectangels, bars and markers, while for lines, segments and multilines the similar properties were named as `lineColor` and `lineWidth`. Now they all have prefix `line*` if it is something about lines or segments and `face*` if it is somthing inside a closed contour. So no more `border*` properties.

package/README.md

@@ -2,7 +2,7 @@
 
 `svelte-plots-basic` is a [Svelte](https://svelte.dev) component library for making simple responsive 2D and 3D plots/charts. The plots are created by generating [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) inside HTML document.
 
-One can think of this library as "Lego" bricks for plots. It has two groups of components: for 2D and for 3D plots. The 2D components are more developed while 3D components remain quite basic. In addition to `svelte`, the package has one direct dependence, [mdatools-js](https://github.com/svkucheryavski/mdatools-js) library, which is used for vector/matrix operations, statistics, and other manipulations with data values.
+One can think of this library as "Lego" bricks for plots. It has two groups of components: for 2D and for 3D plots. The 2D components are more developed while 3D components remain quite basic. In addition to `svelte`, the package requires the [mdatools-js](https://github.com/svkucheryavski/mdatools-js) library as a peer dependency. It is used for vector/matrix operations, statistics, and other manipulations with data values.
 
 
 ## Showcase
@@ -15,6 +15,19 @@ These websites and web-applications use `svelte-plots-basic` library:
 
 ## News
 
+### 4.1.0
+
+* Added a `svelte` export condition to every entry point, so bundlers recognize the package as a Svelte library. This matters when `prebundleSvelteLibraries` is disabled, where the components must be excluded from dependency pre-bundling.
+* Added `./package.json` to the exported paths, so tools that read the package manifest can resolve it.
+
+### 4.0.0
+
+* Added horizontal legend layout and improved legend sizing and alignment.
+* Improved PNG/SVG export reliability, export-dialog accessibility, and clipboard handling.
+* Strengthened validation, automatic axis ticks, marker rendering, and component cleanup.
+* Made subscripts, superscripts, and tick-factor labels consistent across modern browsers.
+* Updated to `mdatools ^1.5.0`, now declared as a peer dependency to prevent incompatible duplicate instances.
+
 ### 3.4.0
 
 * Added the `plotActions` property to `Axes` for adding custom buttons to the download panel.
@@ -39,41 +52,7 @@ These websites and web-applications use `svelte-plots-basic` library:
 * several small improvements and bug fixes.
 
 
-### 3.2.1
-
-* Added mouse click handler option for `Heatmap.svelte` component (returns row and column index of the element).
-
-
-### 3.1.1-3.1.6
-
-* Fixed bug which sometimes caused an error when manual text tick labels provided.
-* Added `markerSize` specification to legend items.
-* Small improvements and bug fixes.
-
-### 3.1.0
-
-* Added possibility to reverse the axis, just swap the limit values.
-
-
-### 3.0.0
-
-New major release (v. 3.0.0, released 20/01/2025) introduces many breaking changes as the library has been re-written using Svelte 5. If you use previous versions of `svelte-plots-basic` in your projects, and do not want to change anything, stick to the latest 2.x.x version.
-
-In addition to Svelte 5 syntax and functionality, this release also introduces a lot of  improvements, such as better handling of axis ticks, new syntax for axis elements, etc. See examples below for inspiration. Here is a short list what has been changed from 2.x.x:
-
-* **No more slots**  — components `<Box>`, `<XAxis>`, `<YAxis>`, and `<ZAxis>` (for 3D) do not require attribute `slot` anymore. Moreover, you have to remove this attribute from all your old code in order to use the new version.
-
-* **Axis labels** — in version 2.x.x. labels for x- and y-axis were a part of `<Axes>` component. From 3.x.x. they are part of corresponding axis components, for example:<br> `<XAxis label="x-axis label"/>`.
-
-* **Support for subscripts and superscripts**  — you can now use simple syntax for subscripts (`_`) and superscripts (`^`) in axis labels, tick labels, legend labels and plot title. For example, such labels as `'x^2'`, `x^-1` or `x_(34)` — will be correctly transformed to corresponding SVG text elements in order to visualize them correctly. You can also use HTML symbols, such as `&alpha;`.
-
-* **Mouse events** — previosly, handling mouse events was done through a coplex system of manual events dispatched by `<Axes>` component. From 3.x.x this is much easier, almost every 2D series component (`<Rectangles>`, `<Bars>`, `<Points>`, `<Segments>`, `<Lines>`, `<Areas>`) can handle its own `onclick` event. You just need to provide a callback — a function that will be run if this event is fired. The callback should have one argument — id (position) of an element the click was made on. For example `<Points ... onclick={(id) => console.log(id)}>`. Because of this modification, the  property `title` has been removed from all components. 2D component `<Axes>` also supports `onclick` event, it provides coordinates of the clicked point as arguments for the callback function. 3D plots do not support mouse events.
-
-* **Save and copy 3D plots** — from 3.x.x you can also save and copy to clipboard 3D plots (same way as for 2D).
-
-* **Doc strings** — every component has a corresponding doc string with description of its properties and a simple code example. It should be available when you move your mouse over the component tag in your editor/IDE if it supports this option (works in VSCode).
-
-* **Properites** — from 3.x.x the naming of the properties is more consistent. For example, before the library used properties `borderColor` and `borderWidth` for areas, rectangels, bars and markers, while for lines, segments and multilines the similar properties were named as `lineColor` and `lineWidth`. Now they all have prefix `line*` if it is something about lines or segments and `face*` if it is somthing inside a closed contour. So no more `border*` properties.
+Notes for earlier releases, including the list of breaking changes introduced in 3.0.0 when the library was re-written using Svelte 5, are available in the [full release notes](https://github.com/svkucheryavski/svelte-plots-basic/blob/main/NEWS.md).
 
 
 ## Security and label markup
@@ -96,6 +75,8 @@ or, to install it with yarn:
 yarn add svelte-plots-basic
 ```
 
+The components are always imported from the `svelte-plots-basic/2d` and `svelte-plots-basic/3d` subpaths, and the helper functions from `svelte-plots-basic/utils` and `svelte-plots-basic/constants`. There is no root import — the 2D and 3D groups deliberately share component names, such as `Axes` and `Points`, so importing from `svelte-plots-basic` directly is not supported and will fail to resolve.
+
 
 ## User tutorial (2D plots)
 
@@ -220,7 +201,7 @@ You can also define tick positions and corresponding labels manually. Tick posit
 
 ```svelte
 <Axes limX={[2019, 2026]} limY={[0, 60000]}>
-   <Xaxis ticks={[2023, 2024, 2025]} tickLabels={['Past', 'Present', 'Future']} />
+   <XAxis ticks={[2023, 2024, 2025]} tickLabels={['Past', 'Present', 'Future']} />
 </Axes>
 ```
 
@@ -620,7 +601,7 @@ Here is an example:
 
 ```svelte
 <script>
-   import { Axes, Xaxis, YAxis, Box, Area } from 'svelte-plots-basic/2d';
+   import { Axes, XAxis, YAxis, Box, Area } from 'svelte-plots-basic/2d';
 
    const xValues = [3, 2, 2.5, 4, 5.5, 6, 5];
    const yValues = [1, 3, 4, 5, 4, 3, 1];
@@ -677,7 +658,7 @@ Here is an example:
 
 ```svelte
 <script>
-   import { Axes, Xaxis, YAxis, Box, Heatmap } from 'svelte-plots-basic/2d';
+   import { Axes, XAxis, YAxis, Box, Heatmap } from 'svelte-plots-basic/2d';
    import { Matrix } from 'mdatools/arrays';
 
    // create 5 x 10 matrix filled with normally distributed random values
@@ -729,7 +710,7 @@ Colormap legend can be used together with `<Heatmap>` or any other color groupin
 
 ```svelte
 <script>
-   import { Axes, Xaxis, YAxis, Box, Heatmap, ColormapLegend } from 'svelte-plots-basic/2d';
+   import { Axes, XAxis, YAxis, Box, Heatmap, ColormapLegend } from 'svelte-plots-basic/2d';
    import { Matrix } from 'mdatools/arrays';
 
    // create 5 x 10 matrix filled with normally distributed random values
@@ -789,16 +770,16 @@ Here is an example:
    const y3 = x.apply(v => Math.pow(v, 4));
 
    // define properties of each series
-   line1Props = {lineType: 3, lineColor: 'red'};
-   line2Props = {lineColor: 'blue', lineType: 1};
-   point2Props = {lineColor: 'blue', faceColor: 'white'};
-   point3Props = {marker: 5, lineColor: 'green', faceColor: 'yellow'};
+   const line1Props = {lineType: 3, lineColor: 'red'};
+   const line2Props = {lineColor: 'blue', lineType: 1};
+   const point2Props = {lineColor: 'blue', faceColor: 'white'};
+   const point3Props = {marker: 5, lineColor: 'green', faceColor: 'yellow'};
 
    // legend items
-   items = [
-      {label: 'y=x^2', line: lines1Props },
-      {label: "y=x^3", line: lines2Props, point: points2Props },
-      {label: "y=x^4", point: points2Props },
+   const items = [
+      {label: 'y=x^2', line: line1Props },
+      {label: "y=x^3", line: line2Props, point: point2Props },
+      {label: "y=x^4", point: point3Props },
    ];
 </script>
 
@@ -812,7 +793,7 @@ Here is an example:
    <Points xValues={x} yValues={y2} {...point2Props} />
 
    <!-- series 3: markers in form of diamonds with green stroke and yellow fill -->
-   <Points xValues={x} yValues={y3} {...points3Props} />
+   <Points xValues={x} yValues={y3} {...point3Props} />
 
    <!-- legend with one JSON for each series -->
    <Legend position="right" {items} />
@@ -826,12 +807,21 @@ Check this example in Svelte REPL: [plots-legend](https://svelte.dev/playground/
 
 The `position` parameter can be one of the follows: `'topleft'`, `'top'`, `'topright'`, `'right'`, `'bottomright'` and so on.
 
+By default, legend items are arranged vertically. Set `orientation="horizontal"` to arrange them in a single row, which is especially useful with the `top` and `bottom` positions:
+
+```svelte
+<Legend position="top" orientation="horizontal" {items} />
+```
+
+The horizontal layout does not wrap items onto additional rows, so a large number of items or long labels may require more plot width.
+
 The component has also properties which changes it apearance, here is the full list:
 
  Property name | Default value | Description
 --|--|--
  `items` |  | array with JSON properties of legend items
  `position` | `'topleft'` | position of the legend element inside plotting area
+ `orientation` | `'vertical'` | arrangement of legend items: `'vertical'` or `'horizontal'`
  `lineColor` | `'#303030'` | color of the legend box line
  `lineWidth` | `1` | width (thickness) of the legend box line
  `faceColor` | `'#fff'` | background color of the legend box

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "svelte-plots-basic",
    "description": "Svelte components for creating simple plots",
-   "version": "3.4.0",
+   "version": "4.1.0",
    "author": "Sergey Kucheryavskiy",
    "license": "MIT",
    "private": false,
@@ -12,22 +12,22 @@
       "prepack": "npm run check && npm test"
    },
    "exports": {
-      "./constants":  "./src/constants.js",
-      "./utils":  "./src/methods.js",
-      "./2d":  "./src/2d/index.js",
-      "./2d/*.svelte":  "./src/2d/*.svelte",
-      "./3d":  "./src/3d/index.js",
-      "./3d/*.svelte":  "./src/3d/*.svelte"
+      "./constants":    { "svelte": "./src/constants.js",   "default": "./src/constants.js" },
+      "./utils":        { "svelte": "./src/methods.js",     "default": "./src/methods.js" },
+      "./2d":           { "svelte": "./src/2d/index.js",    "default": "./src/2d/index.js" },
+      "./2d/*.svelte":  { "svelte": "./src/2d/*.svelte",    "default": "./src/2d/*.svelte" },
+      "./3d":           { "svelte": "./src/3d/index.js",    "default": "./src/3d/index.js" },
+      "./3d/*.svelte":  { "svelte": "./src/3d/*.svelte",    "default": "./src/3d/*.svelte" },
+      "./package.json": "./package.json"
    },
    "devDependencies": {
-      "svelte": "^5.x.x"
+      "mdatools": "^1.5.0",
+      "svelte": "^5.56.8"
    },
    "peerDependencies": {
+      "mdatools": "^1.5.0",
       "svelte": "^5.0.0"
    },
-   "dependencies": {
-      "mdatools": "^1.x.x"
-   },
    "keywords": [
       "svelte",
       "plots",
@@ -35,7 +35,8 @@
       "svelte plots"
    ],
    "files": [
-      "src"
+      "src",
+      "NEWS.md"
    ],
    "repository": {
       "type": "git",

package/src/2d/Area.svelte

@@ -2,12 +2,12 @@
 @component Adds a closed polygon (area).
 
    Main properties:
-   - `xValues` - array of vector with x-coordinates of the polygon's points.
-   - `yValues` - array of vector with y-coordinates of the polygon's points.
-   - `lineWidth` - width (thickness) of the polygon's line in pixels, defailt: `1`.
+   - `xValues` - array or vector with x-coordinates of the polygon's points.
+   - `yValues` - array or vector with y-coordinates of the polygon's points.
+   - `lineWidth` - width (thickness) of the polygon's line in pixels, default: `1`.
    - `lineColor` - line color, default: `Colors.PRIMARY`.
    - `lineType` -  type of line (`1` - solid, `2` - dashed, `3` - dotted, `4` - dashdot).
-   - `facColor` - face (fill) color of the polygon, default: `'transparent'`.
+   - `faceColor` - face (fill) color of the polygon, default: `'transparent'`.
    - `opacity` - opacity of the face color, default: `1`.
    - `onclick` - function (callback) to be called when user clicks on a polygon.
 
@@ -29,7 +29,7 @@
 <script>
    import { getContext } from 'svelte';
    import { Colors } from '../constants';
-   import { val2p, checkCoords, handleClick, transformCoords } from '../methods';
+   import { val2p, checkCoords, handleClick, transformCoords, normalizeLineType } from '../methods';
    import { LINE_STYLES } from '../constants';
 
    let {
@@ -38,7 +38,7 @@
       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
-      faceColor = 'transparent',     // color of segment lines
+      faceColor = 'transparent',     // face (fill) color of the polygon
       opacity = 1,                   // opacity of the area color
       onclick,                       // function to be called if onclick event fires
    } = $props();
@@ -46,6 +46,7 @@
    // check user provided coordinates
    const xv = $derived(checkCoords(xValues, 'Area'));
    const yv = $derived(xv ? checkCoords(yValues, 'Area', xv.length) : null);
+   const validLineType = $derived(normalizeLineType(lineType, 'Area'));
 
    // get axes context and compute coordinates of polyline
    const axes = getContext('axes');
@@ -55,7 +56,7 @@
    const xs = $derived(xv ? transformCoords(xv.subset(1), axes.tX()) : null);
    const pa = $derived(p && xs && ys ? xs + ',' + ys + ' ' + p + ' ' + xs + ',' + ys : null);
 
-   const areaStyleStr = $derived(`opacity:${opacity};fill:${faceColor};stroke:${lineColor};stroke-width: ${lineWidth}px;stroke-dasharray:${LINE_STYLES[axes.scales().plot][lineType - 1]}`);
+   const areaStyleStr = $derived(`opacity:${opacity};fill:${faceColor};stroke:${lineColor};stroke-width: ${lineWidth}px;stroke-dasharray:${LINE_STYLES[axes.scales().plot][validLineType - 1]}`);
 </script>
 
 {#if pa}

package/src/2d/Axes.svelte

@@ -5,7 +5,7 @@
    - `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]`.
+   - `margins` - array with relative margins (bottom, left, top, right), default `[1.0, 1.1, 0.55, 0.60]`.
 
    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'`).
@@ -13,8 +13,8 @@
    - `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
+   - `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:
 
@@ -23,7 +23,7 @@
       import {Axes} from 'svelte-plots-basic/2d';
    </script>
 
-   <Axes limX={[2000, 2050]} limY={[0, 100]} title="GDP of contries" >
+   <Axes limX={[2000, 2050]} limY={[0, 100]} title="GDP of countries" >
    </Axes>
    ```
 -->
@@ -101,7 +101,7 @@
 
    /* handler for mouse  events */
    function handleMouse(e, f) {
-      if (f && e.target.id == "axes-box") {
+      if (f && e.target.id === "axes-box") {
          const x = invTransformCoords([e.offsetX - left], tX)[0];
          const y = invTransformCoords([e.offsetY - top], tY)[0];
          f(x, y);
@@ -307,7 +307,7 @@
       <text {x} y={coords.ltop} dx="1.2em" dy="-0.25em" dominant-baseline="hanging"
          fill={params.labelColor}
          font-size="{params.fontSize}em"
-         text-anchor="end"
+         text-anchor="start"
       >{@html getTickFactorLabel(params.labelsFactor)}</text>
    {/if}
 {/snippet}
@@ -316,14 +316,16 @@
 {#snippet glgSnippet(params, coords)}
    {@const elw = coords.elw + 2 * coords.elp}
    {@const elp = coords.elp}
+   {@const elx = coords.elx}
    {@const elh = coords.elh}
    {@const ely = coords.ely}
+   {@const eliw = coords.eliw}
 
    <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]}>
+      <svg x={elx[i]} y={ely[i]} width={eliw[i]} height={elh[i]}>
 
          <!-- line -->
          {#if item.line}
@@ -532,7 +534,7 @@
    </p>
    {:else}
    <div class="download-links">
-      <button type="button" onclick={handleClickSVG}>↓   svg</button>
+      <button type="button" onclick={handleClickSVG}>↓ svg</button>
       <button type="button" onclick={handleClickPNG}>↓ png</button>
       <button type="button" onclick={handleClickPNGAdvanced}>↓ png+</button>
       <button type="button" onclick={handleClickCopy}>⧉ copy</button>

package/src/2d/AxisLines.svelte

@@ -3,21 +3,19 @@
 
    Main properties:
    - `lineCoords` - coordinates of the line segments as 2D array.
-   - `lineColor` - color of the box line, default: `Colors.DARKGRAY`.
-   - `lineWidth` - width of box line in pixels, default: `1`.
+   - `lineColor` - color of the line segments, default: `Colors.DARKGRAY`.
+   - `lineWidth` - width of the line segments in pixels, default: `1`.
    - `lineType` - line type (`1` - solid (default), `2` - dashed, `3` - dotted, `4` - dashdot).
    - `className` - string with classname to be added to `<g></g>` tag wrapping the lines.
 
    **Description:**
 
-   The coordinates msut be provided in form of nested arrays. Each element of this array contains
+   The coordinates must be provided in form of nested arrays. Each element of this array contains
    `Vector` or `Array` with the coordinates in world (not screen) coordinate system:
    - `lineCoords[0][0]` - x-coordinates of start points of segments.
    - `lineCoords[1][0]` - x-coordinates of end points of segments.
    - `lineCoords[0][1]` - y-coordinates of start points of segments.
    - `lineCoords[1][1]` - y-coordinates of end points of segments.
-
-   ```
 -->
 <script>
    import { getContext } from 'svelte';
@@ -33,7 +31,7 @@
       className = ''                 // CSS class name for the component
    } = $props();
 
-   // get axes context and adjust x margins
+   // get axes context for coordinate transforms
    const axes = getContext('axes');
 
    // reactive variables for coordinates of axis lines

package/src/2d/AxisTickLabels.svelte

@@ -16,8 +16,6 @@
    - `tickCoords[1][0]` - x-coordinates of end points of tick segments.
    - `tickCoords[0][1]` - y-coordinates of start points of tick segments.
    - `tickCoords[1][1]` - y-coordinates of end points of tick segments.
-
-   ```
 -->
 <script>
 
@@ -57,7 +55,7 @@
    {/each}
    {:else if las === 2 && pos === 1}
    {#each x as v, i}
-      <text data-id={i} x={x[i]} y={y[i]} dx={-dy/2} dy={0} transform={`rotate(-90, ${x[i]}, ${y[i]})`} text-anchor={"end"}>{@html tickLabels[i]}</text>
+      <text data-id={i} x={x[i]} y={y[i]} dx={-dy/2} dy={0} transform={`rotate(-90, ${x[i]}, ${y[i]})`} text-anchor="end">{@html tickLabels[i]}</text>
    {/each}
    {:else}
    {#each x as v, i}

package/src/2d/Bars.svelte

@@ -45,25 +45,46 @@
       onclick
    } = $props();
 
+   function toNumber(value) {
+      const canConvert =
+         typeof value === 'number' ||
+         (typeof value === 'string' && value.trim() !== '');
+
+      return canConvert ? Number(value) : NaN;
+   }
+
    const bw = $derived.by(() => {
-      if (barWidth <= 0 || barWidth > 1) {
-         console.error('Bars: parameter "barWidth" should be between 0 and 1.');
+      const value = toNumber(barWidth);
+      if (!Number.isFinite(value) || value <= 0 || value > 1) {
+         console.error('Bars: parameter "barWidth" must be a finite number greater than 0 and no greater than 1.');
+         return null;
+      }
+      return value;
+   });
+
+   const exactWidth = $derived.by(() => {
+      if (barWidthExact == null) return {provided: false, value: null};
+
+      const value = toNumber(barWidthExact);
+      if (!Number.isFinite(value) || value <= 0) {
+         console.error('Bars: parameter "barWidthExact" must be a finite positive number.');
          return null;
       }
-      return barWidth;
+
+      return {provided: true, value};
    });
 
    const x = $derived.by(() => {
-      if (!bw) return null;
+      if (bw === null || exactWidth === null) return null;
       const xv = checkCoords(xValues, 'BarSeries');
       if (!xv) return null;
       const n = xv.length;
       if (n < 1) return null;
 
       let w;
-      if (barWidthExact) {
-         w = barWidthExact;
-      } else if (n == 1) {
+      if (exactWidth.provided) {
+         w = exactWidth.value;
+      } else if (n === 1) {
          console.error('Bars: if only one bar must be shown, value for property "barWidthExact" should be provided.');
          return null;
       } else {
@@ -74,7 +95,7 @@
          }
       }
 
-      w = w * barWidth;
+      w = w * bw;
       const whalf = w / 2;
       const left = Vector.zeros(n);
       const width = Vector.zeros(n);
@@ -113,6 +134,6 @@
 </script>
 
 {#if isOk}
-<Rectangles className="series series-bar" left={x.left} width={x.width} top={y.top} height={y.height}
+<Rectangles className="series-bar" left={x.left} width={x.width} top={y.top} height={y.height}
    lineWidth={lineWidth} {lineColor} {faceColor} {onclick} />
 {/if}

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>
 
@@ -91,7 +91,14 @@
 
 
    // 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(() => {
@@ -121,9 +128,11 @@
    let lc = $derived.by(() => {
       if (!lb) return null;
 
-      if (colmap) {
-         if (!Array.isArray(colmap)) {
-            console.error('Heatmap: parameter "colmap" must be array with colors.');
+      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 !== lb.length - 1) {