src/panel_stats.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Title</title>

    <style>

        body {
            background-color: #eee;
        }

        .page {
            background-color: #fff;
        }

        header {
            width: 100%;
            height: 200px;
            background: #333e52;
        }
        header .blur_background {
            height: 200px;
            width: 100%;
            position: absolute;
            background: url("/images/unsplash.jpg");
            background-size: cover;
            background-position: 50% 60%;
        }
        footer {
            width: 100%;
            height: 50px;
            background: #ddd;
        }

        .mask {
            height: 100%;
            background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3), rgba(0,0,0,0.5));
        }

        header .container {
            padding-top: 50px;
        }

        header h1 {
            font-size: 60px;
            color: #eee;
            margin: 0;
        }
        header h2 {
            font-size: 30px;
            color: #eee;
            margin: 0;
        }

    </style>
</head>
<body>
<header>
    <div class="blur_background">
        <div class="mask"></div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h1>Title</h1>
                <h2>Subtitle</h2>
            </div>
        </div>
    </div>
</header>
<div class="container page">
    <h2>Heading size 2</h2>
    <div class="row">
        <div class="col-xs-12 col-sm-8" id="seqSamples-chart"></div>
        <div class="col-xs-12 col-sm-4">
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </div>
</div>


<div class="container page">
    <h2>Heading size 2</h2>
    <div class="row">
        <div class="col-xs-12 col-sm-8" id="panels-chart"></div>
        <div class="col-xs-12 col-sm-4">
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </div>
</div>

<footer>
    <div class="container">
        <div class="row">
            <p class="col-xs-6">Simple <a href="https://github.com/david-ma/Thalia">Thalia</a> Bootstrap Boilerplate</p>
            <p class="col-xs-6 text-right">By <a href="https://twitter.com/frostickle">@Frostickle</a> <i class="fab fa-twitter" aria-hidden="true"></i></p>
        </div>
    </div>
</footer>
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/chart.css">
<script src="/js/vendor.min.js"></script>
<script src="/js/chart.js"></script>

<script>

var panels = {};

console.log(d3.version);

//d3.tsv("/data/qc/seq_samples.tsv", function(d){
//	if(d) {
//	    panels[d.panel] = panels[d.panel] || { pass: [], fail: [] };
//
//	    if(d.passfail_flag == "1") {
//            panels[d.panel].pass.push(d);
//		} else {
//            panels[d.panel].fail.push(d);
//		}
//	}
//});

var CCP;
var charts = {};

function average( array ) {
    try {
        return parseInt(array.reduce((a, b) => a + b) / array.length);
    } catch (e) {
        console.error(e);
        return null;
    }
}

d3.tsv("/data/qc/seq_samples.tsv").then(function(d){

    console.log("seq_samples.tsv", d);

    d.forEach(function(run){
        panels[run.panel] = panels[run.panel] || { pass: [], fail: [], control: [], NTC: [], dates: [] };
        if(run.passfail_flag == "1") {
            panels[run.panel].pass.push(run);
        } else {
            panels[run.panel].fail.push(run);
        }

        if(run.sample_type == "Control") {
            panels[run.panel].control.push(run);
        } else if(run.sample_type == "NTC") {
            panels[run.panel].NTC.push(run);
        }

        panels[run.panel].dates.push(run.run_date)
    });

    console.log("Panels:", panels);

    console.log("here's what lineChart needs...");
    var stuff = {
        element: "seqSamples-chart",
        title: "SeqSamples vs time",
        data: Object.keys(panels).map(function(panel){
            return {
                name: panel,
                values: panels[panel].dates
            }
        })
    };
    console.log(stuff);

    charts.seqSamples = new Chart(stuff).lineChart();


    charts.panels = new Chart({
        element: "panels-chart",
        title: "Hybrid Capture Panels at Peter Mac",
        xLabel: "Number of Samples Sequenced",
        yLabel: "Panels",
        colours: ["#e34a33", "#2ca25f"],
        data: Object.keys(panels).map(function(panel) {
            return {
                name: panel,
                labels: ["Fail", "Pass"],
                values: [panels[panel].fail.length, panels[panel].pass.length]
            }
        }),
        margin: { top: 70, right: 70, bottom: 50, left: 200 }
    }).barGraph();


    var controls = panels.Pathology_hyb_CCP_2.control || [];

    CCP = {
        average: {},
        samples: []
    };


    var promises = [];

    controls.forEach(function(d){
        var id = `${d.seqrun}-${d.sample_name}`;

        var promise = new Promise(function(resolve, reject){
            d3.tsv(`/data/qc/${id}.tsv`).then(function(sample){
//                console.log("lol hey", id);
//			console.log(sample);

                var blob = {
                    id: id,
                    rois: {}
                };

                sample.forEach(function(roi){
//                CCP.average[roi.Region] = CCP.average[roi.Region] || { min: [], max: [], mean: [] };

                    if(roi["Mean coverage"]) {
                        blob.rois[roi.Region] = {
                            mean: parseFloat(roi["Mean coverage"])
                        };

                        if(roi["Max Coverage"]) {
                            blob.rois[roi.Region].max = parseFloat(roi["Max Coverage"]);
                        }

                        if(roi["Min Coverage"]) {
                            blob.rois[roi.Region].min = parseFloat(roi["Min Coverage"]);
                        }

                    } else {
                        console.warn("No mean coverage..? ", blob);
                    }
                });

                CCP.samples.push(blob);
                resolve(blob);

            }).catch((d) => reject(d));
        });


        promises.push(promise);
    });

    Promise.all(promises).then(function(d){
//        console.log(d);
        CCP.samples = d;
        var rois = Object.keys(d[0].rois);


        rois.forEach(function (roi) {
            CCP.average[roi] = {
                mean: average(d.map((sample) => sample.rois[roi].mean).filter(d => typeof d === "number"), roi),
                max: average(d.map((sample) => sample.rois[roi].max).filter(d => typeof d === "number")),
                min: average(d.map((sample) => sample.rois[roi].min).filter(d => typeof d === "number"))
            };

        });

//        console.log("hey");
//        console.log(CCP.average["FGF14:13:103053804-103054044"]);

//        console.log(CCP);


    }).then(function(d){

//	    console.log("ok, we're here, with this data", d);

//        var chart = new Chart({
//            element: "chart",
//            title: "Who made the most on medicine exports in 2016?"
//        });

    });


    //
//    console.log("CCP: ", CCP);
//
//     Calculate average
//	if(CCP.samples[0]) {
//	    Object.keys(CCP.samples[0]).forEach(function(roi){
//	        console.log(roi);
//		});
//	} else {
//	    console.log("what?");
//	    console.log(CCP.samples[0]);
//	}
//
});


</script>


</body>
</html>