|
@@ -137,6 +137,9 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
|
|
|
<select data-bind="options: availableSnippets, value: selectedSnippet">
|
|
<select data-bind="options: availableSnippets, value: selectedSnippet">
|
|
|
</select>
|
|
</select>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div id='chart'>
|
|
|
|
|
+ <svg style='height:300px'> </svg>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -207,23 +210,33 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
+
|
|
|
<div data-bind="visible: showLogs, css: resultsKlass">
|
|
<div data-bind="visible: showLogs, css: resultsKlass">
|
|
|
<span data-bind="text: result.logs"></span>
|
|
<span data-bind="text: result.logs"></span>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <div data-bind="css: resultsKlass">
|
|
|
|
|
- <table class="table table-condensed">
|
|
|
|
|
- <thead>
|
|
|
|
|
- <tr data-bind="foreach: result.meta">
|
|
|
|
|
- <th data-bind="text: $data.name"></th>
|
|
|
|
|
- </tr>
|
|
|
|
|
- </thead>
|
|
|
|
|
- <tbody data-bind="foreach: result.data">
|
|
|
|
|
- <tr data-bind="foreach: $data">
|
|
|
|
|
- <td data-bind="text: $data"></td>
|
|
|
|
|
- </tr>
|
|
|
|
|
- </tbody>
|
|
|
|
|
- </table>
|
|
|
|
|
|
|
+ <div class="row-fluid">
|
|
|
|
|
+ <div class="span2">
|
|
|
|
|
+ <ul class="unstyled" data-bind="foreach: result.meta">
|
|
|
|
|
+ <li><a class="pointer" data-bind="text: $data.name, click: function(){ toggleColumn($element, $index()); }"></a></li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="span10">
|
|
|
|
|
+ <div data-bind="css: resultsKlass">
|
|
|
|
|
+ <table class="table table-condensed">
|
|
|
|
|
+ <thead>
|
|
|
|
|
+ <tr data-bind="foreach: {data: result.meta, afterAdd: waitForDatatable}">
|
|
|
|
|
+ <th data-bind="text: $data.name"></th>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ </thead>
|
|
|
|
|
+ <tbody data-bind="foreach: {data: result.data, afterAdd: waitForDatatable}">
|
|
|
|
|
+ <tr data-bind="foreach: $data">
|
|
|
|
|
+ <td data-bind="text: $data"></td>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ </tbody>
|
|
|
|
|
+ </table>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -740,8 +753,135 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
|
|
|
|
|
|
|
|
$(document).ready(function(){
|
|
$(document).ready(function(){
|
|
|
resizeAssist();
|
|
resizeAssist();
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ /*These lines are all chart setup. Pick and choose which chart features you want to utilize. */
|
|
|
|
|
+nv.addGraph(function() {
|
|
|
|
|
+ var chart = nv.models.lineChart()
|
|
|
|
|
+ .margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.
|
|
|
|
|
+ .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
|
|
|
|
|
+ .transitionDuration(350) //how fast do you want the lines to transition?
|
|
|
|
|
+ .showLegend(true) //Show the legend, allowing users to turn on/off line series.
|
|
|
|
|
+ .showYAxis(true) //Show the y-axis
|
|
|
|
|
+ .showXAxis(true) //Show the x-axis
|
|
|
|
|
+ ;
|
|
|
|
|
+
|
|
|
|
|
+ chart.xAxis //Chart x-axis settings
|
|
|
|
|
+ .axisLabel('Time (ms)')
|
|
|
|
|
+ .tickFormat(d3.format(',r'));
|
|
|
|
|
+
|
|
|
|
|
+ chart.yAxis //Chart y-axis settings
|
|
|
|
|
+ .axisLabel('Voltage (v)')
|
|
|
|
|
+ .tickFormat(d3.format('.02f'));
|
|
|
|
|
+
|
|
|
|
|
+ /* Done setting the chart up? Time to render it!*/
|
|
|
|
|
+ var myData = sinAndCos(); //You need data...
|
|
|
|
|
+
|
|
|
|
|
+ d3.select('#chart svg') //Select the <svg> element you want to render the chart in.
|
|
|
|
|
+ .datum(myData) //Populate the <svg> element with chart data...
|
|
|
|
|
+ .call(chart); //Finally, render the chart!
|
|
|
|
|
+
|
|
|
|
|
+ //Update the chart when window resizes.
|
|
|
|
|
+ nv.utils.windowResize(function() { chart.update() });
|
|
|
|
|
+ return chart;
|
|
|
|
|
+});
|
|
|
|
|
+/**************************************
|
|
|
|
|
+ * Simple test data generator
|
|
|
|
|
+ */
|
|
|
|
|
+function sinAndCos() {
|
|
|
|
|
+ var sin = [],sin2 = [],
|
|
|
|
|
+ cos = [];
|
|
|
|
|
+
|
|
|
|
|
+ //Data is represented as an array of {x,y} pairs.
|
|
|
|
|
+ for (var i = 0; i < 100; i++) {
|
|
|
|
|
+ sin.push({x: i, y: Math.sin(i/10)});
|
|
|
|
|
+ sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5});
|
|
|
|
|
+ cos.push({x: i, y: .5 * Math.cos(i/10)});
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ //Line chart data should be sent as an array of series objects.
|
|
|
|
|
+ return [
|
|
|
|
|
+ {
|
|
|
|
|
+ values: sin, //values - represents the array of {x,y} data points
|
|
|
|
|
+ key: 'Sine Wave', //key - the name of the series.
|
|
|
|
|
+ color: '#ff7f0e' //color - optional: choose your own line color.
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ values: cos,
|
|
|
|
|
+ key: 'Cosine Wave',
|
|
|
|
|
+ color: '#2ca02c'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ values: sin2,
|
|
|
|
|
+ key: 'Another sine wave',
|
|
|
|
|
+ color: '#7777ff',
|
|
|
|
|
+ area: true //area - set to true if you want this line to turn into a filled area chart.
|
|
|
|
|
+ }
|
|
|
|
|
+ ];
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+ var _datatableCreationTimeout = -1;
|
|
|
|
|
+ function waitForDatatable(el) {
|
|
|
|
|
+ if ($(el).is("tr") && $(el).parents("table").length > 0){
|
|
|
|
|
+ window.clearTimeout(_datatableCreationTimeout);
|
|
|
|
|
+ _datatableCreationTimeout = window.setTimeout(function(){
|
|
|
|
|
+ $(el).parents("table").dataTable({
|
|
|
|
|
+ "bPaginate": false,
|
|
|
|
|
+ "bLengthChange": false,
|
|
|
|
|
+ "bInfo": false,
|
|
|
|
|
+ "bDestroy": true,
|
|
|
|
|
+ "bAutoWidth": false,
|
|
|
|
|
+ "oLanguage": {
|
|
|
|
|
+ "sEmptyTable": "${_('No data available')}",
|
|
|
|
|
+ "sZeroRecords": "${_('No matching records')}"
|
|
|
|
|
+ },
|
|
|
|
|
+ "fnDrawCallback": function (oSettings) {
|
|
|
|
|
+ $(el).parents("table").find(".dataTables_wrapper").jHueTableScroller({
|
|
|
|
|
+ minHeight: $(window).height() - 400,
|
|
|
|
|
+ heightAfterCorrection: 0
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ $(el).parents("table").jHueTableExtender({
|
|
|
|
|
+ fixedHeader: true,
|
|
|
|
|
+ includeNavigator: false
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ "aoColumnDefs": [
|
|
|
|
|
+ {
|
|
|
|
|
+ "sType": "numeric",
|
|
|
|
|
+ "aTargets": [ "sort-numeric" ]
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ "sType": "string",
|
|
|
|
|
+ "aTargets": [ "sort-string" ]
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ "sType": "date",
|
|
|
|
|
+ "aTargets": [ "sort-date" ]
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ });
|
|
|
|
|
+ $(el).parents(".dataTables_wrapper").jHueTableScroller({
|
|
|
|
|
+ minHeight: $(window).height() - 400,
|
|
|
|
|
+ heightAfterCorrection: 0
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ $(el).parents("table").jHueTableExtender({
|
|
|
|
|
+ fixedHeader: true,
|
|
|
|
|
+ includeNavigator: false
|
|
|
|
|
+ });
|
|
|
|
|
+ $(".dataTables_filter").hide();
|
|
|
|
|
+ }, 100);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function toggleColumn(linkElement, index){
|
|
|
|
|
+ var _dt = $(linkElement).parents(".snippet").find("table:eq(1)").dataTable();
|
|
|
|
|
+ _dt.fnSetColumnVis( index, !_dt.fnSettings().aoColumns[index].bVisible);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
${ commonfooter(messages) | n,unicode }
|
|
${ commonfooter(messages) | n,unicode }
|