config/Options/shape/donut.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. /**
  6.  * donut config options
  7.  */
  8. export default {
  9. 	/**
  10. 	 * Set donut options
  11. 	 * @name donut
  12. 	 * @memberof Options
  13. 	 * @type {object}
  14. 	 * @property {object} donut Donut object
  15. 	 * @property {boolean} [donut.label.show=true] Show or hide label on each donut piece.
  16. 	 * @property {Function} [donut.label.format] Set formatter for the label on each donut piece.
  17. 	 * @property {number} [donut.label.threshold=0.05] Set threshold ratio to show/hide labels.
  18. 	 * @property {number|Function} [donut.label.ratio=undefined] Set ratio of labels position.
  19. 	 * @property {boolean} [donut.expand=true] Enable or disable expanding donut pieces.
  20. 	 * @property {number} [donut.expand.rate=0.98] Set expand rate.
  21. 	 * @property {number} [donut.expand.duration=50] Set expand transition time in ms.
  22. 	 * @property {number} [donut.width] Set width of donut chart.
  23. 	 * @property {string} [donut.title=""] Set title of donut chart. Use `\n` character for line break.
  24. 	 *  - **NOTE:**
  25. 	 *    - When `arc.needle.show=true` is set, special template `{=NEEDLE_VALUE}` can be used inside the title text to show current needle value.
  26. 	 * @property {number} [donut.padAngle=0] Set padding between data.
  27. 	 * @property {number} [donut.startingAngle=0] Set starting angle where data draws.
  28. 	 * @example
  29. 	 *  donut: {
  30. 	 *      label: {
  31. 	 *          show: false,
  32. 	 *          format: function(value, ratio, id) {
  33. 	 *              return d3.format("$")(value);
  34. 	 *
  35. 	 *              // to multiline, return with '\n' character
  36. 	 *              // return value +"%\nLine1\n2Line2";
  37. 	 *          },
  38. 	 *
  39. 	 *          // 0.1(10%) ratio value means, the minimum ratio to show text label relative to the total value.
  40. 	 *          // if data value is below than 0.1, text label will be hidden.
  41. 	 *          threshold: 0.1,
  42. 	 *
  43. 	 *          // set ratio callback. Should return ratio value
  44. 	 *          ratio: function(d, radius, h) {
  45. 	 *          	...
  46. 	 *          	return ratio;
  47. 	 *          },
  48. 	 *          // or set ratio number
  49. 	 *          ratio: 0.5
  50. 	 *      },
  51. 	 *
  52. 	 *      // disable expand transition for interaction
  53. 	 *      expand: false,
  54. 	 *
  55. 	 *      expand: {
  56. 	 *      	// set duration of expand transition to 500ms.
  57. 	 *          duration: 500,
  58. 	 *
  59. 	 *      	// set expand area rate
  60. 	 *          rate: 1
  61. 	 *      },
  62. 	 *
  63. 	 *      width: 10,
  64. 	 *      padAngle: 0.2,
  65. 	 *      startingAngle: 1,
  66. 	 *      title: "Donut Title"
  67. 	 *
  68. 	 *      // when 'arc.needle.show=true' is set, can show current needle value.
  69. 	 *      title: "Needle value:\n{=NEEDLE_VALUE}",
  70. 	 *
  71. 	 *      // title with line break
  72. 	 *      title: "Title1\nTitle2"
  73. 	 *  }
  74. 	 */
  75. 	donut_label_show: true,
  76. 	donut_label_format: <(() => number | string) | undefined>undefined,
  77. 	donut_label_threshold: 0.05,
  78. 	donut_label_ratio: <number | (() => number) | undefined>undefined,
  79. 	donut_width: <number | undefined>undefined,
  80. 	donut_title: "",
  81. 	donut_expand: <boolean | {rate?: number, duration?: number}>{},
  82. 	donut_expand_rate: 0.98,
  83. 	donut_expand_duration: 50,
  84. 	donut_padAngle: 0,
  85. 	donut_startingAngle: 0
  86. };