Como criar Gráfico Gauge
Neste tutorial mostro como criar gráfico Gauge usando apenas CSS e Html.
Introdução
Neste tutorial irei te mostrar como criar Gráfico Gauge utilizando apenas Javascript e CSS.
Para implementação deste tutorial irei disponibilizar tanto o link do Github contendo o código fonte de projeto, quanto disponibilizo o link do vídeo onde mostro todo o processo de implementação do Gráfico.
O que é um gráfico Gauge
O que é um gráfico de Gauge, esse tipo de gráfico nada mais é que um gráfico que representa de maneira visual um valor em relação a um intervalo especificado.
Geralmente utilizamos o gráfico de Gauge para exibir uma única medida, como a porcentagem de conclusão de uma tarefa, a pontuação em um teste, ou qualquer valor que possa ser representado dentro de uma escala contínua.
Nós podemos encontrar este tipo de gráfico geralmente em painéis de controle, aplicativos de monitoramento ou em situações em que é importante visualizamos rapidamente o status ou o progresso de uma única medida.
Como criar Gráfico Gauge
A primeira ação que devemos tomar para implementar nosso gráfico é criarmos toda a estrutura da página e a estrutura do nosso gráfico.
Logo abaixo mostro o código que vamos utilizar para implementar essa parte do tutorial:
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Donut Chart</title> </head> <body> <div class="container"> <h2 class="title">Donut Chart</h2> <div class="card"> <div id="circularProgressBar" class="progress-bar"> <div class="progress-bar-inner"> <h2 class="progress-value">100%</h2> </div> </div> </div> <div class="card card-button"> <button onclick="addValue(5);">+</button> <button class="minus" onclick="decreaseValue(5);">-</button> </div> </div> <script src="main.js"></script> </body> </html>
Após terminarmos de implementar a estrutura do gráfico vamos para estilização do nosso componente criado, logo abaixo disponibilizo todo o código de estilização utilizado:
*,
*:after,
*:before {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
text-decoration: none;
}
:root {
--dark-blue: #17193b;
--purple: #474d84;
--purple-secondary: #333867;
--green: #2d8515;
--red: #db2a34;
--orange: orange;
--title-primary-color: rgb(231 226 226);
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--purple-secondary);
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}
.title {
padding: 0.5rem;
border-radius: 6px;
background: var(--dark-blue);
text-align: center;
color: var(--orange);
font-weight: 900;
font-size: 24px;
}
.card {
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
border-radius: 6px;
background: var(--dark-blue);
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.card-button {
gap: 2rem;
padding: 2rem;
}
button {
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 700;
font-size: 20px;
background-color: var(--green);
color: var(--title-primary-color);
}
button.minus {
background-color: var(--red);
}
button:hover {
transform: scale(0.99);
}
button:active {
background-color: rgb(128, 171, 74);
transform: scale(0.96);
transition: all 0.3s ease 0s;
}
.progress-bar {
height: 180px;
width: 180px;
display: flex;
align-items: center;
justify-content: center;
background: conic-gradient(orange 360deg, purple 0deg);
border-radius: 50%;
/* animation: pulse 3s infinite; */
transition: all ease;
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}
.progress-bar-inner {
width: 85%;
height: 85%;
display: flex;
align-items: center;
justify-content: center;
background: var(--dark-blue);
border-radius: 50%;
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}
.progress-bar-inner h2 {
color: var(--title-primary-color);
font-weight: 900;
font-size: 40px;
}
Com o nosso gráfico já devidamente estilado, chegou a hora de implementar o código Javscript utilizado para manipulação das informações do gráfico.
Segue abaixo o código que vamos utilizar:
const circularProgressBar = document.querySelector("#circularProgressBar");
const circularProgressBarNumber = document.querySelector(
"#circularProgressBar .progress-value"
);
let chartValue = 60;
const addValue = (value) => {
if (chartValue < 100) {
chartValue += value;
setInfoCircularProgressBar();
}
};
const decreaseValue = (value) => {
if (chartValue > 0) {
chartValue -= value;
setInfoCircularProgressBar();
}
};
function setInfoCircularProgressBar() {
let multiplierFactor = 360 / 100;
circularProgressBarNumber.textContent = `${chartValue}%`;
circularProgressBar.style.background = `conic-gradient(var(--orange) ${
chartValue * multiplierFactor
}deg, var(--purple) 0deg)`;
}
setInfoCircularProgressBar();
Um breve explicação do código acima, estou implementando três(3) funções.
Uma função para adicionar um valor (addValue) e outra para diminuir um valor (decreaseValue) em ambas passo como parâmetro um valor para ser incrementado ou decrementado respectivamente.
A ultima função (setInfoCircularProgressBar) , serve para alterarmos o valores do gráfico.
Ao final do processo o layout gerado será igual ao da figura abaixo:
Vídeo:
Código fonte do tutorial:
