Merge pull request #155 from redbearsam/feature/fix-tests-and-ie

Fix occasional integration test failure and some IE issues

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%;