[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-plot-util', function (Y, NAME) {
   9  
  10  /**
  11   * Provides functionality for drawing plots in a series.
  12   *
  13   * @module charts
  14   * @submodule series-plot-util
  15   */
  16  var Y_Lang = Y.Lang,
  17      _getClassName = Y.ClassNameManager.getClassName,
  18      SERIES_MARKER = _getClassName("seriesmarker");
  19  
  20  /**
  21   * Utility class used for drawing markers.
  22   *
  23   * @class Plots
  24   * @constructor
  25   * @submodule series-plot-util
  26   */
  27  function Plots(cfg)
  28  {
  29      var attrs = {
  30          markers: {
  31              getter: function()
  32              {
  33                  return this._markers;
  34              }
  35          }
  36      };
  37      this.addAttrs(attrs, cfg);
  38  }
  39  
  40  Plots.prototype = {
  41      /**
  42       * Storage for default marker styles.
  43       *
  44       * @property _plotDefaults
  45       * @type Object
  46       * @private
  47       */
  48      _plotDefaults: null,
  49  
  50      /**
  51       * Draws the markers
  52       *
  53       * @method drawPlots
  54       * @protected
  55       */
  56      drawPlots: function()
  57      {
  58          if(!this.get("xcoords") || this.get("xcoords").length < 1)
  59          {
  60              return;
  61          }
  62          var isNumber = Y_Lang.isNumber,
  63              style = this._copyObject(this.get("styles").marker),
  64              w = style.width,
  65              h = style.height,
  66              xcoords = this.get("xcoords"),
  67              ycoords = this.get("ycoords"),
  68              i = 0,
  69              len = xcoords.length,
  70              top = ycoords[0],
  71              left,
  72              marker,
  73              offsetWidth = w/2,
  74              offsetHeight = h/2,
  75              xvalues,
  76              yvalues,
  77              fillColors = null,
  78              borderColors = null,
  79              graphOrder = this.get("graphOrder"),
  80              groupMarkers = this.get("groupMarkers");
  81          if(groupMarkers)
  82          {
  83              xvalues = [];
  84              yvalues = [];
  85              for(; i < len; ++i)
  86              {
  87                  xvalues.push(parseFloat(xcoords[i] - offsetWidth));
  88                  yvalues.push(parseFloat(ycoords[i] - offsetHeight));
  89              }
  90              this._createGroupMarker({
  91                  xvalues: xvalues,
  92                  yvalues: yvalues,
  93                  fill: style.fill,
  94                  border: style.border,
  95                  dimensions: {
  96                      width: w,
  97                      height: h
  98                  },
  99                  graphOrder: graphOrder,
 100                  shape: style.shape
 101              });
 102              return;
 103          }
 104          if(Y_Lang.isArray(style.fill.color))
 105          {
 106              fillColors = style.fill.color.concat();
 107          }
 108          if(Y_Lang.isArray(style.border.color))
 109          {
 110              borderColors = style.border.color.concat();
 111          }
 112          this._createMarkerCache();
 113          for(; i < len; ++i)
 114          {
 115              top = parseFloat(ycoords[i] - offsetHeight);
 116              left = parseFloat(xcoords[i] - offsetWidth);
 117              if(!isNumber(left) || !isNumber(top))
 118              {
 119                  this._markers.push(null);
 120                  continue;
 121              }
 122              if(fillColors)
 123              {
 124                  style.fill.color = fillColors[i % fillColors.length];
 125              }
 126              if(borderColors)
 127              {
 128                  style.border.color = borderColors[i % borderColors.length];
 129              }
 130  
 131              style.x = left;
 132              style.y = top;
 133              marker = this.getMarker(style, graphOrder, i);
 134          }
 135          this._clearMarkerCache();
 136      },
 137  
 138      /**
 139       * Pre-defined group shapes.
 140       *
 141       * @property _groupShapes
 142       * @private
 143       */
 144      _groupShapes: {
 145          circle: Y.CircleGroup,
 146          rect: Y.RectGroup,
 147          ellipse: Y.EllipseGroup,
 148          diamond: Y.DiamondGroup
 149      },
 150  
 151      /**
 152       * Returns the correct group shape class.
 153       *
 154       * @method _getGroupShape
 155       * @param {Shape | String} shape Indicates which shape class.
 156       * @return Function
 157       * @protected
 158       */
 159      _getGroupShape: function(shape)
 160      {
 161          if(Y_Lang.isString(shape))
 162          {
 163              shape = this._groupShapes[shape];
 164          }
 165          return shape;
 166      },
 167  
 168      /**
 169       * Gets the default values for series that use the utility. This method is used by
 170       * the class' `styles` attribute's getter to get build default values.
 171       *
 172       * @method _getPlotDefaults
 173       * @return Object
 174       * @protected
 175       */
 176      _getPlotDefaults: function()
 177      {
 178          var defs = {
 179              fill:{
 180                  type: "solid",
 181                  alpha: 1,
 182                  colors:null,
 183                  alphas: null,
 184                  ratios: null
 185              },
 186              border:{
 187                  weight: 1,
 188                  alpha: 1
 189              },
 190              width: 10,
 191              height: 10,
 192              shape: "circle"
 193          };
 194          defs.fill.color = this._getDefaultColor(this.get("graphOrder"), "fill");
 195          defs.border.color = this._getDefaultColor(this.get("graphOrder"), "border");
 196          return defs;
 197      },
 198  
 199      /**
 200       * Collection of markers to be used in the series.
 201       *
 202       * @property _markers
 203       * @type Array
 204       * @private
 205       */
 206      _markers: null,
 207  
 208      /**
 209       * Collection of markers to be re-used on a series redraw.
 210       *
 211       * @property _markerCache
 212       * @type Array
 213       * @private
 214       */
 215      _markerCache: null,
 216  
 217      /**
 218       * Gets and styles a marker. If there is a marker in cache, it will use it. Otherwise
 219       * it will create one.
 220       *
 221       * @method getMarker
 222       * @param {Object} styles Hash of style properties.
 223       * @param {Number} order Order of the series.
 224       * @param {Number} index Index within the series associated with the marker.
 225       * @return Shape
 226       * @protected
 227       */
 228      getMarker: function(styles, order, index)
 229      {
 230          var marker,
 231              border = styles.border;
 232          styles.id = this._getChart().get("id") + "_" + order + "_" + index;
 233          //fix name differences between graphic layer
 234          border.opacity = border.alpha;
 235          styles.stroke = border;
 236          styles.fill.opacity = styles.fill.alpha;
 237          if(this._markerCache.length > 0)
 238          {
 239              while(!marker)
 240              {
 241                  if(this._markerCache.length < 1)
 242                  {
 243                      marker = this._createMarker(styles);
 244                      break;
 245                  }
 246                  marker = this._markerCache.shift();
 247  
 248              }
 249              marker.set(styles);
 250          }
 251          else
 252          {
 253              marker = this._createMarker(styles);
 254          }
 255          this._markers.push(marker);
 256          return marker;
 257      },
 258  
 259      /**
 260       * Creates a shape to be used as a marker.
 261       *
 262       * @method _createMarker
 263       * @param {Object} styles Hash of style properties.
 264       * @return Shape
 265       * @private
 266       */
 267      _createMarker: function(styles)
 268      {
 269          var graphic = this.get("graphic"),
 270              marker,
 271              cfg = this._copyObject(styles);
 272          cfg.type = cfg.shape;
 273          marker = graphic.addShape(cfg);
 274          marker.addClass(SERIES_MARKER);
 275          return marker;
 276      },
 277  
 278      /**
 279       * Creates a cache of markers for reuse.
 280       *
 281       * @method _createMarkerCache
 282       * @private
 283       */
 284      _createMarkerCache: function()
 285      {
 286          if(this._groupMarker)
 287          {
 288              this._groupMarker.destroy();
 289              this._groupMarker = null;
 290          }
 291          if(this._markers && this._markers.length > 0)
 292          {
 293              this._markerCache = this._markers.concat();
 294          }
 295          else
 296          {
 297              this._markerCache = [];
 298          }
 299          this._markers = [];
 300      },
 301  
 302      /**
 303       * Draws a series of markers in a single shape instance.
 304       *
 305       * @method _createGroupMarkers
 306       * @param {Object} styles Set of configuration properties used to create the markers.
 307       * @protected
 308       */
 309      _createGroupMarker: function(styles)
 310      {
 311          var marker,
 312              markers = this.get("markers"),
 313              border = styles.border,
 314              graphic,
 315              cfg,
 316              shape;
 317          if(markers && markers.length > 0)
 318          {
 319              while(markers.length > 0)
 320              {
 321                  marker = markers.shift();
 322                  marker.destroy();
 323              }
 324              this.set("markers", []);
 325          }
 326          //fix name differences between graphic layer
 327          border.opacity = border.alpha;
 328          cfg = {
 329              id: this._getChart().get("id") + "_" + styles.graphOrder,
 330              stroke: border,
 331              fill: styles.fill,
 332              dimensions: styles.dimensions,
 333              xvalues: styles.xvalues,
 334              yvalues: styles.yvalues
 335          };
 336          cfg.fill.opacity = styles.fill.alpha;
 337          shape = this._getGroupShape(styles.shape);
 338          if(shape)
 339          {
 340              cfg.type = shape;
 341          }
 342          if(styles.hasOwnProperty("radius") && !isNaN(styles.radius))
 343          {
 344              cfg.dimensions.radius = styles.radius;
 345          }
 346          if(this._groupMarker)
 347          {
 348              this._groupMarker.destroy();
 349          }
 350          graphic = this.get("graphic");
 351          this._groupMarker = graphic.addShape(cfg);
 352          graphic._redraw();
 353      },
 354  
 355      /**
 356       * Toggles visibility
 357       *
 358       * @method _toggleVisible
 359       * @param {Boolean} visible indicates visibilitye
 360       * @private
 361       */
 362      _toggleVisible: function(visible)
 363      {
 364          var marker,
 365              markers = this.get("markers"),
 366              i = 0,
 367              len;
 368          if(markers)
 369          {
 370              len = markers.length;
 371              for(; i < len; ++i)
 372              {
 373                  marker = markers[i];
 374                  if(marker)
 375                  {
 376                      marker.set("visible", visible);
 377                  }
 378              }
 379          }
 380      },
 381  
 382      /**
 383       * Removes unused markers from the marker cache
 384       *
 385       * @method _clearMarkerCache
 386       * @private
 387       */
 388      _clearMarkerCache: function()
 389      {
 390          var marker;
 391          while(this._markerCache.length > 0)
 392          {
 393              marker = this._markerCache.shift();
 394              if(marker)
 395              {
 396                  marker.destroy();
 397              }
 398          }
 399      },
 400  
 401      /**
 402       * Resizes and positions markers based on a mouse interaction.
 403       *
 404       * @method updateMarkerState
 405       * @param {String} type state of the marker
 406       * @param {Number} i index of the marker
 407       * @protected
 408       */
 409      updateMarkerState: function(type, i)
 410      {
 411          if(this._markers && this._markers[i])
 412          {
 413              var w,
 414                  h,
 415                  styles = this._copyObject(this.get("styles").marker),
 416                  state = this._getState(type),
 417                  xcoords = this.get("xcoords"),
 418                  ycoords = this.get("ycoords"),
 419                  marker = this._markers[i],
 420                  markerStyles = state === "off" || !styles[state] ? styles : styles[state];
 421                  markerStyles.fill.color = this._getItemColor(markerStyles.fill.color, i);
 422                  markerStyles.border.color = this._getItemColor(markerStyles.border.color, i);
 423                  markerStyles.stroke = markerStyles.border;
 424                  marker.set(markerStyles);
 425                  w = markerStyles.width;
 426                  h = markerStyles.height;
 427                  marker.set("x", (xcoords[i] - w/2));
 428                  marker.set("y",  (ycoords[i] - h/2));
 429                  marker.set("visible", this.get("visible"));
 430          }
 431      },
 432  
 433      /**
 434       * Parses a color from an array.
 435       *
 436       * @method _getItemColor
 437       * @param {Array} val collection of colors
 438       * @param {Number} i index of the item
 439       * @return String
 440       * @protected
 441       */
 442      _getItemColor: function(val, i)
 443      {
 444          if(Y_Lang.isArray(val))
 445          {
 446              return val[i % val.length];
 447          }
 448          return val;
 449      },
 450  
 451      /**
 452       * Method used by `styles` setter. Overrides base implementation.
 453       *
 454       * @method _setStyles
 455       * @param {Object} newStyles Hash of properties to update.
 456       * @return Object
 457       * @protected
 458       */
 459      _setStyles: function(val)
 460      {
 461          val = this._parseMarkerStyles(val);
 462          return Y.Renderer.prototype._setStyles.apply(this, [val]);
 463      },
 464  
 465      /**
 466       * Combines new styles with existing styles.
 467       *
 468       * @method _parseMarkerStyles
 469       * @param {Object} Object containing style properties for the marker.
 470       * @return Object
 471       * @private
 472       */
 473      _parseMarkerStyles: function(val)
 474      {
 475          if(val.marker)
 476          {
 477              var defs = this._getPlotDefaults();
 478              val.marker = this._mergeStyles(val.marker, defs);
 479              if(val.marker.over)
 480              {
 481                  val.marker.over = this._mergeStyles(val.marker.over, val.marker);
 482              }
 483              if(val.marker.down)
 484              {
 485                  val.marker.down = this._mergeStyles(val.marker.down, val.marker);
 486              }
 487          }
 488          return val;
 489      },
 490  
 491      /**
 492       * Returns marker state based on event type
 493       *
 494       * @method _getState
 495       * @param {String} type event type
 496       * @return String
 497       * @protected
 498       */
 499      _getState: function(type)
 500      {
 501          var state;
 502          switch(type)
 503          {
 504              case "mouseout" :
 505                  state = "off";
 506              break;
 507              case "mouseover" :
 508                  state = "over";
 509              break;
 510              case "mouseup" :
 511                  state = "over";
 512              break;
 513              case "mousedown" :
 514                  state = "down";
 515              break;
 516          }
 517          return state;
 518      },
 519  
 520      /**
 521       * @property _statSyles
 522       * @type Object
 523       * @private
 524       */
 525      _stateSyles: null,
 526  
 527      /**
 528       * @protected
 529       *
 530       * Draws the series.
 531       *
 532       * @method drawSeries
 533       */
 534      drawSeries: function()
 535      {
 536          this.drawPlots();
 537      },
 538  
 539      /**
 540       * @protected
 541       *
 542       * Gets the default value for the `styles` attribute. Overrides
 543       * base implementation.
 544       *
 545       * @method _getDefaultStyles
 546       * @return Object
 547       */
 548      _getDefaultStyles: function()
 549      {
 550          var styles = this._mergeStyles({marker:this._getPlotDefaults()}, this.constructor.superclass._getDefaultStyles());
 551          return styles;
 552      }
 553  };
 554  
 555  Y.augment(Plots, Y.Attribute);
 556  Y.Plots = Plots;
 557  
 558  
 559  }, '3.17.2');