svelte-plots-basic 3.2.1 → 3.4.0

package/src/2d/Legend.svelte

@@ -40,7 +40,7 @@
    </Axes>
 -->
 <script>
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { Colors, MARKER_SYMBOLS } from '../constants';
    import { text2svg } from '../methods';
 
@@ -78,8 +78,9 @@
          return null;
       }
 
+      const result = [];
       for (let i = 0; i < items.length; i++) {
-         const item = items[i];
+         const item = {...items[i]};
 
          // check and transform label
          if (!item.label) {
@@ -88,13 +89,14 @@
          }
 
          const newLabel = text2svg(item.label);
-         const labelHeight = newLabel.length === item.label ? 1 : 1.4;
+         const labelHeight = newLabel.length === item.label.length ? 1 : 1.4;
          item.label = newLabel;
-         item['labelHeight'] = labelHeight;
+         item.labelHeight = labelHeight;
 
          // set default values for lines
          if (item.line) {
-            if (!item.line.lineType) item.line['lineType'] = 1
+            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.');
             }
@@ -104,7 +106,8 @@
 
          // set default values for markers
          if (item.point) {
-            if (!item.point.marker) item.point['marker'] = 1
+            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.');
             }
@@ -113,8 +116,10 @@
             item.point.markerSize = item.point.markerSize ? item.point.markerSize : 1;
             item.point.lineColor = item.point.lineColor ? item.point.lineColor : Colors.PRIMARY;
          }
+
+         result.push(item);
       }
-      return items;
+      return result;
    }
 
    // get context and update group legend parameters reactivey
@@ -124,8 +129,16 @@
       const newPosition = checkPosition(position);
       axes.setGroupLegend(
          newItems && newPosition ?
-         {show, position, items, lineColor, faceColor, lineWidth, fontSize} :
+         {show, position, items: newItems, lineColor, faceColor, lineWidth, fontSize} :
          {show: false, position: null, items: null}
       );
    });
+
+   onDestroy(() => {
+      axes.setGroupLegend({
+         show: false,
+         position: null,
+         items: null
+      });
+   });
 </script>

package/src/2d/Lines.svelte

@@ -30,7 +30,6 @@
    import { val2p, checkCoords, handleClick } 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
@@ -60,4 +59,3 @@
    <polyline class="line" points={p}/>
 </g>
 {/if}
-

package/src/2d/Multilines.svelte

@@ -38,7 +38,6 @@
    import { val2p, checkCoords, handleClick } 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
@@ -61,6 +60,7 @@
 
       if (xv.length !== yValues.nrows) {
          console.error('Multilines: parameter "xValues" must have the same number of values as number of rows in "yValues".');
+         return null;
       }
 
       return yValues;
@@ -91,4 +91,3 @@
    {/each}
 </g>
 {/if}
-

package/src/2d/Points.svelte

@@ -31,7 +31,6 @@
    import { Colors, MARKER_SYMBOLS } from '../constants';
    import { checkCoords, transformCoords, handleClick } from '../methods';
 
-   /** @type {Props} */
    let {
 	   xValues,                          // array of vector with x-coordinates of points
       yValues,                          // array of vector with y-coordinates of points

package/src/2d/Rectangles.svelte

@@ -36,7 +36,6 @@
    import { Colors } from '../constants';
    import { checkCoords, transformCoords, transformObjects, handleClick } from '../methods';
 
-   /** @type {Props} */
    let {
 	   left,                          // array of vector with coordinates of left sides of the bars
       top,                           // array of vector with coordinates of top sides of the bars
@@ -80,4 +79,3 @@
    </g>
 {/if}
 
-

package/src/2d/TextLabels.svelte

@@ -71,8 +71,22 @@
    const p = $derived.by(() => {
       if (!l) return null;
 
-      if (typeof labels === 'string' && typeof pos !== 'number' ) {
-         console.error('TextLabels: parameter "labels" is provided as single string, so "pos" must be a single number.');
+      const hasIndividualPositions =
+         Array.isArray(pos) || ArrayBuffer.isView(pos);
+
+      if (typeof labels === 'string' && hasIndividualPositions) {
+         console.error('TextLabels: when "labels" is a single string, "pos" must be a single number.');
+         return null;
+      }
+
+      if (hasIndividualPositions && pos.length !== yv.length) {
+         console.error('TextLabels: the number of values in "pos" must match the number of coordinates.');
+         return null;
+      }
+
+      const positions = hasIndividualPositions ? Array.from(pos) : [pos];
+      if (positions.some(v => !Number.isInteger(v) || v < 0 || v > 4)) {
+         console.error('TextLabels: values in "pos" must be whole numbers from 0 to 4.');
          return null;
       }
 
@@ -106,14 +120,14 @@
       {#each x as v, i}
          <text data-id={i} x={x[i]} y={y[i]} dx={dx[pos]} dy={dy[pos]}
             transform={rotateAngle !== undefined ? `rotate(${rotateAngle}, ${x[i] + dx[pos]}, ${y[i] + dy[pos]})` : ''}
-            text-anchor={textAnchors[pos[i]]}>{@html labels}</text>
+            text-anchor={textAnchors[pos]}>{@html labels}</text>
       {/each}
 
    {:else if (Array.isArray(pos) || ArrayBuffer.isView(pos))}
 
       {#each x as v, i}
          <text data-id={i} x={x[i]} y={y[i]} dx={dx[pos[i]]} dy={dy[pos[i]]}
-            transform={rotateAngle !== undefined ? `rotate(${rotateAngle}, ${x[i] + dx[pos]}, ${y[i] + dy[pos]})` : ''}
+            transform={rotateAngle !== undefined ? `rotate(${rotateAngle}, ${x[i] + dx[pos[i]]}, ${y[i] + dy[pos[i]]})` : ''}
             text-anchor={textAnchors[pos[i]]}>{@html labels[i]}</text>
       {/each}
 

package/src/2d/TextLegend.svelte

@@ -1,6 +1,7 @@
 <script>
    import { getContext } from 'svelte';
    import { Colors } from '../constants';
+   import { transformCoords } from '../methods';
 
    let {
       left,                                // vector/array with coordinates of lef side of each text box
@@ -15,8 +16,16 @@
    } = $props()
 
    const axes = getContext('axes');
-   const x = $derived(left ? transformCoords([left], axes.tX()) : null);
-   const y = $derived(top ? transformCoords([top], axes.tY()) : null );
+   const x = $derived(
+      left !== undefined && left !== null
+         ? transformCoords([left], axes.tX())
+         : null
+   );
+   const y = $derived(
+      top !== undefined && top !== null
+         ? transformCoords([top], axes.tY())
+         : null
+   );
 
    // styles for bars and labels
    const textStyleStr = $derived(`fill:${faceColor};stroke-width:${lineWidth}px;stroke:${lineColor};font-size:${textSize}em;`);
@@ -28,4 +37,4 @@
          <tspan {x} {dx} dy={i === 0 ? 0 : dy}>{@html el}</tspan>
       {/each}
    </text>
-{/if}
+{/if}

package/src/2d/XAxis.svelte

@@ -21,7 +21,7 @@
 -->
 <script>
 
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { text2svg, validateTicks, validateTickLabels } from '../methods';
 
    let {
@@ -60,4 +60,8 @@
       axes.setXAxis({show, error: error, label: axisLabel, ticks: ticksProcessed,
          labelHeight, showGrid, las, whole, tickLabels: tickLabelsProcessed});
    });
+
+   onDestroy(() => {
+      axes.setXAxis({show: false, error: ''});
+   });
 </script>

package/src/2d/YAxis.svelte

@@ -21,7 +21,7 @@
 -->
 <script>
 
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { text2svg, validateTicks, validateTickLabels } from '../methods';
 
 
@@ -63,4 +63,8 @@
       axes.setYAxis({show, error: error, label: axisLabel, ticks: ticksProcessed,
          labelHeight, showGrid, las, whole, tickLabels: tickLabelsProcessed, pos: 4});
    });
+
+   onDestroy(() => {
+      axes.setYAxis({show: false, error: ''});
+   });
 </script>

package/src/3d/Axes.svelte

@@ -5,8 +5,8 @@
    - `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]`.
-   - `theta` - angle (in degrees) for orientation of projection plane, default: `-10`.
-   - `phi` - angle (in degrees) for orientation of projection plane, default: `-10`.
+   - `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`.
 
    Properties for downloading the plot as PNG or SVG file or copying it to clipboard:
@@ -33,14 +33,13 @@
    import { matrix, Matrix } from 'mdatools/arrays';
    import { setContext } from 'svelte';
    import { PLOT_FONT_SIZE } from '../constants.js';
-   import { checkArray, getScale, getXAxisCoords3D, getYAxisCoords3D, getZAxisCoords3D,
+   import { getScale, getXAxisCoords3D, getYAxisCoords3D, getZAxisCoords3D,
             downloadPNG, downloadSVG, copyToClipboard} from '../methods.js';
 
    import AxisLines from './AxisLines.svelte';
    import AxisTickLabels from './AxisTickLabels.svelte';
    import TextLabels from './TextLabels.svelte';
 
-   /** @type {Props} */
    let {
       limX = [0, 1],
       limY = [0, 1],
@@ -48,7 +47,7 @@
       theta = -10,
       phi = -10,
       zoom = 0.5,
-      downloadLinks = 'hover',
+      downloadLinks = 'none',
       fileName = 'plot',
       pngWidth = 8,
       pngHeight = 8,
@@ -59,6 +58,21 @@
    } = $props();
 
 
+   function hasUsableRange(lim) {
+      if (!Array.isArray(lim) || lim.length !== 2) return false;
+      if (!lim.every(value =>
+         typeof value === 'number' && Number.isFinite(value)
+      )) return false;
+
+      const span = lim[1] - lim[0];
+      const scale = Math.max(Math.abs(lim[0]), Math.abs(lim[1]));
+
+      return span > 0 &&
+         Number.isFinite(1 / span) &&
+         span > Number.EPSILON * scale * 16;
+   }
+
+
 
    /* Copy plot to clipboard as PNG image. */
    async function handleClickCopy(e) {
@@ -105,12 +119,9 @@
 
    // check main plot parameters and set status
    const isOk = $derived(
-      checkArray(limX, 2) &&
-      checkArray(limY, 2) &&
-      checkArray(limZ, 2) &&
-      limX[0] < limX[1] &&
-      limY[0] < limY[1] &&
-      limZ[0] < limZ[1] &&
+      hasUsableRange(limX) &&
+      hasUsableRange(limY) &&
+      hasUsableRange(limZ) &&
       width > 50 &&
       height > 50
    );
@@ -174,9 +185,9 @@
    );
 
    // containers for axis properties
-   let xaxis = $state({show: false, label: ""});
-   let yaxis = $state({show: false, label: ""});
-   let zaxis = $state({show: false, label: ""});
+   let xaxis = $state.raw({show: false, label: ""});
+   let yaxis = $state.raw({show: false, label: ""});
+   let zaxis = $state.raw({show: false, label: ""});
 
    // axes context to share with children
    setContext('axes', {
@@ -290,9 +301,9 @@
    </p>
    {:else}
    <div class="download-links">
-      <button onclick={handleClickSVG} onkeydown={handleClickSVG}>⇩ svg</button>
-      <button onclick={handleClickPNG} onkeydown={handleClickPNG}>⇩ png</button>
-      <button onclick={handleClickCopy} onkeydown={handleClickCopy}>⧉ copy</button>
+      <button type="button" onclick={handleClickSVG}>⇩ svg</button>
+      <button type="button" onclick={handleClickPNG}>⇩ png</button>
+      <button type="button" onclick={handleClickCopy}>⧉ copy</button>
    </div>
    {/if}
 </div>
@@ -370,7 +381,6 @@
       transition: bottom 0.35s ease;
       box-shadow: 0 0 0.75em #00000060;
       margin: 0.6em;
-      box-sizing: border-box;
 
       display: flex;
       align-items: center;
@@ -400,4 +410,4 @@
       background: #4488ee;
    }
 
-</style>
+</style>

package/src/3d/Mesh.svelte

@@ -45,25 +45,50 @@
 
    // check user defined coordinates
    const ux = $derived(checkCoords(xValues, 'Mesh (3D)'));
-   const uz = $derived(ux ? checkCoords(zValues, 'Mesh (3D)', ux.length) : null);
+   const uz = $derived(ux ? checkCoords(zValues, 'Mesh (3D)') : null);
    const Uy = $derived.by(() => {
       if (!ux || !uz) return null;
       if (!ismatrix(yValues)) {
          console.error('Mesh: parameter "yValues" must be a matrix with height values of mesh points.');
          return null;
       }
+      if (yValues.nrows !== ux.length || yValues.ncols !== uz.length) {
+         console.error('Mesh: dimensions of "yValues" must match the lengths of "xValues" and "zValues".');
+         return null;
+      }
       return yValues;
    });
 
 
+   const colors = $derived.by(() => {
+      const isValid =
+         Array.isArray(colmap) &&
+         colmap.length > 0 &&
+         colmap.every(color =>
+            typeof color === 'string' && color.length > 0
+         );
+
+      if (!isValid) {
+         console.error(
+            'Mesh: parameter "colmap" must be a non-empty array of color strings.'
+         );
+         return null;
+      }
+
+      return colmap;
+   });
+
+
    // compute coordinates of mesh elements
    const mesh = $derived.by(() => {
 
-      if (!Uy) return null;
+      if (!Uy || !colors) return null;
 
-      const nbins = colmap.length;
+      const nbins = colors.length;
       const nx = Uy.nrows;
       const nz = Uy.ncols;
+      const nsegmentsX = (nx - 1) * nz;
+      const nsegmentsZ = nx * (nz - 1);
 
       const nr = range(Uy.v);
       const dnr = (nr[1] - nr[0]) / 100;
@@ -71,26 +96,36 @@
       const right = nr[1] + dnr;
       const span = right - left;
 
+      function getColorIndex(value) {
+         if (!(span > 0)) return Math.floor(nbins / 2);
+
+         const index = Math.round(
+            (value - left) / span * (nbins - 1)
+         );
+
+         return Math.max(0, Math.min(nbins - 1, index));
+      }
+
       // compute coordinates for mesh segments lines
-      const x1s = Vector.zeros((nx - 1) * nz);
-      const z1s = Vector.zeros((nx - 1) * nz);
-      const y1s = Vector.zeros((nx - 1) * nz);
+      const x1s = Vector.zeros(nsegmentsX);
+      const z1s = Vector.zeros(nsegmentsX);
+      const y1s = Vector.zeros(nsegmentsX);
 
-      const x2s = Vector.zeros((nx - 1) * nz);
-      const z2s = Vector.zeros((nx - 1) * nz);
-      const y2s = Vector.zeros((nx - 1) * nz);
+      const x2s = Vector.zeros(nsegmentsZ);
+      const z2s = Vector.zeros(nsegmentsZ);
+      const y2s = Vector.zeros(nsegmentsZ);
 
-      const color1 = Vector.zeros((nx - 1) * nz);
+      const color1 = Vector.zeros(nsegmentsX);
 
-      const x1e = Vector.zeros((nx - 1) * nz);
-      const z1e = Vector.zeros((nx - 1) * nz);
-      const y1e = Vector.zeros((nx - 1) * nz);
+      const x1e = Vector.zeros(nsegmentsX);
+      const z1e = Vector.zeros(nsegmentsX);
+      const y1e = Vector.zeros(nsegmentsX);
 
-      const x2e = Vector.zeros((nx - 1) * nz);
-      const z2e = Vector.zeros((nx - 1) * nz);
-      const y2e = Vector.zeros((nx - 1) * nz);
+      const x2e = Vector.zeros(nsegmentsZ);
+      const z2e = Vector.zeros(nsegmentsZ);
+      const y2e = Vector.zeros(nsegmentsZ);
 
-      const color2 = Vector.zeros((nx - 1) * nz);
+      const color2 = Vector.zeros(nsegmentsZ);
 
       let n1 = 0, n2 = 0;
       for (let z = 0; z < nz; z++) {
@@ -101,14 +136,15 @@
                // x-direction - start
                x1s.v[n1] = ux.v[x];
                z1s.v[n1] = uz.v[z];
-               y1s.v[n1] = Uy.v[z * nz + x];
+               y1s.v[n1] = Uy.v[z * nx + x];
 
                // x-direction - end
                x1e.v[n1] = ux.v[x + 1];
                z1e.v[n1] = uz.v[z];
-               y1e.v[n1] = Uy.v[z * nz + x + 1];
+               y1e.v[n1] = Uy.v[z * nx + x + 1];
 
-               const colInd = Math.round(((Uy.v[z * nz + x] + Uy.v[z * nz + x + 1]) / 2 - left) / span * (nbins - 1));
+               const meanHeight = (Uy.v[z * nx + x] + Uy.v[z * nx + x + 1]) / 2;
+               const colInd = getColorIndex(meanHeight);
                color1.v[n1] = colInd;
                n1 = n1 + 1;
             }
@@ -118,14 +154,15 @@
                // z-direction - start
                x2s.v[n2] = ux.v[x];
                z2s.v[n2] = uz.v[z];
-               y2s.v[n2] = Uy.v[z * nz + x];
+               y2s.v[n2] = Uy.v[z * nx + x];
 
                // z-direction - end
                x2e.v[n2] = ux.v[x];
                z2e.v[n2] = uz.v[z + 1];
-               y2e.v[n2] = Uy.v[(z + 1) * nz + x];
+               y2e.v[n2] = Uy.v[(z + 1) * nx + x];
 
-               const colInd = Math.round(((Uy.v[z * nz + x] + Uy.v[(z + 1) * nz + x]) / 2 - left) / span * (nbins - 1));
+               const meanHeight = (Uy.v[z * nx + x] + Uy.v[(z + 1) * nx + x]) / 2;
+               const colInd = getColorIndex(meanHeight);
                color2.v[n2] = colInd;
                n2 = n2 + 1;
             }
@@ -153,11 +190,10 @@
 <g class="series series_mesh" style={lineStyleStr} data-title={title}>
 {#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]]};`} />
+   <line x1={s1s.x[i]} x2={s1e.x[i]} y1={s1s.y[i]} y2={s1e.y[i]} style={`stroke:${colors[mesh.color1.v[i]]};`} />
    {/each}
    {#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]]};`} />
+   <line x1={s2s.x[i]} x2={s2e.x[i]} y1={s2s.y[i]} y2={s2e.y[i]} style={`stroke:${colors[mesh.color2.v[i]]};`} />
    {/each}
 {/if}
 </g>
-

package/src/3d/Segments.svelte

@@ -60,8 +60,8 @@
    const uz1 = $derived(uy1 ? checkCoords(zStart, 'Segments (3D)', ux1.length) : null);
 
    const ux2 = $derived(uz1 ? checkCoords(xEnd, 'Segments (3D)', ux1.length) : null);
-   const uy2 = $derived(ux1 ? checkCoords(yEnd, 'Segments (3D)', ux1.length) : null);
-   const uz2 = $derived(uy1 ? checkCoords(zEnd, 'Segments (3D)', ux1.length) : null);
+   const uy2 = $derived(ux2 ? checkCoords(yEnd, 'Segments (3D)', ux1.length) : null);
+   const uz2 = $derived(uy2 ? checkCoords(zEnd, 'Segments (3D)', ux1.length) : null);
 
    // combine world coordinates to matrices
    const uW1 = $derived(ux1 && uy1 && uz1 ? cbind(ux1, uy1, uz1) : null);

package/src/3d/TextLabels.svelte

@@ -55,6 +55,7 @@
    const U = $derived(ux && uy && uz ? cbind(ux, uy, uz) : null);
 
    const l = $derived.by(() => {
+      if (!ux) return null;
       if(Array.isArray(labels) && labels.length !== ux.length ) {
          console.error('TextLabels: labels provided as an array should have the same number of elements as number of coordinates.');
          return null;
@@ -79,7 +80,7 @@
       <text data-id={i} x={s.x[i]} y={s.y[i]} dx={0} dy={0}>{@html l}</text>
    {/each}
    {:else}
-   {#each x as v, i}
+   {#each s.x as v, i}
       <text data-id={i} x={s.x[i]} y={s.y[i]} dx={0} dy={0}>{@html l[i]}</text>
    {/each}
    {/if}

package/src/3d/XAxis.svelte

@@ -22,7 +22,7 @@
    ```
 -->
 <script>
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { Colors } from '../constants';
 
    let {
@@ -41,6 +41,9 @@
    $effect(() => {
       axes.setXAxis({show: true, ticks, tickLabels, showGrid, label, lineColor, gridColor, textColor});
    });
-</script>
 
+   onDestroy(() => {
+      axes.setXAxis({show: false});
+   });
+</script>
 

package/src/3d/YAxis.svelte

@@ -22,7 +22,7 @@
    ```
 -->
 <script>
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { Colors } from '../constants';
 
    let {
@@ -41,6 +41,9 @@
    $effect(() => {
       axes.setYAxis({show: true, ticks, tickLabels, showGrid, label, lineColor, gridColor, textColor});
    });
-</script>
 
+   onDestroy(() => {
+      axes.setYAxis({show: false});
+   });
+</script>
 

package/src/3d/ZAxis.svelte

@@ -22,7 +22,7 @@
    ```
 -->
 <script>
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { Colors } from '../constants';
 
    let {
@@ -41,6 +41,9 @@
    $effect(() => {
       axes.setZAxis({show: true, ticks, tickLabels, showGrid, label, lineColor, gridColor, textColor});
    });
-</script>
 
+   onDestroy(() => {
+      axes.setZAxis({show: false});
+   });
+</script>