diff --git a/examples/histogram-scale-function/histogram-scale-function.css b/examples/histogram-scale-function/histogram-scale-function.css new file mode 100644 index 0000000..1776696 --- /dev/null +++ b/examples/histogram-scale-function/histogram-scale-function.css @@ -0,0 +1,21 @@ +/* + * Copyright 2017 Uncharted Software Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +#facet-container { + width: 240px; + padding:5px; + font-family : Helvetica; +} diff --git a/examples/histogram-scale-function/histogram-scale-function.js b/examples/histogram-scale-function/histogram-scale-function.js new file mode 100644 index 0000000..a68b350 --- /dev/null +++ b/examples/histogram-scale-function/histogram-scale-function.js @@ -0,0 +1,334 @@ +/* + * Copyright 2017 Uncharted Software Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +function main() { + + var container = $('#facet-container'); + + var groups = [ + { + label : 'Dates', + key : 'dates', + facets : [ + { + "histogram": { + "slices": [ + { + "label": "2015-01-20", + "count": 49, + "metadata": "This is not it!" + }, + { + "label": "2015-02-06", + "count": 48, + "metadata": "This is not it!" + }, + { + "label": "2015-02-07", + "count": 150, + "metadata": "This is not it!" + }, + { + "label": "2015-02-14", + "count": 300, + "metadata": "This is not it!" + }, + { + "label": "2015-02-14", + "count": 44, + "metadata": "This is not it!" + }, + { + "label": "2015-02-20", + "count": 10, + "metadata": "This is not it!" + }, + { + "label": "2015-02-28", + "count": 5, + "metadata": "This is not it!" + }, + { + "label": "2015-03-04", + "count": 26, + "metadata": "This is not it!" + }, + { + "label": "2015-03-04", + "count": 23, + "metadata": "This is not it!" + }, + { + "label": "2015-03-08", + "count": 32, + "metadata": "This is not it!" + }, + { + "label": "2015-03-17", + "count": 24, + "metadata": "This is not it!" + }, + { + "label": "2015-03-18", + "count": 7, + "metadata": "This is not it!" + }, + { + "label": "2015-04-07", + "count": 19, + "metadata": "This is it!!!" + }, + { + "label": "2015-04-13", + "count": 46, + "metadata": "This is not it!" + }, + { + "label": "2015-04-20", + "count": 37, + "metadata": "This is not it!" + }, + { + "label": "2015-04-24", + "count": 48, + "metadata": "This is not it!" + }, + { + "label": "2015-05-05", + "count": 8, + "metadata": "This is not it!" + }, + { + "label": "2015-05-16", + "count": 20, + "metadata": "This is not it!" + }, + { + "label": "2015-05-22", + "count": 22, + "metadata": "This is not it!" + }, + { + "label": "2015-06-25", + "count": 24, + "metadata": "This is not it!" + }, + { + "label": "2015-07-04", + "count": 290, + "metadata": "This is not it!" + }, + { + "label": "2015-07-09", + "count": 1, + "metadata": "This is not it!" + }, + { + "label": "2015-07-18", + "count": 50, + "metadata": "This is not it!" + }, + { + "label": "2015-07-28", + "count": 23, + "metadata": "This is not it!" + }, + { + "label": "2015-08-04", + "count": 39, + "metadata": "This is not it!" + }, + { + "label": "2015-08-21", + "count": 7, + "metadata": "This is not it!" + }, + { + "label": "2015-08-21", + "count": 33, + "metadata": "This is not it!" + }, + { + "label": "2015-09-07", + "count": 34, + "metadata": "This is not it!" + }, + { + "label": "2015-09-12", + "count": 7, + "metadata": "This is not it!" + }, + { + "label": "2015-09-17", + "count": 46, + "metadata": "This is not it!" + }, + { + "label": "2015-10-02", + "count": 11, + "metadata": "This is not it!" + }, + { + "label": "2015-10-05", + "count": 12, + "metadata": "This is not it!" + }, + { + "label": "2015-10-06", + "count": 420, + "metadata": "This is not it!" + }, + { + "label": "2015-10-07", + "count": 48, + "metadata": "This is not it!" + }, + { + "label": "2015-10-10", + "count": 45, + "metadata": "This is not it!" + }, + { + "label": "2015-10-20", + "count": 21, + "metadata": "This is not it!" + }, + { + "label": "2015-10-27", + "count": 36, + "metadata": "This is not it!" + }, + { + "label": "2015-10-29", + "count": 700, + "metadata": "This is not it!" + }, + { + "label": "2015-10-30", + "count": 23, + "metadata": "This is not it!" + }, + { + "label": "2015-11-03", + "count": 8, + "metadata": "This is not it!" + }, + { + "label": "2015-11-10", + "count": 45, + "metadata": "This is not it!" + }, + { + "label": "2015-11-25", + "count": 6, + "metadata": "This is not it!" + }, + { + "label": "2015-12-15", + "count": 490, + "metadata": "This is not it!" + }, + { + "label": "2015-12-22", + "count": 460, + "metadata": "This is not it!" + } + ] + } + } + ] + } + ]; + + var facets = new Facets(container,groups); + + var $controls = $('
').appendTo('body'); + + var $applyLogScale = $('') + .html('Apply Log function.
') + .appendTo($controls); + + var $clearSelection = $('') + .html('Clear selection.

') + .appendTo($controls); + + var $hover = $('') + .html( + 'Hovering
' + + 'Label: N/A
' + + 'Count: N/A

' + ) + .appendTo($controls); + + var slices = groups[0].facets[0].histogram.slices; + var $range = $('') + .html( + 'Selected Range
' + + 'From: ' + slices[0].label + '
' + + 'To: ' + slices[slices.length - 1].label + '

' + ) + .appendTo($controls); + + /* events */ + $applyLogScale.on('click', function() { + container.empty(); + groups[0].facets[0].scaleFn = Math.log; + facets = new Facets(container,groups); + _applyHandlers(); + }); + + $clearSelection.on('click', function() { + container.empty(); + delete(groups[0].facets[0].scaleFn); + facets = new Facets(container,groups); + _applyHandlers(); + }); + + var _applyHandlers = function() { + facets.on('facet-histogram:mouseenter', function(event, key, barData) { + $hover.html( + 'Hovering
' + + 'Label: ' + barData.label[0] + '
' + + 'Count: ' + barData.count[0] + '

' + ); + }); + + facets.on('facet-histogram:mouseleave', function(event, key, barData) { + $hover.html( + 'Hovering
' + + 'Label: N/A
' + + 'Count: N/A

' + ); + }); + + facets.on('facet-histogram:click', function(event, key, barData) { + $clicked.html( + 'Last clicked
' + + 'Label: ' + barData.label[0] + '
' + + 'Count: ' + barData.count[0] + '
' + + 'Metadata: ' + barData.metadata[0] + '

' + ); + }); + + facets.on('facet-histogram:rangechanged facet-histogram:rangechangeduser', function(event, key, range) { + $range.html( + 'Selected Range
' + + 'From: ' + range.from.label[0] + '
' + + 'To: ' + range.to.label[0] + '

' + ); + }); + }; +} diff --git a/examples/histogram-scale-function/index.html b/examples/histogram-scale-function/index.html new file mode 100644 index 0000000..8dfc888 --- /dev/null +++ b/examples/histogram-scale-function/index.html @@ -0,0 +1,36 @@ + + + + + + Facets Histogram Scale Function Example + + + + + + + + + + +
+ + + diff --git a/package.json b/package.json index 76bf4d2..a92ea9c 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.8.0", + "version": "2.9.0", "devDependencies": { "body-parser": "~1.13.2", "browserify": "^12.0.1", diff --git a/src/components/facet/facetHistogram.js b/src/components/facet/facetHistogram.js index d79195f..168d686 100644 --- a/src/components/facet/facetHistogram.js +++ b/src/components/facet/facetHistogram.js @@ -32,6 +32,7 @@ function FacetHistogram (svgContainer, spec) { this._minBarWidth = ('minBarWidth' in spec) ? spec.minBarWidth : 3; this._maxBarWidth = ('maxBarWidth' in spec) ? spec.maxBarWidth : Number.MAX_VALUE; this._barPadding = ('barPadding' in spec) ? spec.barPadding : 1; + this._scaleFn = $.isFunction(spec.scaleFn) ? spec.scaleFn : false; this._bars = []; this._maxBarHeight = 0; @@ -126,7 +127,12 @@ FacetHistogram.prototype.initializeSlices = function(svg, slices) { count += slice.count; metadata.push(slice); } - yMax = Math.max(yMax, count); + + if(this._scaleFn) { + count = this._scaleFn(count); + } + + yMax = Math.max(yMax, count); var bar = new FacetBar(svg, x, barWidth, 0, svgHeight); bar.highlighted = false; bar.metadata = metadata; @@ -142,6 +148,10 @@ FacetHistogram.prototype.initializeSlices = function(svg, slices) { total += metaDataArr[jj].count; } + if(this._scaleFn) { + total = this._scaleFn(total); + } + this._bars[j].height = Math.ceil(svgHeight * (total/yMax)); } @@ -211,6 +221,10 @@ FacetHistogram.prototype.select = function (slices) { count = slices[slice.label]; } + if(this._scaleFn) { + count = this._scaleFn(count); + } + var newHeight = Math.ceil(svgHeight * (count / yMax)); if (bar.selectedHeight === null) { bar.selectedHeight = newHeight; diff --git a/src/components/facet/facetHorizontal.js b/src/components/facet/facetHorizontal.js index 78d7ba1..9a30c68 100644 --- a/src/components/facet/facetHorizontal.js +++ b/src/components/facet/facetHorizontal.js @@ -229,12 +229,13 @@ FacetHorizontal.prototype.deselect = function() { */ FacetHorizontal.prototype.processSpec = function(inData) { var histogram = this.processHistogram(inData.histogram); + histogram.scaleFn = inData.scaleFn; var firstSlice = histogram.slices[0]; var lastSlice = histogram.slices[histogram.slices.length - 1]; var outData = { histogram: histogram, leftRangeLabel: firstSlice.label, - rightRangeLabel: lastSlice.toLabel || lastSlice.label, + rightRangeLabel: lastSlice.toLabel || lastSlice.label }; return outData; };