From ffb92556d7ca13736e05514465f02822c33b972c Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Thu, 19 May 2022 17:12:39 -0300 Subject: [PATCH] add hachurado chart --- package.json | 1 + src/components/graph/LineBarChart.tsx | 18 +++++++-- src/components/graph/SingleBar.tsx | 39 ++++++++++++++----- .../graph/graphCard/ChartCardView.ts | 2 +- src/pages/accumulatedSavings.tsx | 2 +- src/pages/chartTelemetry.tsx | 2 +- src/pages/dashboard.tsx | 8 ++-- src/pages/estimatedCost.tsx | 2 +- src/pages/grossSavings.tsx | 2 +- src/pages/pld/index.tsx | 2 +- src/services/consumoDiscretizadoBar.js | 2 +- src/services/consumoDiscretizadoLine.js | 2 + src/services/consumoEstimado.js | 8 ++-- src/services/economiaAcumulada.js | 2 +- src/services/economiaBruta.js | 4 +- .../ChatTelemetry/ChatTelemetryView.ts | 2 + yarn.lock | 4 ++ 17 files changed, 71 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index a110643..8db45c3 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/graph/LineBarChart.tsx b/src/components/graph/LineBarChart.tsx index 88e245a..0a0af0e 100644 --- a/src/components/graph/LineBarChart.tsx +++ b/src/components/graph/LineBarChart.tsx @@ -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(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), }, ], diff --git a/src/components/graph/SingleBar.tsx b/src/components/graph/SingleBar.tsx index d7aface..4a5bef4 100644 --- a/src/components/graph/SingleBar.tsx +++ b/src/components/graph/SingleBar.tsx @@ -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, + label: Array, 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 ( diff --git a/src/components/graph/graphCard/ChartCardView.ts b/src/components/graph/graphCard/ChartCardView.ts index fa834e7..9ebabd2 100644 --- a/src/components/graph/graphCard/ChartCardView.ts +++ b/src/components/graph/graphCard/ChartCardView.ts @@ -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; diff --git a/src/pages/accumulatedSavings.tsx b/src/pages/accumulatedSavings.tsx index 3c5d9f3..9c1e95e 100644 --- a/src/pages/accumulatedSavings.tsx +++ b/src/pages/accumulatedSavings.tsx @@ -18,7 +18,7 @@ export default function AccumulatedSavings() {
- +
) diff --git a/src/pages/chartTelemetry.tsx b/src/pages/chartTelemetry.tsx index 90e751f..9df31f2 100644 --- a/src/pages/chartTelemetry.tsx +++ b/src/pages/chartTelemetry.tsx @@ -24,7 +24,7 @@ export default function chartTelemetry() {
- +
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 3ecc926..acefe07 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -39,16 +39,16 @@ export default function Dashboard() {
- + - + - + - +
diff --git a/src/pages/estimatedCost.tsx b/src/pages/estimatedCost.tsx index 043bafa..76326cc 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 a368cf4..a8c2985 100644 --- a/src/pages/grossSavings.tsx +++ b/src/pages/grossSavings.tsx @@ -18,7 +18,7 @@ export default function GrossSavings() {
- +
) diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx index 50ec251..7975d29 100644 --- a/src/pages/pld/index.tsx +++ b/src/pages/pld/index.tsx @@ -204,7 +204,7 @@ export default function region() { - + diff --git a/src/services/consumoDiscretizadoBar.js b/src/services/consumoDiscretizadoBar.js index d8449c8..772f9f2 100644 --- a/src/services/consumoDiscretizadoBar.js +++ b/src/services/consumoDiscretizadoBar.js @@ -1,5 +1,5 @@ export const ConsumoDecretizadoBar = { - data : + data: [1, 3, 4, 7, 10, 14, 17, 20, 23, 25, 28, 31, 34, 37, 40, 43, 46, 49, 53, 56, 58, 60, 63, 66, 69, 72, 76, 79, 82, 86, 90, 93, 97, 103, 106, 109, 112, 116, 120, 124, 127, 130, 134, 138, 142, 145, 148, 152, 155, 158, 161, 164, 168, 172, 176, 200, 203, 206, 209, 213, 217, 221, 223, 226, 229, 231, 234, 238, 240, 244, 248 diff --git a/src/services/consumoDiscretizadoLine.js b/src/services/consumoDiscretizadoLine.js index c62e34c..10b90fa 100644 --- a/src/services/consumoDiscretizadoLine.js +++ b/src/services/consumoDiscretizadoLine.js @@ -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', ] diff --git a/src/services/consumoEstimado.js b/src/services/consumoEstimado.js index c0bb58a..51b6922 100644 --- a/src/services/consumoEstimado.js +++ b/src/services/consumoEstimado.js @@ -1,6 +1,6 @@ export const ConsumoEstimado = { - data : [245,202, 176, 150, 102, 138, 155, 177, 228, 161, 316, 335], - data1 : [214, 167, 129, 114, 68, 99, 116, 129, 183, 93, 165, 164], - data2 : [31, 35, 47, 37, 39, 39, 48, 45, 68, 151, 171], + data: [245,202, 176, 150, 102, 138, 155, 177, 228, 161, 316, 335], + data1: [214, 167, 129, 114, 68, 99, 116, 129, 183, 93, 165, 164], + data2: [31, 35, 47, 37, 39, 39, 48, 45, 68, 151, 171], label: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez'] - } +} diff --git a/src/services/economiaAcumulada.js b/src/services/economiaAcumulada.js index bbc1388..2ed53a0 100644 --- a/src/services/economiaAcumulada.js +++ b/src/services/economiaAcumulada.js @@ -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',] } diff --git a/src/services/economiaBruta.js b/src/services/economiaBruta.js index 86a9bba..2e1fe21 100644 --- a/src/services/economiaBruta.js +++ b/src/services/economiaBruta.js @@ -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'] } diff --git a/src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts b/src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts index d6e7406..bc04c88 100644 --- a/src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts +++ b/src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts @@ -9,6 +9,8 @@ export const ChatTelemetryView = styled.main` width: 100%; + padding-top: 0px!important; + .chartContainer { display: grid; diff --git a/yarn.lock b/yarn.lock index 1b2a8b8..dcebd9a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"