diff --git a/public/assets/headerName.png b/public/assets/headerName.png new file mode 100644 index 0000000..8a36e4b Binary files /dev/null and b/public/assets/headerName.png differ diff --git a/public/assets/sidebar/aboutUs.svg b/public/assets/sidebar/aboutUs.svg new file mode 100644 index 0000000..a184c4a --- /dev/null +++ b/public/assets/sidebar/aboutUs.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/banner/BannerView.ts b/src/components/banner/BannerView.ts index 0ddd138..a9a5a3e 100644 --- a/src/components/banner/BannerView.ts +++ b/src/components/banner/BannerView.ts @@ -9,6 +9,8 @@ export const BannerView = styled.div` width: 100%; height: 20%; + margin-bottom: 30px; + .gradient { position: absolute; width: 100%; diff --git a/src/components/buttons/gradientButton/GradientButton.tsx b/src/components/buttons/gradientButton/GradientButton.tsx index fb67258..9e8306f 100644 --- a/src/components/buttons/gradientButton/GradientButton.tsx +++ b/src/components/buttons/gradientButton/GradientButton.tsx @@ -11,12 +11,18 @@ interface GradientButtonInterface { purple?: undefined | null | boolean, green?: undefined | null | boolean, link?: any, + onClick?: () => void } -export default function GradientButton({ title, description, orange, purple, green, link }: GradientButtonInterface) { +export default function GradientButton({ title, description, orange, purple, green, link, onClick }: GradientButtonInterface) { const router = useRouter() + + function handleClick() { + onClick() + } + return ( - link? router.push('/chartTelemetry') : null} > + link? router.push('/chartTelemetry') : handleClick()} >

{title}

{description}

 diff --git a/src/components/graph/Chart.tsx b/src/components/graph/Chart.tsx index bb79ade..f532103 100644 --- a/src/components/graph/Chart.tsx +++ b/src/components/graph/Chart.tsx @@ -43,6 +43,30 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1, const labels = label; const empty = [] + const options: any = { + responsive: true, + plugins: { + datalabels: { + display: true, + color: barLabel? 'black' : "rgba(255, 255, 255, 0)", + formatter: Math.round, + anchor: "end", + offset: -20, + align: "start", + font: { + size: 16 + } + }, + legend: { + position: 'bottom' as const, + }, + title: { + display: true, + text: '', + }, + }, + }; + const data = { labels, datasets: [ @@ -60,28 +84,6 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1, ], } - const options: any = { - responsive: true, - plugins: { - datalabels: { - display: true, - color: barLabel? 'black' : "rgba(255, 255, 255, 0)", - formatter: Math.round, - anchor: "end", - offset: -20, - align: "start" - }, - legend: { - position: 'bottom' as const, - }, - title: { - display: true, - text: '', - }, - }, - }; - - return ( {/* diff --git a/src/components/graph/LineBarChart.tsx b/src/components/graph/LineBarChart.tsx index 6d69b18..60285ea 100644 --- a/src/components/graph/LineBarChart.tsx +++ b/src/components/graph/LineBarChart.tsx @@ -13,7 +13,7 @@ import { Chart } from 'react-chartjs-2'; import faker from 'faker'; import { ChartView } from './ChartView'; import ChartTitle from './ChartTitle'; -import { draw } from 'patternomaly' +import pattern from 'patternomaly' ChartJS.register( LinearScale, @@ -87,10 +87,14 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, datalabels: { display: true, color: barLabel? 'black' : "rgba(255, 255, 255, 0)", + // backgroundColor: '#255488', formatter: Math.round, anchor: "end", offset: -20, - align: "start" + align: "start", + font: { + size: 16 + } }, legend: { position: 'bottom' as const, @@ -110,6 +114,9 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, label: dataset1? dataset1 : 'Dataset 1', borderColor: red? '#f00' : '#0c9200', + datalabels: { + backgroundColor: 'white' + }, borderWidth: 2, fill: false, data: data1.map(value => value), @@ -118,7 +125,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, type: 'bar' as const, label: dataset2? dataset2 : 'Dataset 2', backgroundColor: (value, ctx) => { - return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#C2D5FB' : '#C2D5FB' : '#C2D5FB' + return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB' }, data: data3.map(value => value), }, @@ -127,7 +134,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, label: dataset3? dataset3 : 'Dataset 2', // backgroundColor: '#255488', backgroundColor: (value, ctx) => { - return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#255488' : '#255488' : '#255488' + return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#255488' : pattern.draw('diagonal', '#255488') : '#255488' }, data: data2.map(value => value), }, diff --git a/src/components/graph/LineChart.tsx b/src/components/graph/LineChart.tsx index c4acd13..15376c2 100644 --- a/src/components/graph/LineChart.tsx +++ b/src/components/graph/LineChart.tsx @@ -53,7 +53,10 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4, formatter: Math.round, anchor: "end", offset: -20, - align: "start" + align: "start", + font: { + size: 16 + } }, legend: { position: 'bottom' as const, diff --git a/src/components/graph/SingleBar.tsx b/src/components/graph/SingleBar.tsx index fff57b0..7ac15a1 100644 --- a/src/components/graph/SingleBar.tsx +++ b/src/components/graph/SingleBar.tsx @@ -12,7 +12,7 @@ import { Bar } from 'react-chartjs-2'; import ChartDataLabels from 'chartjs-plugin-datalabels'; import { ChartView } from './ChartView'; import ChartTitle from './ChartTitle'; -import { draw } from 'patternomaly' +import { draw, generate } from 'patternomaly' ChartJS.register( CategoryScale, @@ -32,16 +32,20 @@ interface SingleBarInterface{ dataset: string, barLabel?: boolean | undefined, year?: boolean | undefined, - day?: boolean | undefined, + month?: boolean | undefined, dataset1?: string, } -export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1, barLabel, year, day }: SingleBarInterface) { - +export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1, barLabel, year, month }: SingleBarInterface) { const currentTime = new Date(); const options: object = { responsive: true, + series: { + downsample: { + threshold: 1000 + } + }, plugins: { datalabels: { formatter: (value, ctx) => { @@ -50,15 +54,21 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1 dataArr.map(data => { sum += data; }); - const percentage = (value*100 / sum).toFixed(2)+"%"; - const result = ` ${value}\n ${percentage}` - return result; + const percentage = (value*100 / sum).toFixed(0)+"%"; + const result = `${value}\n ${percentage}` + + console.log(value) + + return value==null? null : result }, display: true, color: barLabel? 'black' : "rgba(255, 255, 255, 0)", anchor: "end", - offset: -35, - align: "start" + offset: -40, + align: "start", + font: { + size: 16 + } }, legend: { position: 'bottom' as const, @@ -77,22 +87,27 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1 datasets: [ { label: dataset, - data: dataProps.map(value => value), + data: dataProps.map((value, index) => { + return year? label[index]<=currentTime.getFullYear().toString()? value : null : month? label.indexOf(label[index])>currentTime.getMonth()? null : value : null + }), backgroundColor: (value, ctx) => { - return year? label[value.dataIndex]<=currentTime.getFullYear().toString()? '#255488' : '#C2D5FB' : day? parseInt(label[value.dataIndex])<=currentTime.getDay()? '#255488' : '#C2D5FB' : null + return year? label[value.dataIndex]<=currentTime.getFullYear().toString()? '#255488' : 'transparent' : month? label.indexOf(label[value.dataIndex])<=currentTime.getMonth()? '#255488' : 'transparent' : null// parseInt(label[value.dataIndex])<=currentTime.getMonth()? '#255488' : draw('diagonal', '#C2D5FB') : null }, }, { label: dataset1, - backgroundColor: '#C2D5FB' + data: dataProps.map((value, index) => { + return year? label[index]>=currentTime.getFullYear().toString()? value : null : month? label.indexOf(label[index])<=currentTime.getMonth()? null : value : null + }), + backgroundColor: typeof window !== 'undefined'? draw('diagonal', '#C2D5FB') : null } ], - }; + } + return ( - {/* */} ) } diff --git a/src/components/mapCard/MapCard.tsx b/src/components/mapCard/MapCard.tsx index bb89515..10085d5 100644 --- a/src/components/mapCard/MapCard.tsx +++ b/src/components/mapCard/MapCard.tsx @@ -7,9 +7,10 @@ interface MapCardInterface { subtitle: string, statistic?: string, imgSource: string, + date?: string } -export default function MapCard({ title, subtitle, statistic, imgSource }: MapCardInterface) { +export default function MapCard({ title, subtitle, statistic, imgSource, date }: MapCardInterface) { const route = title==='R$/MWh'? '/consumption': `pld/${title.slice(0,2).toLocaleLowerCase()}-${title.slice(3,5).toLocaleLowerCase()}` return ( @@ -17,7 +18,12 @@ export default function MapCard({ title, subtitle, statistic, imgSource }: MapCa

{title}

- {subtitle} + {subtitle} + { + date? + {date} : + null + }
{ statistic? diff --git a/src/components/mapCard/MapCardView.ts b/src/components/mapCard/MapCardView.ts index 65c311a..77319d8 100644 --- a/src/components/mapCard/MapCardView.ts +++ b/src/components/mapCard/MapCardView.ts @@ -16,7 +16,7 @@ export const MapCardView = styled.figure` h4 { margin-left: ${props => props.statistic? '0' : '10px'}; } - span { + .footer { margin-left: ${props => props.statistic? '0' : '10px'}; margin-bottom: ${props => props.statistic? '25px' : '0px'}; margin-top: ${props => props.statistic? '0px' : '30px'}; @@ -28,6 +28,7 @@ export const MapCardView = styled.figure` } span { + margin-left: ${props => props.statistic? '0' : '10px'}; } div { diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index b073e5a..0d4d8f2 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -38,8 +38,8 @@ export default function Sidebar() {
  • {'Notícias >'}
  • {'Info Setorial >'}
    • {/*
  • {'Consumo'}
    • */} -
  • {'Notificações >'}
    • -
  • {'Sobre Nós >'}
    • +
  • {'Notificações >'}

    25

    • +
  • {'Sobre Nós >'}
  • {'FAQ >'}
    • diff --git a/src/components/sidebar/SidebarView.ts b/src/components/sidebar/SidebarView.ts index 1719457..5bc5aba 100644 --- a/src/components/sidebar/SidebarView.ts +++ b/src/components/sidebar/SidebarView.ts @@ -33,6 +33,20 @@ export const SidebarView = styled.nav` color: #254F7F; } + .notification { + display: flex; + align-items: center; + justify-content: center; + + width: 38px; + height: 32px; + + border-radius: 8px; + + background-color: #254F7F; + color: white; + } + ul { display: flex; justify-content: center; diff --git a/src/pages/accumulatedSavings.tsx b/src/pages/accumulatedSavings.tsx index 9c1e95e..52b0af1 100644 --- a/src/pages/accumulatedSavings.tsx +++ b/src/pages/accumulatedSavings.tsx @@ -6,6 +6,7 @@ import { SingleBar } from '../components/graph/SingleBar' import Header from '../components/header/Header' import PageTitle from '../components/pageTitle/PageTitle' import { EconomiaAcumulada } from '../services/economiaAcumulada' +import { dataEconomiaBruta } from '../services/economiaBruta' import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView' @@ -18,7 +19,7 @@ export default function AccumulatedSavings() {
    - +
    ) diff --git a/src/pages/chartTelemetry.tsx b/src/pages/chartTelemetry.tsx index 9df31f2..51111d4 100644 --- a/src/pages/chartTelemetry.tsx +++ b/src/pages/chartTelemetry.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState } from 'react' import { SingleBar } from '../components/graph/SingleBar' import { ChatTelemetryView } from '../styles/layouts/ChatTelemetry/ChatTelemetryView' import { useRouter } from 'next/router' @@ -12,7 +12,36 @@ import Header from '../components/header/Header' import PageTitle from '../components/pageTitle/PageTitle' import Head from 'next/head' +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; +import Modal from '@mui/material/Modal'; + +const style = { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + position: 'absolute' as const, + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '80%', + bgcolor: 'white', + p: 5, +}; + export default function chartTelemetry() { + const [openFatorPotencia, setOpenFatorPotencia] = useState(false); + const handleCloseFatorPotencia = () => setOpenFatorPotencia(false); + + const [openConsumoDiscretizado1, setOpenConsumoDiscretizado1] = useState(false); + const handleCloseConsumoDiscretizado1 = () => setOpenConsumoDiscretizado1(false); + + const [openConsumoDiscretizado2, setOpenConsumoDiscretizado2] = useState(false); + const handleCloseConsumoDiscretizado2 = () => setOpenConsumoDiscretizado2(false); + + const [openDemandaContratada, setOpenDemandaContratada] = useState(false); + const handleCloseDemandaContratada = () => setOpenDemandaContratada(false); return ( @@ -21,11 +50,62 @@ export default function chartTelemetry() {
    -
    - - - - +
    +
    setOpenFatorPotencia(true)}> + +
    + + + + + + +
    setOpenConsumoDiscretizado1(true)}> + +
    + + + + + + +
    setOpenConsumoDiscretizado2(true)}> + +
    + + + + + + +
    setOpenDemandaContratada(true)}> + +
    + + + + +
    ) diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 783e0d1..999cacb 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -28,9 +28,9 @@ export default function Dashboard() {
    - +
    - + @@ -42,8 +42,8 @@ export default function Dashboard() { - - + + @@ -51,7 +51,6 @@ export default function Dashboard() { -
    diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx index 407a1cc..5cf2ccc 100644 --- a/src/pages/pld/index.tsx +++ b/src/pages/pld/index.tsx @@ -186,10 +186,10 @@ export default function region() {
    setPage('perMouth')}> -

    Valores Diarios: R$100,00

    +

    Valores Diarios

    setPage('perDate')}> -

    Valores Horários: R$100,00

    +

    Valores Horários

    diff --git a/src/pages/telemetria.tsx b/src/pages/telemetria.tsx index b1898ae..eb351f6 100644 --- a/src/pages/telemetria.tsx +++ b/src/pages/telemetria.tsx @@ -6,21 +6,29 @@ import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaV import GradientButton from '../components/buttons/gradientButton/GradientButton' import Header from '../components/header/Header'; import MenuItem from '@mui/material/MenuItem'; +import InputLabel from '@mui/material/InputLabel'; import FormControl from '@mui/material/FormControl'; import Select, { SelectChangeEvent } from '@mui/material/Select'; import Link from 'next/link'; import Head from 'next/head'; +import { start } from 'nprogress'; +import LineChart from '../components/graph/LineChart'; +import { FatorPotencia } from '../services/fatorPotencia'; +import RenderIf from '../utils/renderIf'; export default function Telemetria() { - const router = useRouter() + const [unity, setUnity] = React.useState(''); + const [startDate, setStartDate] = React.useState(''); + const [endDate, setEndDate] = React.useState(''); + const [discretization, setDiscretization] = React.useState(''); - const [age, setAge] = React.useState(''); + const [showChart, setShowChart] = React.useState(false); const handleChange = (event: SelectChangeEvent) => { - setAge(event.target.value); + // setAge(event.target.value); }; return( @@ -30,95 +38,122 @@ export default function Telemetria() {
    + SCDE da Câmara de Comercialização de Energia Elétrica - CCEE, + sendo que as quantidades aqui informadas são de responsabilidade do agente de medição + - Distribuidora.' imgSource='/assets/graphical.png' /> +
    +
    +

    Unidade

    + + Unidade + + +
    - -

    Unidade

    - setStartDate(value.target.value)} + fullWidth + > + + None + + 07/09/2021 + Filial 3 + Twenty + Thirty + +     +
    - > - - Filial 3 - - Filial 3 - Twenty - Thirty - +
    +

    Data Final

    + + Data Final + + +
    - +
    +

    Discretização

    + + Discretização + + +
    + - -

    Data Inicial

    - -     - - -

    Data Final

    - -     - - -

    Discretização

    - -     - - - - - - -

    - - Fonte: Dados coletados do Sistema de Coleta de Dados - de Energia - SCDE da Câmara de Comercialização
    - Energia Elétrica – CCEE, sendo que as quantidades aqui - informadas são de responsabilidade
    do agente de - medição - Distribuidora. -     -

    + + + + + + + setShowChart(!showChart)} green /> + +

    + + Fonte: Dados coletados do Sistema de Coleta de Dados + de Energia - SCDE da Câmara de Comercialização
    + Energia Elétrica – CCEE, sendo que as quantidades aqui + informadas são de responsabilidade
    do agente de + medição - Distribuidora. +     +

    ) } diff --git a/src/services/DadosTabelaResumoOperacao.js b/src/services/DadosTabelaResumoOperacao.js index f2955ca..048904a 100644 --- a/src/services/DadosTabelaResumoOperacao.js +++ b/src/services/DadosTabelaResumoOperacao.js @@ -1,16 +1,10 @@ -{} - unidades: { - unidade1: { name: 'Unidade-2555', operacao: 'Compra', montante: '130,00', contraparte: 'cOPEL COM I5', preco: '234,67', valorNF: '38.257,15' }, - unidade2: { name: 'Unidade-2', operacao: 'Compra', montante: '20,00', contraparte: 'EMEWE I5', preco: '234,67', valorNF: '38.257,15' }, - unidade3: { name: 'Unidade-3', operacao: 'Compra', montante: '30,00', contraparte: 'EMEWE I5', preco: '234,67', valorNF: '38.257,15' }, - unidade4: { name: 'Unidade-4', operacao: 'Compra', montante: '40,00', contraparte: 'COPEL COM I5', preco: '234,67', valorNF: '38.257,15' }, - unidade5: { name: 'Unidade-5', operacao: 'Compra', montante: '500,00',contraparte: 'COPEL COM I5', preco: '234,67', valorNF: '38.257,15' }, - unidade6: { name: 'Unidade-6', operacao: 'Compra', montante: '300,00', contraparte: 'COPEL COM I5', preco: '234,67', valorNF: '.965,95' } - }, -] - - - - - - +// { +// "unidades": [ +// { "value": "unidade1", "name": "Unidade-1", "operacao": "Compra", "montante": "130,00", "contraparte": "cOPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" }, +// { "value": "unidade2", "name": "Unidade-2", "operacao": "Compra", "montante": "20,00", "contraparte": "EMEWE I5", "preco": "234,67", "valorNF": "38.257,15"}, +// { "value": "unidade3", "name": "Unidade-3", "operacao": "Compra", "montante": "30,00", "contraparte": "EMEWE I5", "preco": "234,67", "valorNF": "38.257,15" }, +// { "value": "unidade4", "name": "Unidade-4", "operacao": "Compra", "montante": "40,00", "contraparte": "COPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" }, +// { "value": "unidade5", "name": "Unidade-5", "operacao": "Compra", "montante": "500,00","contraparte": "COPEL COM I5", "preco": "234,67", "valorNF": "38.257,15" }, +// { "value": "unidade6", "name": "Unidade-6", "operacao": "Compra", "montante": "300,00", "contraparte": "COPEL COM I5", "preco":"234,67", "valorNF": "965,95" } +// ] +// } diff --git a/src/services/economiaAcumulada.js b/src/services/economiaAcumulada.js index 2ed53a0..6b63044 100644 --- a/src/services/economiaAcumulada.js +++ b/src/services/economiaAcumulada.js @@ -1,7 +1,7 @@ export const EconomiaAcumulada = { data : [872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294], data1 : [1445, 1615], - data2 : [872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872, 903, 938, 985, 1021, 1055], + data2 : [872, 903, 938, 985, 1021, 1055, 1094, 1133, 1181, 1226, 1294, 872], data3: [9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9], data4: [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6], diff --git a/src/services/economiaBruta.json b/src/services/economiaBruta.json new file mode 100644 index 0000000..1d881d7 --- /dev/null +++ b/src/services/economiaBruta.json @@ -0,0 +1,6 @@ +{ + "consolidada": [], + "2020": [], + "2021": [], + "labels": [2020, 2021, 2022, 2023, 2024, 2025, 2026] +} diff --git a/src/services/fatorPotencia.js b/src/services/fatorPotencia.js index 90052ca..02775fb 100644 --- a/src/services/fatorPotencia.js +++ b/src/services/fatorPotencia.js @@ -1,7 +1,8 @@ export const FatorPotencia = { data : [1.00, 1.00, 1.00, -0.96, -0.96, 0.97, 0.98, 0.95, 0.94, 0.98, 0.95, 0.95, 0.98, 1.01, 1.05, 1.00, 1.00, 0.95, 0.97, 0.97, 0.97, 0.97, 0.97, 0.97, 0.98, 1.00, 0.97, 0.97, 0.97, 0.97, 0.97, 0.96, 0.95, 0.94, 0.95, 0.95,], - data4 : [90, 90, 90, 90, 90, 90, 90, 90, 90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90, 90, 90], + data1 : [90, 90, 90, 90, 90, 90, 90, 90, 90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90 ,90, 90, 90], + data2 : [.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98,.98], label1: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22'], } diff --git a/src/styles/layouts/Telemetria/TelemetriaView.ts b/src/styles/layouts/Telemetria/TelemetriaView.ts index c466126..f380774 100644 --- a/src/styles/layouts/Telemetria/TelemetriaView.ts +++ b/src/styles/layouts/Telemetria/TelemetriaView.ts @@ -10,6 +10,8 @@ export const TelemetriaView = styled.main` color: black; font-weight: 600; font-size: 14px; + + margin: 0 0 0 10px; } span{ @@ -33,6 +35,22 @@ export const TelemetriaView = styled.main` text-align: center; margin-top: 60px; } + + section { + display: flex; + justify-content: center; + align-items: center; + + .select { + display: flex; + justify-content: center; + align-items: flex-start; + + flex-direction: column; + + /* margin-top: 10px; */ + } + } `; export const Buttons = styled.div`