svelte-plots-basic 3.3.0 → 4.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-2026 Sergey Kucheryavskiy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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,32 @@ These websites and web-applications use `svelte-plots-basic` library:
 
 ## News
 
+### 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.
@@ -57,6 +83,13 @@ In addition to Svelte 5 syntax and functionality, this release also introduces a
 
 * **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.
 
+
+## Security and label markup
+
+Several title and label properties support SVG/HTML markup and are rendered as raw markup using Svelte's `{@html}` mechanism. This enables formatted labels, HTML entities, subscripts, and superscripts.
+
+Only pass trusted content to these properties. Do not pass unsanitized user input or external data directly as a plot title, axis label, tick label, legend label, or text-label value. Escape untrusted text, or sanitize it with an allow-list appropriate for SVG markup, before passing it to a component.
+
 ## Installation
 
 The set up process is similar to any other Svelte component library. Just use:
@@ -140,6 +173,7 @@ Here is a table with properties of the component related to saving plot to a fil
  `pngRes` | `300` | resolution of PNG image (pixels per inch)
  `clipboardWidth` | `1200` | width of image in clipboard in pixels
  `clipboardHeight` | `800` | height of image in clipboard in pixels
+ `plotActions` | `[]` | array of `{ text, callback }` objects for adding custom buttons to the download panel.
 
 Please pay attention that most of the browsers enable clipboard functionality only if website is available via HTTPS.
 
@@ -194,7 +228,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>
 ```
 
@@ -594,7 +628,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];
@@ -651,7 +685,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
@@ -703,7 +737,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
@@ -763,16 +797,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>
 
@@ -786,7 +820,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} />
@@ -800,12 +834,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
@@ -841,15 +884,12 @@ Here is an example of simple 3D scatter plot:
 <Axes limX={[-10, 10]} limY={[-10, 10]} limZ={[-10, 10]} {zoom} {phi} {theta}>
 	<Points {xValues} {yValues} {zValues} />
 
-	<XAxis showGrid={true} title="X" />
-	<YAxis showGrid={true} title="Y" />
-	<ZAxis showGrid={true} title="Z" />
+	<XAxis showGrid={true} label="X" />
+	<YAxis showGrid={true} label="Y" />
+	<ZAxis showGrid={true} label="Z" />
 </Axes>
 ```
 
 You can also add `Lines`, `Segments` and `Mesh` series to 3D plots.
 
 Check more advanced example in Svelte REPL with mouse and keyboard support, and more: [plots-3d](https://svelte.dev/playground/2294eecba7d7477ab9a09c1734d32ac2)
-
-
-

package/package.json

@@ -1,10 +1,16 @@
 {
    "name": "svelte-plots-basic",
    "description": "Svelte components for creating simple plots",
-   "version": "3.3.0",
+   "version": "4.0.0",
    "author": "Sergey Kucheryavskiy",
    "license": "MIT",
    "private": false,
+   "type": "module",
+   "scripts": {
+      "check": "node scripts/check.cjs",
+      "test": "node --test",
+      "prepack": "npm run check && npm test"
+   },
    "exports": {
       "./constants":  "./src/constants.js",
       "./utils":  "./src/methods.js",
@@ -14,10 +20,12 @@
       "./3d/*.svelte":  "./src/3d/*.svelte"
    },
    "devDependencies": {
-      "svelte": "^5.x.x"
+      "mdatools": "^1.5.0",
+      "svelte": "^5.56.8"
    },
-   "dependencies": {
-      "mdatools": "^1.x.x"
+   "peerDependencies": {
+      "mdatools": "^1.5.0",
+      "svelte": "^5.0.0"
    },
    "keywords": [
       "svelte",

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,17 +29,16 @@
 <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';
 
-   /** @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
-      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();
@@ -47,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');
@@ -56,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}
@@ -66,4 +66,3 @@
    <polygon points={pa}/>
 </g>
 {/if}
-

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,14 +23,14 @@
       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>
    ```
 -->
 <script>
    import { setContext } from 'svelte';
    import { Colors, PLOT_FONT_SIZE, AXES_MARGIN_FACTORS, TICK_SIZE, LINE_STYLES, MARKER_SYMBOLS } from '../constants.js';
-   import { downloadSVG, downloadPNG, copyToClipboard, checkArray, getScale, getAxisScale, getXAxisParams, getYAxisParams,
+   import { downloadSVG, downloadPNG, copyToClipboard, getScale, getAxisScale, getXAxisParams, getYAxisParams,
             transformCoords, getColormapLegendParams, getColormapLegendCoords, getTickFactorLabel,
             getGroupLegendCoords, text2svg,
             invTransformCoords } from '../methods.js';
@@ -46,6 +46,7 @@
       limY = [0, 1],
       margins = [1.0, 1.1, 0.55, 0.60],
       downloadLinks = 'none',
+      plotActions = [],
       fileName = 'plot',
       pngWidth = 8,
       pngHeight = 8,
@@ -60,9 +61,47 @@
    } = $props();
 
 
+   const actions = $derived.by(() => {
+      if (plotActions == null) return [];
+
+      if (!Array.isArray(plotActions)) {
+         console.error('Axes: "plotActions" must be an array.');
+         return [];
+      }
+
+      return plotActions.filter((action, index) => {
+         const isValid =
+            action &&
+            typeof action.text === 'string' &&
+            typeof action.callback === 'function';
+
+         if (!isValid) {
+            console.error(
+               `Axes: plot action ${index + 1} must contain a text string and callback function.`
+            );
+         }
+
+         return isValid;
+      });
+   });
+
+
+   // Check that axis limits contain a finite, meaningful numeric range.
+   function hasUsableRange(lim) {
+      if (!Array.isArray(lim) || lim.length !== 2) return false;
+      if (!lim.every(v => typeof v === 'number' && Number.isFinite(v))) return false;
+
+      const span = Math.abs(lim[1] - lim[0]);
+      const scale = Math.max(Math.abs(lim[0]), Math.abs(lim[1]));
+
+      return Number.isFinite(1 / span) &&
+         span > Number.EPSILON * scale * 16;
+   }
+
+
    /* 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);
@@ -138,8 +177,8 @@
 
    // plot status
    const isOk = $derived(
-      checkArray(limX, 2) &&
-      checkArray(limY, 2) &&
+      hasUsableRange(limX) &&
+      hasUsableRange(limY) &&
       width > (pxMargins[1] + pxMargins[3]) &&
       height > (pxMargins[0] + pxMargins[2])
    );
@@ -175,11 +214,11 @@
    const titleHeight = $derived(plotTitle ? (plotTitle.length === title.length ? 1.0 : 1.4) : 0);
 
    // default parameters of box, axis elements, colomap legend and group legend
-   let box = $state({show: false});
-   let xaxis = $state({show: false, error: ''});
-   let yaxis = $state({show: false, error: ''});
-   let clg = $state({show: false, colmap: null, breaks: null});
-   let glg = $state({show: false, items: null, position: null});
+   let box = $state.raw({show: false});
+   let xaxis = $state.raw({show: false, error: ''});
+   let yaxis = $state.raw({show: false, error: ''});
+   let clg = $state.raw({show: false, colmap: null, breaks: null});
+   let glg = $state.raw({show: false, items: null, position: null});
 
    // set colormap legend parameters if requested
    const clgParams = $derived(isOk && clg && clg.show ? getColormapLegendParams(clg) : null);
@@ -268,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}
@@ -277,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}
@@ -445,6 +486,8 @@
 
             <!-- box -->
             <g class="axes-box">
+            <!-- The plot callback requires real pointer coordinates; a keyboard-generated coordinate would be arbitrary. -->
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
             <rect stroke={box.show ? box.lineColor : 'transparent'}
                stroke-width={box.show ? box.lineWidth + 'px' : '0'}
                fill="transparent"
@@ -491,10 +534,16 @@
    </p>
    {:else}
    <div class="download-links">
-      <button onclick={handleClickSVG}>⇩ svg</button>
-      <button onclick={handleClickPNG}>⇩ png</button>
-      <button onclick={handleClickPNGAdvanced}>⇩ png+</button>
-      <button onclick={handleClickCopy}>⧉ copy</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>
+      {#if actions.length > 0}
+      <span class="divider">⋮</span>
+      {#each actions as ac}
+      <button type="button" onclick={ac.callback}>{ac.text}</button>
+      {/each}
+      {/if}
    </div>
    {/if}
 
@@ -545,6 +594,9 @@
       background: #fafafa;
       border-radius: 0.35em;
       padding: 0.25em 0.5em;
+      margin: 0 1px;
+
+      line-height: 1.25;
    }
 
    .download-links > button:hover{
@@ -560,6 +612,12 @@
       background: #4488ee;
    }
 
+   .download-links > .divider {
+      display: inline-block;
+      width: 1em;
+      text-align: center;
+      color: #909090;
+   }
 
    /* Plot container */
    .plot-container {
@@ -617,4 +675,4 @@
       min-width: 100%;
    }
 
-</style>
+</style>

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

@@ -34,7 +34,6 @@
    import Rectangles from './Rectangles.svelte';
 
 
-   /** @type {Props} */
    let {
 	   xValues,                       // vector with x-coordinates of middle points of the bars.
       yValues,                       // vector with y-coordinates of top points of the bars.
@@ -46,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 {
@@ -75,7 +95,7 @@
          }
       }
 
-      w = w * barWidth;
+      w = w * bw;
       const whalf = w / 2;
       const left = Vector.zeros(n);
       const width = Vector.zeros(n);
@@ -114,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}
+{/if}

package/src/2d/Box.svelte

@@ -16,7 +16,7 @@
    ```
 -->
 <script>
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
 
    let {lineWidth = 1, lineColor = '#606060'} = $props();
    const axes = getContext('axes');
@@ -24,5 +24,8 @@
    $effect(() => {
       axes.setBox({show:true, lineWidth, lineColor});
    });
-</script>
 
+   onDestroy(() => {
+      axes.setBox({show: false});
+   });
+</script>

package/src/2d/ColormapLegend.svelte

@@ -34,7 +34,7 @@
    ```
 -->
 <script>
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { Colors } from '../constants';
 
 
@@ -52,7 +52,10 @@
    $effect(() => {
       axes.setColmapLegend({show, breaks, colmap, labels, labelColor, fontSize})
    });
-</script>
 
+   onDestroy(() => {
+      axes.setColmapLegend({show: false});
+   });
+</script>