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

[APM] Make number of x ticks responsive to the plot width (#44870) (#44992)

Browse source 
* [APM] Make number of x ticks responsive to the plot width

* Fix snapshots
This commit is contained in:
Søren Louv-Jansen 2019-09-06 15:55:39 +02:00 • committed by GitHub
parent 3afe1c0f8a
commit 47876a84e9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 34 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

20
x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/StaticPlot.js
View file

@ -27,8 +27,6 @@ import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue
// see https://github.com/uber/react-vis/issues/1214
const getNull = d => isValidCoordinateValue(d.y) && !isNaN(d.y);
const X_TICK_TOTAL = 7;
class StaticPlot extends PureComponent {
getVisSeries(series, plotValues) {
return series
@ -141,12 +139,23 @@ class StaticPlot extends PureComponent {
}
render() {
const { series, tickFormatX, tickFormatY, plotValues, noHits } = this.props;
const {
width,
series,
tickFormatX,
tickFormatY,
plotValues,
noHits
} = this.props;
const { yTickValues } = plotValues;
// approximate number of x-axis ticks based on the width of the plot. There should by approx 1 tick per 100px
// d3 will determine the exact number of ticks based on the selected range
const xTickTotal = Math.floor(width / 100);
return (
<SharedPlot plotValues={plotValues}>
<XAxis tickSize={0} tickTotal={X_TICK_TOTAL} tickFormat={tickFormatX} />
<XAxis tickSize={0} tickTotal={xTickTotal} tickFormat={tickFormatX} />
{noHits ? (
<StatusText
marginLeft={30}
@ -181,5 +190,6 @@ StaticPlot.propTypes = {
series: PropTypes.array.isRequired,
plotValues: PropTypes.object.isRequired,
tickFormatX: PropTypes.func,
tickFormatY: PropTypes.func.isRequired
tickFormatY: PropTypes.func.isRequired,
width: PropTypes.number.isRequired
};

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

@ -158,6 +158,7 @@ export class InnerCustomPlot extends PureComponent {
<Fragment>
<div style={{ position: 'relative', height: plotValues.XY_HEIGHT }}>
<StaticPlot
width={width}
noHits={noHits}
plotValues={plotValues}
series={enabledSeries}

2
x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/test/CustomPlot.test.js
View file

@ -293,7 +293,7 @@ describe('when response has no data', () => {
onHover={onHover}
onMouseLeave={onMouseLeave}
onSelectionEnd={onSelectionEnd}
width={100}
width={800}
tickFormatX={x => x.getTime()} // Avoid timezone issues in snapshots
/>
);

34
x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap generated
View file

@ -5836,7 +5836,7 @@ Array [
style={
Object {
"height": "256px",
"width": "100px",
"width": "800px",
}
}
>
@ -5850,7 +5850,7 @@ Array [
onMouseLeave={[Function]}
onMouseMove={[Function]}
onWheel={[Function]}
width={100}
width={800}
>
<g
className="rv-xy-plot__axis rv-xy-plot__axis--horizontal "
@ -5861,7 +5861,7 @@ Array [
className="rv-xy-plot__axis__line"
style={Object {}}
x1={0}
x2={20}
x2={720}
y1={0}
y2={0}
/>
@ -5895,7 +5895,7 @@ Array [
<g
className="rv-xy-plot__axis__tick"
style={Object {}}
transform="translate(1.6666666666666665, 0)"
transform="translate(60, 0)"
>
<line
className="rv-xy-plot__axis__tick__line"
@ -5918,7 +5918,7 @@ Array [
<g
className="rv-xy-plot__axis__tick"
style={Object {}}
transform="translate(3.333333333333333, 0)"
transform="translate(120, 0)"
>
<line
className="rv-xy-plot__axis__tick__line"
@ -5941,7 +5941,7 @@ Array [
<g
className="rv-xy-plot__axis__tick"
style={Object {}}
transform="translate(5, 0)"
transform="translate(180, 0)"
>
<line
className="rv-xy-plot__axis__tick__line"
@ -5964,7 +5964,7 @@ Array [
<g
className="rv-xy-plot__axis__tick"
style={Object {}}
transform="translate(6.666666666666666, 0)"
transform="translate(240, 0)"
>
<line
className="rv-xy-plot__axis__tick__line"
@ -5987,7 +5987,7 @@ Array [
<g
className="rv-xy-plot__axis__tick"
style={Object {}}
transform="translate(8.333333333333334, 0)"
transform="translate(300, 0)"
>
<line
className="rv-xy-plot__axis__tick__line"
@ -6010,7 +6010,7 @@ Array [
<g
className="rv-xy-plot__axis__tick"
style={Object {}}
transform="translate(10, 0)"
transform="translate(360, 0)"
>
<line
className="rv-xy-plot__axis__tick__line"
@ -6033,7 +6033,7 @@ Array [
<g
className="rv-xy-plot__axis__tick"
style={Object {}}
transform="translate(11.666666666666668, 0)"
transform="translate(420, 0)"
>
<line
className="rv-xy-plot__axis__tick__line"
@ -6056,7 +6056,7 @@ Array [
<g
className="rv-xy-plot__axis__tick"
style={Object {}}
transform="translate(13.333333333333332, 0)"
transform="translate(480, 0)"
>
<line
className="rv-xy-plot__axis__tick__line"
@ -6079,7 +6079,7 @@ Array [
<g
className="rv-xy-plot__axis__tick"
style={Object {}}
transform="translate(15, 0)"
transform="translate(540, 0)"
>
<line
className="rv-xy-plot__axis__tick__line"
@ -6102,7 +6102,7 @@ Array [
<g
className="rv-xy-plot__axis__tick"
style={Object {}}
transform="translate(16.666666666666668, 0)"
transform="translate(600, 0)"
>
<line
className="rv-xy-plot__axis__tick__line"
@ -6125,7 +6125,7 @@ Array [
<g
className="rv-xy-plot__axis__tick"
style={Object {}}
transform="translate(18.333333333333332, 0)"
transform="translate(660, 0)"
>
<line
className="rv-xy-plot__axis__tick__line"
@ -6148,7 +6148,7 @@ Array [
<g
className="rv-xy-plot__axis__tick"
style={Object {}}
transform="translate(20, 0)"
transform="translate(720, 0)"
>
<line
className="rv-xy-plot__axis__tick__line"
@ -6199,7 +6199,7 @@ Array [
style={
Object {
"height": "256px",
"width": "100px",
"width": "800px",
}
}
>
@ -6213,7 +6213,7 @@ Array [
onMouseLeave={[Function]}
onMouseMove={[Function]}
onWheel={[Function]}
width={100}
width={800}
/>
</div>
</div>