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

add label on top of the bar in charts

Browse Source
This commit is contained in:
joseCorte-exe 2022-05-18 17:50:36 -03:00
parent 2e6b1902e2
commit 60ad6c4478
12 changed files with 69 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -28,6 +28,7 @@
"@typescript-eslint/eslint-plugin": "^5.22.0",
"@typescript-eslint/parser": "^5.22.0",
"chart.js": "^3.7.1",
"chartjs-plugin-datalabels": "^2.0.0",
"eslint-plugin-react": "^7.29.4",
"eslit": "^6.0.0",
"faker": "5.5.3",

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

@ -34,10 +34,11 @@ interface ChartInterface {
single?: any
label: any,
dataset1?: string,
dataset2?: string
dataset2?: string,
barLabel?: boolean | undefined
}
export default function Chart({ title, data1, data2, label, subtitle, dataset1, dataset2 }: ChartInterface) {
export default function Chart({ title, data1, data2, label, subtitle, dataset1, dataset2, barLabel }: ChartInterface) {
const labels = label;
const empty = []
@ -59,9 +60,17 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
],
}
const options = {
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"
},
legend: {
position: 'bottom' as const,
},

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

@ -67,17 +67,26 @@ interface LineBarChartInterface {
label: any,
dataset1?: string,
dataset2?: string,
dataset3?: string
dataset3?: string,
barLabel?: boolean | undefined
}
export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3 }: LineBarChartInterface) {
export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel }: LineBarChartInterface) {
const chartRef = useRef<ChartJS>(null);
const labels = label
const options = {
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"
},
legend: {
position: 'bottom' as const,
},

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

@ -1,33 +1,9 @@
import React, { useState, useEffect } from 'react'
import { Bar, Line } from 'react-chartjs-2';
// import {
// Chart as ChartJS,
// CategoryScale,
// LinearScale,
// BarElement,
// Title,
// Tooltip,
// Legend,
// PointElement,
// registerables
// } from 'chart.js'
// import Chart from 'chart.js/auto'
// import faker from 'faker'
import { ChartView } from './ChartView';
// ChartJS.register(
// CategoryScale,
// LinearScale,
// BarElement,
// Title,
// Tooltip,
// Legend,
// PointElement,
// )
import {
Chart as ChartJS,
CategoryScale,
@ -39,8 +15,6 @@ import {
Legend,
ScatterDataPoint,
} from 'chart.js';
// import { Line } from 'react-chartjs-2';
import faker from 'faker';
import ChartTitle from './ChartTitle';
ChartJS.register(
@ -65,13 +39,22 @@ interface ChartInterface {
dataset1?: string,
dataset2?: string,
dataset3?: string,
dataset4?: string
dataset4?: string,
barLabel?: boolean | undefined
}
export default function LineChart({ title, subtitle, data1, data2, data3, data4, label, dataset1, dataset2, dataset3, dataset4 }: ChartInterface) {
const options = {
export default function LineChart({ 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"
},
legend: {
position: 'bottom' as const,
},

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

@ -9,6 +9,7 @@ import {
Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { ChartView } from './ChartView';
import ChartTitle from './ChartTitle';
@ -18,7 +19,8 @@ ChartJS.register(
BarElement,
Title,
Tooltip,
Legend
Legend,
ChartDataLabels
);
interface SingleBarInterface{
@ -26,13 +28,23 @@ interface SingleBarInterface{
subtitle: string,
dataProps: any,
label: any,
dataset: string
dataset: string,
barLabel?: boolean | undefined,
}
export function SingleBar({ title, subtitle, dataProps, label, dataset }: SingleBarInterface) {
const options = {
export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel }: SingleBarInterface) {
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"
},
legend: {
position: 'bottom' as const,
},
@ -59,6 +71,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset }: Single
<ChartView>
<ChartTitle title={title} subtitle={subtitle} />
<Bar options={options} data={data} />
{/* <Bar options={options} data={data} /> */}
</ChartView>
)
}

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

@ -28,10 +28,10 @@ export default function Sidebar() {
<Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
<li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
<div className='economiaDrawer drawer' >
<Link href='/grossSavings'><li>Economia Bruta</li></Link>
<Link href='/accumulatedSavings'><li>Economia Acumulada</li></Link>
<Link href='/estimatedCost'><li>Custo Estimado</li></Link>
<Link href='/costIndicator'><li>Custo R/MWh</li></Link>
<Link href='/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta</li></Link>
<Link href='/accumulatedSavings'><li className={router.pathname=='/accumulatedSavings'? 'actualPathDrawer' : null}>Economia Acumulada</li></Link>
<Link href='/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Custo Estimado</li></Link>
<Link href='/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R/MWh</li></Link>
</div>
<Link href='/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
<Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>

3
src/components/sidebar/SidebarView.ts
View File

@ -30,6 +30,9 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
color: #254F7F;
}
.actualPathDrawer {
color: #254F7F;
}
ul {
display: flex;

2
src/pages/accumulatedSavings.tsx
View File

@ -18,7 +18,7 @@ export default function AccumulatedSavings() {
<Header name='' />
<PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
<section>
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada' label={EconomiaAcumulada.label1} dataProps={EconomiaAcumulada.data2} />
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada' label={EconomiaAcumulada.label1} dataProps={EconomiaAcumulada.data2} barLabel />
</section>
</AccumulatedSavingsView>
)

2
src/pages/costIndicator.tsx
View File

@ -18,7 +18,7 @@ export default function CostIndicator() {
<Header name='' />
<PageTitle title='Indicador de Custo' subtitle='Valores em R$/MWh'/>
<section>
<Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} />
<Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} barLabel />
</section>
</CostIndicatorView>
)

2
src/pages/estimatedCost.tsx
View File

@ -18,7 +18,7 @@ export default function EstimatedCost() {
<Header name='' />
<PageTitle title='Custos Estimados' subtitle='Comparativo de Custo Estimado' />
<section>
<LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre' label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' />
<LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre' label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' barLabel />
</section>
</EstimatedCostView>
)

2
src/pages/grossSavings.tsx
View File

@ -18,7 +18,7 @@ export default function GrossSavings() {
<Header name='' />
<PageTitle title='Economia Bruta' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
<section>
<SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataProps={dataEconomiaBruta.data} />
<SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataProps={dataEconomiaBruta.data} barLabel />
</section>
</GrossSavingsView>
)

4
yarn.lock
View File

@ -1841,6 +1841,10 @@ chart.js@^3.7.1:
version "3.7.1"
resolved "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz"
chartjs-plugin-datalabels@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.0.0.tgz#caacefb26803d968785071eab012dde8746c5939"
chownr@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"