extjs-rails 4.1.0.alpha5 → 4.1.0.alpha6

data/app/assets/javascripts/src/chart/axis/Category.js

@@ -1,130 +0,0 @@
-/**
- * @class Ext.chart.axis.Category
- *
- * A type of axis that displays items in categories. This axis is generally used to
- * display categorical information like names of items, month names, quarters, etc.
- * but no quantitative values. For that other type of information `Number`
- * axis are more suitable.
- *
- * As with other axis you can set the position of the axis and its title. For example:
- *
- *     @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',
- *             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 example with set the category axis to the bottom of the surface, bound the axis to
- * the `name` property and set as title _Month of the Year_.
- */
-Ext.define('Ext.chart.axis.Category', {
-
-    /* Begin Definitions */
-
-    extend: 'Ext.chart.axis.Axis',
-
-    alternateClassName: 'Ext.chart.CategoryAxis',
-
-    alias: 'axis.category',
-
-    /* End Definitions */
-
-    /**
-     * A list of category names to display along this axis.
-     * @property {String} categoryNames
-     */
-    categoryNames: null,
-
-    /**
-     * Indicates whether or not to calculate the number of categories (ticks and
-     * labels) when there is not enough room to display all labels on the axis.
-     * If set to true, the axis will determine the number of categories to plot.
-     * If not, all categories will be plotted.
-     *
-     * @property calculateCategoryCount
-     * @type Boolean
-     */
-    calculateCategoryCount: false,
-
-    // @private creates an array of labels to be used when rendering.
-    setLabels: function() {
-        var store = this.chart.getChartStore(),
-            data = store.data.items,
-            d, dLen, record,
-            fields = this.fields,
-            ln = fields.length,
-            i;
-
-        this.labels = [];
-        for (d = 0, dLen = data.length; d < dLen; d++) {
-            record = data[d];
-            for (i = 0; i < ln; i++) {
-                this.labels.push(record.get(fields[i]));
-            }
-        }
-    },
-
-    // @private calculates labels positions and marker positions for rendering.
-    applyData: function() {
-        this.callParent();
-        this.setLabels();
-        var count = this.chart.getChartStore().getCount();
-        return {
-            from: 0,
-            to: count - 1,
-            power: 1,
-            step: 1,
-            steps: count - 1
-        };
-    }
-});

data/app/assets/javascripts/src/chart/axis/Gauge.js

@@ -1,203 +0,0 @@
-/**
- * @class Ext.chart.axis.Gauge
- *
- * Gauge Axis is the axis to be used with a Gauge series. The Gauge axis
- * displays numeric data from an interval defined by the `minimum`, `maximum` and
- * `step` configuration properties. The placement of the numeric data can be changed
- * by altering the `margin` option that is set to `10` by default.
- *
- * A possible configuration for this axis would look like:
- *
- *     axes: [{
- *         type: 'gauge',
- *         position: 'gauge',
- *         minimum: 0,
- *         maximum: 100,
- *         steps: 10,
- *         margin: 7
- *     }],
- */
-Ext.define('Ext.chart.axis.Gauge', {
-
-    /* Begin Definitions */
-
-    extend: 'Ext.chart.axis.Abstract',
-
-    /* End Definitions */
-
-    /**
-     * @cfg {Number} minimum (required)
-     * The minimum value of the interval to be displayed in the axis.
-     */
-
-    /**
-     * @cfg {Number} maximum (required)
-     * The maximum value of the interval to be displayed in the axis.
-     */
-
-    /**
-     * @cfg {Number} steps (required)
-     * The number of steps and tick marks to add to the interval.
-     */
-
-    /**
-     * @cfg {Number} [margin=10]
-     * The offset positioning of the tick marks and labels in pixels.
-     */
-
-    /**
-     * @cfg {String} title
-     * The title for the Axis.
-     */
-
-    position: 'gauge',
-
-    alias: 'axis.gauge',
-
-    drawAxis: function(init) {
-        var chart = this.chart,
-            surface = chart.surface,
-            bbox = chart.chartBBox,
-            centerX = bbox.x + (bbox.width / 2),
-            centerY = bbox.y + bbox.height,
-            margin = this.margin || 10,
-            rho = Math.min(bbox.width, 2 * bbox.height) /2 + margin,
-            sprites = [], sprite,
-            steps = this.steps,
-            i, pi = Math.PI,
-            cos = Math.cos,
-            sin = Math.sin;
-
-        if (this.sprites && !chart.resizing) {
-            this.drawLabel();
-            return;
-        }
-
-        if (this.margin >= 0) {
-            if (!this.sprites) {
-                //draw circles
-                for (i = 0; i <= steps; i++) {
-                    sprite = surface.add({
-                        type: 'path',
-                        path: ['M', centerX + (rho - margin) * cos(i / steps * pi - pi),
-                                    centerY + (rho - margin) * sin(i / steps * pi - pi),
-                                    'L', centerX + rho * cos(i / steps * pi - pi),
-                                    centerY + rho * sin(i / steps * pi - pi), '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({
-                        path: ['M', centerX + (rho - margin) * cos(i / steps * pi - pi),
-                                    centerY + (rho - margin) * sin(i / steps * pi - pi),
-                               'L', centerX + rho * cos(i / steps * pi - pi),
-                                    centerY + rho * sin(i / steps * pi - pi), 'Z'],
-                        stroke: '#ccc'
-                    }, true);
-                }
-            }
-        }
-        this.sprites = sprites;
-        this.drawLabel();
-        if (this.title) {
-            this.drawTitle();
-        }
-    },
-
-    drawTitle: function() {
-        var me = this,
-            chart = me.chart,
-            surface = chart.surface,
-            bbox = chart.chartBBox,
-            labelSprite = me.titleSprite,
-            labelBBox;
-
-        if (!labelSprite) {
-            me.titleSprite = labelSprite = surface.add({
-                type: 'text',
-                zIndex: 2
-            });
-        }
-        labelSprite.setAttributes(Ext.apply({
-            text: me.title
-        }, me.label || {}), true);
-        labelBBox = labelSprite.getBBox();
-        labelSprite.setAttributes({
-            x: bbox.x + (bbox.width / 2) - (labelBBox.width / 2),
-            y: bbox.y + bbox.height - (labelBBox.height / 2) - 4
-        }, true);
-    },
-
-    /**
-     * Updates the {@link #title} of this axis.
-     * @param {String} title
-     */
-    setTitle: function(title) {
-        this.title = title;
-        this.drawTitle();
-    },
-
-    drawLabel: function() {
-        var chart = this.chart,
-            surface = chart.surface,
-            bbox = chart.chartBBox,
-            centerX = bbox.x + (bbox.width / 2),
-            centerY = bbox.y + bbox.height,
-            margin = this.margin || 10,
-            rho = Math.min(bbox.width, 2 * bbox.height) /2 + 2 * margin,
-            round = Math.round,
-            labelArray = [], label,
-            maxValue = this.maximum || 0,
-            minValue = this.minimum || 0,
-            steps = this.steps, i = 0,
-            adjY,
-            pi = Math.PI,
-            cos = Math.cos,
-            sin = Math.sin,
-            labelConf = this.label,
-            renderer = labelConf.renderer || function(v) { return v; };
-
-        if (!this.labelArray) {
-            //draw scale
-            for (i = 0; i <= steps; i++) {
-                // TODO Adjust for height of text / 2 instead
-                adjY = (i === 0 || i === steps) ? 7 : 0;
-                label = surface.add({
-                    type: 'text',
-                    text: renderer(round(minValue + i / steps * (maxValue - minValue))),
-                    x: centerX + rho * cos(i / steps * pi - pi),
-                    y: centerY + rho * sin(i / steps * pi - pi) - adjY,
-                    'text-anchor': 'middle',
-                    'stroke-width': 0.2,
-                    zIndex: 10,
-                    stroke: '#333'
-                });
-                label.setAttributes({
-                    hidden: false
-                }, true);
-                labelArray.push(label);
-            }
-        }
-        else {
-            labelArray = this.labelArray;
-            //draw values
-            for (i = 0; i <= steps; i++) {
-                // TODO Adjust for height of text / 2 instead
-                adjY = (i === 0 || i === steps) ? 7 : 0;
-                labelArray[i].setAttributes({
-                    text: renderer(round(minValue + i / steps * (maxValue - minValue))),
-                    x: centerX + rho * cos(i / steps * pi - pi),
-                    y: centerY + rho * sin(i / steps * pi - pi) - adjY
-                }, true);
-            }
-        }
-        this.labelArray = labelArray;
-    }
-});

data/app/assets/javascripts/src/chart/axis/Numeric.js

@@ -1,235 +0,0 @@
-/**
- * @class Ext.chart.axis.Numeric
- *
- * An axis to handle numeric values. This axis is used for quantitative data as
- * opposed to the category axis. You can set mininum and maximum values to the
- * axis so that the values are bound to that. If no values are set, then the
- * scale will auto-adjust to the values.
- *
- *     @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 example we create an axis of Numeric type. We set a minimum value so that
- * even if all series have values greater than zero, the grid starts at zero. We bind
- * the axis onto the left part of the surface by setting `position` to `left`.
- * We bind three different store fields to this axis by setting `fields` to an array.
- * We set the title of the axis to _Number of Hits_ by using the `title` property.
- * We use a `grid` configuration to set odd background rows to a certain style and even rows
- * to be transparent/ignored.
- */
-Ext.define('Ext.chart.axis.Numeric', {
-
-    /* Begin Definitions */
-
-    extend: 'Ext.chart.axis.Axis',
-
-    alternateClassName: 'Ext.chart.NumericAxis',
-
-    /* End Definitions */
-
-    type: 'numeric',
-
-    alias: 'axis.numeric',
-
-    uses: ['Ext.data.Store'],
-
-    constructor: function(config) {
-        var me = this,
-            hasLabel = !!(config.label && config.label.renderer),
-            label;
-
-        me.callParent([config]);
-        label = me.label;
-
-        if(config.constrain == null){
-            me.constrain = (config.minimum != null && config.maximum != null);
-        }
-
-        if (!hasLabel) {
-            label.renderer = function(v) {
-                return me.roundToDecimal(v, me.decimals);
-            };
-        }
-    },
-
-    roundToDecimal: function(v, dec) {
-        var val = Math.pow(10, dec || 0);
-        return Math.floor(v * val) / val;
-    },
-
-    /**
-     * The minimum value drawn by the axis. If not set explicitly, the axis
-     * minimum will be calculated automatically.
-     *
-     * @property {Number} minimum
-     */
-    minimum: NaN,
-
-    /**
-     * The maximum value drawn by the axis. If not set explicitly, the axis
-     * maximum will be calculated automatically.
-     *
-     * @property {Number} maximum
-     */
-    maximum: NaN,
-
-    /**
-     * @cfg {Boolean} constrain
-     * If true, the values of the chart will be rendered only if they belong between minimum and maximum
-     * If false, all values of the chart will be rendered, regardless of whether they belong between minimum and maximum or not
-     * Default's true if maximum and minimum is specified.
-     */
-    constrain: true,
-    
-    /**
-     * The number of decimals to round the value to.
-     *
-     * @property {Number} decimals
-     */
-    decimals: 2,
-
-    /**
-     * The scaling algorithm to use on this axis. May be "linear" or
-     * "logarithmic".  Currently only linear scale is implemented.
-     *
-     * @property {String} scale
-     * @private
-     */
-    scale: "linear",
-    
-    // @private constrains to datapoints between minimum and maximum only
-    doConstrain: function () {
-        var me = this,
-            store = me.chart.store,
-            items = store.data.items,
-            d, dLen, record,
-            series = me.chart.series.items,
-            fields = me.fields,
-            ln = fields.length,
-            range = me.getRange(),
-            min = range.min, max = range.max, i, l, excludes = [],
-            useAcum = false,
-            value, data = [],
-            addRecord;
-
-        for (i = 0, l = series.length; i < l; i++) {
-            excludes[i] = series[i].__excludes;
-            useAcum = useAcum || series[i].stacked;
-        }
-        for (d = 0, dLen = items.length; d < dLen; d++) {
-            addRecord = true;
-            record = items[d];
-            for (i = 0; i < ln; i++) {
-                addRecord = true;
-                if (excludes[i]) {
-                    continue;
-                }
-                value = record.get(fields[i]);
-
-                if (!useAcum && +value < +min) {
-                    addRecord = false;
-                    break;
-                }
-                if (!useAcum && +value > +max) {
-                    addRecord = false;
-                    break;
-                }
-            }
-            if (addRecord) {
-                data.push(record);
-            }
-        }
-        me.chart.substore = Ext.create('Ext.data.Store', { model: store.model, data: data });
-    },
-    /**
-     * Indicates the position of the axis relative to the chart
-     *
-     * @property {String} position
-     */
-    position: 'left',
-
-    /**
-     * Indicates whether to extend maximum beyond data's maximum to the nearest
-     * majorUnit.
-     *
-     * @property {Boolean} adjustMaximumByMajorUnit
-     */
-    adjustMaximumByMajorUnit: false,
-
-    /**
-     * Indicates whether to extend the minimum beyond data's minimum to the
-     * nearest majorUnit.
-     *
-     * @property {Boolean} adjustMinimumByMajorUnit
-     */
-    adjustMinimumByMajorUnit: false,
-    
-    // applying constraint
-    processView: function () {
-        var me = this,
-            constrain = me.constrain;
-        if(constrain){
-            me.doConstrain();
-        }
-    },
-    
-    // @private apply data.
-    applyData: function() {
-        this.callParent();
-        return this.calcEnds();
-    }
-});