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

add hachurado chart

Browse Source
This commit is contained in:
joseCorte-exe 2022-05-19 17:12:39 -03:00
parent 60ad6c4478
commit ffb92556d7
17 changed files with 71 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -36,6 +36,7 @@
"next": "12.1.6",
"npm": "^8.10.0",
"nprogress": "^0.2.0",
"patternomaly": "^1.3.2",
"react": "18.1.0",
"react-calendar": "^3.7.0",
"react-chartjs-2": "^4.1.0",

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

@ -13,6 +13,7 @@ import { Chart } from 'react-chartjs-2';
import faker from 'faker';
import { ChartView } from './ChartView';
import ChartTitle from './ChartTitle';
import pattern from 'patternomaly'
ChartJS.register(
LinearScale,
@ -68,12 +69,16 @@ interface LineBarChartInterface {
dataset1?: string,
dataset2?: string,
dataset3?: string,
barLabel?: boolean | undefined
barLabel?: boolean | undefined,
hashurado?: boolean | undefined,
}
export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel }: LineBarChartInterface) {
export function LineBarChart({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel, hashurado }: LineBarChartInterface) {
const chartRef = useRef<ChartJS>(null);
const currentTime = new Date();
const labels = label
const options: any = {
@ -112,13 +117,18 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
{
type: 'bar' as const,
label: dataset2? dataset2 : 'Dataset 2',
backgroundColor: '#C2D5FB',
backgroundColor: (value, ctx) => {
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
},
data: data3.map(value => value),
},
{
type: 'bar' as const,
label: dataset3? dataset3 : 'Dataset 2',
backgroundColor: '#255488',
// backgroundColor: '#255488',
backgroundColor: (value, ctx) => {
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
},
data: data2.map(value => value),
},
],

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

@ -12,6 +12,7 @@ import { Bar } from 'react-chartjs-2';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { ChartView } from './ChartView';
import ChartTitle from './ChartTitle';
import pattern from 'patternomaly'
ChartJS.register(
CategoryScale,
@ -26,30 +27,44 @@ ChartJS.register(
interface SingleBarInterface{
title: string,
subtitle: string,
dataProps: any,
label: any,
dataProps: Array<number>,
label: Array<string>,
dataset: string,
barLabel?: boolean | undefined,
year?: boolean | undefined,
day?: boolean | undefined,
dataset1?: string,
}
export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel }: SingleBarInterface) {
export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1, barLabel, year, day }: SingleBarInterface) {
const options: any = {
const currentTime = new Date();
const options: object = {
responsive: true,
plugins: {
datalabels: {
formatter: (value, ctx) => {
let sum = 0;
const dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
const percentage = (value*100 / sum).toFixed(2)+"%";
const result = ` ${value}\n ${percentage}`
return result;
},
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
formatter: Math.round,
anchor: "end",
offset: -20,
offset: -35,
align: "start"
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
display: false,
text: '',
},
},
@ -57,14 +72,20 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
const labels = label;
const data = {
const data: any = {
labels,
datasets: [
{
label: dataset,
data: dataProps.map(value => value),
backgroundColor: '#255488',
backgroundColor: (value, ctx) => {
return year? label[value.dataIndex]<=currentTime.getFullYear().toString()? '#255488' : pattern.draw('diagonal', '#C2D5FB') : day? parseInt(label[value.dataIndex])<=currentTime.getDay()? '#255488' : pattern.draw('diagonal', '#C2D5FB') : null
},
},
{
label: dataset1,
backgroundColor: pattern.draw('diagonal', '#C2D5FB')
}
],
};
return (

2
src/components/graph/graphCard/ChartCardView.ts
View File

@ -105,7 +105,7 @@ export const ChartCardView = styled.article`
@media (max-width: 1640px) {
font-size: 13px;
min-height: 32rem;
min-height: 26rem;
.info {
max-width: 4rem;

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} barLabel />
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada' dataset1='Estimada' label={EconomiaAcumulada.label1} dataProps={EconomiaAcumulada.data2} barLabel day/>
</section>
</AccumulatedSavingsView>
)

2
src/pages/chartTelemetry.tsx
View File

@ -24,7 +24,7 @@ export default function chartTelemetry() {
<section className='chartContainer' >
<LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data4} data3={[]} data4={[]} dataset1='Fator de Potencia' label={FatorPotencia.label1} />
<LineChart title='Consumo decretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} dataset1='Demanda registrada' label={ConsumoDecretizadoLine.label1} />
<SingleBar title='Consumo decretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'} />
<SingleBar title='Consumo decretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'} dataset1='Estimado' day/>
<LineBarChart data1={ConsumoDecretizadoLine.data1} data3={ConsumoDecretizadoLine.data} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'2021'} label={ConsumoDecretizadoLine.label1} title='Demanda Contratada X Registrada' subtitle='' red/>
</section>
</ChatTelemetryView>

8
src/pages/dashboard.tsx
View File

@ -39,16 +39,16 @@ export default function Dashboard() {
<section className='dashboard'>
<GraphCard title='Consumo' subtitle='Gráfico de Consumo'>
<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' dataset1='Estimada' dataProps={dataEconomiaBruta.data} barLabel year/>
</GraphCard>
<GraphCard title='Economia Acumulado' subtitle='Economia Acumulado' singleBar>
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$)' dataset='Acumulada' label={EconomiaAcumulada.label1} dataProps={EconomiaAcumulada.data2} />
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$)' dataset='Acumulada' dataset1='Estimado' label={EconomiaAcumulada.label1} dataProps={EconomiaAcumulada.data2} barLabel day/>
</GraphCard>
<GraphCard title='Custos Estimados' subtitle='Custos Estimados em R$/MWh' singleBar>
<LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} label={ConsumoEstimado.label} dataset1='Custo' dataset2='2020' dataset3='2021' title='Custo Estimado' subtitle='(Valores em R$/MWh)' />
<LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre' title='Custo Estimado' subtitle='(Valores em R$/MWh)' barLabel hashurado/>
</GraphCard>
<GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh'>
<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/>
</GraphCard>
</section>
</DashboardView>

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='' barLabel />
<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 hashurado />
</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} barLabel />
<SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataset1='Estimada' dataProps={dataEconomiaBruta.data} barLabel year/>
</section>
</GrossSavingsView>
)

2
src/pages/pld/index.tsx
View File

@ -204,7 +204,7 @@ export default function region() {
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
<BasicButton title='Download (csv)' />
</section>
<LineBarChart data1={EvolucaoPld.data} data3={EvolucaoPld.data1} dataset1={'line'} dataset2={'barra1'} dataset3={'2021'} label={EvolucaoPld.label} title='Evolução PLD (R$/MWh)' subtitle='' />
<LineBarChart data1={EvolucaoPld.data} data3={EvolucaoPld.data1} dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'} label={EvolucaoPld.label} title='Evolução PLD (R$/MWh)' subtitle='' />
</PldGraphView>
</RenderIf>

2
src/services/consumoDiscretizadoLine.js
View File

@ -3,9 +3,11 @@ export const ConsumoDecretizadoLine = {
100, 120, 110, 130, 140, 130, 150, 300, 400, 410, 420, 430, 435, 440, 440, 420, 400, 420, 420, 415, 300, 280, 280, 200,
100, 120, 110, 130, 140, 130, 150, 300, 400, 410, 420, 430, 435, 440, 440, 420, 400, 420, 420, 415, 300, 280, 280, 200,
100, 120, 110, 130, 140, 130, 150, 300, 400, 410, 420, 430, 435, 440, 440, 420, 400, 420, 420, 415, 300, 280, 280, 200,],
data1: [600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 290, 290, 290,
600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 290, 290, 290,
600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 290, 290, 290,],
label1:['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0',
'0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0',
'0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '0', ]

2
src/services/economiaAcumulada.js
View File

@ -10,6 +10,6 @@ export const EconomiaAcumulada = {
label: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez'],
label1: ['1', '2', '3', '4', '5', '6', '7', '8', '8', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
label1: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
label3: ['0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8',]
}

4
src/services/economiaBruta.js
View File

@ -1,4 +1,4 @@
export const dataEconomiaBruta = {
data: [872, 1615, 2196, 2930, 3838, 4814, 5853],
labels: ['até 2020', '2021', '2022', '2023', '2024', '2025', '2026']
data: [872, 1615, 2196, 2930, 3838, 4814, 5700],
labels: ['2020', '2021', '2022', '2023', '2024', '2025', '2026']
}

2
src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts
View File

@ -9,6 +9,8 @@ export const ChatTelemetryView = styled.main`
width: 100%;
padding-top: 0px!important;
.chartContainer {
display: grid;

4
yarn.lock
View File

@ -3796,6 +3796,10 @@ path-type@^4.0.0:
version "4.0.0"
resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
patternomaly@^1.3.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/patternomaly/-/patternomaly-1.3.2.tgz#70b8db17d7318ab1471cc43f94011bb866c54d09"
picocolors@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"