Chart/Chart.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. import ChartInternal from "../ChartInternal/ChartInternal";
  6. import {loadConfig} from "../config/config";
  7. import {extend, isFunction, notEmpty} from "../module/util";
  9. import apiChart from "./api/chart";
  10. import apiColor from "./api/color";
  11. import apiData from "./api/data";
  12. import apiExport from "./api/export";
  13. import apiFocus from "./api/focus";
  14. import apiLegend from "./api/legend";
  15. import apiLoad from "./api/load";
  16. import apiShow from "./api/show";
  17. import apiTooltip from "./api/tooltip";
  19. /**
  20.  * Main chart class.
  21.  * - Note: Instantiated via `bb.generate()`.
  22.  * @class Chart
  23.  * @example
  24.  * var chart = bb.generate({
  25.  *  data: {
  26.  *    columns: [
  27.  *        ["x", "2015-11-02", "2015-12-01", "2016-01-01", "2016-02-01", "2016-03-01"],
  28.  *        ["count1", 11, 8, 7, 6, 5 ],
  29.  *        ["count2", 9, 3, 6, 2, 8 ]
  30.  *   ]}
  31.  * }
  32.  * @see {@link bb.generate} for the initialization.
  33.  */
  34. /**
  35.  * Access instance's primary node elements
  36.  * @member {object} $
  37.  * @property {object} $ Access instance's primary node elements
  38.  * @property {d3.selection} $.chart Wrapper element
  39.  * @property {d3.selection} $.svg Main svg element
  40.  * @property {d3.selection} $.defs Definition element
  41.  * @property {d3.selection} $.main Main grouping element
  42.  * @property {d3.selection} $.needle Needle element
  43.  *  - **NOTE:**
  44.  *    - The element will have `bb-needle` as class name.
  45.  *    - Will provide speical helper `.updateHelper(value: number, updateConfig: boolean)` method to facilitate needle position update.
  46.  * @property {d3.selection} $.tooltip Tooltip element
  47.  * @property {d3.selection} $.legend Legend element
  48.  * @property {d3.selection} $.title Title element
  49.  * @property {d3.selection} $.grid Grid element
  50.  * @property {d3.selection} $.arc Arc element
  51.  * @property {d3.selection} $.circles Data point circle elements
  52.  * @property {object} $.bar Bar element object
  53.  * @property {d3.selection} $.bar.bars Bar elements
  54.  * @property {d3.selection} $.candlestick Candlestick elements
  55.  * @property {object} $.line Line element object
  56.  * @property {d3.selection} $.line.lines Line elements
  57.  * @property {d3.selection} $.line.areas Areas elements
  58.  * @property {object} $.text Text element object
  59.  * @property {d3.selection} $.text.texts Data label text elements
  60.  * @memberof Chart
  61.  * @example
  62.  * const chart = bb.generate({ ... });
  63.  *
  64.  * chart.$.chart; // wrapper element
  65.  * chart.$.line.circles;  // all data point circle elements
  66.  * @example
  67.  * // Update arc needle position
  68.  * const chart = bb.generate({
  69.  *   data: {
  70.  *     type: "donut"
  71.  *   },
  72.  *   arc: {
  73.  *     needle: {
  74.  *       show: true,
  75.  *       ...
  76.  *     }
  77.  *   }
  78.  * });
  79.  *
  80.  * chart.$.needle.updateHelper(70);  // update needle position to point value 70.
  81.  *
  82.  * // update needle position to point value 70 and the config value.
  83.  * // NOTE: updating config value, will update needle pointer initial value too.
  84.  * chart.$.needle.updateHelper(70, true);
  85.  *
  86.  * // update needle point position every 1 second
  87.  * let i = 0;
  88.  * setInterval(() => {
  89.  *   chart.$.needle.updateHelper(i += 10);
  90.  * }, 1000)
  91.  */
  92. /**
  93.  * Plugin instance array
  94.  * @member {Array} plugins
  95.  * @memberof Chart
  96.  * @example
  97.  *  var chart = bb.generate({
  98.  *     ...
  99.  *     plugins: [
  100.  *        new bb.plugin.stanford({ ... }),
  101.  *        new PluginA()
  102.  *     ]
  103.  *  });
  104.  *
  105.  *  chart.plugins; // [Stanford, PluginA] - instance array
  106.  */
  107. export default class Chart {
  108. 	public plugins = [];
  109. 	public internal: ChartInternal;
  111. 	constructor(options) {
  112. 		const $$ = new ChartInternal(this);
  113. 		// let hook = () => {};
  115. 		this.internal = $$;
  117. 		// bind to namespaced APIs
  118. 		(function bindThis(fn, target, argThis) {
  119. 			Object.keys(fn).forEach(key => {
  120. 				const isFunc = isFunction(fn[key]);
  121. 				const isChild = target !== argThis;
  122. 				const isNotNil = notEmpty(fn[key]);
  123. 				const hasChild = isNotNil && Object.keys(fn[key]).length > 0;
  124. 				// const hookFn = function(...params) {
  125. 				// 	hook();
  126. 				// 	return fn[key].bind(argThis)(...params);
  127. 				// }
  129. 				if (isFunc && ((!isChild && hasChild) || isChild)) {
  130. 					target[key] = fn[key].bind(argThis);
  131. 				} else if (isNotNil && !isFunc) {
  132. 					target[key] = {};
  133. 				} else {
  134. 					target[key] = fn[key];
  135. 				}
  137. 				hasChild && bindThis(fn[key], target[key], argThis);
  138. 			});
  139. 		})(Chart.prototype, this, this);
  141. 		loadConfig.call($$, options);
  143. 		$$.beforeInit();
  144. 		$$.init();
  146. 		// if ($$.config.render.lazy !== false && hasStyle($$.$el.chart, {"display": "none", "visibility": "hidden"})) {
  147. 		// 	hook = () => {
  148. 		// 		logError(`The call of APIs won't work. Please, make sure if chart element is %cvisible.`);
  149. 		// 	};
  150. 		// }
  151. 	}
  152. }
  154. // extend common APIs as part of Chart class
  155. extend(Chart.prototype, [
  156. 	apiChart,
  157. 	apiColor,
  158. 	apiData,
  159. 	apiExport,
  160. 	apiFocus,
  161. 	apiLegend,
  162. 	apiLoad,
  163. 	apiShow,
  164. 	apiTooltip
  165. ]);