From a5bc25e5af79cf0bc7e0034b0a7c04d368a841bd Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Thu, 21 Sep 2017 22:51:38 +0200
Subject: Improve time point formatting

---
 .../sidebars/elements/LoadBarComponent.js          | 23 ++++++----
 .../sidebars/elements/LoadChartComponent.js        | 53 ++++++++++++++--------
 2 files changed, 47 insertions(+), 29 deletions(-)

(limited to 'src/components/sidebars/elements')

diff --git a/src/components/sidebars/elements/LoadBarComponent.js b/src/components/sidebars/elements/LoadBarComponent.js
index 5a39b188..0616d699 100644
--- a/src/components/sidebars/elements/LoadBarComponent.js
+++ b/src/components/sidebars/elements/LoadBarComponent.js
@@ -2,16 +2,19 @@ import classNames from "classnames";
 import React from "react";
 
 const LoadBarComponent = ({percent, disabled}) => (
-    <div className={classNames("progress", {disabled})}>
-        <div
-            className="progress-bar progress-bar-striped"
-            role="progressbar"
-            aria-valuenow={percent}
-            aria-valuemin="0"
-            aria-valuemax="100"
-            style={{width: percent + "%"}}
-        >
-            {percent}%
+    <div className="mt-1">
+        <strong>Current load</strong>
+        <div className={classNames("progress", {disabled})}>
+            <div
+                className="progress-bar progress-bar-striped"
+                role="progressbar"
+                aria-valuenow={percent}
+                aria-valuemin="0"
+                aria-valuemax="100"
+                style={{width: percent + "%"}}
+            >
+                {percent}%
+            </div>
         </div>
     </div>
 );
diff --git a/src/components/sidebars/elements/LoadChartComponent.js b/src/components/sidebars/elements/LoadChartComponent.js
index 8b2438c2..a4e14a24 100644
--- a/src/components/sidebars/elements/LoadChartComponent.js
+++ b/src/components/sidebars/elements/LoadChartComponent.js
@@ -1,25 +1,40 @@
 import React from "react";
-import {VictoryChart, VictoryLine, VictoryScatter} from "victory";
+import {VictoryAxis, VictoryChart, VictoryLine, VictoryScatter} from "victory";
+import {convertSecondsToFormattedTime} from "../../../util/date-time";
 
 const LoadChartComponent = ({data, currentTick}) => (
-    <VictoryChart height={300}>
-        <VictoryLine
-            data={data}
-        />
-        <VictoryScatter
-            data={data}
-            size={5}
-        />
-        <VictoryLine
-            data={[
-                {x: currentTick + 1, y: 0},
-                {x: currentTick + 1, y: 1},
-            ]}
-            style={{
-                data: {stroke: "#00A6D6", strokeWidth: 3}
-            }}
-        />
-    </VictoryChart>
+    <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;
-- 
cgit v1.2.3