select / filter with multiple histogram bars

1 files changed, 37 insertions, 14 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index aef2d64f3..14cfda559 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -44,7 +44,8 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
     private maxBins = 15; // maximum number of bins that is readable on a normal sized doc
     @observable _currSelected: any | undefined = undefined; // Object of selected bar
     private curBarSelected: any = undefined; // histogram bin of selected bar for when just one bar is selected
-    private selectedData: any = undefined; // Selection of selected bar
+    // private selectedData: any = undefined; // Selection of selected bar
+    private selectedData: any[] = []; // array of selected bars
     private hoverOverData: any = undefined; // Selection of bar being hovered over
 
     constructor(props: any) {
@@ -162,19 +163,36 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                 if (changeSelectedVariables) {
                     // for when a bar is selected - not just hovered over
                     sameAsCurrent = this._currSelected ? showSelected[xAxisTitle] == this._currSelected![xAxisTitle] && showSelected[yAxisTitle] == this._currSelected![yAxisTitle] : false;
-                    this._currSelected = sameAsCurrent ? undefined : showSelected;
-                    this.selectedData = sameAsCurrent ? undefined : d;
+                    let sameAsAny = false;
+                    this.selectedData.map(eachData => {
+                        if (!sameAsAny){
+                            let match = true;
+                            Object.keys(d).map(key => {
+                                if (d[key] != eachData[key]) match = false;
+                            })
+                            if (match) {
+                                sameAsAny = true;
+                                let index = this.selectedData.indexOf(eachData)
+                                this.selectedData.splice(index, 1);
+                                this._currSelected = undefined;
+                            }
+                        }
+                    })
+                    if(!sameAsAny) {
+                        this.selectedData.push(d);
+                        this._currSelected = this.selectedData.length>1? undefined : showSelected;
+                    }
 
                     // for filtering child dataviz docs
                     if (this._props.layoutDoc.dataViz_filterSelection){
-                        console.log("d", d);
                         const selectedRows = Cast(this._props.layoutDoc.dataViz_selectedRows, listSpec('number'), null);
                         this._tableDataIds.forEach(rowID => {
                             let match = false;
                             for (let i=0; i<d.length; i++){
                                 if (this._props.records[rowID][xAxisTitle] == d[i]) match = true;
                             }
-                            if (match && !selectedRows?.includes(rowID)) selectedRows?.push(rowID);
+                            if (match && !selectedRows?.includes(rowID)) selectedRows?.push(rowID); // adding to filtered rows
+                            else if (match && sameAsAny) selectedRows.splice(selectedRows.indexOf(rowID), 1); // removing from filtered rows
                         })
                     }
                 } else this.hoverOverData = d;
@@ -183,8 +201,8 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
             return false;
         });
         if (changeSelectedVariables) {
-            if (sameAsCurrent!) this.curBarSelected = undefined;
-            else this.curBarSelected = selected;
+            if (this._currSelected) this.curBarSelected = selected;
+            else this.curBarSelected = undefined;
         }
     };
 
@@ -334,6 +352,11 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
             const hoverOverBar = this.hoverOverData;
             const selectedData = this.selectedData;
             svg.selectAll('rect').attr('class', function (d: any) {
+                let selected = false;
+                selectedData.map(eachSelectedData => {
+                    if (d[0]==eachSelectedData[0]) selected = true;
+                })
+                return (hoverOverBar && hoverOverBar[0] == d[0]) || selected ? 'histogram-bar hover' : 'histogram-bar';
                 return (hoverOverBar && hoverOverBar[0] == d[0]) || (selectedData && selectedData[0] == d[0]) ? 'histogram-bar hover' : 'histogram-bar';
             });
         };
@@ -389,13 +412,13 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
             .attr('width', eachRectWidth)
             .attr(
                 'class',
-                selected
-                    ? function (d) {
-                          return selected && selected[0] === d[0] ? 'histogram-bar hover' : 'histogram-bar';
-                      }
-                    : function (d) {
-                          return 'histogram-bar';
-                      }
+                    function (d) {
+                        let selectThisData = false;
+                        selected.map(eachSelectedData => {
+                            if (d[0]==eachSelectedData[0]) selectThisData = true;
+                        })
+                        return selectThisData ? 'histogram-bar hover' : 'histogram-bar';
+                    }
             )
             .attr('fill', d => {
                 var barColor;