Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

label size

Browse Source
This commit is contained in:
joseCorte-exe 2022-07-22 14:20:08 -03:00
parent 096b47ee5e
commit b97b7ed8dd
18 changed files with 215 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/graph/DemRegXDemConChart.tsx
View File

@ -92,14 +92,24 @@ export function DemRegXDemConChart({
x: {
grid: {
display: false
},
ticks: {
font: {
size: 16
}
},
},
y: {
grid: {
display: false
},
ticks: {
font: {
size: 16
}
},
},
},
plugins: {
datalabels: {
display: true,
@ -140,8 +150,9 @@ export function DemRegXDemConChart({
{
type: 'bar' as const,
label: 'Demanda Registrada',
backgroundColor: '#255488',
data: data2?.map(value => value.dem_reg),
borderRadius: 8,
backgroundColor: '#255488',
},
],
};
@ -154,7 +165,6 @@ export function DemRegXDemConChart({
return (
<ChartView>
{/* <ChartTitle title={title} subtitle={subtitle}/> */}
<div style={{width: '90%'}}>
<Chart ref={chartRef} type='bar' options={options} data={data} />
</div>

15
src/components/graph/DiscretizedConsumptionChart.tsx
View File

@ -40,14 +40,24 @@ export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label,
x: {
grid: {
display: false
},
ticks: {
font: {
size: 16
}
},
},
y: {
grid: {
display: false
},
ticks: {
font: {
size: 16
}
},
},
},
plugins: {
datalabels: {
display: false,
@ -68,6 +78,7 @@ export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label,
{
type: 'line' as const,
label: 'reativa',
borderRadius: 8,
borderColor: '#F00' ,
fill: false,
borderDash: [5, 5],
@ -78,8 +89,9 @@ export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label,
{
type: 'bar' as const,
label: 'consumo',
backgroundColor: '#74acec',
data: dataProps.map(value => value.consumo),
borderRadius: 8,
backgroundColor: '#74acec',
},
// {
// type: 'line' as const,
@ -97,7 +109,6 @@ export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label,
return (
<ChartView>
{/* <ChartTitle title={title} subtitle={subtitle}/> */}
<div style={{width: '90%'}}>
<Chart type='bar' options={options} data={data} />
</div>

3
src/components/graph/DiscretizedConsumptionChartLine.tsx
View File

@ -70,6 +70,7 @@ export default function DiscretizedConsumptionChartLine({ title, subtitle, data1
datasets: [
{
label: dataset1,
borderRadius: 8,
data: data1.map(value => value.reativa),
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0)',
@ -77,6 +78,7 @@ export default function DiscretizedConsumptionChartLine({ title, subtitle, data1
{
label: 'base',
data: data1.map(value => 500),
borderRadius: 8,
borderColor: 'rgb(0, 0, 0)',
fill: false,
backgroundColor: 'rgba(255, 145, 0, 0)' ,
@ -85,6 +87,7 @@ export default function DiscretizedConsumptionChartLine({ title, subtitle, data1
{
label: 'tolerância',
data: data1.map(value => 525),
borderRadius: 8,
borderColor: 'rgb(255, 0, 0)',
fill: false,
backgroundColor: 'rgba(255, 145, 0, 0)' ,

15
src/components/graph/LineBarChart.tsx
View File

@ -88,9 +88,24 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
x: {
grid: {
display: false
},
ticks: {
font: {
size: 16
}
},
},
y: {
grid: {
display: false
},
ticks: {
font: {
size: 16
}
},
},
},
plugins: {
datalabels: {
display: true,

15
src/components/graph/LineChart.tsx
View File

@ -50,9 +50,24 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
x: {
grid: {
display: false
},
ticks: {
font: {
size: 16
}
},
},
y: {
grid: {
display: false
},
ticks: {
font: {
size: 16
}
},
},
},
plugins: {
datalabels: {
display: true,

32
src/components/graph/cativoXLivreChart/index.tsx
View File

@ -82,14 +82,24 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, dataset1,
x: {
grid: {
display: false
},
ticks: {
font: {
size: !miniature? 16 : 10
}
},
},
y: {
grid: {
display: false
},
ticks: {
font: {
size: !miniature? 16 : 10
}
},
},
},
plugins: {
datalabels: {
display: true,
@ -141,48 +151,50 @@ export function CativoXLivreChart({ title, subtitle, chartData, label, dataset1,
{
type: 'bar' as const,
label: 'Cativo',
backgroundColor: '#C2D5FB',
data: chartData?.map(value => {
if (!value.dad_estimado)
return parseInt(value.custo_cativo)
}),
borderRadius: 8,
backgroundColor: '#C2D5FB',
stack: 'cativo'
},
{
type: 'bar' as const,
label: 'Livre',
backgroundColor: '#255488',
data: chartData?.filter(value => !value.dad_estimad? true : false).map(value => {
if (!value.dad_estimado)
return parseInt(value.custo_livre)
}),
borderRadius: 8,
backgroundColor: '#255488',
stack: 'livre'
},
{
type: 'bar',
label: 'Est. Cativo',
backgroundColor: pattern.draw('diagonal', '#C2D5FB'),
data: chartData?.map(value => {
if (value.dad_estimado)
return parseInt(value.custo_cativo)
}),
borderRadius: 8,
backgroundColor: pattern.draw('diagonal', '#C2D5FB'),
stack: 'cativo'
},
{
type: 'bar',
label: 'Est. Livre',
backgroundColor: pattern.draw('diagonal', '#255488'),
data: chartData?.map(value => {
if (value.dad_estimado)
return parseInt(value.custo_livre)
}),
borderRadius: 8,
backgroundColor: pattern.draw('diagonal', '#255488'),
stack: 'livre'
}
],
}
useEffect(() => {
const chart = chartRef.current;
// triggerTooltip(chart);
}, []);
return (
<CativoXLivreChartView>
<ChartTitle title={title} subtitle={subtitle}/>

22
src/components/graph/costIndicatorChart/index.tsx
View File

@ -45,14 +45,24 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
x: {
grid: {
display: false
},
ticks: {
font: {
size: !miniature? 16 : 10
}
},
},
y: {
grid: {
display: false
},
ticks: {
font: {
size: !miniature? 16 : 10
}
},
},
},
plugins: {
datalabels: {
display: true,
@ -90,36 +100,32 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
{
label: '2021',
data: data1?.map(value => value.custo_unit>0? value.custo_unit : null),
// backgroundColor: '#C2d5fb'
borderRadius: 8,
backgroundColor: (value, ctx) => {
if (value.dad_estimado)
return draw('diagonal-right-left', '#C2d5fb');
else
return '#C2d5fb'
},
stack: '0'
},
{
label: '2022',
data: data2?.map(value => value.custo_unit>0? value.custo_unit : null),
// backgroundColor: '#255488'
borderRadius: 8,
backgroundColor: (value, ctx) => {
if (value.dad_estimado)
return draw('diagonal-right-left', '#255488');
else
return '#255488'
},
stack: '0'
}
],
}
return (
<CostIndicatorChartView>
{/* <RenderIf isTrue={single? true : false} >
<Bar
options={options}
data={graphData}
/>
</RenderIf> */}
<ChartTitle title={title} subtitle={subtitle} />
<Bar
options={options}

10
src/components/graph/fatorPotenciaChart.tsx
View File

@ -50,14 +50,24 @@ export default function FatorPotenciaChart({ title, subtitle, data1, data2, labe
x: {
grid: {
display: false
},
ticks: {
font: {
size: 16
}
},
},
y: {
grid: {
display: false
},
ticks: {
font: {
size: 16
}
},
},
},
plugins: {
datalabels: {
display: true,

27
src/components/graph/grossAnualChart/GrossAnualChart.tsx
View File

@ -40,19 +40,33 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
scales: {
x: {
stacked: true,
font: {
size: 30
},
grid: {
display: false
},
ticks: {
font: {
size: !miniature? 16 : 10
}
},
},
y: {
stacked: true,
grid: {
display: false
},
ticks: {
font: {
size: !miniature? 16 : 10
}
},
// title: {
// display: true,
// text: 'titleY',
// font: {
// size: 00
// }
// }
},
},
series: {
downsample: {
@ -85,11 +99,6 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
},
legend: {
position: 'bottom' as const,
labels: {
font: {
size: 12,
}
}
},
title: {
display: false,
@ -116,6 +125,7 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
data: dataProps.filter(value => value.dad_estimado === false).map((value, index) => {
return parseFloat(value.economia_acumulada)
}),
borderRadius: 10,
backgroundColor: '#255488',
},
{
@ -126,6 +136,7 @@ export function GrossAnualChart({ title, subtitle, dataProps, label, dataset, ba
if (value.dad_estimado)
return parseFloat(value.economia_acumulada)
}),
borderRadius: 10,
backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
},
],

24
src/components/graph/grossMensalChart/GrossMensalChart.tsx
View File

@ -55,14 +55,24 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
x: {
grid: {
display: false
},
ticks: {
font: {
size: !miniature? 16 : 10
}
},
},
y: {
grid: {
display: false
},
ticks: {
font: {
size: !miniature? 16 : 10
}
},
},
},
plugins: {
datalabels: {
display: true,
@ -103,25 +113,23 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
type: 'bar',
label: 'Consolidado',
data: data1.map(value => !value.dad_estimado? value?.economia_acumulada : null),
backgroundColor: '#255488'
borderRadius: 8,
backgroundColor: '#255488',
stack: '0'
},
{
type: 'bar',
label: 'Estimado',
data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null),
backgroundColor: draw('diagonal-right-left', '#C2d5fb')
borderRadius: 8,
backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
stack: '0'
},
],
}
return (
<GrossMensalChartView>
{/* <RenderIf isTrue={single? true : false} >
<Bar
options={options}
data={graphData}
/>
</RenderIf> */}
<ChartTitle title={title} subtitle={subtitle} />
<ChartJs
options={options}

8
src/pages/economy/index.tsx
View File

@ -63,7 +63,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
useEffect(() => {
api.post('/economy/estimates', unity!==''?{
"filters": [
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity}
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity!=="default"? null : unity}
]
}:{}).then(res => {
setCatLivDataState(res.data.data)
@ -75,7 +75,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
useEffect(() => {
api.post('/economy/MWh', unity!==''?{
"filters": [
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity}
{"type" : "=", "field":"dados_cadastrais.cod_smart_unidade", "value": unity!=="default"? null : unity}
]
}:{}).then(res => {
setIndicatorDataState(res.data.data)
@ -152,7 +152,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
onChange={value => setUnity(value.target.value)}
fullWidth
>
<MenuItem value="">Todas</MenuItem>
<MenuItem value="default">Todas</MenuItem>
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> !!OPÇAO COM DADOS TESTES!! */}
{
clients.map((value) => {
@ -182,7 +182,7 @@ export default function economy({userName, anual, years, brutaMensal, yearsBruta
onChange={value => setUnity(value.target.value)}
fullWidth
>
<MenuItem value="">Todas</MenuItem>
<MenuItem value="default">Todas</MenuItem>
{/* <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem> COMENTARIO DE OPÇAO COM DADOS TESTES */}
{
clients.map((value) => {

12
src/pages/faq/index.tsx
View File

@ -12,28 +12,30 @@ import { FaqView } from '../../styles/layouts/commonQuestions/FaqView'
export default function commonQuestions({faqData, userName}) {
return (
<FaqView>
<main style={{width: '100%'}}>
<Head>
<title>Smart Energia - FAQ</title>
</Head>
<Header name={userName}>
<PageTitle title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!'/>
</Header>
<FaqView>
{/* <Banner title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!' imgSource='/assets/banners/faq1.png'/> */}
<section className='CommonQuestionsSection' >
{
faqData.length<1?
<p>Nenhuma pergunta no momento!</p>
:
faqData.length!==0?
faqData.map((value, index ) => {
return <>
<CommonQuestionsCard key={index} question={value.question} answer={value.answer}/>
<hr />
</>
})
:
<p>Nenhuma pergunta no momento!</p>
}
</section>
</FaqView>
</main>
)
}
@ -47,7 +49,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
await apiClient.get('/faq').then(res => {
faqData = res.data.data
}).catch(res => {
// console.log(res)
console.log(res)
})
if (!token) {

3
src/pages/news/index.tsx
View File

@ -46,10 +46,9 @@ export default function aboutUs({userName, news}: any) {
</>
})
}
<a href='https://www.energiasmart.com.br/noticias/'
target={"_blank"}
rel={"noreferrer"}>Ver Mais</a>
rel={"noreferrer"}>Ver todas as notícias</a>
</NewsView>
</main>

4
src/pages/notifications/index.tsx
View File

@ -12,13 +12,14 @@ import Banner from '../../components/banner/Banner'
export default function Notifications({notificationData, userName}: any) {
return (
<FaqView>
<main style={{width: '100%'}}>
<Head>
<title>Smart Energia - Notificações</title>
</Head>
<Header name={userName}>
<PageTitle title='Notificações' subtitle='Aqui estão as notificações publicadas para você!'/>
</Header>
<FaqView>
{/* <Banner title='Notificações' subtitle='Aqui estão as notificações publicadas para você!' imgSource='/assets/banners/notificacoes.jpg'/> */}
<section className='CommonQuestionsSection' >
{
@ -34,6 +35,7 @@ export default function Notifications({notificationData, userName}: any) {
}
</section>
</FaqView>
</main>
)
}

49
src/pages/telemetria/index.tsx
View File

@ -144,25 +144,6 @@ export default function Telemetria({userName, clients}: any) {
setOpenSnackSuccess(false)
})
}
function handleVerifyFields() {
if (unity != '' && startDate.toLocaleDateString() != '' && endDate.toLocaleDateString() != '' && discretization != '') {
router.push({
pathname: '/chartTelemetry',
query: {
'startDate': startDate.toLocaleDateString(),
'endDate': endDate.toLocaleDateString(),
discretization,
unity
},
})
return true
} else {
setOpenSnackFields(true)
return false
}
}
async function getChartData() {
const html = document.querySelector("table")?.outerHTML;
await api.post('/telemetry/demand', {
@ -195,12 +176,6 @@ export default function Telemetria({userName, clients}: any) {
getChartData()
}, [send])
useEffect(() => {
// getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
// .then(result => setDiscretizedConsumptionData(result))
// .catch(exception => console.log(exception))
}, [discretization])
return(
<main style={{width: '100%'}}>
<Head>
@ -243,7 +218,7 @@ export default function Telemetria({userName, clients}: any) {
severity="error"
sx={{ width: '100%' }}
>
Verifique os campos!
Verifique os campos e tente novamente!
</Alert>
</Snackbar>
@ -351,9 +326,10 @@ export default function Telemetria({userName, clients}: any) {
</LocalizationProvider>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
setSend(true)
getDiscretization(unity, startDate, endDate, discretization)
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
.then(result => {setDiscretizedConsumptionData(result); setSend(false)})
.catch(exception => {setSend(false); setOpenSnackFields(true)})
}}/>
</div>
</ChartFilters>
@ -447,9 +423,10 @@ export default function Telemetria({userName, clients}: any) {
</LocalizationProvider>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
setSend(true)
getDemand(unity, startDate, endDate, discretization)
.then(result => setDemRegXDemCon(result))
.catch(exception => console.log(exception))
.then(result => {setDemRegXDemCon(result); setSend(false)})
.catch(exception => {setSend(false); setOpenSnackFields(true)})
}}/>
</div>
</ChartFilters>
@ -539,9 +516,10 @@ export default function Telemetria({userName, clients}: any) {
</LocalizationProvider>
<div className='select'>
<BasicButton title='Selecionar!' onClick={() => {
setSend(true)
getPowerFactorData(unity, startDate, endDate, discretization)
.then(result => setFatorPotenciaData(result))
.catch(exception => console.log(exception))
.then(result => {setFatorPotenciaData(result); setSend(false)})
.catch(exception => {setSend(false); setOpenSnackFields(true)})
}}/>
</div>
</ChartFilters>
@ -598,11 +576,12 @@ export default function Telemetria({userName, clients}: any) {
</Select>
</FormControl>
</div>
<div className='select'>
<div style={{marginBottom: '8px'}}>
<BasicButton title='Selecionar!' onClick={() => {
setSend(true)
getDemand(unity, startDate, endDate, discretization)
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
.then(result => {setDiscretizedConsumptionData(result); setSend(false)})
.catch(exception => {setSend(false); setOpenSnackFields(true)})
}}/>
</div>
</ChartFilters>

20
src/styles/layouts/Telemetria/TelemetriaView.ts
View File

@ -191,7 +191,7 @@ export const TelemetriaView = styled.main`
.MuiInputLabel-outlined {
margin-top: 11px;
}
.Mui-focused {
.Mui-focused, .MuiInputLabel-shrink {
margin-top: 0!important;
}
}
@ -226,23 +226,7 @@ export const TelemetriaView = styled.main`
flex-wrap: wrap;
.select {
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
/* height: 10em; */
:nth-child(1) {
label {
margin-top: 10px;
}
}
:nth-child(2) {
label {
margin-top: 10px;
}
}
margin-bottom: 17px;// input margin bottom
}
}
`;

15
src/styles/layouts/economy/economy.ts
View File

@ -22,23 +22,10 @@ export const EconomyView = styled.main`
.MuiInputLabel-outlined {
margin-top: 11px;
}
.Mui-focused {
.Mui-focused, .MuiInputLabel-shrink {
margin-top: 0!important;
}
.chartBox {
}
/* input {
width: 16.6rem;
height: 63px!important;
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;
} */
`

2
src/styles/layouts/news/NewsView.ts
View File

@ -84,7 +84,7 @@ export const NewsView = styled.main`
align-items: center;
margin-top: 1px;
width: 140px;
width: 170px;
height: 45px;
cursor: pointer;