src/chart/theme/Base.js

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