Merge pull request #37 from unchartedsoftware/feature/allow_formattin…

…g_function

Feature/allow formatting function

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.9",
+  "version": "2.12.10",
   "devDependencies": {
     "body-parser": "~1.13.2",
     "browserify": "^12.0.1",

src/components/facet/facetHistogram.js

@@ -36,6 +36,7 @@ function FacetHistogram (svgContainer, spec) {
 	this._bars = [];
 	this._maxBarHeight = 0;
 	this._showOrigin = ('showOrigin' in spec) ? spec.showOrigin : false;
+  this._displayFn = $.isFunction(spec.displayFn) ? spec.displayFn : false;
 
 	this.initializeSlices(svgContainer, spec.slices);
 }
@@ -275,8 +276,9 @@ FacetHistogram.prototype.select = function (slices) {
                 var count = 0;
 		for (var ii = 0, nn = barMetadata.length; ii < nn; ++ii) {
 			var slice = barMetadata[ii];
-			if (slice.label in slices) {
-				count += slices[slice.label];
+                        var key = slice.label !== undefined ? slice.label : slice.binStart;
+			if (key in slices) {
+				count += slices[key];
 			}
 
                 }

src/components/facet/facetHistogramBar.js

@@ -196,13 +196,13 @@ Object.defineProperty(FacetHistogramBar.prototype, 'metadata', {
  */
 Object.defineProperty(FacetHistogramBar.prototype, 'info', {
 	get: function() {
-		return {
+          info = {
 			label: this._metadata.map(function(info) {
-				return info.label;
+				return info.label || info.binStart;
 			}),
 
 			toLabel: this._metadata.map(function(info) {
-				return info.toLabel;
+				return info.toLabel || info.binEnd;
 			}),
 
 			count: this._metadata.map(function(info) {
@@ -213,7 +213,21 @@ Object.defineProperty(FacetHistogramBar.prototype, 'info', {
 				return info.metadata;
 			})
 		};
-	}
+
+          if (this._metadata[0].binStart !== undefined) {
+            info.binStart = this._metadata.map(function(info) {
+              return info.binStart;
+            });
+          }
+
+          if (this._metadata[0].binEnd !== undefined) {
+            info.binEnd = this._metadata.map(function(info) {
+              return info.binEnd;
+            });
+          }
+
+          return info;
+        }
 });
 
 /**

src/components/facet/facetHistogramFilter.js

@@ -21,9 +21,10 @@
  * @class FacetHistogramFilter
  * @param {jQuery} element - A jQuery wrapped element that contains all the range manipulation tools.
  * @param {FacetHistogram} histogram - The histogram to which the tools will be linked to.
+ * @param {Object} spec - a spec for the filter
  * @constructor
  */
-function FacetHistogramFilter (element, histogram) {
+function FacetHistogramFilter (element, histogram, spec) {
 	this._element = element;
 	this._histogram = histogram;
 	this._rangeFilter = element.find('.facet-range-filter');
@@ -59,6 +60,10 @@ function FacetHistogramFilter (element, histogram) {
 
 	this._onFilterChanged = null;
 
+  if (spec !== undefined) {
+        this._spec = spec;
+  }
+
 	this._initializeDragging();
 	this._initializePagination();
 
@@ -311,7 +316,17 @@ FacetHistogramFilter.prototype.updateUI = function (barRange, pixelRange) {
 	var bars = this._histogram.bars;
 	var leftBarMetadata = bars[barRange.from].metadata;
 	var rightBarMetadata = bars[barRange.to].metadata;
-	this._currentRangeLabel.text(leftBarMetadata[0].label + ' - ' + rightBarMetadata[rightBarMetadata.length - 1].toLabel);
+        var fromLabel = leftBarMetadata[0].binStart;
+        var toLabel = rightBarMetadata[rightBarMetadata.length - 1].binEnd;
+
+  if (this._spec) {
+    var displayFn = this._spec.displayFn;
+    if ($.isFunction(displayFn)) {
+      fromLabel = displayFn(fromLabel);
+      toLabel = displayFn(toLabel);
+    }
+  }
+	this._currentRangeLabel.text(fromLabel + ' - ' + toLabel);
 
 	this._histogram.highlightRange(barRange);
 

src/components/facet/facetHorizontal.js

@@ -184,12 +184,14 @@ FacetHorizontal.prototype.select = function(data) {
 				for (var ii = 0, nn = barMetadata.length; ii < nn; ++ii) {
 					var slice = barMetadata[ii];
 
-					if (fromIsString && (slice.label === from || +slice.label === +from)) {
+                                  binStart = slice.label !== undefined ? slice.label : slice.binStart;
+                                  binEnd = slice.toLabel !== undefined ? slice.toLabel : slice.binEnd;
+					if (fromIsString && (binStart === from || +binStart === +from)) {
 						from = i;
 						fromIsString = false;
 					}
 
-					if (toIsString && (slice.toLabel === to || +slice.toLabel === +to)) {
+					if (toIsString && (binEnd === to || +binEnd === +to)) {
 						to = i;
 						toIsString = false;
 					}
@@ -232,12 +234,24 @@ FacetHorizontal.prototype.processSpec = function(inData) {
 	histogram.scaleFn = inData.scaleFn;
 	var firstSlice = histogram.slices[0];
 	var lastSlice = histogram.slices[histogram.slices.length - 1];
+
+  var leftRangeLabel = firstSlice.label !== undefined ? firstSlice.label : firstSlice.binStart;
+  var rightRangeLabel = (lastSlice.toLabel || lastSlice.label) !== undefined ? (lastSlice.toLabel || lastSlice.label) : (lastSlice.binEnd || lastSlice.binStart);
+
+  var displayFn = $.isFunction(inData.displayFn) ? inData.displayFn : false;
+  if (displayFn) {
+    leftRangeLabel = displayFn(leftRangeLabel);
+    rightRangeLabel = displayFn(rightRangeLabel);
+  }
+
+
 	var outData = {
 		histogram: histogram,
-		leftRangeLabel: firstSlice.label,
-		rightRangeLabel: lastSlice.toLabel || lastSlice.label,
-		filterable: inData.filterable !== undefined ? inData.filterable : true
-	};
+		leftRangeLabel: leftRangeLabel,
+		rightRangeLabel: rightRangeLabel,
+          filterable: inData.filterable !== undefined ? inData.filterable : true,
+          displayFn: displayFn
+        };
 	return outData;
 };
 
@@ -335,7 +349,11 @@ FacetHorizontal.prototype._initializeLayout = function(template) {
 	this._svg = this._element.find('svg');
 
 	this._histogram = new Histogram(this._svg, this._spec.histogram);
-	this._histogramFilter = new HistogramFilter(this._element, this._histogram);
+
+  var spec = {
+    displayFn: this._spec.displayFn
+  };
+	this._histogramFilter = new HistogramFilter(this._element, this._histogram, spec);
 	this._histogramFilter.setFilterPixelRange({ from: 0, to: this._histogram.totalWidth });
 
 	this._rangeControls = this._element.find('.facet-range-controls');
@@ -389,7 +407,16 @@ FacetHorizontal.prototype._removeHandlers = function() {
  * @private
  */
 FacetHorizontal.prototype._onMouseEventBar = function (type, bar, event) {
-	this.emit(type, event, this._key, bar.info);
+  var info = bar.info;
+  this._formatLabels(info);
+  this.emit(type, event, this._key, info);
+};
+
+FacetHorizontal.prototype._formatLabels = function (barInfo) {
+  if (this._spec.displayFn) {
+    barInfo.label = barInfo.label.map(this._spec.displayFn);
+    barInfo.toLabel = barInfo.toLabel.map(this._spec.displayFn);
+  }
 };
 
 /**

src/components/group.js

@@ -325,7 +325,7 @@ Group.prototype.append = function (groupSpec) {
 			facetSpec.count += existingFacet.count;
 			existingFacet.updateSpec(facetSpec);
 		} else {
-			var facet = this._createNewFacet(facetSpec, groupSpec.key, true);
+			var facet = this._createNewFacet(facetSpec, groupSpec.key, true, groupSpec.displayFn);
 			if (facet instanceof FacetHorizontal) {
 				this.horizontalFacets.push(facet);
 			} else {
@@ -525,7 +525,7 @@ Group.prototype._initializeFacets = function (spec) {
 	var facets = spec.facets;
 	for (var i = 0, n = facets.length; i < n; ++i) {
 		var facetSpec = facets[i];
-		var facet = this._createNewFacet(facetSpec, spec.key);
+		var facet = this._createNewFacet(facetSpec, spec.key, false, spec.displayFn);
 		if (facet instanceof FacetHorizontal) {
 			this.horizontalFacets.push(facet);
 		} else {
@@ -701,14 +701,16 @@ Group.prototype._updateLess = function (less) {
  * @param {Object} facetSpec - Data specification for the facet to create.
  * @param {string} groupKey - The group key to create the facet with.
  * @param {boolean=} hidden - Specifies if the newly created facet should be created hidden.
+ * @param {Function} displayFn - Specify a function to be used to transform values to display values.
  * @private
  */
-Group.prototype._createNewFacet = function (facetSpec, groupKey, hidden) {
+Group.prototype._createNewFacet = function (facetSpec, groupKey, hidden, displayFn) {
 	if ('histogram' in facetSpec) {
 		// create a horizontal facet
 		return new FacetHorizontal(this._facetContainer, this, _.extend(facetSpec, {
 			key: groupKey,
-			hidden: hidden
+                  hidden: hidden,
+                  displayFn: displayFn
 		}));
 	} else if ('placeholder' in facetSpec) {
 		// create a placeholder facet