Commit f2247c65 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Use graph width to determine tick number

parent 0e2a3543
......@@ -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 || {}),
......
<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()
......
......@@ -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);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment