1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license *//** * color config options */export default {	/**	 * Set color of the data values	 * @name color	 * @memberof Options	 * @type {object}	 * @property {object} color color object	 * @property {string|object|Function} [color.onover] Set the color value for each data point when mouse/touch onover event occurs.	 * @property {Array|null} [color.pattern=[]] Set custom color pattern. Passing `null` will not set a color for these elements, which requires the usage of custom CSS-based theming to work.	 * @property {Function} [color.tiles] if defined, allows use svg's patterns to fill data area. It should return an array of [SVGPatternElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGPatternElement).	 *  - **NOTE:** The pattern element's id will be defined as `bb-colorize-pattern-$COLOR-VALUE`.<br>	 *    ex. When color pattern value is `['red', '#fff']` and defined 2 patterns,then ids for pattern elements are:<br>	 *    - `bb-colorize-pattern-red`	 *    - `bb-colorize-pattern-fff`	 * @property {object} [color.threshold] color threshold for gauge and tooltip color	 * @property {string} [color.threshold.unit] If set to `value`, the threshold will be based on the data value. Otherwise it'll be based on equation of the `threshold.max` option value.	 * @property {Array} [color.threshold.values] Threshold values for each steps	 * @property {number} [color.threshold.max=100] The base value to determine threshold step value condition. When the given value is 15 and max 10, then the value for threshold is `15*100/10`.	 * @example	 *  color: {	 *      pattern: ["#1f77b4", "#aec7e8", ...],	 *	 *      // Set colors' patterns	 *      // it should return an array of SVGPatternElement	 *      tiles: function() {	 *         var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");	 *         var g = document.createElementNS("http://www.w3.org/2000/svg", "g");	 *         var circle1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");	 *	 *         pattern.setAttribute("patternUnits", "userSpaceOnUse");	 *         pattern.setAttribute("width", "32");	 *         pattern.setAttribute("height", "32");	 *	 *         g.style.fill = "#000";	 *         g.style.opacity = "0.2";	 *	 *         circle1.setAttribute("cx", "3");	 *         circle1.setAttribute("cy", "3");	 *         circle1.setAttribute("r", "3");	 *	 *         g.appendChild(circle1);	 *         pattern.appendChild(g);	 *	 *         return [pattern];	 *      },	 *	 *      // for threshold usage, pattern values should be set for each steps	 *      pattern: ["grey", "green", "yellow", "orange", "red"],	 *      threshold: {	 *          unit: "value",	 *	 *          // when value is 20 => 'green', value is 40 => 'orange' will be set.	 *          values: [10, 20, 30, 40, 50],	 *	 *          // the equation for max:	 *          // - unit == 'value': max => 30	 *          // - unit != 'value': max => value*100/30	 *          max: 30	 *      },	 *	 *      // set all data to 'red'	 *      onover: "red",	 *	 *      // set different color for data	 *      onover: {	 *          data1: "red",	 *          data2: "yellow"	 *      },	 *	 *      // will pass data object to the callback	 *      onover: function(d) {	 *          return d.id === "data1" ? "red" : "green";	 *      }	 *  }	 */	color_pattern: <(string|null)[]> [],	color_tiles: <(() => [])|undefined> undefined,	color_threshold: <{unit?: string; values?: number[]; max: number;}> {},	color_onover: <string|object|undefined> undefined};