From 16b927b42bf691c0e94256690ee47a3824b742d4 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Fri, 24 Jun 2022 20:48:09 -0300 Subject: [PATCH] in a race against the clock --- src/components/graph/DemRegXDemConChart.tsx | 154 ++++++++++++++++++ .../graph/DiscretizedConsumptionChart.tsx | 93 +++++++++++ .../graph/DiscretizedConsumptionChartLine.tsx | 91 +++++++++++ src/components/graph/SingleBar.tsx | 5 +- src/components/graph/fatorPotenciaChart.tsx | 97 +++++++++++ src/components/sidebar/Sidebar.tsx | 5 +- src/contexts/AuthContext.tsx | 20 ++- src/pages/accumulatedSavings.tsx | 7 +- src/pages/administrative/faq/index.tsx | 4 +- src/pages/administrative/general.tsx | 11 +- src/pages/chartTelemetry.tsx | 105 ++++++++++-- src/pages/pld/index.tsx | 9 +- src/pages/telemetria.tsx | 75 +++------ .../layouts/Telemetria/TelemetriaView.ts | 15 ++ .../layouts/administerView/faq/faqView.ts | 17 ++ .../notification/notificationView.ts | 18 +- 16 files changed, 631 insertions(+), 95 deletions(-) create mode 100644 src/components/graph/DemRegXDemConChart.tsx create mode 100644 src/components/graph/DiscretizedConsumptionChart.tsx create mode 100644 src/components/graph/DiscretizedConsumptionChartLine.tsx create mode 100644 src/components/graph/fatorPotenciaChart.tsx diff --git a/src/components/graph/DemRegXDemConChart.tsx b/src/components/graph/DemRegXDemConChart.tsx new file mode 100644 index 0000000..127909d --- /dev/null +++ b/src/components/graph/DemRegXDemConChart.tsx @@ -0,0 +1,154 @@ +import React, { useRef, useEffect } from 'react'; +import { + Chart as ChartJS, + LinearScale, + CategoryScale, + BarElement, + PointElement, + LineElement, + Legend, + Tooltip, +} from 'chart.js'; +import { Chart } from 'react-chartjs-2'; +import faker from 'faker'; +import { ChartView } from './ChartView'; +import ChartTitle from './ChartTitle'; +import pattern from 'patternomaly' + +ChartJS.register( + LinearScale, + CategoryScale, + BarElement, + PointElement, + LineElement, + Legend, + Tooltip +); + +// function triggerTooltip(chart: ChartJS | null) { +// const tooltip = chart?.tooltip; + +// if (!tooltip) { +// return; +// } + +// if (tooltip.getActiveElements().length > 0) { +// tooltip.setActiveElements([], { x: 0, y: 0 }); +// } else { +// const { chartArea } = chart; + +// tooltip.setActiveElements( +// [ +// { +// datasetIndex: 0, +// index: 2, +// }, +// { +// datasetIndex: 1, +// index: 2, +// }, +// ], +// { +// x: (chartArea.left + chartArea.right) / 2, +// y: (chartArea.top + chartArea.bottom) / 2, +// } +// ); +// } + +// chart.update(); +// } + +interface LineBarChartInterface { + title: string, + subtitle: string, + data1: any, + data2?: any, + red?: any, + label: any, + dataset1?: string, + dataset2?: string, + dataset3?: string, + barLabel?: boolean | undefined, + hashurado?: boolean | undefined, + reais?: boolean | undefined +} + +export function DemRegXDemConChart({ + title, + subtitle, + data1, + data2, + label, + red, + dataset1, + dataset2, + dataset3, + barLabel + }: LineBarChartInterface) { + const chartRef = useRef(null); + + const currentTime = new Date(); + + const labels = label + + const options: any = { + responsive: true, + plugins: { + datalabels: { + display: true, + color: barLabel? 'black' : "rgba(255, 255, 255, 0)", + // backgroundColor: '#255488', + formatter: Math.round, + anchor: "end", + offset: -20, + align: "start", + font: { + size: 12 + } + }, + legend: { + position: 'bottom' as const, + }, + title: { + display: true, + text: '', + }, + }, + }; + + const data = { + labels, + datasets: [ + { + type: 'line' as const, + label: 'Demanda Contratada', + borderColor: red? + '#f00' : '#0c9200', + borderWidth: 2, + fill: false, + data: data1.map(value => value.dem_cont), + }, + { + type: 'bar' as const, + label: 'Demanda Registrada', + backgroundColor: '#255488', + data: data2.map(value => value.dem_reg), + }, + ], + }; + + useEffect(() => { + const chart = chartRef.current; + + // triggerTooltip(chart); + }, []); + + return ( + + +
+ +
+ + ) +} diff --git a/src/components/graph/DiscretizedConsumptionChart.tsx b/src/components/graph/DiscretizedConsumptionChart.tsx new file mode 100644 index 0000000..210e868 --- /dev/null +++ b/src/components/graph/DiscretizedConsumptionChart.tsx @@ -0,0 +1,93 @@ +import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js'; +import ChartDataLabels from 'chartjs-plugin-datalabels'; +import { draw, generate } from 'patternomaly' +import React from 'react'; +import { Bar } from 'react-chartjs-2'; + +import ChartTitle from './ChartTitle'; +import { ChartView } from './ChartView'; + +ChartJS.register( + CategoryScale, + LinearScale, + BarElement, + Title, + Tooltip, + Legend, + ChartDataLabels +); + +interface SingleBarInterface{ + title: string, + subtitle: string, + dataProps: any, + label: Array, + dataset: string, + barLabel?: boolean | undefined, + year?: boolean | undefined, + month?: boolean | undefined, + dataset1?: string, +} + +export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label, dataset, barLabel, year, month }: SingleBarInterface) { + const currentTime = new Date(); + + const options: object = { + responsive: true, + series: { + downsample: { + threshold: 1000 + } + }, + plugins: { + datalabels: { + formatter: (value, ctx) => { + let sum = 0; + const dataArr = ctx.chart.data.datasets[0].data; + dataArr.map(data => { + sum += data; + }); + const percentage = (dataProps[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%"; + const result = `${parseFloat(value).toFixed(0)}\n ${percentage}` + + return value==null? null : result + }, + display: true, + color: barLabel? 'black' : "rgba(255, 255, 255, 0)", + anchor: "end", + offset: -40, + align: "start", + font: { + size: 10 + } + }, + legend: { + position: 'bottom' as const, + }, + title: { + display: false, + text: '', + }, + }, + }; + + const labels = label; + + const data: any = { + labels, + datasets: [ + { + label: dataset, + data: dataProps.map(value => value.consumo), + backgroundColor: '#255488' + }, + ], + } + + return ( + + + + + ) +} diff --git a/src/components/graph/DiscretizedConsumptionChartLine.tsx b/src/components/graph/DiscretizedConsumptionChartLine.tsx new file mode 100644 index 0000000..896a7dc --- /dev/null +++ b/src/components/graph/DiscretizedConsumptionChartLine.tsx @@ -0,0 +1,91 @@ +import React, { useState, useEffect } from 'react' + +import { Bar, Line } from 'react-chartjs-2'; + +import { ChartView } from './ChartView'; + +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + ScatterDataPoint, +} from 'chart.js'; +import ChartTitle from './ChartTitle'; + +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend +); + + +interface ChartInterface { + title: string, + subtitle: string, + data1: any, + data2?: any, + data3?: any, + data4?: any, + label: any, + dataset1?: string, + dataset2?: string, + dataset3?: string, + dataset4?: string, + barLabel?: boolean | undefined +} + +export default function DiscretizedConsumptionChartLine({ title, subtitle, data1, data2, data3, data4, label, dataset1, dataset2, dataset3, dataset4, barLabel }: ChartInterface) { + 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: 12 + } + }, + legend: { + position: 'bottom' as const, + }, + title: { + display: true, + text: '', + }, + }, + }; + + const labels = label; + + const data = { + labels, + datasets: [ + { + label: dataset1, + data: data1.map(value => value.reativa), + borderColor: 'rgb(53, 162, 235)', + backgroundColor: 'rgba(53, 162, 235, 0)', + }, + ], + } + + return ( + + + + + ) +} diff --git a/src/components/graph/SingleBar.tsx b/src/components/graph/SingleBar.tsx index 8a48d33..ff71b3c 100644 --- a/src/components/graph/SingleBar.tsx +++ b/src/components/graph/SingleBar.tsx @@ -27,9 +27,6 @@ interface SingleBarInterface{ year?: boolean | undefined, month?: boolean | undefined, dataset1?: string, - - - } export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1, barLabel, year, month }: SingleBarInterface) { @@ -85,7 +82,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1 return parseFloat(value.economia_acumulada).toFixed(2) }), backgroundColor: (value, ctx) => { - return dataProps[value.dataIndex].dad_estimado == false ? '#255488' : '#C2d5fb' + return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : '#C2d5fb' }, }, diff --git a/src/components/graph/fatorPotenciaChart.tsx b/src/components/graph/fatorPotenciaChart.tsx new file mode 100644 index 0000000..ce5af02 --- /dev/null +++ b/src/components/graph/fatorPotenciaChart.tsx @@ -0,0 +1,97 @@ +import React, { useState, useEffect } from 'react' + +import { Bar, Line } from 'react-chartjs-2'; + +import { ChartView } from './ChartView'; + +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + ScatterDataPoint, +} from 'chart.js'; +import ChartTitle from './ChartTitle'; + +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend +); + + +interface ChartInterface { + title: string, + subtitle: string, + data1: any, + data2?: any, + data3?: any, + data4?: any, + label: any, + dataset1?: string, + dataset2?: string, + dataset3?: string, + dataset4?: string, + barLabel?: boolean | undefined +} + +export default function FatorPotenciaChart({ title, subtitle, data1, data2, label, dataset1, dataset2, dataset3, dataset4, barLabel }: ChartInterface) { + 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: 12 + } + }, + legend: { + position: 'bottom' as const, + }, + title: { + display: true, + text: '', + }, + }, + }; + + const labels = label; + + const data = { + labels, + datasets: [ + { + label: dataset1? dataset1 : 'Dataset 1', + data: data1.map(value => value.fp), + borderColor: 'rgb(53, 162, 235)', + backgroundColor: 'rgba(53, 162, 235, 0)', + }, + { + label: dataset2? dataset2 : '', + data: data2.map(value => value.f_ref), + borderColor: 'rgb(0, 0, 0)' , + backgroundColor: 'rgba(255, 145, 0, 0)' , + }, + ], + } + + return ( + + + + + ) +} diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index d113e95..696ecde 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -67,7 +67,7 @@ export default function Sidebar() {
  • {'Sobre Nós'}
  • {'FAQ >'}
  • {'Notificações >'}
    • -
  • {'Info Setorial'}
    • +
  • {'Info Setorial'}
    • Deseja realmente sair ? - + @@ -90,6 +90,7 @@ export default function Sidebar() { +
    setViewModal(!viewModal)} > diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx index 74735b8..4dd6c8f 100644 --- a/src/contexts/AuthContext.tsx +++ b/src/contexts/AuthContext.tsx @@ -31,7 +31,17 @@ export function AuthProvider({children}: {children: React.ReactNode}) { const isAuthenticated = !!user + function signOut() { + destroyCookie(null, 'user-client_id') + destroyCookie(null, 'user-name') + destroyCookie(null, 'user-role') + destroyCookie(null, 'user-id') + destroyCookie(null, '@smartAuth-token') + } + async function signIn({email, password}: SignInData) { + await signOut() + const { token, user, exception }: any = await signInRequest({ email, password @@ -51,6 +61,9 @@ export function AuthProvider({children}: {children: React.ReactNode}) { if (user.name) setCookie(undefined, 'user-name', user.name) + if (user.client_id) + setCookie(undefined, 'user-client_id', user.client_id) + api.defaults.headers['Authorization'] = `Bearer ${token}` if (!exception) { @@ -65,13 +78,6 @@ export function AuthProvider({children}: {children: React.ReactNode}) { } } - function signOut() { - destroyCookie(null, 'user-name') - destroyCookie(null, 'user-role') - destroyCookie(null, 'user-id') - destroyCookie(null, '@smartAuth-token') - } - return ( {children} diff --git a/src/pages/accumulatedSavings.tsx b/src/pages/accumulatedSavings.tsx index 53467d9..7fffbce 100644 --- a/src/pages/accumulatedSavings.tsx +++ b/src/pages/accumulatedSavings.tsx @@ -22,7 +22,12 @@ export default function AccumulatedSavings({graphData, years, userName}: any) {
    { + if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1 + if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1 + + return 0 + })} label={years} barLabel month/>
    diff --git a/src/pages/administrative/faq/index.tsx b/src/pages/administrative/faq/index.tsx index b7e428d..ecb3093 100644 --- a/src/pages/administrative/faq/index.tsx +++ b/src/pages/administrative/faq/index.tsx @@ -66,7 +66,6 @@ export default function Sidebar({faqData, userName} : any ) { if (reason === 'clickaway') { return; } - setOpenSnackError(false); setOpenSnackSuccess(false); }; @@ -76,14 +75,13 @@ export default function Sidebar({faqData, userName} : any ) { if (reason === 'clickaway') { return; } - setOpenSnackErrorDelete(false); setOpenSnackSuccessDelete(false); }; async function handleDeleteNotification(id: any) { await id.map((value) => { - api.delete(`/faq/${value.id}`).then(res => { + api.delete(`/faq/${value}`).then(res => { setOpenSnackSuccessDelete(true) setOpenModalInativar(false) window.location.reload() diff --git a/src/pages/administrative/general.tsx b/src/pages/administrative/general.tsx index 1d5b7bf..caf890c 100644 --- a/src/pages/administrative/general.tsx +++ b/src/pages/administrative/general.tsx @@ -1,12 +1,9 @@ -import FormControl from '@mui/material/FormControl'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; -import TextField from '@mui/material/TextField'; +import { SelectChangeEvent } from '@mui/material/Select'; import { Editor } from '@tinymce/tinymce-react' import { GetServerSideProps } from 'next'; import { parseCookies } from 'nookies'; import React, { useRef, useState } from 'react' +import BasicButton from '../../components/buttons/basicButton/BasicButton'; import Header from '../../components/header/Header'; import PageTitle from '../../components/pageTitle/PageTitle'; @@ -30,7 +27,9 @@ export default function index({userName}: any) {
    -
    +
    + console.log()}/> +
    editorRef.current = editor} initialValue='

    A SMART ENERGIA é uma consultoria independente especializada em Gestão de Energia Elétrica, consolidada como uma das três maiores consultorias do Brasil. diff --git a/src/pages/chartTelemetry.tsx b/src/pages/chartTelemetry.tsx index 343af3f..41cda3b 100644 --- a/src/pages/chartTelemetry.tsx +++ b/src/pages/chartTelemetry.tsx @@ -1,7 +1,7 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import { SingleBar } from '../components/graph/SingleBar' import { ChatTelemetryView } from '../styles/layouts/ChatTelemetry/ChatTelemetryView' -import { useRouter } from 'next/router' +// import router, { useRouter } from 'next/router' import { FatorPotencia } from '../services/fatorPotencia' import { ConsumoDecretizadoBar } from '../services/consumoDiscretizadoBar' @@ -18,6 +18,12 @@ import Typography from '@mui/material/Typography'; import Modal from '@mui/material/Modal'; import { GetServerSideProps } from 'next' import { parseCookies } from 'nookies' +import getAPIClient from '../services/ssrApi' +import { api } from '../services/api' +import FatorPotenciaChart from '../components/graph/fatorPotenciaChart' +import { DemRegXDemConChart } from '../components/graph/demRegXDemConChart' +import { DiscretizedConsumptionChart } from '../components/graph/DiscretizedConsumptionChart' +import DiscretizedConsumptionChartLine from '../components/graph/DiscretizedConsumptionChartLine' const style = { display: 'flex', @@ -45,6 +51,65 @@ export default function chartTelemetry({userName}) { const [openDemandaContratada, setOpenDemandaContratada] = useState(false); const handleCloseDemandaContratada = () => setOpenDemandaContratada(false); + const [fatorPotenciaData, setFatorPotenciaData] = useState([]); + const [demRegXDemCon, setDemRegXDemCon] = useState([]); + const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState([]); + const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState([]); + + const { ['user-cod_client']: cod_client } = parseCookies() + + async function getChartsData() { + await api.post('/telemetry/powerFactor', { + "filters": [ + {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}, + {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]} + ] + }).then(res => { + setFatorPotenciaData(res.data.data) + }).catch(res => { + console.log(res) + }) + + await api.post('/telemetry/demand', { + "filters": [ + {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}, + {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]} + ] + }).then(res => { + setDemRegXDemCon(res.data.data) + }).catch(res => { + console.log(res) + }) + + await api.post('/telemetry/discretization', { + "type": "5_min", + "filters": [ + {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}, + {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]} + ] + }).then(res => { + setDiscretizedConsumptionData(res.data.data) + }).catch(res => { + console.log(res) + }) + + await api.post('/telemetry/discretization', { + "type": "5_min", + "filters": [ + {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}, + {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]} + ] + }).then(res => { + setDiscretizedConsumptionDataReativa(res.data.data) + }).catch(res => { + console.log(res) + }) + } + + useEffect(() => { + getChartsData() + }, []) + return ( @@ -54,7 +119,7 @@ export default function chartTelemetry({userName}) {

    setOpenFatorPotencia(true)}> - + value.hora)} />
    - +
    setOpenConsumoDiscretizado1(true)}> - + parseFloat(data.reativa).toFixed(3))} />
    - + data.reativa)} />
    setOpenConsumoDiscretizado2(true)}> - + value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
    setOpenDemandaContratada(true)}> - + value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
    - + value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
    @@ -114,8 +179,26 @@ export default function chartTelemetry({userName}) { } export const getServerSideProps: GetServerSideProps = async (ctx) => { + const apiClient = getAPIClient(ctx) + const { ['@smartAuth-token']: token } = parseCookies(ctx) const { ['user-name']: userName } = parseCookies(ctx) + const { ['user-cod_client']: cod_client } = parseCookies(ctx) + + const fatorPotenciaChart = [] + + console.log('olha os query ai', ctx.query) + + // await apiClient.post('/telemetry/powerFactor', { + // "filters": [ + // {"type" : "=", "field": "med_5min.ponto", "value": cod_client}, + // {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]} + // ] + // }).then(res => { + // fatorPotenciaChart = res.data + // }).catch(res => { + // console.log(res) + // }) if (!token) { return { @@ -128,8 +211,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => { return { props: { - userName + userName, + fatorPotenciaChart } } } - diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx index 79a547c..6c5ac02 100644 --- a/src/pages/pld/index.tsx +++ b/src/pages/pld/index.tsx @@ -127,6 +127,8 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN return 'dullRed' } + const dateFormated = new Date() + useEffect(() => { getDataByHour() getDataByDay() @@ -174,7 +176,7 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN if (index === 0) { return <> - Max + Máximo {parseFloat(data.nordeste_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})} {parseFloat(data.norte_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})} {parseFloat(data.sudeste_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})} @@ -184,7 +186,7 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN } else if (index===1) { return <> - Min + Mínimo {parseFloat(data.nordeste_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})} {parseFloat(data.norte_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})} {parseFloat(data.sudeste_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})} @@ -288,7 +290,8 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN diff --git a/src/pages/telemetria.tsx b/src/pages/telemetria.tsx index 9a9adc8..c24a117 100644 --- a/src/pages/telemetria.tsx +++ b/src/pages/telemetria.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import { useRouter } from 'next/router' +import React, { useState } from 'react'; +import router, { useRouter } from 'next/router' import Banner from '../components/banner/Banner'; import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView'; @@ -18,16 +18,15 @@ import RenderIf from '../utils/renderIf'; import { GetServerSideProps } from 'next'; import { parseCookies } from 'nookies'; - - - export default function Telemetria({userName}: any) { - const [unity, setUnity] = React.useState(''); - const [startDate, setStartDate] = React.useState(''); - const [endDate, setEndDate] = React.useState(''); - const [discretization, setDiscretization] = React.useState(''); + const [unity, setUnity] = useState(''); + const [startDate, setStartDate] = useState(''); + const [endDate, setEndDate] = useState(''); + const [discretization, setDiscretization] = useState(''); - const [showChart, setShowChart] = React.useState(false); + const [date, setDate] = useState(''); + + const [showChart, setShowChart] = useState(false); const handleChange = (event: SelectChangeEvent) => { // setAge(event.target.value); @@ -72,50 +71,13 @@ export default function Telemetria({userName}: any) {

    Data inicial

    - - Data Inicial - - + setStartDate(value.target.value)}/>
    -

    Data Final

    - - Data Final - - +

    Data final

    + + setEndDate(value.target.value)}/>
    @@ -133,10 +95,6 @@ export default function Telemetria({userName}: any) { Nenhum - 07/09/2021 - Filial 3 - Twenty - Thirty
    @@ -147,7 +105,12 @@ export default function Telemetria({userName}: any) { - + router.replace('/chartTelemetry', { query: { + startDate, + endDate, + discretization + }})}/> + router.replace('/chartTelemetry')}/> setShowChart(!showChart)} green /> diff --git a/src/styles/layouts/Telemetria/TelemetriaView.ts b/src/styles/layouts/Telemetria/TelemetriaView.ts index fb3f214..863e642 100644 --- a/src/styles/layouts/Telemetria/TelemetriaView.ts +++ b/src/styles/layouts/Telemetria/TelemetriaView.ts @@ -12,6 +12,21 @@ export const TelemetriaView = styled.main` margin: 0 0 0 10px; } + input { + width: 15rem; + height: 2.5rem; + + padding: 14px; + + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight: 400; + + border-radius: 6px; + border: solid gray 1px; + + background-color: #F9F9F9; + } + span { font-family: 'Inter'; font-style: normal; diff --git a/src/styles/layouts/administerView/faq/faqView.ts b/src/styles/layouts/administerView/faq/faqView.ts index 7680a37..5c2be1b 100644 --- a/src/styles/layouts/administerView/faq/faqView.ts +++ b/src/styles/layouts/administerView/faq/faqView.ts @@ -42,6 +42,23 @@ export const FaqView = styled.nav` margin-left: 19px; } + .MuiBox-root .css-4y2i0o { + :-webkit-scrollbar { + width: 15px!important; + } + :-webkit-scrollbar-track { + background-color: #EFEFEF!important; + } + :-webkit-scrollbar-thumb { + background-color: rgb(37,79,127)!important; + border: 3px solid #EFEFEF!important; + border-radius: 10px!important + } + :-webkit-scrollbar-thumb:hover { + background-color: #1d3e63!important; + } + } + /* .teste{ display: flex; diff --git a/src/styles/layouts/administerView/notification/notificationView.ts b/src/styles/layouts/administerView/notification/notificationView.ts index cc0aca2..b57f4d9 100644 --- a/src/styles/layouts/administerView/notification/notificationView.ts +++ b/src/styles/layouts/administerView/notification/notificationView.ts @@ -77,7 +77,21 @@ export const NotificationView = styled.nav` margin-left: 16px; } - - + .MuiBox-root .css-4y2i0o { + :-webkit-scrollbar { + width: 15px!important; + } + :-webkit-scrollbar-track { + background-color: #EFEFEF!important; + } + :-webkit-scrollbar-thumb { + background-color: rgb(37,79,127)!important; + border: 3px solid #EFEFEF!important; + border-radius: 10px!important + } + :-webkit-scrollbar-thumb:hover { + background-color: #1d3e63!important; + } + } `