mirror of https://gitee.com/bigwinds/arangodb
added ability for custom charts
This commit is contained in:
parent
e5aef17523
commit
bebef82c74
|
@ -27,13 +27,14 @@
|
||||||
margin-right: 7px !important;
|
margin-right: 7px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.db-zoom, .db-minimize, .db-hide, .db-info {
|
.db-zoom, .db-minimize, .db-hide, .db-info, #db-collectionMinimize {
|
||||||
float: right;
|
float: right;
|
||||||
margin-top: -4px !important;
|
margin-top: -4px !important;
|
||||||
margin-right: 4px !important;
|
margin-right: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.db-zoom:hover, .db-minimize:hover, .db-hide, .db-info:hover, .group-close:hover, .group-open:hover {
|
.db-zoom:hover, .db-minimize:hover, .db-hide, .db-info:hover, .group-close:hover, .group-open:hover,
|
||||||
|
#db-collectionMinimize:hover {
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -106,6 +107,11 @@
|
||||||
font: 10px sans-serif;
|
font: 10px sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.svgCollections {
|
||||||
|
height: 300px;
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
.svgClass {
|
.svgClass {
|
||||||
margin-top: 0 !important;
|
margin-top: 0 !important;
|
||||||
padding-top: 0 !important;
|
padding-top: 0 !important;
|
||||||
|
|
|
@ -17,6 +17,9 @@ window.arangoCollections = Backbone.Collection.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
translateStatus : function (status) {
|
translateStatus : function (status) {
|
||||||
|
if (status == 0) {
|
||||||
|
return 'corrupted';
|
||||||
|
}
|
||||||
if (status == 1) {
|
if (status == 1) {
|
||||||
return 'new born collection';
|
return 'new born collection';
|
||||||
}
|
}
|
||||||
|
|
|
@ -35,6 +35,16 @@
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<ul class="thumbnails">
|
<ul class="thumbnails">
|
||||||
|
<li id="detailCollections" class="statSingleClient" style="margin-bottom: 13px !important;">
|
||||||
|
<div class="boxHeader">
|
||||||
|
<h6 id="detailCollectionsHeader" class="dashboardH6">Collections</h6>
|
||||||
|
<i id="db-collectionMinimize" class="icon-white icon-minus"></i>
|
||||||
|
</div>
|
||||||
|
<div id="detailCollectionsChart" class="statChart">
|
||||||
|
<svg class="svgCollections"/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li id="detailGraph" class="statSingleClient">
|
<li id="detailGraph" class="statSingleClient">
|
||||||
<div class="boxHeader">
|
<div class="boxHeader">
|
||||||
<h6 id="detailGraphHeader" class="dashboardH6">User Time</h6>
|
<h6 id="detailGraphHeader" class="dashboardH6">User Time</h6>
|
||||||
|
|
|
@ -8,15 +8,25 @@ var dashboardView = Backbone.View.extend({
|
||||||
charts: {},
|
charts: {},
|
||||||
units: [],
|
units: [],
|
||||||
updateNOW: false,
|
updateNOW: false,
|
||||||
|
collectionsStats: {
|
||||||
|
"corrupted": 0,
|
||||||
|
"new born collection" : 0,
|
||||||
|
"unloaded" : 0,
|
||||||
|
"loaded" : 0,
|
||||||
|
"in the process of being unloaded" : 0,
|
||||||
|
"deleted" : 0
|
||||||
|
},
|
||||||
detailGraph: "userTime",
|
detailGraph: "userTime",
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
this.initUnits();
|
this.initUnits();
|
||||||
|
self.addCustomCharts();
|
||||||
|
|
||||||
this.collection.fetch({
|
this.collection.fetch({
|
||||||
success: function() {
|
success: function() {
|
||||||
|
self.countCollections();
|
||||||
self.calculateSeries();
|
self.calculateSeries();
|
||||||
self.renderCharts();
|
self.renderCharts();
|
||||||
|
|
||||||
|
@ -64,6 +74,16 @@ var dashboardView = Backbone.View.extend({
|
||||||
|
|
||||||
template: new EJS({url: 'js/templates/dashboardView.ejs'}),
|
template: new EJS({url: 'js/templates/dashboardView.ejs'}),
|
||||||
|
|
||||||
|
countCollections: function() {
|
||||||
|
var self = this;
|
||||||
|
$.each(window.arangoCollectionsStore.models, function(k,v) {
|
||||||
|
if ( self.collectionsStats[this.attributes.status] === undefined ) {
|
||||||
|
self.collectionsStats[this.attributes.status] = 0;
|
||||||
|
}
|
||||||
|
self.collectionsStats[this.attributes.status]++;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
$(this.el).html(this.template.text);
|
$(this.el).html(this.template.text);
|
||||||
|
@ -118,42 +138,41 @@ var dashboardView = Backbone.View.extend({
|
||||||
}
|
}
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
//generate function for all custom categories
|
|
||||||
genCustomCategories: function () {
|
|
||||||
//this.genCustomCategory("Client calculated charts", "custom", "Customized Charts");
|
|
||||||
},
|
|
||||||
//generate a custom category
|
|
||||||
genCustomCategory: function(description, group, name) {
|
|
||||||
this.options.description.models[0].attributes.groups.push({
|
|
||||||
"description":description,
|
|
||||||
"group":group,
|
|
||||||
"name":name
|
|
||||||
});
|
|
||||||
},
|
|
||||||
//generate a custom description
|
|
||||||
genCustomChartDescription: function (description, group, identifier, name, type, units) {
|
|
||||||
var figure = {
|
|
||||||
"description" : description,
|
|
||||||
"group" : group,
|
|
||||||
"identifier" : identifier,
|
|
||||||
"name" : name,
|
|
||||||
"type" : type,
|
|
||||||
"units" : units
|
|
||||||
};
|
|
||||||
this.options.description.models[0].attributes.figures.push(figure);
|
|
||||||
this.renderFigure(figure);
|
|
||||||
},
|
|
||||||
//calculate customized chart value functions here
|
|
||||||
updateCustomChartValues: function () {
|
|
||||||
//this.totalTime2();
|
|
||||||
},
|
|
||||||
|
|
||||||
//custom chart value calculation for totalTime2
|
addCustomCharts: function () {
|
||||||
totalTime2: function () {
|
var self = this;
|
||||||
var val1 = this.collection.models[0].attributes.system.userTime;
|
var figure = {
|
||||||
var val2 = this.collection.models[0].attributes.system.systemTime;
|
"description" : "my custom chart",
|
||||||
|
"group" : "custom",
|
||||||
|
"identifier" : "custom1",
|
||||||
|
"name" : "Custom1",
|
||||||
|
"type" : "accumulated",
|
||||||
|
"units" : "seconds",
|
||||||
|
"exec" : function () {
|
||||||
|
var val1 = self.collection.models[0].attributes.system.userTime;
|
||||||
|
var val2 = self.collection.models[0].attributes.system.systemTime;
|
||||||
var totalTime2Value = val1+val2;
|
var totalTime2Value = val1+val2;
|
||||||
this.collection.models[0].attributes["custom"] = {"totalTime2":totalTime2Value};
|
return totalTime2Value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var addGroup = true;
|
||||||
|
|
||||||
|
$.each(this.options.description.models[0].attributes.groups, function(k, v) {
|
||||||
|
if (self.options.description.models[0].attributes.groups[k].group === figure.group) {
|
||||||
|
addGroup = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (addGroup == true) {
|
||||||
|
self.options.description.models[0].attributes.groups.push({
|
||||||
|
"description" : "custom",
|
||||||
|
"group" : "custom",
|
||||||
|
"name" : "custom"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.options.description.models[0].attributes.figures.push(figure);
|
||||||
},
|
},
|
||||||
|
|
||||||
checkInterval: function (a) {
|
checkInterval: function (a) {
|
||||||
|
@ -262,9 +281,44 @@ var dashboardView = Backbone.View.extend({
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
renderCollectionsChart: function () {
|
||||||
|
var self = this;
|
||||||
|
nv.addGraph(function() {
|
||||||
|
var chart = nv.models.pieChart()
|
||||||
|
.x(function(d) { return d.label })
|
||||||
|
.y(function(d) { return d.value })
|
||||||
|
.showLabels(true);
|
||||||
|
|
||||||
|
d3.select("#detailCollectionsChart svg")
|
||||||
|
.datum(self.convertCollections())
|
||||||
|
.transition().duration(1200)
|
||||||
|
.call(chart);
|
||||||
|
|
||||||
|
return chart;
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
convertCollections: function () {
|
||||||
|
var self = this;
|
||||||
|
var collValues = [];
|
||||||
|
$.each(self.collectionsStats, function(k,v) {
|
||||||
|
collValues.push({
|
||||||
|
"label" : k,
|
||||||
|
"value" : v,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return [{
|
||||||
|
key: "Collections Status",
|
||||||
|
values: collValues
|
||||||
|
}];
|
||||||
|
},
|
||||||
|
|
||||||
renderCharts: function () {
|
renderCharts: function () {
|
||||||
var self = this;
|
var self = this;
|
||||||
$('#every'+self.updateFrequency+'seconds').prop('checked',true);
|
$('#every'+self.updateFrequency+'seconds').prop('checked',true);
|
||||||
|
self.renderCollectionsChart();
|
||||||
|
|
||||||
$.each(self.options.description.models[0].attributes.figures, function () {
|
$.each(self.options.description.models[0].attributes.figures, function () {
|
||||||
var figure = this;
|
var figure = this;
|
||||||
|
@ -332,7 +386,6 @@ var dashboardView = Backbone.View.extend({
|
||||||
|
|
||||||
calculateSeries: function (flush) {
|
calculateSeries: function (flush) {
|
||||||
var self = this;
|
var self = this;
|
||||||
self.updateCustomChartValues();
|
|
||||||
|
|
||||||
var timeStamp = Math.round(new Date() * 10);
|
var timeStamp = Math.round(new Date() * 10);
|
||||||
|
|
||||||
|
@ -353,7 +406,14 @@ var dashboardView = Backbone.View.extend({
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var responseValue = self.collection.models[0].attributes[figure.group][identifier];
|
var responseValue;
|
||||||
|
|
||||||
|
if (figure.exec) {
|
||||||
|
responseValue = figure.exec();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
responseValue = self.collection.models[0].attributes[figure.group][identifier];
|
||||||
|
}
|
||||||
|
|
||||||
if (responseValue !== undefined && responseValue !== null) {
|
if (responseValue !== undefined && responseValue !== null) {
|
||||||
if (responseValue.sum !== undefined) {
|
if (responseValue.sum !== undefined) {
|
||||||
|
|
Loading…
Reference in New Issue