Pie Chart from DataScript

by Trever Shick

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.3.0/lodash.js"></script>
<script src="https://rawgit.com/trevershick/737205b0ba79d8877a43/raw/9d625881d3f42a9660825a69d0a48bf9097d6498/formatbytes.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/datascript.js"></script>
<button onClick="changeType('fileSize');">File Size</button>
<button onClick="changeType('indexSize');">Index Size</button>
<button onClick="changeType('storageSize');">Storage Size</button>
<button onClick="changeType('dataSize');">Data Size</button>

<button onClick="addRecord()">Add Record</button>
<div id="chart"></div>
<script>
    window.d = datascript;
    dataUrl = '//s3.amazonaws.com/trevershick-experiments/ITJcgK6';
</script>
<script src="//rawgit.com/trevershick/6d9364085a1e566b2e18/raw/console.js"></script>

JavaScript

var lastAttr = 'dataSize';
var chart1 = new Highcharts.Chart({
    chart: {
        renderTo: "chart"
    },
    title: {
        text: 'Data Sizes'
    },
    tooltip: {
        formatter: function () {
            return formatBytes(this.y * 1024 * 1024) + " / " + Math.round(this.percentage) + "%";
        }
    },
    series: [{
        type: 'pie',
        data: [],
        name: 'Size in Bytes'
    }]
});
changeType = function (attr) {
    lastAttr = attr;
    buildPie(attr);
}
addRecord = function() {
    var n = Math.floor((Math.random() * 100) + 1);
    var txs = [{"ok":1,"nsSizeMB":14,"fileSize":416768574,"indexSize":261034,"indexes":52,"numExtents":21,"storageSize":23575947,"dataSize":29146245,"avgObjSize":724.05586,"objects":43148,"collections":2,"db":"analytics_db_"+ n,"i":0}];
    d.transact(conn, txs);
}

chart1.showLoading("Creating DataScript Connection");
console.log("Creating DataScript Connection");
window.conn = d.create_conn();

d.listen(conn, function(report) { buildPie(); });

function populateChart(data) {
    populateDatabase(data);
    chart1.hideLoading();
}


function populateDatabase(tx) {
    var tx_report = d.transact(conn, tx);
    console.log("Populated Data.");
}


var buildPieQueryTemplate = _.template('[' 
    + ' :find ?db ?<%=attr%>'     
    + ' :where' 
    + ' [ ?e "<%=attr%>" ?ds ]' 
    + ' [ ?e "db" ?db ]' 
    + ' [(/ ?ds 1048576) ?<%=attr%> ]' 
    + ']');

function buildPie() {
    var a = lastAttr;
    var query = buildPieQueryTemplate({attr:a});
    result = d.q(query, d.db(conn));
    console.log("Values -> ", result);
    chart1.series[0].setData(result);
    chart1.setTitle({text: a + " (" + result.length + ")"});
}


console.log("Loading data from " + dataUrl);
chart1.showLoading("Loading data from " + dataUrl);
$.ajax({
    dataType: "json",
    url: dataUrl,
    data: {},
    success: populateChart
});