diff options
author | Mike Greiling <mgreiling@gitlab.com> | 2017-08-29 08:29:11 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-08-29 08:29:11 +0000 |
commit | 596fe67a0370f985ee08b3c8ef01fee6e4aaf045 (patch) | |
tree | cd4884f969176183068fc9c9845468ed810be047 /app/assets/javascripts/monitoring | |
parent | f0d22bb6f3bc50c7615eaef0fd0a5469bd35e179 (diff) | |
download | gitlab-ce-596fe67a0370f985ee08b3c8ef01fee6e4aaf045.tar.gz |
Resolve "Monitoring graph date formatting is wrong"
Diffstat (limited to 'app/assets/javascripts/monitoring')
5 files changed, 22 insertions, 15 deletions
diff --git a/app/assets/javascripts/monitoring/components/monitoring_column.vue b/app/assets/javascripts/monitoring/components/monitoring_column.vue index 407af51cb7a..c0abb436e43 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_column.vue +++ b/app/assets/javascripts/monitoring/components/monitoring_column.vue @@ -7,6 +7,7 @@ import eventHub from '../event_hub'; import measurements from '../utils/measurements'; import { formatRelevantDigits } from '../../lib/utils/number_utils'; + import { timeScaleFormat } from '../utils/date_time_formatters'; import bp from '../../breakpoints'; const bisectDate = d3.bisector(d => d.time).left; @@ -159,6 +160,7 @@ const xAxis = d3.svg.axis() .scale(axisXScale) .ticks(measurements.xTicks) + .tickFormat(timeScaleFormat) .orient('bottom'); const yAxis = d3.svg.axis() diff --git a/app/assets/javascripts/monitoring/components/monitoring_deployment.vue b/app/assets/javascripts/monitoring/components/monitoring_deployment.vue index e6432ba3191..dadbcd1aaa6 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_deployment.vue +++ b/app/assets/javascripts/monitoring/components/monitoring_deployment.vue @@ -1,8 +1,5 @@ <script> - import { - dateFormat, - timeFormat, - } from '../constants'; + import { dateFormat, timeFormat } from '../utils/date_time_formatters'; export default { props: { @@ -58,7 +55,7 @@ class="deploy-info" v-if="showDeployInfo"> <g - v-for="(deployment, index) in deploymentData" + v-for="(deployment, index) in deploymentData" :key="index" :class="nameDeploymentClass(deployment)" :transform="transformDeploymentGroup(deployment)"> @@ -92,7 +89,7 @@ width="90" height="58"> </rect> - <g + <g transform="translate(5, 2)"> <text class="deploy-info-text text-metric-bold"> diff --git a/app/assets/javascripts/monitoring/components/monitoring_flag.vue b/app/assets/javascripts/monitoring/components/monitoring_flag.vue index 5a0e50fcab3..61cbeeebb17 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_flag.vue +++ b/app/assets/javascripts/monitoring/components/monitoring_flag.vue @@ -1,8 +1,5 @@ <script> - import { - dateFormat, - timeFormat, - } from '../constants'; + import { dateFormat, timeFormat } from '../utils/date_time_formatters'; export default { props: { @@ -72,7 +69,7 @@ r="5" transform="translate(-5, 20)"> </circle> - <svg + <svg class="rect-text-metric" :x="currentFlagPosition" y="0"> diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js deleted file mode 100644 index c3a8da52404..00000000000 --- a/app/assets/javascripts/monitoring/constants.js +++ /dev/null @@ -1,4 +0,0 @@ -import d3 from 'd3'; - -export const dateFormat = d3.time.format('%b %d, %Y'); -export const timeFormat = d3.time.format('%H:%M%p'); diff --git a/app/assets/javascripts/monitoring/utils/date_time_formatters.js b/app/assets/javascripts/monitoring/utils/date_time_formatters.js new file mode 100644 index 00000000000..26bcaa02511 --- /dev/null +++ b/app/assets/javascripts/monitoring/utils/date_time_formatters.js @@ -0,0 +1,15 @@ +import d3 from 'd3'; + +export const dateFormat = d3.time.format('%b %-d, %Y'); +export const timeFormat = d3.time.format('%-I:%M%p'); + +export const timeScaleFormat = d3.time.format.multi([ + ['.%L', d => d.getMilliseconds()], + [':%S', d => d.getSeconds()], + ['%-I:%M', d => d.getMinutes()], + ['%-I %p', d => d.getHours()], + ['%a %-d', d => d.getDay() && d.getDate() !== 1], + ['%b %-d', d => d.getDate() !== 1], + ['%B', d => d.getMonth()], + ['%Y', () => true], +]); |