diff --git a/examples/timeseries/timeseries.js b/examples/timeseries/timeseries.js index d00c386..9a3dcc9 100644 --- a/examples/timeseries/timeseries.js +++ b/examples/timeseries/timeseries.js @@ -28,6 +28,18 @@ function main() { value: 'Mary', timeseries : [0,0,2,4,2,6,8,10,0,0,0] }, + { + icon: {class: 'fa fa-male', color: 'green'}, + count: 28, + value: 'Linda', + timeseries : [[0,4],[1,2],[2,0],[3,4],[4,2],[5,0],[6,8],[7,8],[8,0],[9,0],[10,0]] + }, + { + icon: {class: 'fa fa-male', color: 'blue'}, + count: 24, + value: 'Jenny', + timeseries : [[0,0],[2,8],[3,0],[6,4],[7,2],[8,2],[12,8],[14,0],[18,0],[19,0],[22,0]] + }, { icon: {class: 'fa fa-male', color: 'lightblue'}, count: 11, diff --git a/package.json b/package.json index 1eed096..35bff38 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "Facets Component developed by Uncharted Software", "repository": "https://github.com/unchartedsoftware/stories-facets", "license": "Apache-2.0", - "version": "2.12.6", + "version": "2.12.7", "devDependencies": { "body-parser": "~1.13.2", "browserify": "^12.0.1", diff --git a/src/components/facet/facetVertical.js b/src/components/facet/facetVertical.js index 4b12148..c58c19c 100644 --- a/src/components/facet/facetVertical.js +++ b/src/components/facet/facetVertical.js @@ -31,6 +31,8 @@ var HIGHLIGHT_CLASS = 'facet-icon-highlighted'; var ABBREVIATED_CLASS = 'facets-facet-vertical-abbreviated'; var HIDDEN_CLASS = 'facets-facet-vertical-hidden'; var SELECTED_CLASS = 'facet-bar-selected'; +var TIMESERIES_X_INDEX = 0; +var TIMESERIES_Y_INDEX = 1; /** * Vertical facet class, standard facet class. @@ -395,17 +397,43 @@ FacetVertical.prototype._removeHandlers = function() { */ FacetVertical.prototype._renderSparkline = function(width, height, timeseries, maxValue) { var x = 0, y = 0; - var dx = width / (timeseries.length-1); - var pathData = 'M '; var timeIdx; - for (timeIdx = 0; timeIdx < timeseries.length; timeIdx++) { - y = height - Math.floor((timeseries[timeIdx])/maxValue * height) + 1; - pathData += (x + ' ' + y); - if (timeIdx < timeseries.length-1) { - pathData += ' L '; + var pathData = 'M '; + + if (timeseries.length > 0 && Array.isArray(timeseries[0])) { + // each entry is two values, x and y + + var first = timeseries[0]; + var last = timeseries[timeseries.length - 1]; + var xrange = last[TIMESERIES_X_INDEX] - first[TIMESERIES_X_INDEX]; + + var lastEntry; + for (timeIdx = 0; timeIdx < timeseries.length; timeIdx++) { + var entry = timeseries[timeIdx]; + if (lastEntry) { + x += width * ((entry[TIMESERIES_X_INDEX] - lastEntry[TIMESERIES_X_INDEX]) / xrange); + } + y = height - Math.floor((entry[TIMESERIES_Y_INDEX])/maxValue * height) + 1; + pathData += (x + ' ' + y); + if (timeIdx < timeseries.length-1) { + pathData += ' L '; + } + lastEntry = entry; + } + } else { + // each entry is one value, y + var dx = width / (timeseries.length-1); + + for (timeIdx = 0; timeIdx < timeseries.length; timeIdx++) { + y = height - Math.floor((timeseries[timeIdx])/maxValue * height) + 1; + pathData += (x + ' ' + y); + if (timeIdx < timeseries.length-1) { + pathData += ' L '; + } + x += dx; } - x += dx; } + var pathEl = $(document.createElementNS('http://www.w3.org/2000/svg','path')); pathEl.attr('d',pathData); return pathEl; @@ -429,7 +457,15 @@ FacetVertical.prototype._updateSparkline = function() { // Compute the maximum value so total and selected sparklines are the same height var maxValue = 0; - this._spec.timeseries.forEach(function(count) { maxValue = Math.max(maxValue,count); }); + this._spec.timeseries.forEach(function(entry) { + var y; + if (Array.isArray(entry)) { + y = entry[TIMESERIES_Y_INDEX]; + } else { + y = entry; + } + maxValue = Math.max(maxValue, y); + }); maxValue = maxValue ? maxValue : 1; // prevent divide by 0 var totalSparklinePath = this._renderSparkline(sparkWidth,sparkHeight,this._spec.timeseries, maxValue);