config/Options/shape/pie.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. /**
  6.  * pie config options
  7.  */
  8. export default {
  9. 	/**
  10. 	 * Set pie options
  11. 	 * @name pie
  12. 	 * @memberof Options
  13. 	 * @type {object}
  14. 	 * @property {object} pie Pie object
  15. 	 * @property {boolean} [pie.label.show=true] Show or hide label on each pie piece.
  16. 	 * @property {Function} [pie.label.format] Set formatter for the label on each pie piece.
  17. 	 * @property {number|Function} [pie.label.ratio=undefined] Set ratio of labels position.
  18. 	 * @property {number} [pie.label.threshold=0.05] Set threshold ratio to show/hide labels.
  19. 	 * @property {boolean|object} [pie.expand=true] Enable or disable expanding pie pieces.
  20. 	 * @property {number} [pie.expand.rate=0.98] Set expand rate.
  21. 	 * @property {number} [pie.expand.duration=50] Set expand transition time in ms.
  22. 	 * @property {number|object} [pie.innerRadius=0] Sets the inner radius of pie arc.
  23. 	 * @property {number|object|undefined} [pie.outerRadius=undefined] Sets the outer radius of pie arc.
  24. 	 * @property {number} [pie.padAngle=0] Set padding between data.
  25. 	 * @property {number} [pie.padding=0] Sets the gap between pie arcs.
  26. 	 * @property {number} [pie.startingAngle=0] Set starting angle where data draws.
  27. 	 * @see [Demo: expand.rate](https://naver.github.io/billboard.js/demo/#PieChartOptions.ExpandRate)
  28. 	 * @see [Demo: innerRadius](https://naver.github.io/billboard.js/demo/#PieChartOptions.InnerRadius)
  29. 	 * @see [Demo: outerRadius](https://naver.github.io/billboard.js/demo/#PieChartOptions.OuterRadius)
  30. 	 * @see [Demo: startingAngle](https://naver.github.io/billboard.js/demo/#PieChartOptions.StartingAngle)
  31. 	 * @example
  32. 	 *  pie: {
  33. 	 *      label: {
  34. 	 *          show: false,
  35. 	 *          format: function(value, ratio, id) {
  36. 	 *              return d3.format("$")(value);
  37. 	 *
  38. 	 *              // to multiline, return with '\n' character
  39. 	 *              // return value +"%\nLine1\n2Line2";
  40. 	 *          },
  41. 	 *
  42. 	 *          // 0.1(10%) ratio value means, the minimum ratio to show text label relative to the total value.
  43. 	 *          // if data value is below than 0.1, text label will be hidden.
  44. 	 *          threshold: 0.1,
  45. 	 *
  46. 	 *          // set ratio callback. Should return ratio value
  47. 	 *          ratio: function(d, radius, h) {
  48. 	 *              ...
  49. 	 *              return ratio;
  50. 	 *          },
  51. 	 *          // or set ratio number
  52. 	 *          ratio: 0.5
  53. 	 *      },
  54. 	 *
  55. 	 *      // disable expand transition for interaction
  56. 	 *      expand: false,
  57. 	 *
  58. 	 *      expand: {
  59. 	 *      	// set duration of expand transition to 500ms.
  60. 	 *          duration: 500,
  61. 	 *
  62. 	 *      	// set expand area rate
  63. 	 *          rate: 1
  64. 	 *      },
  65. 	 *
  66. 	 *      innerRadius: 0,
  67. 	 *
  68. 	 *      // set different innerRadius for each data
  69. 	 *      innerRadius: {
  70. 	 *      	data1: 10,
  71. 	 *      	data2: 0
  72. 	 *      },
  73. 	 *
  74. 	 *      outerRadius: 100,
  75. 	 *
  76. 	 *      // set different outerRadius for each data
  77. 	 *      outerRadius: {
  78. 	 *      	data1: 50,
  79. 	 *      	data2: 100
  80. 	 *      }
  81. 	 *
  82. 	 *      padAngle: 0.1,
  83. 	 *      padding: 0,
  84. 	 *      startingAngle: 1
  85. 	 *  }
  86. 	 */
  87. 	pie_label_show: true,
  88. 	pie_label_format: <(() => number | string) | undefined>undefined,
  89. 	pie_label_ratio: <(() => number) | undefined>undefined,
  90. 	pie_label_threshold: 0.05,
  91. 	pie_expand: <boolean | {rate?: number, duration?: number}>{},
  92. 	pie_expand_rate: 0.98,
  93. 	pie_expand_duration: 50,
  94. 	pie_innerRadius: <number | {[key: string]: number}>0,
  95. 	pie_outerRadius: <number | {[key: string]: number} | undefined>undefined,
  96. 	pie_padAngle: 0,
  97. 	pie_padding: 0,
  98. 	pie_startingAngle: 0
  99. };