diff --git a/src/views/statistics/FlightView.js b/src/views/statistics/FlightView.js index 950ff298..536a4a2a 100644 --- a/src/views/statistics/FlightView.js +++ b/src/views/statistics/FlightView.js @@ -7,17 +7,106 @@ import { Col, Row, Card, + CardHeader, + CardTitle, CardBody, FormGroup, Input, CustomInput, Label } from 'reactstrap'; -import { Search } from 'react-feather'; +import { Search, Calendar } from 'react-feather'; import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc'; +import { Bar } from 'react-chartjs-2'; +import Flatpickr from 'react-flatpickr'; -export default function Flight() { +export default function Flight({ + tooltipShadow, + gridLineColor, + labelColor, + successColorShade +}) { const titleName = '비행 통계'; + 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: [ + '7/12', + '8/12', + '9/12', + '10/12', + '11/12', + '12/12', + '13/12', + '14/12', + '15/12', + '16/12', + '17/12' + ], + datasets: [ + { + data: [275, 90, 190, 205, 125, 85, 55, 87, 127, 150, 230, 280, 190], + backgroundColor: successColorShade, + borderColor: 'transparent', + barThickness: 15 + } + ] + }; return (
@@ -160,6 +249,39 @@ export default function Flight() {
+
+
+
+

비행시간 통계

+
+
+ + + 검색 + +
+
+ + + Latest Statistics +
+ + +
+
+ +
+ +
+
+
+
);