show title of selected histogram bars

2 files changed, 16 insertions, 6 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 44e8b97c6..c0e738cfa 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -452,6 +452,18 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                     : ''
             );
             selected = selected.substring(0, selected.length - 2) + ' }';
+            if (this._props.titleCol!="" && (!this._currSelected["frequency"] || this._currSelected["frequency"]<10)){
+                selected+= "\n" + this._props.titleCol + ": "
+                this._tableData.forEach(each => {
+                    if (this._currSelected[this._props.axes[0]]==each[this._props.axes[0]]) {
+                        if (this._props.axes[1]){
+                            if (this._currSelected[this._props.axes[1]]==each[this._props.axes[1]]) selected+= each[this._props.titleCol] + ", ";
+                        }
+                        else selected+= each[this._props.titleCol] + ", ";
+                    }
+                })
+                selected = selected.slice(0,-1).slice(0,-1);
+            }
         }
         var selectedBarColor;
         var barColors = StrListCast(this._props.layoutDoc.histogramBarColors).map(each => each.split('::'));
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index f98d51123..54a83879c 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -348,14 +348,12 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
             });
             selected = selected.substring(0, selected.length - 2);
             selected += ' }';
-            if (this._props.titleCol!="" && (!this._currSelected["frequency"] || this._currSelected["frequency"]<10) && this._pieChartData){
-                var percentField = Object.keys(this._pieChartData[0])[0];
-                var descriptionField = Object.keys(this._pieChartData[0])[1]!;
+            if (this._props.titleCol!="" && (!this._currSelected["frequency"] || this._currSelected["frequency"]<10)){
                 selected+= "\n" + this._props.titleCol + ": "
                 this._tableData.forEach(each => {
-                    if (this._currSelected[percentField]==each[percentField]) {
-                        if (descriptionField){
-                            if (this._currSelected[descriptionField]==each[descriptionField]) selected+= each[this._props.titleCol] + ", ";
+                    if (this._currSelected[this._props.axes[0]]==each[this._props.axes[0]]) {
+                        if (this._props.axes[1]){
+                            if (this._currSelected[this._props.axes[1]]==each[this._props.axes[1]]) selected+= each[this._props.titleCol] + ", ";
                         }
                         else selected+= each[this._props.titleCol] + ", ";
                     }