datavis-glide 4.0.0-PRE.0

package/src/trans.js

@@ -0,0 +1,101 @@
+import {sprintf} from 'sprintf-js';
+import { OrdMap } from 'datavis-ace';
+
+import trans_enUs from './lang/en-US.js';
+import trans_esMx from './lang/es-MX.js';
+import trans_frFr from './lang/fr-FR.js';
+import trans_idId from './lang/id-ID.js';
+import trans_nlNl from './lang/nl-NL.js';
+import trans_ptBr from './lang/pt-BR.js';
+import trans_ruRu from './lang/ru-RU.js';
+import trans_thTh from './lang/th-TH.js';
+import trans_viVn from './lang/vi-VN.js';
+import trans_zhHansCn from './lang/zh-Hans-CN.js';
+
+var TRANSLATION_REGISTRY = new OrdMap();
+
+TRANSLATION_REGISTRY.set('EN', trans_enUs);
+TRANSLATION_REGISTRY.set('EN-US', trans_enUs);
+
+TRANSLATION_REGISTRY.set('ES', trans_esMx);
+TRANSLATION_REGISTRY.set('ES-MX', trans_esMx);
+
+TRANSLATION_REGISTRY.set('FR', trans_frFr);
+TRANSLATION_REGISTRY.set('FR-FR', trans_frFr);
+
+TRANSLATION_REGISTRY.set('ID', trans_idId);
+TRANSLATION_REGISTRY.set('ID-ID', trans_idId);
+
+TRANSLATION_REGISTRY.set('NL', trans_nlNl);
+TRANSLATION_REGISTRY.set('NL-NL', trans_nlNl);
+
+TRANSLATION_REGISTRY.set('PT', trans_ptBr);
+TRANSLATION_REGISTRY.set('PT-BR', trans_ptBr);
+
+TRANSLATION_REGISTRY.set('RU', trans_ruRu);
+TRANSLATION_REGISTRY.set('RU-RU', trans_ruRu);
+
+TRANSLATION_REGISTRY.set('TH', trans_thTh);
+TRANSLATION_REGISTRY.set('TH-TH', trans_thTh);
+
+TRANSLATION_REGISTRY.set('VI', trans_viVn);
+TRANSLATION_REGISTRY.set('VI-VN', trans_viVn);
+
+TRANSLATION_REGISTRY.set('ZH', trans_zhHansCn);
+TRANSLATION_REGISTRY.set('ZH-HANS', trans_zhHansCn);
+TRANSLATION_REGISTRY.set('ZH-HANS-CN', trans_zhHansCn);
+
+var trans = (function () {
+	var alreadyWarnedAboutLang = {};
+
+	return function () {
+		var args = Array.prototype.slice.call(arguments);
+		var k = args.shift()
+			, lang = window.DATAVIS_LANG;
+
+		//if (lang == null && window.Intl && window.Intl.Locale) {
+		//	lang = window.Intl.Locale().language;
+		//}
+
+		if (lang == null) {
+			// Check for the region-specific language first.
+			if (TRANSLATION_REGISTRY.isSet(navigator.language.toUpperCase())) {
+				lang = navigator.language;
+			}
+			else {
+				lang = navigator.language.split('-')[0];
+			}
+		}
+
+		if (!TRANSLATION_REGISTRY.isSet(lang.toUpperCase())) {
+			if (!alreadyWarnedAboutLang[lang]) {
+				console.error('Missing DataVis translation info for language "' + lang + '"');
+				alreadyWarnedAboutLang[lang] = true;
+			}
+		}
+		else if (TRANSLATION_REGISTRY.get(lang.toUpperCase())[k] == null) {
+			console.error('Missing DataVis translation for key "' + k + '" in locale "' + lang + '"');
+		}
+
+		var s = (TRANSLATION_REGISTRY.get(lang.toUpperCase()) || {})[k]
+			|| (TRANSLATION_REGISTRY.get('EN') || {})[k]
+			|| k;
+
+		if (args.length > 0) {
+			args.unshift(s);
+			s = sprintf.apply(null, args);
+		}
+
+		if (lang === 'xx') {
+			// x-ing a paragrab
+			s = s.replace(/[A-Za-z]/g, 'x');
+		}
+
+		return s;
+	};
+})();
+
+export {
+	trans,
+	TRANSLATION_REGISTRY,
+};

package/src/ui/collapsible.js

@@ -0,0 +1,234 @@
+import jQuery from 'jquery';
+import {
+	icon,
+	makeSubclass,
+} from '../util/misc.js';
+
+// Collapsible {{{1
+
+/**
+ * A lightweight accordion-style collapsible sections widget.
+ *
+ * Sections are added via {@link Collapsible#addSection}.  By default, clicking a header
+ * calls {@link Collapsible#switchSection} which closes all other sections and opens the
+ * clicked one (exclusive / accordion behavior).
+ *
+ * @class
+ *
+ * @param {Element|jQuery} container
+ * The element the collapsible widget will be built inside.
+ *
+ * @property {object} ui
+ * @property {jQuery} ui.root
+ */
+
+var Collapsible = makeSubclass('Collapsible', Object, function (container) {
+	var self = this;
+
+	self._container = jQuery(container);
+	self._sections = [];
+	self._idPrefix = 'wcdv-coll-' + Math.random().toString(36).substr(2, 9);
+	self.ui = {};
+
+	self._build();
+});
+
+// #_build {{{2
+
+/**
+ * Build the DOM skeleton for the collapsible widget.
+ * @private
+ */
+
+Collapsible.prototype._build = function () {
+	var self = this;
+
+	self.ui.root = jQuery('<div>', {
+		'class': 'wcdv-collapsible'
+	});
+
+	self._container.append(self.ui.root);
+};
+
+// #addSection {{{2
+
+/**
+ * Add a new collapsible section.
+ *
+ * @param {string} label
+ * The text shown on the section header.
+ *
+ * @param {Element|jQuery} contentElt
+ * The content element placed into the panel.
+ *
+ * @returns {number}
+ * The zero-based index of the new section.
+ */
+
+Collapsible.prototype.addSection = function (label, contentElt) {
+	var self = this;
+
+	var index = self._sections.length;
+	var headerId = self._idPrefix + '-header-' + index;
+	var panelId = self._idPrefix + '-panel-' + index;
+
+	var iconEl = jQuery('<span>', {
+		'class': 'wcdv-collapsible-icon'
+	}).append(icon('chevron-right'));
+
+	var title = jQuery('<span>', {
+		'class': 'wcdv-collapsible-title'
+	}).text(label);
+
+	var header = jQuery('<div>', {
+		'class': 'wcdv-collapsible-header',
+		id: headerId,
+		role: 'button',
+		'aria-expanded': 'false',
+		'aria-controls': panelId,
+		tabindex: '0'
+	}).append(iconEl)
+		.append(title);
+
+	(function (idx) {
+		header.on('click', function () {
+			self.switchSection(idx);
+		});
+		header.on('keydown', function (e) {
+			var key = e.which || e.keyCode;
+			// Enter = 13, Space = 32
+			if (key === 13 || key === 32) {
+				e.preventDefault();
+				self.switchSection(idx);
+			}
+		});
+	})(index);
+
+	var panel = jQuery('<div>', {
+		'class': 'wcdv-collapsible-panel',
+		role: 'region',
+		id: panelId,
+		'aria-labelledby': headerId
+	}).append(jQuery(contentElt));
+
+	var section = jQuery('<div>', {
+		'class': 'wcdv-collapsible-section'
+	}).append(header)
+		.append(panel);
+
+	self.ui.root.append(section);
+
+	self._sections.push({
+		label: label,
+		sectionEl: section,
+		headerEl: header,
+		panelEl: panel,
+		isOpen: false
+	});
+
+	// Auto-open first section.
+	if (self._sections.length === 1) {
+		self.openSection(0);
+	}
+
+	return index;
+};
+
+// #openSection {{{2
+
+/**
+ * Expand the section at the given index.
+ *
+ * @param {number} index
+ * Zero-based section index.
+ */
+
+Collapsible.prototype.openSection = function (index) {
+	var self = this;
+
+	if (index < 0 || index >= self._sections.length) {
+		return;
+	}
+
+	var sec = self._sections[index];
+	if (sec.isOpen) {
+		return;
+	}
+
+	sec.sectionEl.addClass('wcdv-collapsible-section-open');
+	sec.headerEl.attr('aria-expanded', 'true');
+	sec.isOpen = true;
+};
+
+// #closeSection {{{2
+
+/**
+ * Collapse the section at the given index.
+ *
+ * @param {number} index
+ * Zero-based section index.
+ */
+
+Collapsible.prototype.closeSection = function (index) {
+	var self = this;
+
+	if (index < 0 || index >= self._sections.length) {
+		return;
+	}
+
+	var sec = self._sections[index];
+	if (!sec.isOpen) {
+		return;
+	}
+
+	sec.sectionEl.removeClass('wcdv-collapsible-section-open');
+	sec.headerEl.attr('aria-expanded', 'false');
+	sec.isOpen = false;
+};
+
+// #switchSection {{{2
+
+/**
+ * Exclusive switch: close all other sections and open the specified one.
+ * If the section is already the only one open, this is a no-op.
+ *
+ * @param {number} index
+ * Zero-based section index.
+ */
+
+Collapsible.prototype.switchSection = function (index) {
+	var self = this;
+
+	if (index < 0 || index >= self._sections.length) {
+		return;
+	}
+
+	for (var i = 0; i < self._sections.length; i++) {
+		if (i !== index) {
+			self.closeSection(i);
+		}
+	}
+
+	self.openSection(index);
+};
+
+// #destroy {{{2
+
+/**
+ * Remove all DOM created by this widget and release references.
+ */
+
+Collapsible.prototype.destroy = function () {
+	var self = this;
+
+	if (self.ui.root) {
+		self.ui.root.remove();
+		self.ui.root = null;
+	}
+	self._sections = [];
+	self._container = null;
+};
+
+export {
+	Collapsible
+};

package/src/ui/filters/date.js

@@ -0,0 +1,283 @@
+import _ from 'underscore';
+import moment from 'moment';
+import jQuery from 'jquery';
+
+import { makeSubclass } from '../../util/misc.js';
+import { trans } from '../../trans.js';
+
+import GridFilter from '../grid_filter.js';
+
+var DateFilter = makeSubclass('DateFilter', GridFilter, function () {
+	var self = this;
+
+	GridFilter.apply(self, arguments);
+
+	self.limit = 1;
+
+	self.operatorDrop = self.makeOperatorDrop();
+
+	var everyOpts = {
+		day: [
+				'MONDAY'
+			, 'TUESDAY'
+			, 'WEDNESDAY'
+			, 'THURSDAY'
+			, 'FRIDAY'
+			, 'SATURDAY'
+			, 'SUNDAY'
+		],
+		month: [
+				'JANUARY'
+			, 'FEBRUARY'
+			, 'MARCH'
+			, 'APRIL'
+			, 'MAY'
+			, 'JUNE'
+			, 'JULY'
+			, 'AUGUST'
+			, 'SEPTEMBER'
+			, 'OCTOBER'
+			, 'NOVEMBER'
+			, 'DECEMBER'
+		]
+	};
+	var lastOpts = [
+			'DATE'
+		, 'WEEK'
+		, 'MONTH'
+		, 'QUARTER'
+		, 'YEAR'
+	];
+	self.inputs = {};
+		// used for: on, before, after
+	self.inputs.single = jQuery('<input>').attr({
+		type: self.typeInfo.type === 'date' ? 'date' : 'datetime-local'
+	}).on('blur', function () {
+		self.gridFilterSet.update(false);
+	});
+	// used for: between
+	self.inputs.range = jQuery('<div>');
+	self.inputs.rangeStart = jQuery('<input>').attr({
+		type: self.typeInfo.type === 'date' ? 'date' : 'datetime-local'
+	}).on('blur', function () {
+		self.gridFilterSet.update(false);
+	});
+	self.inputs.rangeEnd = jQuery('<input>').attr({
+		type: self.typeInfo.type === 'date' ? 'date' : 'datetime-local'
+	}).on('blur', function () {
+		self.gridFilterSet.update(false);
+	});
+	self.inputs.range
+		.append(self.inputs.rangeStart)
+		.append(' – ')
+		.append(self.inputs.rangeEnd);
+	// used for: every
+	self.inputs.every = jQuery('<div>');
+	self.inputs.everyDay = jQuery('<select>').on('change', function () {
+		self.gridFilterSet.update(false);
+	});
+	self.inputs.everyMonth = jQuery('<select>').on('change', function () {
+		self.gridFilterSet.update(false);
+	});
+	_.each(everyOpts.day, function (v) {
+		self.inputs.everyDay.append(jQuery('<option>', {value: v}).text(trans('CALENDAR.DAY.' + v)));
+	});
+	_.each(everyOpts.month, function (v) {
+		self.inputs.everyMonth.append(jQuery('<option>', {value: v}).text(trans('CALENDAR.MONTH.' + v)));
+	});
+	self.inputs.everyDropdown = jQuery('<select>')
+		.css({'margin-right': '0.5em'})
+		.append(jQuery('<option>', {value: 'DAY'}).text(trans('CALENDAR.DAY')))
+		.append(jQuery('<option>', {value: 'MONTH'}).text(trans('CALENDAR.MONTH')))
+		.on('change', function () {
+			self.inputs.everyDay.hide();
+			self.inputs.everyMonth.hide();
+			switch (this.value) {
+			case 'DAY':
+				self.inputs.everyDay.show();
+				break;
+			case 'MONTH':
+				self.inputs.everyMonth.show();
+				break;
+			}
+			self.gridFilterSet.update(false);
+		});
+	self.inputs.every
+		.append(self.inputs.everyDropdown.show())
+		.append(self.inputs.everyDay.show())
+		.append(self.inputs.everyMonth.hide());
+	// used for: this, last
+	self.inputs.last = jQuery('<select>').on('change', function () {
+		self.gridFilterSet.update(false);
+	});
+	_.each(lastOpts, function (v) {
+		self.inputs.last.append(jQuery('<option>', {value: v}).text(trans('CALENDAR.' + v)));
+	});
+
+	self.div
+		.append(self.operatorDrop)
+		.append(self.inputs.single.show())
+		.append(self.inputs.range.hide())
+		.append(self.inputs.every.hide())
+		.append(self.inputs.last.hide());
+
+	if (self.removeBtn) {
+		self.div.append(self.removeBtn);
+	}
+});
+
+DateFilter.prototype.makeOperatorDrop = function () {
+	var self = this;
+
+	var operators = [
+		['$eq', 'ON'],
+		['$bet', 'BETWEEN'],
+		['$lte', 'BEFORE'],
+		['$gte', 'AFTER'],
+		['$every', 'EVERY'],
+		['$this', 'CURRENT'],
+		['$last', 'LAST'],
+	];
+
+	var operatorDrop = jQuery('<select>');
+
+	operatorDrop.css({'margin-right': '0.5em'});
+
+	_.each(operators, function (op) {
+		var value = op[0]
+			, name = op[1];
+		operatorDrop.append(jQuery('<option>', { value: value }).text(trans('FILTER.DATE.OPERATOR.' + name)));
+	});
+
+	operatorDrop.on('change', function () {
+		self.inputs.single.hide();
+		self.inputs.range.hide();
+		self.inputs.every.hide();
+		self.inputs.last.hide();
+
+		switch (this.value) {
+		case '$eq':
+		case '$ne':
+		case '$lte':
+		case '$gte':
+			self.inputs.single.show();
+			break;
+		case '$bet':
+			self.inputs.range.show();
+			break;
+		case '$every':
+			self.inputs.every.show();
+			break;
+		case '$this':
+		case '$last':
+			self.inputs.last.show();
+			break;
+		}
+
+		self.gridFilterSet.update();
+	});
+
+	return operatorDrop;
+};
+
+DateFilter.prototype.getValue = function () {
+	var self = this
+		, result;
+
+	switch (self.getOperator()) {
+	case '$eq':
+	case '$ne':
+	case '$gte':
+	case '$lte':
+		if (self.inputs.single.val() === '') {
+			// User hasn't entered a complete value in the date input.
+			break;
+		}
+		result = self.typeInfo.type === 'date' ? self.inputs.single.val()
+			: self.inputs.single.val().replace('T', ' ');
+		if (self.typeInfo.internalType === 'moment') {
+			result = moment(result);
+		}
+		break;
+	case '$bet':
+		if (self.inputs.rangeStart.val() === '' || self.inputs.rangeEnd.val() === '') {
+			// User hasn't entered a complete value in the date input.
+			break;
+		}
+
+		switch (self.typeInfo.type) {
+		case 'date':
+			result = [
+					self.inputs.rangeStart.val()
+				, self.inputs.rangeEnd.val()
+			];
+			break;
+		case 'datetime':
+			result = [
+					self.inputs.rangeStart.val().replace('T', ' ')
+				, self.inputs.rangeEnd.val().replace('T', ' ')
+			];
+			break;
+		}
+
+		if (self.typeInfo.internalType === 'moment') {
+			result[0] = moment(result[0]);
+			result[1] = moment(result[1]);
+		}
+
+		break;
+	case '$every':
+		result = self.inputs.everyDropdown.val() === 'DAY' ? self.inputs.everyDay.val()
+			: self.inputs.everyDropdown.val() === 'MONTH' ? self.inputs.everyMonth.val()
+			: null;
+		break;
+	case '$this':
+	case '$last':
+		result = self.inputs.last.val();
+		break;
+	}
+
+	return result;
+};
+
+DateFilter.prototype.setValue = function (val1, val2) {
+	var self = this;
+
+	switch (self.getOperator()) {
+	case '$bet':
+		self.inputs.rangeStart.val(val1);
+		self.inputs.rangeEnd.val(val2);
+		break;
+	case '$eq':
+	case '$ne':
+	case '$lte':
+	case '$gte':
+		self.inputs.single.val(val1);
+		break;
+	case '$every':
+		var days = ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY'];
+		var months = ['JANUARY', 'FEBRUARY', 'MARCH', 'APRIL', 'MAY', 'JUNE', 'JULY', 'AUGUST', 'SEPTEMBER', 'OCTOBER', 'NOVEMBER', 'DECEMBER'];
+
+		var dayIdx = days.indexOf(val1);
+		var monthIdx = months.indexOf(val1);
+
+		if (dayIdx >= 0) {
+			self.inputs.everyDropdown.val('DAY').change();
+			self.inputs.everyDay.val(val1);
+		}
+		else if (monthIdx >= 0) {
+			self.inputs.everyDropdown.val('MONTH').change();
+			self.inputs.everyMonth.val(val1);
+		}
+		else {
+			console.error('Invalid filter for operator "' + self.getOperator() + '" and value "' + val1 + '"');
+		}
+		break;
+	case '$this':
+	case '$last':
+		self.inputs.last.val(val1);
+		break;
+	}
+};
+
+export default DateFilter;