/** * Provides default colors for non-specified things. Should be sub-classed when creating new themes. * @private */ Ext.define('Ext.chart.theme.Base', { /* Begin Definitions */ requires: ['Ext.chart.theme.Theme'], /* End Definitions */ constructor: function(config) { var ident = Ext.identityFn; Ext.chart.theme.call(this, config, { background: false, axis: { stroke: '#444', 'stroke-width': 1 }, axisLabelTop: { fill: '#444', font: '12px Arial, Helvetica, sans-serif', spacing: 2, padding: 5, renderer: ident }, axisLabelRight: { fill: '#444', font: '12px Arial, Helvetica, sans-serif', spacing: 2, padding: 5, renderer: ident }, axisLabelBottom: { fill: '#444', font: '12px Arial, Helvetica, sans-serif', spacing: 2, padding: 5, renderer: ident }, axisLabelLeft: { fill: '#444', font: '12px Arial, Helvetica, sans-serif', spacing: 2, padding: 5, renderer: ident }, axisTitleTop: { font: 'bold 18px Arial', fill: '#444' }, axisTitleRight: { font: 'bold 18px Arial', fill: '#444', rotate: { x:0, y:0, degrees: 270 } }, axisTitleBottom: { font: 'bold 18px Arial', fill: '#444' }, axisTitleLeft: { font: 'bold 18px Arial', fill: '#444', rotate: { x:0, y:0, degrees: 270 } }, series: { 'stroke-width': 0 }, seriesLabel: { font: '12px Arial', fill: '#333' }, marker: { stroke: '#555', radius: 3, size: 3 }, colors: [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"], seriesThemes: [{ fill: "#115fa6" }, { fill: "#94ae0a" }, { fill: "#a61120" }, { fill: "#ff8809" }, { fill: "#ffd13e" }, { fill: "#a61187" }, { fill: "#24ad9a" }, { fill: "#7c7474" }, { fill: "#115fa6" }, { fill: "#94ae0a" }, { fill: "#a61120" }, { fill: "#ff8809" }, { fill: "#ffd13e" }, { fill: "#a61187" }, { fill: "#24ad9a" }, { fill: "#7c7474" }, { fill: "#a66111" }], markerThemes: [{ fill: "#115fa6", type: 'circle' }, { fill: "#94ae0a", type: 'cross' }, { fill: "#115fa6", type: 'plus' }, { fill: "#94ae0a", type: 'circle' }, { fill: "#a61120", type: 'cross' }] }); } }, function() { var palette = ['#b1da5a', '#4ce0e7', '#e84b67', '#da5abd', '#4d7fe6', '#fec935'], names = ['Green', 'Sky', 'Red', 'Purple', 'Blue', 'Yellow'], i = 0, j = 0, l = palette.length, themes = Ext.chart.theme, categories = [['#f0a50a', '#c20024', '#2044ba', '#810065', '#7eae29'], ['#6d9824', '#87146e', '#2a9196', '#d39006', '#1e40ac'], ['#fbbc29', '#ce2e4e', '#7e0062', '#158b90', '#57880e'], ['#ef5773', '#fcbd2a', '#4f770d', '#1d3eaa', '#9b001f'], ['#7eae29', '#fdbe2a', '#910019', '#27b4bc', '#d74dbc'], ['#44dce1', '#0b2592', '#996e05', '#7fb325', '#b821a1']], cats = categories.length; //Create themes from base colors for (; i < l; i++) { themes[names[i]] = (function(color) { return Ext.extend(themes.Base, { constructor: function(config) { themes.Base.prototype.constructor.call(this, Ext.apply({ baseColor: color }, config)); } }); }(palette[i])); } //Create theme from color array for (i = 0; i < cats; i++) { themes['Category' + (i + 1)] = (function(category) { return Ext.extend(themes.Base, { constructor: function(config) { themes.Base.prototype.constructor.call(this, Ext.apply({ colors: category }, config)); } }); }(categories[i])); } });