Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
eue
Commits
46008734
Commit
46008734
authored
Aug 04, 2021
by
KangMin An
Browse files
Merge branch 'who' into premaster
parents
cd675153
567ff9e8
Changes
8
Show whitespace changes
Inline
Side-by-side
client/src/App.css
View file @
46008734
@import
url(
'
https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap
'
)
;
@import
url(
"
https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap
"
)
;
body
{
body
{
font-family
:
"Noto Sans KR"
,
sans-serif
!important
;
font-family
:
"Noto Sans KR"
,
sans-serif
!important
;
...
@@ -13,21 +13,21 @@ body {
...
@@ -13,21 +13,21 @@ body {
min-height
:
100%
;
min-height
:
100%
;
}
}
#footer
{
#footer
{
position
:
relative
;
position
:
relative
;
bottom
:
1em
;
bottom
:
1em
;
padding-top
:
2em
;
padding-top
:
2em
;
}
}
.form-check-input
{
.form-check-input
{
cursor
:
pointer
;
cursor
:
pointer
;
box-shadow
:
none
!important
;
box-shadow
:
none
!important
;
}
}
.form-check-input
:checked
{
.form-check-input
:checked
{
background-color
:
#04
AB
70
!important
;
background-color
:
#04
ab
70
!important
;
border
:
none
;
border
:
none
;
}
}
#btnlink
{
#btnlink
{
color
:
white
!important
;
color
:
white
!important
;
...
@@ -60,7 +60,6 @@ body {
...
@@ -60,7 +60,6 @@ body {
font-weight
:
300
;
font-weight
:
300
;
}
}
.form-group
.form-control
{
.form-group
.form-control
{
border-radius
:
40px
;
border-radius
:
40px
;
}
}
...
@@ -90,6 +89,17 @@ body {
...
@@ -90,6 +89,17 @@ body {
width
:
fit-content
;
width
:
fit-content
;
}
}
.nav-tabs
{
justify-content
:
center
;
}
ul
li
.nav-link
{
color
:
#2b90d9
;
}
ul
li
.nav-link
:active
{
color
:
#04ab70
;
}
@media
(
max-width
:
767.98px
)
{
@media
(
max-width
:
767.98px
)
{
body
{
body
{
...
@@ -97,22 +107,27 @@ body {
...
@@ -97,22 +107,27 @@ body {
padding-left
:
20px
;
padding-left
:
20px
;
padding-right
:
20px
;
padding-right
:
20px
;
margin
:
auto
;
margin
:
auto
;
}
}
.container-fluid
{
.container-fluid
{
max-width
:
480px
!important
;
max-width
:
480px
!important
;
}
}
#stickyy
{
#stickyy
{
max-width
:
400px
;
max-width
:
400px
;
}
}
#chartTab
{
width
:
100%
;
height
:
40vh
;
display
:
flex
;
}
#contour
{
#contour
{
padding-bottom
:
1em
;
padding-bottom
:
1em
;
color
:
rgba
(
195
,
195
,
195
,
0.753
);
color
:
rgba
(
195
,
195
,
195
,
0.753
);
}
}
}
}
@media
(
min-width
:
768px
)
{
@media
(
min-width
:
768px
)
{
body
{
body
{
...
@@ -125,7 +140,6 @@ body {
...
@@ -125,7 +140,6 @@ body {
.container-fluid
{
.container-fluid
{
max-width
:
1000px
!important
;
max-width
:
1000px
!important
;
min-height
:
90%
;
min-height
:
90%
;
}
}
.container-fluid
.row
#stickyy
{
.container-fluid
.row
#stickyy
{
...
@@ -134,11 +148,14 @@ body {
...
@@ -134,11 +148,14 @@ body {
width
:
fit-content
;
width
:
fit-content
;
height
:
fit-content
;
height
:
fit-content
;
max-width
:
300px
;
max-width
:
300px
;
}
#chartTab
{
width
:
100%
;
height
:
70vh
;
display
:
flex
;
}
}
#contour
{
#contour
{
display
:
none
;
display
:
none
;
}
}
}
}
\ No newline at end of file
client/src/components/Chart
Line
.js
→
client/src/components/Chart
Humidity
.js
View file @
46008734
import
React
from
'
react
'
import
React
from
'
react
'
import
{
Row
,
Card
}
from
'
react-bootstrap
'
;
import
{
Col
}
from
'
react-bootstrap
'
;
import
{
Line
}
from
'
react-chartjs-2
'
import
{
Bar
,
Line
}
from
'
react-chartjs-2
'
function
ChartHumidity
()
{
function
ChartLine
()
{
const
cardstyled
=
{
const
cardstyled
=
{
margin
:
'
auto
'
,
margin
:
'
auto
'
,
padding
:
'
1em
'
,
padding
:
'
1em
'
,
...
@@ -36,18 +37,18 @@ function ChartLine() {
...
@@ -36,18 +37,18 @@ function ChartLine() {
labels
:
[
'
January
'
,
'
February
'
,
'
March
'
,
'
April
'
,
'
May
'
,
'
June
'
,
'
July
'
,
'
August
'
,
'
September
'
,
'
October
'
,
'
November
'
,
'
December
'
],
labels
:
[
'
January
'
,
'
February
'
,
'
March
'
,
'
April
'
,
'
May
'
,
'
June
'
,
'
July
'
,
'
August
'
,
'
September
'
,
'
October
'
,
'
November
'
,
'
December
'
],
datasets
:
[
datasets
:
[
{
{
label
:
'
온
도
'
,
label
:
'
습
도
'
,
fill
:
fals
e
,
fill
:
tru
e
,
lineTension
:
0.1
,
lineTension
:
0.1
,
backgroundColor
:
'
rgba(75,192,192,0.4)
'
,
backgroundColor
:
'
rgba(75,192,192,0.4)
'
,
borderColor
:
'
rgba(75,192,192,1)
'
,
borderColor
:
'
rgba(75,192,192,1)
'
,
borderCapStyle
:
'
butt
'
,
borderCapStyle
:
'
butt
'
,
borderDash
:
[
2
,
10
],
//점선 ex [2,10]
borderDash
:
[
8
,
8
],
//점선 ex [2,10]
borderDashOffset
:
0.0
,
borderDashOffset
:
0.0
,
borderJoinStyle
:
'
miter
'
,
borderJoinStyle
:
'
miter
'
,
pointBorderColor
:
'
rgba(75,192,192,1)
'
,
pointBorderColor
:
'
rgba(75,192,192,1)
'
,
pointBackgroundColor
:
'
#fff
'
,
pointBackgroundColor
:
'
#fff
'
,
pointBorderWidth
:
1
,
pointBorderWidth
:
6
,
pointHoverRadius
:
5
,
pointHoverRadius
:
5
,
pointHoverBackgroundColor
:
'
rgba(75,192,192,1)
'
,
pointHoverBackgroundColor
:
'
rgba(75,192,192,1)
'
,
pointHoverBorderColor
:
'
rgba(220,220,220,1)
'
,
pointHoverBorderColor
:
'
rgba(220,220,220,1)
'
,
...
@@ -60,16 +61,13 @@ function ChartLine() {
...
@@ -60,16 +61,13 @@ function ChartLine() {
};
};
return
(
return
(
<
Row
className
=
'
text-center w-100 my-2
'
>
<
Col
id
=
'
chartTab
'
>
<
Card
style
=
{
cardstyled
}
>
<
Line
<
Line
data
=
{
data
}
data
=
{
data
}
options
=
{
options
}
options
=
{
options
}
height
=
{
300
}
/
>
/
>
<
/Card
>
<
/Col
>
<
/Row
>
)
)
}
}
;
export
default
ChartLine
;
export
default
ChartHumidity
;
\ No newline at end of file
\ No newline at end of file
client/src/components/ChartPressure.js
0 → 100644
View file @
46008734
import
React
from
'
react
'
import
{
Row
,
Col
}
from
'
react-bootstrap
'
;
import
{
Bar
,
Line
}
from
'
react-chartjs-2
'
function
ChartPressure
()
{
const
options
=
{
legend
:
{
display
:
true
,
// label 보이기 여부
},
scales
:
{
yAxes
:
[{
display
:
true
,
ticks
:
{
min
:
900
,
max
:
1100
,
stepSize
:
20
}
}]
},
// maintainAspectRatio: false
}
const
data
=
{
labels
:
[
'
1
'
,
'
2
'
,
'
3
'
,
'
4
'
,
'
5
'
,
'
6
'
,
'
77
'
,
'
88
'
,
'
99
'
],
datasets
:
[
{
label
:
'
기압
'
,
data
:
[
1008
,
1007
,
1000
,
1010
,
1080
,
1020
,
1025
,
1080
,
1030
],
borderWidth
:
'
2
'
,
fill
:
true
,
borderColor
:
'
rgba(75,192,192)
'
,
backgroundColor
:
'
rgba(75,192,192,0.4)
'
,
tension
:
0.3
}
]
};
return
(
<
Col
id
=
'
chartTab
'
>
<
Line
data
=
{
data
}
options
=
{{
legend
:
{
display
:
true
,
// label 보이기 여부
},
scales
:
{
yAxes
:
[{
display
:
true
,
ticks
:
{
min
:
900
,
max
:
1100
,
stepSize
:
20
}
}]
},
// maintainAspectRatio: false
}}
/
>
<
/Col
>
)
};
export
default
ChartPressure
;
\ No newline at end of file
client/src/components/ChartTabs.js
0 → 100644
View file @
46008734
import
{
useState
}
from
"
react
"
;
import
{
Card
,
Row
,
Tab
,
Tabs
}
from
"
react-bootstrap
"
;
import
ChartTemp
from
'
./ChartTemp
'
;
import
ChartHumidity
from
'
./ChartHumidity
'
;
import
ChartWindSpeed
from
'
./ChartWindSpeed
'
;
import
ChartPressure
from
'
./ChartPressure
'
;
import
'
../App.css
'
function
ChartTabs
()
{
const
cardstyled
=
{
margin
:
'
auto
'
,
padding
:
'
1em
'
,
display
:
'
flex
'
,
justifyContent
:
'
center
'
,
width
:
'
100%
'
,
borderWidth
:
'
3px
'
,
borderRadius
:
'
20px
'
,
borderColor
:
'
rgb(110, 189, 142)
'
,
color
:
'
#04AB70
'
}
const
[
key
,
setKey
]
=
useState
(
'
temp
'
);
return
(
<
Row
className
=
'
text-center w-100 my-2
'
>
<
Card
style
=
{
cardstyled
}
>
<
Tabs
activeKey
=
{
key
}
onSelect
=
{(
k
)
=>
setKey
(
k
)}
className
=
"
mb-3
"
>
<
Tab
eventKey
=
"
temp
"
title
=
"
온도
"
>
<
ChartTemp
/>
<
/Tab
>
<
Tab
eventKey
=
"
humidity
"
title
=
"
습도
"
>
<
ChartHumidity
/>
<
/Tab
>
<
Tab
eventKey
=
"
windspeed
"
title
=
"
풍속
"
>
<
ChartWindSpeed
/>
<
/Tab
>
<
Tab
eventKey
=
"
pressure
"
title
=
"
기압
"
>
<
ChartPressure
/>
<
/Tab
>
<
/Tabs
>
<
/Card
>
<
/Row
>
)
}
export
default
ChartTabs
;
\ No newline at end of file
client/src/components/ChartTemp.js
0 → 100644
View file @
46008734
import
React
from
'
react
'
import
{
Col
}
from
'
react-bootstrap
'
;
import
{
Bar
}
from
'
react-chartjs-2
'
function
ChartTemp
()
{
const
options
=
{
legend
:
{
display
:
true
,
// label 보이기 여부
},
scales
:
{
yAxes
:
[{
ticks
:
{
min
:
0
,
// y축 스케일에 대한 최소값 설정
stepSize
:
1
,
// y축 그리드 한 칸당 수치
}
}]
},
// false : 사용자 정의 크기에 따라 그래프 크기가 결정됨.
// true : 크기가 알아서 결정됨.
maintainAspectRatio
:
false
}
const
data
=
{
labels
:
[
'
1
'
,
'
2
'
,
'
3
'
,
'
4
'
,
'
5
'
,
'
6
'
,
'
77
'
,
'
88
'
,
'
99
'
],
datasets
:
[
{
label
:
'
온도
'
,
borderWidth
:
'
2
'
,
data
:
[
18
,
22
,
25
,
31
,
28
,
25
,
18
,
6
,
-
8
],
borderColor
:
[
'
rgba(75,192,192,1)
'
,
'
rgba(75,192,192,1)
'
,
'
rgba(75,192,192,1)
'
,
'
rgba(75,192,192,1)
'
,
'
rgba(75,192,192,1)
'
,
'
rgba(75,192,192,1)
'
,
'
rgba(191,191,191,1)
'
,
'
rgba(191,191,191,1)
'
,
'
rgba(191,191,191,1)
'
],
backgroundColor
:
[
'
rgba(75,192,192,0.4)
'
,
'
rgba(75,192,192,0.4)
'
,
'
rgba(75,192,192,0.4)
'
,
'
rgba(75,192,192,0.4)
'
,
'
rgba(75,192,192,0.4)
'
,
'
rgba(75,192,192,0.4)
'
,
'
rgba(191,191,191,0.4)
'
,
'
rgba(191,191,191,0.4)
'
,
'
rgba(191,191,191,0.4)
'
]
}
]
};
return
(
<
Col
id
=
'
chartTab
'
>
<
Bar
data
=
{
data
}
options
=
{
options
}
/
>
<
/Col
>
)
};
export
default
ChartTemp
;
\ No newline at end of file
client/src/components/ChartWindSpeed.js
0 → 100644
View file @
46008734
import
React
from
'
react
'
import
{
Col
}
from
'
react-bootstrap
'
;
import
{
Bar
}
from
'
react-chartjs-2
'
function
ChartWindSpeed
()
{
const
options
=
{
legend
:
{
display
:
true
,
// label 보이기 여부
},
scales
:
{
yAxes
:
[{
ticks
:
{
min
:
800
,
// y축 스케일에 대한 최소값 설정
stepSize
:
1
,
// y축 그리드 한 칸당 수치
}
}]
},
// false : 사용자 정의 크기에 따라 그래프 크기가 결정됨.
// true : 크기가 알아서 결정됨.
maintainAspectRatio
:
false
}
const
data
=
{
labels
:
[
'
1
'
,
'
2
'
,
'
3
'
,
'
4
'
,
'
5
'
,
'
6
'
,
'
77
'
,
'
88
'
,
'
99
'
],
datasets
:
[
{
label
:
'
풍속
'
,
borderWidth
:
'
2
'
,
data
:
[
1008
,
1007
,
1000
,
999
,
1080
,
1020
,
1025
,
1080
,
1030
],
borderColor
:
'
rgba(75,192,192,1)
'
,
backgroundColor
:
'
rgba(75,192,192,0.4)
'
}
]
};
return
(
<
Col
id
=
'
chartTab
'
>
<
Bar
data
=
{
data
}
options
=
{
options
}
/
>
<
/Col
>
)
};
export
default
ChartWindSpeed
;
\ No newline at end of file
client/src/pages/GetLocFirst.js
View file @
46008734
...
@@ -3,7 +3,7 @@ import { Container, Row, Col, Modal } from 'react-bootstrap';
...
@@ -3,7 +3,7 @@ import { Container, Row, Col, Modal } from 'react-bootstrap';
import
MainLayer
from
'
../components/MainLayer
'
;
import
MainLayer
from
'
../components/MainLayer
'
;
import
'
../App.css
'
import
'
../App.css
'
import
EueSuggest
from
'
../components/EueSuggest
'
;
import
EueSuggest
from
'
../components/EueSuggest
'
;
import
Chart
Line
from
'
../components/Chart
Line
'
;
import
Chart
Temp
from
'
../components/Chart
Temp
'
;
import
ChartDoughnut
from
'
../components/ChartDoughnut
'
;
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
'
;
...
@@ -66,7 +66,7 @@ function GetLocFirst() {
...
@@ -66,7 +66,7 @@ function GetLocFirst() {
<
Col
md
=
{
6
}
style
=
{
col2sty
}
>
<
Col
md
=
{
6
}
style
=
{
col2sty
}
>
<
EueSuggest
/>
<
EueSuggest
/>
<
Chart
Line
/>
<
Chart
Temp
/>
<
ChartDoughnut
/>
<
ChartDoughnut
/>
<
Donation
/>
<
Donation
/>
<
/Col
>
<
/Col
>
...
...
client/src/pages/Home.js
View file @
46008734
...
@@ -3,9 +3,8 @@ import { Container, Row, Col } from 'react-bootstrap';
...
@@ -3,9 +3,8 @@ import { Container, Row, Col } from 'react-bootstrap';
import
MainLayer
from
'
../components/MainLayer
'
;
import
MainLayer
from
'
../components/MainLayer
'
;
import
'
../App.css
'
import
'
../App.css
'
import
EueSuggest
from
'
../components/EueSuggest
'
;
import
EueSuggest
from
'
../components/EueSuggest
'
;
import
ChartLine
from
'
../components/ChartLine
'
;
import
ChartDoughnut
from
'
../components/ChartDoughnut
'
;
import
Donation
from
'
../components/Donation
'
;
import
Donation
from
'
../components/Donation
'
;
import
ChartTabs
from
'
../components/ChartTabs
'
;
function
Home
()
{
function
Home
()
{
const
constyled
=
{
const
constyled
=
{
...
@@ -43,8 +42,7 @@ function Home() {
...
@@ -43,8 +42,7 @@ function Home() {
<
Col
md
=
{
6
}
style
=
{
col2sty
}
>
<
Col
md
=
{
6
}
style
=
{
col2sty
}
>
<
EueSuggest
/>
<
EueSuggest
/>
<
ChartLine
/>
<
ChartTabs
/>
<
ChartDoughnut
/>
<
Donation
/>
<
Donation
/>
<
/Col
>
<
/Col
>
<
/Row
>
<
/Row
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment