login logout chartjs

client/src/App.js

@@ -20,10 +20,6 @@ function App() {
     if (isLs === null) {
       localStorage.setItem('login', false)
     }
-    if (isLs === false || isLs === null) {
-      localStorage.setItem('local-code', '3743011')
-
-    }
   }
 
   return (

client/src/components/ChartDoughnut.js

-import React from 'react'
-import {  Row, Card } from 'react-bootstrap';
-import { Doughnut } from 'react-chartjs-2'
-
-function ChartDoughnut() {
-    const cardstyled = {
-        margin: 'auto',
-        padding: '1em',
-        display: 'flex',
-        justifyContent: 'center',
-        width: '100%',
-        borderWidth: '3px',
-        borderRadius: '20px',
-        borderColor: 'rgb(110, 189, 142)',
-        color: '#04AB70'
-    }
-
-    const options = {
-        legend: {
-            display: true, // label 보이기 여부
-        },
-        scales: {
-            yAxes: [{
-                ticks: {
-                    min: 0, // y축 스케일에 대한 최소값 설정
-                    stepSize: 1, // y축 그리드 한 칸당 수치
-                }
-            }]
-        },
-
-        // false : 사용자 정의 크기에 따라 그래프 크기가 결정됨.
-        // true : 크기가 알아서 결정됨.
-        maintainAspectRatio: false
-    }
-    const data = {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-        datasets: [
-          {
-            label: '온도',
-            fill: false,
-            lineTension: 0.1,
-            backgroundColor: 'rgba(75,192,192,0.4)',
-            borderColor: 'rgba(75,192,192,1)',
-            borderCapStyle: 'butt',
-            borderDash: [2,10], //점선
-            borderDashOffset: 0.0,
-            borderJoinStyle: 'miter',
-            pointBorderColor: 'rgba(75,192,192,1)',
-            pointBackgroundColor: '#fff',
-            pointBorderWidth: 1,
-            pointHoverRadius: 5,
-            pointHoverBackgroundColor: 'rgba(75,192,192,1)',
-            pointHoverBorderColor: 'rgba(220,220,220,1)',
-            pointHoverBorderWidth: 2,
-            pointRadius: 1,
-            pointHitRadius: 10,
-            data: [-10, -2, 13, 18, 22, 25, 31, 28, 25, 18, 6, -8]
-          }
-        ]
-      };
-
-    return (
-
-        <>
-            <Row className='text-center w-100 my-2'>
-                <Card style={cardstyled}>
-                    <Doughnut
-                        data={data}
-                        options={options}
-                        height={300}
-                    />
-                </Card>
-            </Row>
-        </>
-    )
-}
-
-export default ChartDoughnut;
\ No newline at end of file

client/src/components/ChartHumidity.js

@@ -13,14 +13,23 @@ function ChartHumidity() {
 
     useEffect(() => {
         if (isLogined()) {
-            callUserInfo().then((res) => {
-                const outs = axios.get(routesClient.outsideLoc + res['loc_code'])
-                console.log('>>', outs)
+            axios.get(routesClient.userWeather, { withCredentials: true })
+                .then((res) => {
+                    console.log('humi', res.data.contents.weather_in)
+                    const userWeather = res.data.contents.weather_in
+                    const Array = []
+                    const Array2 = []
+                    for (let i = 0; i < userWeather.length; i++) {
+                        Array.push(userWeather[i].humi)
+                        Array2.push(userWeather[i].collected_at.split('T')[1].split('.')[0])
+                    }
+                    setHumi(Array)
+                    setNewLabel(Array2)
+
                 })
         }
         else {
-            const locDefault = localStorage.getItem('local-code')
-            axios.get(routesClient.outsideLoc + locDefault)
+            axios.get(routesClient.outsideLoc + `3743011`)
                 .then((res) => {
                     const outWeather = res.data.contents.weather_out
                     const Array = []

client/src/components/ChartPressure.js

@@ -13,14 +13,23 @@ function ChartPressure() {
 
     useEffect(() => {
         if (isLogined()) {
-            callUserInfo().then((res) => {
-                const outs = axios.get(routesClient.outsideLoc + res['loc_code'])
-                console.log('>>', outs)
+            axios.get(routesClient.userWeather, { withCredentials: true })
+                .then((res) => {
+                    console.log('press', res.data.contents)
+                    const userWeather = res.data.contents.weather_in
+                    const Array = []
+                    const Array2 = []
+                    for (let i = 0; i < userWeather.length; i++) {
+                        Array.push(userWeather[i].press)
+                        Array2.push(userWeather[i].collected_at.split('T')[1].split('.')[0])
+                    }
+                    setPress(Array)
+                    setNewLabel(Array2)
+
                 })
         }
         else {
-            const locDefault = localStorage.getItem('local-code')
-            axios.get(routesClient.outsideLoc + locDefault)
+            axios.get(routesClient.outsideLoc + `3743011`)
                 .then((res) => {
                     const outWeather = res.data.contents.weather_out
                     const Array = []

client/src/components/ChartTemp.js

@@ -13,13 +13,26 @@ function ChartTemp() {
 
   useEffect(() => {
     if (isLogined()) {
-      callUserInfo().then((res) => {
-        const outs = axios.get(routesClient.outsideLoc + res["loc_code"]);
-        console.log(">>", outs);
-      });
+      axios.get(routesClient.userWeather, { withCredentials: true })
+        .then((res) => {
+          console.log('temp', res.data.contents)
+          const userWeather = res.data.contents.weather_in
+          const userWeatherPredict = res.data.contents.weather_predict
+          const Array = []
+          const Array2 = []
+          for (let i = 3; i < 9; i++) {
+            Array.push(userWeather[i].temp)
+            Array2.push(userWeather[i].collected_at.split('T')[1].split('.')[0])
+          }
+          for (let j = 0; j < 3; j++) {
+            Array.push(userWeatherPredict[j].temp)
+            Array2.push(userWeatherPredict[j].collected_at.split('T')[1].split('.')[0])
+          }
+          setTemp(Array)
+          setNewLabel(Array2)
+        })
     } else {
-      const locDefault = localStorage.getItem("local-code");
-      axios.get(routesClient.outsideLoc + locDefault).then((res) => {
+      axios.get(routesClient.outsideLoc + `3743011`).then((res) => {
         const outWeather = res.data.contents.weather_out;
         const Array = [];
         const Array2 = [];

client/src/components/ChartWindSpeed.js

@@ -13,14 +13,22 @@ function ChartWindSpeed() {
 
     useEffect(() => {
         if (isLogined()) {
-            callUserInfo().then((res) => {
-                const outs = axios.get(routesClient.outsideLoc + res['loc_code'])
-                console.log('>>', outs)
+            axios.get(routesClient.userWeather, { withCredentials: true })
+                .then((res) => {
+                    console.log('windsp', res.data.contents)
+                    const userWeather = res.data.contents.weather_in
+                    const Array = []
+                    const Array2 = []
+                    for (let i = 0; i < userWeather.length; i++) {
+                        Array.push(userWeather[i].wind_speed)
+                        Array2.push(userWeather[i].collected_at.split('T')[1].split('.')[0])
+                    }
+                    setWindSpd(Array)
+                    setNewLabel(Array2)
                 })
         }
         else {
-            const locDefault = localStorage.getItem('local-code')
-            axios.get(routesClient.outsideLoc + locDefault)
+            axios.get(routesClient.outsideLoc + `3743011`)
                 .then((res) => {
                     const outWeather = res.data.contents.weather_out
                     const Array = []

client/src/pages/GetLocFirst.js

@@ -4,7 +4,6 @@ import MainLayer from '../components/MainLayer';
 import '../App.css'
 import EueSuggest from '../components/EueSuggest';
 import ChartTemp from '../components/ChartTemp';
-import ChartDoughnut from '../components/ChartDoughnut';
 import Donation from '../components/Donation';
 import LocCodeChange from '../components/LocCodeChange';
 import { callUserInfo } from '../utils/CheckDB';
@@ -67,7 +66,6 @@ function GetLocFirst() {
                     <Col md={6} style={col2sty}>
                         <EueSuggest />
                         <ChartTemp />
-                        <ChartDoughnut />
                         <Donation />
                     </Col>
 

client/src/pages/Home.js

@@ -5,7 +5,6 @@ import '../App.css'
 import EueSuggest from '../components/EueSuggest';
 import Donation from '../components/Donation';
 import ChartTabs from '../components/ChartTabs';
-import ChartDoughnut from '../components/ChartDoughnut';
 
 function Home() {
     const constyled = {
@@ -44,7 +43,6 @@ function Home() {
                     <Col md={6} style={col2sty}>
                         <EueSuggest />
                         <ChartTabs />
-                        <ChartDoughnut />
                         <Donation />
                     </Col>
                 </Row>

client/src/routesClient.js

@@ -8,6 +8,8 @@ export const routesClient = {
   usingAircon : '/api/toggle-aircon',
   logout: '/api/logout',
   userinfo : '/api/user-info',
+  userWeather : 'api/data/user'
+  
 
 }