clicking on histogram data fix

1 files changed, 17 insertions, 21 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 5fbe92563..7b9eba1cd 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -37,7 +37,6 @@ export class Histogram extends React.Component<HistogramProps> {
     private _disposers: { [key: string]: IReactionDisposer } = {};
     private _histogramRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _histogramSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
-    private numericalData: boolean = false;
     private numericalXData: boolean = false; // whether the data is organized by numbers rather than categoreis
     private numericalYData: boolean = false; // whether the y axis is controlled by provided data rather than frequency
     private maxBins = 15; // maximum number of bins that is readable on a normal sized doc
@@ -261,19 +260,19 @@ export class Histogram extends React.Component<HistogramProps> {
             return valid;
         });
         if (!this.numericalXData) {
-            var histStringDataSet: { frequency: any, label: any }[] = [];
+            var histStringDataSet: { [x: string]: unknown; }[] = [];
             if (this.numericalYData){
                 for (let i=0; i<dataSet.length; i++){
-                    histStringDataSet.push({frequency: dataSet[i][yAxisTitle], label: dataSet[i][xAxisTitle]})
+                    histStringDataSet.push({[yAxisTitle]: dataSet[i][yAxisTitle], [xAxisTitle]: dataSet[i][xAxisTitle]})
                 }
             }
             else{
                 for (let i=0; i<uniqueArr.length; i++){
-                    histStringDataSet.push({frequency: 0, label: uniqueArr[i]})
+                    histStringDataSet.push({[yAxisTitle]: 0, [xAxisTitle]: uniqueArr[i]})
                 }
                 for (let i=0; i<data.length; i++){
-                    let sliceData = histStringDataSet.filter(each => each.label==data[i])
-                    sliceData[0].frequency = sliceData[0].frequency + 1;
+                    let sliceData = histStringDataSet.filter(each => each[xAxisTitle]==data[i])
+                    sliceData[0][yAxisTitle] = sliceData[0][yAxisTitle] + 1;
                 }
             }
             histDataSet = histStringDataSet
@@ -331,7 +330,7 @@ export class Histogram extends React.Component<HistogramProps> {
             xAxis = d3.axisBottom(x)
                 .ticks(numBins-1)
         }
-        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d) {return d.frequency.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
+        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d) { return d[yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
                     : d3.max(bins, function(d) { return d.length; })
 
         var y = d3.scaleLinear()
@@ -347,16 +346,13 @@ export class Histogram extends React.Component<HistogramProps> {
 
         const onPointClick = action((e: any) => {
             var pointerX = d3.pointer(e)[0];
-            var index = -1;
             var sameAsCurrent: boolean;
             const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
-                index++;
-                var left = this.numericalData? d.x0-1: d.x0;
-                var right = (this.numericalData && d.x0!=d.x1)? d.x1-1: d.x1;
-                if ((left*eachRectWidth ) <= pointerX && pointerX <= (right*eachRectWidth )){
-                    var showSelected = histDataSet[index]
-                    var selectedDisplay = {[xAxisTitle]: showSelected.label, [yAxisTitle]: showSelected.frequency}
-                    // showSelected['frequency'] = d.length;
+                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 = histDataSet.filter((data: { [x: string]: any; }) => data[xAxisTitle]==d[0])[0];
+                    var selectedDisplay = {[xAxisTitle]: showSelected[xAxisTitle], [yAxisTitle]: this.numericalXData? d.length : showSelected[yAxisTitle]}
                     sameAsCurrent = this._currSelected? 
                         (selectedDisplay[xAxisTitle]==this._currSelected![xAxisTitle] 
                       && selectedDisplay[yAxisTitle]==this._currSelected![yAxisTitle])
@@ -366,7 +362,6 @@ export class Histogram extends React.Component<HistogramProps> {
                 }
                 return false;
             });
-            // selected.attr('class')=='histogram-bar hover'? selected.attr('class', 'histogram-bar'): selected.attr('class', 'histogram-bar hover')
             const elements = document.querySelectorAll('.histogram-bar');
             for (let i = 0; i < elements.length; i++) {
                 elements[i].classList.remove('hover');
@@ -392,17 +387,18 @@ export class Histogram extends React.Component<HistogramProps> {
             .append("rect")
               .attr("transform", this.numericalYData?
                     function (d) {
-                        var eachData = histDataSet.filter((data: { label: number; }) => {return data.label==d[0]}) 
-                        var length = eachData[0].frequency.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
+                        var eachData = histDataSet.filter((data: { [x: string]: number; }) => {return data[xAxisTitle]==d[0]}) 
+                        var length = eachData[0][yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
                         return "translate(" + x(d.x0!) + "," + y(length) + ")";
                     }
                     : function(d) { return "translate(" + x(d.x0!) + "," + y(d.length) + ")"; })
               .attr("height", this.numericalYData? 
                     function(d) {
-                        var eachData = histDataSet.filter((data: { label: number; }) => {return data.label==d[0]}) 
-                        var length = eachData[0].frequency.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
+                        var eachData = histDataSet.filter((data: { [x: string]: number; }) => {return data[xAxisTitle]==d[0]}) 
+                        var length = eachData[0][yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
                         return height-y(length)}
-                    : function(d) { return height - y(d.length)})
+                    : function(d) { 
+                        return height - y(d.length)})
               .attr("width", eachRectWidth)
               .attr("class", 'histogram-bar')
     };