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/LoadChartComponent.js        | 53 ++++++++++++++--------
 1 file changed, 34 insertions(+), 19 deletions(-)

(limited to 'src/components/sidebars/elements/LoadChartComponent.js')

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