/**
 * @class Ext.chart.axis.Axis
 * @extend Ext.Base
 * @xtype axis
 *
 * Defines axis for charts.
 *
 * Using the current model, the type of axis can be easily extended. By default, Sencha Charts provide three different
 * types of axis:
 *
 *  * **numeric** - the data attached to this axis is numeric and continuous.
 *  * **time** - the data attached to this axis is (or gets converted into) a date/time value; it is continuous.
 *  * **category** - the data attached to this axis belongs to a finite set. The data points are evenly placed along the axis.
 *
 * The behavior of an axis can be easily changed by setting different types of axis layout and axis segmenter to the axis.
 *
 * Axis layout defines how the data points are placed. Using continuous layout, the data points will be distributed by
 * the numeric value. Using discrete layout the data points will be spaced evenly. Furthermore, if you want to combine
 * the data points with the duplicate values in a discrete layout, you should use combineDuplicate layout.
 *
 * Segmenter defines the way to segment data range. For example, if you have a Date-type data range from Jan 1, 1997 to
 * Jan 1, 2017, the segmenter will segment the data range into years, months or days based on the current zooming
 * level.
 *
 * It is possible to write custom axis layouts and segmenters to extends this behavior by simply implementing interfaces
 * {@link Ext.chart.axis.layout.Layout} and {@link Ext.chart.axis.segmenter.Segmenter}.
 *
 * Here's an example for the axes part of a chart definition:
 * An example of axis for a series (in this case for an area chart that has multiple layers of yFields) could be:
 *
 *     axes: [{
 *         type: 'numeric',
 *         position: 'left',
 *         title: 'Number of Hits',
 *         grid: {
 *             odd: {
 *                 opacity: 1,
 *                 fill: '#ddd',
 *                 stroke: '#bbb',
 *                 lineWidth: 1
 *             }
 *         },
 *         minimum: 0
 *     }, {
 *         type: 'category',
 *         position: 'bottom',
 *         title: 'Month of the Year',
 *         grid: true,
 *         label: {
 *             rotate: {
 *                 degrees: 315
 *             }
 *         }
 *     }]
 *
 * In this case we use a `numeric` axis for displaying the values of the Area series and a `category` axis for displaying the names of
 * the store elements. The numeric axis is placed on the left of the screen, while the category axis is placed at the bottom of the chart.
 * Both the category and numeric axes have `grid` set, which means that horizontal and vertical lines will cover the chart background. In the
 * category axis the labels will be rotated so they can fit the space better.
 */
 
/**
 * @event rangechange
 * Fires when the {@link Ext.chart.axis.Axis#range range} of the axis  changes.
 * @param {Ext.chart.axis.Axis} axis
 * @param {Array} range 
 * @param {Array} oldRange 
 */
 
/**
 * @event visiblerangechange
 * Fires when the {@link #visibleRange} of the axis changes.
 * @param {Ext.chart.axis.Axis} axis
 * @param {Array} visibleRange 
 */
 
/**
 * @cfg {String} [position='bottom']
 * Where to set the axis. Available options are `left`, `bottom`, `right`, `top`,
 * `radial` and `angular`.
 * @accessor
 */
 
/**
 * @cfg {Array} [fields=[]]
 * An array containing the names of the record fields which should be mapped along the axis.
 * This is optional if the binding between series and fields is clear.
 * @accessor
 */
 
/**
 * @cfg {Object} [label=undefined]
 *
 * The label configuration object for the Axis. This object may include style attributes
 * like `spacing`, `padding`, `font` that receives a string or number and
 * returns a new string with the modified values.
 *
 * For more supported values, see the configurations for {@link Ext.chart.sprite.Label}.
 * @accessor
 */
 
/**
 * @cfg {Object} [grid=false]
 * The grid configuration object for the Axis style. Can contain `stroke` or `fill` attributes.
 * Also may contain an `odd` or `even` property in which you only style things on odd or even rows.
 * For example:
 *
 *
 *     grid {
 *         odd: {
 *             stroke: '#555'
 *         },
 *         even: {
 *             stroke: '#ccc'
 *         }
 *     }
 *
 * @accessor
 */
 
/**
 * @cfg {Array|Object} [limits=null]
 * The limit lines configuration for the axis.
 * For example:
 *
 *     limits: [{
 *         value: 50,
 *         line: {
 *             strokeStyle: 'red',
 *             lineDash: [6, 3],
 *             title: {
 *                 text: 'Monthly minimum',
 *                 fontSize: 14
 *             }
 *         }
 *     }]
 *
 * @accessor
 */
 
/**
 * @cfg {Function} [renderer=null]
 * Allows to change the text shown next to the tick.
 * @param {Ext.chart.axis.Axis} axis The axis.
 * @param {String/Number} label The label.
 * @param {Object} layoutContext The object that holds calculated positions
 * of axis' ticks based on current layout, segmenter, axis length and configuration.
 * @param {String/Number/null} lastLabel The last label (if any).
 * @return {String} The label to display.
 *
 * @accessor
 */
 
/**
 * @cfg {Object} [style=null]
 * The style for the axis line and ticks.
 * Refer to the {@link Ext.chart.axis.sprite.Axis}
 * @accessor
 */
 
/**
 * @cfg {Number} [margin=0]
 * The margin of the axis. Used to control the spacing between axes in charts with multiple axes.
 * Unlike CSS where the margin is added on all 4 sides of an element, the `margin` is the total space
 * that is added horizontally for a vertical axis, vertically for a horizontal axis,
 * and radially for an angular axis.
 * @accessor
 */
 
/**
 * @cfg {Number} [titleMargin=4]
 * The margin around the axis title. Unlike CSS where the margin is added on all 4
 * sides of an element, the `titleMargin` is the total space that is added horizontally
 * for a vertical title and vertically for an horizontal title, with half the `titleMargin`
 * being added on either side.
 * @accessor
 */
 
/**
 * @cfg {Object} [background=null]
 * The background config for the axis surface.
 * @accessor
 */
 
/**
 * @cfg {Number} [minimum=NaN]
 * The minimum value drawn by the axis. If not set explicitly, the axis
 * minimum will be calculated automatically.
 * @accessor
 */
 
/**
 * @cfg {Number} [maximum=NaN]
 * The maximum value drawn by the axis. If not set explicitly, the axis
 * maximum will be calculated automatically.
 * @accessor
 */
 
/**
 * @cfg {Boolean} [reconcileRange=false]
 * If 'true' the range of the axis will be a union of ranges
 * of all the axes with the same direction. Defaults to 'false'.
 * @accessor
 */
 
/**
 * @cfg {Number} [minZoom=1]
 * The minimum zooming level for axis.
 * @accessor
 */
 
/**
 * @cfg {Number} [maxZoom=10000]
 * The maximum zooming level for axis.
 * @accessor
 */
 
/**
 * @cfg {Object|Ext.chart.axis.layout.Layout} [layout='continuous']
 * The axis layout config. See {@link Ext.chart.axis.layout.Layout}
 * @accessor
 */
 
/**
 * @cfg {Object|Ext.chart.axis.segmenter.Segmenter} [segmenter='numeric']
 * The segmenter config. See {@link Ext.chart.axis.segmenter.Segmenter}
 * @accessor
 */
 
/**
 * @cfg {Boolean} [hidden=false]
 * Indicate whether to hide the axis.
 * If the axis is hidden, one of the axis line, ticks, labels or the title will be shown and
 * no margin will be taken.
 * The coordination mechanism works fine no matter if the axis is hidden.
 * @accessor
 */
 
/**
 * @cfg {Number} [majorTickSteps=0]
 * Forces the number of major ticks to the specified value.
 * Both {@link #minimum} and {@link #maximum} should be specified.
 * @accessor
 */
 
/**
 * @cfg {Number} [minorTickSteps=0]
 * The number of small ticks between two major ticks.
 * @accessor
 */
 
/**
 * @cfg {Boolean} [adjustByMajorUnit=true]
 * Whether to make the auto-calculated minimum and maximum of the axis
 * a multiple of the interval between the major ticks of the axis.
 * If {@link #majorTickSteps}, {@link #minimum} or {@link #maximum}
 * configs have been set, this config will be ignored.
 * Defaults to 'true'.
 * @accessor
 */
 
/**
 * @cfg {String|Object} [title=null]
 * The title for the Axis.
 * If given a String, the 'text' attribute of the title sprite will be set,
 * otherwise the style will be set.
 * @accessor
 */
 
/**
 * @cfg {Number} [increment=0.5]
 * Given a minimum and maximum bound for the series to be rendered (that can be obtained
 * automatically or by manually setting `minimum` and `maximum`) tick marks will be added
 * on each `increment` from the minimum value to the maximum one.
 * @accessor
 */
 
/**
 * @cfg {Boolean} [labelInSpan=null]
 * Draws the labels in the middle of the spans.
 * @accessor
 */
 
/**
 * @cfg {Array} [visibleRange=[0, 1]]
 * Specify the proportion of the axis to be rendered. The series bound to
 * this axis will be synchronized and transformed accordingly.
 * @accessor
 */
 
/**
 * @cfg {Boolean} [needHighPrecision=false]
 * Indicates that the axis needs high precision surface implementation.
 * See {@link Ext.draw.engine.Canvas#highPrecision}
 * @accessor
 */
 
/**
 * @cfg {Ext.chart.axis.Axis|String|Number} [linkedTo=null]
 * Axis (itself, its ID or index) that this axis is linked to.
 * When an axis is linked to a master axis, it will use the same data as the master axis.
 * It can be used to show additional info, or to ease reading the chart by duplicating the scales.
 * @accessor
 */
 
/**
 * @cfg {Number|Object} [floating=null]
 * If `floating` is a number, then it's a percentage displacement of the axis from its initial {@link #position}
 * in the direction opposite to the axis' direction. For instance, '{position:"left", floating:75}' displays a vertical
 * axis at 3/4 of the chart, starting from the left. It is equivalent to '{position:"right", floating:25}'.
 * If `floating` is an object, then `floating.value` is the position of this axis along another axis,
 * defined by `floating.alongAxis`, where `alongAxis` is an ID, an {@link Ext.chart.AbstractChart#axes} config index,
 * or the other axis itself. `alongAxis` must have an opposite {@link Ext.chart.axis.Axis#getAlignment alignment}.
 * For example:
 *
 *      axes: [
 *          {
 *              title: 'Average Temperature (F)',
 *              type: 'numeric',
 *              position: 'left',
 *              id: 'temperature-vertical-axis',
 *              minimum: -30,
 *              maximum: 130
 *          },
 *          {
 *              title: 'Month (2013)',
 *              type: 'category',
 *              position: 'bottom',
 *              floating: {
 *                  value: 32,
 *                  alongAxis: 'temperature-vertical-axis'
 *              }
 *          }
 *      ]
 */