From 9555e2aa77a2d3ba1b0e70bbeab6f40ac186d4a1 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 20 May 2019 08:19:27 -0400 Subject: [PATCH] fix(ie11): fix deps and layout compatibility issues on IE11 This commit fix the few compatibility issues with IE11. `d3-scale` and `d3-array` from version 2 are compiled as ES6 only. The fix downgrade the version to ES5 as described in relative d3 repos. The tooltip position was misplaced because IE11 doesn't support calc inside a transform function. `calc` is converted to a set of transforms of the same type. Fix IE11 flexbox layout on the legend. The theme now reflect the css max width and height of the legend. fix #184 --- .playground/index.tsx | 3 +- .playground/playgroud.tsx | 53 ++++++++++++++++++++++++------- .playground/tsconfig.json | 7 ++++ .playground/webpack.config.js | 7 ++++ package.json | 5 +-- src/components/_legend.scss | 29 +++++++++++------ src/components/legend.tsx | 18 ++++++++--- src/components/legend_element.tsx | 38 ++++++++++++---------- src/lib/themes/dark_theme.ts | 4 +-- src/lib/themes/light_theme.ts | 4 +-- src/state/crosshair_utils.ts | 6 ++-- yarn.lock | 29 ++++++----------- 12 files changed, 134 insertions(+), 69 deletions(-) create mode 100644 .playground/tsconfig.json diff --git a/.playground/index.tsx b/.playground/index.tsx index 0c7bacbbdf..6b61630233 100644 --- a/.playground/index.tsx +++ b/.playground/index.tsx @@ -1,7 +1,8 @@ +import '@babel/polyfill'; import '@elastic/eui/dist/eui_theme_light.css'; import React from 'react'; import ReactDOM from 'react-dom'; -import '../dist/style.css'; +import '../src/index.scss'; import { Playground } from './playgroud'; ReactDOM.render(, document.getElementById('root') as HTMLElement); diff --git a/.playground/playgroud.tsx b/.playground/playgroud.tsx index e90ad5c781..a84955d2af 100644 --- a/.playground/playgroud.tsx +++ b/.playground/playgroud.tsx @@ -11,31 +11,62 @@ import { ScaleType, Settings, } from '../src'; +import { KIBANA_METRICS } from '../src/lib/series/utils/test_dataset_kibana'; export class Playground extends React.Component { render() { - const data = [ - [1555819200000, 111], - [1555840800000, 90], - [1555862400000, 20], - [1555884000000, 210], - [1555905600000, 88], - ]; return ( - + - + d.toFixed(2)} + /> + + + + diff --git a/.playground/tsconfig.json b/.playground/tsconfig.json new file mode 100644 index 0000000000..9886df3705 --- /dev/null +++ b/.playground/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../tsconfig", + "compilerOptions": { + "downlevelIteration": true, + "target": "es5" + } +} diff --git a/.playground/webpack.config.js b/.playground/webpack.config.js index 8927d6b9a5..3e67272542 100644 --- a/.playground/webpack.config.js +++ b/.playground/webpack.config.js @@ -11,11 +11,18 @@ module.exports = { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, + options: { + configFile: './tsconfig.json', + }, }, { test: /\.css$/, use: ['style-loader', 'css-loader'], }, + { + test: /\.scss$/, + use: ['style-loader', 'css-loader', 'sass-loader'], + }, ], }, resolve: { diff --git a/package.json b/package.json index 914dba6617..c9e05071ff 100644 --- a/package.json +++ b/package.json @@ -109,12 +109,13 @@ "webpack-dev-server": "^3.3.1" }, "dependencies": { + "@babel/polyfill": "^7.4.4", "@types/d3-shape": "^1.3.1", "@types/luxon": "^1.11.1", "classnames": "^2.2.6", - "d3-array": "^2.0.3", + "d3-array": "^1.2.4", "d3-collection": "^1.0.7", - "d3-scale": "^2.2.2", + "d3-scale": "^1.0.7", "d3-shape": "^1.3.4", "fp-ts": "^1.14.2", "konva": "^2.6.0", diff --git a/src/components/_legend.scss b/src/components/_legend.scss index f6f4269c4b..d4c440b5be 100644 --- a/src/components/_legend.scss +++ b/src/components/_legend.scss @@ -21,12 +21,13 @@ $elasticChartsLegendMaxHeight: $euiSize * 4; top: 0; left: 0; right: 0; - width: auto; + width: 100%; height: $elasticChartsLegendMaxHeight; flex-direction: column; order: 1; - .elasticChartsLegend__listItem { - min-height: 50%; + .elasticChartsLegendList__item { + min-height: $elasticChartsLegendMaxHeight / 2 - 6px; + height: $elasticChartsLegendMaxHeight / 2 - 6px; width: $elasticChartsLegendMaxWidth; min-width: $elasticChartsLegendMaxWidth; } @@ -35,11 +36,12 @@ $elasticChartsLegendMaxHeight: $euiSize * 4; bottom: 0; left: 0; right: 0; - width: auto; + width: 100%; height: $elasticChartsLegendMaxHeight; flex-direction: column; - .elasticChartsLegend__listItem { - min-height: 50%; + .elasticChartsLegendList__item { + min-height: $elasticChartsLegendMaxHeight / 2 - 6px; + height: $elasticChartsLegendMaxHeight / 2 - 6px; width: $elasticChartsLegendMaxWidth; min-width: $elasticChartsLegendMaxWidth; } @@ -50,8 +52,11 @@ $elasticChartsLegendMaxHeight: $euiSize * 4; left: 0; width: $elasticChartsLegendMaxWidth; order: 1; - .elasticChartsLegend__listItem { + .elasticChartsLegendList__item { + min-height: $euiSize * 2; + height: $euiSize * 2; min-width: 100%; + width: 100%; } } .elasticChartsLegend--right { @@ -59,8 +64,11 @@ $elasticChartsLegendMaxHeight: $euiSize * 4; bottom: 0; right: 0; width: $elasticChartsLegendMaxWidth; - .elasticChartsLegend__listItem { + .elasticChartsLegendList__item { + min-height: $euiSize * 2; + height: $euiSize * 2; min-width: 100%; + width: 100%; } } @@ -88,12 +96,15 @@ $elasticChartsLegendMaxHeight: $euiSize * 4; overflow-x: hidden; height: 100%; max-width: 100%; + width: 100%; @include euiScrollBar; } .elasticChartsLegendList__item { cursor: pointer; - + height: 24px; + width: $elasticChartsLegendMaxWidth; + min-width: $elasticChartsLegendMaxWidth; &:hover { .elasticChartsLegendListItem__title { text-decoration: underline; diff --git a/src/components/legend.tsx b/src/components/legend.tsx index e77815a801..46ba0bfa89 100644 --- a/src/components/legend.tsx +++ b/src/components/legend.tsx @@ -47,16 +47,19 @@ class LegendComponent extends React.Component { }, ); let paddingStyle; + let legendItemGrow = false; if (isVertical(legendPosition)) { paddingStyle = { paddingTop: chartTheme.chartMargins.top, paddingBottom: chartTheme.chartMargins.bottom, }; + legendItemGrow = true; } else { paddingStyle = { paddingLeft: chartTheme.chartMargins.left, paddingRight: chartTheme.chartMargins.right, }; + legendItemGrow = true; } return (
@@ -72,7 +75,7 @@ class LegendComponent extends React.Component { const legendItemProps = { key: item.key, - className: classNames('elasticChartsLegendList__item', { + className: classNames('elasticChartsLegendList__item', 'euiIEFlexWrapFix', { 'elasticChartsLegendList__item--hidden': !isLegendItemVisible, }), onMouseEnter: this.onLegendItemMouseover(item.key), @@ -80,8 +83,8 @@ class LegendComponent extends React.Component { }; return ( - - {this.renderLegendElement(item, item.key)} + + {this.renderLegendElement(item, item.key, legendItemGrow, legendItemProps)} ); })} @@ -102,6 +105,13 @@ class LegendComponent extends React.Component { private renderLegendElement = ( { color, label, isSeriesVisible, displayValue }: LegendItem, legendItemKey: string, + legendItemGrow: boolean, + containerProps: { + key: string; + className: string; + onMouseEnter: (key: React.MouseEvent) => void; + onMouseLeave: () => void; + }, ) => { const tooltipValues = this.props.chartStore!.legendItemTooltipValues.get(); let tooltipValue; @@ -113,7 +123,7 @@ class LegendComponent extends React.Component { const display = tooltipValue != null ? tooltipValue : displayValue.formatted; const props = { color, label, isSeriesVisible, legendItemKey, displayValue: display }; - return ; + return ; } } diff --git a/src/components/legend_element.tsx b/src/components/legend_element.tsx index dc6801befa..425ab4dc26 100644 --- a/src/components/legend_element.tsx +++ b/src/components/legend_element.tsx @@ -23,6 +23,10 @@ interface LegendElementProps { label: string | undefined; isSeriesVisible?: boolean; displayValue: string; + key: string; + className: string; + onMouseEnter: (key: React.MouseEvent) => void; + onMouseLeave: () => void; } interface LegendElementState { @@ -70,19 +74,16 @@ class LegendElementComponent extends React.Component; - const displayValueClassNames = classNames( - 'elasticChartsLegendListItem__displayValue', - { - ['elasticChartsLegendListItem__displayValue--hidden']: !isSeriesVisible, - }, - ); + const displayValueClassNames = classNames('elasticChartsLegendListItem__displayValue', { + ['elasticChartsLegendListItem__displayValue--hidden']: !isSeriesVisible, + }); return ( - + {this.renderVisibilityButton(legendItemKey, isSeriesVisible)} - +