Commit 1109a5ce authored by Winnie Hellmann's avatar Winnie Hellmann

Move dateTickFormat to separate module

parent 3b679ef9
/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, max-len, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, comma-dangle, no-return-assign, prefer-arrow-callback, quotes, prefer-template, newline-per-chained-call, no-else-return, no-shadow */
import _ from 'underscore';
import d3 from 'd3';
import { createDateTimeFormat } from '../locale';
import { dateTickFormat } from '../lib/utils/tick_formats';
const extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
const hasProp = {}.hasOwnProperty;
const dayFormat = createDateTimeFormat({ month: 'short', day: 'numeric' });
const monthFormat = createDateTimeFormat({ month: 'long' });
const yearFormat = createDateTimeFormat({ year: 'numeric' });
const xTickFormat = (date) => {
if (date.getDate() !== 1) {
return dayFormat.format(date);
} else if (date.getMonth() > 0) {
return monthFormat.format(date);
} else {
return yearFormat.format(date);
}
};
export const ContributorsGraph = (function() {
function ContributorsGraph() {}
......@@ -152,7 +138,7 @@ export const ContributorsMasterGraph = (function(superClass) {
this.x_axis = d3.svg.axis()
.scale(this.x)
.orient('bottom')
.tickFormat(xTickFormat);
.tickFormat(dateTickFormat);
return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
};
......@@ -244,7 +230,7 @@ export const ContributorsAuthorGraph = (function(superClass) {
.scale(this.x)
.orient('bottom')
.ticks(8)
.tickFormat(xTickFormat);
.tickFormat(dateTickFormat);
return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
};
......
import { createDateTimeFormat } from '../../locale';
let dateTimeFormats;
export const initDateFormats = () => {
const dayFormat = createDateTimeFormat({ month: 'short', day: 'numeric' });
const monthFormat = createDateTimeFormat({ month: 'long' });
const yearFormat = createDateTimeFormat({ year: 'numeric' });
dateTimeFormats = {
dayFormat,
monthFormat,
yearFormat,
};
};
initDateFormats();
/**
Formats a localized date in way that it can be used for d3.js axis.tickFormat().
That is, it displays
- 4-digit for first of January
- full month name for first of every month
- day and abbreviated month otherwise
see also https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Axes.md#tickFormat
*/
export const dateTickFormat = (date) => {
if (date.getDate() !== 1) {
return dateTimeFormats.dayFormat.format(date);
}
if (date.getMonth() > 0) {
return dateTimeFormats.monthFormat.format(date);
}
return dateTimeFormats.yearFormat.format(date);
};
/* eslint-disable import/prefer-default-export */
export const setLanguage = (languageCode) => {
const htmlElement = document.querySelector('html');
if (languageCode) {
htmlElement.setAttribute('lang', languageCode);
} else {
htmlElement.removeAttribute('lang');
}
};
import { dateTickFormat, initDateFormats } from '~/lib/utils/tick_formats';
import { setLanguage } from '../../helpers/locale_helper';
describe('tick formats', () => {
describe('dateTickFormat', () => {
beforeAll(() => {
setLanguage('de');
initDateFormats();
});
afterAll(() => {
setLanguage(null);
});
it('returns year for first of January', () => {
const tick = dateTickFormat(new Date('2001-01-01'));
expect(tick).toBe('2001');
});
it('returns month for first of February', () => {
const tick = dateTickFormat(new Date('2001-02-01'));
expect(tick).toBe('Februar');
});
it('returns day and month for second of February', () => {
const tick = dateTickFormat(new Date('2001-02-02'));
expect(tick).toBe('2. Feb.');
});
it('ignores time', () => {
const tick = dateTickFormat(new Date('2001-02-02 12:34:56'));
expect(tick).toBe('2. Feb.');
});
});
});
import { createDateTimeFormat, languageCode } from '~/locale';
const setLanguage = (languageCode) => {
const htmlElement = document.querySelector('html');
if (languageCode) {
htmlElement.setAttribute('lang', languageCode);
} else {
htmlElement.removeAttribute('lang');
}
};
import { setLanguage } from '../helpers/locale_helper';
describe('locale', () => {
afterEach(() => {
......
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