diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2018-03-13 01:57:18 +0300 |
---|---|---|
committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2018-03-13 02:01:57 +0300 |
commit | f2247c65eecf6fc63ddeea83647e19422a5d6082 (patch) | |
tree | cf354f9ae400fa0e400e7e7c2b0035ab3ba2854c /app/assets/javascripts/monitoring | |
parent | 0e2a354394bc17bd35b4f14fc153b3c51dd408ce (diff) |
Use graph width to determine tick number
Diffstat (limited to 'app/assets/javascripts/monitoring')
-rw-r--r-- | app/assets/javascripts/monitoring/components/graph.vue | 21 |
1 files changed, 3 insertions, 18 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue index 72feefe33c9..42615d2bb8e 100644 --- a/app/assets/javascripts/monitoring/components/graph.vue +++ b/app/assets/javascripts/monitoring/components/graph.vue @@ -1,10 +1,8 @@ <script> import { scaleLinear, scaleTime } from 'd3-scale'; import { axisLeft, axisBottom } from 'd3-axis'; - import { max, extent, min } from 'd3-array'; + import { max, extent } 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'; @@ -16,7 +14,7 @@ import createTimeSeries from '../utils/multiple_time_series'; import bp from '../../breakpoints'; - const d3 = { scaleLinear, scaleTime, axisLeft, axisBottom, max, min, extent, select, timeMinute }; + const d3 = { scaleLinear, scaleTime, axisLeft, axisBottom, max, extent, select }; export default { components: { @@ -208,23 +206,10 @@ 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)) + .ticks(this.graphWidth / 120) .tickFormat(timeScaleFormat); const yAxis = d3.axisLeft() |