diff options
Diffstat (limited to 'ishtar_common/templates/ishtar/dashboards/dashboard_main_detail.html')
| -rw-r--r-- | ishtar_common/templates/ishtar/dashboards/dashboard_main_detail.html | 88 |
1 files changed, 68 insertions, 20 deletions
diff --git a/ishtar_common/templates/ishtar/dashboards/dashboard_main_detail.html b/ishtar_common/templates/ishtar/dashboards/dashboard_main_detail.html index 610457ae3..820c50136 100644 --- a/ishtar_common/templates/ishtar/dashboards/dashboard_main_detail.html +++ b/ishtar_common/templates/ishtar/dashboards/dashboard_main_detail.html @@ -1,11 +1,8 @@ -{% load i18n %} +{% load i18n date_formating %} {% load url from future %} <div class='dashboard' id="{{unique_id}}-tab"> <div> <h4>{% trans "Numbers" %}</h4> - <p><strong>{% trans "Total:" %}</strong> {{dashboard.total_number}}</p> - <div class='table'> - <div id="chart_{{unique_id}}" style="height:400px; width:700px;"></div> {% if form %} <div class='form'> <form method='post' action="{% url 'dashboard-main-detail' item_name %}" id='{{unique_id}}_form'> @@ -16,15 +13,27 @@ </form> </div> {% endif %} - {% comment %} - <table> + <p><strong>{% trans "Total:" %}</strong> {{dashboard.total_number}}</p> + <div class='table'> + <div id="chart_{{unique_id}}" style="height:400px; width:700px;"></div> + <p class='info-box'>{% trans 'Draw rectangle on the graph to zoom. Double-click to reinitialize.' %}</p> + <div class='form chart-img-form'> + <button id="chart_img_display_{{unique_id}}" class='submit'>{% trans "Display as an image" %}</button> + <div id="chart_img_{{unique_id}}" class='chart-img'> + <div id="img_{{unique_id}}"></div> + <p class='info-box'>{% trans 'Right-click on this image to save it.' %}</p> + </div> + </div> + </div> + <div class='table'> + <table class='resume'> {% for idx, lbl, values in dashboard.values %} <tr class='idx {% if forloop.counter0|divisibleby:"2" %}even{%else%}odd{%endif%}'> <th>{{lbl}}</th> - {% for value in values %}<td>{{value}}</td>{% endfor%} + {% for value in values reversed %}{% if forloop.parentloop.counter0 %}<td>{% else %}<th>{%endif%}{{value|date_formating }}{% if forloop.parentloop.counter0 %}</td>{% else %}</th>{%endif%}{% endfor%} </tr> {% endfor%} - </table>{% endcomment %} + </table> </div> {% if dashboard.periods %} <h4>{% trans "By years" %}</h4> @@ -71,23 +80,41 @@ </div> <script language="javascript" type="text/javascript"> $(document).ready(function(){ -var values_{{unique_id}} = []; +{% for idx, lbl, values in dashboard.values %} {% if forloop.counter0 > 0 %} var values_{{forloop.counter0}}_{{unique_id}} = []; {% for idx, lbl, values in dashboard.values %} {% for value in values %} {% if forloop.parentloop.counter0 == 0 %} values_{{forloop.parentloop.parentloop.counter0}}_{{unique_id}}.push([{{VALUE_QUOTE|safe}}{{value}}{{VALUE_QUOTE|safe}}, 0]); {% elif forloop.parentloop.parentloop.counter0 == forloop.parentloop.counter0 %} values_{{forloop.parentloop.parentloop.counter0}}_{{unique_id}}[{{forloop.counter0}}][1] = {{value}}; {% endif %} {% endfor%} {% endfor%} {% endif %} {% endfor %} -{% for idx, lbl, values in dashboard.values %} {% for value in values %}{% ifequal forloop.parentloop.counter0 0 %} -values_{{unique_id}}.push([{{VALUE_QUOTE|safe}}{{value}}{{VALUE_QUOTE|safe}}, 0]); -{% else %}values_{{unique_id}}[{{forloop.counter0}}][1] = {{value}};{% endifequal %}{% endfor%}{% endfor%} +{% comment %} +# less compact version +{% for idx, lbl, values in dashboard.values %} + {% if forloop.counter0 > 0 %} + {% for idx, lbl, values in dashboard.values %} + {% for value in values %} + {% if forloop.parentloop.counter0 == 0 %} + values_{{forloop.parentloop.counter0}}_{{unique_id}}.push([{{VALUE_QUOTE|safe}}{{value}}{{VALUE_QUOTE|safe}}, 0]); + {% elif forloop.parentloop.counter0 == forloop.counter0 %} + values_{{forloop.counter0}}_{{unique_id}}[{{forloop.counter0}}][1] = {{value}}; + {% endif %} + {% endfor%} + {% endfor%} + {% endif %} +{% endfor %} +{% endcomment %} + + +if (typeof values_1_{{unique_id}} === 'undefined' + || values_1_{{unique_id}}.length == 0){ -if (values_{{unique_id}}.length > 0){ +$('#chart_img_{{unique_id}}').hide(); +$('#chart_{{unique_id}}').html("<p class='alert'>{% trans 'No data for theses criteria.' %}</p>"); +} else { var showmarker = false; -if (values_{{unique_id}}.length < 25){ +if (values_1_{{unique_id}}.length < 25){ var showmarker = true; } var plot_{{unique_id}} = $.jqplot('chart_{{unique_id}}', - [values_{{unique_id}}], { - series:[{showMarker:showmarker}], + [{% for idx, lbl, values in dashboard.values %}{% if forloop.counter0 > 0 %} {% if forloop.counter0 > 1 %}, {% endif%} values_{{forloop.counter0}}_{{unique_id}} {% endif %} {% endfor%}], { axes:{ {%ifequal slicing 'year'%} xaxis:{ label:'{% trans "Year" %}', @@ -98,7 +125,11 @@ var plot_{{unique_id}} = $.jqplot('chart_{{unique_id}}', xaxis:{ label:'{% trans "Month" %}', renderer:$.jqplot.DateAxisRenderer, - tickOptions:{formatString:'%b %Y'}, + tickRenderer:$.jqplot.CanvasAxisTickRenderer, + tickOptions:{ + formatString:'%b %Y', + angle:-25 + } },{%endifequal%} yaxis:{ label:'{% trans "Number"%}', @@ -108,11 +139,28 @@ var plot_{{unique_id}} = $.jqplot('chart_{{unique_id}}', highlighter: { show: true, sizeAdjust: 7.5 - } + }, + series:[{% for label in dashboard.serie_labels %} + {%if forloop.counter0%}, {% endif %}{label:"{{label}}"}{% endfor %} + ], + cursor:{ + show: true, + zoom:true, + showTooltip:false + }, + legend: { show:true, location: 'nw' } + }); + + $('#chart_img_display_{{unique_id}}').click(function(){ + $('#chart_img_{{unique_id}}').hide(); + $('#img_{{unique_id}}').html( + $('<img/>').attr( + 'src', $('#chart_{{unique_id}}').jqplotToImageStr({}) + ) + ); + $('#chart_img_{{unique_id}}').show('slow'); }); -} else { -$('#chart_{{unique_id}}').html("<p class='alert'>{% trans 'No data for theses criteria.' %}</p"); } $('#search_{{unique_id}}').click(function (){ |