|
|
|
@ -1,5 +1,5 @@ |
|
|
|
import styles from '../../styles/styles.module.css'; |
|
|
|
|
|
|
|
import { LineChart } from 'react-chartkick' |
|
|
|
import { LineChart } from 'react-chartkick' |
|
|
|
|
|
|
|
import styles from '../../styles/styles.module.css'; |
|
|
|
import 'chart.js' |
|
|
|
import 'chart.js' |
|
|
|
|
|
|
|
|
|
|
|
const defaultProps = { |
|
|
|
const defaultProps = { |
|
|
|
@ -22,22 +22,22 @@ interface ChartProps { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function createGraphDataset(dataArray) { |
|
|
|
function createGraphDataset(dataArray) { |
|
|
|
var dataValues = {}; |
|
|
|
const dataValues = {}; |
|
|
|
dataArray.forEach(item => { |
|
|
|
dataArray.forEach(item => { |
|
|
|
const dateObject = new Date(item.time); |
|
|
|
const dateObject = new Date(item.time); |
|
|
|
const dateString = dateObject.getFullYear() + '-' + dateObject.getMonth() + '-' + dateObject.getDay() + ' ' + dateObject.getHours() + ':' + dateObject.getMinutes(); |
|
|
|
const dateString = `${dateObject.getFullYear() }-${ dateObject.getMonth() }-${ dateObject.getDay() } ${ dateObject.getHours() }:${ dateObject.getMinutes()}`; |
|
|
|
dataValues[dateString] = item.value; |
|
|
|
dataValues[dateString] = item.value; |
|
|
|
}) |
|
|
|
}) |
|
|
|
return dataValues; |
|
|
|
return dataValues; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export default function Chart({ data, title, color, unit, dataCollections }: ChartProps) { |
|
|
|
export default function Chart({ data, title, color, unit, dataCollections }: ChartProps) { |
|
|
|
var renderData = []; |
|
|
|
const renderData = []; |
|
|
|
|
|
|
|
|
|
|
|
if (data && data.length > 0) { |
|
|
|
if (data && data.length > 0) { |
|
|
|
renderData.push({ |
|
|
|
renderData.push({ |
|
|
|
name: title, |
|
|
|
name: title, |
|
|
|
color: color, |
|
|
|
color, |
|
|
|
data: createGraphDataset(data) |
|
|
|
data: createGraphDataset(data) |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
@ -54,7 +54,7 @@ export default function Chart({ data, title, color, unit, dataCollections }: Cha |
|
|
|
xtitle="Time" |
|
|
|
xtitle="Time" |
|
|
|
ytitle={title} |
|
|
|
ytitle={title} |
|
|
|
suffix={unit} |
|
|
|
suffix={unit} |
|
|
|
legend={"bottom"} |
|
|
|
legend="bottom" |
|
|
|
color={color} |
|
|
|
color={color} |
|
|
|
data={renderData} |
|
|
|
data={renderData} |
|
|
|
download={title} |
|
|
|
download={title} |
|
|
|
|