diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-11-30 12:01:49 -0600 |
---|---|---|
committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-12-18 16:15:18 -0600 |
commit | 51a9797daa868976f6821273f61939a13a8d233a (patch) | |
tree | c10c1b4790d7da04d399a219b71fcdf020606f01 | |
parent | 4e0e2fd9d297319f323b987944b58bfd3a14ba58 (diff) | |
download | gitlab-ce-51a9797daa868976f6821273f61939a13a8d233a.tar.gz |
Restored the timeScaleFormat for the prometheus dashboard
-rw-r--r-- | app/assets/javascripts/monitoring/components/graph.vue | 5 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/utils/date_time_formatters.js | 42 |
2 files changed, 41 insertions, 6 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue index dbc778310f3..eede04a06cd 100644 --- a/app/assets/javascripts/monitoring/components/graph.vue +++ b/app/assets/javascripts/monitoring/components/graph.vue @@ -10,7 +10,7 @@ import MonitoringMixin from '../mixins/monitoring_mixins'; import eventHub from '../event_hub'; import measurements from '../utils/measurements'; - import { bisectDate } from '../utils/date_time_formatters'; + import { bisectDate, timeScaleFormat } from '../utils/date_time_formatters'; import createTimeSeries from '../utils/multiple_time_series'; import bp from '../../breakpoints'; @@ -171,7 +171,8 @@ axisYScale.domain([0, d3.max(allValues.map(d => d.value))]); const xAxis = d3.axisBottom() - .scale(axisXScale); + .scale(axisXScale) + .tickFormat(timeScaleFormat); const yAxis = d3.axisLeft() .scale(axisYScale) diff --git a/app/assets/javascripts/monitoring/utils/date_time_formatters.js b/app/assets/javascripts/monitoring/utils/date_time_formatters.js index 53d0e2916a0..de4c6404a6d 100644 --- a/app/assets/javascripts/monitoring/utils/date_time_formatters.js +++ b/app/assets/javascripts/monitoring/utils/date_time_formatters.js @@ -1,7 +1,41 @@ import { timeFormat as time } from 'd3-time-format'; +import { timeSecond, timeMinute, timeHour, timeDay, timeMonth, timeYear } from 'd3-time'; import { bisector } from 'd3-array'; -export const dateFormat = time('%b %-d, %Y'); -export const timeFormat = time('%-I:%M%p'); -export const dateFormatWithName = time('%a, %b %-d'); -export const bisectDate = bisector(d => d.time).left; +const d3 = { time, bisector, timeSecond, timeMinute, timeHour, timeDay, timeMonth, timeYear }; + +export const dateFormat = d3.time('%b %-d, %Y'); +export const timeFormat = d3.time('%-I:%M%p'); +export const dateFormatWithName = d3.time('%a, %b %-d'); +export const bisectDate = d3.bisector(d => d.time).left; + +const formatMillisecond = d3.time('.%L'); +const formatSecond = d3.time(':%S'); +const formatMinute = d3.time('%-I:%M'); +const formatHour = d3.time('%-I %p'); +const formatDay = d3.time('%a %d'); +const formatWeek = d3.time('%b %d'); +const formatMonth = d3.time('%B'); +const formatYear = d3.time('%Y'); + +export function timeScaleFormat(date) { + let formatFunction; + if (d3.timeSecond(date) < date) { + formatFunction = formatMillisecond; + } else if (d3.timeMinute(date) < date) { + formatFunction = formatSecond; + } else if (d3.timeHour(date) < date) { + formatFunction = formatMinute; + } else if (d3.timeDay(date) < date) { + formatFunction = formatHour; + } else if (d3.timeWeek(date) < date) { + formatFunction = formatDay; + } else if (d3.timeMonth(date) < date) { + formatFunction = formatWeek; + } else if (d3.timeYear(date) < date) { + formatFunction = formatMonth; + } else { + formatFunction = formatYear; + } + return formatFunction(date); +} |