Skip to content

Commit 60bbd18

Browse files
cauemarcondescauemarcondes
committed
refactoring
1 parent ead25c3 commit 60bbd18

File tree

5 files changed

+120
-33
lines changed

5 files changed

+120
-33
lines changed

‎x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,12 @@ export function ErrorDistribution({ distribution, title }: Props) {
7474
);
7575
}
7676

77+
const xMin = d3.min(buckets, d => d.x0);
78+
const xMax = d3.max(buckets, d => d.x);
79+
const tickFormat = scaleUtc()
80+
.domain([xMin, xMax])
81+
.tickFormat();
82+
7783
return (
7884
<div>
7985
<EuiTitle size="xs">
@@ -85,11 +91,7 @@ export function ErrorDistribution({ distribution, title }: Props) {
8591
xType="time-utc"
8692
formatX={(value: Date) => {
8793
const time = value.getTime();
88-
const xMin = d3.min(buckets, d => d.x0);
89-
const xMax = d3.max(buckets, d => d.x);
90-
return scaleUtc()
91-
.domain([xMin, xMax])
92-
.tickFormat()(new Date(time - getTimezoneOffsetInMs(time)));
94+
return tickFormat(new Date(time - getTimezoneOffsetInMs(time)));
9395
}}
9496
buckets={buckets}
9597
bucketSize={distribution.bucketSize}

‎x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/plotUtils.tsx‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import React from 'react';
1313

1414
import { TimeSeries, Coordinate } from '../../../../../typings/timeseries';
1515
import { unit } from '../../../../style/variables';
16-
import { getTimezoneOffsetInMs } from './getTimezoneOffsetInMs';
16+
import { getDomainTZ, getTimeTicksTZ } from '../helper/timezone';
1717

1818
const XY_HEIGHT = unit * 16;
1919
const XY_MARGIN = {
@@ -73,7 +73,6 @@ export function getPlotValues(
7373
);
7474

7575
const xMin = d3.min(flattenedCoordinates, d => d.x);
76-
7776
const xMax = d3.max(flattenedCoordinates, d => d.x);
7877

7978
if (yMax === 'max') {
@@ -83,9 +82,7 @@ export function getPlotValues(
8382
yMin = d3.min(flattenedCoordinates, d => d.y ?? 0);
8483
}
8584

86-
const [xMinZone, xMaxZone] = [xMin, xMax].map(x => {
87-
return x - getTimezoneOffsetInMs(x);
88-
});
85+
const [xMinZone, xMaxZone] = getDomainTZ(xMin, xMax);
8986

9087
const xScale = getXScale(xMin, xMax, width);
9188
const yScale = getYScale(yMin, yMax);
@@ -97,15 +94,11 @@ export function getPlotValues(
9794
// d3 will determine the exact number of ticks based on the selected range
9895
const xTickTotal = Math.floor(width / 100);
9996

100-
const xTickValues = d3.time.scale
101-
.utc()
102-
.domain([xMinZone, xMaxZone])
103-
.range([0, width])
104-
.ticks(xTickTotal)
105-
.map(x => {
106-
const time = x.getTime();
107-
return new Date(time + getTimezoneOffsetInMs(time));
108-
});
97+
const xTickValues = getTimeTicksTZ({
98+
domain: [xMinZone, xMaxZone],
99+
totalTicks: xTickTotal,
100+
width
101+
});
109102

110103
return {
111104
x: xScale,

‎x-pack/legacy/plugins/apm/public/components/shared/charts/Histogram/index.js‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import { unit } from '../../../../style/variables';
2525
import Tooltip from '../Tooltip';
2626
import theme from '@elastic/eui/dist/eui_theme_light.json';
2727
import { tint } from 'polished';
28-
import { getTimezoneOffsetInMs } from '../CustomPlot/getTimezoneOffsetInMs';
28+
import { getTimeTicksTZ, getDomainTZ } from '../helper/timezone';
2929

3030
const XY_HEIGHT = unit * 10;
3131
const XY_MARGIN = {
@@ -124,20 +124,13 @@ export class HistogramInner extends PureComponent {
124124
.range([XY_HEIGHT, 0])
125125
.nice();
126126

127-
const [xMinZone, xMaxZone] = [xMin, xMax].map(x => {
128-
return x - getTimezoneOffsetInMs(x);
129-
});
130-
127+
const [xMinZone, xMaxZone] = getDomainTZ(xMin, xMax);
131128
const xTickValues = isTimeSeries
132-
? d3.time.scale
133-
.utc()
134-
.domain([xMinZone, xMaxZone])
135-
.range([0, XY_WIDTH])
136-
.ticks(X_TICK_TOTAL)
137-
.map(x => {
138-
const time = x.getTime();
139-
return new Date(time + getTimezoneOffsetInMs(time));
140-
})
129+
? getTimeTicksTZ({
130+
domain: [xMinZone, xMaxZone],
131+
totalTicks: X_TICK_TOTAL,
132+
width: XY_WIDTH
133+
})
141134
: undefined;
142135

143136
const xDomain = x.domain();

‎x-pack/legacy/plugins/apm/public/components/shared/charts/helper/__test__/timezone.test.ts‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
import moment from 'moment-timezone';
7+
import { getDomainTZ, getTimeTicksTZ } from '../timezone';
8+
9+
describe('Timezone helper', () => {
10+
let originalTimezone: moment.MomentZone | null;
11+
const min = new Date('Tue Jan 28 2020 05:36:00 GMT+0100').valueOf();
12+
const max = new Date('Wed Jan 29 2020 07:12:00 GMT+0100').valueOf();
13+
14+
afterAll(() => {
15+
moment.tz.setDefault(originalTimezone ? originalTimezone.name : '');
16+
});
17+
describe('getTimeTicksTZ', () => {
18+
it('returns ticks when in Ameca/New_York timezone', () => {
19+
moment.tz.setDefault('America/New_York');
20+
expect(
21+
getTimeTicksTZ({ domain: [min, max], totalTicks: 8, width: 1138 })
22+
).toEqual([
23+
new Date('2020-01-28T11:00:00.000Z'),
24+
new Date('2020-01-28T14:00:00.000Z'),
25+
new Date('2020-01-28T17:00:00.000Z'),
26+
new Date('2020-01-28T20:00:00.000Z'),
27+
new Date('2020-01-28T23:00:00.000Z'),
28+
new Date('2020-01-29T02:00:00.000Z'),
29+
new Date('2020-01-29T05:00:00.000Z'),
30+
new Date('2020-01-29T08:00:00.000Z'),
31+
new Date('2020-01-29T11:00:00.000Z')
32+
]);
33+
});
34+
it('returns ticks when in Europe/Amsterdam timezone', () => {
35+
moment.tz.setDefault('Europe/Amsterdam');
36+
expect(
37+
getTimeTicksTZ({ domain: [min, max], totalTicks: 8, width: 1138 })
38+
).toEqual([
39+
new Date('2020-01-28T05:00:00.000Z'),
40+
new Date('2020-01-28T08:00:00.000Z'),
41+
new Date('2020-01-28T11:00:00.000Z'),
42+
new Date('2020-01-28T14:00:00.000Z'),
43+
new Date('2020-01-28T17:00:00.000Z'),
44+
new Date('2020-01-28T20:00:00.000Z'),
45+
new Date('2020-01-28T23:00:00.000Z'),
46+
new Date('2020-01-29T02:00:00.000Z'),
47+
new Date('2020-01-29T05:00:00.000Z')
48+
]);
49+
});
50+
});
51+
52+
describe('getDomainTZ', () => {
53+
it('returns domain when in Ameca/New_York timezone', () => {
54+
moment.tz.setDefault('America/New_York');
55+
expect(getDomainTZ(min, max)).toEqual([
56+
new Date('Tue Jan 28 2020 00:36:00 GMT+0100').valueOf(),
57+
new Date('Wed Jan 29 2020 02:12:00 GMT+0100').valueOf()
58+
]);
59+
});
60+
it('returns domain when in Europe/Amsterdam timezone', () => {
61+
moment.tz.setDefault('Europe/Amsterdam');
62+
expect(getDomainTZ(min, max)).toEqual([
63+
new Date('Tue Jan 28 2020 06:36:00 GMT+0100').valueOf(),
64+
new Date('Wed Jan 29 2020 08:12:00 GMT+0100').valueOf()
65+
]);
66+
});
67+
});
68+
});

‎x-pack/legacy/plugins/apm/public/components/shared/charts/helper/timezone.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
import d3 from 'd3';
7+
import { getTimezoneOffsetInMs } from '../CustomPlot/getTimezoneOffsetInMs';
8+
9+
interface Params {
10+
domain: [number, number];
11+
totalTicks: number;
12+
width: number;
13+
}
14+
15+
export const getTimeTicksTZ = ({ domain, totalTicks, width }: Params) =>
16+
d3.time.scale
17+
.utc()
18+
.domain(domain)
19+
.range([0, width])
20+
.ticks(totalTicks)
21+
.map(x => {
22+
const time = x.getTime();
23+
return new Date(time + getTimezoneOffsetInMs(time));
24+
});
25+
26+
export const getDomainTZ = (min: number, max: number): [number, number] => {
27+
const [xMinZone, xMaxZone] = [min, max].map(
28+
time => time - getTimezoneOffsetInMs(time)
29+
);
30+
return [xMinZone, xMaxZone];
31+
};

0 commit comments

Comments
 (0)