config/Options/axis/axis.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. import x from "./x";
  6. import y from "./y";
  7. import y2 from "./y2";
  9. /**
  10.  * y Axis  config options
  11.  */
  12. export default {
  13. 	/**
  14. 	 * Setup the way to evaluate tick text size.
  15. 	 * - **NOTE:**
  16. 	 *   - Setting `false` or custom evaluator, highly recommended to memoize evaluated text dimension value to not degrade performance.
  17. 	 * @name axis․evalTextSize
  18. 	 * @memberof Options
  19. 	 * @type {boolean|Function}
  20. 	 * @default true
  21. 	 * @example
  22. 	 * axis: {
  23. 	 *   // will evaluate getting text size every time.
  24. 	 *   evalTextSize: false.
  25. 	 *
  26. 	 *   // set a custom evaluator
  27. 	 *   evalTextSize: function(textElement) {
  28. 	 *     // set some character to be evaluated
  29. 	 *     text.textContent = "0";
  30. 	 *
  31. 	 *     // get the size
  32. 	 *      const box = text.getBBox();
  33. 	 *
  34. 	 *     // clear text
  35. 	 *     text.textContent = "";
  36. 	 *
  37. 	 *     return { w: 7, h: 12};
  38. 	 *   }
  39. 	 * }
  40. 	 */
  41. 	axis_evalTextSize: <boolean | ((text: SVGTextElement) => {w: number, h: number})>true,
  43. 	/**
  44. 	 * Switch x and y axis position.
  45. 	 * @name axis․rotated
  46. 	 * @memberof Options
  47. 	 * @type {boolean}
  48. 	 * @default false
  49. 	 * @example
  50. 	 * axis: {
  51. 	 *   rotated: true
  52. 	 * }
  53. 	 */
  54. 	axis_rotated: false,
  56. 	/**
  57. 	 * Set axis tooltip.
  58. 	 * - **NOTE:**
  59. 	 *   - When enabled, will disable default focus grid line.
  60. 	 *   - For `timeseries` x Axis, tootlip will be formatted using x Axis' tick format.
  61. 	 *   - For `category` x Axis, tootlip will be displaying scales' value text.
  62. 	 * @name axis․tooltip
  63. 	 * @memberof Options
  64. 	 * @type {boolean}
  65. 	 * @default false
  66. 	 * @property {object} axis Axis object
  67. 	 * @property {boolean} [axis.tooltip=false] Show tooltip or not.
  68. 	 * @property {string|object} [axis.tooltip.backgroundColor] Set axis tooltip text background colors.
  69. 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.AxisTooltip)
  70. 	 * @example
  71. 	 * axis: {
  72. 	 *     tooltip: true, // default background color is
  73. 	 *
  74. 	 *     // set backgound color for axis tooltip texts
  75. 	 *     tooltip: {
  76. 	 *          backgroundColor: "red",
  77. 	 *
  78. 	 *          // set differenct backround colors per axes
  79. 	 *          // NOTE: In this case, only specified axes tooltip will appear.
  80. 	 *          backgroundColor: {
  81. 	 *               x: "green",
  82. 	 *               y: "yellow",
  83. 	 *               y2: "red"
  84. 	 *          }
  85. 	 *     }
  86. 	 * }
  87. 	 */
  88. 	axis_tooltip: <boolean | {
  89. 		backgroundColor?: string | {x?: string, y?: string, y2?: string}
  90. 	}>false,
  91. 	...x,
  92. 	...y,
  93. 	...y2
  94. };