profilerviewer-beta.js

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

/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
(function() {

    /**
     * The ProfilerViewer module provides a graphical display for viewing
	 * the output of the YUI Profiler <http://developer.yahoo.com/yui/profiler>.
     * @module profilerviewer
     * @requires yahoo, dom, event, element, profiler, yuiloader
     */

    /**
     * A widget to view YUI Profiler output.
     * @namespace YAHOO.widget
     * @class ProfilerViewer
     * @extends YAHOO.util.Element
     * @constructor
     * @param {HTMLElement | String | Object} el(optional) The html 
     * element into which the ProfileViewer should be rendered. 
     * An element will be created if none provided.
     * @param {Object} attr (optional) A key map of the ProfilerViewer's 
     * initial attributes.  Ignored if first arg is an attributes object.
     */
    YAHOO.widget.ProfilerViewer = function(el, attr) {
        attr = attr || {};
        if (arguments.length == 1 && !YAHOO.lang.isString(el) && !el.nodeName) {
            attr = el;
            el = attr.element || null;
        }
        if (!el && !attr.element) {
            el = this._createProfilerViewerElement();
        }

    	YAHOO.widget.ProfilerViewer.superclass.constructor.call(this, el, attr); 
		
		this._init();
		
    };

    YAHOO.extend(YAHOO.widget.ProfilerViewer, YAHOO.util.Element);
	
	// Static members of YAHOO.widget.ProfilerViewer:
	YAHOO.lang.augmentObject(YAHOO.widget.ProfilerViewer, {
		/**
		 * Classname for ProfilerViewer containing element.
		 * @static
		 * @property CLASS
		 * @type string
		 * @public
		 * @default "yui-pv"
		 */
		CLASS: 'yui-pv',
	
		/**
		 * Classname for ProfilerViewer button dashboard. 
		 * @static
		 * @property CLASS_DASHBOARD
		 * @type string
		 * @public
		 * @default "yui-pv-dashboard"
		 */
		CLASS_DASHBOARD: 'yui-pv-dashboard',

		/**
		 * Classname for the "refresh data" button. 
		 * @static
		 * @property CLASS_REFRESH
		 * @type string
		 * @public
		 * @default "yui-pv-refresh"
		 */
		CLASS_REFRESH: 'yui-pv-refresh',

		/**
		 * Classname for busy indicator in the dashboard. 
		 * @static
		 * @property CLASS_BUSY
		 * @type string
		 * @public
		 * @default "yui-pv-busy"
		 */
		CLASS_BUSY: 'yui-pv-busy',
	
		/**
		 * Classname for element containing the chart and chart
		 * legend elements.
		 * @static
		 * @property CLASS_CHART_CONTAINER
		 * @type string
		 * @public
		 * @default "yui-pv-chartcontainer"
		 */
		CLASS_CHART_CONTAINER: 'yui-pv-chartcontainer',
	
		/**
		 * Classname for element containing the chart.
		 * @static
		 * @property CLASS_CHART
		 * @type string
		 * @public
		 * @default "yui-pv-chart"
		 */
		CLASS_CHART: 'yui-pv-chart',
		
		/**
		 * Classname for element containing the chart's legend. 
		 * @static
		 * @property CLASS_CHART_LEGEND
		 * @type string
		 * @public
		 * @default "yui-pv-chartlegend"
		 */
		CLASS_CHART_LEGEND: 'yui-pv-chartlegend',
		
		/**
		 * Classname for element containing the datatable. 
		 * @static
		 * @property CLASS_TABLE
		 * @type string
		 * @public
		 * @default "yui-pv-table"
		 */
		CLASS_TABLE: 'yui-pv-table',
		
		/**
		 * Strings used in the UI.
		 * @static
		 * @property STRINGS
		 * @object
		 * @public
		 * @default English language strings for UI.
		 */
		STRINGS: {
			title: "YUI Profiler (beta)",
			buttons: {
				viewprofiler: "View Profiler Data",
				hideprofiler: "Hide Profiler Report",
				showchart: "Show Chart",
				hidechart: "Hide Chart",
				refreshdata: "Refresh Data"
			},
			colHeads: {
				//key: [column head label, width in pixels]
				fn: ["Function/Method", null], //must auto-size
				calls: ["Calls", 40],
				avg: ["Average", 80],
				min: ["Shortest", 70],
				max: ["Longest", 70],
				total: ["Total Time", 70],
				pct: ["Percent", 70]
			},
			millisecondsAbbrev: "ms",
			initMessage: "initialiazing chart...",
			installFlashMessage: "Unable to load Flash content. The YUI Charts Control requires Flash Player 9.0.45 or higher. You can download the latest version of Flash Player from the <a href='http://www.adobe.com/go/getflashplayer'>Adobe Flash Player Download Center</a>."
		},

		/**
		 * Function used to format numbers in milliseconds
		 * for chart; must be publicly accessible, per Charts spec.
		 * @static
		 * @property timeAxisLabelFunction
		 * @type function
		 * @private
		 */
		timeAxisLabelFunction: function(n) {
			var a = (n === Math.floor(n)) ? n : (Math.round(n*1000))/1000;
			return (a + " " + YAHOO.widget.ProfilerViewer.STRINGS.millisecondsAbbrev);
		},

		/**
		 * Function used to format percent numbers for chart; must
		 * be publicly accessible, per Charts spec.
		 * @static
		 * @property percentAxisLabelFunction
		 * @type function
		 * @private
		 */
		percentAxisLabelFunction: function(n) {
			var a = (n === Math.floor(n)) ? n : (Math.round(n*100))/100;
			return (a + "%");
		}
		
	
	},true);
	

	//
	// STANDARD SHORTCUTS
	//
    var Dom = YAHOO.util.Dom;
    var Event = YAHOO.util.Event;
	var Profiler = YAHOO.tool.Profiler;
	var PV = YAHOO.widget.ProfilerViewer;
	var proto = PV.prototype;


	//
	// PUBLIC METHODS
	//
	
	 /**
     * Refreshes the data displayed in the ProfilerViewer. When called,
	 * this will invoke a refresh of the DataTable and (if displayed)
	 * the Chart.
     * @method refreshData
     * @return void
	 * @public
     */	
	proto.refreshData = function() {
		this.fireEvent("dataRefreshEvent");
	};

	 /**
     * Returns the element containing the console's header.
     * @method getHeadEl
     * @return HTMLElement
	 * @public
     */	
	proto.getHeadEl = function() {
		return (this._headEl) ? Dom.get(this._headEl) : false;
	};

	 /**
     * Returns the element containing the console's body, including
	 * the chart and the datatable..
     * @method getBodyEl
     * @return HTMLElement
	 * @public
     */	
	proto.getBodyEl = function() {
		return (this._bodyEl) ? Dom.get(this._bodyEl) : false;
	};

	 /**
     * Returns the element containing the console's chart.
     * @method getChartEl
     * @return HTMLElement
	 * @public
     */	
	proto.getChartEl = function() {
		return (this._chartEl) ? Dom.get(this._chartEl) : false;
	};

	 /**
     * Returns the element containing the console's dataTable.
     * @method getTableEl
     * @return HTMLElement
	 * @public
     */	
	proto.getTableEl = function() {
		return (this._tableEl) ? Dom.get(this._tableEl) : false;
	};

	 /**
     * Returns the element containing the console's DataTable
	 * instance.
     * @method getDataTable
     * @return YAHOO.widget.DataTable
	 * @public
     */	
	proto.getDataTable = function() {
		return this._dataTable;
	};

	 /**
     * Returns the element containing the console's Chart instance.
     * @method getChart
     * @return YAHOO.widget.BarChart
	 * @public
     */	
	proto.getChart = function() {
		return this._chart;
	};


    //
    // PRIVATE PROPERTIES
    //
    proto._rendered = false;
	proto._headEl = null;
	proto._bodyEl = null;
	proto._toggleVisibleEl = null;
	proto._busyEl = null;
	proto._busy = false;
	
	proto._tableEl = null;
	proto._dataTable = null;

	proto._chartEl = null;
	proto._chartLegendEl = null;
	proto._chartElHeight = 250;
	proto._chart = null;
	proto._chartInitialized = false;

    //
    // PRIVATE METHODS
    //

	proto._init = function() {
		/**
		 * CUSTOM EVENTS
		 **/
		
		/**
		 * Fired when a data refresh is requested. No arguments are passed
		 * with this event.
		 *
		 * @event refreshDataEvent
		 */
		this.createEvent("dataRefreshEvent");
		
		/**
		 * Fired when the viewer canvas first renders. No arguments are passed
		 * with this event.
		 *
		 * @event renderEvent
		 */
		this.createEvent("renderEvent");

		this.on("dataRefreshEvent", this._refreshDataTable, this, true);
		
		this._initLauncherDOM();
		
		if(this.get("showChart")) {
			this.on("sortedByChange", this._refreshChart);
		}

	};

	/**
	 * If no element is passed in, create it as the first element
	 * in the document.
	 * @method _createProfilerViewerElement
	 * @return HTMLElement
	 * @private
	 */
	proto._createProfilerViewerElement = function() {

		var el = document.createElement("div");
		document.body.insertBefore(el, document.body.firstChild);
		Dom.addClass(el, this.SKIN_CLASS);
		Dom.addClass(el, PV.CLASS);
		return el;
	};
			
    /**
     * Provides a readable name for the ProfilerViewer instance.
     * @method toString
     * @return String
	 * @private
	 */
    proto.toString = function() {
        return "ProfilerViewer " + (this.get('id') || this.get('tagName'));
    };

    /**
     * Toggles visibility of the viewer canvas.
     * @method _toggleVisible
     * @return void
	 * @private
     */	
	proto._toggleVisible = function() {
		
		var newVis = (this.get("visible")) ? false : true;
		this.set("visible", newVis);
    };

    /**
     * Shows the viewer canvas.
     * @method show
     * @return void
	 * @private
     */	
	 proto._show = function() {
	 	if(!this._busy) {
			this._setBusyState(true);
			if(!this._rendered) {
				var loader = new YAHOO.util.YUILoader();
				if (this.get("base")) {
					loader.base = this.get("base");
				}
				
				var modules = ["datatable"];
				if(this.get("showChart")) {
					modules.push("charts");
				}
				
				loader.insert({ require: modules,
								onSuccess: function() {
									this._render();
								},
								scope: this});
			} else {