vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

489 lines
13 KiB

  1. var DataSet = require('../DataSet');
  2. var DataView = require('../DataView');
  3. var Range = require('./Range');
  4. var Filter = require('./Filter');
  5. var Settings = require('./Settings');
  6. var Point3d = require('./Point3d');
  7. /**
  8. * Creates a container for all data of one specific 3D-graph.
  9. *
  10. * On construction, the container is totally empty; the data
  11. * needs to be initialized with method initializeData().
  12. * Failure to do so will result in the following exception begin thrown
  13. * on instantiation of Graph3D:
  14. *
  15. * Error: Array, DataSet, or DataView expected
  16. *
  17. * @constructor
  18. */
  19. function DataGroup() {
  20. this.dataTable = null; // The original data table
  21. }
  22. /**
  23. * Initializes the instance from the passed data.
  24. *
  25. * Calculates minimum and maximum values and column index values.
  26. *
  27. * The graph3d instance is used internally to access the settings for
  28. * the given instance.
  29. * TODO: Pass settings only instead.
  30. *
  31. * @param {Graph3D} graph3d Reference to the calling Graph3D instance.
  32. * @param {Array | DataSet | DataView} rawData The data containing the items for
  33. * the Graph.
  34. * @param {Number} style Style Number
  35. */
  36. DataGroup.prototype.initializeData = function(graph3d, rawData, style) {
  37. if (rawData === undefined) return;
  38. if (Array.isArray(rawData)) {
  39. rawData = new DataSet(rawData);
  40. }
  41. var data;
  42. if (rawData instanceof DataSet || rawData instanceof DataView) {
  43. data = rawData.get();
  44. }
  45. else {
  46. throw new Error('Array, DataSet, or DataView expected');
  47. }
  48. if (data.length == 0) return;
  49. this.style = style;
  50. // unsubscribe from the dataTable
  51. if (this.dataSet) {
  52. this.dataSet.off('*', this._onChange);
  53. }
  54. this.dataSet = rawData;
  55. this.dataTable = data;
  56. // subscribe to changes in the dataset
  57. var me = this;
  58. this._onChange = function () {
  59. graph3d.setData(me.dataSet);
  60. };
  61. this.dataSet.on('*', this._onChange);
  62. // determine the location of x,y,z,value,filter columns
  63. this.colX = 'x';
  64. this.colY = 'y';
  65. this.colZ = 'z';
  66. var withBars = graph3d.hasBars(style);
  67. // determine barWidth from data
  68. if (withBars) {
  69. if (graph3d.defaultXBarWidth !== undefined) {
  70. this.xBarWidth = graph3d.defaultXBarWidth;
  71. }
  72. else {
  73. this.xBarWidth = this.getSmallestDifference(data, this.colX) || 1;
  74. }
  75. if (graph3d.defaultYBarWidth !== undefined) {
  76. this.yBarWidth = graph3d.defaultYBarWidth;
  77. }
  78. else {
  79. this.yBarWidth = this.getSmallestDifference(data, this.colY) || 1;
  80. }
  81. }
  82. // calculate minima and maxima
  83. this._initializeRange(data, this.colX, graph3d, withBars);
  84. this._initializeRange(data, this.colY, graph3d, withBars);
  85. this._initializeRange(data, this.colZ, graph3d, false);
  86. if (data[0].hasOwnProperty('style')) {
  87. this.colValue = 'style';
  88. var valueRange = this.getColumnRange(data, this.colValue);
  89. this._setRangeDefaults(valueRange, graph3d.defaultValueMin, graph3d.defaultValueMax);
  90. this.valueRange = valueRange;
  91. }
  92. // Initialize data filter if a filter column is provided
  93. var table = this.getDataTable();
  94. if (table[0].hasOwnProperty('filter')) {
  95. if (this.dataFilter === undefined) {
  96. this.dataFilter = new Filter(this, 'filter', graph3d);
  97. this.dataFilter.setOnLoadCallback(function() { graph3d.redraw(); });
  98. }
  99. }
  100. var dataPoints;
  101. if (this.dataFilter) {
  102. // apply filtering
  103. dataPoints = this.dataFilter._getDataPoints();
  104. }
  105. else {
  106. // no filtering. load all data
  107. dataPoints = this._getDataPoints(this.getDataTable());
  108. }
  109. return dataPoints;
  110. };
  111. /**
  112. * Collect the range settings for the given data column.
  113. *
  114. * This internal method is intended to make the range
  115. * initalization more generic.
  116. *
  117. * TODO: if/when combined settings per axis defined, get rid of this.
  118. *
  119. * @private
  120. *
  121. * @param {'x'|'y'|'z'} column The data column to process
  122. * @param {Graph3D} graph3d Reference to the calling Graph3D instance;
  123. * required for access to settings
  124. */
  125. DataGroup.prototype._collectRangeSettings = function(column, graph3d) {
  126. var index = ['x', 'y', 'z'].indexOf(column);
  127. if (index == -1) {
  128. throw new Error('Column \'' + column + '\' invalid');
  129. }
  130. var upper = column.toUpperCase();
  131. return {
  132. barWidth : this[column + 'BarWidth'],
  133. min : graph3d['default' + upper + 'Min'],
  134. max : graph3d['default' + upper + 'Max'],
  135. step : graph3d['default' + upper + 'Step'],
  136. range_label: column + 'Range', // Name of instance field to write to
  137. step_label : column + 'Step' // Name of instance field to write to
  138. };
  139. }
  140. /**
  141. * Initializes the settings per given column.
  142. *
  143. * TODO: if/when combined settings per axis defined, rewrite this.
  144. *
  145. * @private
  146. *
  147. * @param {DataSet | DataView} data The data containing the items for the Graph
  148. * @param {'x'|'y'|'z'} column The data column to process
  149. * @param {Graph3D} graph3d Reference to the calling Graph3D instance;
  150. * required for access to settings
  151. * @param {Boolean} withBars True if initializing for bar graph
  152. */
  153. DataGroup.prototype._initializeRange = function(data, column, graph3d, withBars) {
  154. var NUMSTEPS = 5;
  155. var settings = this._collectRangeSettings(column, graph3d);
  156. var range = this.getColumnRange(data, column);
  157. if (withBars && column != 'z') { // Safeguard for 'z'; it doesn't have a bar width
  158. range.expand(settings.barWidth / 2);
  159. }
  160. this._setRangeDefaults(range, settings.min, settings.max);
  161. this[settings.range_label] = range;
  162. this[settings.step_label ] = (settings.step !== undefined) ? settings.step : range.range()/NUMSTEPS;
  163. }
  164. /**
  165. * Creates a list with all the different values in the data for the given column.
  166. *
  167. * If no data passed, use the internal data of this instance.
  168. *
  169. * @param {'x'|'y'|'z'} column The data column to process
  170. * @param {DataSet|DataView|undefined} data The data containing the items for the Graph
  171. *
  172. * @returns {Array} All distinct values in the given column data, sorted ascending.
  173. */
  174. DataGroup.prototype.getDistinctValues = function(column, data) {
  175. if (data === undefined) {
  176. data = this.dataTable;
  177. }
  178. var values = [];
  179. for (var i = 0; i < data.length; i++) {
  180. var value = data[i][column] || 0;
  181. if (values.indexOf(value) === -1) {
  182. values.push(value);
  183. }
  184. }
  185. return values.sort(function(a,b) { return a - b; });
  186. };
  187. /**
  188. * Determine the smallest difference between the values for given
  189. * column in the passed data set.
  190. *
  191. * @param {DataSet|DataView|undefined} data The data containing the items for the Graph
  192. * @param {'x'|'y'|'z'} column The data column to process
  193. *
  194. * @returns {Number|null} Smallest difference value or
  195. * null, if it can't be determined.
  196. */
  197. DataGroup.prototype.getSmallestDifference = function(data, column) {
  198. var values = this.getDistinctValues(data, column);
  199. // Get all the distinct diffs
  200. // Array values is assumed to be sorted here
  201. var smallest_diff = null;
  202. for (var i = 1; i < values.length; i++) {
  203. var diff = values[i] - values[i - 1];
  204. if (smallest_diff == null || smallest_diff > diff ) {
  205. smallest_diff = diff;
  206. }
  207. }
  208. return smallest_diff;
  209. }
  210. /**
  211. * Get the absolute min/max values for the passed data column.
  212. *
  213. * @param {DataSet|DataView|undefined} data The data containing the items for the Graph
  214. * @param {'x'|'y'|'z'} column The data column to process
  215. *
  216. * @returns {Range} A Range instance with min/max members properly set.
  217. */
  218. DataGroup.prototype.getColumnRange = function(data, column) {
  219. var range = new Range();
  220. // Adjust the range so that it covers all values in the passed data elements.
  221. for (var i = 0; i < data.length; i++) {
  222. var item = data[i][column];
  223. range.adjust(item);
  224. }
  225. return range;
  226. };
  227. /**
  228. * Determines the number of rows in the current data.
  229. *
  230. * @returns {Number}
  231. */
  232. DataGroup.prototype.getNumberOfRows = function() {
  233. return this.dataTable.length;
  234. }
  235. /**
  236. * Set default values for range
  237. *
  238. * The default values override the range values, if defined.
  239. *
  240. * Because it's possible that only defaultMin or defaultMax is set, it's better
  241. * to pass in a range already set with the min/max set from the data. Otherwise,
  242. * it's quite hard to process the min/max properly.
  243. */
  244. DataGroup.prototype._setRangeDefaults = function (range, defaultMin, defaultMax) {
  245. if (defaultMin !== undefined) {
  246. range.min = defaultMin;
  247. }
  248. if (defaultMax !== undefined) {
  249. range.max = defaultMax;
  250. }
  251. // This is the original way that the default min/max values were adjusted.
  252. // TODO: Perhaps it's better if an error is thrown if the values do not agree.
  253. // But this will change the behaviour.
  254. if (range.max <= range.min) range.max = range.min + 1;
  255. };
  256. DataGroup.prototype.getDataTable = function() {
  257. return this.dataTable;
  258. };
  259. DataGroup.prototype.getDataSet = function() {
  260. return this.dataSet;
  261. };
  262. /**
  263. * Return all data values as a list of Point3d objects
  264. */
  265. DataGroup.prototype.getDataPoints = function(data) {
  266. var dataPoints = [];
  267. for (var i = 0; i < data.length; i++) {
  268. var point = new Point3d();
  269. point.x = data[i][this.colX] || 0;
  270. point.y = data[i][this.colY] || 0;
  271. point.z = data[i][this.colZ] || 0;
  272. point.data = data[i];
  273. if (this.colValue !== undefined) {
  274. point.value = data[i][this.colValue] || 0;
  275. }
  276. var obj = {};
  277. obj.point = point;
  278. obj.bottom = new Point3d(point.x, point.y, this.zRange.min);
  279. obj.trans = undefined;
  280. obj.screen = undefined;
  281. dataPoints.push(obj);
  282. }
  283. return dataPoints;
  284. };
  285. /**
  286. * Copy all values from the data table to a matrix.
  287. *
  288. * The provided values are supposed to form a grid of (x,y) positions.
  289. * @private
  290. */
  291. DataGroup.prototype.initDataAsMatrix = function(data) {
  292. // TODO: store the created matrix dataPoints in the filters instead of
  293. // reloading each time.
  294. var x, y, i, obj;
  295. // create two lists with all present x and y values
  296. var dataX = this.getDistinctValues(this.colX, data);
  297. var dataY = this.getDistinctValues(this.colY, data);
  298. var dataPoints = this.getDataPoints(data);
  299. // create a grid, a 2d matrix, with all values.
  300. var dataMatrix = []; // temporary data matrix
  301. for (i = 0; i < dataPoints.length; i++) {
  302. obj = dataPoints[i];
  303. // TODO: implement Array().indexOf() for Internet Explorer
  304. var xIndex = dataX.indexOf(obj.point.x);
  305. var yIndex = dataY.indexOf(obj.point.y);
  306. if (dataMatrix[xIndex] === undefined) {
  307. dataMatrix[xIndex] = [];
  308. }
  309. dataMatrix[xIndex][yIndex] = obj;
  310. }
  311. // fill in the pointers to the neighbors.
  312. for (x = 0; x < dataMatrix.length; x++) {
  313. for (y = 0; y < dataMatrix[x].length; y++) {
  314. if (dataMatrix[x][y]) {
  315. dataMatrix[x][y].pointRight = (x < dataMatrix.length-1) ? dataMatrix[x+1][y] : undefined;
  316. dataMatrix[x][y].pointTop = (y < dataMatrix[x].length-1) ? dataMatrix[x][y+1] : undefined;
  317. dataMatrix[x][y].pointCross =
  318. (x < dataMatrix.length-1 && y < dataMatrix[x].length-1) ?
  319. dataMatrix[x+1][y+1] :
  320. undefined;
  321. }
  322. }
  323. }
  324. return dataPoints;
  325. }
  326. /**
  327. * Return common information, if present
  328. */
  329. DataGroup.prototype.getInfo = function() {
  330. var dataFilter = this.dataFilter;
  331. if (!dataFilter) return undefined;
  332. return dataFilter.getLabel() + ': ' + dataFilter.getSelectedValue();
  333. };
  334. /**
  335. * Reload the data
  336. */
  337. DataGroup.prototype.reload = function() {
  338. if (this.dataTable) {
  339. this.setData(this.dataTable);
  340. }
  341. };
  342. /**
  343. * Filter the data based on the current filter
  344. *
  345. * @param {Array} data
  346. * @returns {Array} dataPoints Array with point objects which can be drawn on
  347. * screen
  348. */
  349. DataGroup.prototype._getDataPoints = function (data) {
  350. var dataPoints = [];
  351. if (this.style === Settings.STYLE.GRID || this.style === Settings.STYLE.SURFACE) {
  352. dataPoints = this.initDataAsMatrix(data);
  353. }
  354. else { // 'dot', 'dot-line', etc.
  355. this._checkValueField(data);
  356. dataPoints = this.getDataPoints(data);
  357. if (this.style === Settings.STYLE.LINE) {
  358. // Add next member points for line drawing
  359. for (var i = 0; i < dataPoints.length; i++) {
  360. if (i > 0) {
  361. dataPoints[i - 1].pointNext = dataPoints[i];
  362. }
  363. }
  364. }
  365. }
  366. return dataPoints;
  367. };
  368. /**
  369. * Check if the state is consistent for the use of the value field.
  370. *
  371. * Throws if a problem is detected.
  372. * @private
  373. */
  374. DataGroup.prototype._checkValueField = function (data) {
  375. var hasValueField = this.style === Settings.STYLE.BARCOLOR
  376. || this.style === Settings.STYLE.BARSIZE
  377. || this.style === Settings.STYLE.DOTCOLOR
  378. || this.style === Settings.STYLE.DOTSIZE;
  379. if (!hasValueField) {
  380. return; // No need to check further
  381. }
  382. // Following field must be present for the current graph style
  383. if (this.colValue === undefined) {
  384. throw new Error('Expected data to have '
  385. + ' field \'style\' '
  386. + ' for graph style \'' + this.style + '\''
  387. );
  388. }
  389. // The data must also contain this field.
  390. // Note that only first data element is checked.
  391. if (data[0][this.colValue] === undefined) {
  392. throw new Error('Expected data to have '
  393. + ' field \'' + this.colValue + '\' '
  394. + ' for graph style \'' + this.style + '\''
  395. );
  396. }
  397. };
  398. module.exports = DataGroup;