more info on selected histogram bars + better labels for selected pie chart slices

2 files changed, 11 insertions, 10 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 7b9eba1cd..c9cd49aa1 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -351,13 +351,12 @@ export class Histogram extends React.Component<HistogramProps> {
                 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]}
+                    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];
                     sameAsCurrent = this._currSelected? 
-                        (selectedDisplay[xAxisTitle]==this._currSelected![xAxisTitle] 
-                      && selectedDisplay[yAxisTitle]==this._currSelected![yAxisTitle])
+                        (showSelected[xAxisTitle]==this._currSelected![xAxisTitle] 
+                      && showSelected[yAxisTitle]==this._currSelected![yAxisTitle])
                         : false;
-                    this._currSelected = sameAsCurrent? undefined: selectedDisplay;
+                    this._currSelected = sameAsCurrent? undefined: showSelected;
                     return true
                 }
                 return false;
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index fc24e5821..cead40d92 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -239,6 +239,8 @@ export class PieChart extends React.Component<PieChartProps> {
         d3.select(this._piechartRef.current).select('svg').remove();
         d3.select(this._piechartRef.current).select('.tooltip').remove();
         
+        var percentField = Object.keys(dataSet[0])[0]
+        var descriptionField = Object.keys(dataSet[0])[1]!
         var radius = Math.min(width, height) / 2 - Math.max(this.props.margin.top, this.props.margin.bottom, this.props.margin.left, this.props.margin.right)
         var svg = (this._piechartSvg = d3
             .select(this._piechartRef.current)
@@ -262,15 +264,17 @@ export class PieChart extends React.Component<PieChartProps> {
         });
         if (this.byCategory){
             let uniqueCategories = [...new Set(data)]
-            var pieStringDataSet: { frequency: any, label: any }[] = [];
+            var pieStringDataSet: { frequency: number, [percentField]: string }[] = [];
             for (let i=0; i<uniqueCategories.length; i++){
-                pieStringDataSet.push({frequency: 0, label: uniqueCategories[i]})
+                pieStringDataSet.push({frequency: 0, [percentField]: uniqueCategories[i]})
             }
             for (let i=0; i<data.length; i++){
-                let sliceData = pieStringDataSet.filter(each => each.label==data[i])
+                let sliceData = pieStringDataSet.filter(each => each[percentField]==data[i])
                 sliceData[0].frequency = sliceData[0].frequency + 1;
             }
             pieDataSet = pieStringDataSet
+            percentField = Object.keys(pieDataSet[0])[0]
+            descriptionField = Object.keys(pieDataSet[0])[1]!
             data = this.data(pieStringDataSet)
         }
         var trackDuplicates : {[key: string]: any} = {};
@@ -323,8 +327,6 @@ export class PieChart extends React.Component<PieChartProps> {
             if (!sameAsCurrent!) selected.attr('class', 'slice hover');
         });
 
-        var percentField = Object.keys(pieDataSet[0])[0]
-        var descriptionField = Object.keys(pieDataSet[0])[1]!
         var arcs = g.selectAll("arc")
             .data(pie(data))
             .enter()