datavis-glide 4.0.0-PRE.0

package/src/renderers/graph/svelte-gantt.js

@@ -0,0 +1,168 @@
+import _ from 'underscore';
+import moment from 'moment';
+import jQuery from 'jquery';
+
+// Promise polyfill for Svelte in IE mode.
+import 'core-js/actual/promise';
+
+// CSS.escape() polyfill for Svelte in IE mode.
+import 'css.escape';
+
+// import { mount } from 'svelte'; // Svelte 5
+import { SvelteGantt, SvelteGanttTable, SvelteGanttDependencies } from 'svelte-gantt';
+
+import {
+	makeSubclass,
+	mixinLogging,
+} from '../../util/misc.js';
+import {Source} from 'datavis-ace';
+
+import { GraphRenderer } from '../../graph_renderer.js';
+
+// GraphRendererSvelteGantt {{{1
+
+var GraphRendererSvelteGantt = makeSubclass('GraphRendererSvelteGantt', GraphRenderer);
+
+mixinLogging(GraphRendererSvelteGantt);
+
+// #draw {{{2
+
+GraphRendererSvelteGantt.prototype.draw = function () {
+	var self = this;
+
+	self.elt.children().remove();
+
+	self.view.getData(function (ok, data) {
+		self.view.getTypeInfo(function (ok, typeInfo) {
+			var rows = []
+				, rowMap = {} // Used to keep track of rows we've already created.
+				, tasks = []
+				, deps = []
+				, rowId = 0
+				, taskId = 0
+				, depId = 0
+				, minDate = null
+				, maxDate = null;
+
+			var makeDate = function (x) {
+				return typeof x === 'string' ? moment(x).valueOf() :
+					moment.isMoment(x) ? x.valueOf() :
+					null;
+			};
+			var cols = [{
+				field: 'Task',
+				required: true
+			}, {
+				field: 'Resource',
+				required: true
+			}, {
+				field: 'Start',
+				required: true
+			}, {
+				field: 'End',
+				required: true
+			}, {
+				field: 'Completion'
+			}, {
+				field: 'Dependencies'
+			}];
+
+			// Make sure that all the fields that we need are in the data.
+
+			var missingRequired = false;
+			_.each(cols, function (c) {
+				if (c.required && !typeInfo.isSet(c.field)) {
+					self.logError(self.makeLogTag() + ' Missing required data field: %s', c.field);
+					missingRequired = true;
+				}
+			});
+			if (missingRequired) {
+				return null;
+			}
+
+			_.each(cols, function (c) {
+				// Make sure data is decoded.
+				if (typeInfo.isSet(c.field)) {
+					Source.decodeAll(data.dataByRowId, c.field, typeInfo);
+				}
+			});
+
+			_.each(data.data, function (row) {
+				if (rowMap[row.rowData['Resource'].value] == null) {
+					rows.push({
+						id: rowId,
+						name: row.rowData['Resource'].value
+					});
+					rowMap[row.rowData['Resource'].value] = rowId;
+					rowId += 1;
+				}
+
+				var newTask = {
+					id: taskId,
+					resourceId: rowMap[row.rowData['Resource'].value],
+					from: makeDate(row.rowData['Start'].value),
+					to: makeDate(row.rowData['End'].value),
+					label: row.rowData['Task'].value,
+				};
+				if (row.rowData['Completion'] != null) {
+					newTask.amountDone = row.rowData['Completion'].value;
+				}
+				tasks.push(newTask);
+				taskId += 1;
+
+				if (row.rowData['Dependencies'] != null && row.rowData['Dependencies'].value.length > 0) {
+					_.each(row.rowData['Dependencies'].value.split(','), function (dep) {
+						deps.push({
+							id: depId,
+							fromId: dep - 1,
+							toId: newTask.id
+						});
+						depId += 1;
+					});
+				}
+
+				// Track the overall min/max date for the task.
+
+				if (minDate == null || minDate > newTask.from) {
+					minDate = newTask.from;
+				}
+				if (maxDate == null || maxDate < newTask.to) {
+					maxDate = newTask.to;
+				}
+			});
+
+			var target = jQuery('<div>').appendTo(self.elt).get(0);
+			var props = {
+				rows: rows,
+				tasks: tasks,
+				from: minDate,
+				to: maxDate,
+				headers: [{
+					unit: 'week',
+					format: 'dd/MM/yyyy'
+				}],
+				tableHeaders: [{title: 'Resource', property: 'name'}],
+				ganttTableModules: [SvelteGanttTable],
+				highlightedDurations: {
+					unit: 'day',
+					fractions: [0,6]
+				},
+				dependencies: deps,
+				ganttBodyModules: [SvelteGanttDependencies]
+			};
+
+			// Svelte 4
+			var gantt = new SvelteGantt({
+				target: target,
+				props: props
+			});
+
+			// Svelte 5
+			// mount(SvelteGantt(self.elt, props));
+		});
+	}, 'Drawing Svelte-Gantte graph');
+};
+
+// Exports {{{1
+
+export default GraphRendererSvelteGantt;

package/src/renderers/grid/dummy.js

@@ -0,0 +1,79 @@
+// Imports {{{1
+
+import jQuery from 'jquery';
+
+import {
+	deepDefaults,
+	makeSubclass,
+} from '../../util/misc.js';
+
+import {GridRenderer} from '../../grid_renderer.js';
+
+// GridRendererDummy {{{1
+// Constructor {{{2
+
+/**
+ * A dummy grid renderer that can be useful for testing, or as an example of how to start writing a
+ * new renderer.
+ *
+ * @class
+ * @extends GridRenderer
+ *
+ * @property {Grid~Features} features
+ *
+ * @property {object} defn
+ *
+ * @property {ComputedView} view
+ *
+ * @property {Element} root
+ *
+ * @property {object} colConfig Map associating field name with the configuration of the
+ * corresponding column in this grid table.
+ *
+ * @property {Timing} timing
+ *
+ * @property {boolean} needsRedraw True if the grid needs to redraw itself when the view is done
+ * working.
+ */
+
+var GridRendererDummy = makeSubclass('GridRendererDummy', GridRenderer, function (grid, defn, view, features, opts, timing, id) {
+	var self = this;
+
+	opts = deepDefaults(opts, {
+		msg: 'DUMMY'
+	});
+
+	self.super.ctor.apply(self, arguments);
+});
+
+// #canRender {{{2
+
+GridRendererDummy.prototype.canRender = function (what) {
+	return true;
+};
+
+// #draw {{{2
+
+GridRendererDummy.prototype.draw = function (root, opts, cont) {
+	var self = this
+		, args = Array.prototype.slice.call(arguments);
+
+	return self.super.draw(root, opts, function (ok, data, typeInfo, andThen) {
+		if (!ok) {
+			return cont();
+		}
+
+		root.append(jQuery('<h1>').text(self.opts.msg));
+		return andThen(cont);
+	});
+};
+
+// Registry {{{2
+
+GridRenderer.registry.set('dummy', GridRendererDummy);
+
+// Exports {{{2
+
+export {
+	GridRendererDummy
+};

package/src/renderers/grid/handlebars.js

@@ -0,0 +1,217 @@
+import _ from 'underscore';
+
+import jQuery from 'jquery';
+
+import {
+	format,
+	makeSubclass,
+	outerHtml,
+} from '../../util/misc.js';
+
+import hbUtil from '../../util/handlebars.js';
+
+import {GridRenderer} from '../../grid_renderer.js';
+
+// GridRendererHandlebars {{{1
+
+var GridRendererHandlebars = makeSubclass('GridRendererHandlebars', GridRenderer, function () {
+	var self = this;
+
+	self.super['GridRenderer'].ctor.apply(self, arguments);
+
+	self.hbEnv = hbUtil.makeEnv();
+});
+
+// #_validateFeatures {{{2
+
+GridRendererHandlebars.prototype._validateFeatures = function () {
+	var self = this;
+	self.features.limit = false;
+};
+
+
+// #canRender {{{2
+
+GridRendererHandlebars.prototype.canRender = function (what) {
+	return true;
+};
+
+// #_draw_plain {{{2
+
+GridRendererHandlebars.prototype._draw_plain = function (root, data, typeInfo, opts) {
+	var self = this;
+	var html = '';
+
+	if (data.data.length === 0) {
+		if (self.empty != null) {
+			html += self.empty();
+		}
+	}
+	else {
+		if (self.before != null) {
+			html += self.before();
+		}
+
+		if (self.item != null) {
+			_.each(data.data, function (row) {
+				var context = {};
+				_.each(row.rowData, function (cell, field) {
+					var fcc = self.colConfig.get(field) || {};
+					var value = format(fcc, typeInfo.get(field), cell);
+					if (value instanceof Element || value instanceof jQuery) {
+						value = outerHtml(value);
+					}
+					context[field] = value;
+				});
+				html += self.item(context);
+			});
+		}
+
+		if (self.after != null) {
+			html += self.after();
+		}
+	}
+
+	root.html(html);
+};
+
+// #_draw_group {{{2
+
+GridRendererHandlebars.prototype._draw_group = function (root, data, typeInfo, opts) {
+	var self = this;
+	var html = '';
+
+	if (data.data.length === 0) {
+		if (self.empty != null) {
+			html += self.empty();
+		}
+	}
+	else {
+		if (self.before != null) {
+			html += self.before();
+		}
+
+		if (self.item != null) {
+			_.each(data.data, function (group, rowValIdx) {
+				var context = {
+					rowValIdx: rowValIdx
+				};
+				html += self.item(context);
+			});
+		}
+
+		if (self.after != null) {
+			html += self.after();
+		}
+	}
+
+	root.html(html);
+};
+
+// #_draw_pivot {{{2
+
+GridRendererHandlebars.prototype._draw_pivot = function (root, data, typeInfo, opts) {
+	var self = this;
+	var html = '';
+
+	if (data.data.length === 0) {
+		if (self.empty != null) {
+			html += self.empty();
+		}
+	}
+	else {
+		if (self.before != null) {
+			html += self.before();
+		}
+
+		if (self.item != null) {
+			_.each(data.data, function (group, rowValIdx) {
+				_.each(group, function (pivot, colValIdx) {
+					var div = jQuery('<div>').appendTo(root);
+					var context = {
+						rowValIdx: rowValIdx,
+						colValIdx: colValIdx
+					};
+					html += self.item(context);
+				});
+			});
+		}
+
+		if (self.after != null) {
+			html += self.after();
+		}
+	}
+
+	root.html(html);
+};
+
+// #draw {{{2
+
+GridRendererHandlebars.prototype.draw = function (root, cont, opts) {
+	var self = this;
+
+	if (cont != null && typeof cont !== 'function') {
+		throw new Error('Call Error: `cont` must be null or a function');
+	}
+
+	return self.super['GridRenderer'].draw(root, opts, function (ok, data, typeInfo) {
+		if (!ok) {
+			return cont();
+		}
+
+		hbUtil.addHelpers(self.hbEnv, data);
+
+		var k1 = data.isPlain ? 'plain'
+			: data.isGroup ? 'group'
+			: data.isPivot ? 'pivot'
+			: null;
+
+		var configKey = data.isPlain ? 'whenPlain'
+			: data.isGroup ? 'whenGroup'
+			: data.isPivot ? 'whenPivot'
+			: null;
+
+		var config = self.opts[configKey] || {};
+
+		if (config.empty != null) {
+			self.empty = self.hbEnv.compile(config.empty);
+		}
+
+		if (config.before != null) {
+			self.before = self.hbEnv.compile(config.before);
+		}
+
+		if (config.item != null) {
+			self.item = self.hbEnv.compile(config.item);
+		}
+
+		if (config.after != null) {
+			self.after = self.hbEnv.compile(config.after);
+		}
+
+		self['_draw_' + k1](root, data, typeInfo, opts);
+
+		self.addWorkHandler();
+
+		self.fire('renderEnd');
+		self.drawLock.unlock();
+
+		if (typeof cont === 'function') {
+			return cont();
+		}
+	});
+};
+
+// #addWorkHandler {{{2
+
+GridRendererHandlebars.prototype.addWorkHandler = function () {
+	var self = this;
+
+	self.view.on('workEnd', function (info, ops) {
+		self.draw(self.root, null, self.drawOpts);
+	}, { who: self, limit: 1 });
+};
+
+// Registry
+
+GridRenderer.registry.set('handlebars', GridRendererHandlebars);

package/src/renderers/grid/squirrelly.js

@@ -0,0 +1,215 @@
+import _ from 'underscore';
+import jQuery from 'jquery';
+import * as Sqrl from 'squirrelly/dist/browser/squirrelly.min.js';
+
+import {
+	deepCopy,
+	format,
+	makeSubclass,
+	outerHtml,
+} from '../../util/misc.js';
+
+import sqUtil from '../../util/squirrelly.js';
+
+import {GridRenderer} from '../../grid_renderer.js';
+
+// GridRendererSquirrelly {{{1
+
+var GridRendererSquirrelly = makeSubclass('GridRendererSquirrelly', GridRenderer, function () {
+	var self = this;
+
+	self.super['GridRenderer'].ctor.apply(self, arguments);
+
+	self.config = deepCopy(Sqrl.defaultConfig);
+	self.config.useWith = true;
+});
+
+// #_validateFeatures {{{2
+
+GridRendererSquirrelly.prototype._validateFeatures = function () {
+	var self = this;
+	self.features.limit = false;
+};
+
+
+// #canRender {{{2
+
+GridRendererSquirrelly.prototype.canRender = function (what) {
+	return true;
+};
+
+// #_draw_plain {{{2
+
+GridRendererSquirrelly.prototype._draw_plain = function (root, data, typeInfo, opts) {
+	var self = this;
+	var html = '';
+
+	if (data.data.length === 0) {
+		if (self.empty != null) {
+			html += self.empty({}, self.config);
+		}
+	}
+	else {
+		if (self.before != null) {
+			html += self.before({}, self.config);
+		}
+
+		if (self.item != null) {
+			_.each(data.data, function (row) {
+				var context = {};
+				_.each(row.rowData, function (cell, field) {
+					var fcc = self.colConfig.get(field) || {};
+					var value = format(fcc, typeInfo.get(field), cell);
+					if (value instanceof Element || value instanceof jQuery) {
+						value = outerHtml(value);
+					}
+					context[field] = value;
+				});
+				html += self.item(context, self.config);
+			});
+		}
+
+		if (self.after != null) {
+			html += self.after({}, self.config);
+		}
+	}
+
+	root.html(html);
+};
+
+// #_draw_group {{{2
+
+GridRendererSquirrelly.prototype._draw_group = function (root, data, typeInfo, opts) {
+	var self = this;
+	var html = '';
+
+	if (data.data.length === 0) {
+		if (self.empty != null) {
+			html += self.empty();
+		}
+	}
+	else {
+		if (self.before != null) {
+			html += self.before();
+		}
+
+		if (self.item != null) {
+			_.each(data.data, function (group, rowValIdx) {
+				var context = {
+					rowValIdx: rowValIdx
+				};
+				html += self.item(context, self.config);
+			});
+		}
+
+		if (self.after != null) {
+			html += self.after();
+		}
+	}
+
+	root.html(html);
+};
+
+// #_draw_pivot {{{2
+
+GridRendererSquirrelly.prototype._draw_pivot = function (root, data, typeInfo, opts) {
+	var self = this;
+	var html = '';
+
+	if (data.data.length === 0) {
+		if (self.empty != null) {
+			html += self.empty();
+		}
+	}
+	else {
+		if (self.before != null) {
+			html += self.before();
+		}
+
+		if (self.item != null) {
+			_.each(data.data, function (group, rowValIdx) {
+				if (self.beforeGroup != null) {
+					html += self.beforeGroup();
+				}
+				_.each(group, function (pivot, colValIdx) {
+					var div = jQuery('<div>').appendTo(root);
+					var context = {
+						rowValIdx: rowValIdx,
+						colValIdx: colValIdx
+					};
+					html += self.item(context, self.config);
+				});
+				if (self.afterGroup != null) {
+					html += self.afterGroup();
+				}
+			});
+		}
+
+		if (self.after != null) {
+			html += self.after();
+		}
+	}
+
+	root.html(html);
+};
+
+// #draw {{{2
+
+GridRendererSquirrelly.prototype.draw = function (root, cont, opts) {
+	var self = this;
+
+	if (cont != null && typeof cont !== 'function') {
+		throw new Error('Call Error: `cont` must be null or a function');
+	}
+
+	return self.super['GridRenderer'].draw(root, opts, function (ok, data, typeInfo) {
+		if (!ok) {
+			return cont();
+		}
+
+		sqUtil.addHelpers(Sqrl.helpers, data);
+
+		var k1 = data.isPlain ? 'plain'
+			: data.isGroup ? 'group'
+			: data.isPivot ? 'pivot'
+			: null;
+
+		var configKey = data.isPlain ? 'whenPlain'
+			: data.isGroup ? 'whenGroup'
+			: data.isPivot ? 'whenPivot'
+			: null;
+
+		var config = self.opts[configKey] || {};
+
+		_.each(['empty', 'before', 'beforeGroup', 'item', 'afterGroup', 'after'], function (x) {
+			if (config[x] != null) {
+				self[x] = Sqrl.compile(config[x], self.config);
+			}
+		});
+
+		self['_draw_' + k1](root, data, typeInfo, opts);
+
+		self.addWorkHandler();
+
+		self.fire('renderEnd');
+		self.drawLock.unlock();
+
+		if (typeof cont === 'function') {
+			return cont();
+		}
+	});
+};
+
+// #addWorkHandler {{{2
+
+GridRendererSquirrelly.prototype.addWorkHandler = function () {
+	var self = this;
+
+	self.view.on('workEnd', function (info, ops) {
+		self.draw(self.root, null, self.drawOpts);
+	}, { who: self, limit: 1 });
+};
+
+// Registry {{{1
+
+GridRenderer.registry.set('squirrelly', GridRendererSquirrelly);