From 1bc6458194c65d4861216c99221c204fe51de30f Mon Sep 17 00:00:00 2001 From: Shelby Sturgis Date: Thu, 19 Jun 2014 09:59:39 -0700 Subject: [PATCH] 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. --- .../components/vislib/modules/histogram.js | 67 ++++++++++++++++--- .../components/vislib/modules/lineChart.js | 38 +++++++++-- 2 files changed, 88 insertions(+), 17 deletions(-) diff --git a/src/kibana/components/vislib/modules/histogram.js b/src/kibana/components/vislib/modules/histogram.js index 8fa2da61a28f9..783b3c988186d 100644 --- a/src/kibana/components/vislib/modules/histogram.js +++ b/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 diff --git a/src/kibana/components/vislib/modules/lineChart.js b/src/kibana/components/vislib/modules/lineChart.js index 4233b08e204d2..d39dfa9d1cc5a 100644 --- a/src/kibana/components/vislib/modules/lineChart.js +++ b/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); } };