Adjusted top margin of heatmap plot to get it working in V2 (apache#1361

)

* Adjusted top margin of heatmap plot to get it working in V2

Problem:
The heatmap in V2 was shifted towards the top margin of slice
container, this was because in v2 slice name header was part of the
container body, while in v1 the header was separately defined in
explore.html template.

Solution:
To get heatmap properly shown in V2, we need to
take into account the height of the slice_name header. Adding to
margin_top will shift the plot in V1 too, but it won't make a big
difference to the look.

Ideally when we renovate slice container in future PR we would defined a
height for slice_name header and take it into account for all
visualization files.

* Added panel header height to margin_top for explore v2

* Use getBoundingClientRect to get header height

* Use slice-header for id of panel-title

caravel/assets/javascripts/explorev2/components/ChartContainer.jsx

@@ -67,7 +67,12 @@ class ChartContainer extends React.Component {
         <Panel
           style={{ height: this.props.height }}
           header={
-            <div className="panel-title">{this.props.sliceName}</div>
+            <div
+              id="slice-header"
+              className="panel-title"
+            >
+              {this.props.sliceName}
+            </div>
           }
         >
           <div

caravel/assets/visualizations/heatmap.js

@@ -10,8 +10,11 @@ require('./heatmap.css');
 // https://jsfiddle.net/cyril123/h0reyumq/
 function heatmapVis(slice) {
   function refresh() {
+    // Header for panel in explore v2
+    const header = document.getElementById('slice-header');
+    const headerHeight = header ? header.getBoundingClientRect().height : 0;
     const margin = {
-      top: 10,
+      top: 20 + headerHeight,
       right: 10,
       bottom: 35,
       left: 35,