Chart/api/selection.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. import {select as d3Select} from "d3-selection";
  6. import type {DataItem} from "../../../types/types";
  7. import {$AREA, $LINE, $SELECT, $SHAPE} from "../../config/classes";
  8. import {isDefined} from "../../module/util";
  10. /**
  11.  * Toggler function to select or unselect
  12.  * @param {boolean} isSelection Weather select or unselect
  13.  * @param {Array} ids Target ids
  14.  * @param {Array} indices Indices number
  15.  * @param {boolean} resetOther Weather reset other selected points (only for selection)
  16.  * @private
  17.  */
  18. function setSelection(
  19. 	isSelection = false,
  20. 	ids?: string | string[],
  21. 	indices?: number[],
  22. 	resetOther?: boolean
  23. ): void {
  24. 	const $$ = this;
  25. 	const {config, $el: {main}} = $$;
  26. 	const selectionGrouped = config.data_selection_grouped;
  27. 	const isSelectable = config.data_selection_isselectable.bind($$.api);
  29. 	if (!config.data_selection_enabled) {
  30. 		return;
  31. 	}
  33. 	main.selectAll(`.${$SHAPE.shapes}`)
  34. 		.selectAll(`.${$SHAPE.shape}`)
  35. 		.each(function(d) {
  36. 			const shape = d3Select(this);
  37. 			const {id, index} = d.data ? d.data : d;
  38. 			const toggle = $$.getToggle(this, d).bind($$);
  39. 			const isTargetId = selectionGrouped || !ids || ids.indexOf(id) >= 0;
  40. 			const isTargetIndex = !indices || indices.indexOf(index) >= 0;
  41. 			const isSelected = shape.classed($SELECT.SELECTED);
  43. 			// line/area selection not supported yet
  44. 			if (shape.classed($LINE.line) || shape.classed($AREA.area)) {
  45. 				return;
  46. 			}
  48. 			if (isSelection) {
  49. 				if (isTargetId && isTargetIndex && isSelectable(d) && !isSelected) {
  50. 					toggle(true, shape.classed($SELECT.SELECTED, true), d, index);
  51. 				} else if (isDefined(resetOther) && resetOther && isSelected) {
  52. 					toggle(false, shape.classed($SELECT.SELECTED, false), d, index);
  53. 				}
  54. 			} else {
  55. 				if (isTargetId && isTargetIndex && isSelectable(d) && isSelected) {
  56. 					toggle(false, shape.classed($SELECT.SELECTED, false), d, index);
  57. 				}
  58. 			}
  59. 		});
  60. }
  62. export default {
  63. 	/**
  64. 	 * Get selected data points.<br><br>
  65. 	 * By this API, you can get selected data points information. To use this API, data.selection.enabled needs to be set true.
  66. 	 * @function selected
  67. 	 * @instance
  68. 	 * @memberof Chart
  69. 	 * @param {string} [targetId] You can filter the result by giving target id that you want to get. If not given, all of data points will be returned.
  70. 	 * @returns {Array} dataPoint Array of the data points.<br>ex.) `[{x: 1, value: 200, id: "data1", index: 1, name: "data1"}, ...]`
  71. 	 * @example
  72. 	 *  // all selected data points will be returned.
  73. 	 *  chart.selected();
  74. 	 *  // --> ex.) [{x: 1, value: 200, id: "data1", index: 1, name: "data1"}, ... ]
  75. 	 *
  76. 	 *  // all selected data points of data1 will be returned.
  77. 	 *  chart.selected("data1");
  78. 	 */
  79. 	selected(targetId?: string): DataItem[] {
  80. 		const $$ = this.internal;
  81. 		const dataPoint: DataItem[] = [];
  83. 		$$.$el.main.selectAll(`.${$SHAPE.shapes + $$.getTargetSelectorSuffix(targetId)}`)
  84. 			.selectAll(`.${$SHAPE.shape}`)
  85. 			.filter(function() {
  86. 				return d3Select(this).classed($SELECT.SELECTED);
  87. 			})
  88. 			.each(d => dataPoint.push(d));
  90. 		return dataPoint;
  91. 	},
  93. 	/**
  94. 	 * Set data points to be selected. ([`data.selection.enabled`](Options.html#.data%25E2%2580%25A4selection%25E2%2580%25A4enabled) option should be set true to use this method)
  95. 	 * @function select
  96. 	 * @instance
  97. 	 * @memberof Chart
  98. 	 * @param {string|Array} [ids] id value to get selected.
  99. 	 * @param {Array} [indices] The index array of data points. If falsy value given, will select all data points.
  100. 	 * @param {boolean} [resetOther] Unselect already selected.
  101. 	 * @example
  102. 	 *  // select all data points
  103. 	 *  chart.select();
  104. 	 *
  105. 	 *  // select all from 'data2'
  106. 	 *  chart.select("data2");
  107. 	 *
  108. 	 *  // select all from 'data1' and 'data2'
  109. 	 *  chart.select(["data1", "data2"]);
  110. 	 *
  111. 	 *  // select from 'data1', indices 2 and unselect others selected
  112. 	 *  chart.select("data1", [2], true);
  113. 	 *
  114. 	 *  // select from 'data1', indices 0, 3 and 5
  115. 	 *  chart.select("data1", [0, 3, 5]);
  116. 	 */
  117. 	select(ids?: string[] | string, indices?: number[], resetOther?: boolean): void {
  118. 		const $$ = this.internal;
  120. 		setSelection.bind($$)(true, ids, indices, resetOther);
  121. 	},
  123. 	/**
  124. 	 * Set data points to be un-selected.
  125. 	 * @function unselect
  126. 	 * @instance
  127. 	 * @memberof Chart
  128. 	 * @param {string|Array} [ids] id value to be unselected.
  129. 	 * @param {Array} [indices] The index array of data points. If falsy value given, will select all data points.
  130. 	 * @example
  131. 	 *  // unselect all data points
  132. 	 *  chart.unselect();
  133. 	 *
  134. 	 *  // unselect all from 'data1'
  135. 	 *  chart.unselect("data1");
  136. 	 *
  137. 	 *  // unselect from 'data1', indices 2
  138. 	 *  chart.unselect("data1", [2]);
  139. 	 */
  140. 	unselect(ids?: string | string[], indices?: number[]): void {
  141. 		const $$ = this.internal;
  143. 		setSelection.bind($$)(false, ids, indices);
  144. 	}
  145. };