Commit 0501542e authored by Jérome Perrin's avatar Jérome Perrin

Make Output_viewGraph the generic graph widget

parent d4fa1562
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Graph</title>
<script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
<script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
<script src="../<%= curl.jqueryflot.relative_dest %>"></script>
<script src="../<%= curl.jqueryflotstack.relative_dest %>"></script>
<script src="mixin_gadget.js" type="text/javascript"></script>
<script src="Output_viewChart.js" type="text/javascript"></script>
</head>
<body>
<div class="graph_container" style="width: 100%;height:300px"></div>
</body>
</html>
/*global rJS, jQuery, initGadgetMixin, console */
/*jslint unparam: true */
(function (window, rJS, $, initGadgetMixin) {
"use strict";
var gadget_klass = rJS(window);
initGadgetMixin(gadget_klass);
gadget_klass
/////////////////////////////////////////////////////////////////
// Acquired methods
/////////////////////////////////////////////////////////////////
.declareAcquiredMethod("aq_getAttachment", "jio_getAttachment")
/**
* Stacked flot graph widget, as seen on http://www.flotcharts.org/flot/examples/stacking/index.html
* The data is an object with two attributes "series" ( a list ) and "options" (a mapping of flot options).
*/
/////////////////////////////////////////////////////////////////
// declared methods
/////////////////////////////////////////////////////////////////
.declareMethod("render", function (options) {
var jio_key = options.id,
gadget = this;
gadget.props.jio_key = jio_key;
gadget.props.result = options.result;
return gadget.aq_getAttachment({
"_id": gadget.props.jio_key,
"_attachment": "body.json"
})
.push(function (simulation_json) {
var json_data = JSON.parse(simulation_json);
gadget.props.data = json_data.result.result_list[options.result][
options.action_definition.configuration.output_id];
});
})
.declareMethod("startService", function () {
// XXX Manually calculate width and height when resizing
$.plot(
this.props.element.querySelector(".graph_container"),
this.props.data.series,
this.props.data.options
);
});
}(window, rJS, jQuery, initGadgetMixin));
......@@ -9,6 +9,7 @@
<script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
<script src="../<%= curl.jqueryflot.relative_dest %>"></script>
<script src="../<%= curl.jqueryflotstack.relative_dest %>"></script>
<script src="../<%= curl.jqueryflottime.relative_dest %>"></script>
<script src="mixin_gadget.js" type="text/javascript"></script>
<script src="Output_viewGraph.js" type="text/javascript"></script>
</head>
......
......@@ -3,102 +3,6 @@
(function (window, rJS, $, initGadgetMixin) {
"use strict";
function getRequestedValue (object, key) {
var value = 0.0;
if (object.results[key] !== undefined) {
if (object.results[key].avg !== undefined) {
value = object.results[key].avg;
} else {
value = object.results[key];
}
}
return value;
}
function graph_widget(output_data, config) {
/* FIXME: does not support more than one replic (Buffer family).
* + see george email to integrate without the need of an EG
*/
var conf_data = config.data,
ticks = [],
counter = 1,
series = [],
options = {},
key, data = {};
for (key in conf_data) {
if (conf_data.hasOwnProperty(key)) {
data[key] = [];
}
}
$.each(
output_data.elementList.sort(
function (a, b) {
return a.id < b.id ? -1 : 1;
}
),
function (idx, obj) {
var reqKey,
request, i;
// if the obj is of the requested family
if (obj.family === config.family) {
if (config.plot === "bars") {
for (reqKey in conf_data) {
if (conf_data.hasOwnProperty(reqKey)) {
request = 0.0;
for (i = 0; i <= conf_data[reqKey].length-1; i += 1) {
request += getRequestedValue(obj, conf_data[reqKey][i]);
}
data[reqKey].push([counter, request]);
}
}
ticks.push([counter, obj.id]);
counter += 1;
} else if (config.plot === "line") {
series.push({label: obj.name || obj.id,
data: obj.results.wip_stat_list});
}
}
}
);
if (config.plot === "bars") {
for (key in data) {
if (data.hasOwnProperty(key)) {
series.push({
label: key,
data: data[key]
});
}
}
options = {
xaxis: {
minTickSize: 1,
ticks: ticks
},
yaxis: {
max: 100
},
series: {
bars: {
show: true,
barWidth: 0.7,
align: "center"
},
stack: true
}
};
}
console.log("series");
console.log(series);
console.log("options");
console.log(options);
return [series, options];
}
var gadget_klass = rJS(window);
initGadgetMixin(gadget_klass);
gadget_klass
......@@ -107,6 +11,11 @@
/////////////////////////////////////////////////////////////////
.declareAcquiredMethod("aq_getAttachment", "jio_getAttachment")
/**
* Stacked flot graph widget, as seen on http://www.flotcharts.org/flot/examples/stacking/index.html
* The data is an object with two attributes "series" ( a list ) and "options" (a mapping of flot options).
*/
/////////////////////////////////////////////////////////////////
// declared methods
/////////////////////////////////////////////////////////////////
......@@ -121,28 +30,18 @@
"_attachment": "body.json"
})
.push(function (simulation_json) {
console.log("rendering view graph");
var json_data = JSON.parse(simulation_json),
config = json_data
.application_configuration.output[options.action]
.configuration;
console.log(config);
console.log(json_data.result.result_list[gadget.props.result]);
gadget.props.result_list = graph_widget(
json_data.result.result_list[gadget.props.result],
config
);
var json_data = JSON.parse(simulation_json);
gadget.props.data = json_data.result.result_list[options.result][
options.action_definition.configuration.output_id];
});
})
.declareMethod("startService", function () {
console.log("service graph");
console.log(this.props.result_list);
// XXX Manually calculate width and height when resizing
$.plot(
this.props.element.querySelector(".graph_container"),
this.props.result_list[0],
this.props.result_list[1]
this.props.data.series,
this.props.data.options
);
});
}(window, rJS, jQuery, initGadgetMixin));
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment