/* YUI 3.17.2 (build 9c3c78e) Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ YUI.add('series-plot-util', function (Y, NAME) { /** * Provides functionality for drawing plots in a series. * * @module charts * @submodule series-plot-util */ var Y_Lang = Y.Lang, _getClassName = Y.ClassNameManager.getClassName, SERIES_MARKER = _getClassName("seriesmarker"); /** * Utility class used for drawing markers. * * @class Plots * @constructor * @submodule series-plot-util */ function Plots(cfg) { var attrs = { markers: { getter: function() { return this._markers; } } }; this.addAttrs(attrs, cfg); } Plots.prototype = { /** * Storage for default marker styles. * * @property _plotDefaults * @type Object * @private */ _plotDefaults: null, /** * Draws the markers * * @method drawPlots * @protected */ drawPlots: function() { if(!this.get("xcoords") || this.get("xcoords").length < 1) { return; } var isNumber = Y_Lang.isNumber, style = this._copyObject(this.get("styles").marker), w = style.width, h = style.height, xcoords = this.get("xcoords"), ycoords = this.get("ycoords"), i = 0, len = xcoords.length, top = ycoords[0], left, marker, offsetWidth = w/2, offsetHeight = h/2, xvalues, yvalues, fillColors = null, borderColors = null, graphOrder = this.get("graphOrder"), groupMarkers = this.get("groupMarkers"); if(groupMarkers) { xvalues = []; yvalues = []; for(; i < len; ++i) { xvalues.push(parseFloat(xcoords[i] - offsetWidth)); yvalues.push(parseFloat(ycoords[i] - offsetHeight)); } this._createGroupMarker({ xvalues: xvalues, yvalues: yvalues, fill: style.fill, border: style.border, dimensions: { width: w, height: h }, graphOrder: graphOrder, shape: style.shape }); return; } if(Y_Lang.isArray(style.fill.color)) { fillColors = style.fill.color.concat(); } if(Y_Lang.isArray(style.border.color)) { borderColors = style.border.color.concat(); } this._createMarkerCache(); for(; i < len; ++i) { top = parseFloat(ycoords[i] - offsetHeight); left = parseFloat(xcoords[i] - offsetWidth); if(!isNumber(left) || !isNumber(top)) { this._markers.push(null); continue; } if(fillColors) { style.fill.color = fillColors[i % fillColors.length]; } if(borderColors) { style.border.color = borderColors[i % borderColors.length]; } style.x = left; style.y = top; marker = this.getMarker(style, graphOrder, i); } this._clearMarkerCache(); }, /** * Pre-defined group shapes. * * @property _groupShapes * @private */ _groupShapes: { circle: Y.CircleGroup, rect: Y.RectGroup, ellipse: Y.EllipseGroup, diamond: Y.DiamondGroup }, /** * Returns the correct group shape class. * * @method _getGroupShape * @param {Shape | String} shape Indicates which shape class. * @return Function * @protected */ _getGroupShape: function(shape) { if(Y_Lang.isString(shape)) { shape = this._groupShapes[shape]; } return shape; }, /** * Gets the default values for series that use the utility. This method is used by * the class' `styles` attribute's getter to get build default values. * * @method _getPlotDefaults * @return Object * @protected */ _getPlotDefaults: function() { var defs = { fill:{ type: "solid", alpha: 1, colors:null, alphas: null, ratios: null }, border:{ weight: 1, alpha: 1 }, width: 10, height: 10, shape: "circle" }; defs.fill.color = this._getDefaultColor(this.get("graphOrder"), "fill"); defs.border.color = this._getDefaultColor(this.get("graphOrder"), "border"); return defs; }, /** * Collection of markers to be used in the series. * * @property _markers * @type Array * @private */ _markers: null, /** * Collection of markers to be re-used on a series redraw. * * @property _markerCache * @type Array * @private */ _markerCache: null, /** * Gets and styles a marker. If there is a marker in cache, it will use it. Otherwise * it will create one. * * @method getMarker * @param {Object} styles Hash of style properties. * @param {Number} order Order of the series. * @param {Number} index Index within the series associated with the marker. * @return Shape * @protected */ getMarker: function(styles, order, index) { var marker, border = styles.border; styles.id = this._getChart().get("id") + "_" + order + "_" + index; //fix name differences between graphic layer border.opacity = border.alpha; styles.stroke = border; styles.fill.opacity = styles.fill.alpha; if(this._markerCache.length > 0) { while(!marker) { if(this._markerCache.length < 1) { marker = this._createMarker(styles); break; } marker = this._markerCache.shift(); } marker.set(styles); } else { marker = this._createMarker(styles); } this._markers.push(marker); return marker; }, /** * Creates a shape to be used as a marker. * * @method _createMarker * @param {Object} styles Hash of style properties. * @return Shape * @private */ _createMarker: function(styles) { var graphic = this.get("graphic"), marker, cfg = this._copyObject(styles); cfg.type = cfg.shape; marker = graphic.addShape(cfg); marker.addClass(SERIES_MARKER); return marker; }, /** * Creates a cache of markers for reuse. * * @method _createMarkerCache * @private */ _createMarkerCache: function() { if(this._groupMarker) { this._groupMarker.destroy(); this._groupMarker = null; } if(this._markers && this._markers.length > 0) { this._markerCache = this._markers.concat(); } else { this._markerCache = []; } this._markers = []; }, /** * Draws a series of markers in a single shape instance. * * @method _createGroupMarkers * @param {Object} styles Set of configuration properties used to create the markers. * @protected */ _createGroupMarker: function(styles) { var marker, markers = this.get("markers"), border = styles.border, graphic, cfg, shape; if(markers && markers.length > 0) { while(markers.length > 0) { marker = markers.shift(); marker.destroy(); } this.set("markers", []); } //fix name differences between graphic layer border.opacity = border.alpha; cfg = { id: this._getChart().get("id") + "_" + styles.graphOrder, stroke: border, fill: styles.fill, dimensions: styles.dimensions, xvalues: styles.xvalues, yvalues: styles.yvalues }; cfg.fill.opacity = styles.fill.alpha; shape = this._getGroupShape(styles.shape); if(shape) { cfg.type = shape; } if(styles.hasOwnProperty("radius") && !isNaN(styles.radius)) { cfg.dimensions.radius = styles.radius; } if(this._groupMarker) { this._groupMarker.destroy(); } graphic = this.get("graphic"); this._groupMarker = graphic.addShape(cfg); graphic._redraw(); }, /** * Toggles visibility * * @method _toggleVisible * @param {Boolean} visible indicates visibilitye * @private */ _toggleVisible: function(visible) { var marker, markers = this.get("markers"), i = 0, len; if(markers) { len = markers.length; for(; i < len; ++i) { marker = markers[i]; if(marker) { marker.set("visible", visible); } } } }, /** * Removes unused markers from the marker cache * * @method _clearMarkerCache * @private */ _clearMarkerCache: function() { var marker; while(this._markerCache.length > 0) { marker = this._markerCache.shift(); if(marker) { marker.destroy(); } } }, /** * Resizes and positions markers based on a mouse interaction. * * @method updateMarkerState * @param {String} type state of the marker * @param {Number} i index of the marker * @protected */ updateMarkerState: function(type, i) { if(this._markers && this._markers[i]) { var w, h, styles = this._copyObject(this.get("styles").marker), state = this._getState(type), xcoords = this.get("xcoords"), ycoords = this.get("ycoords"), marker = this._markers[i], markerStyles = state === "off" || !styles[state] ? styles : styles[state]; markerStyles.fill.color = this._getItemColor(markerStyles.fill.color, i); markerStyles.border.color = this._getItemColor(markerStyles.border.color, i); markerStyles.stroke = markerStyles.border; marker.set(markerStyles); w = markerStyles.width; h = markerStyles.height; marker.set("x", (xcoords[i] - w/2)); marker.set("y", (ycoords[i] - h/2)); marker.set("visible", this.get("visible")); } }, /** * Parses a color from an array. * * @method _getItemColor * @param {Array} val collection of colors * @param {Number} i index of the item * @return String * @protected */ _getItemColor: function(val, i) { if(Y_Lang.isArray(val)) { return val[i % val.length]; } return val; }, /** * Method used by `styles` setter. Overrides base implementation. * * @method _setStyles * @param {Object} newStyles Hash of properties to update. * @return Object * @protected */ _setStyles: function(val) { val = this._parseMarkerStyles(val); return Y.Renderer.prototype._setStyles.apply(this, [val]); }, /** * Combines new styles with existing styles. * * @method _parseMarkerStyles * @param {Object} Object containing style properties for the marker. * @return Object * @private */ _parseMarkerStyles: function(val) { if(val.marker) { var defs = this._getPlotDefaults(); val.marker = this._mergeStyles(val.marker, defs); if(val.marker.over) { val.marker.over = this._mergeStyles(val.marker.over, val.marker); } if(val.marker.down) { val.marker.down = this._mergeStyles(val.marker.down, val.marker); } } return val; }, /** * Returns marker state based on event type * * @method _getState * @param {String} type event type * @return String * @protected */ _getState: function(type) { var state; switch(type) { case "mouseout" : state = "off"; break; case "mouseover" : state = "over"; break; case "mouseup" : state = "over"; break; case "mousedown" : state = "down"; break; } return state; }, /** * @property _statSyles * @type Object * @private */ _stateSyles: null, /** * @protected * * Draws the series. * * @method drawSeries */ drawSeries: function() { this.drawPlots(); }, /** * @protected * * Gets the default value for the `styles` attribute. Overrides * base implementation. * * @method _getDefaultStyles * @return Object */ _getDefaultStyles: function() { var styles = this._mergeStyles({marker:this._getPlotDefaults()}, this.constructor.superclass._getDefaultStyles()); return styles; } }; Y.augment(Plots, Y.Attribute); Y.Plots = Plots; }, '3.17.2');