Closes #129. Closes #131.

We now check if labels are strings before running a reg expression algorithm to classify the name.
Valid dates are now rendered on the chart when a terms aggregation is used.

src/kibana/components/vislib/modules/histogram.js

@@ -106,7 +106,6 @@ define(function (require) {
         }
 
         var items = [];
-
         selection.each(function (d) {
           d.series.forEach(function (label) {
             if (label.label) {
@@ -124,7 +123,58 @@ define(function (require) {
       }
     };
 
-    chart.render = function render(data) {
+    chart.getClassName = function (label, yAxisLabel) {
+      try {
+        return label ? chart.classifyString(label) : chart.classifyString(yAxisLabel);
+      } catch (error) {
+        console.group('chart.getClassName: ' + error);
+      }
+    };
+
+    chart.classifyString = function (string) {
+      try {
+        if (!chart.isString(string)) {
+          string = chart.stringify(string);
+        }
+        return string.replace(/[.]+|[/]+|[\s]+|[*]+|[;]+|[(]+|[)]+|[:]+|[,]+/g, '');
+      } catch (error) {
+        console.group('chart.classifyString: ' + error);
+      }
+    };
+
+    chart.isString = function (value) {
+        if (typeof value === 'string') {
+          return true;
+        }
+        return false;
+    };
+
+    chart.stringify = function (value) {
+        return value + '';
+    };
+
+    chart.checkForNumbers = function (array) {
+      try {
+        for (var i = 0; i < array.length; i++) {
+          if (chart.isNumber(array[i])) {
+            array[i] = chart.convertToNumber(array[i]);
+          }
+        }
+        return array;
+      } catch (error) {
+        console.group('chart.checkForNumber: ' + error);
+      }
+    };
+
+    chart.convertToNumber = function (n) {
+      return +n;
+    };
+
+    chart.isNumber = function (n) {
+        return !isNaN(parseFloat(n)) && isFinite(n);
+    };
+
+    chart.render = function render (data) {
       // store a copy of the data sent to render, so that it can be resent with .resize()
       latestData = data;
 
@@ -279,6 +329,7 @@ define(function (require) {
           return d.x;
         }))
         .values();
+      keys = chart.checkForNumbers(keys);
 
       /* Error Handler that prevents a chart from being rendered when
              there are too many data points for the width of the container. */
@@ -550,12 +601,8 @@ define(function (require) {
       // enter
       bars.enter()
         .append('rect')
-        .attr('class', function (d, i) {
-          // Regex to remove ., /, white space, *, ;, (, ), :, , from labels.
-          var label = d.label !== undefined ?
-            d.label.replace(/[.]+|[/]+|[\s]+|[*]+|[;]+|[(]+|[)]+|[:]+|[,]+/g, '') :
-            data.yAxisLabel.replace(/[.]+|[/]+|[\s]+|[*]+|[;]+|[(]+|[)]+|[:]+|[,]+/g, '');
-          return 'rl rl-' + label;
+        .attr('class', function (d) {
+          return 'rl rl-' + chart.getClassName(d.label, data.yAxisLabel);
         })
         .on('mouseover', function (d, i) {
           d3.select(this)
@@ -598,8 +645,8 @@ define(function (require) {
 
           // hilite chart layer
           allLayers.style('opacity', 0.3);
-          var layerClass = '.rl-' + d.label.replace(/[.]+|[/]+|[\s]+|[*]+|[;]+|[(]+|[)]+|[:]+|[,]+/g, ''),
-            mylayer = vis.selectAll(layerClass)
+          var layerClass = '.rl-' + chart.getClassName(d.label, data.yAxisLabel);
+          var mylayer = vis.selectAll(layerClass)
             .style('opacity', 1);
 
           // stroke this rect

src/kibana/components/vislib/modules/lineChart.js

@@ -514,13 +514,13 @@ define(function (require) {
             return 'rl rl-' + chart.getClassName(d.label, yAxisLabel);
           })
           .attr('d', function (d) {
-            return line(d.values);
+              return line(d.values);
           })
-          .style('fill', 'none')
-          .style('stroke', function (d) {
+          .attr('fill', 'none')
+          .attr('stroke', function (d) {
             return d.label ? colors[d.label] : colors[yAxisLabel];
           })
-          .style('stroke-width', '3px');
+          .attr('stroke-width', 3);
 
         var layer = g.selectAll('.layer')
           .data(seriesData)
@@ -799,19 +799,43 @@ define(function (require) {
       }
     };
 
+    chart.getClassName = function (label, yAxisLabel) {
+      try {
+        return label ? chart.classifyString(label) : chart.classifyString(yAxisLabel);
+      } catch (error) {
+        console.group('chart.getClassName: ' + error);
+      }
+    };
+
     chart.classifyString = function (string) {
       try {
+        if (!chart.isString(string)) {
+          string = chart.stringify(string);
+        }
         return string.replace(/[.]+|[/]+|[\s]+|[*]+|[;]+|[(]+|[)]+|[:]+|[,]+/g, '');
       } catch (error) {
         console.group('chart.classifyString: ' + error);
       }
     };
 
-    chart.getClassName = function (label, yAxisLabel) {
+    chart.isString = function (value) {
       try {
-        return label ? chart.classifyString(label) : chart.classifyString(yAxisLabel);
+        if (typeof value === 'string') {
+          return true;
+        } else {
+          return false;
+        }
       } catch (error) {
-        console.group('chart.getClassName: ' + error);
+        console.group('chart.isString: ' + error);
+      }
+    };
+
+    chart.stringify = function (value) {
+      try {
+        var string = value + '';
+        return string;
+      } catch (error) {
+        console.group('chart.stringify: ' + error);
       }
     };