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

update

Browse Source
This commit is contained in:
Alex Santos 2022-05-18 10:06:38 -03:00
parent 96b5605af6
commit ec82b83a16
3 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/graph/ChartView.ts
View File

@ -3,15 +3,21 @@ import styled from "styled-components"
export const ChartView = styled.div` export const ChartView = styled.div`
width: 90%; width: 90%;
div{
margin-top: 32px;
}
@media (max-width: 900px) { @media (max-width: 900px) {
min-width: 20rem min-width: 20rem
} }
` `
export const ChartTitleView = styled.div` export const ChartTitleView = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 50px;
flex-direction: column; flex-direction: column;

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

@ -81,7 +81,8 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
{ {
type: 'line' as const, type: 'line' as const,
label: dataset1? dataset1 : 'Dataset 1', label: dataset1? dataset1 : 'Dataset 1',
borderColor: red? '#f00' : '#0c9200', borderColor: red?
'#f00' : '#0c9200',
borderWidth: 2, borderWidth: 2,
fill: false, fill: false,
data: data1.map(value => value), data: data1.map(value => value),
@ -110,7 +111,9 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
return ( return (
<ChartView> <ChartView>
<ChartTitle title={title} subtitle={subtitle}/> <ChartTitle title={title} subtitle={subtitle}/>
<Chart ref={chartRef} type='bar' data={data} /> <div>
<Chart ref={chartRef} type='bar' data={data} />
</div>
</ChartView> </ChartView>
) )
} }

8
src/pages/chartTelemetry.tsx
View File

@ -18,10 +18,10 @@ export default function chartTelemetry() {
<Header name='' /> <Header name='' />
<PageTitle title='Telemetria - Graficos' subtitle='Gráficos' /> <PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
<section> <section>
<LineChart title='fator potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data4} data3={[]} data4={[]} label={FatorPotencia.label1} /> <LineChart title='Fator potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data4} data3={[]} data4={[]} label={FatorPotencia.label1} />
<LineChart title='fator potencia' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} label={ConsumoDecretizadoLine.label1} /> <LineChart title='Consumo decretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} label={ConsumoDecretizadoLine.label1} />
<SingleBar title='Consumo decretizado' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} /> <SingleBar title='Consumo decretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} />
<LineBarChart data1={ConsumoDecretizadoLine.data1} data2={ConsumoDecretizadoLine.data} data3={[]} label={ConsumoDecretizadoLine.label1} title='evolução pld' subtitle='' red/> <LineBarChart data1={ConsumoDecretizadoLine.data1} data2={ConsumoDecretizadoLine.data} data3={[]} label={ConsumoDecretizadoLine.label1} title='Demanda Contratada X Registrada' subtitle='' red/>
</section> </section>
</ChatTelemetryView> </ChatTelemetryView>
) )