-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #25 from unb-mds/feature/jose-graficos
📝 charts
- Loading branch information
Showing
8 changed files
with
198 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import dynamic from 'next/dynamic'; | ||
| import { MunicipioData } from '../Custom/types'; // Defina o tipo de dados conforme necessário | ||
|
|
||
| const Chart = dynamic(() => import('react-apexcharts'), { ssr: false }); | ||
|
|
||
| interface GraphProps { | ||
| municipio: string; | ||
| } | ||
|
|
||
| const GraphComponent: React.FC<GraphProps> = ({ municipio }) => { | ||
| const [chartData, setChartData] = useState<any>({}); | ||
|
|
||
| useEffect(() => { | ||
| const fetchData = async () => { | ||
| try { | ||
| const formattedMunicipio = municipio | ||
| .toLowerCase() | ||
| .replace(/\s+/g, '-') // Substitui espaços em branco por hífens | ||
| .normalize('NFD') // Normaliza caracteres acentuados | ||
| .replace(/[\u0300-\u036f]/g, ''); // Remove caracteres diacríticos | ||
|
|
||
| const response = await fetch(`https://raw.githubusercontent.com/unb-mds/2023-2-Squad07/main/public/${formattedMunicipio}_monthly_sums.json`); | ||
| const data: MunicipioData[] = await response.json(); | ||
|
|
||
| const chartOptions = { | ||
| colors: ['#222831'], | ||
| xaxis: { | ||
| categories: data.map((item) => item.month), | ||
| }, | ||
| }; | ||
|
|
||
| const chartSeries = [ | ||
| { | ||
| name: 'Quantidade de Avisos de Licitação', | ||
| data: data.map((item) => item.sum_num_avisos_licitacao), | ||
| }, | ||
| ]; | ||
|
|
||
| setChartData({ | ||
| options: chartOptions, | ||
| series: chartSeries, | ||
| }); | ||
| } catch (error) { | ||
| console.error('Error fetching data:', error); | ||
| setChartData({}); // Limpa os dados do gráfico em caso de erro | ||
| } | ||
| }; | ||
|
|
||
| fetchData(); | ||
| }, [municipio]); | ||
|
|
||
| return ( | ||
| <div> | ||
| {chartData.options && chartData.series && ( | ||
| <Chart options={chartData.options} series={chartData.series} type="bar" height={350} /> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default GraphComponent; |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export interface MunicipioData { | ||
| municipio: string; | ||
| month: string; | ||
| sum_num_avisos_licitacao: number; | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,73 +1,79 @@ | ||
| import Image from "next/image"; | ||
| import { useState, useEffect } from "react" | ||
| import { useState, useEffect } from "react"; | ||
| import GraphComponent from "../Charts/GraphComponent"; | ||
| import { MunicipioData } from '../Custom/types'; | ||
|
|
||
| interface TitleProps { | ||
| municipio: string; | ||
| ano: string; | ||
| } | ||
|
|
||
| export const Home = ({ municipio, ano }: TitleProps) => { | ||
| const [titleText, setTitleText] = useState("Brasília"); | ||
| const [bids, setBids] = useState<any>([]); | ||
|
|
||
| const buildTitle = () => { | ||
| fetch(`https://raw.githubusercontent.com/unb-mds/2023-2-Squad07/main/public/resultados.json`, { | ||
| method: 'GET', | ||
| }).then(res => res.json()) | ||
| .then(res => setBids(res)) | ||
| }; | ||
| export const Home: React.FC<TitleProps> = ({ ano }) => { | ||
| const [selectedMunicipio, setSelectedMunicipio] = useState<string | null>(null); | ||
| const [titleText, setTitleText] = useState("Ceará"); | ||
| const [bids, setBids] = useState<MunicipioData[]>([]); | ||
|
|
||
| useEffect(() => { | ||
| buildTitle(); | ||
|
|
||
| if (municipio === 'geral') { | ||
| setTitleText('Ceará') | ||
| if (selectedMunicipio) { | ||
| setTitleText(selectedMunicipio); | ||
| } else { | ||
| setTitleText("Ceará"); | ||
| } | ||
| }, [municipio]); | ||
| }, [selectedMunicipio]); | ||
|
|
||
| // Função para formatar a saída dos avisos | ||
| const formatAviso = (bid: any) => { | ||
| return ( | ||
| <div className="aviso"> | ||
| No dia <span className="text-red-500">{bid.pdf_filename.replace(/APRECE_(\d{2})_(\d{2})_(\d{2}).pdf/, '$1/$2/$3')}</span> houveram <span className="text-red-500">{bid.num_avisos_licitacao} avisos de licitação</span>. | ||
| </div> | ||
| ); | ||
| const municipios = [ | ||
| "Abaiara", "Acopiara", "Altaneira", "Alto Santo", "Antonina do Norte", "Aratuba", "Arneiroz", "Assaré", | ||
| "Banabuiú", "Barbalha", "Boa Viagem", "Campos Sales", "Cariús", "Chorozinho", "Croatá", "Ereré", "Farias Brito", "Fortim", | ||
| "Frecheirinha", "Groaíras", "Guaraciaba do Norte", "Ibaratama", "Ibicuitinga", "Icó", "Iguatu", "Irauçuba", | ||
| "Jaguaretama", "Jardim", "Jati", "Mauriti", "Milagres", "Mombaça", "Morada Nova", "Nova Olinda", "Nova Russas", | ||
| "Orós", "Palhano", "Piquet Carneiro", "Potengi", "Quiterianópolis", "Quixáda", "Quixelô", "Quixeré", "Salitre", | ||
| "Santana do Cariri", "Tabuleiro do Norte", "Várzea Alegre" | ||
| ]; | ||
|
|
||
| const handleMunicipioChange = (event: React.ChangeEvent<HTMLSelectElement>) => { | ||
| setSelectedMunicipio(event.target.value); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="flex"> | ||
| <div className="bg-[#7f1d1d] w-80 h-screen p-4 text-white"> | ||
| <p className="text-white font-bold text-2xl mt-4 mb-4">Confira as Licitação dos municípios do Ceará.</p> | ||
| <p className="text-white mt-4">Coletamos os diários oficiais municipais, separamos por municipios e analisamos as licitações. Com foco em simplicidade e replicabilidade, queremos impactar a forma como monitoramos atos do executivos nos municipios do Ceara</p> | ||
| {/* Logo da Universidade com dois espaços */} | ||
| <div className="bg-[#7f1d1d] w-80 h-screen p-4 text-white"> | ||
| <p className="text-white font-bold text-2xl mt-4 mb-4">Confira a quantidade de avisos de licitação nos municípios do Ceará.</p> | ||
| <p className="text-white mt-4">Este projeto foi realizado pelo Squad 07 durante o segundo semestre de 2023 na disciplina Métodos de Desenvolvimento de Software da Universidade de Brasília.</p> | ||
| <Image | ||
| alt="logo-unb" | ||
| width={240} | ||
| height={240} | ||
| src="https://i.pinimg.com/originals/84/a7/86/84a786798c453d6a536f31cba73e5409.png" | ||
| /> | ||
| </div> | ||
| <div className="p-4 text-2xl 2xl:text-3xl 3xl:text-[2.4375rem] font-semibold lg:w-[42.93rem] leading-10"> | ||
| <div className="p-4 text-2xl 2xl:text-3xl 3xl:text-[2.4375rem] font-semibold lg:w-[42.93rem] leading-10"> | ||
| <div> | ||
| <label>Selecione o Município:</label> | ||
| <select | ||
| onChange={handleMunicipioChange} | ||
| value={selectedMunicipio || ''} | ||
| > | ||
| <option value="">Todos</option> | ||
| {municipios.map((municipio) => ( | ||
| <option key={municipio} value={municipio}> | ||
| {municipio} | ||
| </option> | ||
| ))} | ||
| </select> | ||
| </div> | ||
| {ano === "geral" ? ( | ||
| <> | ||
| Acompanhe a quantidade de avisos de licitação que ocorreram no | ||
| <span className="text-[#4AA381]">{(" " + titleText) as string}</span> | ||
| Acompanhe a quantidade de avisos de licitação que ocorreram em todos os meses de 2023 em | ||
| <span className="text-[#802323]">{(" " + titleText) as string}</span> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| Acompanhe a quantidade de avisos de licitação que ocorreram no | ||
| Acompanhe a quantidade de avisos de licitação que ocorreram em 2023 em | ||
| <span className="text-[#4AA381]">{(" " + titleText) as string} - {(" " + ano) as string}</span> | ||
| </> | ||
| )} | ||
| <br /> | ||
| <div className="font-semibold"> | ||
| {bids.map((bid: any, i: number) => ( | ||
| <div key={i} className="flex-row pt-5 pb-5"> | ||
| {formatAviso(bid)} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| <GraphComponent municipio={selectedMunicipio || ''} /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters