Atualização 4 - Refinando o construtor

Css/global/Estrutura.css

@@ -1 +1,3 @@
-/*Usar para construir toda a estrutura padrão do ambiente */
+@import './Menu_Lateral.css';
+@import './Telas.css';
+@import './import.css';

Css/global/Menu_Lateral.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 {
@@ -373,32 +416,4 @@ div.ativo {
     justify-content: space-between;
     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;
-
 }

Css/global/Telas.css

@@ -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);
+    background-color: var(--Matriz);
-    color: var(--variante_font_1);
+    color: var(--Cor_Segundaria_5_1);
     transition: 1s ease;
 }
 
 .Bloco_subcab1_2 button:hover {
 
-    background-color: var(--fundo_3);
+    border-left: 0.2vw solid var(--Matriz);
-    color: var(--variante_font_3);
+    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;
 }
 

Css/global/import.css

@@ -50,27 +50,4 @@ body {
     --Cor_Segundaria_4_2: #105018;
     --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;
-
 }

Css/page/Telas_acao/erro_404.css

@@ -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;
 }
 

html/Ambiente_Usuario copy.html

@@ -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/global/Estrutura.css">
-    <link rel="stylesheet" href="../Css/Ambiente_Usuario/Blocos.css">
-    <link rel="stylesheet" href="../Css/Ambiente_Usuario/erro_404.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>

html/Ambiente_Usuario.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">

html/Teste_Grafico.html

@@ -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;
-        }
+            display: block;
-
+            max-width: 100%;
-        .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>
+    <h1>Exemplos de Gráficos com Canvas e JavaScript</h1>
-    <div class="chart-container">
+
-        <canvas id="lineChart" width="400" height="300"></canvas>
+    <!-- Gráficos -->
-        <canvas id="barChart" width="400" height="300"></canvas>
+    <h2>Gráfico de Linha do Tempo</h2>
-        <canvas id="pieChart" width="300" height="300"></canvas>
+    <canvas id="timelineChart" width="600" height="400"></canvas>
-        <canvas id="areaChart" width="400" height="300"></canvas>
+
-        <canvas id="heatmap" width="400" height="300"></canvas>
+    <h2>Gráfico de Linhas</h2>
-        <canvas id="radarChart" width="400" height="300"></canvas>
+    <canvas id="lineChart" width="600" height="400"></canvas>
-        <canvas id="doughnutChart" width="300" height="300"></canvas>
+
-        <canvas id="scatterChart" width="400" height="300"></canvas>
+    <h2>Gráfico de Barras</h2>
-        <canvas id="bubbleChart" width="400" height="300"></canvas>
+    <canvas id="barChart" width="600" height="400"></canvas>
-        <canvas id="polarChart" width="400" height="300"></canvas>
+
-        <canvas id="stackedBarChart" width="400" height="300"></canvas>
+    <h2>Gráfico de Pizza</h2>
-        <canvas id="lineChartWithAnnotation" width="400" height="300"></canvas>
+    <canvas id="pieChart" width="400" height="400"></canvas>
-    </div>
+
+    <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
+        // Função para desenhar o gráfico de linha do tempo
-        const data = [10, 20, 15, 25, 30, 20, 40];
+        function drawTimelineChart(ctx, data, labels) {
-        const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
+            const padding = 40;
-        const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#FF9F40', '#C9CBCF', '#FF6F61'];
+            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
+            // Clear canvas
-        function drawLineChart() {
+            ctx.clearRect(0, 0, width, height);
-            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) {
+            // Draw axes
-                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) => {
+            ctx.moveTo(padding, padding);
-                const x = padding + (index / (data.length - 1)) * plotWidth;
+            ctx.lineTo(padding, height - padding);
-                const y = valueToY(value);
+            ctx.lineTo(width - padding, height - padding);
-                index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
-            });
             ctx.stroke();
-            ctx.fillStyle = '#007bff';
+
-            data.forEach((value, index) => {
+            // Draw data points and lines
-                const x = padding + (index / (data.length - 1)) * plotWidth;
+            ctx.beginPath();
-                const y = valueToY(value);
+            ctx.moveTo(padding, height - padding - ((data[0] - minData) / (maxData - minData) * (height - 2 * padding)));
-                ctx.beginPath();
+            data.forEach((point, i) => {
-                ctx.arc(x, y, 5, 0, 2 * Math.PI);
+                const x = padding + i * (width - 2 * padding) / (data.length - 1);
-                ctx.fill();
+                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.strokeStyle = lineColor;
-            ctx.textBaseline = 'top';
+            ctx.stroke();
-            labels.forEach((label, index) => {
+            ctx.fillStyle = lineColor;
-                const x = padding + (index / (data.length - 1)) * plotWidth;
+            ctx.fill();
-                ctx.fillText(label, x, canvasHeight - padding + 5);
+
+            // 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
+        // Função para desenhar o gráfico de linhas
-        function drawBarChart() {
+        function drawLineChart(ctx, data) {
-            const canvas = document.getElementById('barChart');
+            const padding = 40;
-            const ctx = canvas.getContext('2d');
+            const width = ctx.canvas.width;
-            const data = [12, 19, 3, 5, 2, 3];
+            const height = ctx.canvas.height;
-            const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
+            const maxData = Math.max(...data);
-            const barWidth = 50;
+            const minData = Math.min(...data);
-            const barSpacing = 70;
+            const lineColor = 'blue';
-            const maxBarHeight = 300;
 
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Clear canvas
-            data.forEach((value, index) => {
+            ctx.clearRect(0, 0, width, height);
-                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';
+            // Draw axes
-                ctx.textAlign = 'center';
+            ctx.beginPath();
-                ctx.textBaseline = 'bottom';
+            ctx.moveTo(padding, padding);
-                ctx.fillText(labels[index], x + barWidth / 2, canvas.height - 5);
+            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
+        // Função para desenhar o gráfico de barras
-        function drawPieChart() {
+        function drawBarChart(ctx, data) {
-            const canvas = document.getElementById('pieChart');
+            const padding = 40;
-            const ctx = canvas.getContext('2d');
+            const width = ctx.canvas.width;
-            const data = [10, 20, 30, 40];
+            const height = ctx.canvas.height;
-            const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'];
+            const barWidth = (width - 2 * padding) / data.length - 10;
+            const maxData = Math.max(...data);
 
-            function drawSlice(startAngle, sliceAngle, color) {
+            // Clear canvas
-                ctx.beginPath();
+            ctx.clearRect(0, 0, width, height);
-                ctx.moveTo(canvas.width / 2, canvas.height / 2);
+
-                ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, startAngle, startAngle + sliceAngle);
+            // Draw bars
-                ctx.closePath();
+            data.forEach((point, i) => {
-                ctx.fillStyle = color;
+                const x = padding + i * ((width - 2 * padding) / data.length);
-                ctx.fill();
+                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]);
+                const endAngle = startAngle + sliceAngle;
-                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
+        // Função para desenhar o gráfico de área
-        function drawAreaChart() {
+        function drawAreaChart(ctx, data) {
-            const canvas = document.getElementById('areaChart');
+            const padding = 40;
-            const ctx = canvas.getContext('2d');
+            const width = ctx.canvas.width;
-            const data = [10, 20, 15, 25, 30, 20, 40];
+            const height = ctx.canvas.height;
-            const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
+            const maxData = Math.max(...data);
-            const canvasWidth = canvas.width;
+            const minData = Math.min(...data);
-            const canvasHeight = canvas.height;
+            const lineColor = 'blue';
-            const padding = 50;
+            const fillColor = 'rgba(0, 0, 255, 0.2)';
-            const plotWidth = canvasWidth - 2 * padding;
-            const plotHeight = canvasHeight - 2 * padding;
-            const maxDataValue = Math.max(...data);
-            const minDataValue = Math.min(...data);
 
-            function valueToY(value) {
+            // Clear canvas
-                return canvasHeight - padding - ((value - minDataValue) / (maxDataValue - minDataValue)) * plotHeight;
+            ctx.clearRect(0, 0, width, height);
-            }
 
-            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+            // Draw axes
-            ctx.strokeStyle = '#007bff';
-            ctx.lineWidth = 2;
             ctx.beginPath();
-            data.forEach((value, index) => {
+            ctx.moveTo(padding, padding);
-                const x = padding + (index / (data.length - 1)) * plotWidth;
+            ctx.lineTo(padding, height - padding);
-                const y = valueToY(value);
+            ctx.lineTo(width - padding, height - padding);
-                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';
+            // Draw area
-            data.forEach((value, index) => {
+            ctx.beginPath();
-                const x = padding + (index / (data.length - 1)) * plotWidth;
+            ctx.moveTo(padding, height - padding);
-                const y = valueToY(value);
+            data.forEach((point, i) => {
-                ctx.beginPath();
+                const x = padding + i * (width - 2 * padding) / (data.length - 1);
-                ctx.arc(x, y, 5, 0, 2 * Math.PI);
+                const y = height - padding - ((point - minData) / (maxData - minData) * (height - 2 * padding));
-                ctx.fill();
+                ctx.lineTo(x, y);
-            });
-
-            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.lineTo(width - padding, height - padding);
+            ctx.closePath();
+            ctx.fillStyle = fillColor;
+            ctx.fill();
+            ctx.strokeStyle = lineColor;
+            ctx.stroke();
         }
-        drawAreaChart();
 
-        // Gráfico de Calor
+        // Função para desenhar o gráfico de calor
-        function drawHeatmap() {
+        function drawHeatmapChart(ctx, data) {
-            const canvas = document.getElementById('heatmap');
+            const width = ctx.canvas.width;
-            const ctx = canvas.getContext('2d');
+            const height = ctx.canvas.height;
-            const data = [
+            const cellSize = 30;
-                [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) {
+            // Clear canvas
-                const index = Math.min(Math.floor(value / 2), colors.length - 1);
+            ctx.clearRect(0, 0, width, height);
-                return colors[index];
-            }
 
+            // 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
+        // Função para desenhar o gráfico Donut
-        function drawRadarChart() {
+        function drawDonutChart(ctx, data) {
-            const canvas = document.getElementById('radarChart');
+            const width = ctx.canvas.width;
-            const ctx = canvas.getContext('2d');
+            const height = ctx.canvas.height;
-            const data = [5, 6, 7, 8, 9];
+            const radius = Math.min(width, height) / 2 - 20;
-            const labels = ['A', 'B', 'C', 'D', 'E'];
+            const innerRadius = radius / 2;
-            const numOfPoints = data.length;
+            const centerX = width / 2;
-            const radius = Math.min(canvas.width, canvas.height) / 2 - 20;
+            const centerY = height / 2;
-            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) => {
+
+            // Clear canvas
+            ctx.clearRect(0, 0, width, height);
+
+            data.forEach((value, i) => {
                 const sliceAngle = (value / total) * 2 * Math.PI;
-                drawSlice(startAngle, sliceAngle, colors[index]);
+                const endAngle = startAngle + sliceAngle;
-                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.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
+        // Função para desenhar o gráfico de dispersão
-        function drawBubbleChart() {
+        function drawScatterChart(ctx, data) {
-            const canvas = document.getElementById('bubbleChart');
+            const padding = 40;
-            const ctx = canvas.getContext('2d');
+            const width = ctx.canvas.width;
-            const data = [
+            const height = ctx.canvas.height;
-                { x: 10, y: 20, radius: 10 },
+            const maxX = Math.max(...data.map(p => p[0]));
-                { x: 20, y: 30, radius: 15 },
+            const minX = Math.min(...data.map(p => p[0]));
-                { x: 30, y: 40, radius: 20 }
+            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);
+            // Clear canvas
-            ctx.fillStyle = '#FF6F61';
+            ctx.clearRect(0, 0, width, height);
-            data.forEach(({ x, y, radius }) => {
-                ctx.beginPath();
-                ctx.arc(x * 10, y * 10, radius, 0, 2 * Math.PI);
-                ctx.fill();
-            });
-        }
-        drawBubbleChart();
 
-        // Gráfico Polar
+            // Draw axes
-        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) => {
+            ctx.moveTo(padding, padding);
-                const x = radius * (value / 30) * Math.cos(index * angle);
+            ctx.lineTo(padding, height - padding);
-                const y = radius * (value / 30) * Math.sin(index * angle);
+            ctx.lineTo(width - padding, height - padding);
-                index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
-            });
-            ctx.closePath();
-            ctx.strokeStyle = '#007bff';
             ctx.stroke();
 
             // Draw points
-            ctx.fillStyle = '#007bff';
+            data.forEach(([x, y]) => {
-            data.forEach((value, index) => {
+                const px = padding + (x - minX) / (maxX - minX) * (width - 2 * padding);
-                const x = radius * (value / 30) * Math.cos(index * angle);
+                const py = height - padding - (y - minY) / (maxY - minY) * (height - 2 * padding);
-                const y = radius * (value / 30) * Math.sin(index * angle);
                 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
+        // Função para desenhar o gráfico de bolhas
-        function drawStackedBarChart() {
+        function drawBubbleChart(ctx, data) {
-            const canvas = document.getElementById('stackedBarChart');
+            const padding = 40;
-            const ctx = canvas.getContext('2d');
+            const width = ctx.canvas.width;
-            const data = [
+            const height = ctx.canvas.height;
-                [10, 20, 30],
+            const maxX = Math.max(...data.map(p => p[0]));
-                [20, 30, 40],
+            const minX = Math.min(...data.map(p => p[0]));
-                [30, 40, 50]
+            const maxY = Math.max(...data.map(p => p[1]));
-            ];
+            const minY = Math.min(...data.map(p => p[1]));
-            const colors = ['#FF6384', '#36A2EB', '#FFCE56'];
+            const maxSize = Math.max(...data.map(p => p[2]));
-            const barWidth = 50;
-            const barSpacing = 70;
 
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Clear canvas
-            data.forEach((stack, stackIndex) => {
+            ctx.clearRect(0, 0, width, height);
-                stack.forEach((value, index) => {
+
-                    const x = stackIndex * barSpacing + 50;
+            // Draw axes
-                    const y = canvas.height - (value / 100) * canvas.height;
+            ctx.beginPath();
-                    const height = (value / 100) * canvas.height;
+            ctx.moveTo(padding, padding);
-                    ctx.fillStyle = colors[index];
+            ctx.lineTo(padding, height - padding);
-                    ctx.fillRect(x, y, barWidth, height);
+            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
+        // Função para desenhar o gráfico de barras empilhadas
-        function drawLineChartWithAnnotation() {
+        function drawStackedBarChart(ctx, data) {
-            const canvas = document.getElementById('lineChartWithAnnotation');
+            const padding = 40;
-            const ctx = canvas.getContext('2d');
+            const width = ctx.canvas.width;
-            const data = [10, 20, 15, 25, 30, 20, 40];
+            const height = ctx.canvas.height;
-            const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
+            const barWidth = (width - 2 * padding) / data[0].length - 10;
-            const canvasWidth = canvas.width;
+            const maxData = Math.max(...data.flat());
-            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) {
+            // Clear canvas
-                return canvasHeight - padding - ((value - minDataValue) / (maxDataValue - minDataValue)) * plotHeight;
+            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);
+            // Draw axes
-            ctx.strokeStyle = '#007bff';
-            ctx.lineWidth = 2;
             ctx.beginPath();
-            data.forEach((value, index) => {
+            ctx.moveTo(padding, padding);
-                const x = padding + (index / (data.length - 1)) * plotWidth;
+            ctx.lineTo(padding, height - padding);
-                const y = valueToY(value);
+            ctx.lineTo(width - padding, height - padding);
-                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);
+        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>
 

html/padrao.js

@@ -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))