config/Options/shape/polar.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. /**
  6.  * polar config options
  7.  */
  8. export default {
  9. 	/**
  10. 	 * Set polar options
  11. 	 * @name polar
  12. 	 * @memberof Options
  13. 	 * @type {object}
  14. 	 * @property {object} polar Polar object
  15. 	 * @property {boolean} [polar.label.show=true] Show or hide label on each polar piece.
  16. 	 * @property {Function} [polar.label.format] Set formatter for the label on each polar piece.
  17. 	 * @property {number} [polar.label.threshold=0.05] Set threshold ratio to show/hide labels.
  18. 	 * @property {number|Function} [polar.label.ratio=undefined] Set ratio of labels position.
  19. 	 * @property {number} [polar.level.depth=3] Set the level depth.
  20. 	 * @property {boolean} [polar.level.show=true] Show or hide level.
  21. 	 * @property {string} [polar.level.text.backgroundColor="#fff"] Set label text's background color.
  22. 	 * @property {Function} [polar.level.text.format] Set format function for the level value.<br>- Default value: `(x) => x % 1 === 0 ? x : x.toFixed(2)`
  23. 	 * @property {boolean} [polar.level.text.show=true] Show or hide level text.
  24. 	 * @property {number} [polar.padAngle=0] Set padding between data.
  25. 	 * @property {number} [polar.padding=0] Sets the gap between pie arcs.
  26. 	 * @property {number} [polar.startingAngle=0] Set starting angle where data draws.
  27. 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Chart.PolarChart)
  28. 	 * @example
  29. 	 *  polar: {
  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. 	 *      level: {
  52. 	 *          depth: 3,
  53. 	 *          max: 500,
  54. 	 *          show: true,
  55. 	 *          text: {
  56. 	 *              format: function(x) {
  57. 	 *                  return x + "%";
  58. 	 *              },
  59. 	 *              show: true,
  60. 	 *              backgroundColor: "red"
  61. 	 *          }
  62. 	 *      },
  63. 	 *      padAngle: 0.1,
  64. 	 *      padding: 0,
  65. 	 *      startingAngle: 1
  66. 	 *  }
  67. 	 */
  68. 	polar_label_show: true,
  69. 	polar_label_format: <(() => number | string) | undefined>undefined,
  70. 	polar_label_threshold: 0.05,
  71. 	polar_label_ratio: <(() => number) | undefined>undefined,
  72. 	polar_level_depth: 3,
  73. 	polar_level_max: <number | undefined>undefined,
  74. 	polar_level_show: true,
  75. 	polar_level_text_backgroundColor: "#fff",
  76. 	polar_level_text_format: (x: number) => (x % 1 === 0 ? x : x.toFixed(2)),
  77. 	polar_level_text_show: true,
  78. 	polar_padAngle: 0,
  79. 	polar_padding: 0,
  80. 	polar_startingAngle: 0
  81. };