svelte-plots-basic 2.5.7 → 3.0.0

package/src/3d/ZAxis.svelte

@@ -1,123 +1,46 @@
+<!--
+@component Adds z-axis with ticks, label, etc.
+
+   Main properties:
+   - `label` - text label for the axis (optional).
+   - `showGrid` - logical, show or not vertical grid lines, default: `false`.
+   - `ticks` - array or vector with tick positions (by default will be generated automatically based on `limX`).
+   - `tickLabels` - array with tick labels to show at each tick (by default will be generated automatically).
+   - `lineColor` - color of axis line, default: `Colors.DARKGRAY`.
+   - `gridColor` - color of axis grid line, default: `Colors.MIDDLEGRAY`.
+   - `textColor` - color of axis text labels, default: `Colors.DARKGRAY`.
+
+   Example:
+   ```jsx
+   <script>
+      import {Axes, ZAxis} from 'svelte-plots-basic/3d';
+   </script>
+   <Axes>
+      // all other plotting components are here
+      <ZAxis label="Z" showGrid={true} />
+   </Axes>
+   ```
+-->
 <script>
-   /****************************************************
-   * Z-Axis for 3D plots                               *
-   * --------------------                              *
-   * shows z-axis and its elements (ticks, grid, etc.) *
-   *****************************************************/
-
-   import { cbind, matrix, Vector } from 'mdatools/arrays';
    import { getContext } from 'svelte';
-   import { Colors } from '../Colors';
-   import { getAxisTicks } from '../Utils.js';
-   import Axis from './Axis.svelte';
-
-
-   /*****************************************/
-   /* Input parameters                      */
-   /*****************************************/
-
-   export let slot = 'zaxis';         // slot the component must be placed in
-   export let ticks = undefined;      // vector with numeric tick positions in plot units
-   export let tickLabels = ticks;     // vector with labels for each tick
-   export let showGrid = false;       // logical, show or not grid lines
-   export let title = '';             // axis title
-
-   export let lineColor = Colors.DARKGRAY;
-   export let gridColor = Colors.MIDDLEGRAY;
-   export let textColor = Colors.DARKGRAY;
+   import { Colors } from '../constants';
 
+   let {
+      ticks,                           // vector with numeric tick positions in plot units
+      tickLabels = ticks,              // vector with labels for each tick
+      showGrid = false,                // logical, show or not grid lines
+      label = '',                      // axis title
+      lineColor = Colors.DARKGRAY,
+      gridColor = Colors.MIDDLEGRAY,
+      textColor = Colors.DARKGRAY,
+   } = $props();
 
-   /*****************************************/
-   /* Component code                        */
-   /*****************************************/
 
-   if (slot !== 'zaxis') {
-      throw('Component ZAxis must have "slot=\'zaxis\'" attribute.');
-   }
-
-   // get axes context
+   // get axes context and adjust x margins
    const axes = getContext('axes');
-
-   // get reactive variables needed to compute coordinates
-   const xLim = axes.xLim;
-   const yLim = axes.yLim;
-   const zLim = axes.zLim;
-   const scale = axes.scale;
-   const isOk = axes.isOk;
-
-   // prepare variables for coordinates
-   let titleCoords = [];
-   let grid1 = [];
-   let grid2 = [];
-   let axisLine = [];
-   let tickCoords = [];
-
-   // compute tick x-coordinates
-   if ($isOk) {
-      const dZ = ($zLim[1] - $zLim[0]) / 100; // 1% of axis size
-      const ticksZ = getAxisTicks(ticks, $zLim, axes.TICK_NUM[$scale], true);
-      const tickNum = ticksZ.length;
-
-      // compute tick x-coordinates (middle, up and bottom)
-      const dX = ($xLim[1] - $xLim[0]) / 100; // 1% of axis size
-      const ticksX  = Vector.fill($xLim[0], tickNum);
-      const ticksX1 = ticksX.subtract(dX * 1.5);
-      const ticksX2 = ticksX.add(dX * 1.5);
-      const ticksX3 = ticksX.subtract(dX * 1);
-
-      // tick y-coordinates
-      const dY = ($yLim[1] - $yLim[0]) / 100; // 1% of axis size
-      const ticksY  = Vector.fill($yLim[0], tickNum);
-      const ticksY1 = ticksY.subtract(dY * 1.5);
-      const ticksY2 = ticksY.add(dY * 1.5);
-      const ticksY3 = ticksY.subtract(dY * 5);
-
-      // coordinates for the ends of grid
-      const gridXEnd = Vector.fill($xLim[1], tickNum);
-      const gridYEnd = Vector.fill($yLim[1], tickNum);
-
-      // tick labels
-      tickLabels = (ticks === undefined || tickLabels === undefined) ? ticksZ.v : tickLabels;
-      if (tickLabels.length !== ticksZ.length) {
-         throw Error('ZAxis: "tickLabels" must be a array of the same size as ticks.');
-      }
-
-      // combine all coordinates together
-      grid1 = [
-         cbind(ticksX, ticksY, ticksZ),
-         cbind(gridXEnd, ticksY, ticksZ)
-      ];
-
-      grid2 = [
-         cbind(ticksX, ticksY, ticksZ),
-         cbind(ticksX, gridYEnd, ticksZ)
-      ];
-
-      axisLine = [
-         matrix([$xLim[0], $yLim[0], $zLim[0]], 1, 3),
-         matrix([$xLim[0], $yLim[0], $zLim[1]], 1, 3)
-      ]
-
-      tickCoords = [
-         cbind(ticksX, ticksY, ticksZ),   // middle point
-         cbind(ticksX2, ticksY, ticksZ),  // middle point with positive shift along X
-         cbind(ticksX, ticksY2, ticksZ),  // middle point with positive shift along Y
-         cbind(ticksX1, ticksY1, ticksZ), // middle point with negative shift along X and Y
-         cbind(ticksX3, ticksY3, ticksZ)  // middle point with negative shift along X and Y for ticks
-      ];
-
-      // here we do not need to make a matrix as the three values will be used as vectors
-      titleCoords = [
-         [$xLim[0] - 2 * dX], [$yLim[0] - 2 * dY], [$zLim[1] + 3 * dZ]
-      ];
-   }
+   $effect(() => {
+      axes.setZAxis({show: true, ticks, tickLabels, showGrid, label, lineColor, gridColor, textColor});
+   });
 </script>
 
-{#if $isOk && axisLine.length > 0}
-<Axis
-   className="mdaplot__zaxis"
-   {title} {lineColor} {gridColor} {textColor} {titleCoords}
-   {showGrid} {grid1} {grid2} {axisLine} {tickCoords} {tickLabels}
-/>
-{/if}
 

package/src/3d/index.js

@@ -10,4 +10,5 @@ export { default as Lines } from './Lines.svelte';
 export { default as Mesh } from './Mesh.svelte';
 export { default as Points } from './Points.svelte';
 
-export { getcolmap, Colors } from '../Colors.js';
+export { getcolmap } from '../methods.js';
+export { Colors } from '../constants.js';

package/src/constants.js

@@ -0,0 +1,103 @@
+// how big are margins (number of pixels in unit margin value) between axis and plot area if axis are shown
+export const AXES_MARGIN_FACTORS = {
+   'small': 30,
+   'medium': 40,
+   'large': 50,
+   'xlarge': 60
+}
+
+// number of x-ticks along each axis
+export const XTICK_NUM = {
+   'small': 5,
+   'medium': 8,
+   'large': 12,
+   'xlarge': 15
+};
+
+// number of y-ticks along each axis
+export const YTICK_NUM = {
+   'small': 6,
+   'medium': 10,
+   'large': 14,
+   'xlarge': 18
+};
+
+// size of ticks
+export const TICK_SIZE = {
+   'small': 4,
+   'medium': 6,
+   'large': 8,
+   'xlarge': 10
+};
+
+// font size for plot element
+export const LEGEND_FONT_SIZE = {
+   "small": 11,
+   "medium": 14,
+   "large": 16,
+   "xlarge": 18
+};
+
+// font size for legend items in pixels
+export const PLOT_FONT_SIZE = {
+   "small": 12,
+   "medium": 15,
+   "large": 19,
+   "xlarge": 21
+};
+
+// margin between plot series elements and data labels
+export const LABELS_MARGIN = {
+   'small': 11,
+   'medium': 15,
+   'large': 17,
+   'xlarge': 19
+};
+
+// line styles for different scales and types
+export const LINE_STYLES = {
+   small: ['0', '3,3', '1,1', '3,1,1,1'],
+   medium: ['0', '5,5', '2,2', '5,2,2,2'],
+   large: ['0', '7,7', '3,3', '7,3,2,3'],
+   xlarge: ['0', '9,9', '4,4', '9,3,3,3'],
+}
+
+// marker symbols
+export const MARKER_SYMBOLS = ["●", "◼", "▲", "▼", "⬥", "＋", "✳", "✕"];
+
+// colormap legend parameters
+export const COLMAP_WIDTH_RATIO = 0.80;    // legend will span 80% of plot width
+export const COLMAP_TOP_MARGIN = 0.50;     // legend top margin is 25% of its height
+
+// height of the legend elements in pixels
+export const COLMAP_EL_HEIGHTS_PX = {'small': 5, 'medium': 8, 'large': 12, 'xlarge': 15};
+
+// number of bins to split matrix values into in heatmap
+export const HEATMAP_NUM_SPLITS = 12;
+
+export const Colors = {
+   "WHITE":     "#fff",
+   "BLACK":     "#000",
+   "GRAY":      "#909090",
+   "MIDDLEGRAY": "#dadada",
+   "LIGHTGRAY": "#f0f0f0",
+   "DARKGRAY":  "#606060",
+   "LEGEND": "#303030",
+
+   "PRIMARY": "#2679B2",
+   "PRIMARY_LIGHT": "#d2ebff",
+   "PRIMARY_TEXT": "#333",
+
+   "AXIS_LINE": "#303030",
+   "AXIS_TICK": "#606060",
+   "CLEGEND_LABELS": "#606060"
+}
+
+
+// number of ticks along each axis for 3D plots
+export const TICK_NUM = {
+   "small": 5,
+   "medium": 8,
+   "large": 12,
+   "xlarge": 15
+};