From 0122c68228b0cf3f1ec152481bcb7c22248248d3 Mon Sep 17 00:00:00 2001 From: Étienne Loks Date: Tue, 14 May 2019 16:12:21 +0200 Subject: Statistics - JS and templates to manage graphs and tables --- ishtar_common/models.py | 9 +- ishtar_common/static/js/ishtar-map.js | 35 +++ ishtar_common/static/js/ishtar.js | 279 +++++++++++++++++++++ ishtar_common/templates/base.html | 14 ++ .../templates/blocks/DataTables-tabs.html | 14 ++ ishtar_common/templates/blocks/DataTables.html | 64 +---- ishtar_common/views_item.py | 31 ++- 7 files changed, 379 insertions(+), 67 deletions(-) (limited to 'ishtar_common') diff --git a/ishtar_common/models.py b/ishtar_common/models.py index 7aa8706b3..8e5983a45 100644 --- a/ishtar_common/models.py +++ b/ishtar_common/models.py @@ -1931,10 +1931,13 @@ class TemplateItem: class StatisticItem: - STATISTIC_MODALITIES = [] # example: "operation type", "material type" + STATISTIC_MODALITIES = [] # example: "year", "operation_type__label" + STATISTIC_MODALITIES_OPTIONS = OrderedDict() # example: + # OrderedDict([('year', _("Year")), + # ("operation_type__label", _("Operation type"))]) STATISTIC_SUM_VARIABLE = OrderedDict( - (("pk", _("number")),) - ) # example: "price", "volume" + (("pk", _("Number")),) + ) # example: "Price", "Volume" class BaseHistorizedItem(StatisticItem, TemplateItem, FullSearch, Imported, diff --git a/ishtar_common/static/js/ishtar-map.js b/ishtar_common/static/js/ishtar-map.js index 1b0d4384b..a93813e61 100644 --- a/ishtar_common/static/js/ishtar-map.js +++ b/ishtar_common/static/js/ishtar-map.js @@ -27,6 +27,41 @@ var geolocation = {}; var geoloc_feature = {}; var geoloc_activated = {}; +var fetching_msg = "Fetching data..."; + +var _map_submit_search = function(query_vars, name, source){ + var modal_base_text = $('.modal-progress .modal-header').html(); + $('.modal-progress .modal-header').html(fetching_msg); + $('.modal-progress').modal('show'); + var data = search_get_query_data(query_vars, name); + var nb_select = jQuery("#id_" + name + "-length_map").val(); + if (!nb_select) nb_select = 10; + + var url = source + "json-map?length=" + nb_select + "&submited=1&" + data; + var use_map_limit = false; + if(data.indexOf("no_limit=true") == -1){ + url += "&limit=" + current_map_limit; + use_map_limit = true; + } + $.getJSON(url, function(data) { + var timestamp = Math.floor(Date.now() / 1000); + var map_id = "map-" + timestamp; + $('.modal-progress .modal-header').html("{% trans 'Render map...' %}"); + + var html = render_map(map_id, use_map_limit); + $("#tab-content-map-" + name).html(html); + $("#id_" + name + "-length_map").change(map_submit_search); + if ($('.modal-progress').length > 0){ + $('.modal-progress').modal('hide'); + $('.modal-progress .modal-header').html(modal_base_text); + } + register_map(map_id, data); + }); + + return false; + +}; + var geoloc_activated_message = function(map_id){ setTimeout(function(){ diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js index 2527c1bd7..54823968c 100644 --- a/ishtar_common/static/js/ishtar.js +++ b/ishtar_common/static/js/ishtar.js @@ -1095,6 +1095,33 @@ var get_hover_div = function(table_cols, data){ return hover; }; +var _gallery_submit_search = function(image_page, query_vars, name, source){ + if (image_page) { + current_image_page = image_page; + } else { + current_image_page = 1; + } + $('.modal-progress').modal('show'); + var data = search_get_query_data(query_vars, name); + var nb_select = jQuery("#id_" + name + "-length_image").val(); + if (!nb_select) nb_select = 10; + + var url = source + "json-image?length=" + nb_select + "&submited=1&" + data; + $.getJSON(url, function(data) { + var timestamp = Math.floor(Date.now() / 1000); + var gallery_id = "gallery-" + timestamp; + $("#tab-content-gallery-" + name).html( + render_gallery(data, name, nb_select, gallery_id)); + $("#id_" + name + "-length_image").change(gallery_submit_search); + register_image_gallery(gallery_id); + $('.card[data-toggle="tooltip"]').tooltip(); + if ($('.modal-progress').length > 0){ + $('.modal-progress').modal('hide'); + } + }); + return false; +} + var render_gallery = function(data_table, table_name, nb_select, gallery_id){ var html = '
'; html += render_paginate_select(table_name, 'image', nb_select); @@ -1343,6 +1370,7 @@ var register_map = function(map_id, points){ var main_submit_search = function(){ if (current_tab == "table") datatable_submit_search(); if (current_tab == "gallery") gallery_submit_search(); + if (current_tab == "stats") stats_submit_search(); if (current_tab == "map") map_submit_search(); }; @@ -1376,3 +1404,254 @@ var search_get_query_data = function(query_vars, table_name){ } return data; }; + +var registered_stats = false; + +var register_stats = function(query_vars, name, source){ + if (registered_stats) return; + registered_stats = true; + $("#stats-form-" + name + " select").on('change', function() { + _stats_submit_search(query_vars, name, source); + } + ); + $('#chart-img-display-' + name).click(function(){ + $('#chart-img-' + name).hide(); + $('#img-' + name).html( + $('').attr( + 'src', $('#chart-' + name).jqplotToImageStr({}) + ) + ); + $('#chart-img-' + name).show('slow'); + }); +}; + +var _stats_submit_search = function(query_vars, name, source){ + $('.modal-progress').modal('show'); + + var data = search_get_query_data(query_vars, name); + register_stats(query_vars, name, source); + + var url = source + "json-stats?submited=1&" + data; + var modality_1 = $("#stats_modality_1-" + name).val(); + if (modality_1) url += '&stats_modality_1=' + modality_1; + var modality_2 = $("#stats_modality_2-" + name).val(); + if (modality_2) url += '&stats_modality_2=' + modality_2; + $.getJSON(url, function(data) { + var timestamp = Math.floor(Date.now() / 1000); + var stats_id = "stats-" + timestamp; + $("#tab-content-stats-" + name).html( + render_stats(data, name)); + if ($('.modal-progress').length > 0){ + $('.modal-progress').modal('hide'); + } + }); + return false; +} + +var stats_showmarker = false; +var stats_incompatible_modality = "This graph type accept only one modality."; +var stats_current_graph; + +var _render_stats_table = function(stats_values, name){ + var modality_1 = $("#stats_modality_1-" + name).val(); + var modality_2 = $("#stats_modality_2-" + name).val(); + var rows = new Array(); + + var current_row = new Array(); + var html = ""; + html += ""; + html += ""; + rows.push(current_row); + + if (modality_2 && modality_2 != modality_1){ + for (idx in stats_values){ + var start_row = ""; + row_content = ""; + for (inner_idx in stats_values[idx][1]){ + current_row = new Array(); + var colspan = parseInt(inner_idx) + 1; + start_row = ""; + current_row.push(stats_values[idx][0]); + if (inner_idx > 0) row_content += ""; + row_content += ""; + current_row.push(stats_values[idx][1][inner_idx][0]); + row_content += ""; + current_row.push(stats_values[idx][1][inner_idx][1]); + rows.push(current_row); + } + html += start_row + row_content; + } + } else { + for (idx in stats_values){ + current_row = new Array(); + html += ""; + current_row.push(stats_values[idx][0]); + html += ""; + current_row.push(stats_values[idx][1]); + rows.push(current_row); + } + } + + html += "
"; + var modality_1_lbl = $('#stats_modality_1-' + name + ' option:selected').text(); + current_row.push(modality_1_lbl); + html += modality_1_lbl; + if (modality_2 && modality_2 != modality_1){ + html += ""; + var modality_2_lbl = $('#stats_modality_2-' + name + ' option:selected').text(); + html += modality_2_lbl; + current_row.push(modality_2_lbl); + } + html += ""; + var sum_lbl = $('#stats_sum-' + name + ' option:selected').text(); + html += sum_lbl; + current_row.push(sum_lbl); + html += "
" + stats_values[idx][0] + "
" + stats_values[idx][1][inner_idx][0] + "" + stats_values[idx][1][inner_idx][1] + "
" + stats_values[idx][0] + "" + stats_values[idx][1] + "
"; + $("#charts-" + name).hide(); + $("#stats-table-content-" + name).html(html); + $("#stats-table-" + name).show(); + + var csv_content = "data:text/csv;charset=utf-8," + rows.map(e => e.join(",")).join("\n"); + var encoded_uri = encodeURI(csv_content); + $("#stats-table-csv-" + name).attr("href", encoded_uri); + $("#stats-table-csv-" + name).attr("download", "ishtar-stats.csv"); +}; + +var render_stats = function(stats_values, name){ + var stats_type = $("#stats_renderer-" + name).val(); + + if (!stats_values || !stats_values['data']) return; + stats_values = stats_values['data']; + + if (stats_current_graph){ + stats_current_graph.destroy(); + } + if (stats_type == "table"){ + return _render_stats_table(stats_values, name); + } + + $("#stats-table-" + name).hide(); + $("#charts-" + name).show(); + var modality_1 = $("#stats_modality_1-" + name).val(); + var modality_2 = $("#stats_modality_2-" + name).val(); + + stats_xaxis = { + label: $('#stats_modality_1-' + name + ' option:selected').text() + }; + + var stats_help = $("#stats-zoom-help-" + name); + + if (stats_type == "pie"){ + stats_help.hide(); + if (modality_2){ + display_info(stats_incompatible_modality); + return; + } + } else { + stats_help.show(); + var stats_xaxis_tickoptions; + if (modality_1 == "year"){ + stats_xaxis_tickoptions = {formatString: "%d"}; + } else { + stats_xaxis_tickoptions = {angle:-25}; + } + stats_xaxis["tickOptions"] = stats_xaxis_tickoptions + } + + var stats_showmarker = false; + if (stats_values.length < 25){ + stats_showmarker = true; + } + var jqvalues = new Array(); + var ticks = new Array(); + var series = new Array(); + var series_conf = new Array(); + if (modality_2 && modality_2 != modality_1){ + for (idx in stats_values){ + ticks.push(stats_values[idx][0]); + var serie_values = stats_values[idx][1]; + var current_serie_values = new Array(); + for (inner_idx in serie_values){ + var serie_value = serie_values[inner_idx][0]; + if (series.indexOf(serie_value) == -1){ + series.push(serie_value); + var fill_values = new Array(); + if (idx > 0){ // put 0 for previous items + for (var fill_idx = 0 ; fill_idx < idx ; fill_idx++ ){ + fill_values.push(0); + } + } + jqvalues.push(fill_values); + } + current_serie_values.push(serie_value); + var current_value = serie_values[inner_idx][1]; + jqvalues[series.indexOf(serie_value)].push(current_value); + } + // put 0 for missing series for this item + for (idx_serie in series){ + if (current_serie_values.indexOf(series[idx_serie]) == -1){ + jqvalues[series.indexOf(series[idx_serie])].push(0); + } + } + } + stats_xaxis['ticks'] = ticks; + } else { + jqvalues = [stats_values]; + series.push("Total"); + } + if (stats_type != "pie"){ + stats_xaxis['renderer'] = $.jqplot.CategoryAxisRenderer; + stats_xaxis['labelRenderer'] = $.jqplot.CanvasAxisLabelRenderer; + stats_xaxis['tickRenderer'] = $.jqplot.CanvasAxisTickRenderer; + } + + var stats_renderer; + if (stats_type == "bar"){ + stats_renderer = $.jqplot.BarRenderer; + } else if (stats_type == "pie"){ + stats_renderer = $.jqplot.PieRenderer; + } + for (idx in series){ + var serie_conf = { + label: series[idx], + showmarker: stats_showmarker + }; + if (stats_renderer){ + serie_conf["renderer"] = stats_renderer; + } + serie_conf["rendererOptions"] = { + padding: 8, showDataLabels: true, + dataLabels: 'value', + fill: false, sliceMargin: 4 + }; + series_conf.push(serie_conf); + } + + var stats_options = { + axes: { + xaxis: stats_xaxis, + yaxis: { + label: $('#stats_sum-' + name + ' option:selected').text(), + min: 0 + } + }, + highlighter: { + show: true, + tooltipAxes: 'y', + sizeAdjust: 7.5 + }, + series: series_conf, + legend: { show:true, location: 'e', placement: 'outside' } + }; + if (stats_type != "pie"){ + stats_options["cursor"] = { + show: true, + zoom: true, + showTooltip: false + } + } + + stats_current_graph = $.jqplot('chart-' + name, + jqvalues, stats_options + ); +}; diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html index 8d569711e..f88f1eba6 100644 --- a/ishtar_common/templates/base.html +++ b/ishtar_common/templates/base.html @@ -32,6 +32,17 @@ + + + + + + + + + + + {{EXTRA_JS|safe}}