svelte-plots-basic 3.3.0 → 4.0.0

package/src/methods.js

@@ -1,6 +1,6 @@
 import { cbind, vector, isvector, Vector, matrix } from 'mdatools/arrays';
 import { min, max, diff } from 'mdatools/stat';
-import { TICK_NUM, XTICK_NUM, YTICK_NUM, TICK_SIZE, COLMAP_WIDTH_RATIO, COLMAP_EL_HEIGHTS_PX, COLMAP_TOP_MARGIN } from './constants';
+import { TICK_NUM, XTICK_NUM, YTICK_NUM, TICK_SIZE, COLMAP_WIDTH_RATIO, COLMAP_EL_HEIGHTS_PX, COLMAP_TOP_MARGIN } from './constants.js';
 
 
 /**
@@ -31,6 +31,29 @@ export function checkArray(arr, len) {
 }
 
 
+/**
+ * Validate a line type and fall back to a solid line when it is invalid.
+ * Numeric strings are accepted for compatibility with HTML-style component attributes.
+ *
+ * @param {number|string} lineType - line type (1 - solid, 2 - dashed, 3 - dotted, 4 - dashdot).
+ * @param {string} source - name of the component which called the method.
+ * @returns {number} normalized line type.
+ */
+export function normalizeLineType(lineType, source = 'Plot') {
+   const canConvert =
+      typeof lineType === 'number' ||
+      (typeof lineType === 'string' && lineType.trim() !== '');
+   const normalized = canConvert ? Number(lineType) : NaN;
+
+   if (!Number.isInteger(normalized) || normalized < 1 || normalized > 4) {
+      console.error(`${source}: parameter "lineType" must be a whole number from 1 to 4.`);
+      return 1;
+   }
+
+   return normalized;
+}
+
+
 /**
  * Generic function to transform x or y-values from plot coordinates to screen (SVG) coordinates.
  *
@@ -94,7 +117,8 @@ export function invTransformObjects(v, t) {
  */
 export function getTickFactorLabel(tf) {
    if (tf === 0) return '';
-   return `<tspan>&times;10</tspan><tspan font-size="0.75em" dy="-0.5em">${(tf).toString()}</tspan>`;
+   return '<tspan dominant-baseline="inherit">&times;10</tspan>' +
+      `<tspan font-size="0.75em" dominant-baseline="inherit" baseline-shift="37.5%">${tf.toString()}</tspan>`;
 }
 
 
@@ -167,7 +191,7 @@ export function getTickLabels(ticks) {
 
 
 /**
- * Check coordinates and convert them to vector if necessary.
+ * Check coordinates, ensure all values are finite, and convert them to vector if necessary.
  *
  * @param {Array|Vector} x - vector or array with coordinates.
  * @param {string} source - name of component which called the method (needed for error message).
@@ -196,6 +220,13 @@ export function checkCoords(x, source, len) {
       return null;
    }
 
+   for (let i = 0; i < x.length; i++) {
+      if (!Number.isFinite(x.v[i])) {
+         console.error(source + ': coordinates must contain only finite numeric values.');
+         return null;
+      }
+   }
+
    return x;
 }
 
@@ -304,7 +335,7 @@ export function validateTicks(ticks, lim) {
  * @param {Array} ticks - vector with ticks if alredy available (if not, new will be computed).
  * @param {Array} lim - vector with axis limits tickets must be computed for.
  * @param {number} maxTickNum - maximum number of ticks to compute.
- * @param {boolean} round - round or not the fractions when computing nice numbers for the ticks.
+ * @param {boolean} round - round or not the fractions when computing nice numbers for the ticks, default: false.
  * @param {boolean} whole - should the ticks be a whole number.
  * @param {Number} deltaFactor - percent of range to use as internal margins
  *
@@ -314,7 +345,7 @@ export function validateTicks(ticks, lim) {
 export function getAxisTicks(ticks, limIn, maxTickNum, round, whole, deltaFactor) {
 
    if (round === undefined || round === null) {
-      round = true;
+      round = false;
    }
 
    if (whole === undefined || whole === null) {
@@ -325,19 +356,37 @@ export function getAxisTicks(ticks, limIn, maxTickNum, round, whole, deltaFactor
       deltaFactor = 0.0001;
    }
 
-   // correct limits internally if they are reverse
-   const lim = limIn[0] < limIn[1] ? limIn : [limIn[1], limIn[0]];
-
    // if ticks are already provided do not recompute them
    // the validation is done in corresponding component, so no need to do it again
    if (ticks) return ticks;
 
    // check if limits are ok
-   if (typeof(lim) !== "object" || lim[0] === undefined || lim[1] === undefined) {
+   if (!limIn || typeof(limIn) !== "object" || limIn[0] === undefined || limIn[1] === undefined) {
+      console.error('getAxisTicks: provided axis limits are not valid.');
+      return undefined;
+   }
+
+   const limValues = [Number(limIn[0]), Number(limIn[1])];
+   if (!limValues.every(Number.isFinite) || limValues[0] === limValues[1]) {
       console.error('getAxisTicks: provided axis limits are not valid.');
       return undefined;
    }
 
+   // correct limits internally if they are reverse
+   const lim = limValues[0] < limValues[1] ? limValues : [limValues[1], limValues[0]];
+
+   maxTickNum = Number(maxTickNum);
+   if (!Number.isInteger(maxTickNum) || maxTickNum < 1) {
+      console.error('getAxisTicks: parameter "maxTickNum" must be a finite positive whole number.');
+      return undefined;
+   }
+
+   deltaFactor = Number(deltaFactor);
+   if (!Number.isFinite(deltaFactor) || deltaFactor < 0 || deltaFactor >= 0.5) {
+      console.error('getAxisTicks: parameter "deltaFactor" must be a finite number from 0 up to, but not including, 0.5.');
+      return undefined;
+   }
+
    // get range as a nice number and compute min, max and steps for the tick sequence
    const delta = Math.abs((lim[1] - lim[0])) * deltaFactor;
    const localRange = lim[1] - lim[0] - 2 * delta;
@@ -345,7 +394,7 @@ export function getAxisTicks(ticks, limIn, maxTickNum, round, whole, deltaFactor
    const fraction =  1 / Math.pow(10, exponent - 1);
    const range = Math.round(localRange * fraction) / fraction;
 
-   let tickSpacing = niceNum(range / maxTickNum, false);
+   let tickSpacing = niceNum(range / maxTickNum, round);
    if (whole) {
       if (Math.abs(lim[1] - lim[0]) <= 1) {
          console.error('getAxisTicks: parameter "whole" will be ignored as axis limits are too narrow to fit whole ticks.');
@@ -486,13 +535,20 @@ function createPngDataTable() {
 }
 
 
+let pngDataTable = null;
+
+
 /**
  * Calculate CRC for PNG image
  * @param buf image data
  */
 function calcCrc(buf) {
    let c = -1;
-   let pngDataTable = createPngDataTable();
+
+   if (!pngDataTable) {
+      pngDataTable = createPngDataTable();
+   }
+
    for (let n = 0; n < buf.length; n++) {
       c = pngDataTable[(c ^ buf[n]) & 0xFF] ^ (c >>> 8);
    }
@@ -586,26 +642,31 @@ function changeDPI(base64Image, dpi) {
  * @param {number} width - desired image width in cm
  * @param {number} height - desired image height in cm
  * @param {number} res - resolution (pixels per inch)
+ * @param {Function} [onSerialize] - callback invoked after serialization, or if export preparation fails
  *
  */
 export function downloadPNG (svg, fileName, width, height, res, onSerialize) {
 
-   if (!width) width = 10;
-   if (!height) height = 10;
-   if (!res) res = 300;
+   if (width === undefined || width === null || width === '') width = 10;
+   if (height === undefined || height === null || height === '') height = 10;
+   if (res === undefined || res === null || res === '') res = 300;
+
+   width = Number(width);
+   height = Number(height);
+   res = Number(res);
 
-   if (width < 1 || width > 30) {
-      console.error('Parameter "width" must be between 1 and 30 (cm).');
+   if (!Number.isFinite(width) || width < 1 || width > 30) {
+      console.error('Parameter "width" must be a finite number between 1 and 30 (cm).');
       return null;
    }
 
-   if (height < 1 || height > 30) {
-      console.error('Parameter "height" must be between 1 and 30 (cm).');
+   if (!Number.isFinite(height) || height < 1 || height > 30) {
+      console.error('Parameter "height" must be a finite number between 1 and 30 (cm).');
       return null;
    }
 
-   if (res < 50 || res > 1200) {
-      console.error('Parameter "res" must be between 50 and 1200 (ppi).');
+   if (!Number.isFinite(res) || res < 50 || res > 1200) {
+      console.error('Parameter "res" must be a finite number between 50 and 1200 (ppi).');
       return null;
    }
 
@@ -614,7 +675,7 @@ export function downloadPNG (svg, fileName, width, height, res, onSerialize) {
       return null;
    }
 
-   if (!fileName || fileName.trim() === '') {
+   if (typeof fileName !== 'string' || fileName.trim() === '') {
       fileName = 'plot';
    }
 
@@ -624,75 +685,105 @@ export function downloadPNG (svg, fileName, width, height, res, onSerialize) {
    const pxHeight = height / 2.54 * res;
 
    setTimeout(() => {
+      let url = null;
+      let callbackInvoked = false;
 
-      // compute canvas size based on SVG size and desired PNG WIDTH in pixels
-      const svgHeight = svg.clientHeight;
-      const svgWidth = svg.clientWidth;
-      let scaleFactor = Math.max(pxWidth / svgWidth, pxHeight / svgHeight);
-
-      // this is needed if SVG image is larger than the future PNG image
-      let specialScale = 1;
-      if (scaleFactor < 1) {
-         specialScale = scaleFactor;
-         scaleFactor = 1;
+      function notifyCaller() {
+         if (callbackInvoked) return;
+         callbackInvoked = true;
+         if (typeof onSerialize === 'function') onSerialize();
       }
 
-      // create a new canvas element
-      const canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d');
-
-      // set the canvas size to match the SVG element
-      canvas.width =  svgWidth * (specialScale < 1 ? specialScale : scaleFactor);
-      canvas.height = svgHeight * (specialScale < 1 ? specialScale : scaleFactor);
-
-      // save and set corresponding attributes for SVG element
-      const origWidth = svg.getAttribute('width');
-      const origHeight = svg.getAttribute('height');
-      svg.setAttribute('width', svgWidth * scaleFactor);
-      svg.setAttribute('height', svgHeight * scaleFactor);
+      try {
+         // compute canvas size based on SVG size and desired PNG WIDTH in pixels
+         const svgHeight = svg.clientHeight;
+         const svgWidth = svg.clientWidth;
 
-      // draw a white background
-      context.fillStyle = 'white';
-      context.fillRect(0, 0, canvas.width, canvas.height);
-      context.scale(scaleFactor, scaleFactor)
-
-      // draw the SVG onto the canvas
-      const svgXml = new XMLSerializer().serializeToString(svg);
-      const blob = new Blob([svgXml], { type: 'image/svg+xml;charset=utf-8' });
-      const url = URL.createObjectURL(blob);
-
-      // restore original attributes
-      origWidth ? svg.setAttribute('width', origWidth) : svg.removeAttribute('width');
-      origHeight ? svg.setAttribute('height', origHeight) : svg.removeAttribute('height');
-
-      // notify caller that serialization is done (used by ExportDialog to restore container)
-      if (onSerialize) onSerialize();
-
-      const img = new Image();
+         if (!Number.isFinite(svgWidth) || svgWidth <= 0 ||
+             !Number.isFinite(svgHeight) || svgHeight <= 0) {
+            throw new Error('The SVG must have finite, positive dimensions.');
+         }
 
-      img.onload = function () {
+         let scaleFactor = Math.max(pxWidth / svgWidth, pxHeight / svgHeight);
 
-         // downscale image if it must be smaller than the current SVG element
-         if (specialScale < 1) {
-            img.width = img.width * specialScale;
-            img.height = img.height * specialScale;
+         // this is needed if SVG image is larger than the future PNG image
+         let specialScale = 1;
+         if (scaleFactor < 1) {
+            specialScale = scaleFactor;
+            scaleFactor = 1;
          }
 
-         context.drawImage(img, 0, 0, canvas.width, canvas.height);
-
-         // create a data URL for the canvas and adjust its DPI
-         const dataURL = canvas.toDataURL('image/png');
-         const dataURL2 = changeDPI(dataURL, res);
+         // create a new canvas element
+         const canvas = document.createElement('canvas');
+         const context = canvas.getContext('2d');
 
-         // create a temporary link and trigger the download
-         const downloadLink = document.createElement('a');
-         downloadLink.href = dataURL2;
-         downloadLink.download = `${fileName}.png`;
-         downloadLink.click();
-      };
+         if (!context) {
+            throw new Error('A 2D canvas context is not available.');
+         }
 
-      // set the image source
-      img.src = url;
+         // set the canvas size to match the SVG element
+         canvas.width =  svgWidth * (specialScale < 1 ? specialScale : scaleFactor);
+         canvas.height = svgHeight * (specialScale < 1 ? specialScale : scaleFactor);
+
+         // clone the SVG and set export dimensions without changing the live plot
+         const exportSvg = svg.cloneNode(true);
+         exportSvg.setAttribute('width', svgWidth * scaleFactor);
+         exportSvg.setAttribute('height', svgHeight * scaleFactor);
+
+         // draw a white background
+         context.fillStyle = 'white';
+         context.fillRect(0, 0, canvas.width, canvas.height);
+         context.scale(scaleFactor, scaleFactor)
+
+         // draw the SVG onto the canvas
+         const svgXml = new XMLSerializer().serializeToString(exportSvg);
+         const blob = new Blob([svgXml], { type: 'image/svg+xml;charset=utf-8' });
+         url = URL.createObjectURL(blob);
+
+         // notify caller that serialization is done (used by ExportDialog to restore container)
+         notifyCaller();
+
+         const img = new Image();
+
+         img.onload = function () {
+            try {
+
+               // downscale image if it must be smaller than the current SVG element
+               if (specialScale < 1) {
+                  img.width = img.width * specialScale;
+                  img.height = img.height * specialScale;
+               }
+
+               context.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+               // create a data URL for the canvas and adjust its DPI
+               const dataURL = canvas.toDataURL('image/png');
+               const dataURL2 = changeDPI(dataURL, res);
+
+               // create a temporary link and trigger the download
+               const downloadLink = document.createElement('a');
+               downloadLink.href = dataURL2;
+               downloadLink.download = `${fileName}.png`;
+               downloadLink.click();
+            } finally {
+               URL.revokeObjectURL(url);
+               url = null;
+            }
+         };
+
+         img.onerror = function (error) {
+            URL.revokeObjectURL(url);
+            url = null;
+            console.error('Failed to load the SVG for PNG export.', error);
+         };
+
+         // set the image source
+         img.src = url;
+      } catch (error) {
+         if (url !== null) URL.revokeObjectURL(url);
+         notifyCaller();
+         console.error('Failed to prepare the SVG for PNG export.', error);
+      }
    }, 20);
 }
 
@@ -718,26 +809,19 @@ export function downloadSVG(svg, fileName) {
    const svgHeight = svg.clientHeight;
    const svgWidth = svg.clientWidth;
 
-   // save original attributes
-   const origWidth = svg.getAttribute('width');
-   const origHeight = svg.getAttribute('height');
-   const origViewBox = svg.getAttribute('viewBox');
-
-   svg.setAttribute('width', svgWidth + 'px');
-   svg.setAttribute('height', svgHeight + 'px');
-   svg.setAttribute('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
+   // clone the SVG and set export dimensions without changing the live plot
+   const exportSvg = svg.cloneNode(true);
+   exportSvg.setAttribute('width', svgWidth + 'px');
+   exportSvg.setAttribute('height', svgHeight + 'px');
+   exportSvg.setAttribute('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
 
-   const blob = new Blob([svg.outerHTML], { type: 'image/svg+xml' });
+   const blob = new Blob([exportSvg.outerHTML], { type: 'image/svg+xml' });
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.setAttribute('href', url)
    a.setAttribute('download', `${fileName}.svg`);
    a.click()
-
-   // restore original attributes
-   origWidth ? svg.setAttribute('width', origWidth) : svg.removeAttribute('width');
-   origHeight ? svg.setAttribute('height', origHeight) : svg.removeAttribute('height');
-   origViewBox ? svg.setAttribute('viewBox', origViewBox) : svg.removeAttribute('viewBox');
+   setTimeout(() => window.URL.revokeObjectURL(url), 0);
 }
 
 /**
@@ -752,36 +836,43 @@ export function copyToClipboard(btn, svg, width, height) {
    // save button conent
    const content = btn.textContent;
 
-   navigator.clipboard.write([
-      new ClipboardItem({ 'image/png': createPngBlob(svg, width, height) })
-   ])
-   .then(
-      () => {
-         // add class "copied" for visual confirmation
-         btn.classList.add('copied');
-         btn.textContent = '✓ done';
-
-         // Remove the class after 0.5 seconds and revert the text
-         setTimeout(() => {
-            btn.classList.remove('copied');
-            btn.textContent = content;
-         }, 500);
-      },
-      (e) => {
-         console.error(e)
-
-         // add class "error" for visual confirmation
-         btn.classList.add('error');
-         btn.textContent = 'x copy';
-
-         // Remove the class after 0.5 seconds and revert the text
-         setTimeout(() => {
-            btn.classList.remove('error');
-            btn.textContent = content;
-         }, 500);
-      }
-   )
-   .catch((error) => console.error(error));
+   function showStatus(className, text) {
+      btn.classList.add(className);
+      btn.textContent = text;
+
+      // Remove the class after 0.5 seconds and revert the text
+      setTimeout(() => {
+         btn.classList.remove(className);
+         btn.textContent = content;
+      }, 500);
+   }
+
+   function showError(error) {
+      console.error(error);
+      showStatus('error', 'x copy');
+   }
+
+   if (typeof navigator === 'undefined' ||
+       !navigator.clipboard ||
+       typeof navigator.clipboard.write !== 'function' ||
+       typeof ClipboardItem === 'undefined') {
+      showError(new Error('Copying images to the clipboard is not supported in this environment.'));
+      return null;
+   }
+
+   try {
+      navigator.clipboard.write([
+         new ClipboardItem({ 'image/png': createPngBlob(svg, width, height) })
+      ])
+      .then(
+         () => showStatus('copied', '✓ done'),
+         showError
+      )
+      .catch(showError);
+   } catch (error) {
+      showError(error);
+      return null;
+   }
 
 }
 
@@ -813,16 +904,11 @@ export async function createPngBlob(svg, width, height) {
    // scale the context
    context.scale(scaleFactor, scaleFactor)
 
-   // save and set corresponding attributes for SVG element
-   const origWidth = svg.getAttribute('width');
-   const origHeight = svg.getAttribute('height');
-   svg.setAttribute('width', canvas.width);
-   svg.setAttribute('height', canvas.height);
-
-   // serialize SVG with export dimensions, then restore original attributes
-   const svgData = new XMLSerializer().serializeToString(svg);
-   origWidth ? svg.setAttribute('width', origWidth) : svg.removeAttribute('width');
-   origHeight ? svg.setAttribute('height', origHeight) : svg.removeAttribute('height');
+   // clone and serialize the SVG with export dimensions without changing the live plot
+   const exportSvg = svg.cloneNode(true);
+   exportSvg.setAttribute('width', canvas.width);
+   exportSvg.setAttribute('height', canvas.height);
+   const svgData = new XMLSerializer().serializeToString(exportSvg);
 
    // create promise
    const promise = new Promise((resolve, reject) => {
@@ -852,6 +938,7 @@ export async function createPngBlob(svg, width, height) {
 
       // add error callback
       img.onerror = function (err) {
+         DOMURL.revokeObjectURL(url);
          reject(err);
       };
 
@@ -864,6 +951,66 @@ export async function createPngBlob(svg, width, height) {
 }
 
 
+let colmaps = null;
+
+
+function getColmaps() {
+   if (!colmaps) {
+      colmaps = [
+         ["#2679B2"],
+         ["#2679B2", "#D22C2F"],
+         ["#2679B2", "#92B42A", "#D22C2F"],
+         ["#2679B2", "#2E9658", "#F2B825", "#D22C2F"],
+         ["#2679B2", "#22988A", "#92B42A", "#F79426", "#D22C2F"],
+         ["#2679B2", "#1C9AA8", "#379531", "#EED524", "#FB7F28", "#D22C2F"],
+         ["#2679B2", "#1D94A9", "#2E9658", "#92B42A", "#F2B825", "#F47129", "#D22C2F"],
+         ["#2679B2", "#1E90AA", "#279775", "#519E2F", "#D3CB25", "#F5A326", "#EF672A", "#D22C2F"],
+         ["#2679B2", "#1F8DAB", "#22988A", "#33953F", "#92B42A", "#EFCA24", "#F79426", "#EB5F2A", "#D22C2F"],
+         ["#2679B2", "#208BAC", "#1E999A", "#2E9658", "#5FA32E", "#C5C626", "#F2B825", "#F98827", "#E85A2B", "#D22C2F"],
+         ["#2679B2", "#2089AD", "#1C9AA8", "#29976C", "#379531", "#92B42A", "#EED524", "#F4AA26", "#FB7F28", "#E6552B", "#D22C2F"],
+         ["#2679B2", "#2188AD", "#1C97A8", "#25987C", "#329546", "#68A62D", "#BCC327", "#F0C524", "#F69E26", "#F77728", "#E4512B", "#D22C2F"],
+         ["#2679B2", "#2186AD", "#1D94A9", "#22988A", "#2E9658", "#469A2F", "#92B42A", "#DECF25", "#F2B825", "#F79426", "#F47129", "#E34E2C", "#D22C2F"],
+         ["#2679B2", "#2285AE", "#1E92AA", "#209995", "#2A9767", "#34953A", "#6FA82D", "#B5C128", "#EFCE24", "#F3AD25", "#F98C27", "#F16B29", "#E14B2C", "#D22C2F"],
+         ["#2679B2", "#2284AE", "#1E90AA", "#1D999F", "#279775", "#31964A", "#519E2F", "#92B42A", "#D3CB25", "#F0C224", "#F5A326", "#FA8527", "#EF672A", "#E0492C", "#D22C2F"],
+         ["#2679B2", "#2283AE", "#1F8FAB", "#1C9AA8", "#249880", "#2E9658", "#379531", "#73AA2C", "#B0BF28", "#EDD424", "#F2B825", "#F69B26", "#FB7F28", "#ED632A", "#DF472C", "#D22C2F"]
+      ];
+   }
+
+   return colmaps;
+}
+
+
+function interpolateColor(start, end, amount) {
+   const channels = [1, 3, 5].map(offset => {
+      const from = parseInt(start.slice(offset, offset + 2), 16);
+      const to = parseInt(end.slice(offset, offset + 2), 16);
+
+      return Math.round(from + (to - from) * amount)
+         .toString(16)
+         .padStart(2, '0');
+   });
+
+   return `#${channels.join('')}`.toUpperCase();
+}
+
+
+function expandColmap(colors, length) {
+   const last = colors.length - 1;
+
+   return Array.from({length}, (_, index) => {
+      const position = index * last / (length - 1);
+      const start = Math.floor(position);
+      const end = Math.min(start + 1, last);
+
+      return interpolateColor(
+         colors[start],
+         colors[end],
+         position - start
+      );
+   });
+}
+
+
 /**
  * Returns an array with 'n' colors.
  *
@@ -874,27 +1021,14 @@ export async function createPngBlob(svg, width, height) {
  *
  */
 export function getcolmap(n, alpha) {
-   if (n > 16) n = 16;
-   const colmap = [
-      ["#2679B2"],
-      ["#2679B2", "#D22C2F"],
-      ["#2679B2", "#92B42A", "#D22C2F"],
-      ["#2679B2", "#2E9658", "#F2B825", "#D22C2F"],
-      ["#2679B2", "#22988A", "#92B42A", "#F79426", "#D22C2F"],
-      ["#2679B2", "#1C9AA8", "#379531", "#EED524", "#FB7F28", "#D22C2F"],
-      ["#2679B2", "#1D94A9", "#2E9658", "#92B42A", "#F2B825", "#F47129", "#D22C2F"],
-      ["#2679B2", "#1E90AA", "#279775", "#519E2F", "#D3CB25", "#F5A326", "#EF672A", "#D22C2F"],
-      ["#2679B2", "#1F8DAB", "#22988A", "#33953F", "#92B42A", "#EFCA24", "#F79426", "#EB5F2A", "#D22C2F"],
-      ["#2679B2", "#208BAC", "#1E999A", "#2E9658", "#5FA32E", "#C5C626", "#F2B825", "#F98827", "#E85A2B", "#D22C2F"],
-      ["#2679B2", "#2089AD", "#1C9AA8", "#29976C", "#379531", "#92B42A", "#EED524", "#F4AA26", "#FB7F28", "#E6552B", "#D22C2F"],
-      ["#2679B2", "#2188AD", "#1C97A8", "#25987C", "#329546", "#68A62D", "#BCC327", "#F0C524", "#F69E26", "#F77728", "#E4512B", "#D22C2F"],
-      ["#2679B2", "#2186AD", "#1D94A9", "#22988A", "#2E9658", "#469A2F", "#92B42A", "#DECF25", "#F2B825", "#F79426", "#F47129", "#E34E2C", "#D22C2F"],
-      ["#2679B2", "#2285AE", "#1E92AA", "#209995", "#2A9767", "#34953A", "#6FA82D", "#B5C128", "#EFCE24", "#F3AD25", "#F98C27", "#F16B29", "#E14B2C", "#D22C2F"],
-      ["#2679B2", "#2284AE", "#1E90AA", "#1D999F", "#279775", "#31964A", "#519E2F", "#92B42A", "#D3CB25", "#F0C224", "#F5A326", "#FA8527", "#EF672A", "#E0492C", "#D22C2F"],
-      ["#2679B2", "#2283AE", "#1F8FAB", "#1C9AA8", "#249880", "#2E9658", "#379531", "#73AA2C", "#B0BF28", "#EDD424", "#F2B825", "#F69B26", "#FB7F28", "#ED632A", "#DF472C", "#D22C2F"]
-   ]
+   const palettes = getColmaps();
+   const colors = n <= 16
+      ? palettes[n - 1]?.slice()
+      : expandColmap(palettes[15], n);
+
+   if (!colors) return colors;
 
-   return alpha ? colmap[n - 1].map(v => v + alpha) : colmap[n - 1];
+   return alpha ? colors.map(v => v + alpha) : colors;
 }
 
 
@@ -917,7 +1051,7 @@ export function getXAxisParams(limX, limY, scales, tY, axis) {
    let tickFactor = 0;
 
    // compute x-coordinates of the ticks or take the ones manually specified by user
-   const ticksX = getAxisTicks(ticks, limX, XTICK_NUM[scales.x], true, axis.whole);
+   const ticksX = getAxisTicks(ticks, limX, XTICK_NUM[scales.x], false, axis.whole);
    const tickNum = ticksX.length;
 
    // compute tick y-coordinates (up and bottom)
@@ -1001,7 +1135,7 @@ export function getYAxisParams(limX, limY, scales, tX, axis) {
    let tickFactor = 0;
 
    // compute x-coordinates of the ticks or take the ones manually specified by user
-   const ticksY = getAxisTicks(axis.ticks, limY, YTICK_NUM[scales.y], true, axis.whole);
+   const ticksY = getAxisTicks(axis.ticks, limY, YTICK_NUM[scales.y], false, axis.whole);
    const tickNum = ticksY.length;
 
    // compute tick y-coordinates (up and bottom)
@@ -1175,11 +1309,16 @@ export function handleClick(e, tagName, onclickCallback) {
  *
  * @return {number} size of element in pixels
  */
+let textMeasureContext = null;
+
 export function getTextWidth(text, font) {
-   const element = document.createElement('canvas');
-   const context = element.getContext('2d');
-   context.font = font;
-   return context.measureText(text.replace(/<(.|\n)*?>/g, '')).width;
+   if (!textMeasureContext) {
+      const canvas = document.createElement('canvas');
+      textMeasureContext = canvas.getContext('2d');
+   }
+
+   textMeasureContext.font = font;
+   return textMeasureContext.measureText(text.replace(/<(.|\n)*?>/g, '')).width;
 }
 
 
@@ -1188,12 +1327,11 @@ export function getTextWidth(text, font) {
  *
  * @param {Array} items - array of legend items and their properties.
  * @param {number} fontSize - font size of a legend element in pixels.
- * @param {string} position - position of the legend.
+ * @param {string} orientation - arrangement of legend items.
  *
- * @return {Array} array with height and width of graphical part of legend item, padding size,
- * height and width of text labels (all in pixels).
+ * @return {Object} coordinates and sizes of legend items (all in pixels).
  */
-function getLegendSize(items, fontSize)  {
+function getLegendSize(items, fontSize, orientation = 'vertical')  {
 
    // TODO: implement dynamic font family
    const fontName = 'Arial';
@@ -1203,25 +1341,49 @@ function getLegendSize(items, fontSize)  {
    const elw = fontSize * 1.5;  // width of legend element without label and padding
 
    // compute size of text label elements
-   // TODO: implement one row legend if position is "top" or "bottom"
+   const elx = Array(items.length);
    const elh = Array(items.length);
    const ely = Array(items.length);
-   let y = 0;
+   const eliw = Array(items.length);
    let lgh = 0;
+   let lgw = 0;
+
+   if (orientation === 'horizontal') {
+      for (let i = 0; i < items.length; i++) {
+         const labelWidth = getTextWidth('  ' + items[i].label + '  ', fontSize + 'px ' + fontName);
+         const itemWidth = elw + 2 * elp + labelWidth;
+         const itemHeight = fontSize * items[i].labelHeight + 2 * elp;
+
+         elx[i] = lgw;
+         ely[i] = 0;
+         eliw[i] = itemWidth;
+         elh[i] = itemHeight;
+         lgw = lgw + itemWidth;
+         lgh = itemHeight > lgh ? itemHeight : lgh;
+      }
+
+      // Use one common row height so all item centers are aligned.
+      elh.fill(lgh);
+      return {elx, ely, eliw, elh, elw, elp, lgh, lgw};
+   }
+
+   let y = 0;
    let lbw = 0;
 
    for (let i = 0; i < items.length; i++) {
       const w = getTextWidth('  ' + items[i].label + '  ', fontSize + 'px ' + fontName);
       lbw = w > lbw ? w : lbw;
       const h = fontSize * items[i].labelHeight + 2 * elp;
+      elx[i] = 0;
       elh[i] = h;
       ely[i] = y;
       y = y + h;
       lgh = lgh + h;
    }
 
-   const lgw = (elw + 2 * elp + lbw);
-   return [ely, elh, elw, elp, lgh, lgw];
+   lgw = (elw + 2 * elp + lbw);
+   eliw.fill(lgw);
+   return {elx, ely, eliw, elh, elw, elp, lgh, lgw};
 }
 
 
@@ -1236,7 +1398,11 @@ function getLegendSize(items, fontSize)  {
 export function getGroupLegendCoords(params, cpx, cpy, fontSize, ts) {
 
    // compute size of legend elements
-   const [ely, elh, elw, elp, lgh, lgw] = getLegendSize(params.items, fontSize * params.fontSize);
+   const {elx, ely, eliw, elh, elw, elp, lgh, lgw} = getLegendSize(
+      params.items,
+      fontSize * params.fontSize,
+      params.orientation
+   );
 
    // compute coordinates of top left corner of the legend box
    const lgl = params.position.includes("left") ? cpx[0] + ts :
@@ -1248,7 +1414,7 @@ export function getGroupLegendCoords(params, cpx, cpy, fontSize, ts) {
          (cpy[1] + cpy[0] - lgh) * 0.5;
 
 
-   return {lgl, lgt, lgw, lgh, ely, elh, elw, elp};
+   return {lgl, lgt, lgw, lgh, elx, ely, eliw, elh, elw, elp};
 }
 
 
@@ -1262,11 +1428,11 @@ export function text2svg(text) {
    if (!text || text.length < 1) return text;
 
    function toSuper(txt) {
-      return '<tspan font-size="0.75em" dy="-0.5em">' + txt + '</tspan><tspan dy="0.4em"> </tspan>';
+      return '<tspan font-size="0.6em" dominant-baseline="inherit" baseline-shift="30%">' + txt + '</tspan>';
    }
 
    function toSub(txt) {
-      return '<tspan font-size="0.75em" dy="0.5em">' + txt + '</tspan><tspan dy="-0.4em"> </tspan>';
+      return '<tspan font-size="0.6em" dominant-baseline="inherit" baseline-shift="-50%">' + txt + '</tspan>';
    }
 
    let i = 0;
@@ -1351,7 +1517,7 @@ export function getXAxisCoords3D(xaxis, limX, limY, limZ, scale) {
    const dX = (limX[1] - limX[0]) / 100; // 1% of axis size
    const dY = (limY[1] - limY[0]) / 100; // 1% of axis size
    const dZ = (limZ[1] - limZ[0]) / 100; // 1% of axis size
-   const ticksX = getAxisTicks(xaxis.ticks, limX, TICK_NUM[scale], true);
+   const ticksX = getAxisTicks(xaxis.ticks, limX, TICK_NUM[scale], false);
    const tickNum = ticksX.length;
 
    const [ticksY, ticksY1, ticksY2, ticksY3] = getLatentTicks(limY, tickNum);
@@ -1414,7 +1580,7 @@ export function getYAxisCoords3D(yaxis, limX, limY, limZ, scale) {
    const dX = (limX[1] - limX[0]) / 100; // 1% of axis size
    const dY = (limY[1] - limY[0]) / 100; // 1% of axis size
    const dZ = (limZ[1] - limZ[0]) / 100; // 1% of axis size
-   const ticksY = getAxisTicks(yaxis.ticks, limY, TICK_NUM[scale], true);
+   const ticksY = getAxisTicks(yaxis.ticks, limY, TICK_NUM[scale], false);
    const tickNum = ticksY.length;
 
    const [ticksX, ticksX1, ticksX2, ticksX3] = getLatentTicks(limX, tickNum);
@@ -1477,7 +1643,7 @@ export function getZAxisCoords3D(zaxis, limX, limY, limZ, scale) {
    const dX = (limX[1] - limX[0]) / 100; // 1% of axis size
    const dY = (limY[1] - limY[0]) / 100; // 1% of axis size
    const dZ = (limZ[1] - limZ[0]) / 100; // 1% of axis size
-   const ticksZ = getAxisTicks(zaxis.ticks, limZ, TICK_NUM[scale], true);
+   const ticksZ = getAxisTicks(zaxis.ticks, limZ, TICK_NUM[scale], false);
    const tickNum = ticksZ.length;
 
    const [ticksY, ticksY1, ticksY2, ticksY3] = getLatentTicks(limY, tickNum);
@@ -1523,4 +1689,4 @@ export function getZAxisCoords3D(zaxis, limX, limY, limZ, scale) {
    ];
 
    return {grid1, grid2, axisLine, tickCoords, titleCoords, tickLabels};
-}
+}