fix(tooltip): ie11 flex sizing (opensearch-project#334)

Fix tooltip label overflow/squeeze opensearch-project#332
AMoo-Miki · Aug 21, 2019 · 2683333 · 2683333
1 parent be4a53d
commit 2683333
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 116 deletions.
diff --git a/packages/osd-charts/.playground/playgroud.tsx b/packages/osd-charts/.playground/playgroud.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { loremIpsum } from 'lorem-ipsum';
 
 import {
   Axis,
@@ -10,129 +9,103 @@ import {
   Position,
   ScaleType,
   Settings,
-  AreaSeries,
-  mergeWithDefaultTheme,
+  LineSeries,
 } from '../src';
 import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana';
+import { CursorEvent } from '../src/specs/settings';
+import { CursorUpdateListener } from '../src/chart_types/xy_chart/store/chart_state';
 
 export class Playground extends React.Component {
+  ref1 = React.createRef<Chart>();
+  ref2 = React.createRef<Chart>();
+  ref3 = React.createRef<Chart>();
+
+  onCursorUpdate: CursorUpdateListener = (event?: CursorEvent) => {
+    this.ref1.current!.dispatchExternalCursorEvent(event);
+    this.ref2.current!.dispatchExternalCursorEvent(event);
+    this.ref3.current!.dispatchExternalCursorEvent(event);
+  };
+
   render() {
-    return <>{this.renderChart(Position.Bottom)}</>;
+    return (
+      <>
+        {renderChart(
+          '1',
+          this.ref1,
+          KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 15),
+          this.onCursorUpdate,
+          true,
+        )}
+        {renderChart(
+          '2',
+          this.ref2,
+          KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15),
+          this.onCursorUpdate,
+          true,
+        )}
+        {renderChart('3', this.ref3, KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(15, 30), this.onCursorUpdate)}
+      </>
+    );
   }
-  renderChart(legendPosition: Position) {
-    const renderMore = () => {
-      const random = Math.floor(Math.random() * 3) + 1;
-      const id = loremIpsum({ count: random, units: 'words' });
-      return (
-        <AreaSeries
-          id={getSpecId(id)}
-          xScaleType={ScaleType.Time}
+}
+
+function renderChart(
+  key: string,
+  ref: React.RefObject<Chart>,
+  data: any,
+  onCursorUpdate?: CursorUpdateListener,
+  timeSeries: boolean = false,
+) {
+  return (
+    <div key={key} className="chart">
+      <Chart ref={ref}>
+        <Settings
+          tooltip={{ type: 'vertical' }}
+          debug={false}
+          legendPosition={Position.Right}
+          showLegend={true}
+          onCursorUpdate={onCursorUpdate}
+        />
+        <Axis
+          id={getAxisId('timestamp')}
+          title="timestamp"
+          position={Position.Bottom}
+          tickFormat={niceTimeFormatter([1555819200000, 1555905600000])}
+        />
+        <Axis id={getAxisId('count')} title="count" position={Position.Left} tickFormat={(d) => d.toFixed(2)} />
+        <LineSeries
+          id={getSpecId('dataset A with a really really really really long title')}
+          xScaleType={timeSeries ? ScaleType.Time : ScaleType.Linear}
           yScaleType={ScaleType.Linear}
-          data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 15)}
+          data={data}
           xAccessor={0}
-          areaSeriesStyle={{
-            point: {
-              visible: true,
-              strokeWidth: 3,
-              radius: 10,
-            },
+          lineSeriesStyle={{
             line: {
-              strokeWidth: 10,
+              stroke: 'red',
+              opacity: 1,
             },
           }}
           yAccessors={[1]}
         />
-      );
-    };
-    const theme = mergeWithDefaultTheme({
-      lineSeriesStyle: {
-        line: {
-          stroke: 'violet',
-          strokeWidth: 4,
-        },
-        point: {
-          fill: 'yellow',
-          stroke: 'black',
-          strokeWidth: 2,
-          radius: 6,
-        },
-      },
-    });
-    return (
-      <div className="chart">
-        <Chart>
-          <Settings debug={false} showLegend={true} legendPosition={legendPosition} rotation={0} theme={theme} />
-          <Axis
-            id={getAxisId('timestamp')}
-            title="timestamp"
-            position={Position.Bottom}
-            tickFormat={niceTimeFormatter([1555819200000, 1555905600000])}
-          />
-          <Axis id={getAxisId('count')} title="count" position={Position.Left} tickFormat={(d) => d.toFixed(2)} />
-
-          <AreaSeries
-            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]}
-            stackAccessors={[0]}
-            areaSeriesStyle={{
-              line: {
-                // opacity:1,
-                strokeWidth: 10,
-              },
-              point: {
-                visible: true,
-                strokeWidth: 3,
-                radius: 10,
-              },
-            }}
-          />
-          <AreaSeries
-            id={getSpecId('dataset C')}
-            xScaleType={ScaleType.Time}
-            yScaleType={ScaleType.Linear}
-            data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
-            xAccessor={0}
-            yAccessors={[1]}
-            stackAccessors={[0]}
-            areaSeriesStyle={{
-              line: {
-                // opacity:1,
-                strokeWidth: 10,
-              },
-              point: {
-                visible: true,
-                strokeWidth: 3,
-                radius: 10,
-              },
-            }}
-          />
-          <AreaSeries
-            id={getSpecId('dataset A')}
-            xScaleType={ScaleType.Time}
-            yScaleType={ScaleType.Linear}
-            data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 15)}
-            xAccessor={0}
-            areaSeriesStyle={{
-              point: {
-                visible: true,
-                strokeWidth: 3,
-                radius: 10,
-              },
-              line: {
-                strokeWidth: 10,
-              },
-            }}
-            yAccessors={[1]}
-          />
-          {Array(10)
-            .fill(null)
-            .map(renderMore)}
-        </Chart>
-      </div>
-    );
-  }
+        <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]}
+          stackAccessors={[0]}
+        />
+        <LineSeries
+          id={getSpecId('dataset C')}
+          xScaleType={ScaleType.Time}
+          yScaleType={ScaleType.Linear}
+          data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
+          xAccessor={0}
+          yAccessors={[1]}
+          stackAccessors={[0]}
+        />
+      </Chart>
+    </div>
+  );
 }
diff --git a/packages/osd-charts/package.json b/packages/osd-charts/package.json
@@ -29,7 +29,8 @@
     "semantic-release": "semantic-release",
     "typecheck:src": "yarn build:ts --noEmit",
     "typecheck:all": "tsc -p ./tsconfig.json --noEmit",
-    "playground": "cd .playground && webpack-dev-server"
+    "playground": "cd .playground && webpack-dev-server",
+    "playground:ie": "cd .playground && webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIp"
   },
   "files": [
     "dist/**/*",
@@ -145,6 +146,7 @@
     "yarn": "^1.10.1"
   },
   "browserslist": [
-    "last 2 versions"
+    "last 2 versions",
+    "ie 11"
   ]
 }
diff --git a/packages/osd-charts/src/components/_tooltip.scss b/packages/osd-charts/src/components/_tooltip.scss
@@ -24,7 +24,8 @@
   }
 
   &__label {
-    @include euiTextOverflowWrap;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
     min-width: 1px;
     flex: 1 1 auto;
   }