profilerviewer-beta-debug.js

这是YUI的源码及相关示例。里面有很多很炫的Javascript效果。

				this._chart.set("dataSource", this._chart.get("dataSource"));
				
				/*no further action necessary; chart redraws*/
				return;
			case "calls":
				/*Null out the xAxis formatting before redrawing chart.*/
				this._chart.set("xAxis", this._chartAxisDefinitionPlain);
				break;
			case "pct":
				this._chart.set("xAxis", this._chartAxisDefinitionPercent);
				break;
			default:
				/*Set the default xAxis; redraw legend; set the new series definition.*/
				this._chart.set("xAxis", this._chartAxisDefinitionTime);
				break;
		}
		
		this._drawChartLegend();
		this._chart.set("series", this._getSeriesDef(this.get("sortedBy").key));

		YAHOO.log("Chart refresh complete.", "info", "ProfilerViewer");
	};
	
	/**
	 * Get data for the Chart from DataTable recordset
	 * @method _getChartData
	 * @private
	 */
	proto._getChartData = function() {
		YAHOO.log("Getting data for chart from function DataSource.", "info", "ProfilerViewer");
		var records = this._dataTable.getRecordSet().getRecords(0, this.get("maxChartFunctions"));
		var arr = [];
		for (var i = records.length - 1; i>-1; i--) {
			arr.push(records[i].getData());	
		}
		YAHOO.log("Returning data to Chart: " + YAHOO.lang.dump(arr), "info", "ProfilerViewer");
		return arr;
	};
	
	/**
	 * Build series definition based on current configuration attributes.
	 * @method _getSeriesDef
	 * @private
	 */
	proto._getSeriesDef = function(field) {
		var sd = this.get("chartSeriesDefinitions")[field];
		var arr = [];
		for(var i = 0, j = sd.group.length; i<j; i++) {
			var c = this.get("chartSeriesDefinitions")[sd.group[i]];
			arr.push(
				{displayName:c.displayName,
				 xField:c.xField,
				 style: {color:c.style.color, size:c.style.size}
				}
			);
		}
		
		YAHOO.log("Returning new series definition to chart: " + YAHOO.lang.dump(arr), "info", "ProfilerViewer");
		return arr;
	};
	
	/**
	 * Set up the Chart.
	 * @method _initChart
	 * @private
	 */
	proto._initChart = function() {
		YAHOO.log("Initializing chart...", "info", "ProfilerViewer");
		
		this._sizeChartCanvas();
		
		YAHOO.widget.Chart.SWFURL = this.get("swfUrl");

		var self = this;

		//Create DataSource based on records currently displayed
		//at the top of the sort list in the DataTable.
		var ds = new YAHOO.util.DataSource(
			//force the jsfunction DataSource to run in the scope of
			//the ProfilerViewer, not in the YAHOO.util.DataSource scope:
			function() {
				return self._getChartData.call(self);
			}, 
			{
				responseType: YAHOO.util.DataSource.TYPE_JSARRAY,
				maxCacheEntries: 0
			}
		);

		ds.responseSchema =
		{
			fields: [ "fn", "avg", "calls", "max", "min", "total", "pct" ]
		};
		
		ds.subscribe('responseEvent', this._sizeChartCanvas, this, true);
		
		//Set up the chart itself.
		this._chartAxisDefinitionTime = new YAHOO.widget.NumericAxis();
		this._chartAxisDefinitionTime.labelFunction = "YAHOO.widget.ProfilerViewer.timeAxisLabelFunction";
		
		this._chartAxisDefinitionPercent = new YAHOO.widget.NumericAxis();
		this._chartAxisDefinitionPercent.labelFunction = "YAHOO.widget.ProfilerViewer.percentAxisLabelFunction";

		this._chartAxisDefinitionPlain = new YAHOO.widget.NumericAxis();
		
		this._chart = new YAHOO.widget.BarChart( this._chartEl, ds,
		{
			yField: "fn",
			series: this._getSeriesDef(this.get("sortedBy").key),
			style: this.get("chartStyle"),
			xAxis: this._chartAxisDefinitionTime
		} );
		
		this._drawChartLegend();
		this._chartInitialized = true;
		this._dataTable.unsubscribe("initEvent", this._initChart, this);
		this._dataTable.subscribe("initEvent", this._refreshChart, this, true);
		
		YAHOO.log("Chart initialization complete.", "info", "ProfilerViewer");
	};
	
	/**
	 * Set up the Chart's legend
	 * @method _drawChartLegend
	 * @private
	 **/
	proto._drawChartLegend = function() {
		YAHOO.log("Drawing chart legend...", "info", "ProfilerViewer");
		var seriesDefs = this.get("chartSeriesDefinitions");
		var currentDef = seriesDefs[this.get("sortedBy").key];
		var l = this._chartLegendEl;
		l.innerHTML = "";
		for(var i = 0, j = currentDef.group.length; i<j; i++) {
			var c = seriesDefs[currentDef.group[i]];
			var dt = document.createElement("dt");
			Dom.setStyle(dt, "backgroundColor", "#" + c.style.color);
			var dd = document.createElement("dd");
			dd.innerHTML = c.displayName;
			l.appendChild(dt);
			l.appendChild(dd);
		}
	};
	
	/**
	 * Resize the chart's canvas if based on number of records
	 * returned from the chart's datasource.
	 * @method _sizeChartCanvas
	 * @private
	 **/
	proto._sizeChartCanvas = function(o) {
		YAHOO.log("Resizing chart canvas...", "info", "ProfilerViewer");
		var bars = (o) ? o.response.length : this.get("maxChartFunctions");
		var s = (bars * 36) + 34;
		if (s != parseInt(this._chartElHeight, 10)) {
			this._chartElHeight = s;
			Dom.setStyle(this._chartEl, "height", s + "px");
		}
	};

    /**
     * setAttributeConfigs TabView specific properties.
     * @method initAttributes
     * @param {Object} attr Hash of initial attributes
	 * @method initAttributes
	 * @private
     */
    proto.initAttributes = function(attr) {
		YAHOO.log("Initializing attributes...", "info", "ProfilerViewer");
        YAHOO.widget.ProfilerViewer.superclass.initAttributes.call(this, attr);
        /**
         * The YUI Loader base path from which to pull YUI files needed
		 * in the rendering of the ProfilerViewer canvas.  Passed directly
		 * to YUI Loader.  Leave blank to draw files from
		 * yui.yahooapis.com.
         * @attribute base
         * @type string
		 * @default ""
         */
        this.setAttributeConfig('base', {
            value: attr.base
        });

        /**
         * The height of the DataTable.  The table will scroll
		 * vertically if the content overflows the specified
		 * height.
         * @attribute tableHeight
         * @type string
		 * @default "15em"
         */
        this.setAttributeConfig('tableHeight', {
            value: attr.tableHeight || "15em",
			method: function(s) {
				if(this._dataTable) {
					this._dataTable.set("height", s);
				}
			}
        });
		
        /**
         * The default column key to sort by.  Valid keys are: fn, calls,
		 * avg, min, max, total.  Valid dir values are: 
		 * YAHOO.widget.DataTable.CLASS_ASC and
		 * YAHOO.widget.DataTable.CLASS_DESC (or their
		 * string equivalents).
         * @attribute sortedBy
         * @type string
		 * @default {key:"total", dir:"yui-dt-desc"}
         */
        this.setAttributeConfig('sortedBy', {
            value: attr.sortedBy || {key:"total", dir:"yui-dt-desc"}
        });

        /**
         * A filter function to use in selecting functions that will
		 * appear in the ProfilerViewer report.  The function is passed
		 * a function report object and should return a boolean indicating
		 * whether that function should be included in the ProfilerViewer
		 * display.  The argument is structured as follows:
		 *
		 * {
		 *	 	fn: <str function name>,
		 *		calls : <n number of calls>,
		 *		avg : <n average call duration>,
		 *		max: <n duration of longest call>,
		 *		min: <n duration of shortest call>,
		 *		total: <n total time of all calls>
		 *		points : <array time in ms of each call>
		 *	}
		 *
		 * For example, you would use the follwing filter function to 
		 * return only functions that have been called at least once:
		 * 
		 * 	function(o) {
		 *		return (o.calls > 0);
		 *	}
		 *
         * @attribute filter
         * @type function
		 * @default null
         */
        this.setAttributeConfig('filter', {
            value: attr.filter || null,
			validator: YAHOO.lang.isFunction
        });

		/**
		 * The path to the YUI Charts swf file; must be a full URI
		 * or a path relative to the page being profiled. Changes at runtime
		 * not supported; pass this value in at instantiation.
		 * @attribute swfUrl
		 * @type string
		 * @default "http://yui.yahooapis.com/2.5.0/build/charts/assets/charts.swf"
		 */
		this.setAttributeConfig('swfUrl', {
			value: attr.swfUrl || "http://yui.yahooapis.com/2.5.0/build/charts/assets/charts.swf"
		});

        /**
         * The maximum number of functions to profile in the chart. The
		 * greater the number of functions, the greater the height of the
		 * chart canvas.
		 * height.
         * @attribute maxChartFunctions
         * @type int
		 * @default 6
         */
        this.setAttributeConfig('maxChartFunctions', {
            value: attr.maxChartFunctions || 6,
			method: function(s) {
				if(this._rendered) {
					this._sizeChartCanvas();
				}
			},
			validator: YAHOO.lang.isNumber
        });
		
        /**
         * The style object that defines the chart's visual presentation.
		 * Conforms to the style attribute passed to the Charts Control
		 * constructor.  See Charts Control User's Guide for more information
		 * on how to format this object.
         * @attribute chartStyle
         * @type obj
		 * @default See JS source for default definitions.
         */
        this.setAttributeConfig('chartStyle', {
            value: 	attr.chartStyle || {
				font:
					{
						name: "Arial",
						color: 0xeeee5c,
						size: 12
					},
					background:
					{
						color: "6e6e63"
					}
				},
			method: function() {
					if(this._rendered && this.get("showChart")) {
						this._refreshChart();
					}
				}
        });
		
        /**
         * The series definition information to use when charting
		 * specific fields on the chart.  displayName, xField,
		 * and style members are used to construct the series
		 * definition; the "group" member is the array of fields
		 * that should be charted when the table is sorted by a
		 * given field.
         * @attribute chartSeriesDefinitions
         * @type obj
		 * @default See JS source for full default definitions.
         */
        this.setAttributeConfig('chartSeriesDefinitions', {
            value: 	attr.chartSeriesDefinitions ||  {
						total: {
							displayName: PV.STRINGS.colHeads.total[0],
							xField: "total",
							style: {color:"4d95dd", size:20},
							group: ["total"]
						},
						calls: {		
							displayName: PV.STRINGS.colHeads.calls[0],
							xField: "calls",
							style: {color:"edff9f", size:20},
							group: ["calls"]
						},
						avg: {
							displayName: PV.STRINGS.colHeads.avg[0],
							xField: "avg",
							style: {color:"209daf", size:9},
							group: ["avg", "min", "max"]
						},
						min: {
							displayName: PV.STRINGS.colHeads.min[0],
							xField: "min",
							style: {color:"b6ecf4", size:9},
							group: ["avg", "min", "max"]
						},
						max: {
							displayName: PV.STRINGS.colHeads.max[0],
							xField: "max",
							style: {color:"29c7de", size:9},
							group: ["avg", "min", "max"]
						},
						pct: {
							displayName: PV.STRINGS.colHeads.pct[0],
							xField: "pct",
							style: {color:"C96EDB", size:20},
							group: ["pct"]
						}
				},
			method: function() {
					if(this._rendered && this.get("showChart")) {
						this._refreshChart();
					}
				}
        });
		
        /**
         * The default visibility setting for the viewer canvas. If true,
		 * the viewer will load all necessary files and render itself
		 * immediately upon instantiation; otherwise, the viewer will
		 * load only minimal resources until the user toggles visibility
		 * via the UI.
         * @attribute visible
         * @type boolean
		 * @default false
         */
        this.setAttributeConfig('visible', {
            value: attr.visible || false,
			validator: YAHOO.lang.isBoolean,
			method: function(b) {
				if(b) {
					this._show();
				} else {
					if (this._rendered) {
						this._hide();
					}
				}
			}
        });

        /**
         * The default visibility setting for the chart.
         * @attribute showChart
         * @type boolean
		 * @default true
         */
        this.setAttributeConfig('showChart', {
            value: attr.showChart || true,
			validator: YAHOO.lang.isBoolean,
			writeOnce: true
			
        });
		
		YAHOO.widget.ProfilerViewer.superclass.initAttributes.call(this, attr);
		
		YAHOO.log("Attributes initialized.", "info", "ProfilerViewer");
    };
	
})();
YAHOO.register("profilerviewer", YAHOO.widget.ProfilerViewer, {version: "2.6.0", build: "1321"});