Plugin/stanford/index.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. // @ts-nocheck
  6. import {hsl as d3Hsl} from "d3-color";
  7. import {interpolateHslLong as d3InterpolateHslLong} from "d3-interpolate";
  8. import {scaleSequentialLog as d3ScaleSequentialLog} from "d3-scale";
  9. import {$TOOLTIP} from "../../config/classes";
  10. import {loadConfig} from "../../config/config";
  11. import Plugin from "../Plugin";
  12. import ColorScale from "./ColorScale";
  13. import Elements from "./Elements";
  14. import Options from "./Options";
  15. import {compareEpochs, isEmpty, isFunction, pointInRegion} from "./util";
  17. /**
  18.  * Stanford diagram plugin
  19.  * - **NOTE:**
  20.  *   - Plugins aren't built-in. Need to be loaded or imported to be used.
  21.  *   - Non required modules from billboard.js core, need to be installed separately.
  22.  *   - Is preferable use `scatter` as data.type
  23.  * - **Required modules:**
  24.  *   - [d3-selection](https://github.com/d3/d3-selection)
  25.  *   - [d3-interpolate](https://github.com/d3/d3-interpolate)
  26.  *   - [d3-color](https://github.com/d3/d3-color)
  27.  *   - [d3-scale](https://github.com/d3/d3-scale)
  28.  *   - [d3-brush](https://github.com/d3/d3-brush)
  29.  *   - [d3-axis](https://github.com/d3/d3-axis)
  30.  *   - [d3-format](https://github.com/d3/d3-format)
  31.  * @class plugin-stanford
  32.  * @requires d3-selection
  33.  * @requires d3-interpolate
  34.  * @requires d3-color
  35.  * @requires d3-scale
  36.  * @requires d3-brush
  37.  * @requires d3-axis
  38.  * @requires d3-format
  39.  * @param {object} options Stanford plugin options
  40.  * @augments Plugin
  41.  * @returns {Stanford}
  42.  * @example
  43.  * // Plugin must be loaded before the use.
  44.  * <script src="$YOUR_PATH/plugin/billboardjs-plugin-stanford.js"></script>
  45.  *
  46.  *  var chart = bb.generate({
  47.  *     data: {
  48.  *        columns: [ ... ],
  49.  *        type: "scatter"
  50.  *     }
  51.  *     ...
  52.  *     plugins: [
  53.  *        new bb.plugin.stanford({
  54.  *           colors: d3.interpolateHslLong(
  55.  *              d3.hsl(250, 1, 0.5), d3.hsl(0, 1, 0.5)
  56.  *           ),
  57.  *           epochs: [ 1, 1, 2, 2, ... ],
  58.  *           lines: [
  59.  *                  { x1: 0, y1: 0, x2: 65, y2: 65, class: "line1" },
  60.  *                  { x1: 0, x2: 65, y1: 40, y2: 40, class: "line2" }
  61.  *           ],
  62.  *           scale: {
  63.  *           	max: 10000,
  64.  *             	min: 1,
  65.  *           	width: 500,
  66.  *             	format: 'pow10',
  67.  *           },
  68.  *           padding: {
  69.  *           	top: 15,
  70.  *           	right: 0,
  71.  *           	bottom: 0,
  72.  *           	left: 0
  73.  *           },
  74.  *           regions: [
  75.  *           	{
  76.  *               	points: [ // add points counter-clockwise
  77.  *               	    { x: 0, y: 0 },
  78.  *               	    { x: 40, y: 40 },
  79.  *               	    { x: 0, y: 40 }
  80.  *               	],
  81.  *               	text: function (value, percentage) {
  82.  *               	    return `Normal Operations: ${value} (${percentage}%)`;
  83.  *               	},
  84.  *               	opacity: 0.2, // 0 to 1
  85.  *               	class: "test-polygon1"
  86.  *              },
  87.  *             	...
  88.  *           ]
  89.  *        }
  90.  *     ]
  91.  *  });
  92.  * @example
  93.  * 	import {bb} from "billboard.js";
  94.  * import Stanford from "billboard.js/dist/billboardjs-plugin-stanford";
  95.  *
  96.  * bb.generate({
  97.  *     plugins: [
  98.  *        new Stanford({ ... })
  99.  *     ]
  100.  * })
  101.  */
  102. export default class Stanford extends Plugin {
  103. 	private config;
  104. 	private colorScale;
  105. 	private elements;
  107. 	constructor(options) {
  108. 		super(options);
  109. 		this.config = new Options();
  111. 		return this;
  112. 	}
  114. 	$beforeInit(): void {
  115. 		const {$$} = this;
  117. 		// override on config values & methods
  118. 		$$.config.data_xSort = false;
  119. 		$$.isMultipleX = () => true;
  120. 		$$.showGridFocus = () => {};
  121. 		$$.labelishData = d => d.values;
  122. 		$$.opacityForCircle = () => 1;
  124. 		const getCurrentPadding = $$.getCurrentPadding.bind($$);
  126. 		$$.getCurrentPadding = () => {
  127. 			const padding = getCurrentPadding();
  129. 			padding.right += this.colorScale ? this.colorScale.getColorScalePadding() : 0;
  131. 			return padding;
  132. 		};
  133. 	}
  135. 	$init(): void {
  136. 		const {$$} = this;
  138. 		loadConfig.call(this, this.options);
  139. 		$$.color = this.getStanfordPointColor.bind($$);
  141. 		this.colorScale = new ColorScale(this);
  142. 		this.elements = new Elements(this);
  144. 		this.convertData();
  145. 		this.initStanfordData();
  146. 		this.setStanfordTooltip();
  147. 		this.colorScale.drawColorScale();
  149. 		$$.right += this.colorScale ? this.colorScale.getColorScalePadding() : 0;
  151. 		this.$redraw();
  152. 	}
  154. 	$redraw(duration?: number): void {
  155. 		this.colorScale?.drawColorScale();
  156. 		this.elements?.updateStanfordElements(duration);
  157. 	}
  159. 	getOptions(): Options {
  160. 		return new Options();
  161. 	}
  163. 	convertData(): void {
  164. 		const data = this.$$.data.targets;
  165. 		const epochs = this.options.epochs;
  167. 		data.forEach(d => {
  168. 			d.values.forEach((v, i) => {
  169. 				v.epochs = epochs[i];
  170. 			});
  172. 			d.minEpochs = undefined;
  173. 			d.maxEpochs = undefined;
  174. 			d.colors = undefined;
  175. 			d.colorscale = undefined;
  176. 		});
  177. 	}
  179. 	initStanfordData(): void {
  180. 		const {config} = this;
  181. 		const target = this.$$.data.targets[0];
  183. 		// TODO STANFORD see if (data.js -> orderTargets)+ can be used instead
  184. 		// Make larger values appear on top
  185. 		target.values.sort(compareEpochs);
  187. 		// Get array of epochs
  188. 		const epochs = target.values.map(a => a.epochs);
  190. 		target.minEpochs = !isNaN(config.scale_min) ? config.scale_min : Math.min(...epochs);
  191. 		target.maxEpochs = !isNaN(config.scale_max) ? config.scale_max : Math.max(...epochs);
  193. 		target.colors = isFunction(config.colors) ?
  194. 			config.colors :
  195. 			d3InterpolateHslLong(d3Hsl(250, 1, 0.5), d3Hsl(0, 1, 0.5));
  197. 		target.colorscale = d3ScaleSequentialLog(target.colors)
  198. 			.domain([target.minEpochs, target.maxEpochs]);
  199. 	}
  201. 	getStanfordPointColor(d) {
  202. 		const target = this.data.targets[0];
  204. 		return target.colorscale(d.epochs);
  205. 	}
  207. 	setStanfordTooltip(): string | undefined {
  208. 		const {config} = this.$$;
  210. 		if (isEmpty(config.tooltip_contents)) {
  211. 			config.tooltip_contents = function(d, defaultTitleFormat, defaultValueFormat, color) {
  212. 				const {data_x} = config;
  213. 				let html = `<table class="${$TOOLTIP.tooltip}"><tbody>`;
  215. 				d.forEach(v => {
  216. 					const {id = "", value = 0, epochs = 0, x = ""} = v;
  218. 					html += `<tr>
  219. 							<th>${data_x || ""}</th>
  220. 							<th class="value">${defaultTitleFormat(x)}</th>
  221. 						</tr>
  222. 						<tr>
  223. 							<th>${v.id}</th>
  224. 							<th class="value">${defaultValueFormat(value)}</th>
  225. 						</tr>
  226. 						<tr class="${$TOOLTIP.tooltipName}-${id}">
  227. 							<td class="name"><span style="background-color:${
  228. 						color(v)
  229. 					}"></span>Epochs</td>
  230. 							<td class="value">${defaultValueFormat(epochs)}</td>
  231. 						</tr>`;
  232. 				});
  234. 				return `${html}</tbody></table>`;
  235. 			};
  236. 		}
  237. 	}
  239. 	countEpochsInRegion(region): {value: number, percentage: number} {
  240. 		const $$ = this;
  241. 		const target = $$.data.targets[0];
  243. 		const total = target.values.reduce(
  244. 			(accumulator, currentValue) => accumulator + Number(currentValue.epochs),
  245. 			0
  246. 		);
  248. 		const value = target.values.reduce((accumulator, currentValue) => {
  249. 			if (pointInRegion(currentValue, region)) {
  250. 				return accumulator + Number(currentValue.epochs);
  251. 			}
  253. 			return accumulator;
  254. 		}, 0);
  256. 		return {
  257. 			value,
  258. 			percentage: value !== 0 ? +(value / total * 100).toFixed(1) : 0
  259. 		};
  260. 	}
  261. }