'use client';
import React, {ComponentType} from 'react';
import {Line} from 'react-chartjs-2';
import {Chart as ChartJS, LinearScale, PointElement, LineElement, Legend} from 'chart.js';
import type {ChartData, ChartOptions} from 'chart.js';
ChartJS.register(
LinearScale,
PointElement,
LineElement,
Legend
);
interface Props {
data: {
time: string,
device_id: string,
temperature: number,
humidity: number,
out: number,
}[];
}
const Chart1Client: ComponentType<Props> = ({data}) => {
const chartData: ChartData = {
labels: data.map((_, index) => index),
datasets: [
{
label: "온도",
data: data.map(item => item.temperature),
borderColor: 'red',
backgroundColor: 'rgba(255, 0, 0, 0.2)',
tension: 0.1,
pointRadius: 0,
yAxisID: 'y1',
},
{
label: "바깥온도",
data: data.map(item => item.out),
borderColor: 'orange',
backgroundColor: 'rgba(255, 69, 0, 0.2)',
tension: 0.1,
pointRadius: 0,
yAxisID: 'y1',
},
{
label: "습도",
data: data.map(item => item.humidity),
borderColor: 'blue',
backgroundColor: 'rgba(255, 0, 255, 0.2)',
tension: 0.1,
pointRadius: 0,
yAxisID: 'y2',
}],
};
const chartOptions: ChartOptions = {
scales: {
x: {
title: {
display: true,
text: '분',
},
type: 'linear',
ticks: {
stepSize: 60,
}
},
y1: {
type: 'linear',
display: true,
position: 'left',
title: {
display: true,
text: '온도',
},
},
y2: {
type: 'linear',
display: true,
position: 'right',
grid: {
drawOnChartArea: false,
},
title: {
display: true,
text: '습도',
},
},
},
};
return (
<Line data={chartData} options={chartOptions}></Line>
);
}
export default Chart1Client;