component/bars.js

  1. import * as d3 from "d3";
  2. import dataTransform from "../dataTransform.js";
  3. import { attachEventListners, dispatch } from "../events.js";
  4. import { colorParse } from "../colorHelper.js";
  6. /**
  7.  * Reusable 3D Bar Chart Component
  8.  *
  9.  * @module
  10.  */
  11. export default function() {
  13. 	/* Default Properties */
  14. 	let dimensions = { x: 40, y: 40, z: 2 };
  15. 	let colors = ["orange", "red", "yellow", "steelblue", "green"];
  16. 	let classed = "d3X3dBars";
  17. 	let transparency = 0;
  19. 	/* Scales */
  20. 	let xScale;
  21. 	let yScale;
  22. 	let colorScale;
  24. 	/**
  25. 	 * Initialise Data and Scales
  26. 	 *
  27. 	 * @private
  28. 	 * @param {Array} data - Chart data.
  29. 	 */
  30. 	const init = function(data) {
  31. 		const { columnKeys, valueMax } = dataTransform(data).summary();
  32. 		const valueExtent = [0, valueMax];
  33. 		const { x: dimensionX, y: dimensionY } = dimensions;
  35. 		if (typeof xScale === "undefined") {
  36. 			xScale = d3.scaleBand()
  37. 				.domain(columnKeys)
  38. 				.rangeRound([0, dimensionX])
  39. 				.padding(0.3);
  40. 		}
  42. 		if (typeof yScale === "undefined") {
  43. 			yScale = d3.scaleLinear()
  44. 				.domain(valueExtent)
  45. 				.range([0, dimensionY]);
  46. 		}
  48. 		if (typeof colorScale === "undefined") {
  49. 			colorScale = d3.scaleOrdinal()
  50. 				.domain(columnKeys)
  51. 				.range(colors);
  52. 		}
  53. 	};
  55. 	/**
  56. 	 * Constructor
  57. 	 *
  58. 	 * @constructor
  59. 	 * @alias bars
  60. 	 * @param {d3.selection} selection - The chart holder D3 selection.
  61. 	 */
  62. 	const my = function(selection) {
  63. 		selection.each(function(data) {
  64. 			init(data);
  66. 			const element = d3.select(this)
  67. 				.classed(classed, true)
  68. 				.attr("id", (d) => d.key);
  70. 			const shape = (el) => {
  71. 				const shape = el.append("Shape");
  73. 				attachEventListners(shape);
  75. 				shape.append("Box")
  76. 					.attr("size", "1.0 1.0 1.0");
  78. 				shape.append("Appearance")
  79. 					.append("Material")
  80. 					.attr("diffuseColor", (d) => {
  81. 						// If colour scale is linear then use value for scale.
  82. 						let color = colorScale(d.key);
  83. 						if (typeof colorScale.interpolate === "function") {
  84. 							color = colorScale(d.value);
  85. 						}
  86. 						return colorParse(color);
  87. 					})
  88. 					.attr("ambientIntensity", 0.1)
  89. 					.attr("transparency", transparency);
  91. 				return shape;
  92. 			};
  94. 			const bars = element.selectAll(".bar")
  95. 				.data((d) => d.values, (d) => d.key);
  97. 			bars.enter()
  98. 				.append("Transform")
  99. 				.classed("bar", true)
  100. 				.call(shape)
  101. 				.merge(bars)
  102. 				.transition()
  103. 				.attr("scale", (d) => {
  104. 					let x = xScale.bandwidth();
  105. 					let y = yScale(d.value);
  106. 					let z = dimensions.z;
  107. 					return x + " " + y + " " + z;
  108. 				})
  109. 				.attr("translation", (d) => {
  110. 					let x = xScale(d.key);
  111. 					let y = yScale(d.value) / 2;
  112. 					let z = 0.0;
  113. 					return x + " " + y + " " + z;
  114. 				});
  116. 			bars.exit()
  117. 				.remove();
  118. 		});
  119. 	};
  121. 	/**
  122. 	 * Dimensions Getter / Setter
  123. 	 *
  124. 	 * @param {{x: number, y: number, z: number}} _v - 3D object dimensions.
  125. 	 * @returns {*}
  126. 	 */
  127. 	my.dimensions = function(_v) {
  128. 		if (!arguments.length) return dimensions;
  129. 		dimensions = _v;
  130. 		return this;
  131. 	};
  133. 	/**
  134. 	 * X Scale Getter / Setter
  135. 	 *
  136. 	 * @param {d3.scale} _v - D3 scale.
  137. 	 * @returns {*}
  138. 	 */
  139. 	my.xScale = function(_v) {
  140. 		if (!arguments.length) return xScale;
  141. 		xScale = _v;
  142. 		return my;
  143. 	};
  145. 	/**
  146. 	 * Y Scale Getter / Setter
  147. 	 *
  148. 	 * @param {d3.scale} _v - D3 scale.
  149. 	 * @returns {*}
  150. 	 */
  151. 	my.yScale = function(_v) {
  152. 		if (!arguments.length) return yScale;
  153. 		yScale = _v;
  154. 		return my;
  155. 	};
  157. 	/**
  158. 	 * Color Scale Getter / Setter
  159. 	 *
  160. 	 * @param {d3.scale} _v - D3 scale.
  161. 	 * @returns {*}
  162. 	 */
  163. 	my.colorScale = function(_v) {
  164. 		if (!arguments.length) return colorScale;
  165. 		colorScale = _v;
  166. 		return my;
  167. 	};
  169. 	/**
  170. 	 * Colors Getter / Setter
  171. 	 *
  172. 	 * @param {Array} _v - Array of colours used by color scale.
  173. 	 * @returns {*}
  174. 	 */
  175. 	my.colors = function(_v) {
  176. 		if (!arguments.length) return colors;
  177. 		colors = _v;
  178. 		return my;
  179. 	};
  181. 	/**
  182. 	 * Transparency Getter / Setter
  183. 	 *
  184. 	 * @param {Number} _v - Transparency level 0 - 1.
  185. 	 * @returns {*}
  186. 	 */
  187. 	my.transparency = function(_v) {
  188. 		if (!arguments.length) return transparency;
  189. 		transparency = _v;
  190. 		return my;
  191. 	};
  193. 	/**
  194. 	 * Dispatch On Getter
  195. 	 *
  196. 	 * @returns {*}
  197. 	 */
  198. 	my.on = function() {
  199. 		let value = dispatch.on.apply(dispatch, arguments);
  200. 		return value === dispatch ? my : value;
  201. 	};
  203. 	return my;
  204. }