Plugin/stanford/Options.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. /**
  6.  * Stanford diagram plugin option class
  7.  * @class StanfordOptions
  8.  * @param {Options} options Stanford plugin options
  9.  * @augments Plugin
  10.  * @returns {StanfordOptions}
  11.  * @private
  12.  */
  13. export default class Options {
  14. 	constructor() {
  15. 		return {
  16. 			/**
  17. 			 * Set the color of the color scale. This function receives a value between 0 and 1, and should return a color.
  18. 			 * @name colors
  19. 			 * @memberof plugin-stanford
  20. 			 * @type {Function}
  21. 			 * @default undefined
  22. 			 * @example
  23. 			 *   colors: d3.interpolateHslLong(
  24. 			 *      d3.hsl(250, 1, 0.5), d3.hsl(0, 1, 0.5)
  25. 			 *   )
  26. 			 */
  27. 			colors: undefined,
  29. 			/**
  30. 			 * Specify the key of epochs values in the data.
  31. 			 * @name epochs
  32. 			 * @memberof plugin-stanford
  33. 			 * @type {Array}
  34. 			 * @default []
  35. 			 * @example
  36. 			 * 	epochs: [ 1, 1, 2, 2, ... ]
  37. 			 */
  38. 			epochs: <number[]>[],
  40. 			/**
  41. 			 * Show additional lines anywhere on the chart.
  42. 			 * - Each line object should consist with following options:
  43. 			 *
  44. 			 * | Key | Type | Description |
  45. 			 * | --- | --- | --- |
  46. 			 * | x1 | Number | Starting position on the x axis |
  47. 			 * | y1 | Number | Starting position on the y axis |
  48. 			 * | x2 | Number | Ending position on the x axis  |
  49. 			 * | y2 | Number | Ending position on the y axis |
  50. 			 * | class | String | Optional value. Set a custom css class to this line. |
  51. 			 * @type {Array}
  52. 			 * @memberof plugin-stanford
  53. 			 * @default []
  54. 			 * @example
  55. 			 *   lines: [
  56. 			 *       { x1: 0, y1: 0, x2: 65, y2: 65, class: "line1" },
  57. 			 *       { x1: 0, x2: 65, y1: 40, y2: 40, class: "line2" }
  58. 			 *   ]
  59. 			 */
  60. 			lines: [],
  62. 			/**
  63. 			 * Set scale values
  64. 			 * @name scale
  65. 			 * @memberof plugin-stanford
  66. 			 * @type {object}
  67. 			 * @property {object} [scale] scale object
  68. 			 * @property {number} [scale.min=undefined] Minimum value of the color scale. Default: lowest value in epochs
  69. 			 * @property {number} [scale.max=undefined] Maximum value of the color scale. Default: highest value in epochs
  70. 			 * @property {number} [scale.width=20] Width of the color scale
  71. 			 * @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")
  72. 			 * @example
  73. 			 *  scale: {
  74. 			 *    max: 10000,
  75. 			 *    min: 1,
  76. 			 *    width: 500,
  77. 			 *
  78. 			 *    // specify 'pow10' to format as powers of 10
  79. 			 *    format: "pow10",
  80. 			 *
  81. 			 *    // or specify a format function
  82. 			 *    format: function(x) {
  83. 			 *    	return x +"%";
  84. 			 *    }
  85. 			 *  },
  86. 			 */
  87. 			scale_min: <number | undefined>undefined,
  88. 			scale_max: <number | undefined>undefined,
  89. 			scale_width: <number | undefined>20,
  90. 			scale_format: <number | undefined>undefined,
  92. 			/**
  93. 			 * The padding for color scale element
  94. 			 * @name padding
  95. 			 * @memberof plugin-stanford
  96. 			 * @type {object}
  97. 			 * @property {object} [padding] padding object
  98. 			 * @property {number} [padding.top=0] Top padding value.
  99. 			 * @property {number} [padding.right=0] Right padding value.
  100. 			 * @property {number} [padding.bottom=0] Bottom padding value.
  101. 			 * @property {number} [padding.left=0] Left padding value.
  102. 			 * @example
  103. 			 *  padding: {
  104. 			 *     top: 15,
  105. 			 *     right: 0,
  106. 			 *     bottom: 0,
  107. 			 *     left: 0
  108. 			 *  },
  109. 			 */
  110. 			padding_top: 0,
  111. 			padding_right: 0,
  112. 			padding_bottom: 0,
  113. 			padding_left: 0,
  115. 			/**
  116. 			 * Show additional regions anywhere on the chart.
  117. 			 * - Each region object should consist with following options:
  118. 			 *
  119. 			 *   | Key | Type | Default | Attributes | Description |
  120. 			 *   | --- | --- | --- | --- | --- |
  121. 			 *   | 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. |
  122. 			 *   | opacity | Number | `0.2` | &lt;optional> | Sets the opacity of the region as value between 0 and 1 |
  123. 			 *   | 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. |
  124. 			 *   | class | String | | &lt;optional> | Se a custom css class to this region, use the fill property in css to set a background color. |
  125. 			 * @name regions
  126. 			 * @memberof plugin-stanford
  127. 			 * @type {Array}
  128. 			 * @default []
  129. 			 * @example
  130. 			 *   regions: [
  131. 			 *       {
  132. 			 *           points: [ // add points counter-clockwise
  133. 			 *               { x: 0, y: 0 },
  134. 			 *               { x: 40, y: 40 },
  135. 			 *               { x: 0, y: 40 },
  136. 			 *           ],
  137. 			 *           text: function (value, percentage) {
  138. 			 *               return `Normal Operations: ${value} (${percentage}%)`;
  139. 			 *           },
  140. 			 *           opacity: 0.2, // 0 to 1
  141. 			 *           class: "test-polygon1"
  142. 			 *       },
  143. 			 *       ...
  144. 			 *   ]
  145. 			 */
  146. 			regions: []
  147. 		};
  148. 	}
  149. }