Commit 060d5f35 authored by Spark's avatar Spark
Browse files

login logout chartjs

parent a3f2f757
...@@ -20,10 +20,6 @@ function App() { ...@@ -20,10 +20,6 @@ function App() {
if (isLs === null) { if (isLs === null) {
localStorage.setItem('login', false) localStorage.setItem('login', false)
} }
if (isLs === false || isLs === null) {
localStorage.setItem('local-code', '3743011')
}
} }
return ( return (
......
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
...@@ -13,14 +13,23 @@ function ChartHumidity() { ...@@ -13,14 +13,23 @@ function ChartHumidity() {
useEffect(() => { useEffect(() => {
if (isLogined()) { if (isLogined()) {
callUserInfo().then((res) => { axios.get(routesClient.userWeather, { withCredentials: true })
const outs = axios.get(routesClient.outsideLoc + res['loc_code']) .then((res) => {
console.log('>>', outs) 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 { else {
const locDefault = localStorage.getItem('local-code') axios.get(routesClient.outsideLoc + `3743011`)
axios.get(routesClient.outsideLoc + locDefault)
.then((res) => { .then((res) => {
const outWeather = res.data.contents.weather_out const outWeather = res.data.contents.weather_out
const Array = [] const Array = []
......
...@@ -13,14 +13,23 @@ function ChartPressure() { ...@@ -13,14 +13,23 @@ function ChartPressure() {
useEffect(() => { useEffect(() => {
if (isLogined()) { if (isLogined()) {
callUserInfo().then((res) => { axios.get(routesClient.userWeather, { withCredentials: true })
const outs = axios.get(routesClient.outsideLoc + res['loc_code']) .then((res) => {
console.log('>>', outs) 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 { else {
const locDefault = localStorage.getItem('local-code') axios.get(routesClient.outsideLoc + `3743011`)
axios.get(routesClient.outsideLoc + locDefault)
.then((res) => { .then((res) => {
const outWeather = res.data.contents.weather_out const outWeather = res.data.contents.weather_out
const Array = [] const Array = []
......
...@@ -13,13 +13,26 @@ function ChartTemp() { ...@@ -13,13 +13,26 @@ function ChartTemp() {
useEffect(() => { useEffect(() => {
if (isLogined()) { if (isLogined()) {
callUserInfo().then((res) => { axios.get(routesClient.userWeather, { withCredentials: true })
const outs = axios.get(routesClient.outsideLoc + res["loc_code"]); .then((res) => {
console.log(">>", outs); 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 { } else {
const locDefault = localStorage.getItem("local-code"); axios.get(routesClient.outsideLoc + `3743011`).then((res) => {
axios.get(routesClient.outsideLoc + locDefault).then((res) => {
const outWeather = res.data.contents.weather_out; const outWeather = res.data.contents.weather_out;
const Array = []; const Array = [];
const Array2 = []; const Array2 = [];
......
...@@ -13,14 +13,22 @@ function ChartWindSpeed() { ...@@ -13,14 +13,22 @@ function ChartWindSpeed() {
useEffect(() => { useEffect(() => {
if (isLogined()) { if (isLogined()) {
callUserInfo().then((res) => { axios.get(routesClient.userWeather, { withCredentials: true })
const outs = axios.get(routesClient.outsideLoc + res['loc_code']) .then((res) => {
console.log('>>', outs) 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 { else {
const locDefault = localStorage.getItem('local-code') axios.get(routesClient.outsideLoc + `3743011`)
axios.get(routesClient.outsideLoc + locDefault)
.then((res) => { .then((res) => {
const outWeather = res.data.contents.weather_out const outWeather = res.data.contents.weather_out
const Array = [] const Array = []
......
...@@ -4,7 +4,6 @@ import MainLayer from '../components/MainLayer'; ...@@ -4,7 +4,6 @@ import MainLayer from '../components/MainLayer';
import '../App.css' import '../App.css'
import EueSuggest from '../components/EueSuggest'; import EueSuggest from '../components/EueSuggest';
import ChartTemp from '../components/ChartTemp'; import ChartTemp from '../components/ChartTemp';
import ChartDoughnut from '../components/ChartDoughnut';
import Donation from '../components/Donation'; import Donation from '../components/Donation';
import LocCodeChange from '../components/LocCodeChange'; import LocCodeChange from '../components/LocCodeChange';
import { callUserInfo } from '../utils/CheckDB'; import { callUserInfo } from '../utils/CheckDB';
...@@ -67,7 +66,6 @@ function GetLocFirst() { ...@@ -67,7 +66,6 @@ function GetLocFirst() {
<Col md={6} style={col2sty}> <Col md={6} style={col2sty}>
<EueSuggest /> <EueSuggest />
<ChartTemp /> <ChartTemp />
<ChartDoughnut />
<Donation /> <Donation />
</Col> </Col>
......
...@@ -5,7 +5,6 @@ import '../App.css' ...@@ -5,7 +5,6 @@ import '../App.css'
import EueSuggest from '../components/EueSuggest'; import EueSuggest from '../components/EueSuggest';
import Donation from '../components/Donation'; import Donation from '../components/Donation';
import ChartTabs from '../components/ChartTabs'; import ChartTabs from '../components/ChartTabs';
import ChartDoughnut from '../components/ChartDoughnut';
function Home() { function Home() {
const constyled = { const constyled = {
...@@ -44,7 +43,6 @@ function Home() { ...@@ -44,7 +43,6 @@ function Home() {
<Col md={6} style={col2sty}> <Col md={6} style={col2sty}>
<EueSuggest /> <EueSuggest />
<ChartTabs /> <ChartTabs />
<ChartDoughnut />
<Donation /> <Donation />
</Col> </Col>
</Row> </Row>
......
...@@ -8,6 +8,8 @@ export const routesClient = { ...@@ -8,6 +8,8 @@ export const routesClient = {
usingAircon : '/api/toggle-aircon', usingAircon : '/api/toggle-aircon',
logout: '/api/logout', logout: '/api/logout',
userinfo : '/api/user-info', userinfo : '/api/user-info',
userWeather : 'api/data/user'
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment