click on histograms

1 files changed, 16 insertions, 3 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 7a866d742..34fc9ce82 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -315,7 +315,7 @@ export class Histogram extends React.Component<HistogramProps> {
         }
 
         const maxFrequency = d3.max(bins, function(d) { return d.length; })
-        
+
         var y = d3.scaleLinear()
             .range([height, 0]);
             y.domain([0, maxFrequency!]);
@@ -327,6 +327,20 @@ export class Histogram extends React.Component<HistogramProps> {
             .attr("transform", "translate(" + translateXAxis + ", " + height + ")")
             .call(xAxis)
 
+        const onPointClick = action((e: any) => {
+            var pointerX = d3.pointer(e)[0];
+            const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
+                if ((d.x0*eachRectWidth ) <= pointerX && pointerX <= (d.x1*eachRectWidth )){
+                    console.log(d)
+                    return true
+                }
+                return false;
+            });
+            selected.attr('class')=='histogram-bar hover'? selected.attr('class', 'histogram-bar'): selected.attr('class', 'histogram-bar hover')
+        });
+
+        svg.on('click', onPointClick);
+
         // axis titles
         svg.append("text")
             .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")")
@@ -348,8 +362,7 @@ export class Histogram extends React.Component<HistogramProps> {
               .attr("transform", function(d) { return "translate(" + x(d.x0!) + "," + y(d.length) + ")"; })
               .attr("width", eachRectWidth)
               .attr("height", function(d) { return height - y(d.length); })
-              .attr("style", "outline: thin solid black;")
-              .style("fill", "#69b3a2")
+              .attr("class", 'histogram-bar')
     };
 
     render() {