Skip to content

GitLab

Commit 840c7c7a authored by Spark's avatar Spark
Browse files

chart 분리

parent 060d5f35
Hide whitespace changes
Inline Side-by-side
client/src/components/ChartHumidity.js
View file @ 840c7c7a
...@@ -6,46 +6,7 @@ import { callUserInfo } from '../utils/CheckDB'; ...@@ -6,46 +6,7 @@ import { callUserInfo } from '../utils/CheckDB';
import { routesClient } from './../routesClient'; import { routesClient } from './../routesClient';
import { isLogined } from './../utils/Auth'; import { isLogined } from './../utils/Auth';
function ChartHumidity() { function ChartHumidity({humi, newLabel}) {
const [humi, setHumi] = useState([])
const [newLabel, setNewLabel] = useState([])
useEffect(() => {
if (isLogined()) {
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 {
axios.get(routesClient.outsideLoc + `3743011`)
.then((res) => {
const outWeather = res.data.contents.weather_out
const Array = []
const Array2 = []
for (let i = 0; i < outWeather.length; i++) {
Array.push(outWeather[i].humi)
Array2.push(outWeather[i].collected_at.split('T')[1].split('.')[0])
// const colHour = outWeather[i].collected_at.split('T')[1].split('.')[0].split(':')[0]
// const colMin = outWeather[i].collected_at.split('T')[1].split('.')[0].split(':')[1]
}
setHumi(Array)
setNewLabel(Array2)
})
}
}, [])
const options = { const options = {
legend: { legend: {
......
client/src/components/ChartPressure.js
View file @ 840c7c7a
...@@ -6,45 +6,7 @@ import { callUserInfo } from '../utils/CheckDB'; ...@@ -6,45 +6,7 @@ import { callUserInfo } from '../utils/CheckDB';
import { isLogined } from './../utils/Auth'; import { isLogined } from './../utils/Auth';
import { routesClient } from './../routesClient'; import { routesClient } from './../routesClient';
function ChartPressure() { function ChartPressure({press, newLabel}) {
const [press, setPress] = useState([])
const [newLabel, setNewLabel] = useState([])
useEffect(() => {
if (isLogined()) {
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 {
axios.get(routesClient.outsideLoc + `3743011`)
.then((res) => {
const outWeather = res.data.contents.weather_out
const Array = []
const Array2 = []
for (let i = 0; i < outWeather.length; i++) {
Array.push(outWeather[i].press)
Array2.push(outWeather[i].collected_at.split('T')[1].split('.')[0])
// const colHour = outWeather[i].collected_at.split('T')[1].split('.')[0].split(':')[0]
// const colMin = outWeather[i].collected_at.split('T')[1].split('.')[0].split(':')[1]
}
setPress(Array)
setNewLabel(Array2)
})
}
}, [])
const options = { const options = {
legend: { legend: {
......
client/src/components/ChartTabs.js
View file @ 840c7c7a
import { useState } from "react"; import { useEffect, useState } from "react";
import { Card, Row, Tab, Tabs } from "react-bootstrap"; import { Card, Row, Tab, Tabs } from "react-bootstrap";
import ChartTemp from './ChartTemp'; import ChartTemp from './ChartTemp';
import ChartHumidity from './ChartHumidity'; import ChartHumidity from './ChartHumidity';
import ChartWindSpeed from './ChartWindSpeed'; import ChartWindSpeed from './ChartWindSpeed';
import ChartPressure from './ChartPressure'; import ChartPressure from './ChartPressure';
import '../App.css' import '../App.css'
import { getWeatherOut } from './../utils/CheckDB';
import { isLogined } from './../utils/Auth'; import { isLogined } from './../utils/Auth';
import axios from "axios";
import { routesClient } from './../routesClient';
function ChartTabs() { function ChartTabs() {
...@@ -23,6 +24,87 @@ function ChartTabs() { ...@@ -23,6 +24,87 @@ function ChartTabs() {
} }
const [temp, setTemp] = useState([]);
const [press, setPress] = useState([]);
const [humi, setHumi] = useState([])
const [windSpd, setWindSpd] = useState([])
const [newLabel, setNewLabel] = useState([]);
const [tempNewLabel, setTempNewLabel] = useState([]);
useEffect(() => {
if (isLogined()) {
axios.get(routesClient.userWeather, { withCredentials: true })
.then((res) => {
console.log(res.data.contents.weather_in)
const userWeather = res.data.contents.weather_in
const userWeatherPredict = res.data.contents.weather_predict
const tempArray = []
const humiArray = []
const pressArray = []
const windspeedArray = []
const tempLabelArray = []
const labelArray = []
for (let i = 3; i < 9; i++) {
tempArray.push(userWeather[i].temp)
humiArray.push(userWeather[i].humi)
pressArray.push(userWeather[i].press)
windspeedArray.push(userWeather[i].wind_speed)
tempLabelArray.push(userWeather[i].collected_at.split('T')[1].split('.')[0])
labelArray.push(userWeather[i].collected_at.split('T')[1].split('.')[0])
}
for (let j = 0; j < 3; j++) {
tempArray.push(userWeatherPredict[j].temp)
tempLabelArray.push(userWeatherPredict[j].collected_at.split('T')[1].split('.')[0])
}
setTemp(tempArray)
setHumi(humiArray)
setPress(pressArray)
setWindSpd(windspeedArray)
setTempNewLabel(tempLabelArray)
setNewLabel(labelArray)
})
}
else {
axios.get(routesClient.outsideLoc + `3743011`).then((res) => {
const outWeather = res.data.contents.weather_out;
const tempArray = []
const humiArray = []
const pressArray = []
const windspeedArray = []
const tempLabelArray = []
const labelArray = []
let i = outWeather.length - 9;
for (i; i < outWeather.length; i++) {
tempArray.push(outWeather[i].temp)
humiArray.push(outWeather[i].humi)
pressArray.push(outWeather[i].press)
windspeedArray.push(outWeather[i].wind_speed)
tempLabelArray.push(outWeather[i].collected_at.split("T")[1].split(".")[0]);
labelArray.push(outWeather[i].collected_at.split("T")[1].split(".")[0]);
}
setTemp(tempArray)
setHumi(humiArray)
setPress(pressArray)
setWindSpd(windspeedArray)
setTempNewLabel(tempLabelArray);
setNewLabel(labelArray);
});
}
}, []);
//3743011 default //3743011 default
...@@ -36,16 +118,16 @@ function ChartTabs() { ...@@ -36,16 +118,16 @@ function ChartTabs() {
onSelect={(k) => setKey(k)} onSelect={(k) => setKey(k)}
className="mb-3" > className="mb-3" >
<Tab eventKey="temp" title="온도"> <Tab eventKey="temp" title="온도">
<ChartTemp /> <ChartTemp temp={temp} newLabel={tempNewLabel} />
</Tab> </Tab>
<Tab eventKey="humidity" title="습도"> <Tab eventKey="humidity" title="습도">
<ChartHumidity /> <ChartHumidity humi={humi} newLabel={newLabel} />
</Tab> </Tab>
<Tab eventKey="windspeed" title="풍속"> <Tab eventKey="windspeed" title="풍속">
<ChartWindSpeed /> <ChartWindSpeed windSpd={windSpd} newLabel={newLabel} />
</Tab> </Tab>
<Tab eventKey="pressure" title="기압"> <Tab eventKey="pressure" title="기압">
<ChartPressure /> <ChartPressure press={press} newLabel={newLabel} />
</Tab> </Tab>
</Tabs> </Tabs>
</Card> </Card>
......
client/src/components/ChartTemp.js
View file @ 840c7c7a
import React, { useState } from "react"; import React from "react";
import { Col } from "react-bootstrap"; import { Col } from "react-bootstrap";
import { Bar } from "react-chartjs-2"; import { Bar } from "react-chartjs-2";
import { callUserInfo, getWeather } from "../utils/CheckDB"; function ChartTemp({ temp, newLabel }) {
import { useEffect } from "react";
import axios from "axios";
import { routesClient } from "./../routesClient";
import { isLogined } from "./../utils/Auth";
function ChartTemp() {
const [temp, setTemp] = useState([]);
const [newLabel, setNewLabel] = useState([]);
useEffect(() => {
if (isLogined()) {
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 {
axios.get(routesClient.outsideLoc + `3743011`).then((res) => {
const outWeather = res.data.contents.weather_out;
const Array = [];
const Array2 = [];
console.log(outWeather);
let i = outWeather.length - 9;
for (i; i < outWeather.length; i++) {
Array.push(outWeather[i].temp);
Array2.push(outWeather[i].collected_at.split("T")[1].split(".")[0]);
}
setTemp(Array);
setNewLabel(Array2);
});
}
}, []);
const options = { const options = {
legend: { legend: {
......
client/src/components/ChartWindSpeed.js
View file @ 840c7c7a
...@@ -6,43 +6,8 @@ import { callUserInfo } from '../utils/CheckDB'; ...@@ -6,43 +6,8 @@ import { callUserInfo } from '../utils/CheckDB';
import { routesClient } from './../routesClient'; import { routesClient } from './../routesClient';
import { isLogined } from './../utils/Auth'; import { isLogined } from './../utils/Auth';
function ChartWindSpeed() { function ChartWindSpeed({windSpd, newLabel}) {
const [windSpd, setWindSpd] = useState([])
const [newLabel, setNewLabel] = useState([])
useEffect(() => {
if (isLogined()) {
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 {
axios.get(routesClient.outsideLoc + `3743011`)
.then((res) => {
const outWeather = res.data.contents.weather_out
const Array = []
const Array2 = []
for (let i = 0; i < outWeather.length; i++) {
Array.push(outWeather[i].wind_speed)
Array2.push(outWeather[i].collected_at.split('T')[1].split('.')[0])
}
setWindSpd(Array)
setNewLabel(Array2)
})
}
}, [])
const options = { const options = {
legend: { legend: {
display: true, // label 보이기 여부 display: true, // label 보이기 여부
......
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