From d6f2296d60399fa0156c3908fa63e61fb0e3b4bf Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 3 Nov 2017 21:55:14 +0100
Subject: Add label to current tick line in state charts

This vertically-oriented label gives the user an indication of what that blue bar actually means in the graph, for the case that this was not clear from the UI itself.

Fixes #31
---
 src/components/app/sidebars/elements/LoadChartComponent.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

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

diff --git a/src/components/app/sidebars/elements/LoadChartComponent.js b/src/components/app/sidebars/elements/LoadChartComponent.js
index 6f66010e..5f0d40cb 100644
--- a/src/components/app/sidebars/elements/LoadChartComponent.js
+++ b/src/components/app/sidebars/elements/LoadChartComponent.js
@@ -4,6 +4,7 @@ import SvgSaver from "svgsaver";
 import {
   VictoryAxis,
   VictoryChart,
+  VictoryLabel,
   VictoryLine,
   VictoryScatter
 } from "victory";
@@ -56,9 +57,17 @@ const VictoryChartComponent = ({ data, currentTick, showCurrentTick }) => (
     <VictoryScatter data={data} />
     {showCurrentTick ? (
       <VictoryLine
+        labelComponent={
+          <VictoryLabel renderInPortal angle={90} dy={-5} dx={60} />
+        }
         data={[{ x: currentTick + 1, y: 0 }, { x: currentTick + 1, y: 1 }]}
+        labels={point =>
+          point.y === 1
+            ? "Current tick : " + convertSecondsToFormattedTime(currentTick)
+            : ""}
         style={{
-          data: { stroke: "#00A6D6", strokeWidth: 3 }
+          data: { stroke: "#00A6D6", strokeWidth: 4 },
+          labels: { fill: "#00A6D6" }
         }}
       />
     ) : (
-- 
cgit v1.2.3