API Docs for: 3.13.0
Show:

File: charts/js/TopAxisLayout.js

  1. /**
  2.  * Contains algorithms for rendering a top axis.
  3.  *
  4.  * @class TopAxisLayout
  5.  * @constructor
  6.  * @submodule axis
  7.  */
  8. TopAxisLayout = function(){};
  9.  
  10. TopAxisLayout.prototype = {
  11.     /**
  12.      *  Default margins for text fields.
  13.      *
  14.      *  @private
  15.      *  @method _getDefaultMargins
  16.      *  @return Object
  17.      */
  18.     _getDefaultMargins: function()
  19.     {
  20.         return {
  21.             top: 0,
  22.             left: 0,
  23.             right: 0,
  24.             bottom: 4
  25.         };
  26.     },
  27.  
  28.     /**
  29.      * Sets the length of the tick on either side of the axis line.
  30.      *
  31.      * @method setTickOffsets
  32.      * @protected
  33.      */
  34.     setTickOffsets: function()
  35.     {
  36.         var host = this,
  37.             majorTicks = host.get("styles").majorTicks,
  38.             tickLength = majorTicks.length,
  39.             halfTick = tickLength * 0.5,
  40.             display = majorTicks.display;
  41.         host.set("leftTickOffset",  0);
  42.         host.set("rightTickOffset",  0);
  43.         switch(display)
  44.         {
  45.             case "inside" :
  46.                 host.set("bottomTickOffset", tickLength);
  47.                 host.set("topTickOffset", 0);
  48.             break;
  49.             case "outside" :
  50.                 host.set("bottomTickOffset", 0);
  51.                 host.set("topTickOffset",  tickLength);
  52.             break;
  53.             case "cross" :
  54.                 host.set("topTickOffset", halfTick);
  55.                 host.set("bottomTickOffset", halfTick);
  56.             break;
  57.             default:
  58.                 host.set("topTickOffset", 0);
  59.                 host.set("bottomTickOffset", 0);
  60.             break;
  61.         }
  62.     },
  63.  
  64.     /**
  65.      * Calculates the coordinates for the first point on an axis.
  66.      *
  67.      * @method getLineStart
  68.      * @protected
  69.      */
  70.     getLineStart: function()
  71.     {
  72.         var host = this,
  73.             style = host.get("styles"),
  74.             padding = style.padding,
  75.             majorTicks = style.majorTicks,
  76.             tickLength = majorTicks.length,
  77.             display = majorTicks.display,
  78.             pt = {x:0, y:padding.top};
  79.         if(display === "outside")
  80.         {
  81.             pt.y += tickLength;
  82.         }
  83.         else if(display === "cross")
  84.         {
  85.             pt.y += tickLength/2;
  86.         }
  87.         return pt;
  88.     },
  89.  
  90.     /**
  91.      * Draws a tick
  92.      *
  93.      * @method drawTick
  94.      * @param {Path} path reference to the path `Path` element in which to draw the tick.
  95.      * @param {Object} pt hash containing x and y coordinates
  96.      * @param {Object} tickStyles hash of properties used to draw the tick
  97.      * @protected
  98.      */
  99.     drawTick: function(path, pt, tickStyles)
  100.     {
  101.         var host = this,
  102.             style = host.get("styles"),
  103.             padding = style.padding,
  104.             tickLength = tickStyles.length,
  105.             start = {x:pt.x, y:padding.top},
  106.             end = {x:pt.x, y:tickLength + padding.top};
  107.         host.drawLine(path, start, end);
  108.     },
  109.  
  110.     /**
  111.      * Calculates the point for a label.
  112.      *
  113.      * @method getLabelPoint
  114.      * @param {Object} pt hash containing x and y coordinates
  115.      * @return Object
  116.      * @protected
  117.      */
  118.     getLabelPoint: function(pt)
  119.     {
  120.         return {x:pt.x, y:pt.y - this.get("topTickOffset")};
  121.     },
  122.  
  123.     /**
  124.      * Updates the value for the `maxLabelSize` for use in calculating total size.
  125.      *
  126.      * @method updateMaxLabelSize
  127.      * @param {HTMLElement} label to measure
  128.      * @protected
  129.      */
  130.     updateMaxLabelSize: function(labelWidth, labelHeight)
  131.     {
  132.         var host = this,
  133.             props = this._labelRotationProps,
  134.             rot = props.rot,
  135.             absRot = props.absRot,
  136.             sinRadians = props.sinRadians,
  137.             cosRadians = props.cosRadians,
  138.             max;
  139.         if(rot === 0)
  140.         {
  141.             max = labelHeight;
  142.         }
  143.         else if(absRot === 90)
  144.         {
  145.             max = labelWidth;
  146.         }
  147.         else
  148.         {
  149.             max = (sinRadians * labelWidth) + (cosRadians * labelHeight);
  150.         }
  151.         host._maxLabelSize = Math.max(host._maxLabelSize, max);
  152.     },
  153.  
  154.     /**
  155.      * Determines the available label height when the axis width has been explicitly set.
  156.      *
  157.      * @method getExplicitlySized
  158.      * @return Boolean
  159.      * @protected
  160.      */
  161.     getExplicitlySized: function(styles)
  162.     {
  163.         if(this._explicitHeight)
  164.         {
  165.             var host = this,
  166.                 h = host._explicitHeight,
  167.                 totalTitleSize = host._totalTitleSize,
  168.                 topTickOffset = host.get("topTickOffset"),
  169.                 margin = styles.label.margin.right;
  170.             host._maxLabelSize =  h - (topTickOffset + margin + totalTitleSize);
  171.             return true;
  172.         }
  173.         return false;
  174.     },
  175.  
  176.     /**
  177.      * Rotate and position title.
  178.      *
  179.      * @method positionTitle
  180.      * @param {HTMLElement} label to rotate position
  181.      * @protected
  182.      */
  183.     positionTitle: function(label)
  184.     {
  185.         var host = this,
  186.             bounds = host._titleBounds,
  187.             margin = host.get("styles").title.margin,
  188.             props = host._titleRotationProps,
  189.             labelWidth = label.offsetWidth,
  190.             labelHeight = label.offsetHeight,
  191.             h = bounds.bottom - bounds.top,
  192.             x = (host.get("width") * 0.5) - (labelWidth * 0.5),
  193.             y = h/2 - labelHeight/2;
  194.         props.labelWidth = labelWidth;
  195.         props.labelHeight = labelHeight;
  196.         if(margin && margin.top)
  197.         {
  198.             y += margin.top;
  199.         }
  200.         props.x = x;
  201.         props.y = y;
  202.         props.transformOrigin = [0.5, 0.5];
  203.         host._rotate(label, props);
  204.     },
  205.  
  206.     /**
  207.      * Rotate and position labels.
  208.      *
  209.      * @method positionLabel
  210.      * @param {HTMLElement} label to rotate position
  211.      * @param {Object} pt hash containing the x and y coordinates in which the label will be positioned
  212.      * against.
  213.      * @protected
  214.      */
  215.     positionLabel: function(label, pt, styles, i)
  216.     {
  217.         var host = this,
  218.             totalTitleSize = this._totalTitleSize,
  219.             maxLabelSize = host._maxLabelSize,
  220.             leftOffset = pt.x,
  221.             topOffset = pt.y + totalTitleSize + maxLabelSize,
  222.             props = this._labelRotationProps,
  223.             rot = props.rot,
  224.             absRot = props.absRot,
  225.             labelWidth = this._labelWidths[i],
  226.             labelHeight = this._labelHeights[i];
  227.         if(rot === 0)
  228.         {
  229.             leftOffset -= labelWidth * 0.5;
  230.             topOffset -= labelHeight;
  231.         }
  232.         else
  233.         {
  234.             if(rot === 90)
  235.             {
  236.                 leftOffset -= labelWidth;
  237.                 topOffset -= (labelHeight * 0.5);
  238.             }
  239.             else if (rot === -90)
  240.             {
  241.                 topOffset -= (labelHeight * 0.5);
  242.             }
  243.             else if(rot > 0)
  244.             {
  245.                 leftOffset -= labelWidth;
  246.                 topOffset -= labelHeight - (labelHeight * rot/180);
  247.             }
  248.             else
  249.             {
  250.                 topOffset -= labelHeight - (labelHeight * absRot/180);
  251.             }
  252.         }
  253.         props.x = Math.round(leftOffset);
  254.         props.y = Math.round(topOffset);
  255.         props.labelWidth = labelWidth;
  256.         props.labelHeight = labelHeight;
  257.         this._rotate(label, props);
  258.     },
  259.  
  260.     /**
  261.      * Adjusts the coordinates of an axis label based on the rotation.
  262.      *
  263.      * @method _setRotationCoords
  264.      * @param {Object} props Coordinates, dimension and rotation properties of the label.
  265.      * @protected
  266.      */
  267.     _setRotationCoords: function(props)
  268.     {
  269.         var rot = props.rot,
  270.             absRot = props.absRot,
  271.             labelWidth = props.labelWidth,
  272.             labelHeight = props.labelHeight,
  273.             leftOffset,
  274.             topOffset;
  275.         if(rot === 0)
  276.         {
  277.             leftOffset = labelWidth * 0.5;
  278.             topOffset = labelHeight;
  279.         }
  280.         else
  281.         {
  282.             if(rot === 90)
  283.             {
  284.                 leftOffset = labelWidth;
  285.                 topOffset = (labelHeight * 0.5);
  286.             }
  287.             else if (rot === -90)
  288.             {
  289.                 topOffset = (labelHeight * 0.5);
  290.             }
  291.             else if(rot > 0)
  292.             {
  293.                 leftOffset = labelWidth;
  294.                 topOffset = labelHeight - (labelHeight * rot/180);
  295.             }
  296.             else
  297.             {
  298.                 topOffset = labelHeight - (labelHeight * absRot/180);
  299.             }
  300.         }
  301.         props.x -= leftOffset;
  302.         props.y -= topOffset;
  303.     },
  304.  
  305.     /**
  306.      * Returns the transformOrigin to use for an axis label based on the position of the axis
  307.      * and the rotation of the label.
  308.      *
  309.      * @method _getTransformOrigin
  310.      * @param {Number} rot The rotation (in degrees) of the label.
  311.      * @return Array
  312.      * @protected
  313.      */
  314.     _getTransformOrigin: function(rot)
  315.     {
  316.         var transformOrigin;
  317.         if(rot === 0)
  318.         {
  319.             transformOrigin = [0, 0];
  320.         }
  321.         else
  322.         {
  323.             if(rot === 90)
  324.             {
  325.                 transformOrigin = [1, 0.5];
  326.             }
  327.             else if (rot === -90)
  328.             {
  329.                 transformOrigin = [0, 0.5];
  330.             }
  331.             else if(rot > 0)
  332.             {
  333.                 transformOrigin = [1, 0.5];
  334.             }
  335.             else
  336.             {
  337.                 transformOrigin = [0, 0.5];
  338.             }
  339.         }
  340.         return transformOrigin;
  341.     },
  342.  
  343.     /**
  344.      * Adjusts position for inner ticks.
  345.      *
  346.      * @method offsetNodeForTick
  347.      * @param {Node} cb contentBox of the axis
  348.      * @protected
  349.      */
  350.     offsetNodeForTick: function()
  351.     {
  352.     },
  353.  
  354.     /**
  355.      * Assigns a height based on the size of the contents.
  356.      *
  357.      * @method setCalculatedSize
  358.      * @protected
  359.      */
  360.     setCalculatedSize: function()
  361.     {
  362.         var host = this,
  363.             graphic = host.get("graphic"),
  364.             styles = host.get("styles"),
  365.             labelMargin = styles.label.margin,
  366.             totalLabelSize = labelMargin.bottom + host._maxLabelSize,
  367.             totalTitleSize = host._totalTitleSize,
  368.             topTickOffset = this.get("topTickOffset"),
  369.             ttl = Math.round(topTickOffset + totalLabelSize + totalTitleSize);
  370.         if(this._explicitHeight)
  371.         {
  372.            ttl = this._explicitHeight;
  373.         }
  374.         host.set("calculatedHeight", ttl);
  375.         graphic.set("y", ttl - topTickOffset);
  376.     }
  377. };
  378. Y.TopAxisLayout = TopAxisLayout;
  379.  
  380.  
  381.