svelte-plots-basic 2.5.8 → 3.0.0

package/src/3d/AxisLines.svelte

@@ -1,49 +1,31 @@
+<!--
+@component draws line segments for axis elements (ticks. etc), not for manual use.
+-->
 <script>
-   /****************************************************
-   * Axis lines for 3D plot                            *
-   * ----------------------                            *
-   * shows lines for axis (main, grid, etc)            *
-   *****************************************************/
-
    import { getContext } from 'svelte';
-   import { Colors } from '../Colors';
-
-
-   /*****************************************/
-   /* Input parameters                      */
-   /*****************************************/
+   import { Colors, LINE_STYLES } from '../constants';
+   import { transform3D } from '../methods';
 
-   export let lineCoords = [];
-   export let lineColor = Colors.DARKGRAY;
-   export let lineType = 1;
-   export let lineWidth = 1;
+   let {
+      lineCoords = [],                 // nested array for line segments coordinates (start and end points).
+      lineColor = Colors.DARKGRAY,     // color of the lines.
+      lineType = 1,                    // line type (1, 2, 3, 4).
+      lineWidth = 1,                   // line width (thickness) in pixels.
+   } = $props();
 
-
-   /*****************************************/
-   /* Component code                        */
-   /*****************************************/
-
-   // get axes context and reactive variables needed to compute coordinates
+   // get axes context and and compute screen coordinates
    const axes = getContext('axes');
-   const scale = axes.scale;
-   const tM = axes.tM;
-   const isOk = axes.isOk;
-
-   // compute coordinates of start and end points for each line
-   let x1, x2, y1, y2, lineStyleStr = undefined;
-   $: if (lineCoords.length == 2) {
-      [x1, y1] = axes.transform(lineCoords[0], $tM);
-      [x2, y2] = axes.transform(lineCoords[1], $tM);
-   }
+   const s1 = $derived(lineCoords.length == 2 ? transform3D(lineCoords[0], axes.tM()) : null);
+   const s2 = $derived(s1 ? transform3D(lineCoords[1], axes.tM()) : null);
 
    // line style
-   $: lineStyleStr = `stroke:${lineColor};stroke-width: ${lineWidth}px;stroke-dasharray:${axes.LINE_STYLES[$scale][lineType-1]}`;
+   const lineStyleStr = $derived(`stroke:${lineColor};stroke-width: ${lineWidth}px;stroke-dasharray:${LINE_STYLES[axes.scale()][lineType-1]}`);
 </script>
 
-{#if $isOk && x1 !== undefined && y1 !== undefined && x2 !== undefined && y2 !== undefined}
-<g class="axis__grid">
-   {#each x1 as v, i}
-   <line vector-effect="non-scaling-stroke" x1={x1[i]} x2={x2[i]} y1={y1[i]} y2={y2[i]} style={lineStyleStr} />
+{#if s1 && s2}
+<g class="axis-lines" style={lineStyleStr}>
+   {#each s1.x as v, i}
+   <line x1={s1.x[i]} x2={s2.x[i]} y1={s1.y[i]} y2={s2.y[i]} />
    {/each}
 </g>
 {/if}

package/src/3d/AxisTickLabels.svelte

@@ -1,46 +1,29 @@
+<!--
+@component shows tick labels.
+-->
 <script>
-   /****************************************************
-   * AxisTickLabels for 3D plots                       *
-   * ----------------------------                      *
-   * shows a series of tick labels along an axis       *
-   *****************************************************/
 
    import { getContext } from 'svelte';
+   import { transform3D } from '../methods';
 
-
-   /*****************************************/
-   /* Input parameters                      */
-   /*****************************************/
-
-	export let tickCoords;
-   export let textColor;
-   export let tickLabels;
-
-
-   /*****************************************/
-   /* Component code                        */
-   /*****************************************/
+   let {
+	   tickCoords, // nested array with coordinates of axis ticks.
+      textColor,  // color of tick labels text.
+      tickLabels, // array with the labels.
+   } = $props();
 
    // get axes context and reactive variables needed to compute coordinates
    const axes = getContext('axes');
-   const isOk = axes.isOk;
-   const tM = axes.tM;
-
-   let x, y = undefined;
-
-   // reactive calculations triggered by changes in coordinates and plot parameters
-   $: if ($isOk) {
-      [x, y] = axes.transform(tickCoords, $tM);
-   }
+   const s = $derived(transform3D(tickCoords, axes.tM()));
 
    // styles for the elements
-   $: textStyleStr = `dominant-baseline:middle;fill:${textColor};font-size:0.85em; text-anchor:middle;`;
+   const textStyleStr = $derived(`dominant-baseline:middle;fill:${textColor};font-size:0.85em; text-anchor:middle;`);
 </script>
 
-{#if x !== undefined && y !== undefined}
-<g class="tick_labels" style={textStyleStr} >
-   {#each x as v, i}
-      <text data-id={i} x={x[i]} y={y[i]} dx={0} dy={0}>{@html tickLabels[i]}</text>
+{#if s}
+<g class="tick-labels" style={textStyleStr} >
+   {#each s.x as v, i}
+      <text data-id={i} x={s.x[i]} y={s.y[i]} dx={0} dy={0}>{@html tickLabels[i]}</text>
    {/each}
 </g>
 {/if}

package/src/3d/Lines.svelte

@@ -1,48 +1,75 @@
-<script>
-   /****************************************************
-   * LineSeries                                        *
-   * --------------------                              *
-   * shows series of lines/curves                      *
-   *****************************************************/
+<!--
+@component Adds a series of lines connecting points with provided coordinates (polyline).
 
-   import { getContext } from 'svelte';
-   import { Colors } from '../Colors';
-   import { val2p3d } from '../Utils';
+   Main properties:
+   - `xValues` - array of vector with x-coordinates of the points.
+   - `yValues` - array of vector with y-coordinates of the points.
+   - `zValues` - array of vector with z-coordinates of the points.
+   - `lineColor` - lines color, default: `Colors.PRIMARY`.
+   - `lineWidth` - width (thickness) of the lines in pixels, defailt: `1`.
+   - `lineType` -  type of lines (`1` - solid, `2` - dashed, `3` - dotted, `4` - dashdot).
+   - `title` - title of the line series group.
 
+   Example:
+   ```jsx
+   <script>
+      import { Axes, Lines } from 'svelte-plots-basic/3d';
 
-   /*****************************************/
-   /* Input parameters                      */
-   /*****************************************/
+      const xValues = [-3, -2, -1, 0, 1, 2, 3];
+      const yValues = [ 9,  4,  1, 0, 1, 4, 9];
+      const zValues = [-3, -2, -1, 0, 1, 2, 3];
+   </script>
 
-	export let xValues;
-   export let yValues;
-   export let zValues;
-   export let title = '';
-   export let lineWidth = 1;
-   export let lineColor = Colors.PRIMARY;
-   export let lineType = 1;
+   <Axes limX={[-4, 4]} limY={[-2, 10]} limZ={[-4, 4]}>
+      <Lines {xValues} {yValues} {zValues} />
+   </Axes>
+   ```
+-->
+<script>
+   import { cbind } from 'mdatools/arrays';
+   import { getContext } from 'svelte';
+   import { Colors, LINE_STYLES } from '../constants';
+   import { checkCoords, transform3D } from '../methods';
 
+   let {
+	   xValues,
+      yValues,
+      zValues,
+      lineWidth = 1,
+      lineColor = Colors.PRIMARY,
+      lineType = 1,
+      title = '',
+   } = $props();
 
-   /*****************************************/
-   /* Component code                        */
-   /*****************************************/
 
-   // get axes context
-   const axes = getContext('axes');
+   /* convert 2D coordinates to points string */
+   function coords2points(s) {
+      let p = '';
+      for (let i = 0; i < s.x.length; i++) {
+         p += s.x[i] + ',' + s.y[i] + ' ';
+      }
+      return p;
+   }
+
+   // check user defined coordinates
+   const ux = $derived(checkCoords(xValues, 'Lines (3D)'));
+   const uy = $derived(ux ? checkCoords(yValues, 'Lines (3D)', ux.length) : null);
+   const uz = $derived(uy ? checkCoords(zValues, 'Lines (3D)', ux.length) : null);
 
-   const scale = axes.scale;
-   const isOk = axes.isOk;
-   const tM = axes.tM;
+   // combine world coordinates to matrices
+   const uW = $derived(ux && uy && uz ? cbind(ux, uy, uz) : null);
 
-   // compute polynomial coordinates as string
-   $: p = $isOk ? val2p3d(xValues, yValues, zValues, $tM, axes) : undefined;
+   // get axes context and compute screen coordinates
+   const axes = getContext('axes');
+   const s = $derived(uW ? transform3D(uW, axes.tM()) : null);
+   const p = $derived(s ? coords2points(s) : null);
 
    // reactive variables for coordinates of data points in pixels
-   $: lineStyleStr = `fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px; stroke-dasharray:${axes.LINE_STYLES[$scale][lineType-1]}`;
+   const lineStyleStr = $derived(`fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px; stroke-dasharray:${LINE_STYLES[axes.scale()][lineType-1]}`);
 </script>
 
-{#if $isOk && p !== undefined}
-   <g class="series series_line" style={lineStyleStr} title={title}>
+{#if p}
+   <g class="series series-line" style={lineStyleStr} title={title}>
       <polyline class="line" points={p}/>
    </g>
 {/if}

package/src/3d/Mesh.svelte

@@ -1,86 +1,96 @@
+<!--
+@component Adds a mesh plot as a set of grid points and line segments connected them.
+
+   Main properties:
+   - `xValues` - array of vector with x-coordinates of the mesh points.
+   - `zValues` - array of vector with z-coordinates of the mesh points.
+   - `yValues` - matrix (!) with y-coordinates of the points defining its height.
+   - `colmap` - array with colors to use for different height.
+   - `lineWidth` - width (thickness) of the lines in pixels, defailt: `1`.
+   - `lineType` -  type of lines (`1` - solid, `2` - dashed, `3` - dotted, `4` - dashdot).
+   - `title` - title of the line series group.
+
+   Example:
+   ```jsx
+   <script>
+      import { Axes, Mesh } from 'svelte-plots-basic/3d';
+      import { gecolmap } from 'svelte-plots-basic/utils';
+
+      const xMesh = Vector.seq(-8, 8, 1);
+      const zMesh = Vector.seq(-8, 8, 1);
+      const yMesh = Matrix.outer(xMesh, zMesh, (x, y) => 6 - (x**2 + y**2) / 10);
+   </script>
+
+   <Axes limX={[-10, 10]} limY={[-10, 10]} limZ={[-10, 10]}>
+      <Mesh xValues={xMesh} yValues={yMesh} zValues={zMesh} colmap={getcolmap(16)}/>
+   </Axes>
+-->
 <script>
-   /****************************************************
-   * Segments for 3D plot                              *
-   * --------------------                              *
-   * shows a series of line segments on the plot       *
-   *****************************************************/
 
-   import { Vector, cbind, ismatrix, isvector } from 'mdatools/arrays';
+   import { Vector, cbind, ismatrix } from 'mdatools/arrays';
    import { range } from 'mdatools/stat';
    import { getContext } from 'svelte';
-   import { Colors } from '../Colors';
-   import { checkCoords } from '../Utils';
-
-
-   /*****************************************/
-   /* Input parameters                      */
-   /*****************************************/
-
-   export let title = '';
-	export let xValues;
-   export let yValues;
-   export let zValues;
-
-   export let colmap = [Colors.PRIMARY, Colors.PRIMARY];
-   export let lineType = 1;
-   export let lineWidth = 1;
-
-   // get axes context and reactive variables needed to compute coordinates
-   const axes = getContext('axes');
-   const scale = axes.scale;
-   const tM = axes.tM;
-   const isOk = axes.isOk;
-
-   let xMesh1Start, xMesh1End, yMesh1Start, yMesh1End, zMesh1Start, zMesh1End, meshColor1;
-   let xMesh2Start, xMesh2End, yMesh2Start, yMesh2End, zMesh2Start, zMesh2End, meshColor2;
-
-   $: {
+   import { Colors, LINE_STYLES } from '../constants';
+   import { checkCoords, transform3D } from '../methods';
+
+   let {
+      title = '',
+      xValues,
+      yValues,
+      zValues,
+      colmap = [Colors.PRIMARY, Colors.PRIMARY],
+      lineType = 1,
+      lineWidth = 1,
+   } = $props();
+
+   // check user defined coordinates
+   const ux = $derived(checkCoords(xValues, 'Mesh (3D)'));
+   const uz = $derived(ux ? checkCoords(zValues, 'Mesh (3D)', ux.length) : null);
+   const Uy = $derived.by(() => {
+      if (!ux || !uz) return null;
       if (!ismatrix(yValues)) {
-         throw Error('Mesh: parameter "yValues" must be a matrix with height values of mesh points.');
+         console.error('Mesh: parameter "yValues" must be a matrix with height values of mesh points.');
+         return null;
       }
+      return yValues;
+   });
 
-      if (Array.isArray(xValues)) {
-         xValues = vector(xValues);
-      }
 
-      if (Array.isArray(zValues)) {
-         zValues = vector(zValues);
-      }
+   // compute coordinates of mesh elements
+   const mesh = $derived.by(() => {
 
-      if (!isvector(zValues) || !isvector(xValues)) {
-         throw Error('Mesh: parameters "xValues" and "zValues" must be vectors or arrays with values.');
-      }
+      if (!Uy) return null;
 
       const nbins = colmap.length;
-      const nx = yValues.nrows;
-      const nz = yValues.ncols;
+      const nx = Uy.nrows;
+      const nz = Uy.ncols;
 
-      const nr = range(yValues.v);
+      const nr = range(Uy.v);
       const dnr = (nr[1] - nr[0]) / 100;
       const left = nr[0] - dnr;
       const right = nr[1] + dnr;
       const span = right - left;
 
       // compute coordinates for mesh segments lines
-      xMesh1Start = Vector.zeros((nx - 1) * nz);
-      zMesh1Start = Vector.zeros((nx - 1) * nz);
-      yMesh1Start = Vector.zeros((nx - 1) * nz);
+      const x1s = Vector.zeros((nx - 1) * nz);
+      const z1s = Vector.zeros((nx - 1) * nz);
+      const y1s = Vector.zeros((nx - 1) * nz);
 
-      xMesh2Start = Vector.zeros((nx - 1) * nz);
-      zMesh2Start = Vector.zeros((nx - 1) * nz);
-      yMesh2Start = Vector.zeros((nx - 1) * nz);
+      const x2s = Vector.zeros((nx - 1) * nz);
+      const z2s = Vector.zeros((nx - 1) * nz);
+      const y2s = Vector.zeros((nx - 1) * nz);
 
-      meshColor1 = Vector.zeros((nx - 1) * nz);
+      const color1 = Vector.zeros((nx - 1) * nz);
 
-      xMesh1End = Vector.zeros((nx - 1) * nz);
-      zMesh1End = Vector.zeros((nx - 1) * nz);
-      yMesh1End = Vector.zeros((nx - 1) * nz);
+      const x1e = Vector.zeros((nx - 1) * nz);
+      const z1e = Vector.zeros((nx - 1) * nz);
+      const y1e = Vector.zeros((nx - 1) * nz);
 
-      xMesh2End = Vector.zeros((nx - 1) * nz);
-      zMesh2End = Vector.zeros((nx - 1) * nz);
-      yMesh2End = Vector.zeros((nx - 1) * nz);
+      const x2e = Vector.zeros((nx - 1) * nz);
+      const z2e = Vector.zeros((nx - 1) * nz);
+      const y2e = Vector.zeros((nx - 1) * nz);
 
-      meshColor2 = Vector.zeros((nx - 1) * nz);
+      const color2 = Vector.zeros((nx - 1) * nz);
 
       let n1 = 0, n2 = 0;
       for (let z = 0; z < nz; z++) {
@@ -89,96 +99,64 @@
             if (x < nx - 1) {
 
                // x-direction - start
-               xMesh1Start.v[n1] = xValues.v[x];
-               zMesh1Start.v[n1] = zValues.v[z];
-               yMesh1Start.v[n1] = yValues.v[z * nz + x];
+               x1s.v[n1] = ux.v[x];
+               z1s.v[n1] = uz.v[z];
+               y1s.v[n1] = Uy.v[z * nz + x];
 
                // x-direction - end
-               xMesh1End.v[n1] = xValues.v[x + 1];
-               zMesh1End.v[n1] = zValues.v[z];
-               yMesh1End.v[n1] = yValues.v[z * nz + x + 1];
+               x1e.v[n1] = ux.v[x + 1];
+               z1e.v[n1] = uz.v[z];
+               y1e.v[n1] = Uy.v[z * nz + x + 1];
 
-               const colInd = Math.round(((yValues.v[z * nz + x] + yValues.v[z * nz + x + 1]) / 2 - left) / span * (nbins - 1));
-               meshColor1.v[n1] = colInd;
+               const colInd = Math.round(((Uy.v[z * nz + x] + Uy.v[z * nz + x + 1]) / 2 - left) / span * (nbins - 1));
+               color1.v[n1] = colInd;
                n1 = n1 + 1;
             }
 
             if (z < nz - 1) {
 
                // z-direction - start
-               xMesh2Start.v[n2] = xValues.v[x];
-               zMesh2Start.v[n2] = zValues.v[z];
-               yMesh2Start.v[n2] = yValues.v[z * nz + x];
+               x2s.v[n2] = ux.v[x];
+               z2s.v[n2] = uz.v[z];
+               y2s.v[n2] = Uy.v[z * nz + x];
 
                // z-direction - end
-               xMesh2End.v[n2] = xValues.v[x];
-               zMesh2End.v[n2] = zValues.v[z + 1];
-               yMesh2End.v[n2] = yValues.v[(z + 1) * nz + x];
+               x2e.v[n2] = ux.v[x];
+               z2e.v[n2] = uz.v[z + 1];
+               y2e.v[n2] = Uy.v[(z + 1) * nz + x];
 
-               const colInd = Math.round(((yValues.v[z * nz + x] + yValues.v[(z + 1) * nz + x]) / 2 - left) / span * (nbins - 1));
-               meshColor2.v[n2] = colInd;
+               const colInd = Math.round(((Uy.v[z * nz + x] + Uy.v[(z + 1) * nz + x]) / 2 - left) / span * (nbins - 1));
+               color2.v[n2] = colInd;
                n2 = n2 + 1;
             }
          }
       }
 
-      xMesh1Start = xMesh1Start.copy()
-      xMesh1End = xMesh1End.copy()
-      yMesh1Start = yMesh1Start.copy()
-      yMesh1End = yMesh1End.copy()
-      zMesh1Start = zMesh1Start.copy()
-      zMesh1End = zMesh1End.copy()
-   };
-
-   let x11, y11, x12, y12;
-   let x21, y21, x22, y22;
-
-   $: {
-      if ($isOk) {
-         [x11, y11] = axes.transform(
-            cbind(
-               checkCoords(xMesh1Start, 'Segments'),
-               checkCoords(yMesh1Start, 'Segments'),
-               checkCoords(zMesh1Start, 'Segments')
-            ), $tM
-         );
-
-         [x12, y12] = axes.transform(
-            cbind(
-               checkCoords(xMesh1End, 'Segments'),
-               checkCoords(yMesh1End, 'Segments'),
-               checkCoords(zMesh1End, 'Segments')
-            ), $tM
-         );
-
-         [x21, y21] = axes.transform(
-            cbind(
-               checkCoords(xMesh2Start, 'Segments'),
-               checkCoords(yMesh2Start, 'Segments'),
-               checkCoords(zMesh2Start, 'Segments')
-            ), $tM
-         );
-
-         [x22, y22] = axes.transform(
-            cbind(
-               checkCoords(xMesh2End, 'Segments'),
-               checkCoords(yMesh2End, 'Segments'),
-               checkCoords(zMesh2End, 'Segments')
-            ), $tM
-         );
-      }
-   };
+      const M1s = cbind(x1s, y1s, z1s);
+      const M1e = cbind(x1e, y1e, z1e);
+      const M2s = cbind(x2s, y2s, z2s);
+      const M2e = cbind(x2e, y2e, z2e);
+
+      return {M1s, M1e, M2s, M2e, color1, color2};
+   });
+
+   // get axes context and compute screen coordinates
+   const axes = getContext('axes');
+   const s1s = $derived(mesh ? transform3D(mesh.M1s, axes.tM()) : null);
+   const s1e = $derived(mesh ? transform3D(mesh.M1e, axes.tM()) : null);
+   const s2s = $derived(mesh ? transform3D(mesh.M2s, axes.tM()) : null);
+   const s2e = $derived(mesh ? transform3D(mesh.M2e, axes.tM()) : null);
 
-   $: lineStyleStr = `stroke-width: ${lineWidth}px;stroke-dasharray:${axes.LINE_STYLES[$scale][lineType-1]};`;
+   const lineStyleStr = $derived(`stroke-width: ${lineWidth}px;stroke-dasharray:${LINE_STYLES[axes.scale()][lineType-1]};`);
 </script>
 
 <g class="series series_mesh" style={lineStyleStr} data-title={title}>
-{#if $isOk }
-   {#each x11 as v, i}
-      <line vector-effect="non-scaling-stroke" x1={x11[i]} x2={x12[i]} y1={y11[i]} y2={y12[i]} style={`stroke:${colmap[meshColor1.v[i]]};`} />
+{#if s1s && s1e && s2s && s2e }
+   {#each s1s.x as v, i}
+   <line x1={s1s.x[i]} x2={s1e.x[i]} y1={s1s.y[i]} y2={s1e.y[i]} style={`stroke:${colmap[mesh.color1.v[i]]};`} />
    {/each}
-   {#each x21 as v, i}
-      <line vector-effect="non-scaling-stroke" x1={x21[i]} x2={x22[i]} y1={y21[i]} y2={y22[i]} style={`stroke:${colmap[meshColor2.v[i]]};`} />
+   {#each s2s.x as v, i}
+   <line x1={s2s.x[i]} x2={s2e.x[i]} y1={s2s.y[i]} y2={s2e.y[i]} style={`stroke:${colmap[mesh.color2.v[i]]};`} />
    {/each}
 {/if}
 </g>

package/src/3d/Points.svelte

@@ -1,60 +1,80 @@
+<!--
+@component Adds a series of points (markers).
+
+   Main properties:
+   - `xValues` - array of vector with x-coordinates of the points.
+   - `yValues` - array of vector with y-coordinates of the points.
+   - `zValues` - array of vector with z-coordinates of the points.
+   - `marker` - marker number (from 1 to 8), default: `1`.
+   - `faceColor` - face (fill) color of the markers, default: `'transparent'`.
+   - `borderColor` - color markers' borders, default: `Colors.PRIMARY`.
+   - `borderWidth` - width (thickness) of the markers' borders in pixels, default: `1`.
+   - `markerSize` - size of the markers in em, default: `1`.
+   - `title` - title of the line series group.
+
+   Example:
+   ```jsx
+   <script>
+      import { Axes, Points } from 'svelte-plots-basic/3d';
+
+      const xValues = [-3, -2, -1, 0, 1, 2, 3];
+      const yValues = [ 9,  4,  1, 0, 1, 4, 9];
+      const zValues = [-3, -2, -1, 0, 1, 2, 3];
+   </script>
+
+   <Axes limX={[-4, 4]} limY={[-2, 10]} limZ={[-4, 4]}>
+      <Points {xValues} {yValues} {zValues} />
+   </Axes>
+   ```
+-->
 <script>
-   /****************************************************
-   * ScatterSeries component                           *
-   * --------------------                              *
-   * shows a series of points on the plot              *
-   *                                                   *
-   *****************************************************/
-
-   import { Colors } from '../Colors';
+
+   import { Colors, MARKER_SYMBOLS } from '../constants';
    import TextLabels from './TextLabels.svelte';
 
-   /*****************************************/
-   /* Input parameters                      */
-   /*****************************************/
-
-   // input parameters
-	export let xValues;
-   export let yValues;
-   export let zValues = undefined
-   export let marker = 1
-   export let title = "";
-   export let faceColor = "transparent";
-   export let borderColor = Colors.PRIMARY;
-   export let borderWidth = 1;
-   export let markerSize = 1;
-
-   /* constants for internal use */
-   const markers = ["●", "◼", "▲", "▼", "⬥", "+", "*", "⨯"];
-   let markerSymbol;
-
-   /* sanity check of input parameters */
-   if (typeof(marker) !== "number" || marker < 1 || marker > markers.length) {
-      throw(`Points: parameter 'marker' must be a number from 1 to ${markers.length}."`);
-   }
+   let {
+      xValues,
+      yValues,
+      zValues,
+      marker = 1,
+      title = '',
+      faceColor = "transparent",
+      borderColor = Colors.PRIMARY,
+      borderWidth = 1,
+      markerSize = 1,
+   } = $props();
 
    // reactive variables for coordinates of data points in pixels (and line style)
-   $: markerSymbol = markers[marker - 1];
+   const markerSymbol = $derived.by(() => {
+      if (typeof(marker) !== "number" || marker < 1 || marker > MARKER_SYMBOLS.length) {
+         console.error(`Points (3D): parameter 'marker' must be a number from 1 to ${MARKER_SYMBOLS.length}."`);
+         return null;
+      }
+
+      return MARKER_SYMBOLS[marker - 1];
+   });
 </script>
 
+{#if markerSymbol}
 <TextLabels
    {xValues} {yValues} {zValues} {faceColor} {borderColor} {borderWidth} {title}
-   className="series_scatter"
+   className="series-scatter"
    labels={markerSymbol}
    textSize={markerSize}
 />
+{/if}
 
 <style>
-   :global(.series_scatter > text) {
+   :global(.series-scatter > text) {
       font-size: 1em;
       cursor: default;
    }
 
-   :global(.series_scatter > text:hover) {
+   :global(.series-scatter > text:hover) {
       opacity: 90%;
    }
 
-   :global(.series_scatter > *:hover + .labels_hover) {
+   :global(.series-scatter > *:hover + .labels-hover) {
       visibility: visible;
       opacity: 1;
    }