Skip to content

Commit

Permalink
fix(tooltip): render tooltip on portal to avoid hidden overflows (#418)
Browse files Browse the repository at this point in the history 
This commit render the tooltips (crosshair and annotation) into a react-portal to avoid begin hidden by the container overflow settings. It will also enhance the current tooltip positioning reducing the jump from one position to another only if the tooltip is touching the edges of the chart.

close #375
  • Loading branch information
@markov00
markov00 authored Oct 31, 2019
1 parent 99df5a1 commit 1c00e23
Show file tree
Hide file tree
Showing 34 changed files with 1,492 additions and 1,161 deletions.
20 changes: 15 additions & 5 deletions .playground/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,29 @@
background: blanchedalmond !important;
margin: 0;
padding: 0;
height: 2000px;
width: 2000;
}
#root {

position: absolute;
top: 10px;
left: 10px;
top: 700px;
left: 800px;
}
.chart {
background: white;
display: inline-block;
position: relative;
width: 600px;
height: 350px;
width: 900px;
height: 600px;
margin: 10px;
/* overflow: hidden; */
}
button {
padding: 10px !important;
background: black !important;
border: 1px solid white !important;
color: white !important;
margin: 4px !important;
}
</style>
</head>
Expand Down
245 changes: 212 additions & 33 deletions .playground/playgroud.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,227 @@
import React, { Fragment } from 'react';
import { Axis, Chart, getAxisId, getSpecId, Position, ScaleType, BarSeries, Settings, niceTimeFormatter } from '../src';
import {
Axis,
Chart,
getAxisId,
getSpecId,
Position,
ScaleType,
Settings,
LineAnnotation,
getAnnotationId,
AnnotationDomainTypes,
RectAnnotation,
Rotation,
HistogramBarSeries,
} from '../src';
import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana';

export class Playground extends React.Component<{}, { dataLimit: boolean }> {
import { LoremIpsum } from 'lorem-ipsum';
const lorem = new LoremIpsum({
sentencesPerParagraph: {
max: 8,
min: 4,
},
wordsPerSentence: {
max: 16,
min: 4,
},
});
interface State {
showChart1: boolean;
rotation: number;
vAxis: number;
hAxis: number;
}
const ROTATIONS: Rotation[] = [0, 90, -90, 180];
const RECT_ANNOTATION_TEXT = lorem.generateSentences(3);
export class Playground extends React.Component<{}, State> {
state = {
dataLimit: false,
showChart1: true,
rotation: 0,
vAxis: 0,
hAxis: 0,
};
rotateChart = (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
const sense = evt.metaKey ? -1 : 1;

this.setState((prevState) => {
const val = prevState.rotation + sense < 0 ? 4 + sense : prevState.rotation + sense;
return {
rotation: val % 4,
};
});
};
rotateVerticalAxis = () => {
this.setState((prevState) => {
return {
vAxis: (prevState.vAxis + 1) % 2,
};
});
};
rotateHorizontalAxis = () => {
this.setState((prevState) => {
return {
hAxis: (prevState.hAxis + 1) % 2,
};
});
};
changeData = () => {
removeChart = () => {
this.setState((prevState) => {
return {
dataLimit: !prevState.dataLimit,
showChart1: !prevState.showChart1,
};
});
};
render() {
const { data } = KIBANA_METRICS.metrics.kibana_os_load[0];
const data = KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 30);
return (
<Fragment>
<div>
<button onClick={this.changeData}>Reduce data</button>
</div>
<div className="chart">
<Chart>
<Settings showLegend />
<Axis
id={getAxisId('top')}
position={Position.Bottom}
title={'Top axis'}
tickFormat={niceTimeFormatter([data[0][0], data[data.length - 1][0]])}
/>
<Axis id={getAxisId('left2')} title={'Left axis'} position={Position.Left} />
this.state.showChart1 && (
<Fragment>
<div id="controls">
<button onClick={this.removeChart}>remove chart</button>
<button onClick={this.rotateChart}>rotateChart {ROTATIONS[this.state.rotation]}</button>
<button onClick={this.rotateVerticalAxis}>
Axis to {[Position.Left, Position.Right][this.state.vAxis]}
</button>
<button onClick={this.rotateHorizontalAxis}>
Axis to {[Position.Bottom, Position.Top][this.state.hAxis]}
</button>
</div>
<div className="chart">
<Chart>
<Settings rotation={ROTATIONS[this.state.rotation]} />
<Axis id={getAxisId('x')} position={[Position.Bottom, Position.Top][this.state.hAxis]} />
<Axis id={getAxisId('y')} position={[Position.Left, Position.Right][this.state.vAxis]} />

<HistogramBarSeries
id={getSpecId('series bars chart')}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
data={data}
yScaleToDataExtent={true}
/>
<RectAnnotation
annotationId={getAnnotationId('annrec')}
style={{
fill: 'red',
stroke: 'red',
opacity: 0.3,
}}
dataValues={[
{
coordinates: {
x0: data[0][0],
x1: data[10][0],
y0: 14,
},
details: RECT_ANNOTATION_TEXT,
},
]}
/>
</Chart>

<Chart>
<Settings rotation={ROTATIONS[this.state.rotation]} />
<Axis id={getAxisId('x')} position={[Position.Bottom, Position.Top][this.state.hAxis]} />
<Axis id={getAxisId('y')} position={[Position.Left, Position.Right][this.state.vAxis]} />

<BarSeries
id={getSpecId('bars1')}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
timeZone={'US/Pacific'}
data={data}
/>
</Chart>
</div>
</Fragment>
<HistogramBarSeries
id={getSpecId('series bars chart')}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
data={data}
yScaleToDataExtent={true}
/>
{/* <BarSeries
id={getSpecId('series bars char2')}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
stackAccessors={[0]}
data={KIBANA_METRICS.metrics.kibana_os_load[1].data}
yScaleToDataExtent={true}
/>
<BarSeries
id={getSpecId('series bars char3')}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
stackAccessors={[0]}
data={KIBANA_METRICS.metrics.kibana_os_load[1].data}
yScaleToDataExtent={true}
/> */}
<RectAnnotation
annotationId={getAnnotationId('annrec')}
style={{
fill: 'red',
stroke: 'red',
opacity: 0.3,
}}
dataValues={[
{
coordinates: {
x0: data[0][0],
x1: data[10][0],
y0: 14,
},
details: RECT_ANNOTATION_TEXT,
},
]}
/>
<LineAnnotation
annotationId={getAnnotationId('annline')}
domainType={AnnotationDomainTypes.XDomain}
dataValues={[
// {
// dataValue: data2[1].x,
// details: 'LINE ANNOTATION long title',
// },
// {
// dataValue: data2[data2.length - 1].x,
// details: 'LINE ANNOTATION',
// },
{
dataValue: data[10][0],
details: 'X DOMAIN ANNOTATION',
},
]}
hideLinesTooltips={false}
marker={<div style={{ width: 40, height: 20, background: 'blue', lineHeight: '20px' }}>X ANN</div>}
/>
<LineAnnotation
annotationId={getAnnotationId('yannline')}
domainType={AnnotationDomainTypes.YDomain}
dataValues={[
// {
// dataValue: 7,
// details: 'LINE ANNOTATION long title',
// },
// {
// dataValue: 6,
// details: 'LINE ANNOTATION',
// },
// {
// dataValue: 7.6,
// details: 'LINE ANNOTATION long title',
// },
{
dataValue: 14,
details: 'Y Annotation',
},
]}
hideLinesTooltips={false}
// marker={<div style={{ width: 40, height: 20, background: 'red', lineHeight: '20px' }}>Y ANN</div>}
/>
</Chart>
</div>
</Fragment>
)
);
}
}
Loading

0 comments on commit 1c00e23

Please sign in to comment.