lib/yuilib/3.13.0/series-column-stacked/series-column-stacked-debug.js

   1 /*
   2 YUI 3.13.0 (build 508226d)
   3 Copyright 2013 Yahoo! Inc. All rights reserved.
   4 Licensed under the BSD License.
   5 http://yuilibrary.com/license/
   6 */
   7
   8 YUI.add('series-column-stacked', function (Y, NAME) {
   9
  10 /**
  11  * Provides functionality for creating a stacked column series.
  12  *
  13  * @module charts
  14  * @submodule series-column-stacked
  15  */
  16 var Y_Lang = Y.Lang;
  17
  18 /**
  19  * The StackedColumnSeries renders column chart in which series are stacked vertically to show
  20  * their contribution to the cumulative total.
  21  *
  22  * @class StackedColumnSeries
  23  * @extends ColumnSeries
  24  * @uses StackingUtil
  25  * @constructor
  26  * @param {Object} config (optional) Configuration parameters.
  27  * @submodule series-column-stacked
  28  */
  29 Y.StackedColumnSeries = Y.Base.create("stackedColumnSeries", Y.ColumnSeries, [Y.StackingUtil], {
  30     /**
  31      * Draws the series.
  32      *
  33      * @method drawSeries
  34          * @protected
  35          */
  36         drawSeries: function()
  37         {
  38         if(this.get("xcoords").length < 1)
  39         {
  40             return;
  41         }
  42         var isNumber = Y_Lang.isNumber,
  43             style = Y.clone(this.get("styles").marker),
  44             w = style.width,
  45             h = style.height,
  46             xcoords = this.get("xcoords"),
  47             ycoords = this.get("ycoords"),
  48             i = 0,
  49             len = xcoords.length,
  50             top = ycoords[0],
  51             seriesCollection = this.get("seriesTypeCollection"),
  52             ratio,
  53             order = this.get("order"),
  54             graphOrder = this.get("graphOrder"),
  55             left,
  56             marker,
  57             fillColors,
  58             borderColors,
  59             lastCollection,
  60             negativeBaseValues,
  61             positiveBaseValues,
  62             useOrigin = order === 0,
  63             totalWidth = len * w,
  64             dimensions = {
  65                 width: [],
  66                 height: []
  67             },
  68             xvalues = [],
  69             yvalues = [],
  70             groupMarkers = this.get("groupMarkers");
  71         if(Y_Lang.isArray(style.fill.color))
  72         {
  73             fillColors = style.fill.color.concat();
  74         }
  75         if(Y_Lang.isArray(style.border.color))
  76         {
  77             borderColors = style.border.color.concat();
  78         }
  79         this._createMarkerCache();
  80         if(totalWidth > this.get("width"))
  81         {
  82             ratio = this.get("width")/totalWidth;
  83             w *= ratio;
  84             w = Math.max(w, 1);
  85         }
  86         if(!useOrigin)
  87         {
  88             lastCollection = seriesCollection[order - 1];
  89             negativeBaseValues = lastCollection.get("negativeBaseValues");
  90             positiveBaseValues = lastCollection.get("positiveBaseValues");
  91             if(!negativeBaseValues || !positiveBaseValues)
  92             {
  93                 useOrigin = true;
  94                 positiveBaseValues = [];
  95                 negativeBaseValues = [];
  96             }
  97         }
  98         else
  99         {
 100             negativeBaseValues = [];
 101             positiveBaseValues = [];
 102         }
 103         this.set("negativeBaseValues", negativeBaseValues);
 104         this.set("positiveBaseValues", positiveBaseValues);
 105         for(i = 0; i < len; ++i)
 106         {
 107             left = xcoords[i];
 108             top = ycoords[i];
 109
 110             if(!isNumber(top) || !isNumber(left))
 111             {
 112                 if(useOrigin)
 113                 {
 114                     negativeBaseValues[i] = this._bottomOrigin;
 115                     positiveBaseValues[i] = this._bottomOrigin;
 116                 }
 117                 this._markers.push(null);
 118                 continue;
 119             }
 120             if(useOrigin)
 121             {
 122                 h = Math.abs(this._bottomOrigin - top);
 123                 if(top < this._bottomOrigin)
 124                 {
 125                     positiveBaseValues[i] = top;
 126                     negativeBaseValues[i] = this._bottomOrigin;
 127                 }
 128                 else if(top > this._bottomOrigin)
 129                 {
 130                     positiveBaseValues[i] = this._bottomOrigin;
 131                     negativeBaseValues[i] = top;
 132                     top -= h;
 133                 }
 134                 else
 135                 {
 136                     positiveBaseValues[i] = top;
 137                     negativeBaseValues[i] = top;
 138                 }
 139             }
 140             else
 141             {
 142                 if(top > this._bottomOrigin)
 143                 {
 144                     top += (negativeBaseValues[i] - this._bottomOrigin);
 145                     h = top - negativeBaseValues[i];
 146                     negativeBaseValues[i] = top;
 147                     top -= h;
 148                 }
 149                 else if(top <= this._bottomOrigin)
 150                 {
 151                     top = positiveBaseValues[i] - (this._bottomOrigin - top);
 152                     h = positiveBaseValues[i] - top;
 153                     positiveBaseValues[i] = top;
 154                 }
 155             }
 156             if(!isNaN(h) && h > 0)
 157             {
 158                 left -= w/2;
 159                 if(groupMarkers)
 160                 {
 161                     dimensions.width[i] = w;
 162                     dimensions.height[i] = h;
 163                     xvalues.push(left);
 164                     yvalues.push(top);
 165                 }
 166                 else
 167                 {
 168                     style.width = w;
 169                     style.height = h;
 170                     style.x = left;
 171                     style.y = top;
 172                     if(fillColors)
 173                     {
 174                         style.fill.color = fillColors[i % fillColors.length];
 175                     }
 176                     if(borderColors)
 177                     {
 178                         style.border.color = borderColors[i % borderColors.length];
 179                     }
 180                     marker = this.getMarker(style, graphOrder, i);
 181                 }
 182             }
 183             else if(!groupMarkers)
 184             {
 185                this._markers.push(null);
 186             }
 187         }
 188         if(groupMarkers)
 189         {
 190             this._createGroupMarker({
 191                 fill: style.fill,
 192                 border: style.border,
 193                 dimensions: dimensions,
 194                 xvalues: xvalues,
 195                 yvalues: yvalues,
 196                 shape: style.shape
 197             });
 198         }
 199         else
 200         {
 201             this._clearMarkerCache();
 202         }
 203     },
 204
 205     /**
 206      * Resizes and positions markers based on a mouse interaction.
 207      *
 208      * @method updateMarkerState
 209      * @param {String} type state of the marker
 210      * @param {Number} i index of the marker
 211      * @protected
 212      */
 213     updateMarkerState: function(type, i)
 214     {
 215         if(this._markers && this._markers[i])
 216         {
 217             var styles,
 218                 markerStyles,
 219                 state = this._getState(type),
 220                 xcoords = this.get("xcoords"),
 221                 marker = this._markers[i],
 222                 offset = 0,
 223                 fillColor,
 224                 borderColor;
 225             styles = this.get("styles").marker;
 226             offset = styles.width * 0.5;
 227             markerStyles = state === "off" || !styles[state] ? Y.clone(styles) : Y.clone(styles[state]);
 228             markerStyles.height = marker.get("height");
 229             markerStyles.x = (xcoords[i] - offset);
 230             markerStyles.y = marker.get("y");
 231             markerStyles.id = marker.get("id");
 232             fillColor = markerStyles.fill.color;
 233             borderColor = markerStyles.border.color;
 234             if(Y_Lang.isArray(fillColor))
 235             {
 236                 markerStyles.fill.color = fillColor[i % fillColor.length];
 237             }
 238             else
 239             {
 240                 markerStyles.fill.color = this._getItemColor(markerStyles.fill.color, i);
 241             }
 242             if(Y_Lang.isArray(borderColor))
 243             {
 244                 markerStyles.border.color = borderColor[i % borderColor.length];
 245             }
 246             else
 247             {
 248                 markerStyles.border.color = this._getItemColor(markerStyles.border.color, i);
 249             }
 250             marker.set(markerStyles);
 251         }
 252     },
 253
 254     /**
 255      * Gets the default values for the markers.
 256      *
 257      * @method _getPlotDefaults
 258      * @return Object
 259      * @protected
 260      */
 261     _getPlotDefaults: function()
 262     {
 263         var defs = {
 264             fill:{
 265                 type: "solid",
 266                 alpha: 1,
 267                 colors:null,
 268                 alphas: null,
 269                 ratios: null
 270             },
 271             border:{
 272                 weight: 0,
 273                 alpha: 1
 274             },
 275             width: 24,
 276             height: 24,
 277             shape: "rect",
 278
 279             padding:{
 280                 top: 0,
 281                 left: 0,
 282                 right: 0,
 283                 bottom: 0
 284             }
 285         };
 286         defs.fill.color = this._getDefaultColor(this.get("graphOrder"), "fill");
 287         defs.border.color = this._getDefaultColor(this.get("graphOrder"), "border");
 288         return defs;
 289     }
 290 }, {
 291     ATTRS: {
 292         /**
 293          * Read-only attribute indicating the type of series.
 294          *
 295          * @attribute type
 296          * @type String
 297          * @default stackedColumn
 298          */
 299         type: {
 300             value: "stackedColumn"
 301         },
 302
 303         /**
 304          * @attribute negativeBaseValues
 305          * @type Array
 306          * @default null
 307          * @private
 308          */
 309         negativeBaseValues: {
 310             value: null
 311         },
 312
 313         /**
 314          * @attribute positiveBaseValues
 315          * @type Array
 316          * @default null
 317          * @private
 318          */
 319         positiveBaseValues: {
 320             value: null
 321         }
 322
 323         /**
 324          * Style properties used for drawing markers. This attribute is inherited from `ColumnSeries`. Below are the default values:
 325          *  <dl>
 326          *      <dt>fill</dt><dd>A hash containing the following values:
 327          *          <dl>
 328          *              <dt>color</dt><dd>Color of the fill. The default value is determined by the order of the series on the graph. The color
 329          *              will be retrieved from the below array:<br/>
 330          *              `["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]`
 331          *              </dd>
 332          *              <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
 333          *          </dl>
 334          *      </dd>
 335          *      <dt>border</dt><dd>A hash containing the following values:
 336          *          <dl>
 337          *              <dt>color</dt><dd>Color of the border. The default value is determined by the order of the series on the graph. The color
 338          *              will be retrieved from the below array:<br/>
 339          *              `["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]`
 340          *              <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
 341          *              <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd>
 342          *          </dl>
 343          *      </dd>
 344          *      <dt>width</dt><dd>indicates the width of the marker. The default value is 24.</dd>
 345          *      <dt>over</dt><dd>hash containing styles for markers when highlighted by a `mouseover` event. The default
 346          *      values for each style is null. When an over style is not set, the non-over value will be used. For example,
 347          *      the default value for `marker.over.fill.color` is equivalent to `marker.fill.color`.</dd>
 348          *  </dl>
 349          *
 350          * @attribute styles
 351          * @type Object
 352          */
 353     }
 354 });
 355
 356
 357
 358 }, '3.13.0', {"requires": ["series-stacked", "series-column"]});