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({
-
{/*