2 files changed, 62 insertions, 0 deletions
diff --git a/src/components/app/sidebars/elements/LoadBarComponent.js b/src/components/app/sidebars/elements/LoadBarComponent.js
new file mode 100644
index 00000000..65f94b3d
--- /dev/null
+++ b/src/components/app/sidebars/elements/LoadBarComponent.js
@@ -0,0 +1,22 @@
+import classNames from "classnames";
+import React from "react";
+
+const LoadBarComponent = ({percent, disabled}) => (
+    <div className="mt-1">
+        <strong>Current load</strong>
+        <div className={classNames("progress", {disabled})}>
+            <div
+                className="progress-bar"
+                role="progressbar"
+                aria-valuenow={percent}
+                aria-valuemin="0"
+                aria-valuemax="100"
+                style={{width: percent + "%"}}
+            >
+                {percent}%
+            </div>
+        </div>
+    </div>
+);
+
+export default LoadBarComponent;
diff --git a/src/components/app/sidebars/elements/LoadChartComponent.js b/src/components/app/sidebars/elements/LoadChartComponent.js
new file mode 100644
index 00000000..19d58f77
--- /dev/null
+++ b/src/components/app/sidebars/elements/LoadChartComponent.js
@@ -0,0 +1,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;