Skip to content

GitLab

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

chartjs

parent dbb80397
Show 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 {
font-family: "Noto Sans KR", sans-serif !important;
......@@ -13,21 +13,21 @@ body {
min-height: 100%;
}
#footer{
#footer {
position: relative;
bottom: 1em;
padding-top: 2em;
}
.form-check-input{
.form-check-input {
cursor: pointer;
box-shadow: none !important;
}
.form-check-input:checked {
background-color: #04AB70 !important;
background-color: #04ab70 !important;
border: none;
}
}
#btnlink {
color: white !important;
......@@ -60,7 +60,6 @@ body {
font-weight: 300;
}
.form-group .form-control {
border-radius: 40px;
}
......@@ -90,6 +89,17 @@ body {
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) {
body {
......@@ -97,22 +107,27 @@ body {
padding-left: 20px;
padding-right: 20px;
margin: auto;
}
.container-fluid {
max-width: 480px !important;
}
#stickyy {
max-width: 400px;
}
#chartTab {
width: 100%;
height: 40vh;
display: flex;
}
#contour {
padding-bottom: 1em;
color: rgba(195, 195, 195, 0.753);
}
}
}
@media (min-width: 768px) {
body {
......@@ -125,7 +140,6 @@ body {
.container-fluid {
max-width: 1000px !important;
min-height: 90%;
}
.container-fluid .row #stickyy {
......@@ -134,11 +148,14 @@ body {
width: fit-content;
height: fit-content;
max-width: 300px;
}
#chartTab {
width: 100%;
height: 70vh;
display: flex;
}
#contour {
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 { Row, Card } from 'react-bootstrap';
import { Line } from 'react-chartjs-2'
import { Col } from 'react-bootstrap';
import { Bar, Line } from 'react-chartjs-2'
function ChartHumidity() {
function ChartLine() {
const cardstyled = {
margin: 'auto',
padding: '1em',
......@@ -36,18 +37,18 @@ function ChartLine() {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: '온도',
fill: false,
label: '습도',
fill: true,
lineTension: 0.1,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [2, 10], //점선 ex [2,10]
borderDash: [8, 8], //점선 ex [2,10]
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointBorderWidth: 6,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
......@@ -60,16 +61,13 @@ function ChartLine() {
};
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Col id='chartTab'>
<Line
data={data}
options={options}
height={300}
/>
</Card>
</Row>
</Col>
)
}
};
export default ChartLine;
\ No newline at end of file
export default ChartHumidity;
\ 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';
import MainLayer from '../components/MainLayer';
import '../App.css'
import EueSuggest from '../components/EueSuggest';
import ChartLine from '../components/ChartLine';
import ChartTemp from '../components/ChartTemp';
import ChartDoughnut from '../components/ChartDoughnut';
import Donation from '../components/Donation';
import LocCodeChange from '../components/LocCodeChange';
......@@ -66,7 +66,7 @@ function GetLocFirst() {
<Col md={6} style={col2sty}>
<EueSuggest />
<ChartLine />
<ChartTemp />
<ChartDoughnut />
<Donation />
</Col>
......
client/src/pages/Home.js
View file @ 567ff9e8
......@@ -3,9 +3,8 @@ import { Container, Row, Col } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import '../App.css'
import EueSuggest from '../components/EueSuggest';
import ChartLine from '../components/ChartLine';
import ChartDoughnut from '../components/ChartDoughnut';
import Donation from '../components/Donation';
import ChartTabs from '../components/ChartTabs';
function Home() {
const constyled = {
......@@ -43,8 +42,7 @@ function Home() {
<Col md={6} style={col2sty}>
<EueSuggest />
<ChartLine />
<ChartDoughnut />
<ChartTabs />
<Donation />
</Col>
</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