diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 8b26ba8..f4061b9 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -1131,3 +1131,8 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;} background: #ffefec!important; border-color: #ffefec!important; box-shadow: -5px 0 0 #ffefec, 5px 0 0 #ffefec!important; } + +.statistics .chart-wrap .card {min-height:520px} +.statistics .card .card-title{font-size:1.125rem} +.statistics .select-date-wrap{padding-left:1rem;padding-right:1rem} +.statistics .select-date + .select-date{margin-left:0.5rem} \ No newline at end of file diff --git a/src/views/statistics/FlightView.js b/src/views/statistics/FlightView.js index 536a4a2..fc1d41e 100644 --- a/src/views/statistics/FlightView.js +++ b/src/views/statistics/FlightView.js @@ -15,16 +15,25 @@ import { CustomInput, Label } from 'reactstrap'; -import { Search, Calendar } from 'react-feather'; +import { + Search, + Calendar, + Monitor, + Tablet, + ArrowDown, + ArrowUp +} from 'react-feather'; import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc'; -import { Bar } from 'react-chartjs-2'; +import { Bar, Doughnut, Polar } from 'react-chartjs-2'; import Flatpickr from 'react-flatpickr'; export default function Flight({ tooltipShadow, gridLineColor, labelColor, - successColorShade + successColorShade, + warningLightColor, + primary }) { const titleName = '비행 통계'; const options = { @@ -101,15 +110,79 @@ export default function Flight({ datasets: [ { data: [275, 90, 190, 205, 125, 85, 55, 87, 127, 150, 230, 280, 190], - backgroundColor: successColorShade, - borderColor: 'transparent', + backgroundColor: '#00bcd4', + borderColor: '#00bcd4', barThickness: 15 } ] }; + + const options2 = { + responsive: true, + maintainAspectRatio: true, + responsiveAnimationDuration: 500, + cutoutPercentage: 60, + legend: { + position: 'bottom', + labels: { + usePointStyle: true, + padding: 18, + boxWidth: 8, + fontColor: labelColor, + fontSize: 14, + fontWeight: 500, + fontFamily: ['Rubik', 'Montserrat', 'NotoSansKR'] + } + }, + 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; + } + }, + shadowOffsetX: 1, + shadowOffsetY: 1, + shadowBlur: 8, + shadowColor: tooltipShadow, + backgroundColor: '#fff', + titleFontColor: '#000', + bodyFontColor: '#000' + } + }, + data2 = { + labels: ['PA0001', 'PA0002', 'PA0003', 'PA0004', 'PA0005'], + datasets: [ + { + labels: ['PA0001', 'PA0002', 'PA0003', 'PA0004', 'PA0005'], + data: [10, 20, 30, 40, 80], + //레드버전 + // backgroundColor: [ + // '#ffe8d1', + // '#ffb59e', + // '#f0826b', + // '#Bd4f38', + // '#8a1c05' + // ], + + backgroundColor: [ + '#ccffff', + '#99ffff', + '#66ffff', + '#33efff', + '#00bcd4' + ], + borderWidth: 0, + pointStyle: 'rectRounded' + } + ] + }; + return ( -
+
@@ -250,37 +323,88 @@ export default function Flight({
-
-
-

비행시간 통계

-
-
- - - 검색 - -
-
- - - Latest Statistics -
- - -
-
- -
- -
-
-
+ + + + + 비행 시간 통계 +
+ +
+ + + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ {/* + */} +
+
+ +
+ +
+
+
+ + + + + 비행시간 TOP5 + + +
+ +
+ {/*
+
+
*/} +
+
+ +