.

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 (
     <CustomMainLayout title={titleName}>
       <div className='pal-card-box'>
@@ -160,6 +249,39 @@ export default function Flight() {
             </Col>
           </Row>
         </div>
+        <div>
+          <div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+            <div>
+              <h4>비행시간 통계</h4>
+            </div>
+            <div className='d-flex align-items-center'>
+              <Button.Ripple color='primary' size='sm'>
+                <Search size={16} />
+                검색
+              </Button.Ripple>
+            </div>
+          </div>
+          <Card>
+            <CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'>
+              <CardTitle tag='h4'>Latest Statistics</CardTitle>
+              <div className='d-flex align-items-center'>
+                <Calendar size={14} />
+                <Flatpickr
+                  options={{
+                    mode: 'range',
+                    defaultDate: ['2019-05-01', '2019-05-10']
+                  }}
+                  className='form-control flat-picker bg-transparent border-0 shadow-none'
+                />
+              </div>
+            </CardHeader>
+            <CardBody>
+              <div style={{ height: '400px' }}>
+                <Bar data={data} options={options} height={400} />
+              </div>
+            </CardBody>
+          </Card>
+        </div>
       </div>
     </CustomMainLayout>
   );