github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[APM] Make sure histogram is responsive when resizing window (#43759)

Browse source 
* [APM] Make sure histogram is responsive when resizing window

Closes #43575.

* Move resize comment to ChartsWrapper
This commit is contained in:
Dario Gieselaar 2019-08-22 21:28:33 +02:00 • committed by GitHub
parent 77edbbee39
commit 732b7c9061
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 1360 additions and 1342 deletions
Download patch file Download diff file Expand all files Collapse all files

2534
x-pack/legacy/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap generated
View file

File diff suppressed because it is too large Load diff

168
x-pack/legacy/plugins/apm/public/components/shared/charts/Histogram/index.js
View file

@ -36,8 +36,12 @@ const XY_MARGIN = {
const X_TICK_TOTAL = 8;
// position absolutely to make sure that window resizing/zooming works
const ChartsWrapper = styled.div`
user-select: none;
position: absolute;
top: 0;
left: 0;
`;
export class HistogramInner extends PureComponent {
@ -127,97 +131,99 @@ export class HistogramInner extends PureComponent {
const showBackgroundHover = backgroundHover(hoveredBucket);
return (
<ChartsWrapper>
<XYPlot
xType={this.props.xType}
width={XY_WIDTH}
height={XY_HEIGHT}
margin={XY_MARGIN}
xDomain={xDomain}
yDomain={yDomain}
>
<HorizontalGridLines tickValues={yTickValues} />
<XAxis
style={{ strokeWidth: '1px' }}
marginRight={10}
tickSizeOuter={10}
tickSizeInner={0}
tickTotal={X_TICK_TOTAL}
tickFormat={formatX}
/>
<YAxis
tickSize={0}
hideLine
tickValues={yTickValues}
tickFormat={formatYShort}
/>
{showBackgroundHover && (
<SingleRect
x={x(hoveredBucket.x0)}
width={x(bucketSize) - x(0)}
style={{
fill: theme.euiColorLightestShade
}}
<div style={{ position: 'relative', height: XY_HEIGHT }}>
<ChartsWrapper>
<XYPlot
xType={this.props.xType}
width={XY_WIDTH}
height={XY_HEIGHT}
margin={XY_MARGIN}
xDomain={xDomain}
yDomain={yDomain}
>
<HorizontalGridLines tickValues={yTickValues} />
<XAxis
style={{ strokeWidth: '1px' }}
marginRight={10}
tickSizeOuter={10}
tickSizeInner={0}
tickTotal={X_TICK_TOTAL}
tickFormat={formatX}
/>
)}
{shouldShowTooltip && (
<Tooltip
style={{
marginLeft: '1%',
marginRight: '1%'
}}
header={tooltipHeader(hoveredBucket)}
footer={tooltipFooter(hoveredBucket)}
tooltipPoints={[{ value: formatYLong(hoveredBucket.y) }]}
x={hoveredBucket.xCenter}
y={yDomain[1] / 2}
<YAxis
tickSize={0}
hideLine
tickValues={yTickValues}
tickFormat={formatYShort}
/>
)}
{selectedBucket && (
<SingleRect
x={x(selectedBucket.x0)}
width={x(bucketSize) - x(0)}
{showBackgroundHover && (
<SingleRect
x={x(hoveredBucket.x0)}
width={x(bucketSize) - x(0)}
style={{
fill: theme.euiColorLightestShade
}}
/>
)}
{shouldShowTooltip && (
<Tooltip
style={{
marginLeft: '1%',
marginRight: '1%'
}}
header={tooltipHeader(hoveredBucket)}
footer={tooltipFooter(hoveredBucket)}
tooltipPoints={[{ value: formatYLong(hoveredBucket.y) }]}
x={hoveredBucket.xCenter}
y={yDomain[1] / 2}
/>
)}
{selectedBucket && (
<SingleRect
x={x(selectedBucket.x0)}
width={x(bucketSize) - x(0)}
style={{
fill: 'transparent',
stroke: theme.euiColorVis1,
rx: '0px',
ry: '0px'
}}
/>
)}
<VerticalRectSeries
colorType="literal"
data={chartData}
style={{
fill: 'transparent',
stroke: theme.euiColorVis1,
rx: '0px',
ry: '0px'
}}
/>
)}
<VerticalRectSeries
colorType="literal"
data={chartData}
style={{
rx: '0px',
ry: '0px'
}}
/>
{showVerticalLineHover && (
<VerticalGridLines tickValues={[hoveredBucket.x]} />
)}
{showVerticalLineHover && (
<VerticalGridLines tickValues={[hoveredBucket.x]} />
)}
<Voronoi
extent={[[XY_MARGIN.left, XY_MARGIN.top], [XY_WIDTH, XY_HEIGHT]]}
nodes={this.props.buckets.map(bucket => {
return {
...bucket,
xCenter: (bucket.x0 + bucket.x) / 2
};
})}
onClick={this.onClick}
onHover={this.onHover}
onBlur={this.onBlur}
x={d => x(d.xCenter)}
y={() => 1}
/>
</XYPlot>
</ChartsWrapper>
<Voronoi
extent={[[XY_MARGIN.left, XY_MARGIN.top], [XY_WIDTH, XY_HEIGHT]]}
nodes={this.props.buckets.map(bucket => {
return {
...bucket,
xCenter: (bucket.x0 + bucket.x) / 2
};
})}
onClick={this.onClick}
onHover={this.onHover}
onBlur={this.onBlur}
x={d => x(d.xCenter)}
y={() => 1}
/>
</XYPlot>
</ChartsWrapper>
</div>
);
}
}