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