/**
 * @class Ext.chart.axis.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 segement 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.
 */
Ext.define('Ext.chart.axis.Axis', {
    xtype: 'axis',
 
    mixins: {
        observable: 'Ext.mixin.Observable'
    },
 
    requires: [
        'Ext.chart.axis.sprite.Axis',
        'Ext.chart.axis.segmenter.*',
        'Ext.chart.axis.layout.*',
        'Ext.chart.Util'
    ],
 
    isAxis: true,
 
    /**
     * @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} id
     * The **unique** id of this axis instance.
     */
 
    config: {
        /**
         * @cfg {String} position
         * Where to set the axis. Available options are `left`, `bottom`, `right`, `top`, `radial`,
         * and `angular`.
         */
        position: 'bottom',
 
        /**
         * @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.
         */
        fields: [],
 
        /**
         * @cfg {Object} label
         *
         * 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}.
         */
        label: undefined,
 
        /**
         * @cfg {Object} grid
         * 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'
         *         }
         *     }
         */
        grid: false,
 
        /**
         * @cfg {Array|Object} limits
         * The limit lines configuration for the axis.
         * For example:
         *
         *     limits: [{
         *         value: 50,
         *         line: {
         *             strokeStyle: 'red',
         *             lineDash: [6, 3],
         *             title: {
         *                 text: 'Monthly minimum',
         *                 fontSize: 14
         *             }
         *         }
         *     }]
         */
        limits: null,
 
        /**
         * @cfg {Function} renderer 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.
         * @controllable
         */
        renderer: null,
 
        /**
         * @protected
         * @cfg {Ext.chart.AbstractChart} chart The Chart that the Axis is bound.
         */
        chart: null,
 
        /**
         * @cfg {Object} style
         * The style for the axis line and ticks.
         * Refer to the {@link Ext.chart.axis.sprite.Axis}
         */
        style: null,
 
        /**
         * @cfg {Number} margin
         * 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.
         */
        margin: 0,
 
        /**
         * @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.
         */
        titleMargin: 4,
 
        /**
         * @cfg {Object} background
         * The background config for the axis surface.
         */
        background: null,
 
        /**
         * @cfg {Number} minimum
         * The minimum value drawn by the axis. If not set explicitly, the axis
         * minimum will be calculated automatically.
         */
        minimum: NaN,
 
        /**
         * @cfg {Number} maximum
         * The maximum value drawn by the axis. If not set explicitly, the axis
         * maximum will be calculated automatically.
         */
        maximum: NaN,
 
        /**
         * @cfg {Boolean} reconcileRange
         * If 'true' the range of the axis will be a union of ranges
         * of all the axes with the same direction. Defaults to 'false'.
         */
        reconcileRange: false,
 
        /**
         * @cfg {Number} minZoom
         * The minimum zooming level for axis.
         */
        minZoom: 1,
 
        /**
         * @cfg {Number} maxZoom
         * The maximum zooming level for axis.
         */
        maxZoom: 10000,
 
        /**
         * @cfg {Object|Ext.chart.axis.layout.Layout} layout
         * The axis layout config. See {@link Ext.chart.axis.layout.Layout}
         */
        layout: 'continuous',
 
        /**
         * @cfg {Object|Ext.chart.axis.segmenter.Segmenter} segmenter
         * The segmenter config. See {@link Ext.chart.axis.segmenter.Segmenter}
         */
        segmenter: 'numeric',
 
        /**
         * @cfg {Boolean} hidden
         * 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.
         */
        hidden: false,
 
        /**
         * @cfg {Number} [majorTickSteps=0]
         * Forces the number of major ticks to the specified value.
         * Both {@link #minimum} and {@link #maximum} should be specified.
         */
        majorTickSteps: 0,
 
        /**
         * @cfg {Number} [minorTickSteps=0]
         * The number of small ticks between two major ticks.
         */
        minorTickSteps: 0,
 
        /**
         * @cfg {Boolean} adjustByMajorUnit
         * 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'.
         * Note: this config has no effect if the axis is {@link #hidden}.
         */
        adjustByMajorUnit: true,
 
        /**
         * @cfg {String|Object} title
         * 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.
         */
        title: null,
 
        /**
         * @private
         * @cfg {Number} [expandRangeBy=0]
         */
        expandRangeBy: 0,
 
        /**
         * @private
         * @cfg {Number} length
         * Length of the axis position. Equals to the size of inner rect on the docking side
         * of this axis.
         * WARNING: Meant to be set automatically by chart. Do not set it manually.
         */
        length: 0,
 
        /**
         * @private
         * @cfg {Array} center
         * Center of the polar axis.
         * WARNING: Meant to be set automatically by chart. Do not set it manually.
         */
        center: null,
 
        /**
         * @private
         * @cfg {Number} radius
         * Radius of the polar axis.
         * WARNING: Meant to be set automatically by chart. Do not set it manually.
         */
        radius: null,
 
        /**
         * @private
         */
        totalAngle: Math.PI,
 
        /**
         * @private
         * @cfg {Number} rotation
         * Rotation of the polar axis in radians.
         * WARNING: Meant to be set automatically by chart. Do not set it manually.
         */
        rotation: null,
 
        /**
         * @cfg {Array} visibleRange
         * Specify the proportion of the axis to be rendered. The series bound to
         * this axis will be synchronized and transformed accordingly.
         */
        visibleRange: [0, 1],
 
        /**
         * @cfg {Boolean} needHighPrecision
         * Indicates that the axis needs high precision surface implementation.
         * See {@link Ext.draw.engine.Canvas#highPrecision}
         */
        needHighPrecision: false,
 
        /**
         * @cfg {Ext.chart.axis.Axis|String|Number} linkedTo
         * 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.
         */
        linkedTo: null,
 
        /**
         * @cfg {Number|Object} 
         * 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'
         *              }
         *          }
         *      ]
         */
        floating: null
    },
 
    titleOffset: 0,
 
    spriteAnimationCount: 0,
 
    boundSeries: [],
 
    sprites: null,
 
    surface: null,
 
    /**
     * @private
     * @property {Array} range
     * The full data range of the axis. Should not be set directly, Clear it to `null`
     * and use `getRange` to update.
     */
    range: null,
 
    defaultRange: [0, 1],
    rangePadding: 0.5,
 
    xValues: [],
 
    yValues: [],
 
    masterAxis: null,
 
    applyRotation: function(rotation) {
        var twoPie = Math.PI * 2;
 
        return (rotation % twoPie + Math.PI) % twoPie - Math.PI;
    },
 
    updateRotation: function(rotation) {
        var sprites = this.getSprites(),
            position = this.getPosition();
 
        if (!this.getHidden() && position === 'angular' && sprites[0]) {
            sprites[0].setAttributes({
                baseRotation: rotation
            });
        }
    },
 
    applyTitle: function(title, oldTitle) {
        var surface;
 
        if (Ext.isString(title)) {
            title = { text: title };
        }
 
        if (!oldTitle) {
            oldTitle = Ext.create('sprite.text', title);
 
            if ((surface = this.getSurface())) {
                surface.add(oldTitle);
            }
        }
        else {
            oldTitle.setAttributes(title);
        }
 
        return oldTitle;
    },
 
    getAdjustByMajorUnit: function() {
        return !this.getHidden() && this.callParent();
    },
 
    applyFloating: function(floating, oldFloating) {
        if (floating === null) {
            floating = {
                value: null,
                alongAxis: null
            };
        }
        else if (Ext.isNumber(floating)) {
            floating = {
                value: floating,
                alongAxis: null
            };
        }
 
        if (Ext.isObject(floating)) {
            if (oldFloating && oldFloating.alongAxis) {
                delete this.getChart().getAxis(oldFloating.alongAxis).floatingAxes[this.getId()];
            }
 
            return floating;
        }
 
        return oldFloating;
    },
 
    constructor: function(config) {
        var me = this,
            id;
 
        me.sprites = [];
        me.labels = [];
        // Maps IDs of the axes that float along this axis to their floating values.
        me.floatingAxes = {};
 
        config = config || {};
 
        if (config.position === 'angular') {
            config.style = config.style || {};
            config.style.estStepSize = 1;
        }
 
        if ('id' in config) {
            id = config.id;
        }
        else if ('id' in me.config) {
            id = me.config.id;
        }
        else {
            id = me.getId();
        }
 
        me.setId(id);
 
        me.mixins.observable.constructor.apply(me, arguments);
    },
 
    /**
     * @private
     * @return {String} 
     */
    getAlignment: function() {
        switch (this.getPosition()) {
            case 'left':
            case 'right':
                return 'vertical';
 
            case 'top':
            case 'bottom':
                return 'horizontal';
 
            case 'radial':
                return 'radial';
 
            case 'angular':
                return 'angular';
        }
    },
 
    /**
     * @private
     * @return {String} 
     */
    getGridAlignment: function() {
        switch (this.getPosition()) {
            case 'left':
            case 'right':
                return 'horizontal';
 
            case 'top':
            case 'bottom':
                return 'vertical';
 
            case 'radial':
                return 'circular';
 
            case 'angular':
                return 'radial';
        }
    },
 
    /**
     * @private
     * Get the surface for drawing the series sprites
     */
    getSurface: function() {
        var me = this,
            chart = me.getChart(),
            surface, gridSurface;
 
        if (chart && !me.surface) {
            surface = me.surface = chart.getSurface(me.getId(), 'axis');
            gridSurface = me.gridSurface = chart.getSurface('main');
 
            gridSurface.waitFor(surface);
            me.getGrid();
 
            me.createLimits();
        }
 
        return me.surface;
    },
 
    createLimits: function() {
        var me = this,
            chart = me.getChart(),
            axisSprite = me.getSprites()[0],
            gridAlignment = me.getGridAlignment(),
            limits;
 
        if (me.getLimits() && gridAlignment) {
            gridAlignment = gridAlignment.replace('3d', '');
            me.limits = limits = {
                surface: chart.getSurface('overlay'),
                lines: new Ext.chart.Markers(),
                titles: new Ext.draw.sprite.Instancing()
            };
            limits.lines.setTemplate({ xclass: 'grid.' + gridAlignment });
            limits.lines.getTemplate().setAttributes({ strokeStyle: 'black' }, true);
            limits.surface.add(limits.lines);
            axisSprite.bindMarker(gridAlignment + '-limit-lines', me.limits.lines);
 
            me.limitTitleTpl = new Ext.draw.sprite.Text();
            limits.titles.setTemplate(me.limitTitleTpl);
            limits.surface.add(limits.titles);
        }
    },
 
    applyGrid: function(grid) {
        // Returning an empty object here if grid was set to 'true' so that
        // config merging in the theme works properly.
        if (grid === true) {
            return {};
        }
 
        return grid;
    },
 
    updateGrid: function(grid) {
        var me = this,
            chart = me.getChart(),
            gridSurface = me.gridSurface,
            axisSprite, gridAlignment, gridSprite;
 
        if (!chart) {
            me.on({
                chartattached: Ext.bind(me.updateGrid, me, [grid]),
                single: true
            });
 
            return;
        }
 
        axisSprite = me.getSprites()[0];
        gridAlignment = me.getGridAlignment();
 
        if (grid) {
            gridSprite = me.gridSpriteEven;
 
            if (!gridSprite) {
                gridSprite = me.gridSpriteEven = new Ext.chart.Markers();
                gridSprite.setTemplate({ xclass: 'grid.' + gridAlignment });
                gridSurface.add(gridSprite);
                axisSprite.bindMarker(gridAlignment + '-even', gridSprite);
            }
 
            if (Ext.isObject(grid)) {
                gridSprite.getTemplate().setAttributes(grid);
 
                if (Ext.isObject(grid.even)) {
                    gridSprite.getTemplate().setAttributes(grid.even);
                }
            }
 
            gridSprite = me.gridSpriteOdd;
 
            if (!gridSprite) {
                gridSprite = me.gridSpriteOdd = new Ext.chart.Markers();
                gridSprite.setTemplate({ xclass: 'grid.' + gridAlignment });
                gridSurface.add(gridSprite);
                axisSprite.bindMarker(gridAlignment + '-odd', gridSprite);
            }
 
            if (Ext.isObject(grid)) {
                gridSprite.getTemplate().setAttributes(grid);
 
                if (Ext.isObject(grid.odd)) {
                    gridSprite.getTemplate().setAttributes(grid.odd);
                }
            }
        }
    },
 
    updateMinorTickSteps: function(minorTickSteps) {
        var me = this,
            sprites = me.getSprites(),
            axisSprite = sprites && sprites[0],
            surface;
 
        if (axisSprite) {
            axisSprite.setAttributes({
                minorTicks: !!minorTickSteps
            });
            surface = me.getSurface();
 
            if (!me.isConfiguring && surface) {
                surface.renderFrame();
            }
        }
    },
 
    /**
     *
     * Mapping data value into coordinate.
     *
     * @param {*} value 
     * @param {String} field 
     * @param {Number} [idx] 
     * @param {Ext.util.MixedCollection} [items] 
     * @return {Number} 
     */
    getCoordFor: function(value, field, idx, items) {
        return this.getLayout().getCoordFor(value, field, idx, items);
    },
 
    applyPosition: function(pos) {
        return pos.toLowerCase();
    },
 
    applyLength: function(length, oldLength) {
        return length > 0 ? length : oldLength;
    },
 
    applyLabel: function(label, oldLabel) {
        if (!oldLabel) {
            oldLabel = new Ext.draw.sprite.Text({});
        }
 
        if (label) {
            if (this.limitTitleTpl) {
                this.limitTitleTpl.setAttributes(label);
            }
 
            oldLabel.setAttributes(label);
        }
 
        return oldLabel;
    },
 
    applyLayout: function(layout, oldLayout) {
        layout = Ext.factory(layout, null, oldLayout, 'axisLayout');
        layout.setAxis(this);
 
        return layout;
    },
 
    applySegmenter: function(segmenter, oldSegmenter) {
        segmenter = Ext.factory(segmenter, null, oldSegmenter, 'segmenter');
        segmenter.setAxis(this);
 
        return segmenter;
    },
 
    updateMinimum: function() {
        this.range = null;
    },
 
    updateMaximum: function() {
        this.range = null;
    },
 
    hideLabels: function() {
        this.getSprites()[0].setDirty(true);
        this.setLabel({ hidden: true });
    },
 
    showLabels: function() {
        this.getSprites()[0].setDirty(true);
        this.setLabel({ hidden: false });
    },
 
    /**
     * Invokes renderFrame on this axis's surface(s)
     */
    renderFrame: function() {
        this.getSurface().renderFrame();
    },
 
    updateChart: function(newChart, oldChart) {
        var me = this,
            surface;
 
        if (oldChart) {
            oldChart.unregister(me);
            oldChart.un('serieschange', me.onSeriesChange, me);
            me.linkAxis();
            me.fireEvent('chartdetached', oldChart, me);
        }
 
        if (newChart) {
            newChart.on('serieschange', me.onSeriesChange, me);
            me.surface = null;
            surface = me.getSurface();
            me.getLabel().setSurface(surface);
            surface.add(me.getSprites());
            surface.add(me.getTitle());
            newChart.register(me);
            me.fireEvent('chartattached', newChart, me);
        }
    },
 
    applyBackground: function(background) {
        var rect = Ext.ClassManager.getByAlias('sprite.rect');
 
        return rect.def.normalize(background);
    },
 
    /**
     * @protected
     * Invoked when data has changed.
     */
    processData: function() {
        this.getLayout().processData();
        this.range = null;
    },
 
    getDirection: function() {
        return this.getChart().getDirectionForAxis(this.getPosition());
    },
 
    isSide: function() {
        var position = this.getPosition();
 
        return position === 'left' || position === 'right';
    },
 
    applyFields: function(fields) {
        return Ext.Array.from(fields);
    },
 
    applyVisibleRange: function(visibleRange, oldVisibleRange) {
        var temp;
 
        this.getChart();
 
        // If it is in reversed order swap them
        if (visibleRange[0] > visibleRange[1]) {
            temp = visibleRange[0];
 
            visibleRange[0] = visibleRange[1];
            visibleRange[0] = temp;
        }
 
        if (visibleRange[1] === visibleRange[0]) {
            visibleRange[1] += 1 / this.getMaxZoom();
        }
 
        if (visibleRange[1] > visibleRange[0] + 1) {
            visibleRange[0] = 0;
            visibleRange[1] = 1;
        }
        else if (visibleRange[0] < 0) {
            visibleRange[1] -= visibleRange[0];
            visibleRange[0] = 0;
        }
        else if (visibleRange[1] > 1) {
            visibleRange[0] -= visibleRange[1] - 1;
            visibleRange[1] = 1;
        }
 
        if (oldVisibleRange && visibleRange[0] === oldVisibleRange[0] &&
            visibleRange[1] === oldVisibleRange[1]) {
            return undefined;
        }
 
        return visibleRange;
    },
 
    updateVisibleRange: function(visibleRange) {
        this.fireEvent('visiblerangechange', this, visibleRange);
    },
 
    onSeriesChange: function(chart) {
        var me = this,
            series = chart.getSeries(),
            boundSeries = [],
            linkedTo, masterAxis, getAxisMethod,
            i, ln;
 
        if (series) {
            getAxisMethod = 'get' + me.getDirection() + 'Axis';
 
            for (= 0, ln = series.length; i < ln; i++) {
                if (this === series[i][getAxisMethod]()) {
                    boundSeries.push(series[i]);
                }
            }
        }
 
        me.boundSeries = boundSeries;
 
        linkedTo = me.getLinkedTo();
        masterAxis = !Ext.isEmpty(linkedTo) && chart.getAxis(linkedTo);
 
        if (masterAxis) {
            me.linkAxis(masterAxis);
        }
        else {
            me.getLayout().processData();
        }
    },
 
    linkAxis: function(masterAxis) {
        var me = this;
 
        function link(action, slave, master) {
            master.getLayout()[action]('datachange', 'onDataChange', slave);
            master[action]('rangechange', 'onMasterAxisRangeChange', slave);
        }
 
        if (me.masterAxis) {
            if (!me.masterAxis.destroyed) {
                link('un', me, me.masterAxis);
            }
 
            me.masterAxis = null;
        }
 
        if (masterAxis) {
            if (masterAxis.type !== this.type) {
                Ext.Error.raise("Linked axes must be of the same type.");
            }
 
            link('on', me, masterAxis);
            me.onDataChange(masterAxis.getLayout().labels);
            me.onMasterAxisRangeChange(masterAxis, masterAxis.range);
            me.setStyle(Ext.apply({}, me.config.style, masterAxis.config.style));
            me.setTitle(Ext.apply({}, me.config.title, masterAxis.config.title));
            me.setLabel(Ext.apply({}, me.config.label, masterAxis.config.label));
            me.masterAxis = masterAxis;
        }
    },
 
    onDataChange: function(data) {
        this.getLayout().labels = data;
    },
 
    onMasterAxisRangeChange: function(masterAxis, range) {
        this.range = range;
    },
 
    applyRange: function(newRange) {
        if (!newRange) {
            return this.dataRange.slice(0);
        }
        else {
            return [
                newRange[0] === null ? this.dataRange[0] : newRange[0],
                newRange[1] === null ? this.dataRange[1] : newRange[1]
            ];
        }
    },
 
    /**
     * @private
     */
    setBoundSeriesRange: function(range) {
        var boundSeries = this.boundSeries,
            style = {},
            series, i,
            sprites, j,
            ln;
 
        style['range' + this.getDirection()] = range;
 
        for (= 0, ln = boundSeries.length; i < ln; i++) {
            series = boundSeries[i];
 
            if (series.getHidden() === true) {
                continue;
            }
 
            sprites = series.getSprites();
 
            for (= 0; j < sprites.length; j++) {
                sprites[j].setAttributes(style);
            }
        }
    },
 
    /**
     * Get the range derived from all the bound series.
     * The range value is cached and returned the next time this method is called.
     * Set `recalculate` to `true` to recalculate the range, if changes to the
     * chart, its components or data are expected to affect the range.
     * @param {Boolean} [recalculate] 
     * @return {Number[]} 
     */
    getRange: function(recalculate) {
        var me = this,
            range = recalculate ? null : me.range,
            oldRange = me.oldRange,
            minimum, maximum;
 
        if (!range) {
            if (me.masterAxis) {
                range = me.masterAxis.range;
            }
            else {
                minimum = me.getMinimum();
                maximum = me.getMaximum();
 
                if (Ext.isNumber(minimum) && Ext.isNumber(maximum)) {
                    range = [minimum, maximum];
                }
                else {
                    range = me.calculateRange();
                }
 
                me.range = range;
            }
        }
 
        if (range && (!oldRange || range[0] !== oldRange[0] || range[1] !== oldRange[1])) {
            me.fireEvent('rangechange', me, range, oldRange);
            me.oldRange = range;
        }
 
        return range;
    },
 
    isSingleDataPoint: function(range) {
        return (range[0] + this.rangePadding) === 0 && (range[1] - this.rangePadding) === 0;
    },
 
    calculateRange: function() {
        var me = this,
            boundSeries = me.boundSeries,
            layout = me.getLayout(),
            segmenter = me.getSegmenter(),
            minimum = me.getMinimum(),
            maximum = me.getMaximum(),
            visibleRange = me.getVisibleRange(),
            getRangeMethod = 'get' + me.getDirection() + 'Range',
            expandRangeBy = me.getExpandRangeBy(),
            context, attr, majorTicks,
            series, i, ln, seriesRange,
            range = [NaN, NaN];
 
        // For each series bound to this axis, ask the series for its min/max values
        // and use them to find the overall min/max.
        for (= 0, ln = boundSeries.length; i < ln; i++) {
            series = boundSeries[i];
 
            if (series.getHidden() === true) {
                continue;
            }
 
            seriesRange = series[getRangeMethod]();
 
            if (seriesRange) {
                Ext.chart.Util.expandRange(range, seriesRange);
            }
        }
 
        range = Ext.chart.Util.validateRange(range, me.defaultRange, me.rangePadding);
 
        // The second condition is there to account for a special case where we only have
        // a single data point, so the effective range of coordinated data is 0 (whatever
        // the actual value of that single data point is, it will be assigned an index of
        // zero, as the first and only data point). Since zero range is invalid, the
        // validateRange function above will expand the range by the value of the rangePadding,
        // which makes further expansion by the value of expandRangeBy unnecessary.
        if (expandRangeBy && (!me.isSingleDataPoint(range))) {
            range[0] -= expandRangeBy;
            range[1] += expandRangeBy;
        }
 
        if (isFinite(minimum)) {
            range[0] = minimum;
        }
 
        if (isFinite(maximum)) {
            range[1] = maximum;
        }
 
        // When series `fullStack` config is used, the values may add up to
        // slightly more than the value of the `fullStackTotal` config
        // because of a precision error.
        range[0] = Ext.Number.correctFloat(range[0]);
        range[1] = Ext.Number.correctFloat(range[1]);
 
        me.range = range;
 
        // It's important to call 'me.reconcileRange' after the 'range'
        // has been assigned to avoid circular calls.
        if (me.getReconcileRange()) {
            me.reconcileRange();
        }
 
        // TODO: Find a better way to do this.
        // TODO: The original design didn't take into account that the range of an axis
        // TODO: will depend not just on the range of the data of the bound series in the
        // TODO: direction of the axis, but also on the range of other axes with the
        // TODO: same direction and on the segmentation of the axis (interval between
        // TODO: major ticks).
        // TODO: While the fist omission was possible to retrofit rather gracefully
        // TODO: by adding the axis.reconcileRange method, the second one is harder to deal with.
        // TODO: The issue is that the resulting axis segmentation, which is a part of
        // TODO: the axis sprite layout has to be known before layout has begun.
        // TODO: Example for the logic below:
        // TODO: If we have a range of data of 0..34.5 the step will be 2 and we
        // TODO: will round up the max to 36 based on that step, but when the range is 0..36,
        // TODO: the step becomes 5, so we have to reconcile the range once again where max
        // TODO: becomes 40.
        if (range[0] !== range[1] && me.getAdjustByMajorUnit() && segmenter.adjustByMajorUnit &&
            !me.getMajorTickSteps()) {
            attr = Ext.Object.chain(me.getSprites()[0].attr);
            attr.min = range[0];
            attr.max = range[1];
            attr.visibleMin = visibleRange[0];
            attr.visibleMax = visibleRange[1];
            context = {
                attr: attr,
                segmenter: segmenter
            };
            layout.calculateLayout(context);
            majorTicks = context.majorTicks;
 
            if (majorTicks) {
                segmenter.adjustByMajorUnit(majorTicks.step, majorTicks.unit.scale, range);
 
                attr.min = range[0];
                attr.max = range[1];
                context.majorTicks = null;
                layout.calculateLayout(context);
                majorTicks = context.majorTicks;
                segmenter.adjustByMajorUnit(majorTicks.step, majorTicks.unit.scale, range);
            }
            else if (!me.hasClearRangePending) {
                // Axis hasn't been rendered yet.
                me.hasClearRangePending = true;
                me.getChart().on('layout', 'clearRange', me);
            }
        }
 
        return range;
    },
 
    /**
     * @private
     */
    clearRange: function() {
        this.hasClearRangePending = null;
        this.range = null;
    },
 
    /**
     * Expands the range of the axis
     * based on the range of other axes with the same direction (if any).
     */
    reconcileRange: function() {
        var me = this,
            axes = me.getChart().getAxes(),
            direction = me.getDirection(),
            i, ln, axis, range;
 
        if (!axes) {
            return;
        }
 
        for (= 0, ln = axes.length; i < ln; i++) {
            axis = axes[i];
            range = axis.getRange();
 
            if (axis === me || axis.getDirection() !== direction || !range ||
                !axis.getReconcileRange()) {
                continue;
            }
 
            if (range[0] < me.range[0]) {
                me.range[0] = range[0];
            }
 
            if (range[1] > me.range[1]) {
                me.range[1] = range[1];
            }
        }
    },
 
    applyStyle: function(style, oldStyle) {
        var cls = Ext.ClassManager.getByAlias('sprite.' + this.seriesType);
 
        if (cls && cls.def) {
            style = cls.def.normalize(style);
        }
 
        oldStyle = Ext.apply(oldStyle || {}, style);
 
        return oldStyle;
    },
 
    themeOnlyIfConfigured: {
        grid: true
    },
 
    updateTheme: function(theme) {
        var me = this,
            axisTheme = theme.getAxis(),
            position = me.getPosition(),
            initialConfig = me.getInitialConfig(),
            defaultConfig = me.defaultConfig,
            configs = me.self.getConfigurator().configs,
            genericAxisTheme = axisTheme.defaults,
            specificAxisTheme = axisTheme[position],
            themeOnlyIfConfigured = me.themeOnlyIfConfigured,
            key, value, isObjValue, isUnusedConfig, initialValue, cfg;
 
        axisTheme = Ext.merge({}, genericAxisTheme, specificAxisTheme);
 
        for (key in axisTheme) {
            value = axisTheme[key];
            cfg = configs[key];
 
            if (value !== null && value !== undefined && cfg) {
                initialValue = initialConfig[key];
                isObjValue = Ext.isObject(value);
                isUnusedConfig = initialValue === defaultConfig[key];
 
                if (isObjValue) {
                    if (isUnusedConfig && themeOnlyIfConfigured[key]) {
                        continue;
                    }
 
                    value = Ext.merge({}, value, initialValue);
                }
 
                if (isUnusedConfig || isObjValue) {
                    me[cfg.names.set](value);
                }
            }
        }
    },
 
    updateCenter: function(center) {
        var me = this,
            sprites = me.getSprites(),
            axisSprite = sprites[0],
            centerX = center[0],
            centerY = center[1];
 
        if (axisSprite) {
            axisSprite.setAttributes({
                centerX: centerX,
                centerY: centerY
            });
        }
 
        if (me.gridSpriteEven) {
            me.gridSpriteEven.getTemplate().setAttributes({
                translationX: centerX,
                translationY: centerY,
                rotationCenterX: centerX,
                rotationCenterY: centerY
            });
        }
 
        if (me.gridSpriteOdd) {
            me.gridSpriteOdd.getTemplate().setAttributes({
                translationX: centerX,
                translationY: centerY,
                rotationCenterX: centerX,
                rotationCenterY: centerY
            });
        }
    },
 
    getSprites: function() {
        if (!this.getChart()) {
            return;
        }
 
        // eslint-disable-next-line vars-on-top
        var me = this,
            range = me.getRange(),
            position = me.getPosition(),
            chart = me.getChart(),
            animation = chart.getAnimation(),
            length = me.getLength(),
            axisClass = me.superclass,
            mainSprite, style,
            animationModifier;
 
        // If animation is false, then stop animation.
        if (animation === false) {
            animation = {
                duration: 0
            };
        }
 
        style = Ext.applyIf({
            position: position,
            axis: me,
            length: length,
            grid: me.getGrid(),
            hidden: me.getHidden(),
            titleOffset: me.titleOffset,
            layout: me.getLayout(),
            segmenter: me.getSegmenter(),
            totalAngle: me.getTotalAngle(),
            label: me.getLabel()
        }, me.getStyle());
 
        if (range) {
            style.min = range[0];
            style.max = range[1];
        }
 
        // If the sprites are not created.
        if (!me.sprites.length) {
            while (!axisClass.xtype) {
                axisClass = axisClass.superclass;
            }
 
            mainSprite = Ext.create('sprite.' + axisClass.xtype, style);
            animationModifier = mainSprite.getAnimation();
            animationModifier.setCustomDurations({
                baseRotation: 0
            });
            animationModifier.on('animationstart', 'onAnimationStart', me);
            animationModifier.on('animationend', 'onAnimationEnd', me);
            mainSprite.setLayout(me.getLayout());
            mainSprite.setSegmenter(me.getSegmenter());
            mainSprite.setLabel(me.getLabel());
            me.sprites.push(mainSprite);
            me.updateTitleSprite();
        }
        else {
            mainSprite = me.sprites[0];
            mainSprite.setAnimation(animation);
            mainSprite.setAttributes(style);
        }
 
        if (me.getRenderer()) {
            mainSprite.setRenderer(me.getRenderer());
        }
 
        return me.sprites;
    },
 
    /**
     * @private
     */
    performLayout: function() {
        if (this.isConfiguring) {
            return;
        }
 
        // eslint-disable-next-line vars-on-top
        var me = this,
            sprites = me.getSprites(),
            surface = me.getSurface(),
            chart = me.getChart(),
            sprite = sprites && sprites[0];
 
        if (chart && surface && sprite) {
            sprite.callUpdater(null, 'layout'); // recalculate axis ticks
            chart.scheduleLayout();
        }
    },
 
    updateTitleSprite: function() {
        var me = this,
            length = me.getLength(),
            surface, thickness, title, position, margin, titleMargin, anchor;
 
        if (!me.sprites[0] || !Ext.isNumber(length)) {
            return;
        }
 
        thickness = this.sprites[0].thickness;
        surface = me.getSurface();
        title = me.getTitle();
        position = me.getPosition();
        margin = me.getMargin();
        titleMargin = me.getTitleMargin();
        anchor = surface.roundPixel(length / 2);
 
        if (title) {
            switch (position) {
                case 'top':
                    title.setAttributes({
                        x: anchor,
                        y: margin + titleMargin / 2,
                        textBaseline: 'top',
                        textAlign: 'center'
                    }, true);
 
                    title.applyTransformations();
                    me.titleOffset = title.getBBox().height + titleMargin;
 
                    break;
 
                case 'bottom':
                    title.setAttributes({
                        x: anchor,
                        y: thickness + titleMargin / 2,
                        textBaseline: 'top',
                        textAlign: 'center'
                    }, true);
 
                    title.applyTransformations();
                    me.titleOffset = title.getBBox().height + titleMargin;
 
                    break;
 
                case 'left':
                    title.setAttributes({
                        x: margin + titleMargin / 2,
                        y: anchor,
                        textBaseline: 'top',
                        textAlign: 'center',
                        rotationCenterX: margin + titleMargin / 2,
                        rotationCenterY: anchor,
                        rotationRads: -Math.PI / 2
                    }, true);
 
                    title.applyTransformations();
                    me.titleOffset = title.getBBox().width + titleMargin;
 
                    break;
 
                case 'right':
                    title.setAttributes({
                        x: thickness - margin + titleMargin / 2,
                        y: anchor,
                        textBaseline: 'bottom',
                        textAlign: 'center',
                        rotationCenterX: thickness + titleMargin / 2,
                        rotationCenterY: anchor,
                        rotationRads: Math.PI / 2
                    }, true);
 
                    title.applyTransformations();
                    me.titleOffset = title.getBBox().width + titleMargin;
 
                    break;
            }
        }
    },
 
    onThicknessChanged: function() {
        this.getChart().onThicknessChanged();
    },
 
    getThickness: function() {
        if (this.getHidden()) {
            return 0;
        }
 
        return (this.sprites[0] && this.sprites[0].thickness || 1) + this.titleOffset +
                this.getMargin();
    },
 
    onAnimationStart: function() {
        this.spriteAnimationCount++;
 
        if (this.spriteAnimationCount === 1) {
            this.fireEvent('animationstart', this);
        }
    },
 
    onAnimationEnd: function() {
        this.spriteAnimationCount--;
 
        if (this.spriteAnimationCount === 0) {
            this.fireEvent('animationend', this);
        }
    },
 
    // Methods used in ComponentQuery and controller
    getItemId: function() {
        return this.getId();
    },
 
    getAncestorIds: function() {
        return [this.getChart().getId()];
    },
 
    isXType: function(xtype) {
        return xtype === 'axis';
    },
 
    // Override the Observable's method to redirect listener scope
    // resolution to the chart.
    resolveListenerScope: function(defaultScope) {
        var me = this,
            namedScope = Ext._namedScopes[defaultScope],
            chart = me.getChart(),
            scope;
 
        if (!namedScope) {
            scope = chart ? chart.resolveListenerScope(defaultScope, false) : (defaultScope || me);
        }
        else if (namedScope.isThis) {
            scope = me;
        }
        else if (namedScope.isController) {
            scope = chart ? chart.resolveListenerScope(defaultScope, false) : me;
        }
        else if (namedScope.isSelf) {
            scope = chart ? chart.resolveListenerScope(defaultScope, false) : me;
 
            // Class body listener. No chart controller, nor chart container controller.
            if (scope === chart && !chart.getInheritedConfig('defaultListenerScope')) {
                scope = me;
            }
        }
 
        return scope;
    },
 
    destroy: function() {
        var me = this;
 
        me.setChart(null);
        me.surface.destroy();
        me.surface = null;
        me.callParent();
    }
});