Update Hint and Crosshair to display Dates (#1077)

* Updates Crosshair to prevent crash on date as x 

Prevents crashing of the crosshair like in #996

* Update crosshair.js

* Update hint.js

* Update data-utils.js

* Update data-utils-tests.js

src/plot/crosshair.js

@@ -22,6 +22,8 @@ import React, {PureComponent} from 'react';
 
 import PropTypes from 'prop-types';
 
+import {transformValueToString} from 'utils/data-utils';
+
 import {getAttributeFunctor} from 'utils/scales-utils';
 
 /**
@@ -34,7 +36,7 @@ function defaultTitleFormat(values) {
   if (value) {
     return {
       title: 'x',
-      value: value.x
+      value: transformValueToString(value.x)
     };
   }
 }

src/plot/hint.js

@@ -22,6 +22,8 @@ import React, {PureComponent} from 'react';
 
 import PropTypes from 'prop-types';
 
+import {transformValueToString} from 'utils/data-utils';
+
 import {getAttributeFunctor} from 'utils/scales-utils';
 
 /*
@@ -70,7 +72,7 @@ const ORIENTATION = {
  */
 function defaultFormat(value) {
   return Object.keys(value).map(function getProp(key) {
-    return {title: key, value: value[key]};
+    return {title: key, value: transformValueToString(value[key])};
   });
 }
 

src/utils/data-utils.js

@@ -45,3 +45,12 @@ export function addValueToArray(arr, value) {
   }
   return result;
 }
+
+/**
+ * Transforms a value ( number or date ) to a string.
+ * @param {Date | number} value The value as date or number.
+ * @returns {string | number} The value as string.
+ */
+export function transformValueToString(value) {
+  return Object.prototype.toString.call(value) === '[object Date]' ? value.toDateString() : value;
+}

tests/utils/data-utils-tests.js

@@ -20,7 +20,7 @@
 
 import test from 'tape';
 
-import {getUniquePropertyValues, addValueToArray} from 'utils/data-utils';
+import {getUniquePropertyValues, addValueToArray, transformValueToString} from 'utils/data-utils';
 
 const arr = [{a: 1}, {b: 3, a: 2}, {a: 2}];
 
@@ -52,3 +52,11 @@ test('data-utils #addValueToArray', t => {
   );
   t.end();
 });
+
+test('data-utils #transformValueToString', t => {
+  t.deepEqual(transformValueToString(0), 0,
+    'Shouldn\'t transform the number value');
+  t.deepEqual(transformValueToString(new Date(0)), 'Thu Jan 01 1970',
+    'Should transform the date to string value');
+  t.end();
+});