A simple React js component to create various line charts
Version 1.0.0 released! YAY!
To get it running you need to pass at least those two props:
Prop | Type |
---|---|
sets |
Array of arrays of real numbers |
times |
Array of arrays of timestamps |
IMPORTANT You will need to use the bootstrap CSS to make it look pretty so include this (with the appropriate version) in your HTML file:
<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet">
Example:
<div className="card">
<div className="card-body">
<LineChart
sets={[
[1444, 350, 200],
[1320, 1000, 400]
]}
times={[
["2019-08-12T00:44:20.963Z", "2019-08-13T00:44:20.963Z",
"2019-08-14T00:44:20.963Z"].map((e) => new Date(e)),
["2019-08-11T00:44:20.963Z", "2019-08-12T00:44:20.963Z",
"2019-08-13T00:44:20.963Z"].map((e) => new Date(e)),
]}
/>
</div>
</div>
Note that for every element of the set there must be a corresponding timestamp.
More details will be coming soon (when I get more free time :))