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 @@ ...@@ -148,7 +148,7 @@
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/; font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
text-decoration: none; text-decoration: none;
} }
/* B /* B BLUE!
-----------------------------------------------------------------------------------------------------------*/ -----------------------------------------------------------------------------------------------------------*/
.ui-bar-b { .ui-bar-b {
......
gadgets/results.html
View file @ 45938db9
...@@ -6,21 +6,23 @@ ...@@ -6,21 +6,23 @@
#results_list .search_criteria {font-weight: bold; } #results_list .search_criteria {font-weight: bold; }
/* results table */ /* results table */
#results_list .results_wrapper table thead th {padding: 0.1em 0.25em;} #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 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 table thead th, #results_wrapper table thead td {text-align: center;}
#results_list .results_wrapper {padding: 0; margin: 1em; } #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-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-btn-icon-right .ui-btn-inner,
#results_list .results_wrapper .ui-select .ui-li-has-count .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 .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 .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 {max-height: 60px; text-align: center; padding: 0; display: block;}
#results_list .results_wrapper .image_wrapper img {max-height: inherit;} #results_list #results_wrapper .image_wrapper img {max-height: inherit;}
#results_list .results_wrapper .provider_name {text-align: center;} #results_list #results_wrapper .provider_name {text-align: center; margin: 0;}
#results_list .results_wrapper tr {height: 52px; min-height: 52px;} #results_list #results_wrapper tr {height: 52px; min-height: 52px;}
#results_list .start_over .ui-btn-inner { padding-top: 11px; padding-bottom: 11px; } #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 */ /* popups */
.ui-collapsible-popup {padding: 0;} .ui-collapsible-popup {padding: 0;}
.ui-collapsible-popup .ui-collapsible-set-horizontal .ui-collapsible-content {margin-top: -15px; border:0 none; padding: 0;} .ui-collapsible-popup .ui-collapsible-set-horizontal .ui-collapsible-content {margin-top: -15px; border:0 none; padding: 0;}
...@@ -39,6 +41,7 @@ ...@@ -39,6 +41,7 @@
.provider_popup { width: 50em;} .provider_popup { width: 50em;}
} }
</style> </style>
<link rel="stylesheet" type="text/css" href="../js/plugins/jqplot/jquery.jqplot.min.css" />
</head> </head>
<body> <body>
<p class="search_info"> <p class="search_info">
...@@ -67,7 +70,7 @@ ...@@ -67,7 +70,7 @@
</div> </div>
</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"> <div data-slot="true" data-slot-id="1">
<label for="form_results_sort" data-i18n="results.sorting" class="select">Sort</label> <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"> <select data-theme="f" id="form_results_sort" name="form_results_sort">
...@@ -80,7 +83,7 @@ ...@@ -80,7 +83,7 @@
</select> </select>
</div> </div>
<div data-slot="true" data-slot-id="6"> <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"> <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="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> <option value="all" class="t" data-i18n="gen.all">Show all</option>
...@@ -163,12 +166,27 @@ ...@@ -163,12 +166,27 @@
return rndedNum; return rndedNum;
}, },
getTemplate = function(block, context) { getTemplate = function (block, context) {
var regex = RegExp('<!-- ' + block + '(.)+' + block + '(.)+?-->'), var regex = RegExp('<!-- ' + block + '(.)+' + block + '(.)+?-->'),
tmpl = context.match(regex); tmpl = context.match(regex);
return tmpl.length ? tmpl[0].replace(/<!--[\s\S]*?-->/g, '') : ''; 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) { renderData = function (create, field, direction, search_term) {
var i, j = 0, param, references, query_string = "", sort_string = "", var i, j = 0, param, references, query_string = "", sort_string = "",
criteria_string = "", sort_by = field ? field : 'percentile', criteria_string = "", sort_by = field ? field : 'percentile',
...@@ -239,10 +257,10 @@ ...@@ -239,10 +257,10 @@
$.fn.fauna.jio_item_config.allDocs( $.fn.fauna.jio_item_config.allDocs(
query_object, query_object,
function (err, response){ function (err, response){
var table_target = $(".rendered_result_wrapper"), graph_wrapper, plot1;
if ($("#form_results_view").val() === "display_list") { if ($("#form_results_view").val() === "display_list") {
// table // table
var target = $(".rendered_result_wrapper");
// get html-template // get html-template
require(['text!../tmp/tmp_results.html'], function (template_library) { require(['text!../tmp/tmp_results.html'], function (template_library) {
...@@ -272,7 +290,7 @@ ...@@ -272,7 +290,7 @@
} }
for (i = 0; i < response.length; i += 1) { for (i = 0; i < response.length; i += 1) {
var entry = response[i]; entry = response[i];
if (entry["provider"] !== "") { if (entry["provider"] !== "") {
// add an option to the select // add an option to the select
...@@ -301,35 +319,117 @@ ...@@ -301,35 +319,117 @@
} }
// insert // insert
target table_target
.empty() .empty()
.append(allRows) .append(allRows)
// enhance elements in the table rows // enhance elements in the table rows
.trigger("create") .trigger("create");
.closest('table')
.filter(function() { return $(this).jqmData('bound') === true; }) tableRender(table_target.parent('table'));
.table('refresh') });
} 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() .end()
.closest('table') .find('tbody')
// create table on first run .append( graph_wrapper )
.filter(function() { return $(this).jqmData('bound') !== true; })
.jqmData('bound', true) plot1 = $.jqplot('graph_container_cell', [s1, s2], {
.attr('data-role', 'table') seriesDefaults:{
.table({ renderer:$.jqplot.BarRenderer,
create: function( event, ui ) {} rendererOptions:{ varyBarColor : true },
}) pointLabels: { show: true }
.table({ },
tablecreate: function( event, ui ) {} 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 = ""; // add i18n attributes
$.fn.util.spin('hide'); $('.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 // clear the formdata for the next queries
$.fn.fauna.formdata = "" $.fn.fauna.formdata = ""
$.fn.util.spin('hide');
}); });
}; };
...@@ -391,7 +491,6 @@ ...@@ -391,7 +491,6 @@
} }
gadget.sort_field = field; gadget.sort_field = field;
gadget.sort_direction = direction; gadget.sort_direction = direction;
// reset provider?
renderData(false, field, direction, null); renderData(false, field, direction, null);
}); });
...@@ -416,6 +515,9 @@ ...@@ -416,6 +515,9 @@
var val = $(this).val() === "all" ? "" : $(this).val(); var val = $(this).val() === "all" ? "" : $(this).val();
renderData(false, gadget.sort_field, gadget.sort_direction, 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 () { .on('click.details_popup', '.popup_trigger', function () {
gadget.current_selection = $(this).jqmData("reference"); 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