ILB
/
sigi
mirror of https://github.com/interlegis/sigi.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Migrando charts da home para Charts.js

producao
Breno Teixeira 11 years ago
parent
a76798d92b
commit
a632686e38
4 changed files with 167 additions and 118 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 49
      sigi/context_processors.py
  2. 10
      sigiStatic/js/Chart.min.js
  3. 179
      templates/index.html
  4. 17
      templates/snippets/modules/charts-convenios.html

49
sigi/context_processors.py
View File

@ -1,12 +1,13 @@
#-*- coding:utf-8 -*-
from itertools import cycle
import datetime
from sigi.apps.casas.models import CasaLegislativa
from sigi.apps.convenios.models import Convenio, Projeto
from sigi.apps.servicos.models import TipoServico
from sigi.apps.diagnosticos.models import Diagnostico
from sigi.apps.metas.models import Meta
def charts_data(request):
"""
Busca informacoes para a criacao dos graficos e resumos
@ -18,15 +19,13 @@ def charts_data(request):
tabela_resumo_camara = busca_informacoes_camara()
tabela_resumo_seit = busca_informacoes_seit()
tabela_resumo_diagnostico = busca_informacoes_diagnostico()
g_conv_proj = grafico_convenio_projeto(convenios)
g_convassinado_proj = grafico_convenio_projeto(convenios_assinados)
dados_graficos_convenio_projeto = [(1, grafico_convenio_projeto(convenios)),
(2, grafico_convenio_projeto(convenios_assinados))]
return {
'tabela_resumo_camara': tabela_resumo_camara,
'tabela_resumo_seit': tabela_resumo_seit,
'tabela_resumo_diagnostico': tabela_resumo_diagnostico,
'g_conv_proj': g_conv_proj,
"g_convassinado_proj": g_convassinado_proj,
'dados_graficos_convenio_projeto': dados_graficos_convenio_projeto,
'metas': Meta.objects.all(),
}
@ -117,16 +116,40 @@ def busca_informacoes_camara():
def grafico_convenio_projeto(convenios):
projetos = Projeto.objects.all()
lista_projetos = []
for projeto in projetos:
lista_projetos.append((projeto.nome, convenios.filter(projeto=projeto).count()))
total_convenios = "Total: " + str(convenios.count())
colors = cycle(['#7cb5ec',
'#434348',
'#90ed7d',
'#f7a35c',
'#8085e9',
'#f15c80',
'#e4d354',
'#8085e8',
'#8d4653',
'#91e8e1', ])
# colors = cycle(base_colors)
highlights = cycle(['#B0D3F4',
'#8E8E91',
'#BCF4B1',
'#FAC89D',
'#B3B6F2',
'#F79DB3',
'#EFE598',
'#B3B6F1',
'#BB9098',
'#BDF1ED', ])
lista_projetos.insert(0, total_convenios)
projetos = Projeto.objects.all()
lista_projetos = [(projeto.nome,
convenios.filter(projeto=projeto).count(),
colors.next(),
highlights.next())
for projeto in projetos]
# print lista_projetos
# total_convenios = "Total: " + str(convenios.count())
# lista_projetos.insert(0, total_convenios)
return lista_projetos

10
sigiStatic/js/Chart.min.js
View File

File diff suppressed because one or more lines are too long

179
templates/index.html
View File

@ -8,6 +8,7 @@
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/core.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.init.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/Chart.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
(function($) {
@ -47,89 +48,111 @@
})
})(django.jQuery);
</script>
{# Highcharts scripts #}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function () {
// Build the chart
$('#processos_conv').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Processos de convênios por projeto <br/> {{ g_conv_proj.0 }}'
<script>
{% for num, dados in dados_graficos_convenio_projeto %}
var pieData{{ num }} = [
{% for label, value, color, highlight in dados %}
{# {% if not forloop.first %}#}
{
label: "{{ label }}",
value: {{ value }},
color:"{{ color }}",
highlight: "{{ highlight }}"
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
{% for k, v in g_conv_proj %}
{% if not forloop.first %}
['{{ k }}', {{ v }}],
{% endif %}
{# {% endif %}#}
{% endfor %}
]
}]
});
$('#processos_conv_ass').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Convênios assinados por projeto <br/> {{ g_convassinado_proj.0 }}'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
{% for k, v in g_convassinado_proj %}
{% if not forloop.first %}
['{{ k }}', {{ v }}],
{% endif %}
window.onload = function(){
var ctx = document.getElementById("chart-area-1").getContext("2d");
window.myPie = new Chart(ctx).Pie(pieData1).generateLegend();
var ctx = document.getElementById("chart-area-2").getContext("2d");
window.myPie = new Chart(ctx).Pie(pieData2).generateLegend();
};
{% endfor %}
]
}]
});
});
});
</script>
{# Highcharts scripts #}
{# <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>#}
{# <script src="http://code.highcharts.com/highcharts.js"></script>#}
{##}
{# <script type="text/javascript">#}
{# $(function () {#}
{# var chart;#}
{##}
{# $(document).ready(function () {#}
{##}
{# // Build the chart#}
{# $('#processos_conv').highcharts({#}
{# chart: {#}
{# plotBackgroundColor: null,#}
{# plotBorderWidth: null,#}
{# plotShadow: false#}
{# },#}
{# title: {#}
{# text: 'Processos de convênios por projeto <br/> {{ g_conv_proj.0 }}'#}
{# },#}
{# tooltip: {#}
{# pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'#}
{# },#}
{# plotOptions: {#}
{# pie: {#}
{# allowPointSelect: true,#}
{# cursor: 'pointer',#}
{# dataLabels: {#}
{# enabled: false#}
{# },#}
{# showInLegend: true#}
{# }#}
{# },#}
{# series: [{#}
{# type: 'pie',#}
{# name: 'Browser share',#}
{# data: [#}
{# {% for k, v in g_conv_proj %}#}
{# {% if not forloop.first %}#}
{# ['{{ k }}', {{ v }}],#}
{# {% endif %}#}
{# {% endfor %}#}
{# ]#}
{# }]#}
{# });#}
{# $('#processos_conv_ass').highcharts({#}
{# chart: {#}
{# plotBackgroundColor: null,#}
{# plotBorderWidth: null,#}
{# plotShadow: false#}
{# },#}
{# title: {#}
{# text: 'Convênios assinados por projeto <br/> {{ g_convassinado_proj.0 }}'#}
{# },#}
{# tooltip: {#}
{# pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'#}
{# },#}
{# plotOptions: {#}
{# pie: {#}
{# allowPointSelect: true,#}
{# cursor: 'pointer',#}
{# dataLabels: {#}
{# enabled: false#}
{# },#}
{# showInLegend: true#}
{# }#}
{# },#}
{# series: [{#}
{# type: 'pie',#}
{# name: 'Browser share',#}
{# data: [#}
{# {% for k, v in g_convassinado_proj %}#}
{# {% if not forloop.first %}#}
{# ['{{ k }}', {{ v }}],#}
{# {% endif %}#}
{# {% endfor %}#}
{# ]#}
{# }]#}
{# });#}
{# });#}
{##}
{# });#}
{# </script>#}
{# end highcharts scripts #}
{% endblock %}

17
templates/snippets/modules/charts-convenios.html
View File

@ -28,13 +28,10 @@
<div class="module" style="height: 300px;">
<h2>Convênios</h2>
<div id="processos_conv_ass" class="align-center" style="height: 280px;">
{% if g_convassinado_proj.convenios %}
<img src="{{ convenios_assinados.url }}&chdlp=b" class="chart" />
{% else %}
<p>Nenhum dado para exibir</p>
{% endif %}
<div id="canvas-holder" class="align-center" style="margin-top: 55px">
<canvas id="chart-area-1" width="220" height="220" />
</div>
<ul class="pie-legend"></ul>
</div>
<div class="module" style="height: 300px;">
@ -88,12 +85,8 @@
<div class="module" style="height: 300px;">
<h2>Convênios</h2>
<div id="processos_conv" class="align-center" style="height: 280px;">
{% if g_conv_proj.convenios %}
<img src="{{ processos.url }}&chdlp=b" class="chart" />
{% else %}
<p>Nenhum dado para exibir</p>
{% endif %}
<div id="canvas-holder" class="align-center" style="margin-top: 55px">
<canvas id="chart-area-2" width="220" height="220" />
</div>
</div>

Write Preview
Loading…
Cancel
Save