config/Options/interaction/zoom.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. /**
  6.  * zoom config options
  7.  */
  8. export default {
  9. 	/**
  10. 	 * Set zoom options
  11. 	 * @name zoom
  12. 	 * @memberof Options
  13. 	 * @type {object}
  14. 	 * @property {object} zoom Zoom object
  15. 	 * @property {boolean} [zoom.enabled=false] Enable zooming.
  16. 	 *  - **NOTE:** for ESM imports, needs to import 'zoom' exports and instantiate it by calling `zoom()`.
  17. 	 *    - `enabled: zoom()`
  18. 	 * @property {string} [zoom.type='wheel'] Set zoom interaction type.
  19. 	 *  - **Available types:**
  20. 	 *    - wheel
  21. 	 *    - drag
  22. 	 * @property {boolean} [zoom.rescale=false] Enable to rescale after zooming.<br>
  23. 	 *  If true set, y domain will be updated according to the zoomed region.
  24. 	 * @property {Array} [zoom.extent=[1, 10]] Change zoom extent.
  25. 	 * @property {number|Date} [zoom.x.min] Set x Axis minimum zoom range
  26. 	 * @property {number|Date} [zoom.x.max] Set x Axis maximum zoom range
  27. 	 * @property {Function} [zoom.onzoomstart=undefined] Set callback that is called when zooming starts.<br>
  28. 	 *  Specified function receives the zoom event.
  29. 	 * @property {Function} [zoom.onzoom=undefined] Set callback that is called when the chart is zooming.<br>
  30. 	 *  Specified function receives the zoomed domain.
  31. 	 * @property {Function} [zoom.onzoomend=undefined] Set callback that is called when zooming ends.<br>
  32. 	 *  Specified function receives the zoomed domain.
  33. 	 * @property {boolean|object} [zoom.resetButton=true] Set to display zoom reset button for 'drag' type zoom
  34. 	 * @property {Function} [zoom.resetButton.onclick] Set callback when clicks the reset button. The callback will receive reset button element reference as argument.
  35. 	 * @property {string} [zoom.resetButton.text='Reset Zoom'] Text value for zoom reset button.
  36. 	 * @see [Demo:zoom](https://naver.github.io/billboard.js/demo/#Interaction.Zoom)
  37. 	 * @see [Demo:drag zoom](https://naver.github.io/billboard.js/demo/#Interaction.DragZoom)
  38. 	 * @example
  39. 	 *  zoom: {
  40. 	 *      enabled: true,
  41. 	 *      type: "drag",
  42. 	 *      rescale: true,
  43. 	 *      extent: [1, 100]  // enable more zooming
  44. 	 *      x: {
  45. 	 *          min: -1,  // set min range
  46. 	 *          max: 10  // set max range
  47. 	 *      },
  48. 	 *      onzoomstart: function(event) { ... },
  49. 	 *      onzoom: function(domain) { ... },
  50. 	 *      onzoomend: function(domain) { ... },
  51. 	 *
  52. 	 *      // show reset button when is zoomed-in
  53. 	 *      resetButton: true,
  54. 	 *
  55. 	 *      resetButton: {
  56. 	 *          // onclick callback when reset button is clicked
  57. 	 *          onclick: function(button) {
  58. 	 *            button; // Reset button element reference
  59. 	 *            ...
  60. 	 *          },
  61. 	 *
  62. 	 *          // customized text value for reset zoom button
  63. 	 *          text: "Unzoom"
  64. 	 *      }
  65. 	 *  }
  66. 	 * @example
  67. 	 * // importing ESM
  68. 	 * import bb, {zoom} from "billboard.js";
  69. 	 *
  70. 	 * zoom: {
  71. 	 *      enabled: zoom(),
  72. 	 *      ...
  73. 	 * }
  74. 	 */
  75. 	zoom_enabled: <boolean>false,
  76. 	zoom_type: <"wheel" | "drag">"wheel",
  77. 	zoom_extent: <number[] | undefined>undefined,
  78. 	zoom_privileged: false,
  79. 	zoom_rescale: false,
  80. 	zoom_onzoom: <Function | undefined>undefined,
  81. 	zoom_onzoomstart: <Function | undefined>undefined,
  82. 	zoom_onzoomend: <Function | undefined>undefined,
  83. 	zoom_resetButton: <{text: string} | boolean>true,
  84. 	zoom_x_min: <number | Date | undefined>undefined,
  85. 	zoom_x_max: <number | Date | undefined>undefined
  86. };