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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
/** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license *//** * Stanford diagram plugin option class * @class StanfordOptions * @param {Options} options Stanford plugin options * @augments Plugin * @returns {StanfordOptions} * @private */export default class Options {	constructor() {		return {			/**			 * Set the color of the color scale. This function receives a value between 0 and 1, and should return a color.			 * @name colors			 * @memberof plugin-stanford			 * @type {Function}			 * @default undefined			 * @example			 *   colors: d3.interpolateHslLong(			 *      d3.hsl(250, 1, 0.5), d3.hsl(0, 1, 0.5)			 *   )			 */			colors: undefined,
			/**			 * Specify the key of epochs values in the data.			 * @name epochs			 * @memberof plugin-stanford			 * @type {Array}			 * @default []			 * @example			 * 	epochs: [ 1, 1, 2, 2, ... ]			 */			epochs: <number[]> [],
			/**			 * Show additional lines anywhere on the chart.			 * - Each line object should consist with following options:			 *			 * | Key | Type | Description |			 * | --- | --- | --- |			 * | x1 | Number | Starting position on the x axis |			 * | y1 | Number | Starting position on the y axis |			 * | x2 | Number | Ending position on the x axis  |			 * | y2 | Number | Ending position on the y axis |			 * | class | String | Optional value. Set a custom css class to this line. |			 * @type {Array}			 * @memberof plugin-stanford			 * @default []			 * @example			 *   lines: [			 *       { x1: 0, y1: 0, x2: 65, y2: 65, class: "line1" },			 *       { x1: 0, x2: 65, y1: 40, y2: 40, class: "line2" }			 *   ]			 */			lines: [],
			/**			 * Set scale values			 * @name scale			 * @memberof plugin-stanford			 * @type {object}			 * @property {object} [scale] scale object			 * @property {number} [scale.min=undefined] Minimum value of the color scale. Default: lowest value in epochs			 * @property {number} [scale.max=undefined] Maximum value of the color scale. Default: highest value in epochs			 * @property {number} [scale.width=20] Width of the color scale			 * @property {string|Function} [scale.format=undefined] Format of the axis of the color scale. Use 'pow10' to format as powers of 10 or a custom function. Example: d3.format("d")			 * @example			 *  scale: {			 *    max: 10000,			 *    min: 1,			 *    width: 500,			 *			 *    // specify 'pow10' to format as powers of 10			 *    format: "pow10",			 *			 *    // or specify a format function			 *    format: function(x) {			 *    	return x +"%";			 *    }			 *  },			 */			scale_min: <number|undefined> undefined,			scale_max: <number|undefined> undefined,			scale_width: <number|undefined> 20,			scale_format: <number|undefined> undefined,
			/**			 * The padding for color scale element			 * @name padding			 * @memberof plugin-stanford			 * @type {object}			 * @property {object} [padding] padding object			 * @property {number} [padding.top=0] Top padding value.			 * @property {number} [padding.right=0] Right padding value.			 * @property {number} [padding.bottom=0] Bottom padding value.			 * @property {number} [padding.left=0] Left padding value.			 * @example			 *  padding: {			 *     top: 15,			 *     right: 0,			 *     bottom: 0,			 *     left: 0			 *  },			 */			padding_top: 0,			padding_right: 0,			padding_bottom: 0,			padding_left: 0,
			/**			 * Show additional regions anywhere on the chart.			 * - Each region object should consist with following options:			 *			 *   | Key | Type | Default | Attributes | Description |			 *   | --- | --- | --- | --- | --- |			 *   | points | Array |  | | Accepts a group of objects that has x and y.<br>These points should be added in a counter-clockwise fashion to make a closed polygon. |			 *   | opacity | Number | `0.2` | &lt;optional> | Sets the opacity of the region as value between 0 and 1 |			 *   | text | Function |  | &lt;optional> | This function receives a value and percentage of the number of epochs in this region.<br>Return a string to place text in the middle of the region. |			 *   | class | String | | &lt;optional> | Se a custom css class to this region, use the fill property in css to set a background color. |			 * @name regions			 * @memberof plugin-stanford			 * @type {Array}			 * @default []			 * @example			 *   regions: [			 *       {			 *           points: [ // add points counter-clockwise			 *               { x: 0, y: 0 },			 *               { x: 40, y: 40 },			 *               { x: 0, y: 40 },			 *           ],			 *           text: function (value, percentage) {			 *               return `Normal Operations: ${value} (${percentage}%)`;			 *           },			 *           opacity: 0.2, // 0 to 1			 *           class: "test-polygon1"			 *       },			 *       ...			 *   ]			 */			regions: []		};	}}