okfn-brasil/perfil-politico-frontend

Front-end that consumes Perfil Político's API

Perfil Político

Front-end for Perfil Político — a platform for profiling candidates in Brazilian 2022 General Election, based entirely on open data.

Prerequisites

• Node.js 16
• npm 8.17+

You can use nvm to manage multiple installations of node.js on your computer (check nvm instalattion guides for MacOS and Linux here and for Windows here).

Once you have it, you can use the right node version for the project using these commands:

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

It will make your website available here: localhost:8080

Compiles and minifies for production

npm run build

Then serve the contents of the dist/ directory.

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

perfil-politico-frontend's Issues

[Frontend] Implementação da página de listagem de candidatos

Projeto em andamento?

Gostaria de contribuir com algumas adições simples ao d3.js, mas o projeto parece estar parado, inclusive com issues já resolvidas mas nunca aceitas. Alguém está mantendo o repositório?

[Ideação] Brainstorming

Dinâmica feita com diversos atores que fazem parte do Perfil Político para geração de ideias e construir soluções de problemas de forma colaborativa.

Link do Miro: https://miro.com/app/board/uXjVOlSU09o=/

Dia da dinâmica: 19/07/2022

Na página de perfil da candidatura de deputados a navbar apresenta cargo de presidente

O bug pode ser observado em candidaturas de deputado estadual, federal e distrital.

Exemplo:

[Frontend] Implementação da página do candidato

Change state information title when filtering by president

Problem

Currently, whenever you filter any group by state, the information is shown accurately.
But the state is meaningless when you're filtering by the president position (since it has a national reach).

Solution Proposal

To change the presented title

from

São 13 candidatos a presidente em São Paulo

to

São 13 candidatos a presidente no Brasil

Tooltip do gráfico de patrimônio não aparece no Netlify

A tooltip implementada com vue3-popper funciona normalmente localmente mas não no Netlify, onde fica com fundo transparente.

Exemplo local	Exemplo Netlify

Proposal: Migration to Webpack

Considering that the project is using Gulp as its bundler/task automator, why not using webpack or parcel as a bundler?
That should require much less configuration to achieve the same results and open a whole new set of features (as bundle splitting in a near future).
I'd be willing to test this proposal and present the results here. 🤖

Add gender support for labels and text

Copied from the other repository :)

Since we already have the candidates gender, it would be nice to print the text accordingly or use a gender neutral approach when necessary:

Usando yarn ao invés de npm causa um problema no node-sass

Quando rodo localmente usando yarn para instalação:

Com npm, após rodar, ele dá um aviso pra usar o comando node rebuild node-sass daí a versão local funciona normalmente.

[Frontend] Refino de reaproveitamentos

• Ver se as bolinhas do projeto
• Ver ferramentas úteis para análises

[Ideação] Mapeamento de dados

O mapeamento de dados sobre os candidatos é de suma importância quando tratamos da visualização das mesmas. Por isso será feito um mapeamento de quais dados estão disponíveis em nossas bases de dados, sendo utilizadas atualmente ou não, para adotarmos dinâmicas e propostas de layout de acordo com a disponibilidade de informações dos candidatos. (Baseado em 2018).

Critérios de aceite:

• Mapeamento da base de dados do Perfil Político

Gráfico de escolaridade não apresentou escolaridade do candidato adequadamente

No caso deste candidato, a escolaridade "ENSINO FUNDAMENTAL COMPLETO" não apareceu no gráfico em verde, apesar de a escolaridade ter representantes nas eleições de 2018:

Campo de busca por candidato está mal posicionado

[PT-BR] O campo está no footer, distante dos demais filtros.

Ação: Reposicionar o campo, aproximando-o dos filtros na parte de cima da tela.

---

[EN] The field is in the footer, far from the other filters.

Action: Change the field's position, bringing it closer to the filters at the top of the screen.

Politicians' bills

Few days ago, I've talk with @cuducos to create a section inside the profile with projects presented by the politicians! I'm opening this issue to track my points and questions while I develop it :D

Ordem do histórico de candidaturas

A ordem de exibição dos anos das candidaturas não é cronológica e conflita com a ordem da evolução do patrimônio
Ação: Inverter ordem de exibição para antigo > recente

[Frontend] Criação de componentes

Criação de componentes do projeto. Componentes são definidos como padrões que encontramos em nosso layout e partir disso criamos trechos de código que poderá ser reutilizável em toda aplicação, apenas chamando o "objeto". Assim, se houver uma alteração no componente, não precisará dar manutenção em vários lugares se o código que é a mesma coisa não for centralizado em um lugar. No novo design do Perfil Político temos os seguintes componentes:

• Menu
• Card do candidato
• Card de gráficos e informações
• Rodapé
• Paginação
• Logotipo
• Análises
• Faq

[Frontend] Implementação da página principal e sobre

Implementação do layout da página inicial e da sobre, incluindo parte mobile.

• Implementação desktop
• Implementação mobile

Ajustes no conteúdo explicativo

[PT-BR] Sobre o Projeto + Perguntas frequentes:

• Atualizar informações sobre 2020
• Abrir conteúdo na mesma aba
• Inserir link na imagem da header para retornar à página inicial

---

[EN]

• Update information about 2020' elections data
• Open content in the same tab
• Insert link in the header image to return to the home page

Improvement: Adapt the frontend to an accessible way

Description

What do you think about adapting this project to an accessible way for people who are using screen readers?

I could make this implementation if accepted of community.

@cuducos @sergiomario

[Frontend] Ajuste no deploy da aplicação de frontend

[Design] Desenho do protótipo

Com a dinâmica de brainstorming feita, nós precisamos coletar os feedbacks sobre o fluxo atual do sistema e utilizar essa informações como apoio na construção do novo layout. Nessa construção vai contemplar uma reestruturação visual da ferramenta para a construção do front-end.

Critérios de aceite:

• Construção do novo layout no Figma
• Revisão do novo layout
• Refinamento do novo layout
• Revisão final do novo layout

Adapt layout for 2020 municipal elections

Currently, the platform design is only designed for national elections.

However, the 2020 elections will have a new base of politicians, with more electoral fields, more candidates and only two positions.

Add Linter

Hey, I've noticed that the project doesn't have a linter. Is it a valid proposal to help with this?

[Ideação] Benchmarking

Junto com a construção do layout, será feito um levantamento de benchmark para apoio na construção do novo desenho. Será documentada ferramentas e tecnologias que também possui uma proposta na área que se insere o projeto do Perfil Político.

Critérios de aceite:

• Construção da documentação de projetos para auxiliar a construção do desenho do projeto

Alternative to NPM precommit scripts

Currently there's a warning that reads:

Warning: Setting pre-commit script in package.json > scripts will be deprecated
Please move it to husky.hooks in package.json, a .huskyrc file, or a husky.config.js file
Or run ./node_modules/.bin/husky-upgrade for automatic update

Any ideas to deal with that in the near future?

Use HTML template engine

We have repeated snippets of code in our three HTML pages (index.html, sobre.html and faq.html). The DRY philosophy invites use includes to avoid this repetition and enhance maintainability.

[Frontend] Implementação de serviços de integração com o backend

Indicar quando foi a última vez que os dados foram atualizados

Adicionar a data de atualização para que o leitor esteja ciente que há um intervalo de mudanças que não está coberto

---

Essa ideia surgiu em algum momento durante o Sprint

Melhorias nos filtros

[PT-BR] O filtro das perguntas não exibe qual é a proporção do critério selecionado em relação ao todo.
Ação: Acrescentar texto com o cálculo abaixo do texto com o número absoluto.

O texto com o resultado do filtro não informa o acúmulo de seleções.
Ação: alterar redação para exibir o resultado cumulativo. Ex: Destes candidatos, X são mulheres, nunca se candidataram e são negros ou pardos"

[Frontend] Configuração do projeto

Fix toCurrency function

The function toCurrency is not behaving as expected because it strips zeros from the decimals:

[Frontend] Escrita dos textos

Descrição

O frontend precisa dos textos de todas as seções, botões e componentes do site. A OKBR precisa montar um documento com estes textos e validar a escrita final.

Definição de pronto

• Documento de escrita de textos criado
• Todos os textos validados

[Ideação] Roteiro Brainstorming

A construção do roteiro do brainstorming servirá como apoio para a dinâmica que será feita para captar ideias e soluções para criação da nova proposta de layout do Perfil Político.

Critérios de aceite:

• Criação da estrutura da dinâmica na ferramenta Miro
• Criação da apresentação
• Colocar fluxo mobile no Miro

Ausência de seletor para o ano da eleição

[PT-BR] Desenvolver seletor informando o ano da eleição.

Possibilidades:

• Escolher o ano antes de carregar base de candidatos;
• Adicionar campo seletor antes de cargo;
• Timeline com os anos disponíveis

---

[EN] Develop selection box to choose election year.

Possibilities:

• Choose the year before loading candidate base;
• Add selector field before candidate's office;
• Timeline with available years

Atualização da logo da OKBR

Simples atualização da logo da OKBR.

[Design] Fluxo de usuário

Utilizando uma técnica de UX, o User Flow é uma técnica que te permite mapear todo fluxo de telas do site de forma rápida. Essa técnica funciona bem para alinhar os caminhos e ações que o usuário pode fazer junto com os membros do time. Além disso verificar quais funcionalidades estão operando dentro da conformidade e redirecionamentos.

Critérios de aceite:

• Mapeando de todos os fluxos permitidos no site
• Mapeamento de erros de funcionalidade e redirecionamentos
• Trazer primeiras sugestões de mudanças e melhorias