From 53950046714864f89bb3b891ee4854c65b370420 Mon Sep 17 00:00:00 2001 From: Breno Teixeira Date: Thu, 24 Jul 2014 18:35:38 -0300 Subject: [PATCH] Adicionando chartjs no grafico 1 de convenios --- sigi/apps/convenios/models.py | 2 +- sigi/context_processors.py | 4 +- sigiStatic/css/style.css | 35 ++++ templates/index.html | 197 ++++++++++-------- .../snippets/modules/charts-convenios.html | 17 +- 5 files changed, 159 insertions(+), 96 deletions(-) create mode 100644 sigiStatic/css/style.css diff --git a/sigi/apps/convenios/models.py b/sigi/apps/convenios/models.py index f814e0d..0297a22 100644 --- a/sigi/apps/convenios/models.py +++ b/sigi/apps/convenios/models.py @@ -1,4 +1,4 @@ -# -*- coding: utf-8 -*- +#style="list-style-type: noneo -*- coding: utf-8 -*- from datetime import datetime from django.db import models from django.contrib.contenttypes import generic diff --git a/sigi/context_processors.py b/sigi/context_processors.py index 3859909..4d1a577 100644 --- a/sigi/context_processors.py +++ b/sigi/context_processors.py @@ -8,6 +8,7 @@ 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 @@ -66,7 +67,6 @@ def busca_informacoes_camara(): conv_em_andamento_proj = convenios_em_andamento.filter(projeto=projeto) conv_equipadas_proj = convenios_com_aceite.filter(projeto=projeto) - cabecalho_topo.append(projeto.sigla) lista_total.append(camaras.filter(convenio__projeto=projeto).count()) lista_nao_aderidas.append(camaras.filter(convenio__in=conv_sem_adesao_proj).count() ) @@ -142,7 +142,7 @@ def grafico_convenio_projeto(convenios): projetos = Projeto.objects.all() - lista_projetos = [(projeto.nome, + lista_projetos = [(projeto.sigla, convenios.filter(projeto=projeto).count(), colors.next(), highlights.next()) diff --git a/sigiStatic/css/style.css b/sigiStatic/css/style.css new file mode 100644 index 0000000..5ccc756 --- /dev/null +++ b/sigiStatic/css/style.css @@ -0,0 +1,35 @@ +#canvas-holder { + padding: 20px 20px 20px 20px; + min-height: 180px; + position: relative; + margin-top: 110px; +} +.pie-legend { + list-style: none; + position: absolute; + right: 8px; + top: 18px; +} +.pie-legend li span { + display: block; + position: absolute; + left: 0; + top: 0; + width: 20px; + height: 100%; + border-radius: 5px; +} +.pie-legend li { + display: block; + padding-left: 30px; + position: relative; + margin-bottom: 4px; + border-radius: 5px; + padding: 2px 8px 2px 28px; + font-size: 14px; + cursor: default; + -webkit-transition: background-color 200ms ease-in-out; + -moz-transition: background-color 200ms ease-in-out; + -o-transition: background-color 200ms ease-in-out; + transition: background-color 200ms ease-in-out; +} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 39a19c8..dbf2ecb 100644 --- a/templates/index.html +++ b/templates/index.html @@ -5,6 +5,8 @@ {% block extrahead %} {{ block.super }} + + @@ -34,9 +36,9 @@ var mark = new google.maps.Marker(markData); var infoWin = new google.maps.InfoWindow({content: '' + municipio.nome + '
' + - 'Início da visita:
' + municipio.inicio + '
' + - 'Término da visita:
' + municipio.fim + '
' + - 'Equipe:
' + municipio.equipe }); + 'Início da visita:
' + municipio.inicio + '
' + + 'Término da visita:
' + municipio.fim + '
' + + 'Equipe:
' + municipio.equipe }); linkMarkMessage(mark, infoWin, map); } }); @@ -52,107 +54,124 @@ {% 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 }}" }, - {# {% endif %}#} {% endfor %} ] window.onload = function(){ + var canvas = document.getElementById("canvas-holder"); var ctx = document.getElementById("chart-area-1").getContext("2d"); - window.myPie = new Chart(ctx).Pie(pieData1).generateLegend(); + window.myPie = new Chart(ctx).Pie(pieData1); var ctx = document.getElementById("chart-area-2").getContext("2d"); - window.myPie = new Chart(ctx).Pie(pieData2).generateLegend(); + window.myPie = new Chart(ctx).Pie(pieData2); + + var legendHolder = document.createElement('div'); + legendHolder.innerHTML = myPie.generateLegend(); + // Include a html legend template after the module doughnut itself +{# var helpers = Chart.helpers;#} +{# helpers.each(legendHolder.firstChild.childNodes, function(legendNode, index){#} +{# helpers.addEvent(legendNode, 'mouseover', function(){#} +{# var activeSegment = myPie.segments[index];#} +{# activeSegment.save();#} +{# activeSegment.fillColor = activeSegment.highlightColor;#} +{# myPie.showTooltip([activeSegment]);#} +{# activeSegment.restore();#} +{# });#} +{# });#} +{# helpers.addEvent(legendHolder.firstChild, 'mouseout', function(){#} +{# myPie.draw();#} +{# });#} + canvas.appendChild(legendHolder.firstChild); }; {% endfor %} {# Highcharts scripts #} -{# #} -{# #} -{##} -{# #} + {# #} + {# #} + {##} + {# #} {# end highcharts scripts #} {% endblock %} diff --git a/templates/snippets/modules/charts-convenios.html b/templates/snippets/modules/charts-convenios.html index caeb43f..96fe87e 100644 --- a/templates/snippets/modules/charts-convenios.html +++ b/templates/snippets/modules/charts-convenios.html @@ -26,12 +26,21 @@ -
+

Convênios

-
- +
+
-
    +{#
    #} +{#
      #} +{# {% for num, dados in dados_graficos_convenio_projeto %}#} +{# {% for label, value, color in dados %}#} +{#
    •     {{ label }}
      • #} +{# {% endfor %}#} +{# {% endfor %}#} +{#
    #} +{#
    #} +{#
      #}