click on histograms

3 files changed, 30 insertions, 9 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index aa005ea66..6c3d59879 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -9,10 +9,17 @@
         overflow: visible;
     }
     .slice {
-        
-    }
-    .hover {
-        stroke: black;
+        &.hover {
+            stroke: black;
+        }
+    }
+    
+    .histogram-bar{
+        outline: thin solid black;
+        fill: #69b3a2;
+        &.hover{
+            fill: grey;
+        }
     }
 
     .tooltip {
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() {
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index d84e34d52..8c8264861 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -33,6 +33,7 @@ export class TableBox extends React.Component<TableBoxProps> {
                                     const header = React.createRef<HTMLElement>();
                                     return (
                                         <th
+                                            key={this.columns.indexOf(col)}
                                             ref={header as any}
                                             style={{
                                                 color: this.props.axes.slice().reverse().lastElement() === col ? 'green' : this.props.axes.lastElement() === col ? 'red' : undefined,
@@ -90,9 +91,9 @@ export class TableBox extends React.Component<TableBoxProps> {
                     <tbody>
                         {this.props.pairs?.map((p, i) => {
                             return (
-                                <tr className="table-row" onClick={action(e => (p['select' + this.props.docView?.()?.rootDoc![Id]] = !p['select' + this.props.docView?.()?.rootDoc![Id]]))}>
+                                <tr key={i} className="table-row" onClick={action(e => (p['select' + this.props.docView?.()?.rootDoc![Id]] = !p['select' + this.props.docView?.()?.rootDoc![Id]]))}>
                                     {this.columns.map(col => (
-                                        <td style={{ fontWeight: p['select' + this.props.docView?.()?.rootDoc![Id]] ? 'bold' : '' }}>{p[col]}</td>
+                                        <td key={this.columns.indexOf(col)} style={{ fontWeight: p['select' + this.props.docView?.()?.rootDoc![Id]] ? 'bold' : '' }}>{p[col]}</td>
                                     ))}
                                 </tr>
                             );