From 2bf487b4924f78b1b28f4f7a2b71f99467d3585d Mon Sep 17 00:00:00 2001 From: Andy Date: Wed, 3 Apr 2019 14:11:22 +0100 Subject: [PATCH] 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) --- .../src/js/axis/ordinalAxis.js | 18 +++++----- .../src/js/plugin/plugin.js | 5 +++ .../src/js/plugin/polyfills/closest.js | 23 +++++++++++++ .../src/js/plugin/polyfills/index.js | 2 ++ .../src/js/plugin/polyfills/matches.js | 11 +++++++ .../src/less/perspective-view.less | 33 ------------------- .../perspective-viewer/src/less/viewer.less | 32 ++++++++++++++++++ 7 files changed, 83 insertions(+), 41 deletions(-) create mode 100644 packages/perspective-viewer-d3fc/src/js/plugin/polyfills/closest.js create mode 100644 packages/perspective-viewer-d3fc/src/js/plugin/polyfills/index.js create mode 100644 packages/perspective-viewer-d3fc/src/js/plugin/polyfills/matches.js diff --git a/packages/perspective-viewer-d3fc/src/js/axis/ordinalAxis.js b/packages/perspective-viewer-d3fc/src/js/axis/ordinalAxis.js index c9e28c9160..16548ef9ba 100644 --- a/packages/perspective-viewer-d3fc/src/js/axis/ordinalAxis.js +++ b/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 }; }; diff --git a/packages/perspective-viewer-d3fc/src/js/plugin/plugin.js b/packages/perspective-viewer-d3fc/src/js/plugin/plugin.js index ba0b713e66..06cd9eac1d 100644 --- a/packages/perspective-viewer-d3fc/src/js/plugin/plugin.js +++ b/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; +} diff --git a/packages/perspective-viewer-d3fc/src/js/plugin/polyfills/closest.js b/packages/perspective-viewer-d3fc/src/js/plugin/polyfills/closest.js new file mode 100644 index 0000000000..bf2da8264c --- /dev/null +++ b/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; + }; +} diff --git a/packages/perspective-viewer-d3fc/src/js/plugin/polyfills/index.js b/packages/perspective-viewer-d3fc/src/js/plugin/polyfills/index.js new file mode 100644 index 0000000000..8cc9536b52 --- /dev/null +++ b/packages/perspective-viewer-d3fc/src/js/plugin/polyfills/index.js @@ -0,0 +1,2 @@ +import "./matches"; +import "./closest"; diff --git a/packages/perspective-viewer-d3fc/src/js/plugin/polyfills/matches.js b/packages/perspective-viewer-d3fc/src/js/plugin/polyfills/matches.js new file mode 100644 index 0000000000..96e76ea0b1 --- /dev/null +++ b/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; +} diff --git a/packages/perspective-viewer-d3fc/src/less/perspective-view.less b/packages/perspective-viewer-d3fc/src/less/perspective-view.less index 4a5556dca2..fc869c15a8 100644 --- a/packages/perspective-viewer-d3fc/src/less/perspective-view.less +++ b/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 { diff --git a/packages/perspective-viewer/src/less/viewer.less b/packages/perspective-viewer/src/less/viewer.less index 5c761146f8..ca6703f259 100644 --- a/packages/perspective-viewer/src/less/viewer.less +++ b/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%;