Atualização 4 - Refinando o construtor
This commit is contained in:
daivid.alves
parent
958edb0e69
commit
bf9a04305b
|
|
@ -1 +1,3 @@
|
|||
/*Usar para construir toda a estrutura padrão do ambiente */
|
||||
@import './Menu_Lateral.css';
|
||||
@import './Telas.css';
|
||||
@import './import.css';
|
||||
|
|
@ -1,3 +1,40 @@
|
|||
:root {
|
||||
|
||||
/*Fundos das telas de iframe de cada monitoramento*/
|
||||
--fundo_5: #e2e2e2;
|
||||
|
||||
/*padrão de fonts*/
|
||||
--font_titulo: fonteTi;
|
||||
--font_conteudo: fonteTa;
|
||||
|
||||
/*Cor matriz*/
|
||||
--Matriz: #ffffff;
|
||||
|
||||
/*Paleta de cores padrão*/
|
||||
--Cor_Primaria_1: #1B8C51;
|
||||
--Cor_Primaria_2: #1B8C77;
|
||||
--Cor_Primaria_3: #1B7C8C;
|
||||
--Cor_Primaria_4: #1B8C2A;
|
||||
--Cor_Primaria_5: #1B588C;
|
||||
|
||||
/*Paleta de cores padrão claro*/
|
||||
--Cor_Segundaria_1_1: #22bb6c;
|
||||
--Cor_Segundaria_2_1: #22c0a3;
|
||||
--Cor_Segundaria_3_1: #26b1c7;
|
||||
--Cor_Segundaria_4_1: #26c03a;
|
||||
--Cor_Segundaria_5_1: #1478cf;
|
||||
|
||||
/*Paleta de cores padrão escuro*/
|
||||
--Cor_Segundaria_1_1: #115834;
|
||||
--Cor_Segundaria_2_2: #125f51;
|
||||
--Cor_Segundaria_3_2: #1B7C8C;
|
||||
--Cor_Segundaria_4_2: #105018;
|
||||
--Cor_Segundaria_5_2: #123655;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*Usar para construir toda a estrutura padrão do ambiente */
|
||||
.matriz {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -6,10 +43,12 @@
|
|||
|
||||
}
|
||||
|
||||
/* ------------------- Primeiro painel de dedicado para conter as personalizações unicas do usuário -------------------------- */
|
||||
|
||||
.capitulo_1 {
|
||||
width: 4vw;
|
||||
height: 100vh;
|
||||
background-color: var(--fundo_2);
|
||||
background-color: var(--Cor_Segundaria_5_1);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
|
|
@ -20,9 +59,11 @@
|
|||
|
||||
|
||||
div.ativo {
|
||||
background-color: var(--fundo_4);
|
||||
background-color: var(--Cor_Segundaria_5_2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.capitulo_1.expansao {
|
||||
|
||||
width: 15vw;
|
||||
|
|
@ -61,7 +102,6 @@ div.ativo {
|
|||
|
||||
}
|
||||
|
||||
|
||||
.capitulo_1:hover {
|
||||
|
||||
width: 15vw;
|
||||
|
|
@ -152,7 +192,7 @@ div.ativo {
|
|||
}
|
||||
|
||||
.Corpo_1 .Colunas_1 .seguimentos_1 img:hover {
|
||||
background-color: var(--fundo_2);
|
||||
background-color: var(--Cor_Segundaria_2_1);
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -164,7 +204,7 @@ div.ativo {
|
|||
|
||||
order: 1;
|
||||
display: flex;
|
||||
color: var(--variante_font_1);
|
||||
color: var(--Matriz);
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
|
|
@ -208,12 +248,15 @@ div.ativo {
|
|||
transition: 1s ease;
|
||||
}
|
||||
|
||||
|
||||
/* ------------------- Segundo painel que apresenta as opições do ambiente do usuário, que está dividido em duas subpartes -------------------------- */
|
||||
|
||||
.Corpo_1 .Colunas_2 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
width: 15vw;
|
||||
background-color: var(--fundo_2);
|
||||
background-color: var(--Cor_Primaria_5_1);
|
||||
height: 90vh;
|
||||
transition: 1s ease;
|
||||
|
||||
|
|
@ -229,25 +272,25 @@ div.ativo {
|
|||
|
||||
font-family: var(--font_titulo);
|
||||
text-decoration: none;
|
||||
color: var(--variante_font_1);
|
||||
color: var(--Matriz);
|
||||
|
||||
}
|
||||
|
||||
.Corpo_1 .Colunas_2 .seguimentos_2 .sessao_1 .forg .item_menu {
|
||||
font-family: var(--font_titulo);
|
||||
text-decoration: none;
|
||||
color: var(--variante_font_1);
|
||||
color: var(--Matriz);
|
||||
|
||||
}
|
||||
|
||||
.Corpo_1 .Colunas_2 .seguimentos_2 .sessao_1 .forg .item_menu:hover {
|
||||
color: var(--variante_font_4);
|
||||
color: var(--Matriz);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.Corpo_1 .Colunas_2 .seguimentos_2 a:hover {
|
||||
color: var(--variante_font_4);
|
||||
color: var(--Matriz);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -278,7 +321,7 @@ div.ativo {
|
|||
width: 100%;
|
||||
height: 15vh;
|
||||
|
||||
background-color: var(--fundo_4);
|
||||
background-color: var(--Cor_Segundaria_5_2);
|
||||
display: flex;
|
||||
overflow-y: auto;
|
||||
flex-direction: column;
|
||||
|
|
@ -306,7 +349,7 @@ div.ativo {
|
|||
.sub_item_1 p,
|
||||
.sub_item_2 p,
|
||||
.sub_item_3 p {
|
||||
color: rgb(249, 249, 252);
|
||||
color: var(--Matriz);
|
||||
font-family: var(--font_titulo);
|
||||
font-size: 0.9vw;
|
||||
}
|
||||
|
|
@ -323,7 +366,7 @@ div.ativo {
|
|||
|
||||
.sessao_2 .item_menu:hover,
|
||||
.sessao_1 .item_menu:hover {
|
||||
background-color: var(--fundo_4);
|
||||
background-color: var(--Cor_Segundaria_5_2);
|
||||
transition: 1s ease;
|
||||
}
|
||||
|
||||
|
|
@ -331,7 +374,7 @@ div.ativo {
|
|||
.sub_item_1:hover,
|
||||
.sub_item_2:hover,
|
||||
.sub_item_3:hover {
|
||||
background-color: var(--fundo_1);
|
||||
background-color: var(--Cor_Segundaria_2_1);
|
||||
transition: 1s ease;
|
||||
|
||||
.Corpo_1 .Colunas_2 .seguimentos_2 .sessao_1 .forg .item_menu {
|
||||
|
|
@ -374,31 +417,3 @@ div.ativo {
|
|||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.capitulo_2 {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: end;
|
||||
align-content: end;
|
||||
width: 98vw;
|
||||
}
|
||||
|
||||
.Corpo_2 .Colunas_1 .transmissão {
|
||||
width: 92vw;
|
||||
height: 82vh;
|
||||
transition: 1s ease;
|
||||
}
|
||||
|
||||
.Corpo_2 iframe {
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
.Corpo_2 .Colunas_1 .transmissão.expansao {
|
||||
|
||||
width: 81vw;
|
||||
height: 82vh;
|
||||
transition: 1s ease;
|
||||
|
||||
}
|
||||
|
|
@ -1,3 +1,31 @@
|
|||
.capitulo_2 {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: end;
|
||||
align-content: end;
|
||||
width: 98vw;
|
||||
}
|
||||
|
||||
.Corpo_2 .Colunas_1 .transmissão {
|
||||
width: 92vw;
|
||||
height: 82vh;
|
||||
transition: 1s ease;
|
||||
}
|
||||
|
||||
.Corpo_2 iframe {
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
.Corpo_2 .Colunas_1 .transmissão.expansao {
|
||||
|
||||
width: 81vw;
|
||||
height: 82vh;
|
||||
transition: 1s ease;
|
||||
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -5,11 +33,14 @@
|
|||
justify-content: end;
|
||||
align-content: end;
|
||||
align-items: end;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.cabecario_1 {
|
||||
width: 95%;
|
||||
height: 10vh;
|
||||
background-color: var(--Cor_Segundaria_5_1);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -29,6 +60,7 @@
|
|||
|
||||
.Bloco_subcab1_1 .icon_subcab1_1 {
|
||||
width: 15vw;
|
||||
margin-left: 2vw;
|
||||
}
|
||||
|
||||
.Bloco_subcab1_2 {
|
||||
|
|
@ -38,6 +70,7 @@
|
|||
padding-right: 2vw;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.Bloco_subcab1_2 button {
|
||||
|
|
@ -50,15 +83,20 @@
|
|||
border: none;
|
||||
background: none;
|
||||
|
||||
background-color: var(--fundo_1);
|
||||
color: var(--variante_font_1);
|
||||
background-color: var(--Matriz);
|
||||
color: var(--Cor_Segundaria_5_1);
|
||||
transition: 1s ease;
|
||||
}
|
||||
|
||||
.Bloco_subcab1_2 button:hover {
|
||||
|
||||
background-color: var(--fundo_3);
|
||||
color: var(--variante_font_3);
|
||||
border-left: 0.2vw solid var(--Matriz);
|
||||
border-right: 0.2vw solid var(--Matriz);
|
||||
border-top: 0.2vw solid var(--Matriz);
|
||||
border-bottom: 0.2vw solid var(--Matriz);
|
||||
|
||||
background-color: var(--Cor_Segundaria_5_1);
|
||||
color: var(--Matriz);
|
||||
transition: 1s ease;
|
||||
}
|
||||
|
||||
|
|
@ -70,7 +108,7 @@
|
|||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--fundo_2);
|
||||
background-color: var(--Matriz);
|
||||
height: 10vh;
|
||||
}
|
||||
|
||||
|
|
@ -51,26 +51,3 @@ 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;
|
||||
|
||||
}
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
width: 100%;
|
||||
height: 20vh;
|
||||
|
||||
background: url(../../Acessts/Imagens/Utili/Sem\ título-2.png);
|
||||
background: url(../../../Acessts/Imagens/Utili/Sem\ título-2.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,11 +4,10 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../Css/padraouser.css">
|
||||
<link rel="stylesheet" href="../Css/Ambiente_Usuario/Blocos.css">
|
||||
<link rel="stylesheet" href="../Css/Ambiente_Usuario/erro_404.css">
|
||||
<link rel="stylesheet" href="../Css/global/Estrutura.css">
|
||||
|
||||
<title>Ambiente do Usuario</title>
|
||||
|
||||
<title>Ambiente de teste</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -24,12 +23,9 @@
|
|||
|
||||
|
||||
<!--padrao_A1 reponsavel ter toda a estrutura que aplicara o data na tela-->
|
||||
<script src="../js/Ambiente_Usuario/padrao_A1.js"></script>
|
||||
<script src="./padrao.js"></script>
|
||||
|
||||
<script src="../js/Ambiente_Usuario/Erro_404.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<header class="cabecario_1">
|
||||
<div class="Bloco_subcab1_1">
|
||||
<img src="../Acessts/Imagens/iT_Guys/logo_340x100.png" alt="" class="icon_subcab1_1">
|
||||
<img src="../Acessts/Imagens/iT_Guys/logo_flat.png" alt="" class="icon_subcab1_1">
|
||||
</div>
|
||||
|
||||
<div class="Bloco_subcab1_2">
|
||||
|
|
@ -85,8 +85,6 @@
|
|||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="sub_menu" id="sub_menu">
|
||||
|
||||
<a href="./Tela_Monitoramento/Padrão/Monitoramento_Itguys.html" target="frame">
|
||||
|
|
|
|||
|
|
@ -1,448 +1,552 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>12 Tipos de Gráficos</title>
|
||||
<title>Gráficos com Canvas e JavaScript</title>
|
||||
<style>
|
||||
canvas {
|
||||
border: 1px solid #000;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
</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>
|
||||
<h1>Exemplos de Gráficos com Canvas e JavaScript</h1>
|
||||
|
||||
<!-- Gráficos -->
|
||||
<h2>Gráfico de Linha do Tempo</h2>
|
||||
<canvas id="timelineChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Linhas</h2>
|
||||
<canvas id="lineChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Barras</h2>
|
||||
<canvas id="barChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Pizza</h2>
|
||||
<canvas id="pieChart" width="400" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Área</h2>
|
||||
<canvas id="areaChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Calor</h2>
|
||||
<canvas id="heatmapChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico Donut</h2>
|
||||
<canvas id="donutChart" width="400" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Dispersão</h2>
|
||||
<canvas id="scatterChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Bolhas</h2>
|
||||
<canvas id="bubbleChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Barras Empilhadas</h2>
|
||||
<canvas id="stackedBarChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Linhas com Anotação</h2>
|
||||
<canvas id="annotatedLineChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Velocímetro</h2>
|
||||
<canvas id="gaugeChart" width="400" height="400"></canvas>
|
||||
|
||||
<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'];
|
||||
// Função para desenhar o gráfico de linha do tempo
|
||||
function drawTimelineChart(ctx, data, labels) {
|
||||
const padding = 40;
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const maxData = Math.max(...data);
|
||||
const minData = Math.min(...data);
|
||||
const lineColor = 'blue';
|
||||
const labelColor = 'black';
|
||||
const pointRadius = 5;
|
||||
|
||||
// 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);
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
function valueToY(value) {
|
||||
return canvasHeight - padding - ((value - minDataValue) / (maxDataValue - minDataValue)) * plotHeight;
|
||||
}
|
||||
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
ctx.strokeStyle = '#007bff';
|
||||
ctx.lineWidth = 2;
|
||||
// Draw axes
|
||||
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.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
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();
|
||||
|
||||
// Draw data points and lines
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, height - padding - ((data[0] - minData) / (maxData - minData) * (height - 2 * padding)));
|
||||
data.forEach((point, i) => {
|
||||
const x = padding + i * (width - 2 * padding) / (data.length - 1);
|
||||
const y = height - padding - ((point - minData) / (maxData - minData) * (height - 2 * padding));
|
||||
ctx.lineTo(x, y);
|
||||
ctx.arc(x, y, pointRadius, 0, 2 * Math.PI);
|
||||
});
|
||||
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);
|
||||
ctx.strokeStyle = lineColor;
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = lineColor;
|
||||
ctx.fill();
|
||||
|
||||
// Draw labels
|
||||
ctx.fillStyle = labelColor;
|
||||
labels.forEach((label, i) => {
|
||||
const x = padding + i * (width - 2 * padding) / (labels.length - 1);
|
||||
const y = height - padding + 20;
|
||||
ctx.fillText(label, x, y);
|
||||
});
|
||||
}
|
||||
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;
|
||||
// Função para desenhar o gráfico de linhas
|
||||
function drawLineChart(ctx, data) {
|
||||
const padding = 40;
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const maxData = Math.max(...data);
|
||||
const minData = Math.min(...data);
|
||||
const lineColor = 'blue';
|
||||
|
||||
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);
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'bottom';
|
||||
ctx.fillText(labels[index], x + barWidth / 2, canvas.height - 5);
|
||||
// Draw axes
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.stroke();
|
||||
|
||||
// Draw line
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, height - padding - ((data[0] - minData) / (maxData - minData) * (height - 2 * padding)));
|
||||
data.forEach((point, i) => {
|
||||
const x = padding + i * (width - 2 * padding) / (data.length - 1);
|
||||
const y = height - padding - ((point - minData) / (maxData - minData) * (height - 2 * padding));
|
||||
ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.strokeStyle = lineColor;
|
||||
ctx.stroke();
|
||||
}
|
||||
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'];
|
||||
// Função para desenhar o gráfico de barras
|
||||
function drawBarChart(ctx, data) {
|
||||
const padding = 40;
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const barWidth = (width - 2 * padding) / data.length - 10;
|
||||
const maxData = Math.max(...data);
|
||||
|
||||
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();
|
||||
}
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw bars
|
||||
data.forEach((point, i) => {
|
||||
const x = padding + i * ((width - 2 * padding) / data.length);
|
||||
const barHeight = (point / maxData) * (height - 2 * padding);
|
||||
ctx.fillStyle = 'blue';
|
||||
ctx.fillRect(x, height - padding - barHeight, barWidth, barHeight);
|
||||
});
|
||||
|
||||
// Draw axes
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de pizza
|
||||
function drawPieChart(ctx, data) {
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const radius = Math.min(width, height) / 2 - 20;
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
|
||||
let startAngle = 0;
|
||||
const total = data.reduce((acc, val) => acc + val, 0);
|
||||
data.forEach((value, index) => {
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
data.forEach((value, i) => {
|
||||
const sliceAngle = (value / total) * 2 * Math.PI;
|
||||
drawSlice(startAngle, sliceAngle, colors[index]);
|
||||
startAngle += sliceAngle;
|
||||
const endAngle = startAngle + sliceAngle;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(centerX, centerY);
|
||||
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = `hsl(${i * 360 / data.length}, 70%, 70%)`;
|
||||
ctx.fill();
|
||||
|
||||
startAngle = endAngle;
|
||||
});
|
||||
}
|
||||
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);
|
||||
// Função para desenhar o gráfico de área
|
||||
function drawAreaChart(ctx, data) {
|
||||
const padding = 40;
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const maxData = Math.max(...data);
|
||||
const minData = Math.min(...data);
|
||||
const lineColor = 'blue';
|
||||
const fillColor = 'rgba(0, 0, 255, 0.2)';
|
||||
|
||||
function valueToY(value) {
|
||||
return canvasHeight - padding - ((value - minDataValue) / (maxDataValue - minDataValue)) * plotHeight;
|
||||
}
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
ctx.strokeStyle = '#007bff';
|
||||
ctx.lineWidth = 2;
|
||||
// Draw axes
|
||||
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.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
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);
|
||||
// Draw area
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, height - padding);
|
||||
data.forEach((point, i) => {
|
||||
const x = padding + i * (width - 2 * padding) / (data.length - 1);
|
||||
const y = height - padding - ((point - minData) / (maxData - minData) * (height - 2 * padding));
|
||||
ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = fillColor;
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = lineColor;
|
||||
ctx.stroke();
|
||||
}
|
||||
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'];
|
||||
// Função para desenhar o gráfico de calor
|
||||
function drawHeatmapChart(ctx, data) {
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const cellSize = 30;
|
||||
|
||||
function getColor(value) {
|
||||
const index = Math.min(Math.floor(value / 2), colors.length - 1);
|
||||
return colors[index];
|
||||
}
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw heatmap
|
||||
data.forEach((row, y) => {
|
||||
row.forEach((value, x) => {
|
||||
ctx.fillStyle = getColor(value);
|
||||
const color = `rgba(255, 0, 0, ${value})`;
|
||||
ctx.fillStyle = color;
|
||||
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();
|
||||
}
|
||||
// Função para desenhar o gráfico Donut
|
||||
function drawDonutChart(ctx, data) {
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const radius = Math.min(width, height) / 2 - 20;
|
||||
const innerRadius = radius / 2;
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
|
||||
let startAngle = 0;
|
||||
const total = data.reduce((acc, val) => acc + val, 0);
|
||||
data.forEach((value, index) => {
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
data.forEach((value, i) => {
|
||||
const sliceAngle = (value / total) * 2 * Math.PI;
|
||||
drawSlice(startAngle, sliceAngle, colors[index]);
|
||||
startAngle += sliceAngle;
|
||||
});
|
||||
}
|
||||
drawDoughnutChart();
|
||||
const endAngle = startAngle + sliceAngle;
|
||||
|
||||
// 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.arc(centerX, centerY, radius, startAngle, endAngle);
|
||||
ctx.arc(centerX, centerY, innerRadius, endAngle, startAngle, true);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = `hsl(${i * 360 / data.length}, 70%, 70%)`;
|
||||
ctx.fill();
|
||||
|
||||
startAngle = endAngle;
|
||||
});
|
||||
}
|
||||
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 }
|
||||
];
|
||||
// Função para desenhar o gráfico de dispersão
|
||||
function drawScatterChart(ctx, data) {
|
||||
const padding = 40;
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const maxX = Math.max(...data.map(p => p[0]));
|
||||
const minX = Math.min(...data.map(p => p[0]));
|
||||
const maxY = Math.max(...data.map(p => p[1]));
|
||||
const minY = Math.min(...data.map(p => p[1]));
|
||||
|
||||
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();
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// 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
|
||||
// Draw axes
|
||||
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.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
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);
|
||||
data.forEach(([x, y]) => {
|
||||
const px = padding + (x - minX) / (maxX - minX) * (width - 2 * padding);
|
||||
const py = height - padding - (y - minY) / (maxY - minY) * (height - 2 * padding);
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 5, 0, 2 * Math.PI);
|
||||
ctx.arc(px, py, 5, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = 'blue';
|
||||
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;
|
||||
// Função para desenhar o gráfico de bolhas
|
||||
function drawBubbleChart(ctx, data) {
|
||||
const padding = 40;
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const maxX = Math.max(...data.map(p => p[0]));
|
||||
const minX = Math.min(...data.map(p => p[0]));
|
||||
const maxY = Math.max(...data.map(p => p[1]));
|
||||
const minY = Math.min(...data.map(p => p[1]));
|
||||
const maxSize = Math.max(...data.map(p => p[2]));
|
||||
|
||||
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);
|
||||
});
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw axes
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.stroke();
|
||||
|
||||
// Draw bubbles
|
||||
data.forEach(([x, y, size]) => {
|
||||
const px = padding + (x - minX) / (maxX - minX) * (width - 2 * padding);
|
||||
const py = height - padding - (y - minY) / (maxY - minY) * (height - 2 * padding);
|
||||
const radius = (size / maxSize) * 20;
|
||||
ctx.beginPath();
|
||||
ctx.arc(px, py, radius, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = 'blue';
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
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);
|
||||
// Função para desenhar o gráfico de barras empilhadas
|
||||
function drawStackedBarChart(ctx, data) {
|
||||
const padding = 40;
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const barWidth = (width - 2 * padding) / data[0].length - 10;
|
||||
const maxData = Math.max(...data.flat());
|
||||
|
||||
function valueToY(value) {
|
||||
return canvasHeight - padding - ((value - minDataValue) / (maxDataValue - minDataValue)) * plotHeight;
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw bars
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
data[i].forEach((point, j) => {
|
||||
const x = padding + j * ((width - 2 * padding) / data[0].length);
|
||||
const barHeight = (point / maxData) * (height - 2 * padding);
|
||||
ctx.fillStyle = `rgba(0, 0, 255, ${i / data.length})`;
|
||||
ctx.fillRect(x, height - padding - barHeight, barWidth, barHeight);
|
||||
});
|
||||
}
|
||||
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
ctx.strokeStyle = '#007bff';
|
||||
ctx.lineWidth = 2;
|
||||
// Draw axes
|
||||
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.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = '#007bff';
|
||||
data.forEach((value, index) => {
|
||||
const x = padding + (index / (data.length - 1)) * plotWidth;
|
||||
const y = valueToY(value);
|
||||
}
|
||||
|
||||
|
||||
function drawAnnotatedLineChart(ctx, data, annotations) {
|
||||
const padding = 40;
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const maxData = Math.max(...data);
|
||||
const minData = Math.min(...data);
|
||||
const lineColor = 'blue';
|
||||
const annotationColor = 'red';
|
||||
const gridColor = 'lightgray';
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw axes
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.stroke();
|
||||
|
||||
// Draw grid lines and Y-axis labels
|
||||
const numGridLinesX = 10; // Número de linhas de grade no eixo X
|
||||
const numGridLinesY = 10; // Número de linhas de grade no eixo Y
|
||||
|
||||
// Linhas verticais e rótulos do eixo X
|
||||
for (let i = 0; i <= numGridLinesX; i++) {
|
||||
const x = padding + (i * (width - 2 * padding) / numGridLinesX);
|
||||
ctx.strokeStyle = gridColor;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, padding);
|
||||
ctx.lineTo(x, height - padding);
|
||||
ctx.stroke();
|
||||
|
||||
// Rótulo do eixo X
|
||||
ctx.fillText(`X${i}`, x, height - padding + 20);
|
||||
}
|
||||
|
||||
// Linhas horizontais e rótulos do eixo Y
|
||||
for (let i = 0; i <= numGridLinesY; i++) {
|
||||
const y = height - padding - (i * (height - 2 * padding) / numGridLinesY);
|
||||
ctx.strokeStyle = gridColor;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, y);
|
||||
ctx.lineTo(width - padding, y);
|
||||
ctx.stroke();
|
||||
|
||||
// Rótulo do eixo Y
|
||||
const yValue = minData + (i * (maxData - minData) / numGridLinesY);
|
||||
ctx.fillText(yValue.toFixed(2), padding - 30, y);
|
||||
}
|
||||
|
||||
// Draw line
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, height - padding - ((data[0] - minData) / (maxData - minData) * (height - 2 * padding)));
|
||||
data.forEach((point, i) => {
|
||||
const x = padding + i * (width - 2 * padding) / (data.length - 1);
|
||||
const y = height - padding - ((point - minData) / (maxData - minData) * (height - 2 * padding));
|
||||
ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.strokeStyle = lineColor;
|
||||
ctx.stroke();
|
||||
|
||||
// Draw annotations
|
||||
annotations.forEach(([x, y, text]) => {
|
||||
ctx.fillStyle = annotationColor;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 5, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
ctx.fillText(text, x + 10, y);
|
||||
});
|
||||
|
||||
// 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();
|
||||
|
||||
|
||||
|
||||
// Função para desenhar o gráfico de velocímetro
|
||||
function drawGaugeChart(ctx, value) {
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const radius = Math.min(width, height) / 2 - 20;
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
const maxValue = 100;
|
||||
const angle = (value / maxValue) * Math.PI;
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw gauge
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, radius, Math.PI, Math.PI + Math.PI);
|
||||
ctx.lineTo(centerX, centerY);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = 'lightgrey';
|
||||
ctx.fill();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, radius, Math.PI, Math.PI + angle);
|
||||
ctx.lineTo(centerX, centerY);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = 'blue';
|
||||
ctx.fill();
|
||||
|
||||
// Draw needle
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(centerX, centerY);
|
||||
const needleX = centerX + (radius - 10) * Math.cos(Math.PI + angle);
|
||||
const needleY = centerY + (radius - 10) * Math.sin(Math.PI + angle);
|
||||
ctx.lineTo(needleX, needleY);
|
||||
ctx.strokeStyle = 'black';
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
const timelineCanvas = document.getElementById('timelineChart');
|
||||
const lineCanvas = document.getElementById('lineChart');
|
||||
const barCanvas = document.getElementById('barChart');
|
||||
const pieCanvas = document.getElementById('pieChart');
|
||||
const areaCanvas = document.getElementById('areaChart');
|
||||
const heatmapCanvas = document.getElementById('heatmapChart');
|
||||
const donutCanvas = document.getElementById('donutChart');
|
||||
const scatterCanvas = document.getElementById('scatterChart');
|
||||
const bubbleCanvas = document.getElementById('bubbleChart');
|
||||
const stackedBarCanvas = document.getElementById('stackedBarChart');
|
||||
const annotatedLineCanvas = document.getElementById('annotatedLineChart');
|
||||
const gaugeCanvas = document.getElementById('gaugeChart');
|
||||
|
||||
const timelineCtx = timelineCanvas.getContext('2d');
|
||||
const lineCtx = lineCanvas.getContext('2d');
|
||||
const barCtx = barCanvas.getContext('2d');
|
||||
const pieCtx = pieCanvas.getContext('2d');
|
||||
const areaCtx = areaCanvas.getContext('2d');
|
||||
const heatmapCtx = heatmapCanvas.getContext('2d');
|
||||
const donutCtx = donutCanvas.getContext('2d');
|
||||
const scatterCtx = scatterCanvas.getContext('2d');
|
||||
const bubbleCtx = bubbleCanvas.getContext('2d');
|
||||
const stackedBarCtx = stackedBarCanvas.getContext('2d');
|
||||
const annotatedLineCtx = annotatedLineCanvas.getContext('2d');
|
||||
const gaugeCtx = gaugeCanvas.getContext('2d');
|
||||
|
||||
const timelineData = [5, 10, 15, 20, 25];
|
||||
const timelineLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
|
||||
|
||||
const lineData = [10, 20, 15, 25, 30];
|
||||
const barData = [12, 19, 3];
|
||||
const pieData = [300, 50, 100];
|
||||
const areaData = [10, 20, 15, 25, 30];
|
||||
const heatmapData = [
|
||||
[0.1, 0.3, 0.5, 0.7],
|
||||
[0.2, 0.4, 0.6, 0.8],
|
||||
[0.3, 0.5, 0.7, 0.9],
|
||||
[0.4, 0.6, 0.8, 1.0]
|
||||
];
|
||||
const donutData = [300, 50, 100];
|
||||
const scatterData = [
|
||||
[10, 20], [15, 25], [20, 30]
|
||||
];
|
||||
const bubbleData = [
|
||||
[10, 20, 30], [15, 25, 20], [20, 30, 10]
|
||||
];
|
||||
const stackedBarData = [
|
||||
[10, 20, 30],
|
||||
[15, 25, 35]
|
||||
];
|
||||
const annotatedLineData = [10, 20, 15, 25, 30];
|
||||
const annotations = [
|
||||
[100, 200, 'A'],
|
||||
[200, 300, 'B']
|
||||
];
|
||||
const gaugeValue = 75;
|
||||
|
||||
drawTimelineChart(timelineCtx, timelineData, timelineLabels);
|
||||
drawLineChart(lineCtx, lineData);
|
||||
drawBarChart(barCtx, barData);
|
||||
drawPieChart(pieCtx, pieData);
|
||||
drawAreaChart(areaCtx, areaData);
|
||||
drawHeatmapChart(heatmapCtx, heatmapData);
|
||||
drawDonutChart(donutCtx, donutData);
|
||||
drawScatterChart(scatterCtx, scatterData);
|
||||
drawBubbleChart(bubbleCtx, bubbleData);
|
||||
drawStackedBarChart(stackedBarCtx, stackedBarData);
|
||||
drawAnnotatedLineChart(annotatedLineCtx, annotatedLineData, annotations);
|
||||
drawGaugeChart(gaugeCtx, gaugeValue);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,153 @@
|
|||
const construtor_primario = document.getElementById('entrada_1');
|
||||
|
||||
construtor_primario.innerHTML =
|
||||
'<section class="menu">'
|
||||
+
|
||||
'<header class="cabecario_1">'
|
||||
+
|
||||
'<div class="Bloco_subcab1_1"><img src="../Acessts/Imagens/iT_Guys/logo_flat.png" alt="" class="icon_subcab1_1"></div>'
|
||||
+
|
||||
'<div class="Bloco_subcab1_2"><a href="https://dev.itguys.com.br/"><button>Logout</button></a></div>'
|
||||
+
|
||||
'</header>'
|
||||
+
|
||||
'</section>'
|
||||
+
|
||||
'<main class="matriz">'
|
||||
+
|
||||
'<section class="capitulo_1">'
|
||||
+
|
||||
'<div class="Corpo_1">'
|
||||
+
|
||||
'<div class="Colunas_1">'
|
||||
+
|
||||
'<div class="seguimentos_1"><button><img id="menu" src="../Acessts/Imagens/Iconis/seta-direita.png" alt=""></button></div>'
|
||||
+
|
||||
'<div class="seguimentos_2">'
|
||||
+
|
||||
'<div class="user_1">'
|
||||
+
|
||||
'<img src="../Acessts/Imagens/Iconis/profile-user.png" alt="" class="icon_subcab2_2">'
|
||||
+
|
||||
'<img src="../Acessts/Imagens/Iconis/profile-user.png" alt="" class="icon_subcab2_1">'
|
||||
+
|
||||
'</div>'
|
||||
+
|
||||
'<div class="user_2"><p> <div id="User">Usuario</div><div id="Empresa">Empresa</div></p></div>'
|
||||
+
|
||||
'</div>'
|
||||
+
|
||||
'</div>'
|
||||
+
|
||||
'<div class="Colunas_2">'
|
||||
+
|
||||
'<div class="seguimentos_1"></div>'
|
||||
+
|
||||
'<div class="seguimentos_2"><div class="sessao_1"><a href="https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/Ambiente_Usuario_copy.html" target="frame">'
|
||||
+
|
||||
'<div class="item_menu"><img src="../Acessts/Imagens/Iconis/home.png" alt=""><p>Home</p></div></a>'
|
||||
+
|
||||
'<section class="forg">'
|
||||
+
|
||||
'<div class="item_menu" id="testes"><img src="../Acessts/Imagens/Iconis/monitor.png" alt=""><p>Monitoramento</p></div>'
|
||||
+
|
||||
'<div id="sub_entrada"></div>'
|
||||
+
|
||||
'</section>'
|
||||
+
|
||||
'<a href="http://10.10.253.111/"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/technical-support.png" alt=""><p>Servicedesk</p></div></a>'
|
||||
+
|
||||
'</div>'
|
||||
+
|
||||
'<div class="sessao_2">'
|
||||
+
|
||||
'<a href="https://api.whatsapp.com/send?phone=5521966344698"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/central-de-atendimento.png" alt=""><p>Suporte</p></div></a>'
|
||||
+
|
||||
'<a href="./Tela_config/Config_Ambiente_usuario.html" target="frame"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/engrenagem - Copia.png" alt=""><p>Configuracões</p></div></a>'
|
||||
+
|
||||
' </div>'
|
||||
+
|
||||
'</section>'
|
||||
+
|
||||
'<section class="capitulo_2">'
|
||||
+
|
||||
'<div class="Corpo_2">'
|
||||
+
|
||||
'<div class="Colunas_1"><iframe id = "test1" name = "frame" class="transmissão" src = "http://grafana.itguys.com.br:3000/dashboard/snapshot/6sVz7BNJVCY4sZD0m9P40k7nFEc5MqLI?kiosk"frameborder = "0" ></iframe ></div>'
|
||||
+
|
||||
'</div>'
|
||||
+
|
||||
'</main>';
|
||||
|
||||
|
||||
const construtor_Secundarios_Monitoramento = document.getElementById('sub_entrada');
|
||||
|
||||
construtor_Secundarios_Monitoramento.innerHTML =
|
||||
'<div class="sub_menu" id="sub_menu">'
|
||||
+
|
||||
'<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="./Tela_Monitoramento/Padrão/Monitoramento_GAU_Freguesia.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Gau Freguesia</p></div></a>'
|
||||
+
|
||||
'<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=""><p>Gau Infantil</p></div></a>'
|
||||
+
|
||||
'<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="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Itaguaí.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Unidade Itaguaí</p></div></a>'
|
||||
+
|
||||
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Recreio.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Unidade Recreio</p></div></a>'
|
||||
+
|
||||
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Cliente_VPN.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/vpn.png" alt=""><p>Client Vpn</p></div></a>'
|
||||
+
|
||||
'<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=""><p>Ferreira Real</p></div></a>'
|
||||
+
|
||||
'<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="./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="./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></div></a>'
|
||||
+
|
||||
'</div>';
|
||||
|
||||
|
||||
|
||||
|
||||
document.getElementById('testes').addEventListener('mouseenter', function () {
|
||||
document.getElementById('sub_menu').classList.add('show');
|
||||
});
|
||||
|
||||
document.getElementById('testes').addEventListener('mouseleave', function () {
|
||||
document.getElementById('sub_menu').classList.remove('show');
|
||||
});
|
||||
|
||||
document.getElementById('sub_menu').addEventListener('mouseenter', function () {
|
||||
this.classList.add('show');
|
||||
});
|
||||
|
||||
document.getElementById('sub_menu').addEventListener('mouseleave', function () {
|
||||
this.classList.remove('show');
|
||||
});
|
||||
|
||||
|
||||
var botao = document.querySelector('#menu')
|
||||
var cabecario = document.querySelector('.cabecario_1')
|
||||
var tela = document.querySelector('.transmissão')
|
||||
var menu = document.querySelector('.capitulo_1')
|
||||
var temas = document.querySelectorAll('.item_menu')
|
||||
|
||||
|
||||
botao.addEventListener('click', function () {
|
||||
menu.classList.toggle('expansao');
|
||||
cabecario.classList.toggle('expansao');
|
||||
tela.classList.toggle('expansao');
|
||||
|
||||
});
|
||||
|
||||
function selectLink() {
|
||||
temas.forEach((item) =>
|
||||
item.classList.remove('ativo')
|
||||
)
|
||||
this.classList.add('ativo')
|
||||
}
|
||||
temas.forEach((item) =>
|
||||
item.addEventListener('click', selectLink))
|
||||
Loading…
Reference in New Issue