Move dateTickFormat to separate module
This commit is contained in:
parent
3b679ef9f1
commit
1109a5cea4
|
@ -1,25 +1,11 @@
|
||||||
/* 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 */
|
/* 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 _ from 'underscore';
|
||||||
import d3 from 'd3';
|
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 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 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() {
|
export const ContributorsGraph = (function() {
|
||||||
function ContributorsGraph() {}
|
function ContributorsGraph() {}
|
||||||
|
|
||||||
|
@ -152,7 +138,7 @@ export const ContributorsMasterGraph = (function(superClass) {
|
||||||
this.x_axis = d3.svg.axis()
|
this.x_axis = d3.svg.axis()
|
||||||
.scale(this.x)
|
.scale(this.x)
|
||||||
.orient('bottom')
|
.orient('bottom')
|
||||||
.tickFormat(xTickFormat);
|
.tickFormat(dateTickFormat);
|
||||||
return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
|
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)
|
.scale(this.x)
|
||||||
.orient('bottom')
|
.orient('bottom')
|
||||||
.ticks(8)
|
.ticks(8)
|
||||||
.tickFormat(xTickFormat);
|
.tickFormat(dateTickFormat);
|
||||||
return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
|
return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,39 @@
|
||||||
|
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);
|
||||||
|
};
|
|
@ -0,0 +1,11 @@
|
||||||
|
/* 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');
|
||||||
|
}
|
||||||
|
};
|
|
@ -0,0 +1,40 @@
|
||||||
|
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.');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -1,14 +1,6 @@
|
||||||
import { createDateTimeFormat, languageCode } from '~/locale';
|
import { createDateTimeFormat, languageCode } from '~/locale';
|
||||||
|
|
||||||
const setLanguage = (languageCode) => {
|
import { setLanguage } from '../helpers/locale_helper';
|
||||||
const htmlElement = document.querySelector('html');
|
|
||||||
|
|
||||||
if (languageCode) {
|
|
||||||
htmlElement.setAttribute('lang', languageCode);
|
|
||||||
} else {
|
|
||||||
htmlElement.removeAttribute('lang');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
describe('locale', () => {
|
describe('locale', () => {
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
|
|
Loading…
Reference in New Issue