Desenvolvendo uma API em .Net 6 e consumindo no React para geração de gráficos

Fernando Guerra

5 min

É muito comum na área administrativa dos sistemas Web a visualização de gráficos por muitos conhecidos como dashboard, Dashboards são painéis visuais que mostram um conjunto de informações, com métricas eindicadores importantes para o alcance de resultados traçados previamente. O objetivo de um dashboard é o monitoramento de resultados de um determinado negócio por meio de diferentes fontes de dados, que podem ser analisadas por profissionais do setor de TI ou de gestão empresarial, para saber mais acesse o link

Hoje vamos desenvolver uma Minimal API em .Net 6 que irá retornar os dados para a geração de nossos gráficos e na aplicação React iremos consumir esta API, simples assim.

Bora para o código, primeiro vamos criar nossa API, abra o Visual Studio e clique em criar novo projeto

Escolha o projeto ASP.NET Core Web API

Informe o nome do Projeto e o local e clique em próximo

Na tela a seguir não é necessário fazer alterações, clique em criar

Projeto criado

Apague as classes WeatherForecastController e WeatherForecast

Vamos criar nossos endpoints que irão retornar os valores para a geração dos gráficos

Primeiro vamos criar a pasta ViewModels que irá conter as classes referente aos nossos gráficos, clique com o botão direito na pasta Controllers, Add e New Folder

Crie a pasta ViewModels

O primeiro gráfico que iremos mostrar será referente a quantidade de usuários cadatrados no sistema por mês, vamos criar uma classe GetChartUserRegisterbyMonthResponse dentro da pasta ViewModels

Insira as propriedades na classe


          
            namespace CorujasDev.ReactGoogleCharts.Api.ViewModels
          
          
            {
          
          
                public class GetChartUserRegisterbyMonthResponse
          
          
                {
          
          
                    public string Mes { get; set; }
          
          
                    public int Total { get; set; }
          
          
                    public int Admin { get; set; }
          
          
                    public int Biker { get; set; }
          
          
                    public int Empresa { get; set; }
          
          
                }
          
          
            }

Agora vamos criar nosso endpoint que irá retornar estes dados, crie uma API Controller

Selecione a API Controller - Empty e clique em Add

De o nome ChartsController

Vamos criar o Endpoint que irá listar a quantidade de usuários cadastrados por mês informando a quantidade de bikers, empresas e a quantidade total para a geração do gráfico de barras

Implemente o Código abaixo na classe Charts


          
            using CorujasDev.ReactGoogleCharts.Api.ViewModels;
          
          
            using Microsoft.AspNetCore.Http;
          
          
            using Microsoft.AspNetCore.Mvc;
          
          
            
          
          
            namespace CorujasDev.ReactGoogleCharts.Api.Controllers
          
          
            {
          
          
                [Route("api/[controller]")]
          
          
                [ApiController]
          
          
                public class ChartsController : ControllerBase
          
          
                {
          
          
            
          
          
                    private readonly ILogger<ChartsController> _logger;
          
          
            
          
          
                    public ChartsController(ILogger<ChartsController> logger)
          
          
                    {
          
          
                        _logger = logger;
          
          
                    }
          
          
            
          
          
                    [HttpGet]
          
          
                    [Route("[action]")]
          
          
                    public IEnumerable<GetChartUserRegisterbyMonthResponse> GetChartUserRegisterbyMonth()
          
          
                    {
          
          
                        var result = Enumerable.Range(1, 5).Select(index => new GetChartUserRegisterbyMonthResponse
          
          
                        {
          
          
                            Mes = DateTime.Now.AddMonths(index).ToString("MMMM"),
          
          
                            Biker = Random.Shared.Next(100, 400),
          
          
                            Empresa = Random.Shared.Next(10, 50),
          
          
                        })
          
          
                        .ToArray();
          
          
            
          
          
                        foreach (var item in result)
          
          
                            item.Total = item.Biker + item.Empresa;
          
          
            
          
          
                        return result;
          
          
                    }
          
          
                }
          
          
            }

Vamos cria o endpoint com a quantidade e porcentagem de empresas por categoria, primeiro vamos criar a nossa ViewModel como abaixo


          
            namespace CorujasDev.ReactGoogleCharts.Api.ViewModels
          
          
            {
          
          
                public class GetCountPercentageCatgoriesCompanyResponse
          
          
                {
          
          
                    public string Nome { get; set; }
          
          
                    public int Quantidade { get; set; }
          
          
                    public double Porcentagem { get; set; }
          
          
                }
          
          
            }

E agora vamos implementar nosso endpoint como no código abaixo


          
            [HttpGet]
          
          
            [Route("[action]")]
          
          
            public IEnumerable<GetCountPercentageCatgoriesCompanyResponse> GetCountPercentageCatgoriesCompany()
          
          
            {
          
          
                string[] Empresas = new[] { "Restaurante", "Recreação", "Bar" };
          
          
            
          
          
                var result = Empresas.Select(index => new GetCountPercentageCatgoriesCompanyResponse
          
          
                {
          
          
                    Nome = index,
          
          
                    Quantidade = Random.Shared.Next(0, 50)
          
          
                })
          
          
                .ToArray();
          
          
            
          
          
                var total = result.Sum(x => x.Quantidade);  
          
          
            
          
          
                foreach (var item in result)
          
          
                    item.Porcentagem = (((double)item.Quantidade / total) * 100);
          
          
            
          
          
                return result;
          
          
            }

Rode sua api e faça as chamadas aos EndPoints para saber se esta tudo funcionando conforme o planejado

Swagger Aberto

Quantidade de Usuários

Porcentagem por Categoria

Api criada pode deixar a mesma rodando, vamos para a contrução do nosso projeto React que ira consumir estes endpoint e gerar os gráficos.

Abra o seu terminal e para a criação do projeto use create-react-app react-google-charts

Projeto sendo criado ao final irá aparecer a tela abaixo

Acesse a pasta do projeto e rode para saber se esta tudo ok

cd react-google-charts

yarn start

Pare a aplicação(ctrl + c), abra o Visual Studio Code(code .)

Solução aberta no vs code

Para facilitar a visualização iremos utilizar o bootstrap, para isto vamos incluir o link do mesmo em nosso arquivo index.html que fica na pasta public

Inclua a linha abaixo como na imagem


          
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />

Para a criação dos gráficos precisamos instala o pacote react-google-charts, como vamos fazer requisições a um serviço externo, no caso a nossa API, instale a biblioteca react-loading vá ao terminal do visual studio code

- yarn add react-google-charts

- yarn add react-loading

-yarn add react-loading

Bora implementar nosso código

No arquivo App.js implemente o código abaixo


          
            function App() {
          
          
              return (
          
          
                <div className="App">
          
          
                  <div class="container">
          
          
                    <div class="row">
          
          
                      <div class="col">
          
          
                        Gráfico Barra Usuários Cadastrados
          
          
                      </div>
          
          
                      <div class="col">
          
          
                        Gráfico Linha Usuários Cadastrados
          
          
                      </div>
          
          
                    </div>
          
          
                    <div class="row">
          
          
                      <div class="col">
          
          
                        Gráfico Pie Chart Quantidade
          
          
                      </div>
          
          
                      <div class="col">
          
          
                        Gráfico Pie Chart Porcentagem
          
          
                      </div>
          
          
                    </div>
          
          
                  </div>
          
          
                </div>
          
          
              );
          
          
            }
          
          
            
          
          
            export default App;

Em nossa tela web deve ficar como a imagem abaixo

O Primeiro gráfico que iremos criar será um gráfico do tipo Bar, ele irá mostrar a quantidade de usuários cadastrados no mês, a quantidade de novos bikers e empresa cadastrados.

Crie uma pasta components dentro da pasta src e crie o seu componente BarChartChartUserRegisterbyMonth.jsx

Implemente o código abaixo para a geração do gráfico


          
            import React, { useState, useEffect } from "react";
          
          
            import { Chart } from "react-google-charts";
          
          
            import ReactLoading from 'react-loading';
          
          
            
          
          
            const data = [
          
          
              ["Year", "Sales", "Expenses", "Profit"],
          
          
              ["2014", 1000, 400, 200],
          
          
              ["2015", 1170, 460, 250],
          
          
              ["2016", 660, 1120, 300],
          
          
              ["2017", 1030, 540, 350],
          
          
            ];
          
          
            
          
          
            const options = {
          
          
                chart: {
          
          
                    title: "Quant Usuários Cadastrados",
          
          
                    subtitle: "Total de Usuários Cadastrados, Bikers, Empresas",
          
          
                },
          
          
            };
          
          
            
          
          
            const BarChartChartUserRegisterbyMonth = () => {
          
          
                const [result, setResult] = useState([]);
          
          
                const [loading, setLoading] = useState(false);
          
          
            
          
          
                return (
          
          
                    <>
          
          
                        {
          
          
                            loading ? 
          
          
                                <ReactLoading height={667} width={375} /> :
          
          
                                <Chart
          
          
                                    chartType="Bar"
          
          
                                    width="100%"
          
          
                                    height="400px"
          
          
                                    data={data}
          
          
                                    options={options}
          
          
                                />
          
          
                        }
          
          
                    </>
          
          
                )
          
          
            
          
          
            }
          
          
            
          
          
            export default BarChartChartUserRegisterbyMonth;

Altere o seu arquivo App.js para o código abaixo, agora será mostrado o gráfico porém os dados são estáticos, iremos consumir a nossa API para mostrar os dados


          
            import BarChartChartUserRegisterbyMonth from "./components/BarChartChartUserRegisterbyMonth";
          
          
            
          
          
            function App() {
          
          
              return (
          
          
                <div className="App">
          
          
                  <div class="container">
          
          
                    <div class="row">
          
          
                      <div class="col">
          
          
                        <BarChartChartUserRegisterbyMonth />
          
          
                      </div>
          
          
                      <div class="col">
          
          
                        Gráfico Linha Usuários Cadastrados
          
          
                      </div>
          
          
                    </div>
          
          
                    <div class="row">
          
          
                      <div class="col">
          
          
                        Gráfico Pie Chart Quantidade
          
          
                      </div>
          
          
                      <div class="col">
          
          
                        Gráfico Pie Chart Porcentagem
          
          
                      </div>
          
          
                    </div>
          
          
                  </div>
          
          
                </div>
          
          
              );
          
          
            }
          
          
            
          
          
            export default App;

Agora sua página web deve estar com algo parecido com a imagem abaixo

Vamos consumir nossa API

Altere o seu Componente para o código abaixo


          
            const BarChartChartUserRegisterbyMonth = () => {
          
          
                const [result, setResult] = useState([]);
          
          
                const [loading, setLoading] = useState(false);
          
          
            
          
          
                useEffect(() => {
          
          
                    fetch('https://localhost:7042/api/Charts/GetChartUserRegisterbyMonth')
          
          
                        .then((result) => {
          
          
                            return result.json()
          
          
                        })
          
          
                        .then((data) => {
          
          
                            console.log(data)
          
          
                        })
          
          
                        .catch((error) => {
          
          
                            console.log(error);
          
          
                        })
          
          
            
          
          
                },[])
          
          
            
          
          
                return (
          
          
                    <>
          
          
                        {
          
          
                            loading ? 
          
          
                                <ReactLoading height={667} width={375} /> :
          
          
                                <Chart
          
          
                                    chartType="Bar"
          
          
                                    width="100%"
          
          
                                    height="400px"
          
          
                                    data={data}
          
          
                                    options={options}
          
          
                                />
          
          
                        }
          
          
                    </>
          
          
                )
          
          
            
          
          
            }

Agora abra o seu Bowser, F12 para aparecer as ferramentas do desenvolvedor e va em console, visualize o retorno da API

Para apresentarmos em nosso gráfico primeiro precisamos ajustar os dados para o formato que o react-google-charts entenda, nosso componente consome a API que retorna os dados e tratamos os mesmos para geração do nosso gráfico


          
            import React, { useState, useEffect } from "react";
          
          
            import { Chart } from "react-google-charts";
          
          
            import ReactLoading from 'react-loading';
          
          
            
          
          
            const options = {
          
          
                chart: {
          
          
                    title: "Quant Usuários Cadastrados",
          
          
                    subtitle: "Total de Usuários Cadastrados, Bikers, Empresas",
          
          
                },
          
          
            };
          
          
            
          
          
            const BarChartChartUserRegisterbyMonth = () => {
          
          
                const [data, setData] = useState([]);
          
          
                const [loading, setLoading] = useState(true);
          
          
            
          
          
                useEffect(() => {
          
          
                    fetch('https://localhost:7042/api/Charts/GetChartUserRegisterbyMonth')
          
          
                        .then((result) => {
          
          
                            return result.json()
          
          
                        })
          
          
                        .then((res) => {
          
          
                            let list = [];
          
          
                            list.push(["Mês", "Total", "Bikers", "Empresas"]);
          
          
                            res.map((item) => {
          
          
                                list.push([item.mes, item.total, item.biker, item.empresa]);
          
          
                            });
          
          
                            setData(list);
          
          
                            setLoading(false);
          
          
                        })
          
          
                        .catch((error) => {
          
          
                            console.log(error);
          
          
                        })
          
          
            
          
          
                },[])
          
          
            
          
          
                return (
          
          
                    <>
          
          
                        {
          
          
                            loading ? 
          
          
                                <ReactLoading height={667} width={375} /> :
          
          
                                <Chart
          
          
                                    chartType="Bar"
          
          
                                    width="100%"
          
          
                                    height="400px"
          
          
                                    data={data}
          
          
                                    options={options}
          
          
                                />
          
          
                        }
          
          
                    </>
          
          
                )
          
          
            
          
          
            }
          
          
            
          
          
            export default BarChartChartUserRegisterbyMonth;

Vamos criar nosso segundo gráfico do tipo Linha.

Bora para o código.

Crie um outro arquivo na pasta components com o nome LineChartChartUserRegisterbyMonth.jsx

E implemente o código abaixo, note que alteramos somente o tipo de gráfico, agora ao invés de ser Bar é Line, nenhuma outra alteração foi necessária


          
            import React, { useState, useEffect } from "react";
          
          
            import { Chart } from "react-google-charts";
          
          
            import ReactLoading from 'react-loading';
          
          
            
          
          
            const options = {
          
          
                chart: {
          
          
                    title: "Quant Usuários Cadastrados",
          
          
                    subtitle: "Total de Usuários Cadastrados, Bikers, Empresas por Mês",
          
          
                },
          
          
            };
          
          
            
          
          
            const LineChartChartUserRegisterbyMonth = () => {
          
          
                const [data, setData] = useState([]);
          
          
                const [loading, setLoading] = useState(true);
          
          
            
          
          
                useEffect(() => {
          
          
                    fetch('https://localhost:7042/api/Charts/GetChartUserRegisterbyMonth')
          
          
                        .then((result) => {
          
          
                            return result.json()
          
          
                        })
          
          
                        .then((res) => {
          
          
                            let list = [];
          
          
                            list.push(["Mês", "Total", "Bikers", "Empresas"]);
          
          
                            res.map((item) => {
          
          
                                list.push([item.mes, item.total, item.biker, item.empresa]);
          
          
                            });
          
          
                            setData(list);
          
          
                            setLoading(false);
          
          
                        })
          
          
                        .catch((error) => {
          
          
                            console.log(error);
          
          
                        })
          
          
            
          
          
                },[])
          
          
            
          
          
                return (
          
          
                    <>
          
          
                        {
          
          
                            loading ? 
          
          
                                <ReactLoading height={667} width={375} /> :
          
          
                                <Chart
          
          
                                    chartType="Line"
          
          
                                    width="100%"
          
          
                                    height="400px"
          
          
                                    data={data}
          
          
                                    options={options}
          
          
                                />
          
          
                        }
          
          
                    </>
          
          
                )
          
          
            
          
          
            }
          
          
            
          
          
            export default LineChartChartUserRegisterbyMonth;

Seu página web deve estar como a image

Vamos criar agora nosso terceiro gráfico que será um PieChart que irá chamar nosso outro endpoint que irá trazer as categorias e a quantidade e porcentagem de cada no sistema para apresentarmos no gráfico

Para isto crie um arquivo na pasta Components com o nome PieChartCountPercentageCatgories.jsx

Implemente o código abaixo


          
            import React, { useState, useEffect } from "react";
          
          
            import { Chart } from "react-google-charts";
          
          
            import ReactLoading from 'react-loading';
          
          
            
          
          
            const options = {
          
          
                title: "Porcentagem de Locais por Categoria"
          
          
            };
          
          
            
          
          
            const PieChartCountPercentageCatgories = () => {
          
          
                const [data, setData] = useState([]);
          
          
                const [loading, setLoading] = useState(true);
          
          
            
          
          
                useEffect(() => {
          
          
                    fetch('https://localhost:7042/api/Charts/GetCountPercentageCatgoriesCompany')
          
          
                        .then((result) => {
          
          
                            return result.json()
          
          
                        })
          
          
                        .then((res) => {
          
          
                            let list = [];
          
          
                            list.push(["Categoria", "Porcentagem"]);
          
          
                            res.map((item) => {
          
          
                                list.push([item.nome, item.porcentagem]);
          
          
                            });
          
          
                            setData(list);
          
          
                            setLoading(false);
          
          
                        })
          
          
                        .catch((error) => {
          
          
                            console.log(error);
          
          
                        })
          
          
            
          
          
                }, [])
          
          
            
          
          
                return (
          
          
                    <>
          
          
                        {
          
          
                            loading ?
          
          
                                <ReactLoading height={667} width={375} /> :
          
          
                                <Chart
          
          
                                    chartType="PieChart"
          
          
                                    width="100%"
          
          
                                    height="400px"
          
          
                                    data={data}
          
          
                                    options={options}
          
          
                                />
          
          
                        }
          
          
                    </>
          
          
                )
          
          
            
          
          
            }
          
          
            
          
          
            export default PieChartCountPercentageCatgories;

Chame o componente no arquivo App.js como abaixo


          
            import BarChartChartUserRegisterbyMonth from "./components/BarChartChartUserRegisterbyMonth";
          
          
            import LineChartChartUserRegisterbyMonth from "./components/LineChartChartUserRegisterbyMonth";
          
          
            import PieChartCountPercentageCatgories from "./components/PieChartCountPercentageCatgories";
          
          
            
          
          
            function App() {
          
          
              return (
          
          
                <div className="App">
          
          
                  <div class="container">
          
          
                    <div class="row">
          
          
                      <div class="col">
          
          
                        <BarChartChartUserRegisterbyMonth />
          
          
                      </div>
          
          
                      <div class="col">
          
          
                        <LineChartChartUserRegisterbyMonth />
          
          
                      </div>
          
          
                    </div>
          
          
                    <div class="row">
          
          
                      <div class="col">
          
          
                        <PieChartCountPercentageCatgories />
          
          
                      </div>
          
          
                      <div class="col">
          
          
                        Gráfico Pie Chart Porcentagem
          
          
                      </div>
          
          
                    </div>
          
          
                  </div>
          
          
                </div>
          
          
              );
          
          
            }
          
          
            
          
          
            export default App;

Sua página web deve estar como a imagem abaixo

E por último e não menos importante vamos criar um gráfico de quantidade por categoria do tipo Coluna.

Para isto crie um arquivo na pasta Components com o nome ColumnChartCountPercentageCatgories.jsx

Implemente o código abaixo


          
            import React, { useState, useEffect } from "react";
          
          
            import { Chart } from "react-google-charts";
          
          
            import ReactLoading from 'react-loading';
          
          
            
          
          
            const options = {
          
          
                title: "Porcentagem de Locais por Categoria"
          
          
            };
          
          
            
          
          
            const ColumnChartCountPercentageCatgories = () => {
          
          
                const [data, setData] = useState([]);
          
          
                const [loading, setLoading] = useState(true);
          
          
            
          
          
                useEffect(() => {
          
          
                    fetch('https://localhost:7042/api/Charts/GetCountPercentageCatgoriesCompany')
          
          
                        .then((result) => {
          
          
                            return result.json()
          
          
                        })
          
          
                        .then((res) => {
          
          
                            let list = [];
          
          
                            list.push(["Categoria", "Quantidade"]);
          
          
                            res.map((item) => {
          
          
                                list.push([item.nome, item.quantidade]);
          
          
                            });
          
          
                            setData(list);
          
          
                            setLoading(false);
          
          
                        })
          
          
                        .catch((error) => {
          
          
                            console.log(error);
          
          
                        })
          
          
            
          
          
                }, [])
          
          
            
          
          
                return (
          
          
                    <>
          
          
                        {
          
          
                            loading ?
          
          
                                <ReactLoading height={667} width={375} /> :
          
          
                                <Chart
          
          
                                    chartType="ColumnChart"
          
          
                                    width="100%"
          
          
                                    height="400px"
          
          
                                    data={data}
          
          
                                    options={options}
          
          
                                />
          
          
                        }
          
          
                    </>
          
          
                )
          
          
            
          
          
            }
          
          
            
          
          
            export default ColumnChartCountPercentageCatgories;

Faça a chamada do seu componente no arquivo App.js

Sua página web deve estar como a imagem abaixo

Espero que tenha gostado

Código fonte API github

Código fonte Front-End github

Para receber mais conteúdo inscreva-se no canal e siga nas redes sociais

Vamos que vamos

Learn

Support

More Options