통계화면

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}

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 (
     <CustomMainLayout title={titleName}>
-      <div className='pal-card-box'>
+      <div className='pal-card-box statistics'>
         <div>
           <Row>
             <Col md='4'>
@@ -250,29 +323,63 @@ export default function Flight({
           </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>
+          <Row className='mt-2'>
+            <Col md='8' className='chart-wrap'>
+              <Card>
+                <CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'>
+                  <CardTitle tag='h4'>비행 시간 통계</CardTitle>
+                  <div className='select-date-wrap'>
+                    <Row>
+                      <div className='select-date'>
+                        <CustomInput inline type='select' id='' bsSize='sm'>
+                          <option>년</option>
+                          <option>월</option>
+                          <option>일</option>
+                          <option>시간</option>
+                        </CustomInput>
                       </div>
-            <div className='d-flex align-items-center'>
-              <Button.Ripple color='primary' size='sm'>
-                <Search size={16} />
-                검색
-              </Button.Ripple>
+                      <div className='select-date'>
+                        <CustomInput inline type='select' id='' bsSize='sm'>
+                          <option>2023</option>
+                          <option>2022</option>
+                          <option>2021</option>
+                        </CustomInput>
                       </div>
+                      <div className='select-date'>
+                        <CustomInput
+                          inline
+                          type='select'
+                          id=''
+                          bsSize='sm'
+                          value='월'
+                        >
+                          <option>1</option>
+                          <option>1</option>
+                          <option>1</option>
+                        </CustomInput>
                       </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} />
+                      <div className='select-date'>
+                        <CustomInput
+                          inline
+                          type='select'
+                          id=''
+                          bsSize='sm'
+                          value='일'
+                        >
+                          <option>1</option>
+                          <option>1</option>
+                          <option>1</option>
+                        </CustomInput>
+                      </div>
+                    </Row>
+                    {/* <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>
@@ -281,6 +388,23 @@ export default function Flight({
                   </div>
                 </CardBody>
               </Card>
+            </Col>
+            <Col md='4' className='chart-wrap'>
+              <Card>
+                <CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'>
+                  <CardTitle tag='h4'>비행시간 TOP5</CardTitle>
+                </CardHeader>
+                <CardBody>
+                  <div style={{ height: '275px' }}>
+                    <Doughnut data={data2} options={options2} height={275} />
+                  </div>
+                  {/* <div className='d-flex justify-content-between mt-3 mb-1'>
+                    <div className='d-flex align-items-center'></div>
+                  </div> */}
+                </CardBody>
+              </Card>
+            </Col>
+          </Row>
         </div>
       </div>
     </CustomMainLayout>