config/Options/axis/y.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. /**
  6.  * y Axis  config options
  7.  */
  8. export default {
  9. 	/**
  10. 	 * Set clip-path attribute for y axis element
  11. 	 * - **NOTE**: `clip-path` attribute for y Axis is set only when `axis.y.inner` option is true.
  12. 	 * @name axis․y․clipPath
  13. 	 * @memberof Options
  14. 	 * @type {boolean}
  15. 	 * @default true
  16. 	 * @example
  17. 	 * // don't set 'clip-path' attribute
  18. 	 * clipPath: false
  19. 	 */
  20. 	axis_y_clipPath: true,
  22. 	/**
  23. 	 * Show or hide y axis.
  24. 	 * @name axis․y․show
  25. 	 * @memberof Options
  26. 	 * @type {boolean}
  27. 	 * @default true
  28. 	 * @example
  29. 	 * axis: {
  30. 	 *   y: {
  31. 	 *     show: false
  32. 	 *   }
  33. 	 * }
  34. 	 */
  35. 	axis_y_show: true,
  37. 	/**
  38. 	 * Set type of y axis.<br><br>
  39. 	 * **Available Values:**
  40. 	 *  - indexed
  41. 	 *  - log
  42. 	 *  - timeseries
  43. 	 *
  44. 	 * **NOTE:**<br>
  45. 	 * - **log** type:
  46. 	 *   - the bound data values must be exclusively-positive.
  47. 	 *   - y axis min value should be >= 0.
  48. 	 *   - [`data.groups`](#.data%25E2%2580%25A4groups)(stacked data) option aren't supported.
  49. 	 *
  50. 	 * @name axis․y․type
  51. 	 * @memberof Options
  52. 	 * @type {string}
  53. 	 * @default "indexed"
  54. 	 * @see [Demo: log](https://naver.github.io/billboard.js/demo/#Axis.LogScales)
  55. 	 * @example
  56. 	 * axis: {
  57. 	 *   y: {
  58. 	 *     type: "log"
  59. 	 *   }
  60. 	 * }
  61. 	 */
  62. 	axis_y_type: <"indexed" | "log" | "timeseries">"indexed",
  64. 	/**
  65. 	 * Set max value of y axis.
  66. 	 * - **NOTE:** Padding will be added based on this value, so if you don't need the padding, please set axis.y.padding to disable it (e.g. axis.y.padding = 0).
  67. 	 * @name axis․y․max
  68. 	 * @memberof Options
  69. 	 * @type {number}
  70. 	 * @default undefined
  71. 	 * @example
  72. 	 * axis: {
  73. 	 *   y: {
  74. 	 *     max: 1000
  75. 	 *   }
  76. 	 * }
  77. 	 */
  78. 	axis_y_max: <number | undefined>undefined,
  80. 	/**
  81. 	 * Set min value of y axis.
  82. 	 * - **NOTE:**
  83. 	 *   Padding will be added based on this value, so if you don't need the padding, please set axis.y.padding to disable it (e.g. axis.y.padding = 0).
  84. 	 * @name axis․y․min
  85. 	 * @memberof Options
  86. 	 * @type {number}
  87. 	 * @default undefined
  88. 	 * @example
  89. 	 * axis: {
  90. 	 *   y: {
  91. 	 *     min: 1000
  92. 	 *   }
  93. 	 * }
  94. 	 */
  95. 	axis_y_min: <number | undefined>undefined,
  97. 	/**
  98. 	 * Change the direction of y axis.<br><br>
  99. 	 * If true set, the direction will be `top -> bottom`.
  100. 	 * @name axis․y․inverted
  101. 	 * @memberof Options
  102. 	 * @type {boolean}
  103. 	 * @default false
  104. 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.InvertedAxis)
  105. 	 * @example
  106. 	 * axis: {
  107. 	 *   y: {
  108. 	 *     inverted: true
  109. 	 *   }
  110. 	 * }
  111. 	 */
  112. 	axis_y_inverted: false,
  114. 	/**
  115. 	 * Set center value of y axis.
  116. 	 * @name axis․y․center
  117. 	 * @memberof Options
  118. 	 * @type {number}
  119. 	 * @default undefined
  120. 	 * @example
  121. 	 * axis: {
  122. 	 *   y: {
  123. 	 *     center: 0
  124. 	 *   }
  125. 	 * }
  126. 	 */
  127. 	axis_y_center: <number | undefined>undefined,
  129. 	/**
  130. 	 * Show y axis inside of the chart.
  131. 	 * @name axis․y․inner
  132. 	 * @memberof Options
  133. 	 * @type {boolean}
  134. 	 * @default false
  135. 	 * @example
  136. 	 * axis: {
  137. 	 *   y: {
  138. 	 *     inner: true
  139. 	 *   }
  140. 	 * }
  141. 	 */
  142. 	axis_y_inner: false,
  144. 	/**
  145. 	 * Set label on y axis.<br><br>
  146. 	 * You can set y axis label and change its position by this option. This option works in the same way as [axis.x.label](#.axis%25E2%2580%25A4x%25E2%2580%25A4label).
  147. 	 * @name axis․y․label
  148. 	 * @memberof Options
  149. 	 * @type {string|object}
  150. 	 * @default {}
  151. 	 * @see [axis.x.label](#.axis%25E2%2580%25A4x%25E2%2580%25A4label) for position string value.
  152. 	 * @example
  153. 	 * axis: {
  154. 	 *   y: {
  155. 	 *     label: "Your Y Axis"
  156. 	 *   }
  157. 	 * }
  158. 	 *
  159. 	 * axis: {
  160. 	 *   y: {
  161. 	 *     label: {
  162. 	 *        text: "Your Y Axis",
  163. 	 *        position: "outer-middle"
  164. 	 *     }
  165. 	 *   }
  166. 	 * }
  167. 	 */
  168. 	axis_y_label: <string | object>{},
  170. 	/**
  171. 	 * Set formatter for y axis tick text.<br><br>
  172. 	 * This option accepts d3.format object as well as a function you define.
  173. 	 * @name axis․y․tick․format
  174. 	 * @memberof Options
  175. 	 * @type {Function}
  176. 	 * @default undefined
  177. 	 * @example
  178. 	 * axis: {
  179. 	 *   y: {
  180. 	 *     tick: {
  181. 	 *       format: function(x) {
  182. 	 *           return x.getFullYear();
  183. 	 *       }
  184. 	 *     }
  185. 	 *   }
  186. 	 * }
  187. 	 */
  188. 	axis_y_tick_format: <Function | undefined>undefined,
  190. 	/**
  191. 	 * Setting for culling ticks.
  192. 	 * - `true`: the ticks will be culled, then only limited tick text will be shown.<br>
  193. 	 *   This option does not hide the tick lines by default, if want to hide tick lines, set `axis.y.tick.culling.lines=false`.
  194. 	 * - `false`: all of ticks will be shown.<br><br>
  195. 	 * The number of ticks to be shown can be chaned by `axis.y.tick.culling.max`.
  196. 	 * @name axis․y․tick․culling
  197. 	 * @memberof Options
  198. 	 * @type {boolean}
  199. 	 * @default false
  200. 	 * @example
  201. 	 * axis: {
  202. 	 *   y: {
  203. 	 *     tick: {
  204. 	 *       culling: false
  205. 	 *     }
  206. 	 *   }
  207. 	 * }
  208. 	 */
  209. 	axis_y_tick_culling: false,
  211. 	/**
  212. 	 * The number of tick texts will be adjusted to less than this value.
  213. 	 * @name axis․y․tick․culling․max
  214. 	 * @memberof Options
  215. 	 * @type {number}
  216. 	 * @default 5
  217. 	 * @example
  218. 	 * axis: {
  219. 	 *   y: {
  220. 	 *     tick: {
  221. 	 *       culling: {
  222. 	 *           max: 5
  223. 	 *       }
  224. 	 *     }
  225. 	 *   }
  226. 	 * }
  227. 	 */
  228. 	axis_y_tick_culling_max: 5,
  230. 	/**
  231. 	 * Control visibility of tick lines within culling option, along with tick text.
  232. 	 * @name axis․y․tick․culling․lines
  233. 	 * @memberof Options
  234. 	 * @type {boolean}
  235. 	 * @default true
  236. 	 * @example
  237. 	 * axis: {
  238. 	 *   y: {
  239. 	 *     tick: {
  240. 	 *       culling: {
  241. 	 *           lines: false,
  242. 	 *       }
  243. 	 *     }
  244. 	 *   }
  245. 	 * }
  246. 	 */
  247. 	axis_y_tick_culling_lines: true,
  249. 	/**
  250. 	 * Show y axis outer tick.
  251. 	 * @name axis․y․tick․outer
  252. 	 * @memberof Options
  253. 	 * @type {boolean}
  254. 	 * @default true
  255. 	 * @example
  256. 	 * axis: {
  257. 	 *   y: {
  258. 	 *     tick: {
  259. 	 *       outer: false
  260. 	 *     }
  261. 	 *   }
  262. 	 * }
  263. 	 */
  264. 	axis_y_tick_outer: true,
  266. 	/**
  267. 	 * Set y axis tick values manually.
  268. 	 * @name axis․y․tick․values
  269. 	 * @memberof Options
  270. 	 * @type {Array|Function}
  271. 	 * @default null
  272. 	 * @example
  273. 	 * axis: {
  274. 	 *   y: {
  275. 	 *     tick: {
  276. 	 *       values: [100, 1000, 10000],
  277. 	 *
  278. 	 *       // an Array value should be returned
  279. 	 *       values: function() {
  280. 	 *       	return [ ... ];
  281. 	 *       }
  282. 	 *     }
  283. 	 *   }
  284. 	 * }
  285. 	 */
  286. 	axis_y_tick_values: <number[] | (() => number[]) | null>null,
  288. 	/**
  289. 	 * Rotate y axis tick text.
  290. 	 * - If you set negative value, it will rotate to opposite direction.
  291. 	 * - Applied when [`axis.rotated`](#.axis%25E2%2580%25A4rotated) option is `true`.
  292. 	 * @name axis․y․tick․rotate
  293. 	 * @memberof Options
  294. 	 * @type {number}
  295. 	 * @default 0
  296. 	 * @example
  297. 	 * axis: {
  298. 	 *   y: {
  299. 	 *     tick: {
  300. 	 *       rotate: 60
  301. 	 *     }
  302. 	 *   }
  303. 	 * }
  304. 	 */
  305. 	axis_y_tick_rotate: 0,
  307. 	/**
  308. 	 * Set the number of y axis ticks.<br><br>
  309. 	 * - **NOTE:** The position of the ticks will be calculated precisely, so the values on the ticks will not be rounded nicely. In the case, axis.y.tick.format or axis.y.tick.values will be helpful.
  310. 	 * @name axis․y․tick․count
  311. 	 * @memberof Options
  312. 	 * @type {number}
  313. 	 * @default undefined
  314. 	 * @example
  315. 	 * axis: {
  316. 	 *   y: {
  317. 	 *     tick: {
  318. 	 *       count: 5
  319. 	 *     }
  320. 	 *   }
  321. 	 * }
  322. 	 */
  323. 	axis_y_tick_count: <number | undefined>undefined,
  325. 	/**
  326. 	 * Show or hide y axis tick line.
  327. 	 * @name axis․y․tick․show
  328. 	 * @memberof Options
  329. 	 * @type {boolean}
  330. 	 * @default true
  331. 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText)
  332. 	 * @example
  333. 	 * axis: {
  334. 	 *   y: {
  335. 	 *     tick: {
  336. 	 *       show: false
  337. 	 *     }
  338. 	 *   }
  339. 	 * }
  340. 	 */
  341. 	axis_y_tick_show: true,
  343. 	/**
  344. 	 * Set axis tick step(interval) size.
  345. 	 * - **NOTE:** Will be ignored if `axis.y.tick.count` or `axis.y.tick.values` options are set.
  346. 	 * @name axis․y․tick․stepSize
  347. 	 * @memberof Options
  348. 	 * @type {number}
  349. 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.StepSizeForYAxis)
  350. 	 * @example
  351. 	 * axis: {
  352. 	 *   y: {
  353. 	 *     tick: {
  354. 	 *       // tick value will step as indicated interval value.
  355. 	 *       // ex) 'stepSize=15' ==> [0, 15, 30, 45, 60]
  356. 	 *       stepSize: 15
  357. 	 *     }
  358. 	 *   }
  359. 	 * }
  360. 	 */
  361. 	axis_y_tick_stepSize: <number | null>null,
  363. 	/**
  364. 	 * Show or hide y axis tick text.
  365. 	 * @name axis․y․tick․text․show
  366. 	 * @memberof Options
  367. 	 * @type {boolean}
  368. 	 * @default true
  369. 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText)
  370. 	 * @example
  371. 	 * axis: {
  372. 	 *   y: {
  373. 	 *     tick: {
  374. 	 *       text: {
  375. 	 *           show: false
  376. 	 *       }
  377. 	 *     }
  378. 	 *   }
  379. 	 * }
  380. 	 */
  381. 	axis_y_tick_text_show: true,
  383. 	/**
  384. 	 * Set the y Axis tick text's position relatively its original position
  385. 	 * @name axis․y․tick․text․position
  386. 	 * @memberof Options
  387. 	 * @type {object}
  388. 	 * @default {x: 0, y:0}
  389. 	 * @example
  390. 	 * axis: {
  391. 	 *   y: {
  392. 	 *     tick: {
  393. 	 *       text: {
  394. 	 *         position: {
  395. 	 *           x: 10,
  396. 	 *           y: 10
  397. 	 *         }
  398. 	 *       }
  399. 	 *     }
  400. 	 *   }
  401. 	 * }
  402. 	 */
  403. 	axis_y_tick_text_position: {x: 0, y: 0},
  405. 	/**
  406. 	 * Set the number of y axis ticks.<br><br>
  407. 	 * - **NOTE:** The position of the ticks will be calculated precisely, so the values on the ticks will not be rounded nicely. In the case, axis.y.tick.format or axis.y.tick.values will be helpful.
  408. 	 * @name axis․y․tick․time
  409. 	 * @memberof Options
  410. 	 * @private
  411. 	 * @type {object}
  412. 	 * @property {object} time time object
  413. 	 * @property {Function} [time.value] D3's time interval function (https://github.com/d3/d3-time#intervals)
  414. 	 * @example
  415. 	 * axis: {
  416. 	 *   y: {
  417. 	 *     tick: {
  418. 	 *       time: {
  419. 	 *          // ticks at 15-minute intervals
  420. 	 *          // https://github.com/d3/d3-scale/blob/master/README.md#time_ticks
  421. 	 *          value: d3.timeMinute.every(15)
  422. 	 *       }
  423. 	 *     }
  424. 	 *   }
  425. 	 * }
  426. 	 */
  427. 	// @TODO: not fully implemented yet
  428. 	axis_y_tick_time_value: <Function | undefined>undefined,
  430. 	/**
  431. 	 * Set padding for y axis.<br><br>
  432. 	 * You can set padding for y axis to create more space on the edge of the axis.
  433. 	 * This option accepts object and it can include top and bottom. top, bottom will be treated as pixels.
  434. 	 *
  435. 	 * - **NOTE:**
  436. 	 *   - Given values are translated relative to the y Axis domain value for padding
  437. 	 *   - For area and bar type charts, [area.zerobased](#.area) or [bar.zerobased](#.bar) options should be set to 'false` to get padded bottom.
  438. 	 * @name axis․y․padding
  439. 	 * @memberof Options
  440. 	 * @type {object|number}
  441. 	 * @default {}
  442. 	 * @example
  443. 	 * axis: {
  444. 	 *   y: {
  445. 	 *     padding: {
  446. 	 *       top: 0,
  447. 	 *       bottom: 0
  448. 	 *     },
  449. 	 *
  450. 	 *     // or set both values at once.
  451. 	 *     padding: 10
  452. 	 *   }
  453. 	 * }
  454. 	 */
  455. 	axis_y_padding: <number | {top?: number, bottom?: number}>{},
  457. 	/**
  458. 	 * Set default range of y axis.<br><br>
  459. 	 * This option set the default value for y axis when there is no data on init.
  460. 	 * @name axis․y․default
  461. 	 * @memberof Options
  462. 	 * @type {Array}
  463. 	 * @default undefined
  464. 	 * @example
  465. 	 * axis: {
  466. 	 *   y: {
  467. 	 *     default: [0, 1000]
  468. 	 *   }
  469. 	 * }
  470. 	 */
  471. 	axis_y_default: <number[] | undefined>undefined,
  473. 	/**
  474. 	 * Set additional axes for y Axis.
  475. 	 * - **NOTE:** Axis' scale is based on y Axis value if domain option isn't set.
  476. 	 *
  477. 	 * Each axis object should consist with following options:
  478. 	 *
  479. 	 * | Name | Type | Default | Description |
  480. 	 * | --- | --- | --- | --- |
  481. 	 * | domain | Array | - | Set the domain value |
  482. 	 * | tick.outer | boolean | true | Show outer tick |
  483. 	 * | tick.format | Function | - | Set formatter for tick text |
  484. 	 * | tick.count | Number | - | Set the number of y axis ticks |
  485. 	 * | tick.values | Array | - | Set tick values manually |
  486. 	 * @name axis․y․axes
  487. 	 * @memberof Options
  488. 	 * @type {Array}
  489. 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.MultiAxes)
  490. 	 * @see [Demo: Domain](https://naver.github.io/billboard.js/demo/#Axis.MultiAxesDomain)
  491. 	 * @example
  492. 	 * y: {
  493. 	 *    axes: [
  494. 	 *      {
  495. 	 *        // if set, will not be correlated with the main y Axis domain value
  496. 	 *        domain: [0, 1000],
  497. 	 *        tick: {
  498. 	 *          outer: false,
  499. 	 *          format: function(x) {
  500. 	 *             return x + "%";
  501. 	 *          },
  502. 	 *          count: 2,
  503. 	 *          values: [10, 20, 30]
  504. 	 *        }
  505. 	 *      },
  506. 	 *      ...
  507. 	 *    ]
  508. 	 * }
  509. 	 */
  510. 	axis_y_axes: <object[]>[]
  511. };