Skip to content

Commit abaa472

Browse files
nickofthymenickofthyme
authored
fix(tooltip): ie11 flex sizing (#334)
Fix tooltip label overflow/squeeze #332
1 parent 659d27e commit abaa472

File tree

3 files changed

+92
-116
lines changed

3 files changed

+92
-116
lines changed

‎.playground/playgroud.tsx‎

Lines changed: 86 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import { loremIpsum } from 'lorem-ipsum';
32

43
import {
54
Axis,
@@ -10,129 +9,103 @@ import {
109
Position,
1110
ScaleType,
1211
Settings,
13-
AreaSeries,
14-
mergeWithDefaultTheme,
12+
LineSeries,
1513
} from '../src';
1614
import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana';
15+
import { CursorEvent } from '../src/specs/settings';
16+
import { CursorUpdateListener } from '../src/chart_types/xy_chart/store/chart_state';
1717

1818
export class Playground extends React.Component {
19+
ref1 = React.createRef<Chart>();
20+
ref2 = React.createRef<Chart>();
21+
ref3 = React.createRef<Chart>();
22+
23+
onCursorUpdate: CursorUpdateListener = (event?: CursorEvent) => {
24+
this.ref1.current!.dispatchExternalCursorEvent(event);
25+
this.ref2.current!.dispatchExternalCursorEvent(event);
26+
this.ref3.current!.dispatchExternalCursorEvent(event);
27+
};
28+
1929
render() {
20-
return <>{this.renderChart(Position.Bottom)}</>;
30+
return (
31+
<>
32+
{renderChart(
33+
'1',
34+
this.ref1,
35+
KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 15),
36+
this.onCursorUpdate,
37+
true,
38+
)}
39+
{renderChart(
40+
'2',
41+
this.ref2,
42+
KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15),
43+
this.onCursorUpdate,
44+
true,
45+
)}
46+
{renderChart('3', this.ref3, KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(15, 30), this.onCursorUpdate)}
47+
</>
48+
);
2149
}
22-
renderChart(legendPosition: Position) {
23-
const renderMore = () => {
24-
const random = Math.floor(Math.random() * 3) + 1;
25-
const id = loremIpsum({ count: random, units: 'words' });
26-
return (
27-
<AreaSeries
28-
id={getSpecId(id)}
29-
xScaleType={ScaleType.Time}
50+
}
51+
52+
function renderChart(
53+
key: string,
54+
ref: React.RefObject<Chart>,
55+
data: any,
56+
onCursorUpdate?: CursorUpdateListener,
57+
timeSeries: boolean = false,
58+
) {
59+
return (
60+
<div key={key} className="chart">
61+
<Chart ref={ref}>
62+
<Settings
63+
tooltip={{ type: 'vertical' }}
64+
debug={false}
65+
legendPosition={Position.Right}
66+
showLegend={true}
67+
onCursorUpdate={onCursorUpdate}
68+
/>
69+
<Axis
70+
id={getAxisId('timestamp')}
71+
title="timestamp"
72+
position={Position.Bottom}
73+
tickFormat={niceTimeFormatter([1555819200000, 1555905600000])}
74+
/>
75+
<Axis id={getAxisId('count')} title="count" position={Position.Left} tickFormat={(d) => d.toFixed(2)} />
76+
<LineSeries
77+
id={getSpecId('dataset A with a really really really really long title')}
78+
xScaleType={timeSeries ? ScaleType.Time : ScaleType.Linear}
3079
yScaleType={ScaleType.Linear}
31-
data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 15)}
80+
data={data}
3281
xAccessor={0}
33-
areaSeriesStyle={{
34-
point: {
35-
visible: true,
36-
strokeWidth: 3,
37-
radius: 10,
38-
},
82+
lineSeriesStyle={{
3983
line: {
40-
strokeWidth: 10,
84+
stroke: 'red',
85+
opacity: 1,
4186
},
4287
}}
4388
yAccessors={[1]}
4489
/>
45-
);
46-
};
47-
const theme = mergeWithDefaultTheme({
48-
lineSeriesStyle: {
49-
line: {
50-
stroke: 'violet',
51-
strokeWidth: 4,
52-
},
53-
point: {
54-
fill: 'yellow',
55-
stroke: 'black',
56-
strokeWidth: 2,
57-
radius: 6,
58-
},
59-
},
60-
});
61-
return (
62-
<div className="chart">
63-
<Chart>
64-
<Settings debug={false} showLegend={true} legendPosition={legendPosition} rotation={0} theme={theme} />
65-
<Axis
66-
id={getAxisId('timestamp')}
67-
title="timestamp"
68-
position={Position.Bottom}
69-
tickFormat={niceTimeFormatter([1555819200000, 1555905600000])}
70-
/>
71-
<Axis id={getAxisId('count')} title="count" position={Position.Left} tickFormat={(d) => d.toFixed(2)} />
72-
73-
<AreaSeries
74-
id={getSpecId('dataset B')}
75-
xScaleType={ScaleType.Time}
76-
yScaleType={ScaleType.Linear}
77-
data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
78-
xAccessor={0}
79-
yAccessors={[1]}
80-
stackAccessors={[0]}
81-
areaSeriesStyle={{
82-
line: {
83-
// opacity:1,
84-
strokeWidth: 10,
85-
},
86-
point: {
87-
visible: true,
88-
strokeWidth: 3,
89-
radius: 10,
90-
},
91-
}}
92-
/>
93-
<AreaSeries
94-
id={getSpecId('dataset C')}
95-
xScaleType={ScaleType.Time}
96-
yScaleType={ScaleType.Linear}
97-
data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
98-
xAccessor={0}
99-
yAccessors={[1]}
100-
stackAccessors={[0]}
101-
areaSeriesStyle={{
102-
line: {
103-
// opacity:1,
104-
strokeWidth: 10,
105-
},
106-
point: {
107-
visible: true,
108-
strokeWidth: 3,
109-
radius: 10,
110-
},
111-
}}
112-
/>
113-
<AreaSeries
114-
id={getSpecId('dataset A')}
115-
xScaleType={ScaleType.Time}
116-
yScaleType={ScaleType.Linear}
117-
data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 15)}
118-
xAccessor={0}
119-
areaSeriesStyle={{
120-
point: {
121-
visible: true,
122-
strokeWidth: 3,
123-
radius: 10,
124-
},
125-
line: {
126-
strokeWidth: 10,
127-
},
128-
}}
129-
yAccessors={[1]}
130-
/>
131-
{Array(10)
132-
.fill(null)
133-
.map(renderMore)}
134-
</Chart>
135-
</div>
136-
);
137-
}
90+
<LineSeries
91+
id={getSpecId('dataset B')}
92+
xScaleType={ScaleType.Time}
93+
yScaleType={ScaleType.Linear}
94+
data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
95+
xAccessor={0}
96+
yAccessors={[1]}
97+
stackAccessors={[0]}
98+
/>
99+
<LineSeries
100+
id={getSpecId('dataset C')}
101+
xScaleType={ScaleType.Time}
102+
yScaleType={ScaleType.Linear}
103+
data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
104+
xAccessor={0}
105+
yAccessors={[1]}
106+
stackAccessors={[0]}
107+
/>
108+
</Chart>
109+
</div>
110+
);
138111
}

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
"semantic-release": "semantic-release",
3030
"typecheck:src": "yarn build:ts --noEmit",
3131
"typecheck:all": "tsc -p ./tsconfig.json --noEmit",
32-
"playground": "cd .playground && webpack-dev-server"
32+
"playground": "cd .playground && webpack-dev-server",
33+
"playground:ie": "cd .playground && webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIp"
3334
},
3435
"files": [
3536
"dist/**/*",
@@ -145,6 +146,7 @@
145146
"yarn": "^1.10.1"
146147
},
147148
"browserslist": [
148-
"last 2 versions"
149+
"last 2 versions",
150+
"ie 11"
149151
]
150152
}

‎src/components/_tooltip.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
}
2525

2626
&__label {
27-
@include euiTextOverflowWrap;
27+
overflow-wrap: break-word;
28+
word-wrap: break-word;
2829
min-width: 1px;
2930
flex: 1 1 auto;
3031
}

0 commit comments

Comments
 (0)