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

add datasets sets

Browse Source
This commit is contained in:
joseCorte-exe 2022-05-17 17:42:27 -03:00
parent e220d616da
commit 96b5605af6
5 changed files with 34 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/graph/Chart.tsx
View File

@ -33,9 +33,11 @@ interface ChartInterface {
data2: any,
single?: any
label: any,
dataset1?: string,
dataset2?: string
}
export default function Chart({ title, data1, data2, label, subtitle }: ChartInterface) {
export default function Chart({ title, data1, data2, label, subtitle, dataset1, dataset2 }: ChartInterface) {
const labels = label;
@ -43,12 +45,12 @@ export default function Chart({ title, data1, data2, label, subtitle }: ChartInt
labels,
datasets: [
{
label: '2020',
label: dataset1? dataset1 : '2020',
data: data1.map(value => value),
backgroundColor: '#C2D5FB',
},
{
label: '2021',
label: dataset2? dataset2 : '2021',
data: data2.map(value => value),
backgroundColor: '#255488',
},

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

@ -64,10 +64,13 @@ interface LineBarChartInterface {
data2: any,
data3: any,
red?: any,
label: any
label: any,
dataset1?: string,
dataset2?: string,
dataset3?: string
}
export function LineBarChart({ title, subtitle, data1, data2, data3, label, red }: LineBarChartInterface) {
export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3 }: LineBarChartInterface) {
const chartRef = useRef<ChartJS>(null);
const labels = label
@ -77,29 +80,21 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red
datasets: [
{
type: 'line' as const,
label: 'Dataset 1',
label: dataset1? dataset1 : 'Dataset 1',
borderColor: red? '#f00' : '#0c9200',
borderWidth: 2,
fill: false,
data: data1.map(value => value),
},
// {
// type: 'line' as const,
// label: 'Dataset 1',
// borderColor: '#f00',
// borderWidth: 2,
// fill: false,
// data: data4.map(value => value),
// },
{
type: 'bar' as const,
label: 'Dataset 2',
label: dataset2? dataset2 : 'Dataset 2',
backgroundColor: '#255488',
data: data2.map(value => value),
},
{
type: 'bar' as const,
label: 'Dataset 2',
label: dataset3? dataset3 : 'Dataset 2',
backgroundColor: '#C2D5FB',
data: data3.map(value => value),
},

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

@ -62,9 +62,13 @@ interface ChartInterface {
data3?: any,
data4?: any,
label: any,
dataset1: string,
dataset2: string,
dataset3: string,
dataset4: string
}
export default function LineChart({ title, subtitle, data1, data2, data3, data4, label }: ChartInterface) {
export default function LineChart({ title, subtitle, data1, data2, data3, data4, label, dataset1, dataset2, dataset3, dataset4 }: ChartInterface) {
const options = {
responsive: true,
plugins: {
@ -84,25 +88,25 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
labels,
datasets: [
{
label: 'Dataset 1',
label: dataset1? dataset1 : 'Dataset 1',
data: data1.map(value => value),
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
{
label: 'Dataset 2',
label: dataset2? dataset2 : 'Dataset 2',
data: data2.map(value => value),
borderColor: 'rgb(255, 114, 32)',
backgroundColor: 'rgba(255, 145, 0, 0.5)',
},
{
label: 'Dataset 3',
label: dataset3? dataset3 : 'Dataset 3',
data: data3.map(value => value),
borderColor: 'rgb(109, 109, 109)',
backgroundColor: 'rgba(90, 90, 90, 0.5)',
},
{
label: 'Dataset4',
label: dataset4? dataset4 : 'Dataset4',
data: data4.map(value => value),
borderColor: 'rgb(255, 166, 0)',
backgroundColor: 'rgba(255, 187, 0, 0.5)',

2
src/components/sidebar/Sidebar.tsx
View File

@ -38,7 +38,7 @@ export default function Sidebar() {
<Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
<Link href='#'><li className={router.pathname=='/sectorialInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
{/* <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link> */}
<Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificação >'}</li></Link>
<Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}</li></Link>
<Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
<Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
<Link href='/'><button><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button></Link>

2
src/pages/telemetria.tsx
View File

@ -107,11 +107,13 @@ export default function Telemetria() {
<GradientButton title='DADOS' description='Gerar gráficos com os dados selecionados' green />
</Buttons>
<p className='paragraph'>
<i>
Fonte: Dados coletados do Sistema de Coleta de Dados
de Energia - SCDE da Câmara de Comercialização <br/>
Energia Elétrica – CCEE, sendo que as quantidades aqui
informadas são de responsabilidade <br/>do agente de
medição - Distribuidora.
</i>
</p>
</TelemetriaView>