add datasets sets

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

View File

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

View File

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

View File

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

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='/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='#'><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='/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='/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='/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> <Link href='/'><button><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button></Link>

View File

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