Plugin/bubblecompare/index.ts

  1. import {select as d3Select} from "d3-selection";
  2. import Plugin from "../Plugin";
  4. /**
  5.  * Bubble compare diagram plugin.<br>
  6.  * Compare data 3-dimensional ways: x-axis, y-axis & bubble-size.
  7.  * - **NOTE:**
  8.  *   - Plugins aren't built-in. Need to be loaded or imported to be used.
  9.  *   - Non required modules from billboard.js core, need to be installed separately.
  10.  * - **Required modules:**
  11.  *   - [d3-selection](https://github.com/d3/d3-selection)
  12.  * @class plugin-bubblecompare
  13.  * @requires d3-selection
  14.  * @param {object} options bubble compare plugin options
  15.  * @augments Plugin
  16.  * @returns {BubbleCompare}
  17.  * @example
  18.  * // Plugin must be loaded before the use.
  19.  * <script src="$YOUR_PATH/plugin/billboardjs-plugin-bubblecompare.js"></script>
  20.  *
  21.  *  var chart = bb.generate({
  22.  *     data: {
  23.  *        columns: [ ... ],
  24.  *        type: "bubble"
  25.  *     }
  26.  *     ...
  27.  *     plugins: [
  28.  *        new bb.plugin.bubblecompare({
  29.  *          minR: 11,
  30.  *          maxR: 74,
  31.  *          expandScale: 1.1
  32.  *        }),
  33.  *     ]
  34.  *  });
  35.  * @example
  36.  * import {bb} from "billboard.js";
  37.  * import BubbleCompare from "billboard.js/dist/billboardjs-plugin-bubblecompare";
  38.  *
  39.  * bb.generate({
  40.  *     plugins: [
  41.  *        new BubbleCompare({ ... })
  42.  *     ]
  43.  * })
  44.  */
  46. export default class BubbleCompare extends Plugin {
  47. 	static version = `0.0.1`;
  48. 	public $$;
  50. 	constructor(options) {
  51. 		super(options);
  53. 		return this;
  54. 	}
  56. 	$init(): void {
  57. 		const {$$} = this;
  59. 		$$.findClosest = this.findClosest.bind(this);
  60. 		$$.getBubbleR = this.getBubbleR.bind(this);
  61. 		$$.pointExpandedR = this.pointExpandedR.bind(this);
  62. 	}
  64. 	pointExpandedR(d): number {
  65. 		const baseR = this.getBubbleR(d);
  66. 		const {expandScale = 1} = this.options;
  68. 		BubbleCompare.raiseFocusedBubbleLayer(d);
  69. 		this.changeCursorPoint();
  71. 		return baseR * expandScale;
  72. 	}
  74. 	static raiseFocusedBubbleLayer(d): void {
  75. 		d.raise && d3Select(d.node().parentNode.parentNode).raise();
  76. 	}
  78. 	changeCursorPoint(): void {
  79. 		this.$$.$el.eventRect.style("cursor", "pointer");
  80. 	}
  82. 	findClosest(values, pos): number {
  83. 		const {$$} = this;
  85. 		return values
  86. 			.filter(v => v && !$$.isBarType(v.id))
  87. 			.reduce((acc, cur) => {
  88. 				const d = $$.dist(cur, pos);
  90. 				return d < this.getBubbleR(cur) ? cur : acc;
  91. 			}, 0);
  92. 	}
  94. 	getBubbleR(d): number {
  95. 		const {minR, maxR} = this.options;
  96. 		const curVal = this.getZData(d);
  98. 		if (!curVal) return minR;
  100. 		const [min, max] = this.$$.data.targets.reduce(
  101. 			([accMin, accMax], cur) => {
  102. 				const val = this.getZData(cur.values[0]);
  104. 				return [Math.min(accMin, val), Math.max(accMax, val)];
  105. 			},
  106. 			[10000, 0]
  107. 		);
  108. 		const size = min > 0 && max === min ? 0 : curVal / max;
  110. 		return Math.abs(size) * (maxR - minR) + minR;
  111. 	}
  113. 	getZData(d): number {
  114. 		return this.$$.isBubbleZType(d) ? this.$$.getBubbleZData(d.value, "z") : d.value;
  115. 	}
  116. }