extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/chart/axis/Radial.js

@@ -0,0 +1,204 @@
+/**
+ * @private
+ */
+Ext.define('Ext.chart.axis.Radial', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.chart.axis.Abstract',
+
+    /* End Definitions */
+
+    position: 'radial',
+
+    alias: 'axis.radial',
+
+    drawAxis: function(init) {
+        var chart = this.chart,
+            surface = chart.surface,
+            bbox = chart.chartBBox,
+            store = chart.store,
+            l = store.getCount(),
+            centerX = bbox.x + (bbox.width / 2),
+            centerY = bbox.y + (bbox.height / 2),
+            rho = Math.min(bbox.width, bbox.height) /2,
+            sprites = [], sprite,
+            steps = this.steps,
+            i, j, pi2 = Math.PI * 2,
+            cos = Math.cos, sin = Math.sin;
+
+        if (this.sprites && !chart.resizing) {
+            this.drawLabel();
+            return;
+        }
+
+        if (!this.sprites) {
+            //draw circles
+            for (i = 1; i <= steps; i++) {
+                sprite = surface.add({
+                    type: 'circle',
+                    x: centerX,
+                    y: centerY,
+                    radius: Math.max(rho * i / steps, 0),
+                    stroke: '#ccc'
+                });
+                sprite.setAttributes({
+                    hidden: false
+                }, true);
+                sprites.push(sprite);
+            }
+            //draw lines
+            for (i = 0; i < l; i++) {
+                sprite = surface.add({
+                    type: 'path',
+                    path: ['M', centerX, centerY, 'L', centerX + rho * cos(i / l * pi2), centerY + rho * sin(i / l * pi2), 'Z'],
+                    stroke: '#ccc'
+                });
+                sprite.setAttributes({
+                    hidden: false
+                }, true);
+                sprites.push(sprite);
+            }
+        } else {
+            sprites = this.sprites;
+            //draw circles
+            for (i = 0; i < steps; i++) {
+                sprites[i].setAttributes({
+                    x: centerX,
+                    y: centerY,
+                    radius: Math.max(rho * (i + 1) / steps, 0),
+                    stroke: '#ccc'
+                }, true);
+            }
+            //draw lines
+            for (j = 0; j < l; j++) {
+                sprites[i + j].setAttributes({
+                    path: ['M', centerX, centerY, 'L', centerX + rho * cos(j / l * pi2), centerY + rho * sin(j / l * pi2), 'Z'],
+                    stroke: '#ccc'
+                }, true);
+            }
+        }
+        this.sprites = sprites;
+
+        this.drawLabel();
+    },
+
+    drawLabel: function() {
+        var chart = this.chart,
+            seriesItems = chart.series.items,
+            series,
+            surface = chart.surface,
+            bbox = chart.chartBBox,
+            store = chart.store,
+            data = store.data.items,
+            ln, record,
+            centerX = bbox.x + (bbox.width / 2),
+            centerY = bbox.y + (bbox.height / 2),
+            rho = Math.min(bbox.width, bbox.height) /2,
+            max = Math.max, round = Math.round,
+            labelArray = [], label,
+            fields = [], nfields,
+            categories = [], xField,
+            aggregate = !this.maximum,
+            maxValue = this.maximum || 0,
+            steps = this.steps, i = 0, j, dx, dy,
+            pi2 = Math.PI * 2,
+            cos = Math.cos, sin = Math.sin,
+            display = this.label.display,
+            draw = display !== 'none',
+            margin = 10;
+
+        if (!draw) {
+            return;
+        }
+
+        //get all rendered fields
+        for (i = 0, ln = seriesItems.length; i < ln; i++) {
+            series = seriesItems[i];
+            fields.push(series.yField);
+            xField = series.xField;
+        }
+        
+        //get maxValue to interpolate
+        for (j = 0, ln = data.length; j < ln; j++) {
+            record = data[j];
+            if (aggregate) {
+                for (i = 0, nfields = fields.length; i < nfields; i++) {
+                    maxValue = max(+record.get(fields[i]), maxValue);
+                }
+            }
+            categories.push(record.get(xField));
+        }
+        if (!this.labelArray) {
+            if (display != 'categories') {
+                //draw scale
+                for (i = 1; i <= steps; i++) {
+                    label = surface.add({
+                        type: 'text',
+                        text: round(i / steps * maxValue),
+                        x: centerX,
+                        y: centerY - rho * i / steps,
+                        'text-anchor': 'middle',
+                        'stroke-width': 0.1,
+                        stroke: '#333'
+                    });
+                    label.setAttributes({
+                        hidden: false
+                    }, true);
+                    labelArray.push(label);
+                }
+            }
+            if (display != 'scale') {
+                //draw text
+                for (j = 0, steps = categories.length; j < steps; j++) {
+                    dx = cos(j / steps * pi2) * (rho + margin);
+                    dy = sin(j / steps * pi2) * (rho + margin);
+                    label = surface.add({
+                        type: 'text',
+                        text: categories[j],
+                        x: centerX + dx,
+                        y: centerY + dy,
+                        'text-anchor': dx * dx <= 0.001? 'middle' : (dx < 0? 'end' : 'start')
+                    });
+                    label.setAttributes({
+                        hidden: false
+                    }, true);
+                    labelArray.push(label);
+                }
+            }
+        }
+        else {
+            labelArray = this.labelArray;
+            if (display != 'categories') {
+                //draw values
+                for (i = 0; i < steps; i++) {
+                    labelArray[i].setAttributes({
+                        text: round((i + 1) / steps * maxValue),
+                        x: centerX,
+                        y: centerY - rho * (i + 1) / steps,
+                        'text-anchor': 'middle',
+                        'stroke-width': 0.1,
+                        stroke: '#333'
+                    }, true);
+                }
+            }
+            if (display != 'scale') {
+                //draw text
+                for (j = 0, steps = categories.length; j < steps; j++) {
+                    dx = cos(j / steps * pi2) * (rho + margin);
+                    dy = sin(j / steps * pi2) * (rho + margin);
+                    if (labelArray[i + j]) {
+                        labelArray[i + j].setAttributes({
+                            type: 'text',
+                            text: categories[j],
+                            x: centerX + dx,
+                            y: centerY + dy,
+                            'text-anchor': dx * dx <= 0.001? 'middle' : (dx < 0? 'end' : 'start')
+                        }, true);
+                    }
+                }
+            }
+        }
+        this.labelArray = labelArray;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/chart/axis/Time.js

@@ -0,0 +1,135 @@
+/**
+ * @class Ext.chart.axis.Time
+ * @extends Ext.chart.axis.Axis
+ *
+ * A type of axis whose units are measured in time values. Use this axis
+ * for listing dates that you will want to group or dynamically change.
+ * If you just want to display dates as categories then use the
+ * Category class for axis instead.
+ *
+ * For example:
+ *
+ *     axes: [{
+ *         type: 'Time',
+ *         position: 'bottom',
+ *         fields: 'date',
+ *         title: 'Day',
+ *         dateFormat: 'M d',
+ *         groupBy: 'year,month,day',
+ *         aggregateOp: 'sum',
+ *
+ *         constrain: true,
+ *         fromDate: new Date('1/1/11'),
+ *         toDate: new Date('1/7/11')
+ *     }]
+ *
+ * In this example we're creating a time axis that has as title *Day*.
+ * The field the axis is bound to is `date`.
+ * The date format to use to display the text for the axis labels is `M d`
+ * which is a three letter month abbreviation followed by the day number.
+ * The time axis will show values for dates between `fromDate` and `toDate`.
+ * Since `constrain` is set to true all other values for other dates not between
+ * the fromDate and toDate will not be displayed.
+ *
+ */
+Ext.define('Ext.chart.axis.Time', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.chart.axis.Numeric',
+
+    alternateClassName: 'Ext.chart.TimeAxis',
+
+    alias: 'axis.time',
+
+    uses: ['Ext.data.Store'],
+
+    /* End Definitions */
+
+    /**
+     * @cfg {String/Boolean} dateFormat
+     * Indicates the format the date will be rendered on.
+     * For example: 'M d' will render the dates as 'Jan 30', etc.
+     * For a list of possible format strings see {@link Ext.Date Date}
+     */
+    dateFormat: false,
+
+    /**
+     * @cfg {Date} fromDate The starting date for the time axis.
+     */
+    fromDate: false,
+
+    /**
+     * @cfg {Date} toDate The ending date for the time axis.
+     */
+    toDate: false,
+
+    /**
+     * @cfg {Array/Boolean} step
+     * An array with two components: The first is the unit of the step (day, month, year, etc). The second one is the number of units for the step (1, 2, etc.).
+     * Default's [Ext.Date.DAY, 1]. If this is specified, {@link #steps} config is omitted.
+     */
+    step: [Ext.Date.DAY, 1],
+
+    /**
+     * @cfg {Boolean} constrain
+     * If true, the values of the chart will be rendered only if they belong between the fromDate and toDate.
+     * If false, the time axis will adapt to the new values by adding/removing steps.
+     * Default's false.
+     */
+    constrain: false,
+
+    constructor: function (config) {
+        var me = this, label, f, df;
+        me.callParent([config]);
+        label = me.label || {};
+        df = this.dateFormat;
+        if (df) {
+            if (label.renderer) {
+                f = label.renderer;
+                label.renderer = function(v) {
+                    v = f(v);
+                    return Ext.Date.format(new Date(f(v)), df);
+                };
+            } else {
+                label.renderer = function(v) {
+                    return Ext.Date.format(new Date(v >> 0), df);
+                };
+            }
+        }
+    },
+
+    // Before rendering, set current default step count to be number of records.
+    processView: function () {
+        var me = this;
+        if (me.fromDate) {
+            me.minimum = +me.fromDate;
+        }
+        if (me.toDate) {
+            me.maximum = +me.toDate;
+        }
+        if(me.constrain){
+            me.doConstrain();
+        }
+     },
+
+    // @private modifies the store and creates the labels for the axes.
+    calcEnds: function() {
+        var me = this, range, step = me.step;
+        if (step) {
+            range = me.getRange();
+            range = Ext.draw.Draw.snapEndsByDateAndStep(new Date(range.min), new Date(range.max), Ext.isNumber(step) ? [Date.MILLI, step]: step);
+            if (me.minimum) {
+                range.from = me.minimum;
+            }
+            if (me.maximum) {
+                range.to = me.maximum;
+            }
+            range.step = (range.to - range.from) / range.steps;
+            return range;
+        } else {
+            return me.callParent(arguments);
+        }
+    }
+ });
+

data/app/assets/javascripts/extjs-rails/src/chart/series/Area.js

@@ -0,0 +1,803 @@
+/**
+ * @class Ext.chart.series.Area
+ * @extends Ext.chart.series.Cartesian
+ *
+ * Creates a Stacked Area Chart. The stacked area chart is useful when displaying multiple aggregated layers of information.
+ * As with all other series, the Area Series must be appended in the *series* Chart array configuration. See the Chart
+ * documentation for more information. A typical configuration object for the area series could be:
+ *
+ *     @example
+ *     var store = Ext.create('Ext.data.JsonStore', {
+ *         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
+ *         data: [
+ *             { 'name': 'metric one',   'data1':10, 'data2':12, 'data3':14, 'data4':8,  'data5':13 },
+ *             { 'name': 'metric two',   'data1':7,  'data2':8,  'data3':16, 'data4':10, 'data5':3  },
+ *             { 'name': 'metric three', 'data1':5,  'data2':2,  'data3':14, 'data4':12, 'data5':7  },
+ *             { 'name': 'metric four',  'data1':2,  'data2':14, 'data3':6,  'data4':1,  'data5':23 },
+ *             { 'name': 'metric five',  'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33 }
+ *         ]
+ *     });
+ *
+ *     Ext.create('Ext.chart.Chart', {
+ *         renderTo: Ext.getBody(),
+ *         width: 500,
+ *         height: 300,
+ *         store: store,
+ *         axes: [
+ *             {
+ *                 type: 'Numeric',
+ *                 grid: true,
+ *                 position: 'left',
+ *                 fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
+ *                 title: 'Sample Values',
+ *                 grid: {
+ *                     odd: {
+ *                         opacity: 1,
+ *                         fill: '#ddd',
+ *                         stroke: '#bbb',
+ *                         'stroke-width': 1
+ *                     }
+ *                 },
+ *                 minimum: 0,
+ *                 adjustMinimumByMajorUnit: 0
+ *             },
+ *             {
+ *                 type: 'Category',
+ *                 position: 'bottom',
+ *                 fields: ['name'],
+ *                 title: 'Sample Metrics',
+ *                 grid: true,
+ *                 label: {
+ *                     rotate: {
+ *                         degrees: 315
+ *                     }
+ *                 }
+ *             }
+ *         ],
+ *         series: [{
+ *             type: 'area',
+ *             highlight: false,
+ *             axis: 'left',
+ *             xField: 'name',
+ *             yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
+ *             style: {
+ *                 opacity: 0.93
+ *             }
+ *         }]
+ *     });
+ *
+ * In this configuration we set `area` as the type for the series, set highlighting options to true for highlighting elements on hover,
+ * take the left axis to measure the data in the area series, set as xField (x values) the name field of each element in the store,
+ * and as yFields (aggregated layers) seven data fields from the same store. Then we override some theming styles by adding some opacity
+ * to the style object.
+ *
+ * @xtype area
+ */
+Ext.define('Ext.chart.series.Area', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.chart.series.Cartesian',
+
+    alias: 'series.area',
+
+    requires: ['Ext.chart.axis.Axis', 'Ext.draw.Color', 'Ext.fx.Anim'],
+
+    /* End Definitions */
+
+    type: 'area',
+
+    // @private Area charts are alyways stacked
+    stacked: true,
+
+    /**
+     * @cfg {Object} style
+     * Append styling properties to this object for it to override theme properties.
+     */
+    style: {},
+
+    constructor: function(config) {
+        this.callParent(arguments);
+        var me = this,
+            surface = me.chart.surface,
+            i, l;
+        config.highlightCfg = Ext.Object.merge({}, {
+            lineWidth: 3,
+            stroke: '#55c',
+            opacity: 0.8,
+            color: '#f00'
+        }, config.highlightCfg);
+
+        Ext.apply(me, config, {
+            __excludes: []
+        });
+        if (me.highlight) {
+            me.highlightSprite = surface.add({
+                type: 'path',
+                path: ['M', 0, 0],
+                zIndex: 1000,
+                opacity: 0.3,
+                lineWidth: 5,
+                hidden: true,
+                stroke: '#444'
+            });
+        }
+        me.group = surface.getGroup(me.seriesId);
+    },
+
+    // @private Shrinks dataSets down to a smaller size
+    shrink: function(xValues, yValues, size) {
+        var len = xValues.length,
+            ratio = Math.floor(len / size),
+            i, j,
+            xSum = 0,
+            yCompLen = this.areas.length,
+            ySum = [],
+            xRes = [],
+            yRes = [];
+        //initialize array
+        for (j = 0; j < yCompLen; ++j) {
+            ySum[j] = 0;
+        }
+        for (i = 0; i < len; ++i) {
+            xSum += +xValues[i];
+            for (j = 0; j < yCompLen; ++j) {
+                ySum[j] += +yValues[i][j];
+            }
+            if (i % ratio == 0) {
+                //push averages
+                xRes.push(xSum/ratio);
+                for (j = 0; j < yCompLen; ++j) {
+                    ySum[j] /= ratio;
+                }
+                yRes.push(ySum);
+                //reset sum accumulators
+                xSum = 0;
+                for (j = 0, ySum = []; j < yCompLen; ++j) {
+                    ySum[j] = 0;
+                }
+            }
+        }
+        return {
+            x: xRes,
+            y: yRes
+        };
+    },
+
+    // @private Get chart and data boundaries
+    getBounds: function() {
+        var me = this,
+            chart = me.chart,
+            store = chart.getChartStore(),
+            data = store.data.items,
+            i, l, record,
+            areas = [].concat(me.yField),
+            areasLen = areas.length,
+            xValues = [],
+            yValues = [],
+            infinity = Infinity,
+            minX = infinity,
+            minY = infinity,
+            maxX = -infinity,
+            maxY = -infinity,
+            math = Math,
+            mmin = math.min,
+            mmax = math.max,
+            boundAxis = me.getAxesForXAndYFields(),
+            boundXAxis = boundAxis.xAxis,
+            boundYAxis = boundAxis.yAxis,
+            ends, allowDate,
+            bbox, xScale, yScale, xValue, yValue, areaIndex, acumY, ln, sumValues, clipBox, areaElem, axis, out;
+
+        me.setBBox();
+        bbox = me.bbox;
+
+        if (axis = chart.axes.get(boundXAxis)) {
+            if (axis.type === 'Time') {
+                allowDate = true;
+            }
+            ends = axis.applyData();
+            minX = ends.from;
+            maxX = ends.to;
+        }
+
+        if (axis = chart.axes.get(boundYAxis)) {
+            ends = axis.applyData();
+            minY = ends.from;
+            maxY = ends.to;
+        }
+
+        // If a field was specified without a corresponding axis, create one to get bounds
+        if (me.xField && !Ext.isNumber(minX)) {
+            axis = me.getMinMaxXValues();
+            allowDate = true;
+            minX = axis[0];
+            maxX = axis[1];
+        }
+
+        if (me.yField && !Ext.isNumber(minY)) {
+            axis = me.getMinMaxYValues();
+            minY = axis[0];
+            maxY = axis[1];
+        }
+
+        if (!Ext.isNumber(minY)) {
+            minY = 0;
+        }
+        if (!Ext.isNumber(maxY)) {
+            maxY = 0;
+        }
+
+        for (i = 0, l = data.length; i < l; i++) {
+            record = data[i];
+            xValue = record.get(me.xField);
+            yValue = [];
+            if (typeof xValue != 'number') {
+                if (allowDate) {
+                    xValue = +xValue;
+                } else {
+                    xValue = i;
+                }
+            }
+            xValues.push(xValue);
+            acumY = 0;
+            for (areaIndex = 0; areaIndex < areasLen; areaIndex++) {
+                // Excluded series
+                if (me.__excludes[areaIndex]) {
+                    continue;
+                }
+                areaElem = record.get(areas[areaIndex]);
+                if (typeof areaElem == 'number') {
+                    minY = mmin(minY, areaElem);
+                    yValue.push(areaElem);
+                    acumY += areaElem;
+                }
+            }
+            minX = mmin(minX, xValue);
+            maxX = mmax(maxX, xValue);
+            maxY = mmax(maxY, acumY);
+            yValues.push(yValue);
+        }
+
+        xScale = bbox.width / ((maxX - minX) || 1);
+        yScale = bbox.height / ((maxY - minY) || 1);
+
+        ln = xValues.length;
+        if ((ln > bbox.width) && me.areas) {
+            sumValues = me.shrink(xValues, yValues, bbox.width);
+            xValues = sumValues.x;
+            yValues = sumValues.y;
+        }
+
+        return {
+            bbox: bbox,
+            minX: minX,
+            minY: minY,
+            xValues: xValues,
+            yValues: yValues,
+            xScale: xScale,
+            yScale: yScale,
+            areasLen: areasLen
+        };
+    },
+
+    // @private Build an array of paths for the chart
+    getPaths: function() {
+        var me = this,
+            chart = me.chart,
+            store = chart.getChartStore(),
+            first = true,
+            bounds = me.getBounds(),
+            bbox = bounds.bbox,
+            items = me.items = [],
+            componentPaths = [],
+            componentPath,
+            count = 0,
+            paths = [],
+            i, ln, x, y, xValue, yValue, acumY, areaIndex, prevAreaIndex, areaElem, path;
+
+        ln = bounds.xValues.length;
+        // Start the path
+        for (i = 0; i < ln; i++) {
+            xValue = bounds.xValues[i];
+            yValue = bounds.yValues[i];
+            x = bbox.x + (xValue - bounds.minX) * bounds.xScale;
+            acumY = 0;
+            count = 0;
+            for (areaIndex = 0; areaIndex < bounds.areasLen; areaIndex++) {
+                // Excluded series
+                if (me.__excludes[areaIndex]) {
+                    continue;
+                }
+                if (!componentPaths[areaIndex]) {
+                    componentPaths[areaIndex] = [];
+                }
+                areaElem = yValue[count];
+                acumY += areaElem;
+                y = bbox.y + bbox.height - (acumY - bounds.minY) * bounds.yScale;
+                if (!paths[areaIndex]) {
+                    paths[areaIndex] = ['M', x, y];
+                    componentPaths[areaIndex].push(['L', x, y]);
+                } else {
+                    paths[areaIndex].push('L', x, y);
+                    componentPaths[areaIndex].push(['L', x, y]);
+                }
+                if (!items[areaIndex]) {
+                    items[areaIndex] = {
+                        pointsUp: [],
+                        pointsDown: [],
+                        series: me
+                    };
+                }
+                items[areaIndex].pointsUp.push([x, y]);
+                count++;
+            }
+        }
+
+        // Close the paths
+        for (areaIndex = 0; areaIndex < bounds.areasLen; areaIndex++) {
+            // Excluded series
+            if (me.__excludes[areaIndex]) {
+                continue;
+            }
+            path = paths[areaIndex];
+            // Close bottom path to the axis
+            if (areaIndex == 0 || first) {
+                first = false;
+                path.push('L', x, bbox.y + bbox.height,
+                          'L', bbox.x, bbox.y + bbox.height,
+                          'Z');
+            }
+            // Close other paths to the one before them
+            else {
+                componentPath = componentPaths[prevAreaIndex];
+                componentPath.reverse();
+                path.push('L', x, componentPath[0][2]);
+                for (i = 0; i < ln; i++) {
+                    path.push(componentPath[i][0],
+                              componentPath[i][1],
+                              componentPath[i][2]);
+                    items[areaIndex].pointsDown[ln -i -1] = [componentPath[i][1], componentPath[i][2]];
+                }
+                path.push('L', bbox.x, path[2], 'Z');
+            }
+            prevAreaIndex = areaIndex;
+        }
+        return {
+            paths: paths,
+            areasLen: bounds.areasLen
+        };
+    },
+
+    /**
+     * Draws the series for the current chart.
+     */
+    drawSeries: function() {
+        var me = this,
+            chart = me.chart,
+            store = chart.getChartStore(),
+            surface = chart.surface,
+            animate = chart.animate,
+            group = me.group,
+            endLineStyle = Ext.apply(me.seriesStyle, me.style),
+            colorArrayStyle = me.colorArrayStyle,
+            colorArrayLength = colorArrayStyle && colorArrayStyle.length || 0,
+            areaIndex, areaElem, paths, path, rendererAttributes;
+        
+        me.unHighlightItem();
+        me.cleanHighlights();
+
+        if (!store || !store.getCount() || me.seriesIsHidden) {
+            me.hide();
+            me.items = [];
+            return;
+        }
+
+        paths = me.getPaths();
+
+        if (!me.areas) {
+            me.areas = [];
+        }
+
+        for (areaIndex = 0; areaIndex < paths.areasLen; areaIndex++) {
+            // Excluded series
+            if (me.__excludes[areaIndex]) {
+                continue;
+            }
+            if (!me.areas[areaIndex]) {
+                me.items[areaIndex].sprite = me.areas[areaIndex] = surface.add(Ext.apply({}, {
+                    type: 'path',
+                    group: group,
+                    // 'clip-rect': me.clipBox,
+                    path: paths.paths[areaIndex],
+                    stroke: endLineStyle.stroke || colorArrayStyle[areaIndex % colorArrayLength],
+                    fill: colorArrayStyle[areaIndex % colorArrayLength]
+                }, endLineStyle || {}));
+            }
+            areaElem = me.areas[areaIndex];
+            path = paths.paths[areaIndex];
+            if (animate) {
+                //Add renderer to line. There is not a unique record associated with this.
+                rendererAttributes = me.renderer(areaElem, false, {
+                    path: path,
+                    // 'clip-rect': me.clipBox,
+                    fill: colorArrayStyle[areaIndex % colorArrayLength],
+                    stroke: endLineStyle.stroke || colorArrayStyle[areaIndex % colorArrayLength]
+                }, areaIndex, store);
+                //fill should not be used here but when drawing the special fill path object
+                me.animation = me.onAnimate(areaElem, {
+                    to: rendererAttributes
+                });
+            } else {
+                rendererAttributes = me.renderer(areaElem, false, {
+                    path: path,
+                    // 'clip-rect': me.clipBox,
+                    hidden: false,
+                    fill: colorArrayStyle[areaIndex % colorArrayLength],
+                    stroke: endLineStyle.stroke || colorArrayStyle[areaIndex % colorArrayLength]
+                }, areaIndex, store);
+                me.areas[areaIndex].setAttributes(rendererAttributes, true);
+            }
+        }
+        me.renderLabels();
+        me.renderCallouts();
+    },
+
+    // @private
+    onAnimate: function(sprite, attr) {
+        sprite.show();
+        return this.callParent(arguments);
+    },
+
+    // @private
+    onCreateLabel: function(storeItem, item, i, display) {
+        var me = this,
+            group = me.labelsGroup,
+            config = me.label,
+            bbox = me.bbox,
+            endLabelStyle = Ext.apply(config, me.seriesLabelStyle);
+
+        return me.chart.surface.add(Ext.apply({
+            'type': 'text',
+            'text-anchor': 'middle',
+            'group': group,
+            'x': item.point[0],
+            'y': bbox.y + bbox.height / 2
+        }, endLabelStyle || {}));
+    },
+
+    // @private
+    onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {
+        var me = this,
+            chart = me.chart,
+            resizing = chart.resizing,
+            config = me.label,
+            format = config.renderer,
+            field = config.field,
+            bbox = me.bbox,
+            x = item.point[0],
+            y = item.point[1],
+            bb, width, height;
+
+        label.setAttributes({
+            text: format(storeItem.get(field[index])),
+            hidden: true
+        }, true);
+
+        bb = label.getBBox();
+        width = bb.width / 2;
+        height = bb.height / 2;
+
+        x = x - width < bbox.x? bbox.x + width : x;
+        x = (x + width > bbox.x + bbox.width) ? (x - (x + width - bbox.x - bbox.width)) : x;
+        y = y - height < bbox.y? bbox.y + height : y;
+        y = (y + height > bbox.y + bbox.height) ? (y - (y + height - bbox.y - bbox.height)) : y;
+
+        if (me.chart.animate && !me.chart.resizing) {
+            label.show(true);
+            me.onAnimate(label, {
+                to: {
+                    x: x,
+                    y: y
+                }
+            });
+        } else {
+            label.setAttributes({
+                x: x,
+                y: y
+            }, true);
+            if (resizing) {
+                me.animation.on('afteranimate', function() {
+                    label.show(true);
+                });
+            } else {
+                label.show(true);
+            }
+        }
+    },
+
+    // @private
+    onPlaceCallout : function(callout, storeItem, item, i, display, animate, index) {
+        var me = this,
+            chart = me.chart,
+            surface = chart.surface,
+            resizing = chart.resizing,
+            config = me.callouts,
+            items = me.items,
+            prev = (i == 0) ? false : items[i -1].point,
+            next = (i == items.length -1) ? false : items[i +1].point,
+            cur = item.point,
+            dir, norm, normal, a, aprev, anext,
+            bbox = callout.label.getBBox(),
+            offsetFromViz = 30,
+            offsetToSide = 10,
+            offsetBox = 3,
+            boxx, boxy, boxw, boxh,
+            p, clipRect = me.clipRect,
+            x, y;
+
+        //get the right two points
+        if (!prev) {
+            prev = cur;
+        }
+        if (!next) {
+            next = cur;
+        }
+        a = (next[1] - prev[1]) / (next[0] - prev[0]);
+        aprev = (cur[1] - prev[1]) / (cur[0] - prev[0]);
+        anext = (next[1] - cur[1]) / (next[0] - cur[0]);
+
+        norm = Math.sqrt(1 + a * a);
+        dir = [1 / norm, a / norm];
+        normal = [-dir[1], dir[0]];
+
+        //keep the label always on the outer part of the "elbow"
+        if (aprev > 0 && anext < 0 && normal[1] < 0 || aprev < 0 && anext > 0 && normal[1] > 0) {
+            normal[0] *= -1;
+            normal[1] *= -1;
+        } else if (Math.abs(aprev) < Math.abs(anext) && normal[0] < 0 || Math.abs(aprev) > Math.abs(anext) && normal[0] > 0) {
+            normal[0] *= -1;
+            normal[1] *= -1;
+        }
+
+        //position
+        x = cur[0] + normal[0] * offsetFromViz;
+        y = cur[1] + normal[1] * offsetFromViz;
+
+        //box position and dimensions
+        boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
+        boxy = y - bbox.height /2 - offsetBox;
+        boxw = bbox.width + 2 * offsetBox;
+        boxh = bbox.height + 2 * offsetBox;
+
+        //now check if we're out of bounds and invert the normal vector correspondingly
+        //this may add new overlaps between labels (but labels won't be out of bounds).
+        if (boxx < clipRect[0] || (boxx + boxw) > (clipRect[0] + clipRect[2])) {
+            normal[0] *= -1;
+        }
+        if (boxy < clipRect[1] || (boxy + boxh) > (clipRect[1] + clipRect[3])) {
+            normal[1] *= -1;
+        }
+
+        //update positions
+        x = cur[0] + normal[0] * offsetFromViz;
+        y = cur[1] + normal[1] * offsetFromViz;
+
+        //update box position and dimensions
+        boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
+        boxy = y - bbox.height /2 - offsetBox;
+        boxw = bbox.width + 2 * offsetBox;
+        boxh = bbox.height + 2 * offsetBox;
+
+        //set the line from the middle of the pie to the box.
+        callout.lines.setAttributes({
+            path: ["M", cur[0], cur[1], "L", x, y, "Z"]
+        }, true);
+        //set box position
+        callout.box.setAttributes({
+            x: boxx,
+            y: boxy,
+            width: boxw,
+            height: boxh
+        }, true);
+        //set text position
+        callout.label.setAttributes({
+            x: x + (normal[0] > 0? offsetBox : -(bbox.width + offsetBox)),
+            y: y
+        }, true);
+        for (p in callout) {
+            callout[p].show(true);
+        }
+    },
+
+    isItemInPoint: function(x, y, item, i) {
+        var me = this,
+            pointsUp = item.pointsUp,
+            pointsDown = item.pointsDown,
+            abs = Math.abs,
+            distChanged = false,
+            last = false,
+            dist = Infinity, p, pln, point;
+
+        for (p = 0, pln = pointsUp.length; p < pln; p++) {
+            point = [pointsUp[p][0], pointsUp[p][1]];
+            
+            distChanged = false;
+            last = p == pln -1;
+
+            if (dist > abs(x - point[0])) {
+                dist = abs(x - point[0]);
+                distChanged = true;
+                if (last) {
+                    ++p;
+                }
+            }
+            
+            if (!distChanged || (distChanged && last)) {
+                point = pointsUp[p -1];
+                if (y >= point[1] && (!pointsDown.length || y <= (pointsDown[p -1][1]))) {
+                    item.storeIndex = p -1;
+                    item.storeField = me.yField[i];
+                    item.storeItem = me.chart.store.getAt(p -1);
+                    item._points = pointsDown.length? [point, pointsDown[p -1]] : [point];
+                    return true;
+                } else {
+                    break;
+                }
+            }
+        }
+        return false;
+    },
+
+    /**
+     * Highlight this entire series.
+     * @param {Object} item Info about the item; same format as returned by #getItemForPoint.
+     */
+    highlightSeries: function() {
+        var area, to, fillColor;
+        if (this._index !== undefined) {
+            area = this.areas[this._index];
+            if (area.__highlightAnim) {
+                area.__highlightAnim.paused = true;
+            }
+            area.__highlighted = true;
+            area.__prevOpacity = area.__prevOpacity || area.attr.opacity || 1;
+            area.__prevFill = area.__prevFill || area.attr.fill;
+            area.__prevLineWidth = area.__prevLineWidth || area.attr.lineWidth;
+            fillColor = Ext.draw.Color.fromString(area.__prevFill);
+            to = {
+                lineWidth: (area.__prevLineWidth || 0) + 2
+            };
+            if (fillColor) {
+                to.fill = fillColor.getLighter(0.2).toString();
+            }
+            else {
+                to.opacity = Math.max(area.__prevOpacity - 0.3, 0);
+            }
+            if (this.chart.animate) {
+                area.__highlightAnim = new Ext.fx.Anim(Ext.apply({
+                    target: area,
+                    to: to
+                }, this.chart.animate));
+            }
+            else {
+                area.setAttributes(to, true);
+            }
+        }
+    },
+
+    /**
+     * UnHighlight this entire series.
+     * @param {Object} item Info about the item; same format as returned by #getItemForPoint.
+     */
+    unHighlightSeries: function() {
+        var area;
+        if (this._index !== undefined) {
+            area = this.areas[this._index];
+            if (area.__highlightAnim) {
+                area.__highlightAnim.paused = true;
+            }
+            if (area.__highlighted) {
+                area.__highlighted = false;
+                area.__highlightAnim = new Ext.fx.Anim({
+                    target: area,
+                    to: {
+                        fill: area.__prevFill,
+                        opacity: area.__prevOpacity,
+                        lineWidth: area.__prevLineWidth
+                    }
+                });
+            }
+        }
+    },
+
+    /**
+     * Highlight the specified item. If no item is provided the whole series will be highlighted.
+     * @param item {Object} Info about the item; same format as returned by #getItemForPoint
+     */
+    highlightItem: function(item) {
+        var me = this,
+            points, path;
+        if (!item) {
+            this.highlightSeries();
+            return;
+        }
+        points = item._points;
+        path = points.length == 2? ['M', points[0][0], points[0][1], 'L', points[1][0], points[1][1]]
+                : ['M', points[0][0], points[0][1], 'L', points[0][0], me.bbox.y + me.bbox.height];
+        me.highlightSprite.setAttributes({
+            path: path,
+            hidden: false
+        }, true);
+    },
+
+    /**
+     * Un-highlights the specified item. If no item is provided it will un-highlight the entire series.
+     * @param {Object} item Info about the item; same format as returned by #getItemForPoint
+     */
+    unHighlightItem: function(item) {
+        if (!item) {
+            this.unHighlightSeries();
+        }
+
+        if (this.highlightSprite) {
+            this.highlightSprite.hide(true);
+        }
+    },
+
+    // @private
+    hideAll: function(index) {
+        var me = this;
+        index = (isNaN(me._index) ? index : me._index) || 0;
+        me.__excludes[index] = true;
+        me.areas[index].hide(true);
+        me.redraw();
+    },
+
+    // @private
+    showAll: function(index) {
+        var me = this;
+        index = (isNaN(me._index) ? index : me._index) || 0;
+        me.__excludes[index] = false;
+        me.areas[index].show(true);
+        me.redraw();
+    },
+
+    redraw: function() {
+        //store previous configuration for the legend
+        //and set it to false so we don't
+        //re-build label elements if not necessary.
+        var me = this,
+            prevLegendConfig;
+        prevLegendConfig = me.chart.legend.rebuild;
+        me.chart.legend.rebuild = false;
+        me.chart.redraw();
+        me.chart.legend.rebuild = prevLegendConfig;
+    },
+    
+    hide: function() {
+        if (this.areas) {
+            var me = this,
+                areas = me.areas,
+                i, j, l, ln, shadows;
+            
+            if (areas && areas.length) {
+                for (i = 0, ln = areas.length; i < ln; ++i) {
+                    if (areas[i]) {
+                        areas[i].hide(true);
+                    }
+                }
+                me.hideLabels();
+            }
+        }
+    },
+
+    /**
+     * Returns the color of the series (to be displayed as color for the series legend item).
+     * @param {Object} item Info about the item; same format as returned by #getItemForPoint
+     */
+    getLegendColor: function(index) {
+        var me = this;
+        return me.colorArrayStyle[index % me.colorArrayStyle.length];
+    }
+});