From 29b7003f39bc9e1fec61e22af3410021b393ffd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=83=81=ED=98=84?= Date: Fri, 19 Jan 2024 14:57:03 +0900 Subject: [PATCH] =?UTF-8?q?react-chartjs=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../history/AnalysisHistoryDetailStatic.js | 53 ++--- .../charts/chart-js/ChartjsAreaChart.js | 160 +++------------ .../charts/chart-js/ChartjsBarChart.js | 119 ++--------- .../charts/chart-js/ChartjsDoughnutChart.js | 124 ++---------- .../charts/chart-js/ChartjsLineChart.js | 185 +----------------- src/components/dashboard/DashboardStcsArea.js | 6 +- src/components/dashboard/DashboardStcsDay.js | 4 +- src/components/statistics/StatisticsSearch.js | 13 +- 8 files changed, 84 insertions(+), 580 deletions(-) diff --git a/src/components/analysis/history/AnalysisHistoryDetailStatic.js b/src/components/analysis/history/AnalysisHistoryDetailStatic.js index 2eb32971..cdbde363 100644 --- a/src/components/analysis/history/AnalysisHistoryDetailStatic.js +++ b/src/components/analysis/history/AnalysisHistoryDetailStatic.js @@ -1,20 +1,7 @@ import { useEffect, useState } from 'react'; -import { Line } from 'react-chartjs-2'; -import { useSelector } from 'react-redux'; -import { - Card, - CardHeader, - CardTitle, - CardBody, - CardSubtitle, - Button, - Row, - Col -} from 'reactstrap'; - +import { Card, CardBody, Row, Col } from 'reactstrap'; +import ChartjsLineChart from '../../charts/chart-js/ChartjsLineChart'; export const AnalysisHistoryDetailStatic = props => { - // const { log } = useSelector(state => state.analysisHistoryState); - const [chartData, setChartData] = useState({}); useEffect(() => { @@ -83,16 +70,6 @@ export const AnalysisHistoryDetailStatic = props => { }); }; - const plugins = [ - { - beforeInit(chart) { - chart.legend.afterFit = function () { - this.height += 20; - }; - } - } - ]; - const options = { responsive: true, maintainAspectRatio: false, @@ -201,18 +178,18 @@ export const AnalysisHistoryDetailStatic = props => { }; return ( -
- - - - -
- -
- - - - -
+
+ + + + +
+ +
+ + + + +
); }; diff --git a/src/components/charts/chart-js/ChartjsAreaChart.js b/src/components/charts/chart-js/ChartjsAreaChart.js index 1eaf53c9..bdf41a9b 100644 --- a/src/components/charts/chart-js/ChartjsAreaChart.js +++ b/src/components/charts/chart-js/ChartjsAreaChart.js @@ -1,148 +1,32 @@ -import { Line } from 'react-chartjs-2' -import Flatpickr from 'react-flatpickr' -import { Calendar } from 'react-feather' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' +import { Line } from 'react-chartjs-2'; +import Flatpickr from 'react-flatpickr'; +import { Calendar } from 'react-feather'; +import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap'; -const ChartjsAreaChart = ({ labelColor, tooltipShadow, gridLineColor, blueColor, blueLightColor, greyLightColor }) => { +const ChartjsAreaChart = ({ + labelColor, + tooltipShadow, + gridLineColor, + blueColor, + blueLightColor, + greyLightColor +}) => { const options = { - responsive: true, - maintainAspectRatio: false, - legend: { - position: 'top', - align: 'start', - labels: { - usePointStyle: true, - padding: 25, - boxWidth: 9 - } - }, - layout: { - padding: { - top: -20, - bottom: -20, - left: -20 - } - }, - tooltips: { - // Updated default tooltip UI - shadowOffsetX: 1, - shadowOffsetY: 1, - shadowBlur: 8, - shadowColor: tooltipShadow, - backgroundColor: '#fff', - titleFontColor: '#000', - bodyFontColor: '#000' - }, - scales: { - xAxes: [ - { - display: true, - gridLines: { - color: 'transparent', - zeroLineColor: gridLineColor - }, - scaleLabel: { - display: true - }, - ticks: { - fontColor: labelColor - } - } - ], - yAxes: [ - { - display: true, - gridLines: { - color: 'transparent', - zeroLineColor: gridLineColor - }, - ticks: { - stepSize: 100, - min: 0, - max: 400, - fontColor: labelColor - }, - scaleLabel: { - display: true - } - } - ] - } + options }, data = { - labels: [ - '7/12', - '8/12', - '9/12', - '10/12', - '11/12', - '12/12', - '13/12', - '14/12', - '15/12', - '16/12', - '17/12', - '18/12', - '19/12', - '20/12', - '' - ], - datasets: [ - { - label: 'Africa', - data: [40, 55, 45, 75, 65, 55, 70, 60, 100, 98, 90, 120, 125, 140, 155], - lineTension: 0, - backgroundColor: blueColor, - pointStyle: 'circle', - borderColor: 'transparent', - pointRadius: 0.5, - pointHoverRadius: 5, - pointHoverBorderWidth: 5, - pointBorderColor: 'transparent', - pointHoverBackgroundColor: blueColor, - pointHoverBorderColor: '#fff' - }, - { - label: 'Asia', - data: [70, 85, 75, 150, 100, 140, 110, 105, 160, 150, 125, 190, 200, 240, 275], - lineTension: 0, - backgroundColor: blueLightColor, - pointStyle: 'circle', - borderColor: 'transparent', - pointRadius: 0.5, - pointHoverRadius: 5, - pointHoverBorderWidth: 5, - pointBorderColor: 'transparent', - pointHoverBackgroundColor: blueLightColor, - pointHoverBorderColor: '#fff' - }, - { - label: 'Europe', - data: [240, 195, 160, 215, 185, 215, 185, 200, 250, 210, 195, 250, 235, 300, 315], - lineTension: 0, - backgroundColor: greyLightColor, - pointStyle: 'circle', - borderColor: 'transparent', - pointRadius: 0.5, - pointHoverRadius: 5, - pointHoverBorderWidth: 5, - pointBorderColor: 'transparent', - pointHoverBackgroundColor: greyLightColor, - pointHoverBorderColor: '#fff' - } - ] - } - + data + }; //** To add spacing between legends and chart const plugins = [ { beforeInit(chart) { chart.legend.afterFit = function () { - this.height += 20 - } + this.height += 20; + }; } } - ] + ]; return ( @@ -161,11 +45,11 @@ const ChartjsAreaChart = ({ labelColor, tooltipShadow, gridLineColor, blueColor,
- +
- ) -} + ); +}; -export default ChartjsAreaChart +export default ChartjsAreaChart; diff --git a/src/components/charts/chart-js/ChartjsBarChart.js b/src/components/charts/chart-js/ChartjsBarChart.js index abb6d1af..fc4ea040 100644 --- a/src/components/charts/chart-js/ChartjsBarChart.js +++ b/src/components/charts/chart-js/ChartjsBarChart.js @@ -1,109 +1,14 @@ -import React, { useState } from 'react' -import Flatpickr from 'react-flatpickr' -import DatePicker from "react-datepicker"; -import { Calendar } from 'react-feather' -import { Bar } from 'react-chartjs-2' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import { ko } from 'date-fns/esm/locale' -import "react-datepicker/dist/react-datepicker.css"; -const ChartjsBarChart = ({ tooltipShadow, gridLineColor, labelColor, successColorShade }) => { - const [startDate, setStartDate] = useState(new Date()); - const options = { - elements: { - rectangle: { - borderWidth: 2, - borderSkipped: 'bottom' - } - }, - responsive: true, - maintainAspectRatio: false, - responsiveAnimationDuration: 500, - legend: { - display: false - }, - tooltips: { - // Updated default tooltip UI - shadowOffsetX: 1, - shadowOffsetY: 1, - shadowBlur: 8, - shadowColor: tooltipShadow, - backgroundColor: '#fff', - titleFontColor: '#000', - bodyFontColor: '#000' - }, - scales: { - xAxes: [ - { - display: true, - gridLines: { - display: true, - color: gridLineColor, - zeroLineColor: gridLineColor - }, - scaleLabel: { - display: false - }, - ticks: { - fontColor: labelColor - } - } - ], - yAxes: [ - { - display: true, - gridLines: { - color: gridLineColor, - zeroLineColor: gridLineColor - }, - ticks: { - stepSize: 100, - min: 0, - max: 400, - fontColor: labelColor - } - } - ] - } - }, - data = { - labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'], - datasets: [ - { - data: [275, 90, 190, 205, 125, 85, 55, 87, 127, 150, 230, 280, 190, 220, 100, 300, 250, 10, 20, 30, 40, 50, 60], - backgroundColor: successColorShade, - borderColor: 'transparent', - barThickness: 15 - } - ] - } - +import { Bar } from 'react-chartjs-2'; + +const ChartjsBarChart = ({ data, options, plugins = [], topData = null }) => { return ( - - - 일 별 비행횟수 통계 -
-
- - setStartDate(date)} - dateFormat="yyy / MMMM" - showMonthYearPicker - showFullMonthYearPicker - showFourColumnMonthYearPicker - className='form-control bg-transparent border-0 shadow-none' - /> -
-
- - -
- -
- - - ) -} + + ); +}; -export default ChartjsBarChart +export default ChartjsBarChart; diff --git a/src/components/charts/chart-js/ChartjsDoughnutChart.js b/src/components/charts/chart-js/ChartjsDoughnutChart.js index 28b4a23f..6de39332 100644 --- a/src/components/charts/chart-js/ChartjsDoughnutChart.js +++ b/src/components/charts/chart-js/ChartjsDoughnutChart.js @@ -1,111 +1,19 @@ -import React, { useState } from 'react' -import { Doughnut } from 'react-chartjs-2' -import { Monitor, Tablet, ArrowDown, ArrowUp } from 'react-feather' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import Flatpickr from 'react-flatpickr' -import { Calendar } from 'react-feather' -import DatePicker from "react-datepicker"; -import { ko } from 'date-fns/esm/locale' -import "react-datepicker/dist/react-datepicker.css"; -const ChartjsRadarChart = ({ tooltipShadow, successColorShade, warningLightColor, primary, yellowColor, blueColor }) => { - const [startDate, setStartDate] = useState(new Date()); - const options = { - responsive: true, - maintainAspectRatio: false, - responsiveAnimationDuration: 500, - cutoutPercentage: 60, - legend: { display: false }, - tooltips: { - callbacks: { - label(tooltipItem, data) { - const label = data.datasets[0].labels[tooltipItem.index] || '', - value = data.datasets[0].data[tooltipItem.index] - const output = ` ${label} : ${value} %` - return output - } - }, - // Updated default tooltip UI - shadowOffsetX: 1, - shadowOffsetY: 1, - shadowBlur: 8, - shadowColor: tooltipShadow, - backgroundColor: '#fff', - titleFontColor: '#000', - bodyFontColor: '#000' - } - }, - data = { - datasets: [ - { - labels: ['경기도', '인천광역시', '충청북도', '세종시', '제주도'], - data: [10, 10, 10, 20, 80], - backgroundColor: [successColorShade, warningLightColor, primary, yellowColor, blueColor], - borderWidth: 0, - pointStyle: 'rectRounded' - } - ] - } +import { Doughnut } from 'react-chartjs-2'; +const ChartjsDoughnutChart = ({ + data, + options, + plugins = [], + topData = null +}) => { return ( - - - TOP5 지역 별 비행횟수 통계 - {/*
- - -
*/} -
-
- - setStartDate(date)} - dateFormat="yyy / MMMM" - showMonthYearPicker - showFullMonthYearPicker - showFourColumnMonthYearPicker - className='form-control bg-transparent border-0 shadow-none' - /> -
-
- - -
- -
-
-
- - 경기도 -
-
- - 인천광역시 -
-
- - 충청북도 -
-
- - 세종시 -
-
- - 제주도 -
-
- - - ) -} + + ); +}; -export default ChartjsRadarChart +export default ChartjsDoughnutChart; diff --git a/src/components/charts/chart-js/ChartjsLineChart.js b/src/components/charts/chart-js/ChartjsLineChart.js index d3b36c93..2cc64ec4 100644 --- a/src/components/charts/chart-js/ChartjsLineChart.js +++ b/src/components/charts/chart-js/ChartjsLineChart.js @@ -1,186 +1,17 @@ -import Flatpickr from 'react-flatpickr' -import { Calendar, Search } from 'react-feather' -import { Line } from 'react-chartjs-2' -import { Card, CardHeader, CardTitle, CardBody, CardSubtitle, Button } from 'reactstrap' +import { Line } from 'react-chartjs-2'; -const ChartjsLineChart = ({ - tooltipShadow, - gridLineColor, - labelColor, - warningColorShade, - lineChartDanger, - lineChartPrimary -}) => { - const options = { - responsive: true, - maintainAspectRatio: false, - backgroundColor: false, - legend: { - position: 'top', - labels: { - usePointStyle: true, - padding: 25, - boxWidth: 10 - } - }, - hover: { - mode: 'label' - }, - tooltips: { - // Updated default tooltip UI - shadowOffsetX: 1, - shadowOffsetY: 1, - shadowBlur: 8, - shadowColor: tooltipShadow, - backgroundColor: '#fff', - titleFontColor: '#000', - bodyFontColor: '#000' - }, - layout: { - padding: { - top: -15, - bottom: -25, - left: -15 - } - }, - scales: { - xAxes: [ - { - display: true, - scaleLabel: { - display: true - }, - gridLines: { - display: true, - color: gridLineColor, - zeroLineColor: gridLineColor - }, - ticks: { - fontColor: labelColor - } - } - ], - yAxes: [ - { - display: true, - scaleLabel: { - display: true - }, - ticks: { - stepSize: 100, - min: 0, - max: 400, - fontColor: labelColor - }, - gridLines: { - display: true, - color: gridLineColor, - zeroLineColor: gridLineColor - } - } - ] - }, - legend: { - position: 'top', - align: 'start', - labels: { - usePointStyle: true, - padding: 25, - boxWidth: 9 - } - } - }, - data = { - labels: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140], - datasets: [ - { - data: [80, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 360, 375], - label: 'Europe', - borderColor: lineChartDanger, - lineTension: 0.5, - pointStyle: 'circle', - backgroundColor: lineChartDanger, - fill: false, - pointRadius: 1, - pointHoverRadius: 5, - pointHoverBorderWidth: 5, - pointBorderColor: 'transparent', - pointHoverBorderColor: '#fff', - pointHoverBackgroundColor: lineChartDanger, - pointShadowOffsetX: 1, - pointShadowOffsetY: 1, - pointShadowBlur: 5, - pointShadowColor: tooltipShadow - }, - { - data: [80, 125, 105, 130, 215, 195, 140, 160, 230, 300, 220, 170, 210, 200, 280], - label: 'Asia', - borderColor: lineChartPrimary, - lineTension: 0.5, - pointStyle: 'circle', - backgroundColor: lineChartPrimary, - fill: false, - pointRadius: 1, - pointHoverRadius: 5, - pointHoverBorderWidth: 5, - pointBorderColor: 'transparent', - pointHoverBorderColor: '#fff', - pointHoverBackgroundColor: lineChartPrimary, - pointShadowOffsetX: 1, - pointShadowOffsetY: 1, - pointShadowBlur: 5, - pointShadowColor: tooltipShadow - }, - { - data: [80, 99, 82, 90, 115, 115, 74, 75, 130, 155, 125, 90, 140, 130, 180], - label: 'Africa', - borderColor: warningColorShade, - lineTension: 0.5, - pointStyle: 'circle', - backgroundColor: warningColorShade, - fill: false, - pointRadius: 1, - pointHoverRadius: 5, - pointHoverBorderWidth: 5, - pointBorderColor: 'transparent', - pointHoverBorderColor: '#fff', - pointHoverBackgroundColor: warningColorShade, - pointShadowOffsetX: 1, - pointShadowOffsetY: 1, - pointShadowBlur: 5, - pointShadowColor: tooltipShadow - } - ] - } - - //** To add spacing between legends and chart +const ChartjsLineChart = ({ data, options }) => { const plugins = [ { beforeInit(chart) { chart.legend.afterFit = function () { - this.height += 20 - } + this.height += 20; + }; } } - ] + ]; - return ( - - {/* -
-

비행 현황 목록

-
-
- 검색 -
- */} - -
- -
- - - ) -} + return ; +}; -export default ChartjsLineChart +export default ChartjsLineChart; diff --git a/src/components/dashboard/DashboardStcsArea.js b/src/components/dashboard/DashboardStcsArea.js index 762f62b8..923ac7f9 100644 --- a/src/components/dashboard/DashboardStcsArea.js +++ b/src/components/dashboard/DashboardStcsArea.js @@ -1,12 +1,12 @@ import { ko } from 'date-fns/esm/locale'; import { useEffect, useState } from 'react'; import { Plus } from 'react-feather'; -import { Doughnut } from 'react-chartjs-2'; + import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import { Calendar } from 'react-feather'; import { Card, CardBody, CardHeader, CardTitle } from 'reactstrap'; - +import ChartjsDoughnutChart from '../charts/chart-js/ChartjsDoughnutChart'; const tooltipShadow = 'rgba(0, 0, 0, 0.25)'; const warningLightColor = '#FDAC34'; const successColorShade = '#28dac6'; @@ -141,7 +141,7 @@ export const DashboardStcsArea = ({ }} > {Object.keys(chartData).length > 0 ? ( - + ) : (

표시할 데이터가 없습니다.

diff --git a/src/components/dashboard/DashboardStcsDay.js b/src/components/dashboard/DashboardStcsDay.js index f3280eb6..6b415ef3 100644 --- a/src/components/dashboard/DashboardStcsDay.js +++ b/src/components/dashboard/DashboardStcsDay.js @@ -2,7 +2,7 @@ import 'react-datepicker/dist/react-datepicker.css'; import { ko } from 'date-fns/esm/locale'; import { Plus } from 'react-feather'; import { useEffect, useState, useRef } from 'react'; -import { Bar } from 'react-chartjs-2'; +import ChartjsBarChart from '../charts/chart-js/ChartjsBarChart'; import DatePicker from 'react-datepicker'; import { Calendar } from 'react-feather'; import { Card, CardBody, CardHeader, CardTitle } from 'reactstrap'; @@ -143,7 +143,7 @@ export const DashboardStcsDay = ({
{Object.keys(chartData).length > 0 ? ( - + ) : (

표시할 데이터가 없습니다.

diff --git a/src/components/statistics/StatisticsSearch.js b/src/components/statistics/StatisticsSearch.js index 21de47c2..ffa4ced4 100644 --- a/src/components/statistics/StatisticsSearch.js +++ b/src/components/statistics/StatisticsSearch.js @@ -8,9 +8,9 @@ import { CustomInput } from 'reactstrap'; import { Search } from 'react-feather'; -import { Bar, Doughnut } from 'react-chartjs-2'; import { useEffect, useState } from 'react'; - +import ChartjsDoughnutChart from '../charts/chart-js/ChartjsDoughnutChart'; +import ChartjsBarChart from '../charts/chart-js/ChartjsBarChart'; // 그룹명 리스트 const competentAgency = [ { @@ -506,10 +506,9 @@ export default function StatisticsSearch({
-
@@ -525,11 +524,11 @@ export default function StatisticsSearch({
-
{/*