src/components/sidebars/elements/LoadChartComponent.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import React from "react";
import {VictoryAxis, VictoryChart, VictoryLine, VictoryScatter} from "victory";
import {convertSecondsToFormattedTime} from "../../../util/date-time";

const LoadChartComponent = ({data, currentTick}) => (
    <div className="mt-1">
        <strong>Load over time</strong>
        <VictoryChart
            height={250}
            padding={{top: 10, bottom: 50, left: 50, right: 50}}
        >
            <VictoryAxis
                tickFormat={tick => convertSecondsToFormattedTime(tick)}
                fixLabelOverlap={true}
                label="Simulated Time"
            />
            <VictoryAxis
                dependentAxis
                label="Load"
            />
            <VictoryLine
                data={data}
            />
            <VictoryScatter
                data={data}
            />
            <VictoryLine
                data={[
                    {x: currentTick + 1, y: 0},
                    {x: currentTick + 1, y: 1},
                ]}
                style={{
                    data: {stroke: "#00A6D6", strokeWidth: 3}
                }}
            />
        </VictoryChart>
    </div>
);

export default LoadChartComponent;