src/chart/theme/Base.js

   1 /**
   2  * @class Ext.chart.theme.Base
   3  * Provides default colors for non-specified things. Should be sub-classed when creating new themes.
   4  * @ignore
   5  */
   6 Ext.define('Ext.chart.theme.Base', {
   7
   8     /* Begin Definitions */
   9
  10     requires: ['Ext.chart.theme.Theme'],
  11
  12     /* End Definitions */
  13
  14     constructor: function(config) {
  15         Ext.chart.theme.call(this, config, {
  16             background: false,
  17             axis: {
  18                 stroke: '#444',
  19                 'stroke-width': 1
  20             },
  21             axisLabelTop: {
  22                 fill: '#444',
  23                 font: '12px Arial, Helvetica, sans-serif',
  24                 spacing: 2,
  25                 padding: 5,
  26                 renderer: function(v) { return v; }
  27             },
  28             axisLabelRight: {
  29                 fill: '#444',
  30                 font: '12px Arial, Helvetica, sans-serif',
  31                 spacing: 2,
  32                 padding: 5,
  33                 renderer: function(v) { return v; }
  34             },
  35             axisLabelBottom: {
  36                 fill: '#444',
  37                 font: '12px Arial, Helvetica, sans-serif',
  38                 spacing: 2,
  39                 padding: 5,
  40                 renderer: function(v) { return v; }
  41             },
  42             axisLabelLeft: {
  43                 fill: '#444',
  44                 font: '12px Arial, Helvetica, sans-serif',
  45                 spacing: 2,
  46                 padding: 5,
  47                 renderer: function(v) { return v; }
  48             },
  49             axisTitleTop: {
  50                 font: 'bold 18px Arial',
  51                 fill: '#444'
  52             },
  53             axisTitleRight: {
  54                 font: 'bold 18px Arial',
  55                 fill: '#444',
  56                 rotate: {
  57                     x:0, y:0,
  58                     degrees: 270
  59                 }
  60             },
  61             axisTitleBottom: {
  62                 font: 'bold 18px Arial',
  63                 fill: '#444'
  64             },
  65             axisTitleLeft: {
  66                 font: 'bold 18px Arial',
  67                 fill: '#444',
  68                 rotate: {
  69                     x:0, y:0,
  70                     degrees: 270
  71                 }
  72             },
  73             series: {
  74                 'stroke-width': 0
  75             },
  76             seriesLabel: {
  77                 font: '12px Arial',
  78                 fill: '#333'
  79             },
  80             marker: {
  81                 stroke: '#555',
  82                 fill: '#000',
  83                 radius: 3,
  84                 size: 3
  85             },
  86             colors: [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"],
  87             seriesThemes: [{
  88                 fill: "#115fa6"
  89             }, {
  90                 fill: "#94ae0a"
  91             }, {
  92                 fill: "#a61120"
  93             }, {
  94                 fill: "#ff8809"
  95             }, {
  96                 fill: "#ffd13e"
  97             }, {
  98                 fill: "#a61187"
  99             }, {
 100                 fill: "#24ad9a"
 101             }, {
 102                 fill: "#7c7474"
 103             }, {
 104                 fill: "#a66111"
 105             }],
 106             markerThemes: [{
 107                 fill: "#115fa6",
 108                 type: 'circle'
 109             }, {
 110                 fill: "#94ae0a",
 111                 type: 'cross'
 112             }, {
 113                 fill: "#a61120",
 114                 type: 'plus'
 115             }]
 116         });
 117     }
 118 }, function() {
 119     var palette = ['#b1da5a', '#4ce0e7', '#e84b67', '#da5abd', '#4d7fe6', '#fec935'],
 120         names = ['Green', 'Sky', 'Red', 'Purple', 'Blue', 'Yellow'],
 121         i = 0, j = 0, l = palette.length, themes = Ext.chart.theme,
 122         categories = [['#f0a50a', '#c20024', '#2044ba', '#810065', '#7eae29'],
 123                       ['#6d9824', '#87146e', '#2a9196', '#d39006', '#1e40ac'],
 124                       ['#fbbc29', '#ce2e4e', '#7e0062', '#158b90', '#57880e'],
 125                       ['#ef5773', '#fcbd2a', '#4f770d', '#1d3eaa', '#9b001f'],
 126                       ['#7eae29', '#fdbe2a', '#910019', '#27b4bc', '#d74dbc'],
 127                       ['#44dce1', '#0b2592', '#996e05', '#7fb325', '#b821a1']],
 128         cats = categories.length;
 129
 130     //Create themes from base colors
 131     for (; i < l; i++) {
 132         themes[names[i]] = (function(color) {
 133             return Ext.extend(themes.Base, {
 134                 constructor: function(config) {
 135                     themes.Base.prototype.constructor.call(this, Ext.apply({
 136                         baseColor: color
 137                     }, config));
 138                 }
 139             });
 140         })(palette[i]);
 141     }
 142
 143     //Create theme from color array
 144     for (i = 0; i < cats; i++) {
 145         themes['Category' + (i + 1)] = (function(category) {
 146             return Ext.extend(themes.Base, {
 147                 constructor: function(config) {
 148                     themes.Base.prototype.constructor.call(this, Ext.apply({
 149                         colors: category
 150                     }, config));
 151                 }
 152             });
 153         })(categories[i]);
 154     }
 155 });