owncast/web/pages/components/chart.tsx
2020-12-22 23:15:37 -08:00

65 lines
1.3 KiB
TypeScript

import { LineChart } from 'react-chartkick'
import 'chart.js';
import format from 'date-fns/format';
import styles from '../../styles/styles.module.scss';
interface TimedValue {
time: Date;
value: number;
}
interface ChartProps {
data?: TimedValue[],
title?: string,
color: string,
unit: string,
dataCollections?: any[],
}
function createGraphDataset(dataArray) {
const dataValues = {};
dataArray.forEach(item => {
const dateObject = new Date(item.time);
const dateString = format(dateObject, 'p P');
dataValues[dateString] = item.value;
})
return dataValues;
}
export default function Chart({ data, title, color, unit, dataCollections }: ChartProps) {
const renderData = [];
if (data && data.length > 0) {
renderData.push({
name: title,
color,
data: createGraphDataset(data)
});
}
dataCollections.forEach(collection => {
renderData.push(
{name: collection.name, data: createGraphDataset(collection.data), color: collection.color}
)
});
return (
<div className={styles.lineChartContainer}>
<LineChart
xtitle="Time"
ytitle={title}
suffix={unit}
legend="bottom"
color={color}
data={renderData}
download={title}
/>
</div>
);
}
Chart.defaultProps = {
dataCollections: [],
data: [],
title: '',
};