extjs-rails 4.1.0.alpha1

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

@@ -0,0 +1,130 @@
+/**
+ * @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/extjs-rails/src/chart/axis/Gauge.js

@@ -0,0 +1,203 @@
+/**
+ * @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/extjs-rails/src/chart/axis/Numeric.js

@@ -0,0 +1,235 @@
+/**
+ * @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();
+    }
+});