diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2018-03-09 00:32:35 +0300 |
---|---|---|
committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2018-03-09 00:32:35 +0300 |
commit | 0e2a354394bc17bd35b4f14fc153b3c51dd408ce (patch) | |
tree | d20cc2a3dfe5a322874d42500604616650da4afc | |
parent | 7623cae9bd540ace6651eba412c951cd1a7c4a44 (diff) |
fix timescale prometheus charts overlapping
-rw-r--r-- | app/assets/javascripts/lib/utils/datetime_utility.js | 9 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/components/graph.vue | 20 | ||||
-rw-r--r-- | spec/javascripts/datetime_utility_spec.js | 9 |
3 files changed, 36 insertions, 2 deletions
diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js index d6cccbef42b..7e1b4de856e 100644 --- a/app/assets/javascripts/lib/utils/datetime_utility.js +++ b/app/assets/javascripts/lib/utils/datetime_utility.js @@ -291,6 +291,15 @@ export const getTimeframeWindow = (length, date) => { return timeframe; }; +/** + * Returns the time difference between two dates in minutes + * + * @param {Date} dateStart + * @param {Date} dateEnd + */ + +export const timeDifferenceMinutes = (dateStart, dateEnd) => (dateEnd - dateStart) / 1000 / 60; + window.gl = window.gl || {}; window.gl.utils = { ...(window.gl.utils || {}), diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue index 9e67a6f2146..72feefe33c9 100644 --- a/app/assets/javascripts/monitoring/components/graph.vue +++ b/app/assets/javascripts/monitoring/components/graph.vue @@ -1,8 +1,10 @@ <script> import { scaleLinear, scaleTime } from 'd3-scale'; import { axisLeft, axisBottom } from 'd3-axis'; - import { max, extent } from 'd3-array'; + import { max, extent, min } from 'd3-array'; import { select } from 'd3-selection'; + import { timeMinute } from 'd3-time'; + import { timeDifferenceMinutes } from '~/lib/utils/datetime_utility'; import GraphLegend from './graph/legend.vue'; import GraphFlag from './graph/flag.vue'; import GraphDeployment from './graph/deployment.vue'; @@ -14,7 +16,7 @@ import createTimeSeries from '../utils/multiple_time_series'; import bp from '../../breakpoints'; - const d3 = { scaleLinear, scaleTime, axisLeft, axisBottom, max, extent, select }; + const d3 = { scaleLinear, scaleTime, axisLeft, axisBottom, max, min, extent, select, timeMinute }; export default { components: { @@ -206,9 +208,23 @@ const allValues = this.timeSeries.reduce((all, { values }) => all.concat(values), []); axisXScale.domain(d3.extent(allValues, d => d.time)); axisYScale.domain([0, d3.max(allValues.map(d => d.value))]); + // time difference + const dateEnd = d3.max(allValues.map(d => d.time)); + const dateStart = d3.min(allValues.map(d => d.time)); + const timeDifference = timeDifferenceMinutes(dateStart, dateEnd); + + let timeTicks; + if (timeDifference > 90) { + timeTicks = 60; + } else if (timeDifference > 45 && timeDifference <= 90) { + timeTicks = 30; + } else if (timeDifference <= 45) { + timeTicks = 15; + } const xAxis = d3.axisBottom() .scale(axisXScale) + .ticks(d3.timeMinute.every(timeTicks)) .tickFormat(timeScaleFormat); const yAxis = d3.axisLeft() diff --git a/spec/javascripts/datetime_utility_spec.js b/spec/javascripts/datetime_utility_spec.js index a8d09202154..24c43c7a6ad 100644 --- a/spec/javascripts/datetime_utility_spec.js +++ b/spec/javascripts/datetime_utility_spec.js @@ -170,3 +170,12 @@ describe('getTimeframeWindow', () => { }); }); }); + +describe('timeDifferenceMinutes', () => { + it('returns the time difference between two dates in minutes', () => { + const dateStart = new Date('2018-03-08 12:00:00'); + const dateEnd = new Date('2018-03-08 13:00:00'); + + expect(datetimeUtility.timeDifferenceMinutes(dateStart, dateEnd)).toEqual(60); + }); +}); |