Skip to content

C
cloud-quote
Commit 45938db9 authored by Sven Franck's avatar Sven Franck
Browse files
Options

Graphs using jqPlot. First version

parent 0b6ba472
Show whitespace changes
Inline Side-by-side
Showing with 145 additions and 43 deletions
css/themes.css
View file @ 45938db9
......@@ -148,7 +148,7 @@
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
text-decoration: none;
}
/* B
/* B BLUE!
-----------------------------------------------------------------------------------------------------------*/
.ui-bar-b {
......
gadgets/results.html
View file @ 45938db9
......@@ -6,21 +6,23 @@
#results_list .search_criteria {font-weight: bold; }
/* results table */
#results_list .results_wrapper table thead th {padding: 0.1em 0.25em;}
#results_list .results_wrapper table tbody th, .results_wrapper table tbody td,
#results_list .results_wrapper table thead th, .results_wrapper table thead td {text-align: center;}
#results_list .results_wrapper {padding: 0; margin: 1em; }
#results_list .results_wrapper .ui-mini .ui-btn-inner {font-size: 16px !important;}
#results_list .results_wrapper .ui-select .ui-btn-icon-right .ui-btn-inner,
#results_list .results_wrapper .ui-select .ui-li-has-count .ui-btn-inner,
#results_list .results_wrapper .show_providers .ui-btn-inner,
#results_list .results_wrapper .ui-table-columntoggle-btn .ui-btn-inner {padding-top: 11px; padding-bottom: 11px;}
#results_list .results_wrapper .image_wrapper {max-height: 60px; text-align: center; padding: 0; display: block;}
#results_list .results_wrapper .image_wrapper img {max-height: inherit;}
#results_list .results_wrapper .provider_name {text-align: center;}
#results_list .results_wrapper tr {height: 52px; min-height: 52px;}
#results_list #results_wrapper table thead th {padding: 0.1em 0.25em;}
#results_list #results_wrapper table tbody th, #results_wrapper table tbody td,
#results_list #results_wrapper table thead th, #results_wrapper table thead td {text-align: center;}
#results_list #results_wrapper {padding: 0; margin: 1em; }
#results_list #results_wrapper .ui-mini .ui-btn-inner {font-size: 16px !important;}
#results_list #results_wrapper .ui-select .ui-btn-icon-right .ui-btn-inner,
#results_list #results_wrapper .ui-select .ui-li-has-count .ui-btn-inner,
#results_list #results_wrapper .show_providers .ui-btn-inner,
#results_list #results_wrapper .ui-table-columntoggle-btn .ui-btn-inner {padding-top: 11px; padding-bottom: 11px;}
#results_list #results_wrapper .image_wrapper {max-height: 60px; text-align: center; padding: 0; display: block;}
#results_list #results_wrapper .image_wrapper img {max-height: inherit;}
#results_list #results_wrapper .provider_name {text-align: center; margin: 0;}
#results_list #results_wrapper tr {height: 52px; min-height: 52px;}
#results_list .start_over .ui-btn-inner { padding-top: 11px; padding-bottom: 11px; }
/* graph */
#results_list #graph_container_cell { min-height:50%; padding: .25em; max-width: 80%; margin: 0 auto;}
/* popups */
.ui-collapsible-popup {padding: 0;}
.ui-collapsible-popup .ui-collapsible-set-horizontal .ui-collapsible-content {margin-top: -15px; border:0 none; padding: 0;}
......@@ -39,6 +41,7 @@
.provider_popup { width: 50em;}
}
</style>
<link rel="stylesheet" type="text/css" href="../js/plugins/jqplot/jquery.jqplot.min.css" />
</head>
<body>
<p class="search_info">
......@@ -67,7 +70,7 @@
</div>
</div>
<div class="ui-body ui-body-d results_wrapper ui-corner-all">
<div class="ui-body ui-body-d ui-corner-all" id="results_wrapper">
<div data-slot="true" data-slot-id="1">
<label for="form_results_sort" data-i18n="results.sorting" class="select">Sort</label>
<select data-theme="f" id="form_results_sort" name="form_results_sort">
......@@ -80,7 +83,7 @@
</select>
</div>
<div data-slot="true" data-slot-id="6">
<label for="form_results_view" data-i18n="results.sorting" class="select">Sort</label>
<label for="form_provider_view" data-i18n="results.sorting" class="select">Sort</label>
<select data-theme="f" id="form_provider_view" name="form_provider_view">
<option value="default" class="t" selected="selected" data-placeholder="true" disabled="disabled" data-i18n="gen.providers">Providers</option>
<option value="all" class="t" data-i18n="gen.all">Show all</option>
......@@ -163,12 +166,27 @@
return rndedNum;
},
getTemplate = function(block, context) {
getTemplate = function (block, context) {
var regex = RegExp('<!-- ' + block + '(.)+' + block + '(.)+?-->'),
tmpl = context.match(regex);
return tmpl.length ? tmpl[0].replace(/<!--[\s\S]*?-->/g, '') : '';
},
tableRender = function (table) {
table
// refresh
.filter(function() { return $(this).jqmData('bound') === true; })
.table('refresh')
.end()
// create table on first run
.filter(function() { return $(this).jqmData('bound') !== true; })
.jqmData('bound', true)
.attr('data-role', 'table')
.table({ create: function( event, ui ) {} })
.table({ tablecreate: function( event, ui ) {} });
},
renderData = function (create, field, direction, search_term) {
var i, j = 0, param, references, query_string = "", sort_string = "",
criteria_string = "", sort_by = field ? field : 'percentile',
......@@ -239,10 +257,10 @@
$.fn.fauna.jio_item_config.allDocs(
query_object,
function (err, response){
var table_target = $(".rendered_result_wrapper"), graph_wrapper, plot1;
if ($("#form_results_view").val() === "display_list") {
// table
var target = $(".rendered_result_wrapper");
// get html-template
require(['text!../tmp/tmp_results.html'], function (template_library) {
......@@ -272,7 +290,7 @@
}
for (i = 0; i < response.length; i += 1) {
var entry = response[i];
entry = response[i];
if (entry["provider"] !== "") {
// add an option to the select
......@@ -301,35 +319,117 @@
}
// insert
target
table_target
.empty()
.append(allRows)
// enhance elements in the table rows
.trigger("create")
.closest('table')
.filter(function() { return $(this).jqmData('bound') === true; })
.table('refresh')
.trigger("create");
tableRender(table_target.parent('table'));
});
} else {
// make a graph
// clear the table
table_target.empty()
// load lib
require(['../js/plugins/jqplot/jquery.jqplot.min.js'],
function (template_library) {
// and dependencies...
require([
'../js/plugins/jqplot/plugins/jqplot.barRenderer.min.js'
, '../js/plugins/jqplot/plugins/jqplot.categoryAxisRenderer.min.js'
, '../js/plugins/jqplot/plugins/jqplot.pointLabels.min.js'
], function () {
var s1, s2, ticks, entry,
series_provider = [],
series_availability = [],
series_cost = [],
series_colors = [];
for (i = 0; i < response.length; i += 1) {
entry = response[i];
if (entry["provider"] === "") {
series_provider.push("n/a");
} else {
series_provider.push(entry["provider"]);
}
series_availability.push( roundNumber(entry["percentile"]) )
series_cost.push( entry["cost"] || 0 );
if (response.length === 1) {
series_colors.push("#2DBCF8")
} else {
series_colors.push("#ccc")
}
}
$.jqplot.config.enablePlugins = true;
s1 = series_availability;
s2 = series_cost;
ticks = series_provider;
graph_wrapper = $('<tr><td colspan="5"><div id="graph_container_cell"></div></td></tr>');
table_target
.parent('table')
.find('thead tr td, thead tr th')
.attr('data-priority','persist')
.end()
.closest('table')
// create table on first run
.filter(function() { return $(this).jqmData('bound') !== true; })
.jqmData('bound', true)
.attr('data-role', 'table')
.table({
create: function( event, ui ) {}
})
.table({
tablecreate: function( event, ui ) {}
.find('tbody')
.append( graph_wrapper )
plot1 = $.jqplot('graph_container_cell', [s1, s2], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{ varyBarColor : true },
pointLabels: { show: true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
label:'Providers',
ticks: ticks
},
yaxis:{
label:'Availability',
min:0,
max: 180,
ticks: [[0],[90],[93],[96],[99],[99.3],[99.6],[99.7],[99.8],[99.9],[100]]
},
y2axis:{
label: 'Price',
autoscale:true,
}
},
highlighter: { show: false },
seriesColors: series_colors,
});
// clear search form
$.fn.fauna.formdata = "";
$.fn.util.spin('hide');
// add i18n attributes
$('.jqplot-xaxis-label').attr('i18n', 'tx.gen.provider');
$('.jqplot-yaxis-label').attr('i18n', 'tx.gen.availability');
$('.jqplot-y2axis-label').attr('i18n', 'tx.gen.price');
tableRender(table_target.parent('table'));
// how to bind to resize for orientationchange/resize from a gadget?
// if I can't access gadget
$(window)
.filter(function() { return $(this).jqmData('plot_bound') !== true; })
.jqmData('plot_bound', true)
.on('resize orientationchange', function () {
plot1.replot({ resetAxes: true });
});
} else {
// create graph object
}
);
}
);
}
// clear the formdata for the next queries
$.fn.fauna.formdata = ""
$.fn.util.spin('hide');
});
};
......@@ -391,7 +491,6 @@
}
gadget.sort_field = field;
gadget.sort_direction = direction;
// reset provider?
renderData(false, field, direction, null);
});
......@@ -416,6 +515,9 @@
var val = $(this).val() === "all" ? "" : $(this).val();
renderData(false, gadget.sort_field, gadget.sort_direction, val);
})
.on('change.display_mode', '#form_results_view', function () {
renderData(false, gadget.sort_field, gadget.sort_direction, null);
})
.on('click.details_popup', '.popup_trigger', function () {
gadget.current_selection = $(this).jqmData("reference");
})
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7