Skip to content

Commit

Permalink
#33 improve examples
Browse files Browse the repository at this point in the history
  • Loading branch information
Michael Mrowetz committed May 16, 2016
1 parent 8f3f3a4 commit 51572d0
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 131 deletions.
11 changes: 3 additions & 8 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,7 @@ module.exports = function( grunt ) {
files: {
"src/dist/perf-cascade.js": ["src/ts/main.ts"],
}
},
example: {
files: {
"src/dist/example-dist.js": ["src/ts/example.ts"],
}
}
}
},
tslint: {
options: {
Expand Down Expand Up @@ -102,8 +97,8 @@ module.exports = function( grunt ) {
},
});

grunt.registerTask("distBase", ["clean:dist", "browserify:example", "concat:dist"]);
grunt.registerTask("dist", ["tslint", "distBase", "browserify:dist", "uglify:dist"]);
grunt.registerTask("distBase", ["clean:dist", "browserify:dist", "concat:dist"]);
grunt.registerTask("dist", ["tslint", "distBase", "uglify:dist"]);
grunt.registerTask("ghPages", ["clean:pages", "dist", "concat:pages", "copy:pages", "gh-pages"]);

grunt.registerTask("default", ["distBase", "watch"]);
Expand Down
89 changes: 21 additions & 68 deletions src/dist/example-dist.js → src/dist/perf-cascade.js
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,6 @@
/*PerfCascade build:16/05/2016 */

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var main_1 = require("./main");
var dom = require("./helpers/dom");
function showErrorMsg(msg) {
alert(msg);
}
var outputHolder = document.getElementById("output");
function renderHar(logData) {
dom.removeAllChildren(outputHolder);
var options = {
rowHeight: 23,
showAlignmentHelpers: true,
showIndicatorIcons: true,
leftColumnWith: 25
};
var perfCascadeSvg = main_1.default.newPerfCascadeHar(logData, options);
// const data = HarTransformer.transfrom(logData)
outputHolder.appendChild(perfCascadeSvg);
}
function onFileSubmit(evt) {
var files = evt.target.files;
if (!files) {
showErrorMsg("Failed to load HAR file");
return;
}
var reader = new FileReader();
reader.onload = (function (e) {
var harData;
try {
//TODO: add proper check for HAR files and later other formats
harData = JSON.parse(e.target["result"]);
}
catch (e) {
showErrorMsg("File does not seem to be a valid HAR file");
return undefined;
}
renderHar(harData.log);
});
reader.readAsText(files[0]);
}
if (location.host.indexOf("127.0.0.1") === 0) {
//http://www.webpagetest.org/result/151226_X7_b43d35e592fab70e0ba012fe11a41020/
window["fetch"]("test-data/github.com.MODIFIED.151226_X7_b43d35e592fab70e0ba012fe11a41020.har")
.then(function (f) { return f.json().then(function (j) { return renderHar(j.log); }); });
}
document.getElementById("fileinput").addEventListener("change", onFileSubmit, false);

},{"./helpers/dom":2,"./main":7}],2:[function(require,module,exports){
/**
* DOM Helpers
*/
Expand Down Expand Up @@ -82,7 +35,7 @@ function filter(els, predicat) {
}
exports.filter = filter;

},{}],3:[function(require,module,exports){
},{}],2:[function(require,module,exports){
var misc = require("./misc");
function getResponseHeader(entry, headerName) {
return entry.response.headers.filter(function (h) { return h.name.toLowerCase() === headerName.toLowerCase(); })[0];
Expand Down Expand Up @@ -165,7 +118,7 @@ function isSecure(block) {
}
exports.isSecure = isSecure;

},{"./misc":5}],4:[function(require,module,exports){
},{"./misc":4}],3:[function(require,module,exports){
/**
* SVG Icons
*/
Expand Down Expand Up @@ -255,7 +208,7 @@ function flash(x, y, title, scale) {
}
exports.flash = flash;

},{}],5:[function(require,module,exports){
},{}],4:[function(require,module,exports){
/**
* Misc Helpers
*/
Expand Down Expand Up @@ -344,7 +297,7 @@ function assign(target) {
}
exports.assign = assign;

},{}],6:[function(require,module,exports){
},{}],5:[function(require,module,exports){
/**
* SVG Helpers
*/
Expand Down Expand Up @@ -479,7 +432,7 @@ function removeClass(el, className) {
}
exports.removeClass = removeClass;

},{}],7:[function(require,module,exports){
},{}],6:[function(require,module,exports){
var svg_chart_1 = require("./waterfall/svg-chart");
var har_1 = require("./transformers/har");
/**
Expand All @@ -504,7 +457,7 @@ if (window["define"] === undefined) {
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = exportMembers;

},{"./transformers/har":8,"./waterfall/svg-chart":22}],8:[function(require,module,exports){
},{"./transformers/har":7,"./waterfall/svg-chart":21}],7:[function(require,module,exports){
var time_block_1 = require("../typing/time-block");
var styling_converters_1 = require("./styling-converters");
var HarTransformer = (function () {
Expand Down Expand Up @@ -611,7 +564,7 @@ var HarTransformer = (function () {
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = HarTransformer;

},{"../typing/time-block":10,"./styling-converters":9}],9:[function(require,module,exports){
},{"../typing/time-block":9,"./styling-converters":8}],8:[function(require,module,exports){
/**
* Convert a MIME type into it's WPT style request type (font, script etc)
* @param {string} mimeType
Expand Down Expand Up @@ -657,7 +610,7 @@ function mimeToCssClass(mimeType) {
}
exports.mimeToCssClass = mimeToCssClass;

},{}],10:[function(require,module,exports){
},{}],9:[function(require,module,exports){
var TimeBlock = (function () {
function TimeBlock(name, start, end, cssClass, segments, rawResource, requestType) {
if (cssClass === void 0) { cssClass = ""; }
Expand All @@ -676,7 +629,7 @@ var TimeBlock = (function () {
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = TimeBlock;

},{}],11:[function(require,module,exports){
},{}],10:[function(require,module,exports){
/**
* Data to show in overlay tabs
* @param {number} requestID - request number
Expand Down Expand Up @@ -821,7 +774,7 @@ function getKeys(requestID, block) {
}
exports.getKeys = getKeys;

},{}],12:[function(require,module,exports){
},{}],11:[function(require,module,exports){
var extract_details_keys_1 = require("./extract-details-keys");
function makeDefinitionList(dlKeyValues) {
return Object.keys(dlKeyValues)
Expand Down Expand Up @@ -875,7 +828,7 @@ function createDetailsBody(requestID, block, accordeonHeight) {
}
exports.createDetailsBody = createDetailsBody;

},{"./extract-details-keys":11}],13:[function(require,module,exports){
},{"./extract-details-keys":10}],12:[function(require,module,exports){
//simple pub/sub for change to the overlay
exports.eventTypes = {
"OPEN": "open",
Expand All @@ -892,7 +845,7 @@ function publishToOvelayChanges(change) {
}
exports.publishToOvelayChanges = publishToOvelayChanges;

},{}],14:[function(require,module,exports){
},{}],13:[function(require,module,exports){
var svg_details_overlay_1 = require("./svg-details-overlay");
var overlayChangesPubSub = require("./overlay-changes-pub-sub");
/** Collection of currely open overlays */
Expand Down Expand Up @@ -997,7 +950,7 @@ function renderOverlays(barX, accordeonHeight, overlayHolder, unit) {
});
}

},{"./overlay-changes-pub-sub":13,"./svg-details-overlay":15}],15:[function(require,module,exports){
},{"./overlay-changes-pub-sub":12,"./svg-details-overlay":14}],14:[function(require,module,exports){
var svg = require("../../helpers/svg");
var dom = require("../../helpers/dom");
var html_details_body_1 = require("./html-details-body");
Expand Down Expand Up @@ -1080,7 +1033,7 @@ function createRowInfoOverlay(indexBackup, barX, y, accordeonHeight, block, onCl
}
exports.createRowInfoOverlay = createRowInfoOverlay;

},{"../../helpers/dom":2,"../../helpers/svg":6,"./html-details-body":12}],16:[function(require,module,exports){
},{"../../helpers/dom":1,"../../helpers/svg":5,"./html-details-body":11}],15:[function(require,module,exports){
/**
* Creation of sub-components used in a ressource request row
*/
Expand Down Expand Up @@ -1132,7 +1085,7 @@ function getIndicators(block, docIsSsl) {
}
exports.getIndicators = getIndicators;

},{"../../helpers/heuristics":3}],17:[function(require,module,exports){
},{"../../helpers/heuristics":2}],16:[function(require,module,exports){
/**
* Creation of sub-components used in a ressource request row
*/
Expand Down Expand Up @@ -1354,7 +1307,7 @@ function createRowBg(y, rowHeight, onClick) {
}
exports.createRowBg = createRowBg;

},{"../../helpers/misc":5,"../../helpers/svg":6}],18:[function(require,module,exports){
},{"../../helpers/misc":4,"../../helpers/svg":5}],17:[function(require,module,exports){
var svg = require("../../helpers/svg");
var icons = require("../../helpers/icons");
var misc = require("../../helpers/misc");
Expand Down Expand Up @@ -1420,7 +1373,7 @@ function createRow(index, rectData, block, labelXPos, options, docIsSsl, onDetai
}
exports.createRow = createRow;

},{"../../helpers/heuristics":3,"../../helpers/icons":4,"../../helpers/misc":5,"../../helpers/svg":6,"./svg-indicators":16,"./svg-row-subcomponents":17}],19:[function(require,module,exports){
},{"../../helpers/heuristics":2,"../../helpers/icons":3,"../../helpers/misc":4,"../../helpers/svg":5,"./svg-indicators":15,"./svg-row-subcomponents":16}],18:[function(require,module,exports){
/**
* vertical alignment helper lines
* */
Expand Down Expand Up @@ -1481,7 +1434,7 @@ function makeHoverEvtListeners(hoverEl) {
}
exports.makeHoverEvtListeners = makeHoverEvtListeners;

},{"../../helpers/svg":6}],20:[function(require,module,exports){
},{"../../helpers/svg":5}],19:[function(require,module,exports){
/**
* Creation of sub-components of the waterfall chart
*/
Expand Down Expand Up @@ -1540,7 +1493,7 @@ function createBgRect(block, unit, diagramHeight) {
}
exports.createBgRect = createBgRect;

},{"../../helpers/svg":6,"../details-overlay/overlay-changes-pub-sub":13}],21:[function(require,module,exports){
},{"../../helpers/svg":5,"../details-overlay/overlay-changes-pub-sub":12}],20:[function(require,module,exports){
var svg = require("../../helpers/svg");
var overlayChangesPubSub = require("../details-overlay/overlay-changes-pub-sub");
/**
Expand Down Expand Up @@ -1624,7 +1577,7 @@ function createMarks(marks, unit, diagramHeight) {
}
exports.createMarks = createMarks;

},{"../../helpers/svg":6,"../details-overlay/overlay-changes-pub-sub":13}],22:[function(require,module,exports){
},{"../../helpers/svg":5,"../details-overlay/overlay-changes-pub-sub":12}],21:[function(require,module,exports){
var svg = require("../helpers/svg");
var misc = require("../helpers/misc");
var generalComponents = require("./sub-components/svg-general-components");
Expand Down Expand Up @@ -1758,4 +1711,4 @@ function createWaterfallSvg(data, chartOptions) {
}
exports.createWaterfallSvg = createWaterfallSvg;

},{"../helpers/misc":5,"../helpers/svg":6,"./details-overlay/overlay-changes-pub-sub":13,"./details-overlay/svg-details-overlay-manager":14,"./row/svg-indicators":16,"./row/svg-row":18,"./sub-components/svg-alignment-helper":19,"./sub-components/svg-general-components":20,"./sub-components/svg-marks":21}]},{},[1]);
},{"../helpers/misc":4,"../helpers/svg":5,"./details-overlay/overlay-changes-pub-sub":12,"./details-overlay/svg-details-overlay-manager":13,"./row/svg-indicators":15,"./row/svg-row":17,"./sub-components/svg-alignment-helper":18,"./sub-components/svg-general-components":19,"./sub-components/svg-marks":20}]},{},[6]);
79 changes: 78 additions & 1 deletion src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,90 @@
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- import PerfCascade styles --->
<link rel="stylesheet" href="dist/perf-cascade-full.css">
</head>
<body>

<input type="file" id="fileinput" />


<div id="output"></div>
<script src="dist/example-dist.js"></script>

<!-- import PerfCascade JS --->
<script src="dist/perf-cascade.js"></script>

<script>
/**
* functionality for example page
* `perfCascade` is a global object if not running in AMD or CommonJS context
*/
(function(perfCascade){

/** holder DOM element to render PerfCascade into */
var outputHolder = document.getElementById("output")


/**
* This is where the magic happens
*/
function renderPerfCascadeChart(logData) {
/** remove all children of `outputHolder`,
* so you can upload new HAR files and get a new SVG */
while (outputHolder.childNodes.length > 0) {
outputHolder.removeChild(outputHolder.childNodes[0])
}

/** options for PerfCascade (all have defaults) */
var options = {
rowHeight: 23, //default: 23
showAlignmentHelpers : true, //default: true
showIndicatorIcons: true, //default: true
leftColumnWith: 25 //default: 25
}

/** pass HAR and options to `newPerfCascadeHar` to generate the SVG element*/
var perfCascadeSvg = perfCascade.newPerfCascadeHar(logData, options)

/** append SVG to page - that's it */
outputHolder.appendChild(perfCascadeSvg)
}


/** handle client side file upload */
function onFileSubmit(evt) {
var files = evt.target.files
if (!files) {
alert("Failed to load HAR file")
return
}

var reader = new FileReader()

/** try to parse the file once uploaded to browser */
reader.onload = (e => {
var harData
try {
harData = JSON.parse(e.target["result"])
} catch (e) {
alert("File does not seem to be a valid HAR file")
return undefined
}
renderPerfCascadeChart(harData.log)
})

/** start reading the file */
reader.readAsText(files[0])
}

/** load an initial HAR when opening the page */
//Source: http://www.webpagetest.org/result/151226_X7_b43d35e592fab70e0ba012fe11a41020/
window["fetch"]("test-data/github.com.MODIFIED.151226_X7_b43d35e592fab70e0ba012fe11a41020.har")
.then(f => f.json().then(j => renderPerfCascadeChart(j.log)))

/** hook up file input events */
document.getElementById("fileinput").addEventListener("change", onFileSubmit, false)
})(window.perfCascade)
</script>
</body>
</html>
Loading

0 comments on commit 51572d0

Please sign in to comment.