Fix occasional integration test failure and some IE issues

IE uses left/right instead of x/y and different format "transform".
Use "closest" (with polyfill) to navigate up to the chart element.
Polyfill "matches" which is used by d3fc
Move default theme variables to where they actually need to be (IE/Edge don't get the variables otherwise)

packages/perspective-viewer-d3fc/src/js/axis/ordinalAxis.js

@@ -151,11 +151,15 @@ export const component = settings => {
     };
 
     const hideOverlappingLabels = (s, rotated) => {
-        const getTransformCoords = transform =>
-            transform
+        const getTransformCoords = transform => {
+            const splitOn = transform.indexOf(",") !== -1 ? "," : " ";
+            const coords = transform
                 .substring(transform.indexOf("(") + 1, transform.indexOf(")"))
-                .split(",")
+                .split(splitOn)
                 .map(c => parseInt(c));
+            while (coords.length < 2) coords.push(0);
+            return coords;
+        };
 
         const rectanglesOverlap = (r1, r2) => r1.x <= r2.x + r2.width && r2.x <= r1.x + r1.width && r1.y <= r2.y + r2.height && r2.y <= r1.y + r1.height;
         const rotatedLabelsOverlap = (r1, r2) => r1.x + r1.width + 14 > r2.x + r2.width;
@@ -189,17 +193,15 @@ export const component = settings => {
     };
 
     const getXAxisBoundsRect = s => {
-        const chart = getChartContainer(s.node())
-            .getRootNode()
-            .querySelector(".cartesian-chart");
+        const chart = s.node().closest(".cartesian-chart");
         const axis = chart.querySelector(".x-axis");
 
         const chartRect = chart.getBoundingClientRect();
         const axisRect = axis.getBoundingClientRect();
         return {
-            x: chartRect.x - axisRect.x,
+            x: chartRect.left - axisRect.left,
             width: chartRect.width,
-            y: chartRect.y - axisRect.y,
+            y: chartRect.top - axisRect.top,
             height: chartRect.height
         };
     };

packages/perspective-viewer-d3fc/src/js/plugin/plugin.js

@@ -8,6 +8,7 @@
  */
 
 import charts from "../charts/charts";
+import "./polyfills/index";
 import "./template";
 
 export const PRIVATE = Symbol("D3FC chart");
@@ -117,3 +118,7 @@ function deleteChart() {
         perspective_d3fc_element.delete();
     }
 }
+
+if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector;
+}

packages/perspective-viewer-d3fc/src/js/plugin/polyfills/closest.js

@@ -0,0 +1,23 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+    Element.prototype.closest = function(s) {
+        var el = this;
+
+        do {
+            if (el.matches(s)) return el;
+            el = el.parentElement || el.parentNode;
+        } while (el !== null && el.nodeType === 1);
+        return null;
+    };
+}

packages/perspective-viewer-d3fc/src/js/plugin/polyfills/index.js

@@ -0,0 +1,2 @@
+import "./matches";
+import "./closest";

packages/perspective-viewer-d3fc/src/js/plugin/polyfills/matches.js

@@ -0,0 +1,11 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+}

packages/perspective-viewer-d3fc/src/less/perspective-view.less

@@ -1,36 +1,3 @@
-:host {
-  --d3fc-series: rgba(31, 119, 180, 0.5);
-  --d3fc-series-1: #0366d6;
-  --d3fc-series-2: #ff7f0e;
-  --d3fc-series-3: #2ca02c;
-  --d3fc-series-4: #d62728;
-  --d3fc-series-5: #9467bd;
-  --d3fc-series-6: #8c564b;
-  --d3fc-series-7: #e377c2;
-  --d3fc-series-8: #7f7f7f;
-  --d3fc-series-9: #bcbd22;
-  --d3fc-series-10: #17becf;
-  --d3fc-gradient-full: linear-gradient(
-        #4d342f 0%,
-        #e4521b 22.5%,
-        #feeb65 42.5%,
-        #f0f0f0 50%,
-        #dcedc8 57.5%,
-        #42b3d5 67.5%,
-        #1a237e 100%
-    );
-  --d3fc-gradient-positive: linear-gradient(
-    #dcedc8 0%,
-    #42b3d5 35%,
-    #1a237e 100%
-  );
-  --d3fc-gradient-negative: linear-gradient(
-    #feeb65 100%,
-    #e4521b 70%,
-    #4d342f 0%
-  );
-}
-
 :host([view=d3_xy_scatter]), :host([view=d3_candlestick]), :host([view=d3_ohlc]), :host([view=d3_sunburst]) {
  & #app {
    &.columns_horizontal #side_panel #inactive_columns {

packages/perspective-viewer/src/less/viewer.less

@@ -75,6 +75,38 @@
     --hypergrid-row-hover--color: #666;
     --hypergrid-cell-hover--background: #eeeeee;
     --hypergrid-cell-hover--color: #666;
+
+    --d3fc-series: rgba(31, 119, 180, 0.5);
+    --d3fc-series-1: #0366d6;
+    --d3fc-series-2: #ff7f0e;
+    --d3fc-series-3: #2ca02c;
+    --d3fc-series-4: #d62728;
+    --d3fc-series-5: #9467bd;
+    --d3fc-series-6: #8c564b;
+    --d3fc-series-7: #e377c2;
+    --d3fc-series-8: #7f7f7f;
+    --d3fc-series-9: #bcbd22;
+    --d3fc-series-10: #17becf;
+    --d3fc-gradient-full: linear-gradient(
+          #4d342f 0%,
+          #e4521b 22.5%,
+          #feeb65 42.5%,
+          #f0f0f0 50%,
+          #dcedc8 57.5%,
+          #42b3d5 67.5%,
+          #1a237e 100%
+      );
+    --d3fc-gradient-positive: linear-gradient(
+      #dcedc8 0%,
+      #42b3d5 35%,
+      #1a237e 100%
+    );
+    --d3fc-gradient-negative: linear-gradient(
+      #feeb65 100%,
+      #e4521b 70%,
+      #4d342f 0%
+    );
+
     #pivot_chart {
         position: absolute;
         width: 100%;