Merge pull request #125 from TABA-4th/dev

merge dev branch
TABA-4th · Dec 13, 2023 · ef7b6f6 · ef7b6f6
2 parents 43d63cf + 93d27aa
commit ef7b6f6
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 29 deletions.
diff --git a/src/views/examples/ResultPage.jsx b/src/views/examples/ResultPage.jsx
@@ -1,5 +1,4 @@
 import React, {useState} from 'react';
-import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import ResultGraph from 'views/index-sections/ResultChart';
 import VBarChart from 'views/index-sections/verticalBarChart';
@@ -111,14 +110,18 @@ function renderAvgGraphData(DATA) {
 }
 
 const renderRankText = (d) => {
+  const resultTextStyle = {
+    // marginBottom: 'px',
+  };
+
   return (
     <>
-      <h4> 미세각질 항목은 <span style={{color: 'red'}}>상위 {d.FINE_DEAD_SKIN_CELLS}%</span>입니다.</h4>
-      <h4> 피지과다 항목은 <span style={{color: 'red'}}>상위 {d.EXCESS_SEBUM}%</span>입니다.</h4>
-      <h4> 모낭간 홍반 항목 <span style={{color: 'red'}}>상위 {d.ERYTHEMA_BETWEEN_HAIR_FOLLICLES}%</span>입니다.</h4>
-      <h4> 비듬 항목은 상위 <span style={{color: 'red'}}>상위 {d.DANDRUFF}%</span>입니다.</h4>
-      <h4> 탈모위험성 항목은 <span style={{color: 'red'}}>상위 {d.HAIR_LOSS}%</span>입니다.</h4>
-      <h4> 모낭간 홍반농포 항목은 <span style={{color: 'red'}}>상위 {d.ERYTHEMA_PUSTULES}%</span>입니다.</h4>
+      <h5 style={resultTextStyle}> 미세각질 항목은 <span style={{color: 'red'}}>상위 {d.FINE_DEAD_SKIN_CELLS}%</span>입니다.</h5>
+      <h5 style={resultTextStyle}> 피지과다 항목은 <span style={{color: 'red'}}>상위 {d.EXCESS_SEBUM}%</span>입니다.</h5>
+      <h5 style={resultTextStyle}> 모낭간 홍반 항목 <span style={{color: 'red'}}>상위 {d.ERYTHEMA_BETWEEN_HAIR_FOLLICLES}%</span>입니다.</h5>
+      <h5 style={resultTextStyle}> 비듬 항목은 상위 <span style={{color: 'red'}}>상위 {d.DANDRUFF}%</span>입니다.</h5>
+      <h5 style={resultTextStyle}> 탈모위험성 항목은 <span style={{color: 'red'}}>상위 {d.HAIR_LOSS}%</span>입니다.</h5>
+      <h5 style={resultTextStyle}> 모낭간 홍반농포 항목은 <span style={{color: 'red'}}>상위 {d.ERYTHEMA_PUSTULES}%</span>입니다.</h5>
     </>
   );
 }
@@ -163,12 +166,6 @@ function ResultPage () {
 
   return (
     <>
-      {document.getElementById("GraphExplanation") ? 
-      <UncontrolledTooltip placement="top" target="GraphExplanation">
-            <p>육각형이 클수록 <span style={{color: 'blue'}}>양호하다는 것을</span>
-            작을수록 <span style={{color: 'red'}}>좋지않다는 것을</span>의미합니다.</p>
-      </UncontrolledTooltip> : <></>}
-
       {isMobile?
         <>
         <IndexNavbar />
@@ -210,12 +207,12 @@ function ResultPage () {
                             √ 검사결과 자세히 보기
                           </Button>
                           <Collapse isOpen={collapseIsOpen}>
-                            <div id="GraphExplanation">
+                            <div>
                               <ResultGraph old={old} graphData={renderGraphData(diagnosisData)} avgGraphData={renderAvgGraphData(diagnosisData)} />
                             </div>
                             <div className="text-center">
                               {renderRankText(diagnosisData)}
-                          </div>
+                            </div>
                           </Collapse>
                         </div>
                       </div>
@@ -274,7 +271,7 @@ function ResultPage () {
                           √ 검사결과 자세히 보기
                         </Button>
                         <Collapse isOpen={collapseIsOpen} >
-                          <div id="GraphExplanation">
+                          <div>
                               <ResultGraph old={old} graphData={renderGraphData(diagnosisData)} avgGraphData={renderAvgGraphData(diagnosisData)} />
                           </div>                          
                           <div className="text-center">

diff --git a/src/views/index-sections/Calendar.jsx b/src/views/index-sections/Calendar.jsx
@@ -28,7 +28,7 @@ function format2Json(d){
     "topPercentage": "67.2 70.3 42.9 48.4 38.8 49.0 84.1"
 }
   */
-  console.log(d.topPercentage);
+  // console.log(d.topPercentage);
   const rowDataArray = d.topPercentage.split(" ").map(Number);
 
   const JSONData = {
@@ -277,16 +277,36 @@ const getDetailResult = async (d) => {
         border:"1px solid #fff",
         width:"200px",
         height:"51px",
-        fontWeight: "#fff",
         fontWeight: '700',
         fontSize:"13px",
         paddingTop: "15px",
         borderRadius: "13px",
-
       }}>파마&염색 기록하기</Button>
       <br /><br />
       <FullCalendar
-        defaultView={defaultView}
+        //   customButtons={{
+        //     myCustomButton: {
+        //         text: 'custom!',
+        //         click: function() {
+        //             alert('clicked the custom button!');
+        //         },
+        //         style : {
+        //           background:"#90d8de",
+        //           border:"1px solid #fff",
+        //           width:"200px",
+        //           height:"51px",
+        //           fontWeight: '700',
+        //           fontSize:"13px",
+        //           paddingTop: "15px",
+        //           borderRadius: "13px",
+        //         }
+        //     },
+        // }}
+        headerToolbar={{
+            left: 'prev',
+            center: 'title',
+            right: 'next'
+        }}
         plugins={[dayGridPlugin]}
         eventClick={handleDateClick}
         events={events}

diff --git a/src/views/index-sections/ResultChart.jsx b/src/views/index-sections/ResultChart.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Radar } from 'react-chartjs-2';
 import { Chart as ChartJS, RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend } from 'chart.js';
+import {UncontrolledTooltip} from 'reactstrap';
 
 ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend);
 
@@ -71,7 +72,7 @@ function ResultGraph(props) {
     ],
   };
   const chartOptions = {
-    maintainAspectRatio: false,
+    maintainAspectRatio: true,
     scales: {
       r: {
         suggestedMin: -1,
@@ -99,17 +100,26 @@ function ResultGraph(props) {
 
   const chartStyle = {
     width: '100%',
-    height: '600px', 
+    height: '100%', 
   };
 
   return (
-    <div style={{ marginTop: 30, marginBottom: 30, }}> 
-      <Radar 
-        data={data}
-        options={chartOptions}
-        style={chartStyle}
-      />
-    </div>
+    <>
+      <div>
+        {document.getElementById("GraphExplanation") ? 
+        <UncontrolledTooltip placement="top" target="GraphExplanation">
+            <p>육각형이 클수록 <span style={{color: 'blue'}}>양호하다는 것을</span>
+              작을수록 <span style={{color: 'red'}}>좋지않다는 것을</span>의미합니다.</p>
+        </UncontrolledTooltip> : <></>}
+      </div>
+      <div id="GraphExplanation" style={{ marginTop: 30, marginBottom: 30, width: '100%', overflowX: 'auto'}}> 
+        <Radar 
+          data={data}
+          options={chartOptions}
+          style={chartStyle}
+        />
+      </div>
+    </>
   );
 };