[Summary view] [Print] [Text view]

   1  /*
   2  YUI 3.17.2 (build 9c3c78e)
   3  Copyright 2014 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 = this._copyObject(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] ? this._copyObject(styles) : this._copyObject(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.17.2', {"requires": ["series-stacked", "series-column"]});