Skip to content

IE11 compatibility fixes#207

Merged
markov00 merged 2 commits intoelastic:masterfrom
markov00:ie11_fix
May 20, 2019
Merged

IE11 compatibility fixes#207
markov00 merged 2 commits intoelastic:masterfrom
markov00:ie11_fix

Conversation

@markov00
Copy link
Copy Markdown
Collaborator

@markov00 markov00 commented May 20, 2019

Summary

This PR fix the following compatibility issues with IE11:

  • d3-scale and d3-array from version 2 are compiled as ES6 only. To fix that I've downgraded the version to the last ES5 one as described in d3 repos.
  • The tooltip position was misplaced because IE11 doesn't support calc inside a transform function. I've converted the calc into multiple transform of the same type: from this: translateX(calc(100% -50px)) to translateX(100%) translateX(-50px);
  • I've tweak a bit the flexbox layout of the legend to correctly accomodate that in IE11. This also fix The value on the legend is not displayed completely  #184
  • I've updated the theme to reflect the css style for the legend height and width.

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

  • Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
  • This was checked for cross-browser compatibility, including a check against IE11
  • Proper documentation or storybook story was added for features that require explanation or tutorials
  • Unit tests were updated or added to match the most common scenarios
  • Each commit follows the convention

markov00 added 2 commits May 20, 2019 09:37
@markov00
build(deps): downgrade d3 es6 only dependencies
9af2bdd 
Some packages in d3 only expose es6 compiled code. We have to remove this to correctly compile the
lib for IE11
@markov00
fix(ie11): fix IE11 legend and crosshair css
30c6710 
Fix crosshair use of calc in transform. Fix legend wrapping and alignment.
@markov00 markov00 requested a review from emmacunningham May 20, 2019 10:48
@codecov-io
Copy link
Copy Markdown

codecov-io commented May 20, 2019 •
edited
Loading

Codecov Report

Merging #207 into master will not change coverage.
The diff coverage is 100%.

Impacted file tree graph

@@          Coverage Diff           @@
##           master    #207   +/-   ##
======================================
  Coverage    97.4%   97.4%           
======================================
  Files          35      35           
  Lines        2120    2120           
  Branches      315     323    +8     
======================================
  Hits         2065    2065           
  Misses         48      48           
  Partials        7       7
Impacted Files Coverage Δ
src/lib/themes/light_theme.ts 100% <ø> (ø) ⬆️
src/lib/themes/dark_theme.ts 100% <ø> (ø) ⬆️
src/state/crosshair_utils.ts 84.31% <100%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3b8542c...30c6710. Read the comment docs.

@markov00 markov00 merged commit 9555e2a into elastic:master May 20, 2019
@markov00 markov00 deleted the ie11_fix branch May 20, 2019 12:19
@markov00
Copy link
Copy Markdown
Collaborator Author

markov00 commented May 20, 2019

🎉 This PR is included in version 4.2.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 added the released Issue released publicly label May 20, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@emmacunningham emmacunningham Awaiting requested review from emmacunningham

Assignees

No one assigned

Labels

released Issue released publicly

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

The value on the legend is not displayed completely

2 participants

@markov00 @codecov-io