Use graph width to determine tick numberjivl-fix-timescale-prometheus-charts-overlapping

3 files changed, 3 insertions, 36 deletions

diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js
index 7e1b4de856e..d6cccbef42b 100644
--- a/app/assets/javascripts/lib/utils/datetime_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime_utility.js
@@ -291,15 +291,6 @@ 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 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()
diff --git a/spec/javascripts/datetime_utility_spec.js b/spec/javascripts/datetime_utility_spec.js
index 24c43c7a6ad..a8d09202154 100644
--- a/spec/javascripts/datetime_utility_spec.js
+++ b/spec/javascripts/datetime_utility_spec.js
@@ -170,12 +170,3 @@ 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);
-  });
-});