/** * A class that maps data values to colors. */Ext.define('Ext.d3.axis.Color', { requires: [ 'Ext.d3.Helpers' ], mixins: { observable: 'Ext.mixin.Observable' }, isColorAxis: true, config: { /** * @cfg {Function} scale * A D3 [scale](https://github.com/d3/d3/wiki/Scales) with a color range. * This config is configured similarly to the {@link Ext.d3.axis.Axis#scale} * config. * @cfg {Array} scale.domain The `domain` to use. If not set (default), * the domain will be automatically calculated based on data. */ scale: { // Notes about config merging effects for scales. // For example, if default `scale` config for this class is: // // scale: { // type: 'linear', // range: ['white', 'maroon'] // } // // and component's `colorAxis` config is // // colorAxis: { // scale: { // type: 'ordinal', // range: 'd3.schemeCategory20c' // } // } // // the `category20` scale will be created, defined by D3 as: // // d3.scale.ordinal().range(d3_category20) // // but because the configs are merged, the ['white', 'maroon'] range will also apply // to the new `category20` scale, which defeats the purpose of using this scale. // So we only allow config merging for scales of the same type. merge: function(value, baseValue) { if (value && value.type && baseValue && baseValue.type === value.type) { value = Ext.Object.merge(baseValue, value); } return value; }, $value: { type: 'linear', range: ['white', 'maroon'] } }, /** * @cfg {String} field * The field that will be used to fetch the value, * when a {@link Ext.data.Model} instance is passed to the {@link #getColor} method. */ field: null, /** * @cfg {Function} processor * Custom value processor. * @param {Ext.d3.axis.Color} axis * @param {Function} scale * @param {*} value The type will depend on component used. * @param {String} field * @return {String} color */ processor: null, /** * @cfg {Number} minimum The minimum data value. * The data domain is calculated automatically, setting this config to a number * will override the calculated minimum value. */ minimum: null, /** * @cfg {Number} maximum The maximum data value. * The data domain is calculated automatically, setting this config to a number * will override the calculated maximum value. */ maximum: null }, constructor: function(config) { this.mixins.observable.constructor.call(this, config); }, applyScale: function(scale, oldScale) { if (scale) { if (!Ext.isFunction(scale)) { this.isUserSetDomain = !!scale.domain; scale = Ext.d3.Helpers.makeScale(scale); } } return scale || oldScale; }, updateScale: function(scale) { this.scale = scale; }, updateField: function(field) { this.field = field; }, updateProcessor: function(processor) { this.processor = processor; }, /** * Maps the given `value` to a color. * In case the `value` is a {@link Ext.data.Model} instance, the {@link #field} * config will be used to fetch the actual value. * @param {*} value * @return {String} */ getColor: function(value) { var scale = this.scale, field = this.field, processor = this.processor, color; if (processor) { color = processor(this, scale, value, field); } else if (value && value.data && value.data.isModel && field) { color = scale(value.data.data[field]); } else { color = scale(value); } return color; }, updateMinimum: function() { this.setDomain(); }, updateMaximum: function() { this.setDomain(); }, /** * @private * For quantitative scales only! */ findDataDomain: function(records) { var field = this.field, min = d3.min(records, function(record) { return record.data[field]; }), max = d3.max(records, function(record) { return record.data[field]; }), domain; if (field) { if (Ext.isNumber(min) && Ext.isNumber(max)) { domain = [min, max]; } else { // ordinal data domain = records.map(function(record) { return record.data[field]; }).sort().filter(function(item, index, array) { // Remove duplicates by sorting and removing // each element equal to the preceding one. return !index || item !== array[index - 1]; }); } } return domain; }, /** * @private * For quantitative scales only! */ setDomainFromData: function(models) { if (!this.isUserSetDomain) { this.setDomain(this.findDataDomain(models)); } }, /** * @private * For quantitative scales only! * Sets the domain of the {@link #scale} taking into account the * {@link #minimum} and {@link #maximum}. If no `domain` is given, * updates the current domain. * @param {Number[]} [domain] */ setDomain: function(domain) { var me = this, scale = me.getScale(), range = scale.range(), rangeLength = range.length, minimum = me.getMinimum(), maximum = me.getMaximum(), step, start, end, i; if (scale && !me.isUserSetDomain) { if (!domain) { domain = scale.domain(); } domain = domain.slice(); // Domain is an array of two or more numbers. if (Ext.isNumber(minimum)) { domain[0] = minimum; } if (Ext.isNumber(maximum)) { domain[domain.length - 1] = maximum; } if (scale.ticks && domain.length !== rangeLength) { // make polylinear color scale start = domain[0]; end = domain[domain.length - 1]; step = (end - start) / (rangeLength - 1); domain = []; for (i = 0; i < rangeLength - 1; i++) { domain.push(start + i * step); } domain.push(end); } scale.domain(domain); me.fireEvent('scalechange', me, scale); } } });