Atualização 3 - levantando estrutura antiga - testes de aplicações futuras
This commit is contained in:
daivid.alves
parent
49e96d4a4b
commit
958edb0e69
|
|
@ -4,38 +4,34 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Consulta InfluxDB</title>
|
||||
<link rel="stylesheet" href="../Css/padraouser.css">
|
||||
<link rel="stylesheet" href="./Css/global/Blocos.css">
|
||||
<link rel="stylesheet" href="./Css/global/import.css">
|
||||
<link rel="stylesheet" href="./Css/page/Telas_acao/erro_404.css">
|
||||
<link rel="icon" type="image/x-icon" href="./Acessts/Imagens/iT_Guys/logo1.png">
|
||||
|
||||
<title>Ambiente do Usuario</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Escolha Parâmetros para a Consulta</h1>
|
||||
|
||||
<form id="queryForm">
|
||||
<label for="bucket">Selecione o Bucket:</label>
|
||||
<select id="bucket" name="bucket" required>
|
||||
<option value="" disabled selected>Escolha um bucket</option>
|
||||
</select><br><br>
|
||||
|
||||
<label for="host">Selecione o Host (Servidor):</label>
|
||||
<select id="nodename" name="host" required>
|
||||
<option value="" disabled selected>Escolha um host</option>
|
||||
</select><br><br>
|
||||
|
||||
<label for="startTime">Início (ISO 8601):</label>
|
||||
<input type="datetime-local" id="startTime" name="startTime" required><br><br>
|
||||
<!-- Seu conteúdo principal aqui -->
|
||||
<main id="entrada_1">
|
||||
|
||||
<label for="endTime">Fim (ISO 8601):</label>
|
||||
<input type="datetime-local" id="endTime" name="endTime" required><br><br>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
<!--padrao_A1 reponsavel ter toda a estrutura que aplicara o data na tela-->
|
||||
<script src="./js/padrao_A1.js"></script>
|
||||
|
||||
<script src="./js/Erro_404.js"></script>
|
||||
|
||||
<label for="windowPeriod">Período de Agregação (Ex.: 1m, 10s):</label>
|
||||
<input type="text" id="windowPeriod" name="windowPeriod" placeholder="Exemplo: 1m, 10s" required><br><br>
|
||||
|
||||
<button type="submit">Enviar Consulta</button>
|
||||
</form>
|
||||
|
||||
<div id="result"></div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -51,3 +51,26 @@ body {
|
|||
--Cor_Segundaria_5_2: #123655;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
|
||||
--fundo_1: #1478cf;
|
||||
--fundo_2: #1B588C;
|
||||
--fudno_3: #ffffff;
|
||||
--fundo_4: #123655;
|
||||
/*Fundos das telas de iframe de cada monitoramento*/
|
||||
--fundo_5: rgb(226, 226, 226);
|
||||
|
||||
--font_titulo: fonteTi;
|
||||
--font_conteudo: fonteTa;
|
||||
|
||||
--variante_font_1: #ffffff;
|
||||
--variante_font_2: #000000;
|
||||
--variante_font_3: #1B588C;
|
||||
--variante_font_4: #1478cf;
|
||||
|
||||
--sombra_variante_1: #000000;
|
||||
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
width: 100%;
|
||||
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -42,7 +43,7 @@
|
|||
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
border-radius: 5%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
/*Sendo todo o painel principal da pagina, e aplicações de alinhamento dentro desse proprio painel, sendo o proprio corpo do painel de login*/
|
||||
.Bloco {
|
||||
box-shadow: 10px 10px 5px var(--Cor_Segundaria_5_2);
|
||||
padding: 30px 45px;
|
||||
padding: 3vh 2vw;
|
||||
width: 30vw;
|
||||
height: 75vh;
|
||||
border: 3px solid rgb(0, 119, 255);
|
||||
|
|
@ -37,6 +37,7 @@
|
|||
position: fixed;
|
||||
top: 10vh;
|
||||
left: 35vw;
|
||||
border-radius: 3%;
|
||||
justify-content: center;
|
||||
/*Bottom e left são os elementos que vão organizar o ponto onde o painel vai parar, adicionar uma midia query para isso conseguira adapitar o painel para mais telas*/
|
||||
animation: aparecer 1s ease;
|
||||
|
|
@ -57,6 +58,38 @@
|
|||
|
||||
}
|
||||
|
||||
.formulario {
|
||||
width: 100%;
|
||||
height: 45vh;
|
||||
margin-top: 5vh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
}
|
||||
|
||||
.formulario .colum_1,
|
||||
.formulario .colum_2 {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.formulario .colum_1 {
|
||||
width: 100%;
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.formulario .colum_2 {
|
||||
width: 100%;
|
||||
height: 10vh;
|
||||
}
|
||||
|
||||
|
||||
/*Resumindamente lida diretamente em alinhar todos os elementos inputs e labels dentro do painel de login*/
|
||||
.login_central {
|
||||
align-items: center;
|
||||
|
|
@ -71,6 +104,7 @@
|
|||
/*São as caixa de alinhamento tanto para o tudo relacionado a senha quanto para tudo que é relacionado a login*/
|
||||
.Login,
|
||||
.Senha {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
|
|
@ -149,9 +183,10 @@
|
|||
|
||||
/*Define edições para o botão do painel de login*/
|
||||
.botao {
|
||||
margin-top: 20px;
|
||||
margin-top: 2vh;
|
||||
width: 100%;
|
||||
height: 6vh;
|
||||
border-radius: 2vw;
|
||||
background-color: var(--Cor_Segundaria_5_1);
|
||||
font-family: var(--font_conteudo);
|
||||
font-size: 1vw;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<link rel="stylesheet" href="../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../Css/global/Blocos.css">
|
||||
<link rel="stylesheet" href="../Css/global/import.css">
|
||||
<link rel="icon" type="image/x-icon" href="../Acessts/Imagens/iT_Guys/logo1.png">
|
||||
<title>Ambiente do Usuario</title>
|
||||
</head>
|
||||
|
||||
|
|
@ -20,7 +21,7 @@
|
|||
</div>
|
||||
|
||||
<div class="Bloco_subcab1_2">
|
||||
<a href="./Ambiente_Usuario copy.html"><button>Logout</button></a>
|
||||
<a href="https://dev.itguys.com.br/"><button>Logout</button></a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -63,7 +64,7 @@
|
|||
<div class="seguimentos_2">
|
||||
|
||||
<div class="sessao_1">
|
||||
<a href="http://grafana.itguys.com.br:3000/dashboard/snapshot/6sVz7BNJVCY4sZD0m9P40k7nFEc5MqLI?kiosk"
|
||||
<a href="https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/Ambiente_Usuario_copy.html"
|
||||
target="frame">
|
||||
<div class="item_menu">
|
||||
|
||||
|
|
@ -88,15 +89,14 @@
|
|||
|
||||
<div class="sub_menu" id="sub_menu">
|
||||
|
||||
<a href="../Ambiente do usuario/Tela_Monitoramento/Padrão/Monitoramento_Itguys.html"
|
||||
target="frame">
|
||||
<a href="./Tela_Monitoramento/Padrão/Monitoramento_Itguys.html" target="frame">
|
||||
<div class="sub_item_1">
|
||||
<img src="../Acessts/Imagens/Iconis/hospital.png" alt="">
|
||||
<p>iTGuys</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="../Ambiente do usuario/Tela_Monitoramento/Padrão/Monitoramento_GAU_Freguesia.html"
|
||||
<a href="./Tela_Monitoramento/Padrão/Monitoramento_GAU_Freguesia.html"
|
||||
target="frame">
|
||||
<div class="sub_item_1">
|
||||
<img src="../Acessts/Imagens/Iconis/hospital.png" alt="">
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
</div>
|
||||
</a>
|
||||
|
||||
<a href="../Ambiente do usuario/Tela_Monitoramento/Padrão/Monitoramento_GAU_Infantil.html"
|
||||
<a href="./Tela_Monitoramento/Padrão/Monitoramento_GAU_Infantil.html"
|
||||
target="frame">
|
||||
<div class="sub_item_1">
|
||||
<img src="../Acessts/Imagens/Iconis/hospital.png" alt="">
|
||||
|
|
@ -112,15 +112,14 @@
|
|||
</div>
|
||||
</a>
|
||||
|
||||
<a href="../Ambiente do usuario/Tela_Monitoramento/Padrão/Monitoramento_Sao_Fabiano.html"
|
||||
target="frame">
|
||||
<a href="./Tela_Monitoramento/Padrão/Monitoramento_Sao_Fabiano.html" target="frame">
|
||||
<div class="sub_item_1">
|
||||
<img src="../Acessts/Imagens/Iconis/hospital.png" alt="">
|
||||
<p>São Fabiano</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="../Ambiente do usuario/Tela_Monitoramento/Padrão/Monitoramento_Enseg_Itaguaí.html"
|
||||
<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Itaguaí.html"
|
||||
target="frame">
|
||||
<div class="sub_item_1">
|
||||
<img src="../Acessts/Imagens/Iconis/hospital.png" alt="">
|
||||
|
|
@ -129,14 +128,14 @@
|
|||
</a>
|
||||
|
||||
|
||||
<a href="../Ambiente do usuario/Tela_Monitoramento/Padrão/Monitoramento_Enseg_Recreio.html"
|
||||
<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Recreio.html"
|
||||
target="frame">
|
||||
<div class="sub_item_2">
|
||||
<img src="../Acessts/Imagens/Iconis/hospital.png" alt="">
|
||||
<p>Unidade Recreio</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="../Ambiente do usuario/Tela_Monitoramento/Padrão/Monitoramento_Enseg_Cliente_VPN.html"
|
||||
<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Cliente_VPN.html"
|
||||
target="frame">
|
||||
<div class="sub_item_3">
|
||||
<img src="../Acessts/Imagens/Iconis/vpn.png" alt="">
|
||||
|
|
@ -144,7 +143,7 @@
|
|||
</div>
|
||||
</a>
|
||||
|
||||
<a href="../Ambiente do usuario/Tela_Monitoramento/Padrão/Monitoramento_Ferreira_Real.html"
|
||||
<a href="./Tela_Monitoramento/Padrão/Monitoramento_Ferreira_Real.html"
|
||||
target="frame">
|
||||
<div class="sub_item_1">
|
||||
<img src="../Acessts/Imagens/Iconis/hospital.png" alt="">
|
||||
|
|
@ -152,24 +151,21 @@
|
|||
</div>
|
||||
</a>
|
||||
|
||||
<a href="../Ambiente do usuario/Tela_Monitoramento/Padrão/Monitoramento_Oeste_Pan.html"
|
||||
target="frame">
|
||||
<a href="./Tela_Monitoramento/Padrão/Monitoramento_Oeste_Pan.html" target="frame">
|
||||
<div class="sub_item_1">
|
||||
<img src="../Acessts/Imagens/Iconis/hospital.png" alt="">
|
||||
<p>Oeste Pan</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="../Ambiente do usuario/Tela_Monitoramento/Padrão/Monitoramento_IBAP.html"
|
||||
target="frame">
|
||||
<a href="./Tela_Monitoramento/Padrão/Monitoramento_IBAP.html" target="frame">
|
||||
<div class="sub_item_1">
|
||||
<img src="../Acessts/Imagens/Iconis/hospital.png" alt="">
|
||||
<p>IBAP</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="../Ambiente do usuario/Tela_Monitoramento/Padrão/Monitoramento_IVVCG.html"
|
||||
target="frame">
|
||||
<a href="./Tela_Monitoramento/Padrão/Monitoramento_IVVCG.html" target="frame">
|
||||
<div class="sub_item_1">
|
||||
<img src="../Acessts/Imagens/Iconis/hospital.png" alt="">
|
||||
<p>IVVCG</p>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_Enseg.css">
|
||||
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_Enseg.css">
|
||||
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_Enseg.css">
|
||||
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_Ferreira_Real.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_GAU.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_GAU.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_IBAP.css">
|
||||
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_IVVCG.css">
|
||||
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor.css">
|
||||
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_Oeste_Pan.css">
|
||||
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_GAU.css">
|
||||
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../Css/padraouser.css">
|
||||
<link rel="stylesheet" href="../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../Css/Ambiente_Usuario/Configuracoes.css">
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,449 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>12 Tipos de Gráficos</title>
|
||||
<style>
|
||||
canvas {
|
||||
border: 1px solid #000;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>12 Tipos de Gráficos</h1>
|
||||
<div class="chart-container">
|
||||
<canvas id="lineChart" width="400" height="300"></canvas>
|
||||
<canvas id="barChart" width="400" height="300"></canvas>
|
||||
<canvas id="pieChart" width="300" height="300"></canvas>
|
||||
<canvas id="areaChart" width="400" height="300"></canvas>
|
||||
<canvas id="heatmap" width="400" height="300"></canvas>
|
||||
<canvas id="radarChart" width="400" height="300"></canvas>
|
||||
<canvas id="doughnutChart" width="300" height="300"></canvas>
|
||||
<canvas id="scatterChart" width="400" height="300"></canvas>
|
||||
<canvas id="bubbleChart" width="400" height="300"></canvas>
|
||||
<canvas id="polarChart" width="400" height="300"></canvas>
|
||||
<canvas id="stackedBarChart" width="400" height="300"></canvas>
|
||||
<canvas id="lineChartWithAnnotation" width="400" height="300"></canvas>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Dados gerais
|
||||
const data = [10, 20, 15, 25, 30, 20, 40];
|
||||
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
|
||||
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#FF9F40', '#C9CBCF', '#FF6F61'];
|
||||
|
||||
// Gráfico de Linhas
|
||||
function drawLineChart() {
|
||||
const canvas = document.getElementById('lineChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const canvasWidth = canvas.width;
|
||||
const canvasHeight = canvas.height;
|
||||
const padding = 50;
|
||||
const plotWidth = canvasWidth - 2 * padding;
|
||||
const plotHeight = canvasHeight - 2 * padding;
|
||||
const maxDataValue = Math.max(...data);
|
||||
const minDataValue = Math.min(...data);
|
||||
|
||||
function valueToY(value) {
|
||||
return canvasHeight - padding - ((value - minDataValue) / (maxDataValue - minDataValue)) * plotHeight;
|
||||
}
|
||||
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
ctx.strokeStyle = '#007bff';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
data.forEach((value, index) => {
|
||||
const x = padding + (index / (data.length - 1)) * plotWidth;
|
||||
const y = valueToY(value);
|
||||
index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = '#007bff';
|
||||
data.forEach((value, index) => {
|
||||
const x = padding + (index / (data.length - 1)) * plotWidth;
|
||||
const y = valueToY(value);
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 5, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
});
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'top';
|
||||
labels.forEach((label, index) => {
|
||||
const x = padding + (index / (data.length - 1)) * plotWidth;
|
||||
ctx.fillText(label, x, canvasHeight - padding + 5);
|
||||
});
|
||||
}
|
||||
drawLineChart();
|
||||
|
||||
// Gráfico de Barras
|
||||
function drawBarChart() {
|
||||
const canvas = document.getElementById('barChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [12, 19, 3, 5, 2, 3];
|
||||
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
|
||||
const barWidth = 50;
|
||||
const barSpacing = 70;
|
||||
const maxBarHeight = 300;
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
data.forEach((value, index) => {
|
||||
const x = index * barSpacing + 50;
|
||||
const y = canvas.height - value * maxBarHeight / Math.max(...data);
|
||||
const height = value * maxBarHeight / Math.max(...data);
|
||||
ctx.fillStyle = 'rgba(75, 192, 192, 0.7)';
|
||||
ctx.fillRect(x, y, barWidth, height);
|
||||
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'bottom';
|
||||
ctx.fillText(labels[index], x + barWidth / 2, canvas.height - 5);
|
||||
});
|
||||
}
|
||||
drawBarChart();
|
||||
|
||||
// Gráfico de Pizza
|
||||
function drawPieChart() {
|
||||
const canvas = document.getElementById('pieChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [10, 20, 30, 40];
|
||||
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'];
|
||||
|
||||
function drawSlice(startAngle, sliceAngle, color) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(canvas.width / 2, canvas.height / 2);
|
||||
ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, startAngle, startAngle + sliceAngle);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
let startAngle = 0;
|
||||
const total = data.reduce((acc, val) => acc + val, 0);
|
||||
data.forEach((value, index) => {
|
||||
const sliceAngle = (value / total) * 2 * Math.PI;
|
||||
drawSlice(startAngle, sliceAngle, colors[index]);
|
||||
startAngle += sliceAngle;
|
||||
});
|
||||
}
|
||||
drawPieChart();
|
||||
|
||||
// Gráfico de Área
|
||||
function drawAreaChart() {
|
||||
const canvas = document.getElementById('areaChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [10, 20, 15, 25, 30, 20, 40];
|
||||
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
|
||||
const canvasWidth = canvas.width;
|
||||
const canvasHeight = canvas.height;
|
||||
const padding = 50;
|
||||
const plotWidth = canvasWidth - 2 * padding;
|
||||
const plotHeight = canvasHeight - 2 * padding;
|
||||
const maxDataValue = Math.max(...data);
|
||||
const minDataValue = Math.min(...data);
|
||||
|
||||
function valueToY(value) {
|
||||
return canvasHeight - padding - ((value - minDataValue) / (maxDataValue - minDataValue)) * plotHeight;
|
||||
}
|
||||
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
ctx.strokeStyle = '#007bff';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
data.forEach((value, index) => {
|
||||
const x = padding + (index / (data.length - 1)) * plotWidth;
|
||||
const y = valueToY(value);
|
||||
index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.lineTo(canvasWidth - padding, canvasHeight - padding);
|
||||
ctx.lineTo(padding, canvasHeight - padding);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = 'rgba(75, 192, 192, 0.2)';
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
ctx.fillStyle = '#007bff';
|
||||
data.forEach((value, index) => {
|
||||
const x = padding + (index / (data.length - 1)) * plotWidth;
|
||||
const y = valueToY(value);
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 5, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
});
|
||||
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'top';
|
||||
labels.forEach((label, index) => {
|
||||
const x = padding + (index / (data.length - 1)) * plotWidth;
|
||||
ctx.fillText(label, x, canvasHeight - padding + 5);
|
||||
});
|
||||
}
|
||||
drawAreaChart();
|
||||
|
||||
// Gráfico de Calor
|
||||
function drawHeatmap() {
|
||||
const canvas = document.getElementById('heatmap');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [
|
||||
[1, 2, 3, 4, 5],
|
||||
[2, 3, 4, 5, 6],
|
||||
[3, 4, 5, 6, 7],
|
||||
[4, 5, 6, 7, 8],
|
||||
[5, 6, 7, 8, 9]
|
||||
];
|
||||
const cellSize = 50;
|
||||
const colors = ['#f7fbff', '#deebf7', '#c6dbef', '#9ecae1', '#6baed6', '#3182bd'];
|
||||
|
||||
function getColor(value) {
|
||||
const index = Math.min(Math.floor(value / 2), colors.length - 1);
|
||||
return colors[index];
|
||||
}
|
||||
|
||||
data.forEach((row, y) => {
|
||||
row.forEach((value, x) => {
|
||||
ctx.fillStyle = getColor(value);
|
||||
ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
|
||||
});
|
||||
});
|
||||
}
|
||||
drawHeatmap();
|
||||
|
||||
// Gráfico Radar
|
||||
function drawRadarChart() {
|
||||
const canvas = document.getElementById('radarChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [5, 6, 7, 8, 9];
|
||||
const labels = ['A', 'B', 'C', 'D', 'E'];
|
||||
const numOfPoints = data.length;
|
||||
const radius = Math.min(canvas.width, canvas.height) / 2 - 20;
|
||||
const angle = (2 * Math.PI) / numOfPoints;
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.translate(canvas.width / 2, canvas.height / 2);
|
||||
|
||||
// Draw grid
|
||||
ctx.strokeStyle = '#ccc';
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
ctx.beginPath();
|
||||
for (let j = 0; j < numOfPoints; j++) {
|
||||
ctx.lineTo(radius * (i / 5) * Math.cos(j * angle), radius * (i / 5) * Math.sin(j * angle));
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Draw data
|
||||
ctx.beginPath();
|
||||
data.forEach((value, index) => {
|
||||
const x = radius * (value / 10) * Math.cos(index * angle);
|
||||
const y = radius * (value / 10) * Math.sin(index * angle);
|
||||
index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.closePath();
|
||||
ctx.strokeStyle = '#007bff';
|
||||
ctx.stroke();
|
||||
|
||||
// Draw points
|
||||
ctx.fillStyle = '#007bff';
|
||||
data.forEach((value, index) => {
|
||||
const x = radius * (value / 10) * Math.cos(index * angle);
|
||||
const y = radius * (value / 10) * Math.sin(index * angle);
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 5, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
drawRadarChart();
|
||||
|
||||
// Gráfico Donut
|
||||
function drawDoughnutChart() {
|
||||
const canvas = document.getElementById('doughnutChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [10, 20, 30, 40];
|
||||
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'];
|
||||
const innerRadius = 60;
|
||||
const outerRadius = canvas.width / 2;
|
||||
|
||||
function drawSlice(startAngle, sliceAngle, color) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(canvas.width / 2, canvas.height / 2, outerRadius, startAngle, startAngle + sliceAngle);
|
||||
ctx.arc(canvas.width / 2, canvas.height / 2, innerRadius, startAngle + sliceAngle, startAngle, true);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
let startAngle = 0;
|
||||
const total = data.reduce((acc, val) => acc + val, 0);
|
||||
data.forEach((value, index) => {
|
||||
const sliceAngle = (value / total) * 2 * Math.PI;
|
||||
drawSlice(startAngle, sliceAngle, colors[index]);
|
||||
startAngle += sliceAngle;
|
||||
});
|
||||
}
|
||||
drawDoughnutChart();
|
||||
|
||||
// Gráfico de Dispersão
|
||||
function drawScatterChart() {
|
||||
const canvas = document.getElementById('scatterChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [[10, 20], [15, 25], [20, 30], [25, 35], [30, 40]];
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = '#007bff';
|
||||
data.forEach(([x, y]) => {
|
||||
ctx.beginPath();
|
||||
ctx.arc(x * 10, y * 10, 5, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
drawScatterChart();
|
||||
|
||||
// Gráfico de Bolhas
|
||||
function drawBubbleChart() {
|
||||
const canvas = document.getElementById('bubbleChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [
|
||||
{ x: 10, y: 20, radius: 10 },
|
||||
{ x: 20, y: 30, radius: 15 },
|
||||
{ x: 30, y: 40, radius: 20 }
|
||||
];
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = '#FF6F61';
|
||||
data.forEach(({ x, y, radius }) => {
|
||||
ctx.beginPath();
|
||||
ctx.arc(x * 10, y * 10, radius, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
drawBubbleChart();
|
||||
|
||||
// Gráfico Polar
|
||||
function drawPolarChart() {
|
||||
const canvas = document.getElementById('polarChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [5, 10, 15, 20, 25];
|
||||
const labels = ['A', 'B', 'C', 'D', 'E'];
|
||||
const numOfPoints = data.length;
|
||||
const radius = Math.min(canvas.width, canvas.height) / 2 - 20;
|
||||
const angle = (2 * Math.PI) / numOfPoints;
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.translate(canvas.width / 2, canvas.height / 2);
|
||||
|
||||
// Draw data
|
||||
ctx.beginPath();
|
||||
data.forEach((value, index) => {
|
||||
const x = radius * (value / 30) * Math.cos(index * angle);
|
||||
const y = radius * (value / 30) * Math.sin(index * angle);
|
||||
index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.closePath();
|
||||
ctx.strokeStyle = '#007bff';
|
||||
ctx.stroke();
|
||||
|
||||
// Draw points
|
||||
ctx.fillStyle = '#007bff';
|
||||
data.forEach((value, index) => {
|
||||
const x = radius * (value / 30) * Math.cos(index * angle);
|
||||
const y = radius * (value / 30) * Math.sin(index * angle);
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 5, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
drawPolarChart();
|
||||
|
||||
// Gráfico de Barras Empilhadas
|
||||
function drawStackedBarChart() {
|
||||
const canvas = document.getElementById('stackedBarChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [
|
||||
[10, 20, 30],
|
||||
[20, 30, 40],
|
||||
[30, 40, 50]
|
||||
];
|
||||
const colors = ['#FF6384', '#36A2EB', '#FFCE56'];
|
||||
const barWidth = 50;
|
||||
const barSpacing = 70;
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
data.forEach((stack, stackIndex) => {
|
||||
stack.forEach((value, index) => {
|
||||
const x = stackIndex * barSpacing + 50;
|
||||
const y = canvas.height - (value / 100) * canvas.height;
|
||||
const height = (value / 100) * canvas.height;
|
||||
ctx.fillStyle = colors[index];
|
||||
ctx.fillRect(x, y, barWidth, height);
|
||||
});
|
||||
});
|
||||
}
|
||||
drawStackedBarChart();
|
||||
|
||||
// Gráfico de Linhas com Anotação
|
||||
function drawLineChartWithAnnotation() {
|
||||
const canvas = document.getElementById('lineChartWithAnnotation');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [10, 20, 15, 25, 30, 20, 40];
|
||||
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
|
||||
const canvasWidth = canvas.width;
|
||||
const canvasHeight = canvas.height;
|
||||
const padding = 50;
|
||||
const plotWidth = canvasWidth - 2 * padding;
|
||||
const plotHeight = canvasHeight - 2 * padding;
|
||||
const maxDataValue = Math.max(...data);
|
||||
const minDataValue = Math.min(...data);
|
||||
|
||||
function valueToY(value) {
|
||||
return canvasHeight - padding - ((value - minDataValue) / (maxDataValue - minDataValue)) * plotHeight;
|
||||
}
|
||||
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
ctx.strokeStyle = '#007bff';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
data.forEach((value, index) => {
|
||||
const x = padding + (index / (data.length - 1)) * plotWidth;
|
||||
const y = valueToY(value);
|
||||
index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = '#007bff';
|
||||
data.forEach((value, index) => {
|
||||
const x = padding + (index / (data.length - 1)) * plotWidth;
|
||||
const y = valueToY(value);
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 5, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
});
|
||||
|
||||
// Anotação
|
||||
const annotationX = padding + (data.length - 1) / (data.length - 1) * plotWidth;
|
||||
const annotationY = valueToY(data[data.length - 1]);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(annotationX, annotationY);
|
||||
ctx.lineTo(annotationX + 60, annotationY - 20);
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = 'red';
|
||||
ctx.fillText('Ponto Final', annotationX + 70, annotationY - 25);
|
||||
}
|
||||
drawLineChartWithAnnotation();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,281 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gráficos Dinâmicos com Inputs</title>
|
||||
<style>
|
||||
canvas {
|
||||
border: 1px solid #000;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Gráficos Dinâmicos</h1>
|
||||
<div class="controls">
|
||||
<div class="control-group">
|
||||
<label for="slice1">Fatias 1:</label>
|
||||
<input type="number" id="slice1" min="0" max="100" value="20">
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label for="slice2">Fatias 2:</label>
|
||||
<input type="number" id="slice2" min="0" max="100" value="20">
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label for="slice3">Fatias 3:</label>
|
||||
<input type="number" id="slice3" min="0" max="100" value="20">
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label for="slice4">Fatias 4:</label>
|
||||
<input type="number" id="slice4" min="0" max="100" value="20">
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label for="slice5">Fatias 5:</label>
|
||||
<input type="number" id="slice5" min="0" max="100" value="20">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<canvas id="pieChart" width="300" height="300"></canvas>
|
||||
<canvas id="barChart" width="300" height="300"></canvas>
|
||||
<canvas id="lineChart" width="300" height="300"></canvas>
|
||||
<canvas id="areaChart" width="300" height="300"></canvas>
|
||||
<canvas id="radarChart" width="300" height="300"></canvas>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Função para desenhar o gráfico de pizza
|
||||
function drawPieChart() {
|
||||
const canvas = document.getElementById('pieChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const slices = [
|
||||
parseInt(document.getElementById('slice1').value),
|
||||
parseInt(document.getElementById('slice2').value),
|
||||
parseInt(document.getElementById('slice3').value),
|
||||
parseInt(document.getElementById('slice4').value),
|
||||
parseInt(document.getElementById('slice5').value)
|
||||
];
|
||||
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#FF9F40'];
|
||||
const total = slices.reduce((sum, value) => sum + value, 0);
|
||||
let startAngle = 0;
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.translate(canvas.width / 2, canvas.height / 2);
|
||||
|
||||
slices.forEach((value, index) => {
|
||||
const sliceAngle = (value / total) * 2 * Math.PI;
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, canvas.width / 2, startAngle, startAngle + sliceAngle);
|
||||
ctx.lineTo(0, 0);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = colors[index];
|
||||
ctx.fill();
|
||||
startAngle += sliceAngle;
|
||||
});
|
||||
|
||||
ctx.resetTransform();
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de barras
|
||||
function drawBarChart() {
|
||||
const canvas = document.getElementById('barChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const barData = [
|
||||
parseInt(document.getElementById('slice1').value),
|
||||
parseInt(document.getElementById('slice2').value),
|
||||
parseInt(document.getElementById('slice3').value),
|
||||
parseInt(document.getElementById('slice4').value),
|
||||
parseInt(document.getElementById('slice5').value)
|
||||
];
|
||||
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#FF9F40'];
|
||||
const barWidth = 50;
|
||||
const barSpacing = 70;
|
||||
const maxBarHeight = canvas.height;
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
barData.forEach((value, index) => {
|
||||
const x = index * barSpacing + 50;
|
||||
const y = canvas.height - value;
|
||||
const height = value;
|
||||
ctx.fillStyle = colors[index];
|
||||
ctx.fillRect(x, y, barWidth, height);
|
||||
});
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de linhas
|
||||
function drawLineChart() {
|
||||
const canvas = document.getElementById('lineChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [
|
||||
parseInt(document.getElementById('slice1').value),
|
||||
parseInt(document.getElementById('slice2').value),
|
||||
parseInt(document.getElementById('slice3').value),
|
||||
parseInt(document.getElementById('slice4').value),
|
||||
parseInt(document.getElementById('slice5').value)
|
||||
];
|
||||
const canvasWidth = canvas.width;
|
||||
const canvasHeight = canvas.height;
|
||||
const padding = 50;
|
||||
const plotWidth = canvasWidth - 2 * padding;
|
||||
const plotHeight = canvasHeight - 2 * padding;
|
||||
const maxDataValue = Math.max(...data);
|
||||
const minDataValue = Math.min(...data);
|
||||
|
||||
function valueToY(value) {
|
||||
return canvasHeight - padding - ((value - minDataValue) / (maxDataValue - minDataValue)) * plotHeight;
|
||||
}
|
||||
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
ctx.strokeStyle = '#007bff';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
data.forEach((value, index) => {
|
||||
const x = padding + (index / (data.length - 1)) * plotWidth;
|
||||
const y = valueToY(value);
|
||||
index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = '#007bff';
|
||||
data.forEach((value, index) => {
|
||||
const x = padding + (index / (data.length - 1)) * plotWidth;
|
||||
const y = valueToY(value);
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 5, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de área
|
||||
function drawAreaChart() {
|
||||
const canvas = document.getElementById('areaChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [
|
||||
parseInt(document.getElementById('slice1').value),
|
||||
parseInt(document.getElementById('slice2').value),
|
||||
parseInt(document.getElementById('slice3').value),
|
||||
parseInt(document.getElementById('slice4').value),
|
||||
parseInt(document.getElementById('slice5').value)
|
||||
];
|
||||
const canvasWidth = canvas.width;
|
||||
const canvasHeight = canvas.height;
|
||||
const padding = 50;
|
||||
const plotWidth = canvasWidth - 2 * padding;
|
||||
const plotHeight = canvasHeight - 2 * padding;
|
||||
const maxDataValue = Math.max(...data);
|
||||
const minDataValue = Math.min(...data);
|
||||
|
||||
function valueToY(value) {
|
||||
return canvasHeight - padding - ((value - minDataValue) / (maxDataValue - minDataValue)) * plotHeight;
|
||||
}
|
||||
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
ctx.fillStyle = '#007bff';
|
||||
ctx.beginPath();
|
||||
data.forEach((value, index) => {
|
||||
const x = padding + (index / (data.length - 1)) * plotWidth;
|
||||
const y = valueToY(value);
|
||||
index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.lineTo(canvasWidth - padding, canvasHeight - padding);
|
||||
ctx.lineTo(padding, canvasHeight - padding);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de radar
|
||||
function drawRadarChart() {
|
||||
const canvas = document.getElementById('radarChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [
|
||||
parseInt(document.getElementById('slice1').value),
|
||||
parseInt(document.getElementById('slice2').value),
|
||||
parseInt(document.getElementById('slice3').value),
|
||||
parseInt(document.getElementById('slice4').value),
|
||||
parseInt(document.getElementById('slice5').value)
|
||||
];
|
||||
const labels = ['A', 'B', 'C', 'D', 'E'];
|
||||
const maxDataValue = Math.max(...data);
|
||||
const centerX = canvas.width / 2;
|
||||
const centerY = canvas.height / 2;
|
||||
const radius = Math.min(centerX, centerY) - 10;
|
||||
const angleStep = 2 * Math.PI / data.length;
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.translate(centerX, centerY);
|
||||
|
||||
// Draw the radar grid
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const angle = i * angleStep;
|
||||
const x = radius * Math.cos(angle);
|
||||
const y = radius * Math.sin(angle);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(x, y);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Draw the radar area
|
||||
ctx.beginPath();
|
||||
data.forEach((value, index) => {
|
||||
const angle = index * angleStep;
|
||||
const x = (radius * (value / maxDataValue)) * Math.cos(angle);
|
||||
const y = (radius * (value / maxDataValue)) * Math.sin(angle);
|
||||
index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = 'rgba(0, 123, 255, 0.5)';
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = '#007bff';
|
||||
ctx.stroke();
|
||||
|
||||
// Draw labels
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
labels.forEach((label, index) => {
|
||||
const angle = index * angleStep;
|
||||
const x = (radius + 15) * Math.cos(angle);
|
||||
const y = (radius + 15) * Math.sin(angle);
|
||||
ctx.fillText(label, x, y);
|
||||
});
|
||||
|
||||
ctx.resetTransform();
|
||||
}
|
||||
|
||||
// Função para atualizar todos os gráficos
|
||||
function updateCharts() {
|
||||
drawPieChart();
|
||||
drawBarChart();
|
||||
drawLineChart();
|
||||
drawAreaChart();
|
||||
drawRadarChart();
|
||||
}
|
||||
|
||||
// Atualiza todos os gráficos quando qualquer input muda
|
||||
document.querySelectorAll('.controls input').forEach(input => {
|
||||
input.addEventListener('input', updateCharts);
|
||||
});
|
||||
|
||||
// Desenhe os gráficos inicialmente
|
||||
updateCharts();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Animação de Linha Trajetória Circular</title>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #282c34;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
canvas {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas id="animationCanvas"></canvas>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('animationCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Define canvas dimensions
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const circle = {
|
||||
centerX: canvas.width / 2,
|
||||
centerY: canvas.height / 2,
|
||||
radius: 150, // Raio do caminho circular
|
||||
lineLength: 100, // Comprimento da linha
|
||||
rotationSpeed: 0.02,
|
||||
angle: 0,
|
||||
linePath: [] // Para armazenar a trajetória
|
||||
};
|
||||
|
||||
function drawRotatingLine() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(circle.centerX, circle.centerY);
|
||||
|
||||
// Cálculo da posição da linha
|
||||
const lineStartX = circle.radius * Math.cos(circle.angle);
|
||||
const lineStartY = circle.radius * Math.sin(circle.angle);
|
||||
const lineEndX = (circle.radius + circle.lineLength) * Math.cos(circle.angle);
|
||||
const lineEndY = (circle.radius + circle.lineLength) * Math.sin(circle.angle);
|
||||
|
||||
// Adiciona o ponto final da linha ao caminho
|
||||
circle.linePath.push({ x: lineEndX, y: lineEndY });
|
||||
|
||||
// Desenha a linha
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(lineStartX, lineStartY);
|
||||
ctx.lineTo(lineEndX, lineEndY);
|
||||
ctx.strokeStyle = '#61dafb';
|
||||
ctx.lineWidth = 5;
|
||||
ctx.stroke();
|
||||
|
||||
// Desenha a trajetória acumulada
|
||||
ctx.beginPath();
|
||||
for (let i = 0; i < circle.linePath.length - 1; i++) {
|
||||
ctx.moveTo(circle.linePath[i].x, circle.linePath[i].y);
|
||||
ctx.lineTo(circle.linePath[i + 1].x, circle.linePath[i + 1].y);
|
||||
}
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function animate() {
|
||||
circle.angle += circle.rotationSpeed;
|
||||
drawRotatingLine();
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
// Ajusta o tamanho do canvas quando a janela é redimensionada
|
||||
window.addEventListener('resize', () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
circle.centerX = canvas.width / 2;
|
||||
circle.centerY = canvas.height / 2;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Em Construção</title>
|
||||
<style>
|
||||
/* Estilos básicos para garantir que a tela ocupe toda a viewport */
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.message {
|
||||
background: #ffffff;
|
||||
border: 1px solid #ccc;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
animation: fadeIn 2s ease-in-out;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
color: #1478cf;
|
||||
margin-bottom: 10px;
|
||||
animation: bounce 1s infinite;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.link {
|
||||
text-decoration: none;
|
||||
color: #0066cc;
|
||||
font-size: 1rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
text-decoration: underline;
|
||||
color: #004999;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
|
||||
0%,
|
||||
20%,
|
||||
50%,
|
||||
80%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="message">
|
||||
<h1>Em Construção</h1>
|
||||
<p>Estamos trabalhando nisso! Coisas podem ser modificadas</p>
|
||||
<a href="https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/html/Ambiente_Usuario.html" class="link">Voltar
|
||||
para a Página Inicial</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// Exemplo de script básico
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('Página de "Em Construção" carregada.');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login | iTGuys</title>
|
||||
|
||||
<link rel="stylesheet" href="../Css/Ambiente_Usuario/login.css">
|
||||
<link rel="stylesheet" href="../Css/padrao.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body class="fundo centralizar">
|
||||
<main>
|
||||
<div>
|
||||
<div id="bloco" class="Bloco">
|
||||
<div class="logo">
|
||||
<img src="../Acessts/Imagens/iT_Guys/Logo_itGuys.png">
|
||||
</div>
|
||||
<form id="formLogin">
|
||||
<div class="login_central">
|
||||
<h1>
|
||||
Login
|
||||
</h1>
|
||||
</div>
|
||||
<div class="Login">
|
||||
<img src="../Acessts/Imagens/Iconis/User 2.png" alt="">
|
||||
<input class="Login_input" type="text" name="usuario" id="username"
|
||||
placeholder="Usuario@dominio.com.br" required>
|
||||
</div>
|
||||
<div class="Senha">
|
||||
<img src="../Acessts/Imagens/Iconis/User 1.png" alt="">
|
||||
<input class="Senha_input" type="password" name="senha" id="password"
|
||||
placeholder="Escreva sua senha" required>
|
||||
</div>
|
||||
|
||||
<div class="select-menu">
|
||||
<div class="select">
|
||||
<span>Escolha seu dominio</span><i class="bi bi-box-arrow-down"></i>
|
||||
</div>
|
||||
<div class="options-list">
|
||||
<div id="dominio_1" class="option">ItGuys</div>
|
||||
<div id="dominio_2" class="option">Enseg</div>
|
||||
<div id="dominio_3" class="option">OestPan</div>
|
||||
<div id="dominio_4" class="option">Gau</div>
|
||||
<div id="dominio_5" class="option">ItGuys</div>
|
||||
<div id="dominio_6" class="option">ItGuys</div>
|
||||
<div id="dominio_7" class="option">ItGuys</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="botao" id="submit" name="submit">Ok</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<script src="../js/login_teste.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Caminho Circular em Loop</title>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #282c34;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
canvas {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas id="animationCanvas"></canvas>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('animationCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Define canvas dimensions
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const circle = {
|
||||
centerX: canvas.width / 2,
|
||||
centerY: canvas.height / 2,
|
||||
radius: 150, // Raio do caminho circular
|
||||
rotationSpeed: 0.02,
|
||||
angle: 0,
|
||||
linePath: [], // Para armazenar a trajetória
|
||||
maxPathLength: 500 // Limite para o comprimento da trajetória
|
||||
};
|
||||
|
||||
function drawCircularPath() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Adiciona o ponto da trajetória atual ao caminho
|
||||
const pathX = circle.centerX + circle.radius * Math.cos(circle.angle);
|
||||
const pathY = circle.centerY + circle.radius * Math.sin(circle.angle);
|
||||
circle.linePath.push({ x: pathX, y: pathY });
|
||||
|
||||
// Desenha a trajetória acumulada
|
||||
ctx.beginPath();
|
||||
for (let i = 0; i < circle.linePath.length - 1; i++) {
|
||||
ctx.moveTo(circle.linePath[i].x, circle.linePath[i].y);
|
||||
ctx.lineTo(circle.linePath[i + 1].x, circle.linePath[i + 1].y);
|
||||
}
|
||||
ctx.strokeStyle = '#61dafb';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
|
||||
// Limita o comprimento da trajetória e reinicia a trajetória quando necessário
|
||||
if (circle.linePath.length > circle.maxPathLength) {
|
||||
circle.linePath.shift(); // Remove o primeiro ponto do caminho
|
||||
if (circle.angle >= Math.PI * 2) { // Completa um ciclo
|
||||
circle.angle = 0; // Reinicia o ângulo
|
||||
circle.linePath = []; // Limpa a trajetória
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
circle.angle += circle.rotationSpeed;
|
||||
drawCircularPath();
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
// Ajusta o tamanho do canvas quando a janela é redimensionada
|
||||
window.addEventListener('resize', () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
circle.centerX = canvas.width / 2;
|
||||
circle.centerY = canvas.height / 2;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -5,7 +5,7 @@ const dadosDosBlocos = [
|
|||
titulo404: 'Erro 404',
|
||||
titulotex: 'Desculpa, mas não possivel encontra sua pagina!',
|
||||
titulosubtex: 'Tente fazer seu login novamente',
|
||||
link2: '../login.html',
|
||||
link2: 'https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/login.html',
|
||||
botao: 'Retornar',
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -204,7 +204,7 @@ document.getElementById("formLogin").addEventListener("submit", async function (
|
|||
/*Caso erro, quando há um erro na autenticação com o banco de dados*/
|
||||
if (comunica === 401) {
|
||||
|
||||
errorMessageElement.innerHTML = `<p>Erro na autenticação, informe seu o usuário, ao suporte@itguys.com.br</p>`;
|
||||
errorMessageElement.innerHTML = `<p>Erro na autenticação, informe ao suporte, no e-mail suporte@itguys.com.br</p>`;
|
||||
|
||||
|
||||
errorMessageElement.style.height = '10vh';
|
||||
|
|
|
|||
18
login.html
18
login.html
|
|
@ -45,16 +45,18 @@
|
|||
</div>
|
||||
|
||||
<!--Formulario que alinha todos os inputs da tela de login, usando a id formLogin para criar a base de interatividade com o script login.js-->
|
||||
<form id="formLogin"> <!--Conversar com o Thiago-->
|
||||
<form class="formulario" id="formLogin"> <!--Conversar com o Thiago-->
|
||||
|
||||
<!-- Campo oculto para incluir o token CSRF -->
|
||||
<input type="hidden" name="csrf_token"
|
||||
value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
|
||||
<!--Div responsavel por alinhar o titulo "Login" e definir suas especificações, utilizando o login_central para alinhar o titulo da página-->
|
||||
<!--Div responsavel por alinhar o titulo "Login" e definir suas especificações, utilizando o login_central para alinhar o titulo da página
|
||||
<div class="login_central">
|
||||
<h1>Login</h1>
|
||||
</div>
|
||||
</div>-->
|
||||
<!--Div responsavel por alinhar a label e o input realacionados ao dominio do usuário, usando a classe Login focado unicamente e alinhar todos os elementos relacionados ao usuário.-->
|
||||
|
||||
<div class="colum_1">
|
||||
<div class="Login">
|
||||
<img src="./Acessts/Imagens/Iconis/User 2.png" alt="">
|
||||
<!--caixa de entrada para os usuario, tendo a classe login_input para estilizar ela-->
|
||||
|
|
@ -72,9 +74,15 @@
|
|||
|
||||
<div id="errorMessage" class="error-message"></div>
|
||||
<!-- Dentro dessa div, é onde as mensagens de erro são apresentadas na tela , usando a classe erro-massege para sua estilização, e id erroMessage para aplicação de sua funcionalidades com o login.js-->
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="colum_2">
|
||||
|
||||
|
||||
<!--Botão de envio para o mid end, usando a calsse botao para estilização, id submit para sua interação de envio.-->
|
||||
<button class="botao" id="submit" name="submit">Ok</button>
|
||||
<button class="botao" id="submit" name="submit">Login</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue