Merge pull request #235 from HDI-Project/timeIndicators

Added tooltip time indicators

Author: sergiu-ojoc

mtv-client/src/components/Timeseries/FocusChart/FocusChart.scss

@@ -100,5 +100,31 @@
         }
     }
 
+    .tooltip-data {
+        width: 170px;
+        font-size: 12px;
+        background: rgba(103, 106, 130, 0.7);
+        padding: 10px;
+        border-radius: 4px;
+        position: fixed;
+        z-index: 999;
+
+        text{
+            color: #fff;
+        }
+
+        &.active{
+            display: block;
+        }
+
+        li{
+            display: flex;
+            justify-content: space-between;
+            span{
+                flex-flow: column;
+            }
+        }
+    }
+
 
 }

mtv-client/src/components/Timeseries/FocusChart/FocusChart.tsx

@@ -32,7 +32,7 @@ import {
 import { getWrapperSize, getScale } from './FocusChartUtils';
 import ShowErrors from './ShowErrors';
 import './FocusChart.scss';
-import { fromMonthToIndex, maxDaysInMonth } from '../../../model/utils/Utils';
+import { fromMonthToIndex, maxDaysInMonth, formatDate } from '../../../model/utils/Utils';
 
 import { RootState } from '../../../model/types';
 
@@ -49,6 +49,8 @@ type State = {
   zoomValue?: any;
   brushInstance?: any;
   brushContext?: any;
+  isTooltipVisible?: boolean;
+  tooltipData?: any;
 };
 
 class FocusChart extends Component<Props, State> {
@@ -60,6 +62,8 @@ class FocusChart extends Component<Props, State> {
     this.state = {
       width: 0,
       height: 0,
+      isTooltipVisible: false,
+      tooltipData: {},
     };
 
     this.zoomHandler = this.zoomHandler.bind(this);
@@ -286,6 +290,25 @@ class FocusChart extends Component<Props, State> {
         .attr('width', Math.max(xCoord(timeSeries[stopIndex][0]) - xCoord(timeSeries[startIndex][0])))
         .attr('y', 0)
         .attr('x', xCoord(timeSeries[startIndex][0]))
+        .on('mouseover, mousemove', () => {
+          const startDate = new Date(timeSeries[currentEvent[0]][0]);
+          const stopDate = new Date(timeSeries[currentEvent[1]][0]);
+          const tooltipOffset = 20;
+          this.setState({
+            isTooltipVisible: true,
+            tooltipData: {
+              xCoord: d3.event.x + tooltipOffset,
+              yCoord: d3.event.y,
+              eventStartTime: startDate,
+              eventEndTime: stopDate,
+            },
+          });
+        })
+        .on('mouseout', () => {
+          this.setState({
+            isTooltipVisible: false,
+          });
+        })
         .on('click', () => {
           setCurrentEvent(currentEventID);
         });
@@ -617,7 +640,6 @@ class FocusChart extends Component<Props, State> {
       .attr('x', xCoord(currentEventDetails.start_time))
       .attr('width', Math.max(xCoord(stop_time) - xCoord(start_time)));
     d3.select(`g#_${currentEventDetails.id} path.evt-highlight`).attr('d', this.drawLine(lineData));
-
     this.updateLineChart();
   }
 
@@ -727,11 +749,40 @@ class FocusChart extends Component<Props, State> {
     }
   }
 
+  showEventTooltip() {
+    const { tooltipData } = this.state;
+    const startDate = formatDate(tooltipData.eventStartTime);
+    const endDate = formatDate(tooltipData.eventEndTime);
+
+    return (
+      <div className="tooltip-data" style={{ left: `${tooltipData.xCoord}px`, top: `${tooltipData.yCoord}px` }}>
+        <ul>
+          <li>
+            starts:
+            <span>
+              {startDate.day}/{startDate.month}/{startDate.year}
+            </span>
+            <span>{startDate.time}</span>
+          </li>
+          <li>
+            ends:
+            <span>
+              {endDate.day}/{endDate.month}/{endDate.year}
+            </span>
+            <span>{endDate.time}</span>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+
   render() {
+    const { isTooltipVisible } = this.state;
     return (
       <div className="focus-chart" id="focusChartWrapper">
         <ShowErrors isOpen={this.props.isPredictionVisible} />
         <EventDetails />
+        {isTooltipVisible && this.showEventTooltip()}
         <svg id="focusChart" />
         <div className="zoomControlsHolder">
           <ZoomControls />

mtv-client/src/components/Timeseries/Overview/DrawChart.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { drawChart, updateBrushPeriod, updateHighlithedEvents } from './chartUtils';
+import { drawChart, updateBrushPeriod, updateHighlithedEvents, brushTooltip } from './chartUtils';
 import { Props as DatarunProps } from './Datarun';
 
 let props: DatarunProps;
@@ -25,6 +25,7 @@ class DrawChart extends Component<Props> {
     // @TODO - investigate how this can be set in immerJS as a compound object
     if (JSON.stringify(prevProps.selectedPeriod) !== JSON.stringify(selectedPeriod)) {
       updateBrushPeriod(selectedPeriod);
+      brushTooltip(selectedPeriod, this.props.dataRun);
     }
     if (prevProps.dataRun.eventWindows !== this.props.dataRun.eventWindows) {
       updateHighlithedEvents(this.props.dataRun);

mtv-client/src/components/Timeseries/Overview/Overview.scss

@@ -91,3 +91,20 @@
         display: none;
     }
 }
+
+.brush-tooltip{
+    position: fixed;
+    width: 170px;
+    font-size: 12px;
+    background: rgba(103, 106, 130, 0.7);
+    padding: 10px;
+    border-radius: 4px;
+    z-index: 999;
+    li{
+        display: flex;
+        justify-content: space-between;
+        span{
+            flex-flow: column;
+        }
+    }
+}

mtv-client/src/components/Timeseries/Overview/chartUtils.ts

@@ -1,5 +1,6 @@
 import * as d3 from 'd3';
 import { FocusChartConstants } from '../FocusChart/Constants';
+import { formatDate } from '../../../model/utils/Utils';
 
 const { TRANSLATE_LEFT, CHART_MARGIN } = FocusChartConstants;
 
@@ -47,6 +48,60 @@ const setRatio = width => {
   ratio = chartWidth / focusChartWidth;
 };
 
+const toggleBrushTooltip = (selectedRange = null, dataRun) => {
+  const tootltipContext = d3.select('body');
+  const { eventRange } = selectedRange;
+
+  if (selectedRange === null) {
+    return;
+  }
+
+  const { clientX, clientY } = d3.event;
+  const { xCoord } = getScale(chartWidth, 36, dataRun);
+
+  const startDate = formatDate(new Date(xCoord.invert(eventRange[0]).getTime()));
+  const endDate = formatDate(new Date(xCoord.invert(eventRange[1]).getTime()));
+  const tooltipHTML = `<ul>
+      <li><span>starts:</span> <span>${startDate.day}/${startDate.month}/${startDate.year}</span> <span>${startDate.time}</span> </li>
+      <li><span>ends:</span> <span>${endDate.day}/${endDate.month}/${endDate.year}</span> <span>${endDate.time}</span></li>
+    </ul>`;
+
+  const tooltipDiv = tootltipContext
+    .append('div')
+    .attr('class', 'brush-tooltip')
+    .attr('style', `left: ${clientX + 10}px; top: ${clientY + 10}px`);
+
+  tooltipDiv.html(tooltipHTML);
+};
+
+const removeTooltip = () => {
+  d3.selectAll('.brush-tooltip').remove();
+};
+
+const updateTooltipCoords = () => {
+  const { clientX, clientY } = d3.event;
+  const tooltipDiv = d3.select('.brush-tooltip');
+  tooltipDiv.attr('style', `left: ${clientX + 10}px; top: ${clientY + 10}px`);
+};
+
+export const brushTooltip = (selectedRange, dataRun) => {
+  const brushes = d3.selectAll('.brush .selection');
+
+  // eslint-disable-next-line no-underscore-dangle
+  brushes._groups[0].forEach(currentBrush => {
+    d3.select(currentBrush)
+      .on('mouseover', function() {
+        toggleBrushTooltip(selectedRange, dataRun);
+      })
+      .on('mousemove', function() {
+        updateTooltipCoords();
+      })
+      .on('mouseout', function() {
+        removeTooltip();
+      });
+  });
+};
+
 export function drawBrush(element, width, onPeriodTimeChange, onSelectDatarun, dataRun) {
   const brushHeight = 43;
 

mtv-client/src/model/utils/Utils.js

@@ -1,3 +1,20 @@
 export const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 export const fromMonthToIndex = month => months.indexOf(month) + 1;
 export const maxDaysInMonth = (currentYear, currentMonth) => new Date(currentYear, currentMonth, 0).getDate();
+
+export function formatDate(date) {
+  let hours = date.getHours();
+  let minutes = date.getMinutes();
+  hours %= 12;
+  hours = hours || 12;
+  minutes = minutes < 10 ? `0${minutes}` : minutes;
+  const ampm = hours >= 12 ? 'pm' : 'am';
+  let strTime = `${hours}:${minutes}`;
+  const formattedTime = {
+    year: date.getFullYear(),
+    month: date.getMonth() + 1,
+    day: date.getDate(),
+    time: `${strTime}:${ampm}`,
+  };
+  return formattedTime;
+}