Skip to content

GitLab

Commit 567ff9e8 authored by Spark's avatar Spark
Browse files

chartjs

parent dbb80397
Hide whitespace changes
Inline Side-by-side
client/src/App.css
View file @ 567ff9e8
@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: #04AB70 !important; background-color: #04ab70 !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,29 +89,45 @@ body { ...@@ -90,29 +89,45 @@ body {
width: fit-content; width: fit-content;
} }
.nav-tabs {
justify-content: center;
}
ul li .nav-link {
color: #2b90d9;
}
@media (max-width: 767.98px) { ul li .nav-link:active {
color: #04ab70;
}
@media (max-width: 767.98px) {
body { body {
padding: 30px; padding: 30px;
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/ChartLine.js → client/src/components/ChartHumidity.js
View file @ 567ff9e8
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: false, fill: true,
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} </Col>
/>
</Card>
</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 @ 567ff9e8
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 @ 567ff9e8
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 @ 567ff9e8
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 @ 567ff9e8
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 @ 567ff9e8
...@@ -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 ChartLine from '../components/ChartLine'; import ChartTemp from '../components/ChartTemp';
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 />
<ChartLine /> <ChartTemp />
<ChartDoughnut /> <ChartDoughnut />
<Donation /> <Donation />
</Col> </Col>
......
client/src/pages/Home.js
View file @ 567ff9e8
...@@ -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>
......
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