Tooltips on vms charts.

package.json

@@ -44,6 +44,7 @@
     "browserify-plain-jade": "^0.2.2",
     "bundle-collapser": "^1.2.1",
     "chartist-plugin-legend": "^0.2.2",
+    "chartist-plugin-tooltip": "0.0.11",
     "classnames": "^2.2.3",
     "connect": "^3.4.1",
     "cookies-js": "^1.2.2",

src/index.scss

@@ -40,6 +40,54 @@ $ct-series-colors: (
   stroke-width: 2px;
 }
 
+// CHARTIST TOOLTIP ============================================================
+
+.ct-point {
+  stroke-width: 30px;
+  stroke-opacity: 0!important;
+}
+
+.ct-point:hover {
+  stroke-opacity: 0.2!important;
+  stroke-width: 20px;
+}
+
+.ct-tooltip {
+  position: absolute;
+  display: inline-block;
+  min-width: 5em;
+  padding: 8px 10px;
+  background: #383838;
+  color: #fff;
+  text-align: center;
+  pointer-events: none;
+  z-index: 10;
+  font-weight: 700;
+
+  // Arrow!
+  &:before {
+    position: absolute;
+    bottom: -14px;
+    top: 100%;
+    left: 50%;
+    border: solid transparent;
+    content: '';
+    height: 0;
+    width: 0;
+    pointer-events: none;
+    border-color: rgba(251, 249, 228, 0);
+    border-top-color: #383838;
+    border-width: 7px;
+    margin-left: -8px;
+  }
+
+  &.hide {
+    display: block;
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
 // CHARTIST LEGEND =============================================================
 
 .ct-legend {

src/node_modules/xo-line-chart/index.js

@@ -1,5 +1,6 @@
 import ChartistGraph from 'react-chartist'
 import ChartistLegend from 'chartist-plugin-legend'
+import ChartistTooltip from 'chartist-plugin-tooltip'
 import React from 'react'
 import { injectIntl } from 'react-intl'
 import {
@@ -10,22 +11,30 @@ import {
 // Number of labels on axis X.
 const N_LABELS_X = 5
 
+const LABEL_OFFSET_X = 40
 const LABEL_OFFSET_Y = 75
 
-const GLOBAL_OPTIONS = {
-  showPoint: false,
+const makeOptions = ({ intl, nValues, endTimestamp, interval, valueTransform }) => ({
+  showPoint: true,
   lineSmooth: false,
   showArea: true,
   height: 300,
   low: 0,
+  axisX: {
+    labelInterpolationFnc: makeLabelInterpolationFnc(intl, nValues, endTimestamp, interval),
+    offset: LABEL_OFFSET_X
+  },
   axisY: {
-    labelInterpolationFnc: (value) => formatSize(value),
+    labelInterpolationFnc: valueTransform,
     offset: LABEL_OFFSET_Y
   },
   plugins: [
-    ChartistLegend()
+    ChartistLegend(),
+    ChartistTooltip({
+      valueTransform: (value) => valueTransform(+value) // '+value' because tooltip gives a string value...
+    })
   ]
-}
+})
 
 // ===================================================================
 
@@ -103,15 +112,14 @@ export const CpuLineChart = injectIntl(propTypes({
         series
       }}
       options={{
-        ...GLOBAL_OPTIONS,
+        ...makeOptions({
+          intl,
+          nValues: length,
+          endTimestamp: data.endTimestamp,
+          interval: data.interval,
+          valueTransform: (value) => `${value}%`
+        }),
         high: 100,
-        axisX: {
-          labelInterpolationFnc: makeLabelInterpolationFnc(intl, length, data.endTimestamp, data.interval)
-        },
-        axisY: {
-          labelInterpolationFnc: (value) => `${value}%`,
-          offset: LABEL_OFFSET_Y
-        },
         ...options
       }}
     />
@@ -141,11 +149,14 @@ export const MemoryLineChart = injectIntl(propTypes({
         }]
       }}
       options={{
-        ...GLOBAL_OPTIONS,
+        ...makeOptions({
+          intl,
+          nValues: memoryUsed.length,
+          endTimestamp: data.endTimestamp,
+          interval: data.interval,
+          valueTransform: formatSize
+        }),
         high: memory[memory.length - 1],
-        axisX: {
-          labelInterpolationFnc: makeLabelInterpolationFnc(intl, memoryUsed.length, data.endTimestamp, data.interval)
-        },
         ...options
       }}
     />
@@ -170,10 +181,13 @@ export const XvdLineChart = injectIntl(propTypes({
         series: makeObjectSeries(stats, 'Xvd')
       }}
       options={{
-        ...GLOBAL_OPTIONS,
-        axisX: {
-          labelInterpolationFnc: makeLabelInterpolationFnc(intl, length, data.endTimestamp, data.interval)
-        },
+        ...makeOptions({
+          intl,
+          nValues: length,
+          endTimestamp: data.endTimestamp,
+          interval: data.interval,
+          valueTransform: formatSize
+        }),
         ...options
       }}
     />
@@ -198,10 +212,13 @@ export const VifLineChart = injectIntl(propTypes({
         series: makeObjectSeries(stats, 'Vif')
       }}
       options={{
-        ...GLOBAL_OPTIONS,
-        axisX: {
-          labelInterpolationFnc: makeLabelInterpolationFnc(intl, length, data.endTimestamp, data.interval)
-        },
+        ...makeOptions({
+          intl,
+          nValues: length,
+          endTimestamp: data.endTimestamp,
+          interval: data.interval,
+          valueTransform: formatSize
+        }),
         ...options
       }}
     />