be5243f5f8
* Bump next from 10.2.3 to 11.0.1 Bumps [next](https://github.com/vercel/next.js) from 10.2.3 to 11.0.1. - [Release notes](https://github.com/vercel/next.js/releases) - [Changelog](https://github.com/vercel/next.js/blob/canary/release.js) - [Commits](https://github.com/vercel/next.js/compare/v10.2.3...v11.0.1) --- updated-dependencies: - dependency-name: next dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * 🚨 apply automatic linting * 🎨 remove unused imports * 🔇 allow console.* to give more debugging options * 🎨 move stuff around to reduce linter messages * 🚨 use destructuring so lint won't complain * 📌 link Chartkick and Chart.js Commit uses the linking code which was previously imported with `import "chartkick/chart.js" [1]. Next did not like the import path, but this does works now. ¯\_(ツ)_/¯ [1]: https://github.com/ankane/chartkick.js/blob/master/chart.js/chart.esm.js Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
71 lines
1.5 KiB
TypeScript
71 lines
1.5 KiB
TypeScript
import ChartJs from 'chart.js/auto';
|
|
import Chartkick from 'chartkick';
|
|
import format from 'date-fns/format';
|
|
import { LineChart } from 'react-chartkick';
|
|
|
|
// from https://github.com/ankane/chartkick.js/blob/master/chart.js/chart.esm.js
|
|
Chartkick.use(ChartJs);
|
|
|
|
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, 'H:mma');
|
|
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="line-chart-container">
|
|
<LineChart
|
|
xtitle="Time"
|
|
ytitle={title}
|
|
suffix={unit}
|
|
legend="bottom"
|
|
color={color}
|
|
data={renderData}
|
|
download={title}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Chart.defaultProps = {
|
|
dataCollections: [],
|
|
data: [],
|
|
title: '',
|
|
};
|