/** * @class Ext.sparkline.Bullet * * Plots a bullet graph based upon the input {@link #values} array. * * See <a href="http://en.wikipedia.org/wiki/Bullet_graph">Bullet graphs Wikipedia Page</a> for more information. * * See {@link Ext.sparkline.Base the base class} for a simple example. */Ext.define('Ext.sparkline.Bullet', { extend: 'Ext.sparkline.Base', alias: 'widget.sparklinebullet', config: { /** * @cfg {String} [targetColor=#f33] The colour of the vertical target marker. */ targetColor: '#f33', /** * @cfg {Number} [targetWidth=3] Width of the target bar in pixels. */ targetWidth: 3, /** * @cfg {String} [performanceColor=#33f] The color of the performance measure horizontal bar. */ performanceColor: '#33f', /** * @cfg {String[]} [rangeColors] An array of colors to use for each qualitative range background color. */ rangeColors: ['#d3dafe', '#a8b6ff', '#7f94ff'], /** * @cfg {Number} [base] Set this to a number to change the base start number. */ base: null, tipTpl: new Ext.XTemplate('{fieldkey:this.fields} - {value}', { fields: function(v) { if (v === 'r') { return 'Range'; } if (v === 'p') { return 'Performance'; } if (v === 't') { return 'Target'; } } }) }, // Ensure values is an array of normalized values applyValues: function(newValues) { newValues = Ext.Array.map(Ext.Array.from(newValues), this.normalizeValue); this.disabled = !(newValues && newValues.length); return newValues; }, onUpdate: function() { var me = this, values = me.values, min, max, vals, base = me.getBase(); me.callParent(arguments); // target or performance could be null vals = values.slice(); vals[0] = vals[0] === null ? vals[2] : vals[0]; vals[1] = values[1] === null ? vals[2] : vals[1]; min = Math.min.apply(Math, values); max = Math.max.apply(Math, values); if (base == null) { min = min < 0 ? min : 0; } else { min = base; } me.min = min; me.max = max; me.range = max - min; me.shapes = {}; me.valueShapes = {}; me.regiondata = {}; if (!values.length) { me.disabled = true; } }, getRegion: function(x, y) { var shapeid = this.canvas.getShapeAt(x, y); return (shapeid !== undefined && this.shapes[shapeid] !== undefined) ? this.shapes[shapeid] : undefined; }, getRegionFields: function(region) { return { fieldkey: region.substr(0, 1), value: this.values[region.substr(1)], region: region }; }, renderHighlight: function(region) { switch (region.substr(0, 1)) { case 'r': this.renderRange(region.substr(1), true).append(); break; case 'p': this.renderPerformance(true).append(); break; case 't': this.renderTarget(true).append(); break; } }, renderRange: function(region, highlight) { var rangeval = this.values[region], rangewidth = Math.round(this.getWidth() * ((rangeval - this.min) / this.range)), color = this.getRangeColors()[region - 2]; if (highlight) { color = this.calcHighlightColor(color); } return this.canvas.drawRect(0, 0, rangewidth - 1, this.getHeight() - 1, color, color); }, renderPerformance: function(highlight) { var perfval = this.values[1], perfwidth = Math.round(this.getWidth() * ((perfval - this.min) / this.range)), color = this.getPerformanceColor(); if (highlight) { color = this.calcHighlightColor(color); } return this.canvas.drawRect(0, Math.round(this.getHeight() * 0.3), perfwidth - 1, Math.round(this.getHeight() * 0.4) - 1, color, color); }, renderTarget: function(highlight) { var targetval = this.values[0], targetWidth = this.getTargetWidth(), x = Math.round(this.getWidth() * ((targetval - this.min) / this.range) - (targetWidth / 2)), targettop = Math.round(this.getHeight() * 0.10), targetheight = this.getHeight() - (targettop * 2), color = this.getTargetColor(); if (highlight) { color = this.calcHighlightColor(color); } return this.canvas.drawRect(x, targettop, targetWidth - 1, targetheight - 1, color, color); }, renderGraph: function () { var me = this, vlen = me.values.length, canvas = me.canvas, i, shape, shapes = me.shapes || (me.shapes = {}), valueShapes = me.valueShapes || (me.valueShapes = {}); if (!me.callParent()) { return; } for (i = 2; i < vlen; i++) { shape = me.renderRange(i).append(); shapes[shape.id] = 'r' + i; valueShapes['r' + i] = shape.id; } if (me.values[1] !== null) { shape = me.renderPerformance().append(); shapes[shape.id] = 'p1'; valueShapes.p1 = shape.id; } if (me.values[0] !== null) { shape = this.renderTarget().append(); shapes[shape.id] = 't0'; valueShapes.t0 = shape.id; } // If mouse is over, apply the highlight if (me.currentPageXY && me.el.getRegion().contains(me.currentPageXY)) { me.updateDisplay(); } canvas.render(); }});