Source: thermodynamicDiagram/Axis.js

  1. /**
  2.  * @module meteoJS/thermodynamicDiagram/axis
  3.  */
  4. import {
  5.   getNormalizedTextOptions
  6. } from './Functions.js';
  7. import PlotArea from './PlotArea.js';
  9. /**
  10.  * Definitions for the labels of an axis.
  11.  * 
  12.  * @typedef {module:meteoJS/thermodynamicDiagram~textOptions}
  13.  *   module:meteoJS/thermodynamicDiagram/axis~labelsOptions
  14.  * @property {number} [interval] - Interval between the labels.
  15.  * @property {string} [unit] - Unit of the label values.
  16.  * @property {string} [prefix=''] - Prefix of the label text.
  17.  * @property {integer} [decimalPlaces=0]
  18.  *   Number of digits to appear after the decimal point of the label values.
  19.  */
  21. /**
  22.  * Title definition for an axis.
  23.  * 
  24.  * @typedef {module:meteoJS/thermodynamicDiagram~textOptions}
  25.  *   module:meteoJS/thermodynamicDiagram/axis~titleOptions
  26.  * @property {string} [text=''] - Title text.
  27.  */
  29. /**
  30.  * Options for the constructor.
  31.  * 
  32.  * @typedef {module:meteoJS/thermodynamicDiagram/plotArea~options}
  33.  *   module:meteoJS/thermodynamicDiagram/axis~options
  34.  * @property {module:meteoJS/thermodynamicDiagram/axis~labelsOptions} labels
  35.  *   Options for the yAxis Labels.
  36.  * @property {module:meteoJS/thermodynamicDiagram/axis~titleOptions} title
  37.  *   Options for the title of the Axis.
  38.  * @property {boolean} [isHorizontal=true]
  39.  *   Internal. Is the axis horizontal or vertical.
  40.  */
  42. /**
  43.  * Abstract class to draw an axis with labelling.
  44.  * 
  45.  * @extends module:meteoJS/thermodynamicDiagram/plotArea.PlotArea
  46.  * @abstract
  47.  */
  48. export class Axis extends PlotArea {
  50.   /**
  51.    * @param {module:meteoJS/thermodynamicDiagram/axis~options} options
  52.    *   Options.
  53.    */
  54.   constructor({
  55.     svgNode = undefined,
  56.     coordinateSystem,
  57.     x,
  58.     y,
  59.     width,
  60.     height,
  61.     style = {},
  62.     visible = true,
  63.     events = {},
  64.     labels = {},
  65.     title = {},
  66.     isHorizontal = true
  67.   }) {
  68.     if (style.overflow === undefined)
  69.       style.overflow = 'visible';
  70.     
  71.     super({
  72.       svgNode,
  73.       coordinateSystem,
  74.       x,
  75.       y,
  76.       width,
  77.       height,
  78.       style,
  79.       visible,
  80.       events
  81.     });
  82.     
  83.     /**
  84.      * @type Object
  85.      * @private
  86.      */
  87.     this._labelsOptions = this.getNormalizedLabelsOptions(labels);
  88.     
  89.     /**
  90.      * @type Object
  91.      * @private
  92.      */
  93.     this._titleOptions = getNormalizedTitleOptions(title);
  95.     /**
  96.      * @type boolean
  97.      * @private
  98.      */
  99.     this._isHorizontal = isHorizontal;
  100.     
  101.     this.init();
  102.   }
  104.   /**
  105.    * Normalize the options for the labels.
  106.    * 
  107.    * @param {module:meteoJS/thermodynamicDiagram/axis~labelsOptions}
  108.    *   options - Options.
  109.    * @returns {module:meteoJS/thermodynamicDiagram/axis~labelsOptions}
  110.    *   Normalized options.
  111.    */
  112.   getNormalizedLabelsOptions({
  113.     interval = undefined,
  114.     unit = '',
  115.     prefix = '',
  116.     decimalPlaces = 0,
  117.     ...rest
  118.   }) {
  119.     const options = getNormalizedTextOptions({ ...rest }, {
  120.       font: {
  121.         size: 11,
  122.         anchor: 'middle'
  123.       }
  124.     });
  125.     options.interval = interval;
  126.     options.unit = unit;
  127.     options.prefix = prefix;
  128.     options.decimalPlaces = decimalPlaces;
  129.     return options;
  130.   }
  132.   /**
  133.    * Draws the labels of the axis.
  134.    * 
  135.    * @param {external:SVG} svgNode - Node to draw into.
  136.    * @param {number} min - Minimum value for the labels.
  137.    * @param {number} max - Maximum value for the labels.
  138.    * @param {Function} getTextByInterval
  139.    *   Returns the text representation of the label value (its argument).
  140.    * @param {Function} getPositionByInterval
  141.    *   Returns the position in pixels of the label value (its argument).
  142.    * @internal
  143.    */
  144.   drawLabels({
  145.     svgNode,
  146.     min,
  147.     max,
  148.     getTextByInterval =
  149.     i => Number.parseFloat(i).toFixed(this._labelsOptions.decimalPlaces),
  150.     getPositionByInterval
  151.   }) {
  152.     for (let i=min; i<=max; i+=this._labelsOptions.interval) {
  153.       let text = getTextByInterval(i);
  154.       text += this._labelsOptions.prefix;
  155.       let fontColor = undefined;
  156.       const font = {...this._labelsOptions.font};
  157.       if ('color' in font) {
  158.         fontColor = font.color;
  159.         delete font.color;
  160.       }
  161.       if (!this._isHorizontal)
  162.         font['anchor'] = 'end';
  163.       const textNode = svgNode
  164.         .plain(text)
  165.         .font(font);
  166.       if (this._isHorizontal) {
  167.         textNode.center(
  168.           getPositionByInterval(i),
  169.           font.size
  170.         );
  171.         if (font['anchor'] == 'end')
  172.           textNode.dx(-textNode.bbox().width/2);
  173.         else if (font['anchor'] == 'start')
  174.           textNode.dx(+textNode.bbox().width/2);
  175.       }
  176.       else
  177.         textNode
  178.           .x(this.width)
  179.           .cy(getPositionByInterval(i))
  180.           .dx(-textNode.bbox().width);
  181.       if (fontColor !== undefined)
  182.         textNode.fill(fontColor);
  183.     }
  184.   }
  186.   /**
  187.    * Draws a title for the axis.
  188.    * 
  189.    * @param {Object} options - Options.
  190.    * @param {external:SVG} svgNode - Node to insert into.
  191.    * @param {external:SVG} svgLabelsNode - Node of the axis labels.
  192.    * @private
  193.    */
  194.   _drawTitle({
  195.     svgNode,
  196.     svgLabelsNode
  197.   }) {
  198.     let rotation = 0;
  199.     if (!this._isHorizontal)
  200.       rotation = -90;
  201.     let margin = 0;
  202.     if (svgLabelsNode !== undefined)
  203.       margin = (rotation == -90)
  204.         ? svgLabelsNode.bbox().width
  205.         : svgLabelsNode.bbox().height;
  206.     
  207.     let fontColor = undefined;
  208.     const font = {...this._titleOptions.font};
  209.     if ('color' in font) {
  210.       fontColor = font.color;
  211.       delete font.color;
  212.     }
  213.     let cxText = this.width/2;
  214.     let cyText = font.size + margin;
  215.     if (rotation == -90) {
  216.       cxText = this.width - font.size - margin;
  217.       cyText = this.height/2;
  218.     }
  219.     const textNode = svgNode
  220.       .plain(this._titleOptions.text)
  221.       .font(font)
  222.       .center(cxText, cyText)
  223.       .rotate(rotation);
  224.     if (fontColor !== undefined)
  225.       textNode.fill(fontColor);
  226.     if (rotation == -90) {
  227.       if (font['anchor'] == 'end')
  228.         textNode.dy(-textNode.bbox().height/2);
  229.       else if (font['anchor'] == 'start')
  230.         textNode.dy(+textNode.bbox().height/2);
  231.     }
  232.     else {
  233.       if (font['anchor'] == 'end')
  234.         textNode.dx(-textNode.bbox().width/2);
  235.       else if (font['anchor'] == 'start')
  236.         textNode.dx(+textNode.bbox().width/2);
  237.     }
  238.   }
  239.   
  240.   /**
  241.    * Draw background into SVG group.
  242.    * 
  243.    * @override
  244.    */
  245.   _drawBackground(svgNode) {
  246.     super._drawBackground(svgNode);
  247.     
  248.     let svgLabelsGroup = undefined;
  249.     if (this._labelsOptions.visible) {
  250.       svgLabelsGroup = svgNode.group();
  251.       this.drawLabels({
  252.         svgNode: svgLabelsGroup
  253.       });
  254.     }
  255.     
  256.     if (this._titleOptions.visible)
  257.       this._drawTitle({
  258.         svgNode: svgNode.group(),
  259.         svgLabelsNode: svgLabelsGroup
  260.       });
  261.   }
  262.   
  263. }
  264. export default Axis;
  266. /**
  267.  * Normalize the options for the title.
  268.  * 
  269.  * @param {module:meteoJS/thermodynamicDiagram/axis~titleOptions}
  270.  *   options - Options.
  271.  * @returns {module:meteoJS/thermodynamicDiagram/axis~titleOptions}
  272.  *   Normalized options.
  273.  */
  274. function getNormalizedTitleOptions({
  275.   text = '',
  276.   ...rest
  277. }) {
  278.   const options = getNormalizedTextOptions({...rest}, {
  279.     font: {
  280.       anchor: 'middle'
  281.     }
  282.   });
  283.   options.text = text;
  284.   return options;
  285. }