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
elastic · May 20, 2019 · 9555e2a · 9555e2a
1 parent 3b8542c
commit 9555e2a
Show file tree

Hide file tree

Showing 12 changed files with 134 additions and 69 deletions.
diff --git 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(<Playground />, document.getElementById('root') as HTMLElement);
diff --git 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 (
       <Chart>
-        <Settings showLegend={true} legendPosition={Position.Right} />
+        <Settings showLegend={true} legendPosition={Position.Bottom} rotation={0} />
         <Axis
           id={getAxisId('timestamp')}
           title="timestamp"
           position={Position.Bottom}
           tickFormat={niceTimeFormatter([1555819200000, 1555905600000])}
         />
-        <Axis id={getAxisId('count')} title="count" position={Position.Left} />
+        <Axis
+          id={getAxisId('count')}
+          title="count"
+          position={Position.Left}
+          tickFormat={(d) => d.toFixed(2)}
+        />
+        <LineSeries
+          id={getSpecId('dataset A with long title')}
+          xScaleType={ScaleType.Time}
+          yScaleType={ScaleType.Linear}
+          data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 15)}
+          xAccessor={0}
+          yAccessors={[1]}
+        />
+        <LineSeries
+          id={getSpecId('dataset B')}
+          xScaleType={ScaleType.Time}
+          yScaleType={ScaleType.Linear}
+          data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
+          xAccessor={0}
+          yAccessors={[1]}
+        />
+        <LineSeries
+          id={getSpecId('dataset C')}
+          xScaleType={ScaleType.Time}
+          yScaleType={ScaleType.Linear}
+          data={KIBANA_METRICS.metrics.kibana_os_load[2].data.slice(0, 15)}
+          xAccessor={0}
+          yAccessors={[1]}
+        />
+        <LineSeries
+          id={getSpecId('dataset D')}
+          xScaleType={ScaleType.Time}
+          yScaleType={ScaleType.Linear}
+          data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
+          xAccessor={0}
+          yAccessors={[1]}
+        />
         <LineSeries
-          id={getSpecId('dataset A')}
+          id={getSpecId('dataset E')}
           xScaleType={ScaleType.Time}
           yScaleType={ScaleType.Linear}
-          data={data}
+          data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
           xAccessor={0}
           yAccessors={[1]}
         />

diff --git a/.playground/tsconfig.json 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
@@ -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
@@ -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
@@ -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,17 +52,23 @@ $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 {
   top: 0;
   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
@@ -47,16 +47,19 @@ class LegendComponent extends React.Component<ReactiveChartProps> {
       },
     );
     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 (
       <div className={legendClasses} style={paddingStyle}>
@@ -72,16 +75,16 @@ class LegendComponent extends React.Component<ReactiveChartProps> {
 
               const legendItemProps = {
                 key: item.key,
-                className: classNames('elasticChartsLegendList__item', {
+                className: classNames('elasticChartsLegendList__item', 'euiIEFlexWrapFix', {
                   'elasticChartsLegendList__item--hidden': !isLegendItemVisible,
                 }),
                 onMouseEnter: this.onLegendItemMouseover(item.key),
                 onMouseLeave: this.onLegendItemMouseout,
               };
 
               return (
-                <EuiFlexItem {...legendItemProps}>
-                  {this.renderLegendElement(item, item.key)}
+                <EuiFlexItem className={legendItemProps.className}>
+                  {this.renderLegendElement(item, item.key, legendItemGrow, legendItemProps)}
                 </EuiFlexItem>
               );
             })}
@@ -102,6 +105,13 @@ class LegendComponent extends React.Component<ReactiveChartProps> {
   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<ReactiveChartProps> {
     const display = tooltipValue != null ? tooltipValue : displayValue.formatted;
     const props = { color, label, isSeriesVisible, legendItemKey, displayValue: display };
 
-    return <LegendElement {...props} />;
+    return <LegendElement {...props} {...containerProps} />;
   }
 }
 

diff --git 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<LegendElementProps, LegendE
   render() {
     const { legendItemKey } = this.props;
     const { color, label, isSeriesVisible, displayValue } = this.props;
+    const { className, onMouseEnter, onMouseLeave } = this.props;
 
     const onTitleClick = this.onLegendTitleClick(legendItemKey);
 
     const showLegendDisplayValue = this.props.chartStore!.showLegendDisplayValue.get();
     const isSelected = legendItemKey === this.props.chartStore!.selectedLegendItemKey.get();
-    const titleClassNames = classNames(
-      'eui-textTruncate',
-      'elasticChartsLegendListItem__title',
-      {
-        ['elasticChartsLegendListItem__title--selected']: isSelected,
-        ['elasticChartsLegendListItem__title--hasDisplayValue']: this.props.chartStore!.showLegendDisplayValue.get(),
-      },
-    );
+    const titleClassNames = classNames('eui-textTruncate', 'elasticChartsLegendListItem__title', {
+      ['elasticChartsLegendListItem__title--selected']: isSelected,
+      ['elasticChartsLegendListItem__title--hasDisplayValue']: this.props.chartStore!.showLegendDisplayValue.get(),
+    });
 
     const colorDotProps = {
       color,
@@ -91,15 +92,20 @@ class LegendElementComponent extends React.Component<LegendElementProps, LegendE
 
     const colorDot = <EuiIcon type="dot" {...colorDotProps} />;
 
-    const displayValueClassNames = classNames(
-      'elasticChartsLegendListItem__displayValue',
-      {
-        ['elasticChartsLegendListItem__displayValue--hidden']: !isSeriesVisible,
-      },
-    );
+    const displayValueClassNames = classNames('elasticChartsLegendListItem__displayValue', {
+      ['elasticChartsLegendListItem__displayValue--hidden']: !isSeriesVisible,
+    });
 
     return (
-      <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
+      <EuiFlexGroup
+        className={classNames(className, 'euiIEFlexWrapFix')}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        gutterSize="xs"
+        alignItems="center"
+        justifyContent="spaceBetween"
+        responsive={false}
+      >
         <EuiFlexItem grow={false}>
           <EuiPopover
             id="legendItemColorPicker"
@@ -117,7 +123,7 @@ class LegendElementComponent extends React.Component<LegendElementProps, LegendE
         <EuiFlexItem grow={false}>
           {this.renderVisibilityButton(legendItemKey, isSeriesVisible)}
         </EuiFlexItem>
-        <EuiFlexItem grow={false} onClick={onTitleClick}>
+        <EuiFlexItem onClick={onTitleClick} grow={false}>
           <EuiPopover
             id="contentPanel"
             button={

diff --git a/src/lib/themes/dark_theme.ts b/src/lib/themes/dark_theme.ts
@@ -103,8 +103,8 @@ export const DARK_THEME: Theme = {
     defaultVizColor: DEFAULT_MISSING_COLOR,
   },
   legend: {
-    verticalWidth: 150,
-    horizontalHeight: 50,
+    verticalWidth: 160,
+    horizontalHeight: 64,
   },
   crosshair: {
     band: {

diff --git a/src/lib/themes/light_theme.ts b/src/lib/themes/light_theme.ts
@@ -103,8 +103,8 @@ export const LIGHT_THEME: Theme = {
     defaultVizColor: DEFAULT_MISSING_COLOR,
   },
   legend: {
-    verticalWidth: 150,
-    horizontalHeight: 50,
+    verticalWidth: 160,
+    horizontalHeight: 64,
   },
   crosshair: {
     band: {

diff --git a/src/state/crosshair_utils.ts b/src/state/crosshair_utils.ts
@@ -123,10 +123,10 @@ export function getTooltipPosition(
     chartDimensions,
     isHorizontalRotated,
   );
-  const xTranslation = `calc(${hPosition.position}px - ${hPosition.offset}%)`;
-  const yTranslation = `calc(${vPosition.position}px - ${vPosition.offset}%)`;
+  const xTranslation = `translateX(${hPosition.position}px) translateX(-${hPosition.offset}%)`;
+  const yTranslation = `translateY(${vPosition.position}px) translateY(-${vPosition.offset}%)`;
   return {
-    transform: `translate(${xTranslation},${yTranslation})`,
+    transform: `${xTranslation} ${yTranslation}`,
   };
 }