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. };