docs/source/Theme.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-chart-theme-Theme'>/**
  19 </span> * @class Ext.chart.theme.Theme
  20  * @ignore
  21  */
  22 Ext.define('Ext.chart.theme.Theme', {
  23
  24     /* Begin Definitions */
  25
  26     requires: ['Ext.draw.Color'],
  27
  28     /* End Definitions */
  29
  30     theme: 'Base',
  31     themeAttrs: false,
  32
  33     initTheme: function(theme) {
  34         var me = this,
  35             themes = Ext.chart.theme,
  36             key, gradients;
  37         if (theme) {
  38             theme = theme.split(':');
  39             for (key in themes) {
  40                 if (key == theme[0]) {
  41                     gradients = theme[1] == 'gradients';
  42                     me.themeAttrs = new themes[key]({
  43                         useGradients: gradients
  44                     });
  45                     if (gradients) {
  46                         me.gradients = me.themeAttrs.gradients;
  47                     }
  48                     if (me.themeAttrs.background) {
  49                         me.background = me.themeAttrs.background;
  50                     }
  51                     return;
  52                 }
  53             }
  54             //&lt;debug&gt;
  55             Ext.Error.raise('No theme found named &quot;' + theme + '&quot;');
  56             //&lt;/debug&gt;
  57         }
  58     }
  59 },
  60 // This callback is executed right after when the class is created. This scope refers to the newly created class itself
  61 function() {
  62    /* Theme constructor: takes either a complex object with styles like:
  63
  64    {
  65         axis: {
  66             fill: '#000',
  67             'stroke-width': 1
  68         },
  69         axisLabelTop: {
  70             fill: '#000',
  71             font: '11px Arial'
  72         },
  73         axisLabelLeft: {
  74             fill: '#000',
  75             font: '11px Arial'
  76         },
  77         axisLabelRight: {
  78             fill: '#000',
  79             font: '11px Arial'
  80         },
  81         axisLabelBottom: {
  82             fill: '#000',
  83             font: '11px Arial'
  84         },
  85         axisTitleTop: {
  86             fill: '#000',
  87             font: '11px Arial'
  88         },
  89         axisTitleLeft: {
  90             fill: '#000',
  91             font: '11px Arial'
  92         },
  93         axisTitleRight: {
  94             fill: '#000',
  95             font: '11px Arial'
  96         },
  97         axisTitleBottom: {
  98             fill: '#000',
  99             font: '11px Arial'
 100         },
 101         series: {
 102             'stroke-width': 1
 103         },
 104         seriesLabel: {
 105             font: '12px Arial',
 106             fill: '#333'
 107         },
 108         marker: {
 109             stroke: '#555',
 110             fill: '#000',
 111             radius: 3,
 112             size: 3
 113         },
 114         seriesThemes: [{
 115             fill: '#C6DBEF'
 116         }, {
 117             fill: '#9ECAE1'
 118         }, {
 119             fill: '#6BAED6'
 120         }, {
 121             fill: '#4292C6'
 122         }, {
 123             fill: '#2171B5'
 124         }, {
 125             fill: '#084594'
 126         }],
 127         markerThemes: [{
 128             fill: '#084594',
 129             type: 'circle'
 130         }, {
 131             fill: '#2171B5',
 132             type: 'cross'
 133         }, {
 134             fill: '#4292C6',
 135             type: 'plus'
 136         }]
 137     }
 138
 139   ...or also takes just an array of colors and creates the complex object:
 140
 141   {
 142       colors: ['#aaa', '#bcd', '#eee']
 143   }
 144
 145   ...or takes just a base color and makes a theme from it
 146
 147   {
 148       baseColor: '#bce'
 149   }
 150
 151   To create a new theme you may add it to the Themes object:
 152
 153   Ext.chart.theme.MyNewTheme = Ext.extend(Object, {
 154       constructor: function(config) {
 155           Ext.chart.theme.call(this, config, {
 156               baseColor: '#mybasecolor'
 157           });
 158       }
 159   });
 160
 161   //Proposal:
 162   Ext.chart.theme.MyNewTheme = Ext.chart.createTheme('#basecolor');
 163
 164   ...and then to use it provide the name of the theme (as a lower case string) in the chart config.
 165
 166   {
 167       theme: 'mynewtheme'
 168   }
 169  */
 170
 171 (function() {
 172     Ext.chart.theme = function(config, base) {
 173         config = config || {};
 174         var i = 0, l, colors, color,
 175             seriesThemes, markerThemes,
 176             seriesTheme, markerTheme,
 177             key, gradients = [],
 178             midColor, midL;
 179
 180         if (config.baseColor) {
 181             midColor = Ext.draw.Color.fromString(config.baseColor);
 182             midL = midColor.getHSL()[2];
 183             if (midL &lt; 0.15) {
 184                 midColor = midColor.getLighter(0.3);
 185             } else if (midL &lt; 0.3) {
 186                 midColor = midColor.getLighter(0.15);
 187             } else if (midL &gt; 0.85) {
 188                 midColor = midColor.getDarker(0.3);
 189             } else if (midL &gt; 0.7) {
 190                 midColor = midColor.getDarker(0.15);
 191             }
 192             config.colors = [ midColor.getDarker(0.3).toString(),
 193                               midColor.getDarker(0.15).toString(),
 194                               midColor.toString(),
 195                               midColor.getLighter(0.15).toString(),
 196                               midColor.getLighter(0.3).toString()];
 197
 198             delete config.baseColor;
 199         }
 200         if (config.colors) {
 201             colors = config.colors.slice();
 202             markerThemes = base.markerThemes;
 203             seriesThemes = base.seriesThemes;
 204             l = colors.length;
 205             base.colors = colors;
 206             for (; i &lt; l; i++) {
 207                 color = colors[i];
 208                 markerTheme = markerThemes[i] || {};
 209                 seriesTheme = seriesThemes[i] || {};
 210                 markerTheme.fill = seriesTheme.fill = markerTheme.stroke = seriesTheme.stroke = color;
 211                 markerThemes[i] = markerTheme;
 212                 seriesThemes[i] = seriesTheme;
 213             }
 214             base.markerThemes = markerThemes.slice(0, l);
 215             base.seriesThemes = seriesThemes.slice(0, l);
 216         //the user is configuring something in particular (either markers, series or pie slices)
 217         }
 218         for (key in base) {
 219             if (key in config) {
 220                 if (Ext.isObject(config[key]) &amp;&amp; Ext.isObject(base[key])) {
 221                     Ext.apply(base[key], config[key]);
 222                 } else {
 223                     base[key] = config[key];
 224                 }
 225             }
 226         }
 227         if (config.useGradients) {
 228             colors = base.colors || (function () {
 229                 var ans = [];
 230                 for (i = 0, seriesThemes = base.seriesThemes, l = seriesThemes.length; i &lt; l; i++) {
 231                     ans.push(seriesThemes[i].fill || seriesThemes[i].stroke);
 232                 }
 233                 return ans;
 234             })();
 235             for (i = 0, l = colors.length; i &lt; l; i++) {
 236                 midColor = Ext.draw.Color.fromString(colors[i]);
 237                 if (midColor) {
 238                     color = midColor.getDarker(0.1).toString();
 239                     midColor = midColor.toString();
 240                     key = 'theme-' + midColor.substr(1) + '-' + color.substr(1);
 241                     gradients.push({
 242                         id: key,
 243                         angle: 45,
 244                         stops: {
 245                             0: {
 246                                 color: midColor.toString()
 247                             },
 248                             100: {
 249                                 color: color.toString()
 250                             }
 251                         }
 252                     });
 253                     colors[i] = 'url(#' + key + ')';
 254                 }
 255             }
 256             base.gradients = gradients;
 257             base.colors = colors;
 258         }
 259         /*
 260         base.axis = Ext.apply(base.axis || {}, config.axis || {});
 261         base.axisLabel = Ext.apply(base.axisLabel || {}, config.axisLabel || {});
 262         base.axisTitle = Ext.apply(base.axisTitle || {}, config.axisTitle || {});
 263         */
 264         Ext.apply(this, base);
 265     };
 266 })();
 267 });
 268 </pre>
 269 </body>
 270 </html>