diff --git a/package.json b/package.json index b87ac3b..a110643 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/graph/Chart.tsx b/src/components/graph/Chart.tsx index 00988c6..bb79ade 100644 --- a/src/components/graph/Chart.tsx +++ b/src/components/graph/Chart.tsx @@ -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, }, diff --git a/src/components/graph/LineBarChart.tsx b/src/components/graph/LineBarChart.tsx index fd647a7..88e245a 100644 --- a/src/components/graph/LineBarChart.tsx +++ b/src/components/graph/LineBarChart.tsx @@ -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(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, }, diff --git a/src/components/graph/LineChart.tsx b/src/components/graph/LineChart.tsx index 807f9dd..c4acd13 100644 --- a/src/components/graph/LineChart.tsx +++ b/src/components/graph/LineChart.tsx @@ -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, }, diff --git a/src/components/graph/SingleBar.tsx b/src/components/graph/SingleBar.tsx index 2990edc..d7aface 100644 --- a/src/components/graph/SingleBar.tsx +++ b/src/components/graph/SingleBar.tsx @@ -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 + {/* */} ) } diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 23b66fd..b073e5a 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -28,10 +28,10 @@ export default function Sidebar() {
  • {'Visão Geral'}
  • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia >'}
    • -
  • Economia Bruta
    • -
  • Economia Acumulada
    • -
  • Custo Estimado
    • -
  • Custo R/MWh
    • +
  • Economia Bruta
    • +
  • Economia Acumulada
    • +
  • Custo Estimado
    • +
  • Custo R/MWh
  • {'Telemetria >'}
  • {'Resumo de Op. '}
    • diff --git a/src/components/sidebar/SidebarView.ts b/src/components/sidebar/SidebarView.ts index 6b2994f..94df76f 100644 --- a/src/components/sidebar/SidebarView.ts +++ b/src/components/sidebar/SidebarView.ts @@ -30,6 +30,9 @@ export const SidebarView = styled.nav` color: #254F7F; } + .actualPathDrawer { + color: #254F7F; + } ul { display: flex; diff --git a/src/pages/accumulatedSavings.tsx b/src/pages/accumulatedSavings.tsx index af4483f..3c5d9f3 100644 --- a/src/pages/accumulatedSavings.tsx +++ b/src/pages/accumulatedSavings.tsx @@ -18,7 +18,7 @@ export default function AccumulatedSavings() {
    - +
    ) diff --git a/src/pages/costIndicator.tsx b/src/pages/costIndicator.tsx index 7a498b2..8a35d0b 100644 --- a/src/pages/costIndicator.tsx +++ b/src/pages/costIndicator.tsx @@ -18,7 +18,7 @@ export default function CostIndicator() {
    - +
    ) diff --git a/src/pages/estimatedCost.tsx b/src/pages/estimatedCost.tsx index 7b3f071..043bafa 100644 --- a/src/pages/estimatedCost.tsx +++ b/src/pages/estimatedCost.tsx @@ -18,7 +18,7 @@ export default function EstimatedCost() {
    - +
    ) diff --git a/src/pages/grossSavings.tsx b/src/pages/grossSavings.tsx index 84e4944..a368cf4 100644 --- a/src/pages/grossSavings.tsx +++ b/src/pages/grossSavings.tsx @@ -18,7 +18,7 @@ export default function GrossSavings() {
    - +
    ) diff --git a/yarn.lock b/yarn.lock index 645f9ff..1b2a8b8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"