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
Unified 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 -*- #-*- coding:utf-8 -*-
from itertools import cycle
import datetime import datetime
from sigi.apps.casas.models import CasaLegislativa from sigi.apps.casas.models import CasaLegislativa
from sigi.apps.convenios.models import Convenio, Projeto from sigi.apps.convenios.models import Convenio, Projeto
from sigi.apps.servicos.models import TipoServico from sigi.apps.servicos.models import TipoServico
from sigi.apps.diagnosticos.models import Diagnostico from sigi.apps.diagnosticos.models import Diagnostico
from sigi.apps.metas.models import Meta from sigi.apps.metas.models import Meta
def charts_data(request): def charts_data(request):
""" """
Busca informacoes para a criacao dos graficos e resumos 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_camara = busca_informacoes_camara()
tabela_resumo_seit = busca_informacoes_seit() tabela_resumo_seit = busca_informacoes_seit()
tabela_resumo_diagnostico = busca_informacoes_diagnostico() tabela_resumo_diagnostico = busca_informacoes_diagnostico()
g_conv_proj = grafico_convenio_projeto(convenios) dados_graficos_convenio_projeto = [(1, grafico_convenio_projeto(convenios)),
g_convassinado_proj = grafico_convenio_projeto(convenios_assinados) (2, grafico_convenio_projeto(convenios_assinados))]
return { return {
'tabela_resumo_camara': tabela_resumo_camara, 'tabela_resumo_camara': tabela_resumo_camara,
'tabela_resumo_seit': tabela_resumo_seit, 'tabela_resumo_seit': tabela_resumo_seit,
'tabela_resumo_diagnostico': tabela_resumo_diagnostico, 'tabela_resumo_diagnostico': tabela_resumo_diagnostico,
'g_conv_proj': g_conv_proj, 'dados_graficos_convenio_projeto': dados_graficos_convenio_projeto,
"g_convassinado_proj": g_convassinado_proj,
'metas': Meta.objects.all(), 'metas': Meta.objects.all(),
} }
@ -117,16 +116,40 @@ def busca_informacoes_camara():
def grafico_convenio_projeto(convenios): def grafico_convenio_projeto(convenios):
projetos = Projeto.objects.all()
lista_projetos = [] colors = cycle(['#7cb5ec',
for projeto in projetos: '#434348',
lista_projetos.append((projeto.nome, convenios.filter(projeto=projeto).count())) '#90ed7d',
'#f7a35c',
total_convenios = "Total: " + str(convenios.count()) '#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 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/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.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.init.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" src="https://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript"> <script type="text/javascript">
(function($) { (function($) {
@ -47,89 +48,111 @@
}) })
})(django.jQuery); })(django.jQuery);
</script> </script>
{# Highcharts scripts #} <script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> {% for num, dados in dados_graficos_convenio_projeto %}
<script src="http://code.highcharts.com/highcharts.js"></script> var pieData{{ num }} = [
{% for label, value, color, highlight in dados %}
<script type="text/javascript"> {# {% if not forloop.first %}#}
$(function () { {
var chart; label: "{{ label }}",
value: {{ value }},
$(document).ready(function () { color:"{{ color }}",
highlight: "{{ highlight }}"
// 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: { {# {% endif %}#}
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 %} {% endfor %}
] ]
}] window.onload = function(){
}); var ctx = document.getElementById("chart-area-1").getContext("2d");
$('#processos_conv_ass').highcharts({ window.myPie = new Chart(ctx).Pie(pieData1).generateLegend();
chart: { var ctx = document.getElementById("chart-area-2").getContext("2d");
plotBackgroundColor: null, window.myPie = new Chart(ctx).Pie(pieData2).generateLegend();
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 %} {% endfor %}
]
}]
});
});
});
</script> </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 #} {# end highcharts scripts #}
{% endblock %} {% endblock %}

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

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

Write Preview
Loading…
Cancel
Save