Pie chart of metrics

This commit is contained in:
Timothy Baldridge 2020-03-28 22:21:48 -06:00
parent c909ace083
commit 3d2ab80f34

View File

@ -10,6 +10,10 @@
</head>
<body>
<h2>Finished Install Counts</h2>
<canvas id="finished_install_count" width="800" height="600"></canvas>
<hr/>
<h2>Begin Download</h2>
<canvas id="begin_download_chart" width="800" height="600"></canvas>
<hr/>
@ -24,6 +28,7 @@
<script>
var makeChart = function(ele, group) {
var graph = graphql("/graphql",
@ -45,14 +50,14 @@
var result = metrics({type: group})
.then(function (data) {
var data = _.filter(data.dailyUniqueMetrics, series => _.some(series.values, v => v > 2));
var labels = _.last(_.uniq(_.flatten(_.map(data, series => series.labels))), 30);
var datasets = _.last(_.map(data, series => {
var data = _.filter(data.dailyUniqueMetrics, series => _.some(series.values, v => v > 1));
var labels = _.uniq(_.flatten(_.map(data, series => series.labels)));
var datasets = _.map(data, series => {
return {
label: series.seriesName,
fill: false,
data: series.values
}}), 30);
data: _.last(series.values, 30)
}});
var ctx = document.getElementById(ele).getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
@ -60,7 +65,7 @@
// The data for our dataset
data: {
labels: labels,
labels: _.last(labels, 30),
datasets: datasets},
// Configuration options go here
@ -68,10 +73,54 @@
});
});
};
var makePieChart = function(ele, group) {
var graph = graphql("/graphql",
{
method: "POST",
asJSON: true,
headers: {
"Content-Type": "application/json"
}
});
var metrics = graph.query(`($type: MetricType) {
dailyUniqueMetrics(metric_type: $type)
{
seriesName,
labels,
values
}
}`);
var result = metrics({type: group})
.then(function (data) {
var data = _.filter(data.dailyUniqueMetrics, series => _.some(series.values, v => v > 2));
var labels = _.map(data, series => series.seriesName);
var datasets = {data : _.map(data, series => {
return _.reduce(series.values, (x, y) => x + y, 0)})};
console.log(datasets);
console.log(labels);
var ctx = document.getElementById(ele).getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'pie',
// The data for our dataset
data: {
labels: labels,
datasets: [datasets]},
// Configuration options go here
options: {}
});
});
};
makeChart("begin_download_chart", "BEGIN_DOWNLOAD");
makeChart("begin_install_chart", "BEGIN_INSTALL");
makeChart("finished_install_chart", "FINISHED_INSTALL");
makePieChart("finished_install_count", "FINISHED_INSTALL");
</script>
</body>
</html>