src/index.html

<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>PerfCascade - HAR Waterfall viewer</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- import PerfCascade styles /-->
    <link rel="stylesheet" href="/build/stage/perf-cascade-demo.css">
    <style>
        h1 {display: inline-block; font-size:1em; vertical-align: text-bottom; padding: 1em 3em 0 0; margin: 0;}
        input[type=file] {display: inline-block; vertical-align: text-bottom; padding: 1em 0 0; margin: 0;}
    </style>
</head>

<body>

    <div id="legendHolder"></div>
    <h1>Chrome HAR</h1> <input type="file" id="fileinput" />
    <select id="page-selector" class="page-selector"></select>
    <div id="output" class="output"></div>

    <h1>WPT HAR</h1>
    <input type="file" id="fileinput2" />
    <select id="page-selector2" class="page-selector"></select>
    <div id="output2" class="output"></div>

    <!-- fetch polyfill for dev-page only -->
    <script src="/node_modules/whatwg-fetch/fetch.js"></script>

    <!-- import PerfCascade JS /-->
    <script src="/build/stage/perf-cascade.js"></script>
    <script src="/build/stage/perf-cascade-file-reader.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 outputHolderEl = document.getElementById("output")
            var pageSelectorEl = document.getElementById("page-selector")
            var outputHolder2El = document.getElementById("output2")
            var pageSelector2El = document.getElementById("page-selector2")
            var legendHolderEl = document.getElementById("legendHolder")

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

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

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


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

                    // Just needed for zipped *.zhar files, you can use the standard FileReader api for normal .har files
                    perfCascadeFileReader.readFile(files[0], evt.target.value, function (error, data) {
                        if (error) {
                            console.error(error)
                        } else {
                            renderPerfCascadeChart(data)
                        }
                    }, function(progress) {
                        console.log("unzip progress: ", progress / 100, "%");
                    })
                }

                if (window["fetch"]) {/** load an initial HAR when opening the page */
                    window["fetch"](harUrl)
                        .then(f => f.json().then(j => renderPerfCascadeChart(j.log)))
                }

                /** hook up file input events */
                document.getElementById(fileinputId).addEventListener("change", onFileSubmit, false)
            }

            //Source: http://www.webpagetest.org/result/151226_X7_b43d35e592fab70e0ba012fe11a41020/
            // window["fetch"]("test-data/www.bbc.co.uk.160529_8V_7R3.har")
            // window["fetch"]("test-data/www.bbc.com.har")
            setup({
                    pageSelector: pageSelectorEl,
                    legendHolder: legendHolderEl,
                    showUserTiming: true,
                    // showUserTimingEndMarker: true,
                }, "fileinput", outputHolderEl, "test-data/wpt_en.wikipedia.org.har");
            setup({
                    pageSelector: pageSelector2El,
                    selectedPage: 1,
                    showAlignmentHelpers: false,
                    showMimeTypeIcon: false,
                    showIndicatorIcons: false,
                }, "fileinput2", outputHolder2El, "test-data/wpt_github.com.151226_X7_b43d35e592fab70e0ba012fe11a41020.har");
        })(window.perfCascade)
    </script>
</body>

</html>