numerical histogram fix

1 files changed, 15 insertions, 8 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 479f6584c..fdde29c81 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -252,14 +252,14 @@ export class Histogram extends React.Component<HistogramProps> {
 
         var data = this.data(dataSet);
         
+        var xAxisTitle = Object.keys(dataSet[0])[0]
+        var yAxisTitle = this.numericalYData ? Object.keys(dataSet[0])[1] : 'frequency';
         let uniqueArr: unknown[] = [...new Set(data)]
-        var numBins = this.numericalXData? (this.rangeVals.xMax! - this.rangeVals.xMin! + 1) : uniqueArr.length
+        var numBins = (this.numericalXData && Number.isInteger(data[0][xAxisTitle]))? (this.rangeVals.xMax! - this.rangeVals.xMin! + 1) : uniqueArr.length
         var translateXAxis = !this.numericalXData || numBins<this.maxBins ?  width/(numBins+1)/2 : 0;
         if (numBins>this.maxBins) numBins = this.maxBins;
         var startingPoint = this.numericalXData? this.rangeVals.xMin! : 0;
         var endingPoint = this.numericalXData? this.rangeVals.xMax! : numBins;
-        var xAxisTitle = Object.keys(dataSet[0])[0]
-        var yAxisTitle = this.numericalYData ? Object.keys(dataSet[0])[1] : 'frequency';
         var histDataSet = dataSet.filter((d: { [x: string]: unknown; }) => {
             var valid = true;
             Object.keys(dataSet[0]).map(key => {
@@ -351,15 +351,22 @@ export class Histogram extends React.Component<HistogramProps> {
         svg.append("g")
             .attr("transform", "translate(" + translateXAxis + ", " + height + ")")
             .call(xAxis)
-
+        
         const onPointClick = action((e: any) => {
             var pointerX = d3.pointer(e)[0];
             var sameAsCurrent: boolean;
+            var barCounter = -1;
             const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
-                var left = this.numericalXData? d.x0-1: d.x0;
-                var right = (this.numericalXData && d.x0!=d.x1)? d.x1-1: d.x1;
-                if ((left*eachRectWidth ) <= pointerX && pointerX <= (right*eachRectWidth)){
-                    var showSelected = this.numericalYData? this.props.pairs.filter((data: { [x: string]: any; }) => data[xAxisTitle]==d[0])[0] : histDataSet.filter((data: { [x: string]: any; }) => data[xAxisTitle]==d[0])[0];
+                barCounter++;
+                if ((barCounter*eachRectWidth ) <= pointerX && pointerX <= ((barCounter+1)*eachRectWidth)){
+                    var showSelected = this.numericalYData? this.props.pairs.filter((data: { [x: string]: any; }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d[0])[0] 
+                    : histDataSet.filter((data: { [x: string]: any; }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d[0])[0];
+                    if (this.numericalXData){
+                        if (d[0] && d[1] && d[0]!=d[1]){
+                            showSelected = {[xAxisTitle]: (d3.min(d) + " to " + d3.max(d)), frequency: d.length}
+                        }
+                        else if (!this.numericalYData) showSelected = {[xAxisTitle]: showSelected[xAxisTitle], frequency: d.length}
+                    } 
                     sameAsCurrent = this._currSelected? 
                         (showSelected[xAxisTitle]==this._currSelected![xAxisTitle] 
                       && showSelected[yAxisTitle]==this._currSelected![yAxisTitle])