@techie_doubts/tui.chart.2026 4.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (284) hide show
  1. package/README.md +165 -0
  2. package/dist/esm/animator.d.ts +32 -0
  3. package/dist/esm/animator.js +102 -0
  4. package/dist/esm/brushes/axis.d.ts +3 -0
  5. package/dist/esm/brushes/axis.js +21 -0
  6. package/dist/esm/brushes/basic.d.ts +9 -0
  7. package/dist/esm/brushes/basic.js +95 -0
  8. package/dist/esm/brushes/boxPlot.d.ts +2 -0
  9. package/dist/esm/brushes/boxPlot.js +22 -0
  10. package/dist/esm/brushes/circleLegend.d.ts +2 -0
  11. package/dist/esm/brushes/circleLegend.js +26 -0
  12. package/dist/esm/brushes/dataLabel.d.ts +6 -0
  13. package/dist/esm/brushes/dataLabel.js +176 -0
  14. package/dist/esm/brushes/exportMenu.d.ts +2 -0
  15. package/dist/esm/brushes/exportMenu.js +55 -0
  16. package/dist/esm/brushes/gauge.d.ts +2 -0
  17. package/dist/esm/brushes/gauge.js +39 -0
  18. package/dist/esm/brushes/label.d.ts +34 -0
  19. package/dist/esm/brushes/label.js +165 -0
  20. package/dist/esm/brushes/legend.d.ts +7 -0
  21. package/dist/esm/brushes/legend.js +162 -0
  22. package/dist/esm/brushes/lineSeries.d.ts +5 -0
  23. package/dist/esm/brushes/lineSeries.js +41 -0
  24. package/dist/esm/brushes/polygon.d.ts +2 -0
  25. package/dist/esm/brushes/polygon.js +24 -0
  26. package/dist/esm/brushes/resetButton.d.ts +3 -0
  27. package/dist/esm/brushes/resetButton.js +112 -0
  28. package/dist/esm/brushes/scatterSeries.d.ts +2 -0
  29. package/dist/esm/brushes/scatterSeries.js +125 -0
  30. package/dist/esm/brushes/sector.d.ts +2 -0
  31. package/dist/esm/brushes/sector.js +54 -0
  32. package/dist/esm/brushes/spectrumLegend.d.ts +14 -0
  33. package/dist/esm/brushes/spectrumLegend.js +199 -0
  34. package/dist/esm/charts/areaChart.d.ts +254 -0
  35. package/dist/esm/charts/areaChart.js +358 -0
  36. package/dist/esm/charts/barChart.d.ts +203 -0
  37. package/dist/esm/charts/barChart.js +300 -0
  38. package/dist/esm/charts/boxPlotChart.d.ts +209 -0
  39. package/dist/esm/charts/boxPlotChart.js +288 -0
  40. package/dist/esm/charts/bubbleChart.d.ts +188 -0
  41. package/dist/esm/charts/bubbleChart.js +263 -0
  42. package/dist/esm/charts/bulletChart.d.ts +199 -0
  43. package/dist/esm/charts/bulletChart.js +278 -0
  44. package/dist/esm/charts/chart.d.ts +133 -0
  45. package/dist/esm/charts/chart.js +484 -0
  46. package/dist/esm/charts/columnChart.d.ts +205 -0
  47. package/dist/esm/charts/columnChart.js +299 -0
  48. package/dist/esm/charts/columnLineChart.d.ts +271 -0
  49. package/dist/esm/charts/columnLineChart.js +386 -0
  50. package/dist/esm/charts/gaugeChart.d.ts +191 -0
  51. package/dist/esm/charts/gaugeChart.js +279 -0
  52. package/dist/esm/charts/heatmapChart.d.ts +199 -0
  53. package/dist/esm/charts/heatmapChart.js +292 -0
  54. package/dist/esm/charts/lineAreaChart.d.ts +271 -0
  55. package/dist/esm/charts/lineAreaChart.js +374 -0
  56. package/dist/esm/charts/lineChart.d.ts +253 -0
  57. package/dist/esm/charts/lineChart.js +360 -0
  58. package/dist/esm/charts/lineScatterChart.d.ts +200 -0
  59. package/dist/esm/charts/lineScatterChart.js +285 -0
  60. package/dist/esm/charts/nestedPieChart.d.ts +192 -0
  61. package/dist/esm/charts/nestedPieChart.js +268 -0
  62. package/dist/esm/charts/pieChart.d.ts +156 -0
  63. package/dist/esm/charts/pieChart.js +224 -0
  64. package/dist/esm/charts/radarChart.d.ts +169 -0
  65. package/dist/esm/charts/radarChart.js +240 -0
  66. package/dist/esm/charts/radialBarChart.d.ts +172 -0
  67. package/dist/esm/charts/radialBarChart.js +251 -0
  68. package/dist/esm/charts/scatterChart.d.ts +184 -0
  69. package/dist/esm/charts/scatterChart.js +279 -0
  70. package/dist/esm/charts/treemapChart.d.ts +166 -0
  71. package/dist/esm/charts/treemapChart.js +239 -0
  72. package/dist/esm/component/areaSeries.d.ts +96 -0
  73. package/dist/esm/component/areaSeries.js +474 -0
  74. package/dist/esm/component/axis.d.ts +40 -0
  75. package/dist/esm/component/axis.js +176 -0
  76. package/dist/esm/component/axisTitle.d.ts +25 -0
  77. package/dist/esm/component/axisTitle.js +67 -0
  78. package/dist/esm/component/axisUsingCenterY.d.ts +32 -0
  79. package/dist/esm/component/axisUsingCenterY.js +175 -0
  80. package/dist/esm/component/backButton.d.ts +13 -0
  81. package/dist/esm/component/backButton.js +26 -0
  82. package/dist/esm/component/background.d.ts +10 -0
  83. package/dist/esm/component/background.js +15 -0
  84. package/dist/esm/component/boxPlotSeries.d.ts +126 -0
  85. package/dist/esm/component/boxPlotSeries.js +410 -0
  86. package/dist/esm/component/boxSeries.d.ts +211 -0
  87. package/dist/esm/component/boxSeries.js +603 -0
  88. package/dist/esm/component/boxStackSeries.d.ts +62 -0
  89. package/dist/esm/component/boxStackSeries.js +447 -0
  90. package/dist/esm/component/bubbleSeries.d.ts +35 -0
  91. package/dist/esm/component/bubbleSeries.js +174 -0
  92. package/dist/esm/component/bulletSeries.d.ts +89 -0
  93. package/dist/esm/component/bulletSeries.js +392 -0
  94. package/dist/esm/component/circleLegend.d.ts +10 -0
  95. package/dist/esm/component/circleLegend.js +37 -0
  96. package/dist/esm/component/component.d.ts +64 -0
  97. package/dist/esm/component/component.js +170 -0
  98. package/dist/esm/component/componentManager.d.ts +23 -0
  99. package/dist/esm/component/componentManager.js +45 -0
  100. package/dist/esm/component/dataLabels.d.ts +23 -0
  101. package/dist/esm/component/dataLabels.js +134 -0
  102. package/dist/esm/component/exportMenu.d.ts +38 -0
  103. package/dist/esm/component/exportMenu.js +147 -0
  104. package/dist/esm/component/gaugeSeries.d.ts +160 -0
  105. package/dist/esm/component/gaugeSeries.js +447 -0
  106. package/dist/esm/component/heatmapSeries.d.ts +64 -0
  107. package/dist/esm/component/heatmapSeries.js +152 -0
  108. package/dist/esm/component/hoveredSeries.d.ts +27 -0
  109. package/dist/esm/component/hoveredSeries.js +95 -0
  110. package/dist/esm/component/legend.d.ts +26 -0
  111. package/dist/esm/component/legend.js +149 -0
  112. package/dist/esm/component/lineSeries.d.ts +69 -0
  113. package/dist/esm/component/lineSeries.js +319 -0
  114. package/dist/esm/component/noDataText.d.ts +9 -0
  115. package/dist/esm/component/noDataText.js +31 -0
  116. package/dist/esm/component/pieSeries.d.ts +137 -0
  117. package/dist/esm/component/pieSeries.js +390 -0
  118. package/dist/esm/component/plot.d.ts +37 -0
  119. package/dist/esm/component/plot.js +163 -0
  120. package/dist/esm/component/radarSeries.d.ts +85 -0
  121. package/dist/esm/component/radarSeries.js +222 -0
  122. package/dist/esm/component/radialAxis.d.ts +26 -0
  123. package/dist/esm/component/radialAxis.js +210 -0
  124. package/dist/esm/component/radialBarSeries.d.ts +111 -0
  125. package/dist/esm/component/radialBarSeries.js +349 -0
  126. package/dist/esm/component/radialPlot.d.ts +55 -0
  127. package/dist/esm/component/radialPlot.js +188 -0
  128. package/dist/esm/component/rangeSelection.d.ts +61 -0
  129. package/dist/esm/component/rangeSelection.js +150 -0
  130. package/dist/esm/component/resetButton.d.ts +13 -0
  131. package/dist/esm/component/resetButton.js +26 -0
  132. package/dist/esm/component/scatterSeries.d.ts +34 -0
  133. package/dist/esm/component/scatterSeries.js +159 -0
  134. package/dist/esm/component/selectedSeries.d.ts +26 -0
  135. package/dist/esm/component/selectedSeries.js +109 -0
  136. package/dist/esm/component/spectrumLegend.d.ts +15 -0
  137. package/dist/esm/component/spectrumLegend.js +76 -0
  138. package/dist/esm/component/title.d.ts +12 -0
  139. package/dist/esm/component/title.js +53 -0
  140. package/dist/esm/component/tooltip.d.ts +41 -0
  141. package/dist/esm/component/tooltip.js +131 -0
  142. package/dist/esm/component/treemapSeries.d.ts +57 -0
  143. package/dist/esm/component/treemapSeries.js +191 -0
  144. package/dist/esm/component/zeroAxis.d.ts +9 -0
  145. package/dist/esm/component/zeroAxis.js +49 -0
  146. package/dist/esm/eventEmitter.d.ts +8 -0
  147. package/dist/esm/eventEmitter.js +15 -0
  148. package/dist/esm/helpers/arrayUtil.d.ts +10 -0
  149. package/dist/esm/helpers/arrayUtil.js +54 -0
  150. package/dist/esm/helpers/axes.d.ts +67 -0
  151. package/dist/esm/helpers/axes.js +345 -0
  152. package/dist/esm/helpers/boxSeries.d.ts +5 -0
  153. package/dist/esm/helpers/boxSeries.js +71 -0
  154. package/dist/esm/helpers/calculator.d.ts +19 -0
  155. package/dist/esm/helpers/calculator.js +153 -0
  156. package/dist/esm/helpers/color.d.ts +153 -0
  157. package/dist/esm/helpers/color.js +218 -0
  158. package/dist/esm/helpers/colorSpectrum.d.ts +5 -0
  159. package/dist/esm/helpers/colorSpectrum.js +17 -0
  160. package/dist/esm/helpers/coordinate.d.ts +9 -0
  161. package/dist/esm/helpers/coordinate.js +51 -0
  162. package/dist/esm/helpers/dataLabels.d.ts +36 -0
  163. package/dist/esm/helpers/dataLabels.js +405 -0
  164. package/dist/esm/helpers/dom.d.ts +2 -0
  165. package/dist/esm/helpers/dom.js +8 -0
  166. package/dist/esm/helpers/downloader.d.ts +7 -0
  167. package/dist/esm/helpers/downloader.js +287 -0
  168. package/dist/esm/helpers/formatDate.d.ts +16 -0
  169. package/dist/esm/helpers/formatDate.js +140 -0
  170. package/dist/esm/helpers/geometric.d.ts +3 -0
  171. package/dist/esm/helpers/geometric.js +35 -0
  172. package/dist/esm/helpers/googleAnalytics.d.ts +1 -0
  173. package/dist/esm/helpers/googleAnalytics.js +39 -0
  174. package/dist/esm/helpers/htmlSanitizer.d.ts +1 -0
  175. package/dist/esm/helpers/htmlSanitizer.js +86 -0
  176. package/dist/esm/helpers/legend.d.ts +9 -0
  177. package/dist/esm/helpers/legend.js +47 -0
  178. package/dist/esm/helpers/pieSeries.d.ts +15 -0
  179. package/dist/esm/helpers/pieSeries.js +72 -0
  180. package/dist/esm/helpers/plot.d.ts +2 -0
  181. package/dist/esm/helpers/plot.js +4 -0
  182. package/dist/esm/helpers/radarSeries.d.ts +1 -0
  183. package/dist/esm/helpers/radarSeries.js +7 -0
  184. package/dist/esm/helpers/range.d.ts +6 -0
  185. package/dist/esm/helpers/range.js +16 -0
  186. package/dist/esm/helpers/responders.d.ts +37 -0
  187. package/dist/esm/helpers/responders.js +197 -0
  188. package/dist/esm/helpers/sector.d.ts +55 -0
  189. package/dist/esm/helpers/sector.js +117 -0
  190. package/dist/esm/helpers/squarifier.d.ts +8 -0
  191. package/dist/esm/helpers/squarifier.js +110 -0
  192. package/dist/esm/helpers/style.d.ts +14 -0
  193. package/dist/esm/helpers/style.js +48 -0
  194. package/dist/esm/helpers/theme.d.ts +58 -0
  195. package/dist/esm/helpers/theme.js +557 -0
  196. package/dist/esm/helpers/tooltip.d.ts +2 -0
  197. package/dist/esm/helpers/tooltip.js +18 -0
  198. package/dist/esm/helpers/tooltipTemplate.d.ts +21 -0
  199. package/dist/esm/helpers/tooltipTemplate.js +147 -0
  200. package/dist/esm/helpers/utils.d.ts +42 -0
  201. package/dist/esm/helpers/utils.js +268 -0
  202. package/dist/esm/helpers/validation.d.ts +6 -0
  203. package/dist/esm/helpers/validation.js +16 -0
  204. package/dist/esm/index.d.ts +40 -0
  205. package/dist/esm/index.js +75 -0
  206. package/dist/esm/message.d.ts +11 -0
  207. package/dist/esm/message.js +11 -0
  208. package/dist/esm/painter.d.ts +27 -0
  209. package/dist/esm/painter.js +88 -0
  210. package/dist/esm/responderDetectors.d.ts +6 -0
  211. package/dist/esm/responderDetectors.js +124 -0
  212. package/dist/esm/scale/coordinateScaleCalculator.d.ts +24 -0
  213. package/dist/esm/scale/coordinateScaleCalculator.js +174 -0
  214. package/dist/esm/scale/datetimeScaleCalculator.d.ts +20 -0
  215. package/dist/esm/scale/datetimeScaleCalculator.js +59 -0
  216. package/dist/esm/store/axes.d.ts +30 -0
  217. package/dist/esm/store/axes.js +282 -0
  218. package/dist/esm/store/category.d.ts +4 -0
  219. package/dist/esm/store/category.js +73 -0
  220. package/dist/esm/store/colorValueScale.d.ts +3 -0
  221. package/dist/esm/store/colorValueScale.js +56 -0
  222. package/dist/esm/store/dataRange.d.ts +4 -0
  223. package/dist/esm/store/dataRange.js +170 -0
  224. package/dist/esm/store/gaugeAxes.d.ts +4 -0
  225. package/dist/esm/store/gaugeAxes.js +175 -0
  226. package/dist/esm/store/heatmapAxes.d.ts +3 -0
  227. package/dist/esm/store/heatmapAxes.js +98 -0
  228. package/dist/esm/store/heatmapSeriesData.d.ts +3 -0
  229. package/dist/esm/store/heatmapSeriesData.js +34 -0
  230. package/dist/esm/store/layout.d.ts +12 -0
  231. package/dist/esm/store/layout.js +487 -0
  232. package/dist/esm/store/legend.d.ts +3 -0
  233. package/dist/esm/store/legend.js +435 -0
  234. package/dist/esm/store/nestedPieSeriesData.d.ts +3 -0
  235. package/dist/esm/store/nestedPieSeriesData.js +49 -0
  236. package/dist/esm/store/options.d.ts +3 -0
  237. package/dist/esm/store/options.js +62 -0
  238. package/dist/esm/store/plot.d.ts +3 -0
  239. package/dist/esm/store/plot.js +102 -0
  240. package/dist/esm/store/radialAxes.d.ts +8 -0
  241. package/dist/esm/store/radialAxes.js +199 -0
  242. package/dist/esm/store/reactive.d.ts +11 -0
  243. package/dist/esm/store/reactive.js +196 -0
  244. package/dist/esm/store/root.d.ts +3 -0
  245. package/dist/esm/store/root.js +46 -0
  246. package/dist/esm/store/scale.d.ts +3 -0
  247. package/dist/esm/store/scale.js +102 -0
  248. package/dist/esm/store/seriesData.d.ts +3 -0
  249. package/dist/esm/store/seriesData.js +299 -0
  250. package/dist/esm/store/stackSeriesData.d.ts +8 -0
  251. package/dist/esm/store/stackSeriesData.js +192 -0
  252. package/dist/esm/store/store.d.ts +20 -0
  253. package/dist/esm/store/store.js +112 -0
  254. package/dist/esm/store/theme.d.ts +3 -0
  255. package/dist/esm/store/theme.js +139 -0
  256. package/dist/esm/store/treemapSeriesData.d.ts +4 -0
  257. package/dist/esm/store/treemapSeriesData.js +93 -0
  258. package/dist/td-chart.css +127 -0
  259. package/dist/td-chart.js +41463 -0
  260. package/dist/td-chart.min.css +6 -0
  261. package/dist/td-chart.min.js +9 -0
  262. package/package.json +112 -0
  263. package/types/brushes.d.ts +30 -0
  264. package/types/charts.d.ts +152 -0
  265. package/types/components/axis.d.ts +71 -0
  266. package/types/components/circleLegend.d.ts +9 -0
  267. package/types/components/dataLabels.d.ts +119 -0
  268. package/types/components/exportMenu.d.ts +14 -0
  269. package/types/components/legend.d.ts +27 -0
  270. package/types/components/plot.d.ts +8 -0
  271. package/types/components/radialAxis.d.ts +22 -0
  272. package/types/components/radialPlot.d.ts +11 -0
  273. package/types/components/rangeSelection.d.ts +3 -0
  274. package/types/components/resetButton.d.ts +13 -0
  275. package/types/components/series.d.ts +386 -0
  276. package/types/components/spectrumLegend.d.ts +25 -0
  277. package/types/components/tooltip.d.ts +58 -0
  278. package/types/components/zoom.d.ts +3 -0
  279. package/types/eventEmitter.d.ts +12 -0
  280. package/types/index.d.ts +615 -0
  281. package/types/options.d.ts +833 -0
  282. package/types/resizeObserver.d.ts +54 -0
  283. package/types/store/store.d.ts +564 -0
  284. package/types/theme.d.ts +670 -0
@@ -0,0 +1,169 @@
1
+ import Chart from "./chart";
2
+ import { RadarChartOptions, RadarSeriesData, RadarSeriesInput } from "../../types/options";
3
+ import { RadarChartProps, SelectSeriesInfo } from "../../types/charts";
4
+ /**
5
+ * @class
6
+ * @classdesc Radar Chart
7
+ * @param {Object} props
8
+ * @param {HTMLElement} props.el - The target element to create chart.
9
+ * @param {Object} props.data - Data for making Radar Chart.
10
+ * @param {Array<string>} props.data.categories - Categories.
11
+ * @param {Array<Object>} props.data.series - Series data.
12
+ * @param {string} props.data.series.name - Series name.
13
+ * @param {Array<number>} props.data.series.data - Series data.
14
+ * @param {Object} [props.options] - Options for making Radar Chart.
15
+ * @param {Object} [props.options.chart]
16
+ * @param {string|Object} [props.options.chart.title] - Chart title text or options.
17
+ * @param {string} [props.options.chart.title.text] - Chart title text.
18
+ * @param {number} [props.options.chart.title.offsetX] - Offset value to move title horizontally.
19
+ * @param {number} [props.options.chart.title.offsetY] - Offset value to move title vertically.
20
+ * @param {string} [props.options.chart.title.align] - Chart text align. 'left', 'right', 'center' is available.
21
+ * @param {boolean|Object} [props.options.chart.animation] - Whether to use animation and duration when rendering the initial chart.
22
+ * @param {number|string} [props.options.chart.width] - Chart width. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the width of the parent container is followed.
23
+ * @param {number|string} [props.options.chart.height] - Chart height. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the height of the parent container is followed.
24
+ * @param {Object} [props.options.series]
25
+ * @param {boolean} [props.options.series.selectable=false] - Whether to make selectable series or not.
26
+ * @param {boolean} [props.options.series.showDot=false] - Whether to show dot or not.
27
+ * @param {boolean} [props.options.series.showArea=false] - Whether to fill area or not.
28
+ * @param {Object} [props.options.circularAxis]
29
+ * @param {Object} [props.options.circularAxis.tick] - Option to adjust tick interval.
30
+ * @param {Object} [props.options.circularAxis.label] - Option to adjust label interval.
31
+ * @param {Object} [props.options.verticalAxis]
32
+ * @param {Object} [props.options.verticalAxis.tick] - Option to adjust tick interval.
33
+ * @param {Object} [props.options.verticalAxis.label] - Option to adjust label interval.
34
+ * @param {Object} [props.options.verticalAxis.scale] - Option to adjust axis minimum, maximum, step size.
35
+ * @param {Object} [props.options.plot]
36
+ * @param {number} [props.options.plot.width] - Width of plot.
37
+ * @param {number} [props.options.plot.height] - Height of plot.
38
+ * @param {boolean} [props.options.plot.type] - Radar plot type. 'spiderweb', 'circle' is available.
39
+ * @param {Object} [props.options.legend]
40
+ * @param {string} [props.options.legend.align] - Legend align. 'top', 'bottom', 'right', 'left' is available.
41
+ * @param {string} [props.options.legend.showCheckbox] - Whether to show checkbox.
42
+ * @param {boolean} [props.options.legend.visible] - Whether to show legend.
43
+ * @param {number} [props.options.legend.width] - Width of legend.
44
+ * @param {Object} [props.options.legend.item] - `width` and `overflow` options of the legend item. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Legend guide} on github.
45
+ * @param {Object} [props.options.exportMenu]
46
+ * @param {boolean} [props.options.exportMenu.visible] - Whether to show export menu.
47
+ * @param {string} [props.options.exportMenu.filename] - File name applied when downloading.
48
+ * @param {Object} [props.options.tooltip]
49
+ * @param {number} [props.options.tooltip.offsetX] - Offset value to move title horizontally.
50
+ * @param {number} [props.options.tooltip.offsetY] - Offset value to move title vertically.
51
+ * @param {Function} [props.options.tooltip.formatter] - Function to format data value.
52
+ * @param {Function} [props.options.tooltip.template] - Function to create custom template. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Tooltip guide} on github.
53
+ * @param {Object} [props.options.responsive] - Rules for changing chart options. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Responsive guide} on github.
54
+ * @param {boolean|Object} [props.options.responsive.animation] - Animation duration when the chart is modified.
55
+ * @param {Array<Object>} [props.options.responsive.rules] - Rules for the Chart to Respond.
56
+ * @param {Object} [props.options.lang] - Options for changing the text displayed on the chart or i18n languages.
57
+ * @param {Object} [props.options.lang.noData] - No Data Layer Text.
58
+ * @param {Object} [props.options.theme] - Chart theme options. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Radar Chart guide} on github.
59
+ * @param {Object} [props.options.theme.chart] - Chart font theme.
60
+ * @param {Object} [props.options.theme.noData] - No Data Layer Text theme.
61
+ * @param {Object} [props.options.theme.series] - Series theme.
62
+ * @param {Object} [props.options.theme.title] - Title theme.
63
+ * @param {Object} [props.options.theme.circularAxis] - Circular Axis theme.
64
+ * @param {Object} [props.options.theme.verticalAxis] - Vertical Axis theme.
65
+ * @param {Object} [props.options.theme.legend] - Legend theme.
66
+ * @param {Object} [props.options.theme.tooltip] - Tooltip theme.
67
+ * @param {Object} [props.options.theme.plot] - Plot theme.
68
+ * @param {Object} [props.options.theme.exportMenu] - ExportMenu theme.
69
+ * @extends Chart
70
+ */
71
+ export default class RadarChart extends Chart<RadarChartOptions> {
72
+ constructor({ el, options, data }: RadarChartProps);
73
+ protected initialize(): void;
74
+ /**
75
+ * Add data.
76
+ * @param {Array<number>} data - Array of data to be added.
77
+ * @param {string} category - Category to be added.
78
+ * @api
79
+ * @example
80
+ * chart.addData([10, 20], '6');
81
+ */
82
+ addData(data: number[], category: string): void;
83
+ /**
84
+ * Add series.
85
+ * @param {Object} data - Data to be added.
86
+ * @param {string} data.name - Series name.
87
+ * @param {Array<number>} data.data - Array of data to be added.
88
+ * @api
89
+ * @example
90
+ * chart.addSeries({
91
+ * name: 'newSeries',
92
+ * data: [10, 100, 50, 40, 70, 55, 33, 70, 90, 110],
93
+ * });
94
+ */
95
+ addSeries(data: RadarSeriesInput): void;
96
+ /**
97
+ * Convert the chart data to new data.
98
+ * @param {Object} data - Data to be set.
99
+ * @api
100
+ * @example
101
+ * chart.setData({
102
+ * categories: ['1', '2', '3'],
103
+ * series: [
104
+ * {
105
+ * name: 'new series',
106
+ * data: [1, 2, 3],
107
+ * },
108
+ * {
109
+ * name: 'new series2',
110
+ * data: [4, 5, 6],
111
+ * }
112
+ * ]
113
+ * });
114
+ */
115
+ setData(data: RadarSeriesData): void;
116
+ /**
117
+ * Convert the chart options to new options.
118
+ * @param {Object} options - Chart options.
119
+ * @api
120
+ * @example
121
+ * chart.setOptions({
122
+ * chart: {
123
+ * width: 500,
124
+ * height: 'auto',
125
+ * title: 'Energy Usage',
126
+ * },
127
+ * series: {
128
+ * selectable: true,
129
+ * },
130
+ * tooltip: {
131
+ * formatter: (value) => `${value}kWh`,
132
+ * },
133
+ * });
134
+ */
135
+ setOptions(options: RadarChartOptions): void;
136
+ /**
137
+ * Update chart options.
138
+ * @param {Object} options - Chart options.
139
+ * @api
140
+ * @example
141
+ * chart.updateOptions({
142
+ * chart: {
143
+ * height: 'auto',
144
+ * title: 'Energy Usage',
145
+ * },
146
+ * tooltip: {
147
+ * formatter: (value) => `${value}kWh`,
148
+ * },
149
+ * });
150
+ */
151
+ updateOptions(options: RadarChartOptions): void;
152
+ /**
153
+ * Show tooltip.
154
+ * @param {Object} seriesInfo - Information of the series for the tooltip to be displayed.
155
+ * @param {number} seriesInfo.seriesIndex - Index of series.
156
+ * @param {number} seriesInfo.index - Index of data within series.
157
+ * @api
158
+ * @example
159
+ * chart.showTooltip({index: 1, seriesIndex: 2});
160
+ */
161
+ showTooltip(seriesInfo: SelectSeriesInfo): void;
162
+ /**
163
+ * Hide tooltip.
164
+ * @api
165
+ * @example
166
+ * chart.hideTooltip();
167
+ */
168
+ hideTooltip(): void;
169
+ }
@@ -0,0 +1,240 @@
1
+ import Chart from "./chart";
2
+ import dataRange from "../store/dataRange";
3
+ import scale from "../store/scale";
4
+ import radialAxes from "../store/radialAxes";
5
+ import Legend from "../component/legend";
6
+ import RadarSeries from "../component/radarSeries";
7
+ import RadialPlot from "../component/radialPlot";
8
+ import Title from "../component/title";
9
+ import ExportMenu from "../component/exportMenu";
10
+ import SelectedSeries from "../component/selectedSeries";
11
+ import HoveredSeries from "../component/hoveredSeries";
12
+ import Tooltip from "../component/tooltip";
13
+ import RadialAxis from "../component/radialAxis";
14
+ import Background from "../component/background";
15
+ import NoDataText from "../component/noDataText";
16
+ import * as basicBrush from "../brushes/basic";
17
+ import * as legendBrush from "../brushes/legend";
18
+ import * as labelBrush from "../brushes/label";
19
+ import * as exportMenuBrush from "../brushes/exportMenu";
20
+ import * as polygonBrush from "../brushes/polygon";
21
+ import * as axisBrush from "../brushes/axis";
22
+ import * as lineSeriesBrush from "../brushes/lineSeries";
23
+ /**
24
+ * @class
25
+ * @classdesc Radar Chart
26
+ * @param {Object} props
27
+ * @param {HTMLElement} props.el - The target element to create chart.
28
+ * @param {Object} props.data - Data for making Radar Chart.
29
+ * @param {Array<string>} props.data.categories - Categories.
30
+ * @param {Array<Object>} props.data.series - Series data.
31
+ * @param {string} props.data.series.name - Series name.
32
+ * @param {Array<number>} props.data.series.data - Series data.
33
+ * @param {Object} [props.options] - Options for making Radar Chart.
34
+ * @param {Object} [props.options.chart]
35
+ * @param {string|Object} [props.options.chart.title] - Chart title text or options.
36
+ * @param {string} [props.options.chart.title.text] - Chart title text.
37
+ * @param {number} [props.options.chart.title.offsetX] - Offset value to move title horizontally.
38
+ * @param {number} [props.options.chart.title.offsetY] - Offset value to move title vertically.
39
+ * @param {string} [props.options.chart.title.align] - Chart text align. 'left', 'right', 'center' is available.
40
+ * @param {boolean|Object} [props.options.chart.animation] - Whether to use animation and duration when rendering the initial chart.
41
+ * @param {number|string} [props.options.chart.width] - Chart width. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the width of the parent container is followed.
42
+ * @param {number|string} [props.options.chart.height] - Chart height. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the height of the parent container is followed.
43
+ * @param {Object} [props.options.series]
44
+ * @param {boolean} [props.options.series.selectable=false] - Whether to make selectable series or not.
45
+ * @param {boolean} [props.options.series.showDot=false] - Whether to show dot or not.
46
+ * @param {boolean} [props.options.series.showArea=false] - Whether to fill area or not.
47
+ * @param {Object} [props.options.circularAxis]
48
+ * @param {Object} [props.options.circularAxis.tick] - Option to adjust tick interval.
49
+ * @param {Object} [props.options.circularAxis.label] - Option to adjust label interval.
50
+ * @param {Object} [props.options.verticalAxis]
51
+ * @param {Object} [props.options.verticalAxis.tick] - Option to adjust tick interval.
52
+ * @param {Object} [props.options.verticalAxis.label] - Option to adjust label interval.
53
+ * @param {Object} [props.options.verticalAxis.scale] - Option to adjust axis minimum, maximum, step size.
54
+ * @param {Object} [props.options.plot]
55
+ * @param {number} [props.options.plot.width] - Width of plot.
56
+ * @param {number} [props.options.plot.height] - Height of plot.
57
+ * @param {boolean} [props.options.plot.type] - Radar plot type. 'spiderweb', 'circle' is available.
58
+ * @param {Object} [props.options.legend]
59
+ * @param {string} [props.options.legend.align] - Legend align. 'top', 'bottom', 'right', 'left' is available.
60
+ * @param {string} [props.options.legend.showCheckbox] - Whether to show checkbox.
61
+ * @param {boolean} [props.options.legend.visible] - Whether to show legend.
62
+ * @param {number} [props.options.legend.width] - Width of legend.
63
+ * @param {Object} [props.options.legend.item] - `width` and `overflow` options of the legend item. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Legend guide} on github.
64
+ * @param {Object} [props.options.exportMenu]
65
+ * @param {boolean} [props.options.exportMenu.visible] - Whether to show export menu.
66
+ * @param {string} [props.options.exportMenu.filename] - File name applied when downloading.
67
+ * @param {Object} [props.options.tooltip]
68
+ * @param {number} [props.options.tooltip.offsetX] - Offset value to move title horizontally.
69
+ * @param {number} [props.options.tooltip.offsetY] - Offset value to move title vertically.
70
+ * @param {Function} [props.options.tooltip.formatter] - Function to format data value.
71
+ * @param {Function} [props.options.tooltip.template] - Function to create custom template. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Tooltip guide} on github.
72
+ * @param {Object} [props.options.responsive] - Rules for changing chart options. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Responsive guide} on github.
73
+ * @param {boolean|Object} [props.options.responsive.animation] - Animation duration when the chart is modified.
74
+ * @param {Array<Object>} [props.options.responsive.rules] - Rules for the Chart to Respond.
75
+ * @param {Object} [props.options.lang] - Options for changing the text displayed on the chart or i18n languages.
76
+ * @param {Object} [props.options.lang.noData] - No Data Layer Text.
77
+ * @param {Object} [props.options.theme] - Chart theme options. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Radar Chart guide} on github.
78
+ * @param {Object} [props.options.theme.chart] - Chart font theme.
79
+ * @param {Object} [props.options.theme.noData] - No Data Layer Text theme.
80
+ * @param {Object} [props.options.theme.series] - Series theme.
81
+ * @param {Object} [props.options.theme.title] - Title theme.
82
+ * @param {Object} [props.options.theme.circularAxis] - Circular Axis theme.
83
+ * @param {Object} [props.options.theme.verticalAxis] - Vertical Axis theme.
84
+ * @param {Object} [props.options.theme.legend] - Legend theme.
85
+ * @param {Object} [props.options.theme.tooltip] - Tooltip theme.
86
+ * @param {Object} [props.options.theme.plot] - Plot theme.
87
+ * @param {Object} [props.options.theme.exportMenu] - ExportMenu theme.
88
+ * @extends Chart
89
+ */
90
+ export default class RadarChart extends Chart {
91
+ constructor({ el, options, data }) {
92
+ super({
93
+ el,
94
+ options,
95
+ series: {
96
+ radar: data.series,
97
+ },
98
+ categories: data.categories,
99
+ modules: [dataRange, scale, radialAxes],
100
+ });
101
+ }
102
+ initialize() {
103
+ super.initialize();
104
+ this.componentManager.add(Background);
105
+ this.componentManager.add(Title);
106
+ this.componentManager.add(Legend);
107
+ this.componentManager.add(RadialPlot);
108
+ this.componentManager.add(RadialAxis);
109
+ this.componentManager.add(RadarSeries);
110
+ this.componentManager.add(ExportMenu, { chartEl: this.el });
111
+ this.componentManager.add(HoveredSeries);
112
+ this.componentManager.add(SelectedSeries);
113
+ this.componentManager.add(Tooltip, { chartEl: this.el });
114
+ this.componentManager.add(NoDataText);
115
+ this.painter.addGroups([
116
+ basicBrush,
117
+ legendBrush,
118
+ labelBrush,
119
+ exportMenuBrush,
120
+ polygonBrush,
121
+ axisBrush,
122
+ lineSeriesBrush,
123
+ ]);
124
+ }
125
+ /**
126
+ * Add data.
127
+ * @param {Array<number>} data - Array of data to be added.
128
+ * @param {string} category - Category to be added.
129
+ * @api
130
+ * @example
131
+ * chart.addData([10, 20], '6');
132
+ */
133
+ addData(data, category) {
134
+ this.animationControlFlag.updating = true;
135
+ this.resetSeries();
136
+ this.store.dispatch('addData', { data, category });
137
+ }
138
+ /**
139
+ * Add series.
140
+ * @param {Object} data - Data to be added.
141
+ * @param {string} data.name - Series name.
142
+ * @param {Array<number>} data.data - Array of data to be added.
143
+ * @api
144
+ * @example
145
+ * chart.addSeries({
146
+ * name: 'newSeries',
147
+ * data: [10, 100, 50, 40, 70, 55, 33, 70, 90, 110],
148
+ * });
149
+ */
150
+ addSeries(data) {
151
+ this.resetSeries();
152
+ this.store.dispatch('addSeries', { data });
153
+ }
154
+ /**
155
+ * Convert the chart data to new data.
156
+ * @param {Object} data - Data to be set.
157
+ * @api
158
+ * @example
159
+ * chart.setData({
160
+ * categories: ['1', '2', '3'],
161
+ * series: [
162
+ * {
163
+ * name: 'new series',
164
+ * data: [1, 2, 3],
165
+ * },
166
+ * {
167
+ * name: 'new series2',
168
+ * data: [4, 5, 6],
169
+ * }
170
+ * ]
171
+ * });
172
+ */
173
+ setData(data) {
174
+ const { categories, series } = data;
175
+ this.resetSeries();
176
+ this.store.dispatch('setData', { series: { radar: series }, categories });
177
+ }
178
+ /**
179
+ * Convert the chart options to new options.
180
+ * @param {Object} options - Chart options.
181
+ * @api
182
+ * @example
183
+ * chart.setOptions({
184
+ * chart: {
185
+ * width: 500,
186
+ * height: 'auto',
187
+ * title: 'Energy Usage',
188
+ * },
189
+ * series: {
190
+ * selectable: true,
191
+ * },
192
+ * tooltip: {
193
+ * formatter: (value) => `${value}kWh`,
194
+ * },
195
+ * });
196
+ */
197
+ setOptions(options) {
198
+ this.dispatchOptionsEvent('initOptions', options);
199
+ }
200
+ /**
201
+ * Update chart options.
202
+ * @param {Object} options - Chart options.
203
+ * @api
204
+ * @example
205
+ * chart.updateOptions({
206
+ * chart: {
207
+ * height: 'auto',
208
+ * title: 'Energy Usage',
209
+ * },
210
+ * tooltip: {
211
+ * formatter: (value) => `${value}kWh`,
212
+ * },
213
+ * });
214
+ */
215
+ updateOptions(options) {
216
+ this.resetSeries();
217
+ this.dispatchOptionsEvent('updateOptions', options);
218
+ }
219
+ /**
220
+ * Show tooltip.
221
+ * @param {Object} seriesInfo - Information of the series for the tooltip to be displayed.
222
+ * @param {number} seriesInfo.seriesIndex - Index of series.
223
+ * @param {number} seriesInfo.index - Index of data within series.
224
+ * @api
225
+ * @example
226
+ * chart.showTooltip({index: 1, seriesIndex: 2});
227
+ */
228
+ showTooltip(seriesInfo) {
229
+ this.eventBus.emit('showTooltip', Object.assign(Object.assign({}, seriesInfo), { state: this.store.state }));
230
+ }
231
+ /**
232
+ * Hide tooltip.
233
+ * @api
234
+ * @example
235
+ * chart.hideTooltip();
236
+ */
237
+ hideTooltip() {
238
+ this.eventBus.emit('hideTooltip');
239
+ }
240
+ }
@@ -0,0 +1,172 @@
1
+ import Chart from "./chart";
2
+ import { RadialBarChartOptions, RadialBarSeriesData, RadialBarSeriesType } from "../../types/options";
3
+ import { RadialBarChartProps, SelectSeriesInfo } from "../../types/charts";
4
+ /**
5
+ * @class
6
+ * @classdesc RadialBar Chart
7
+ * @param {Object} props
8
+ * @param {HTMLElement} props.el - The target element to create chart.
9
+ * @param {Object} props.data - Data for making RadialBar Chart.
10
+ * @param {Array<string>} [props.data.categories] - Categories.
11
+ * @param {Array<Object>} props.data.series - Series data.
12
+ * @param {string} props.data.series.name - Series name.
13
+ * @param {number} props.data.series.data - Series data.
14
+ * @param {Object} [props.options] - Options for making RadialBar Chart.
15
+ * @param {Object} [props.options.chart]
16
+ * @param {string|Object} [props.options.chart.title] - Chart title text or options.
17
+ * @param {string} [props.options.chart.title.text] - Chart title text.
18
+ * @param {number} [props.options.chart.title.offsetX] - Offset value to move title horizontally.
19
+ * @param {number} [props.options.chart.title.offsetY] - Offset value to move title vertically.
20
+ * @param {string} [props.options.chart.title.align] - Chart text align. 'left', 'right', 'center' is available.
21
+ * @param {boolean|Object} [props.options.chart.animation] - Whether to use animation and duration when rendering the initial chart.
22
+ * @param {number|string} [props.options.chart.width] - Chart width. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the width of the parent container is followed.
23
+ * @param {number|string} [props.options.chart.height] - Chart height. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the height of the parent container is followed.
24
+ * @param {Object} [props.options.series]
25
+ * @param {boolean} [props.options.series.selectable=false] - Whether to make selectable series or not.
26
+ * @param {string} [props.options.series.eventDetectType] - Event detect type. 'grouped', 'point' is available.
27
+ * @param {Object} [props.options.series.dataLabels] - Set the visibility, location, and formatting of dataLabel. For specific information, refer to the {@link https://github.com/nhn/tui.chart|DataLabels guide} on github.
28
+ * @param {Array<number>|Array<string>} [props.options.series.radiusRange] - Specifies the radius of the circle drawn. It is specified by entering a number or percent string value in start and end.
29
+ * @param {Array<number>} [props.options.series.angleRange] - The range of angles to which the circle will be drawn. It is specified by putting number in start and end.
30
+ * @param {boolean} [props.options.series.clockwise] - Whether it will be drawn clockwise.
31
+ * @param {Object} [props.options.circularAxis]
32
+ * @param {Object} [props.options.circularAxis.tick] - Option to adjust tick interval.
33
+ * @param {Object} [props.options.circularAxis.label] - Option to adjust label interval.
34
+ * @param {Object} [props.options.circularAxis.scale] - Option to adjust axis minimum, maximum, step size.
35
+ * @param {Object} [props.options.verticalAxis]
36
+ * @param {Object} [props.options.verticalAxis.tick] - Option to adjust tick interval.
37
+ * @param {Object} [props.options.verticalAxis.label] - Option to adjust label interval.
38
+ * @param {Object} [props.options.legend]
39
+ * @param {string} [props.options.legend.align] - Legend align. 'top', 'bottom', 'right', 'left' is available.
40
+ * @param {string} [props.options.legend.showCheckbox] - Whether to show checkbox.
41
+ * @param {boolean} [props.options.legend.visible] - Whether to show legend.
42
+ * @param {number} [props.options.legend.width] - Width of legend.
43
+ * @param {Object} [props.options.legend.item] - `width` and `overflow` options of the legend item. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Legend guide} on github.
44
+ * @param {Object} [props.options.exportMenu]
45
+ * @param {boolean} [props.options.exportMenu.visible] - Whether to show export menu.
46
+ * @param {string} [props.options.exportMenu.filename] - File name applied when downloading.
47
+ * @param {Object} [props.options.tooltip]
48
+ * @param {number} [props.options.tooltip.offsetX] - Offset value to move title horizontally.
49
+ * @param {number} [props.options.tooltip.offsetY] - Offset value to move title vertically.
50
+ * @param {Function} [props.options.tooltip.formatter] - Function to format data value.
51
+ * @param {Function} [props.options.tooltip.template] - Function to create custom template. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Tooltip guide} on github.
52
+ * @param {Object} [props.options.responsive] - Rules for changing chart options. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Responsive guide} on github.
53
+ * @param {boolean|Object} [props.options.responsive.animation] - Animation duration when the chart is modified.
54
+ * @param {Array<Object>} [props.options.responsive.rules] - Rules for the Chart to Respond.
55
+ * @param {Object} [props.options.lang] - Options for changing the text displayed on the chart or i18n languages.
56
+ * @param {Object} [props.options.lang.noData] - No Data Layer Text.
57
+ * @param {Object} [props.options.theme] - Chart theme options. For specific information, refer to the {@link https://github.com/nhn/tui.chart|RadialBar Chart guide} on github.
58
+ * @param {Object} [props.options.theme.chart] - Chart font theme.
59
+ * @param {Object} [props.options.theme.noData] - No Data Layer Text theme.
60
+ * @param {Object} [props.options.theme.series] - Series theme.
61
+ * @param {Object} [props.options.theme.title] - Title theme.
62
+ * @param {Object} [props.options.theme.circularAxis] - Circular Axis theme.
63
+ * @param {Object} [props.options.theme.verticalAxis] - Vertical Axis theme.
64
+ * @param {Object} [props.options.theme.legend] - Legend theme.
65
+ * @param {Object} [props.options.theme.tooltip] - Tooltip theme.
66
+ * @param {Object} [props.options.theme.exportMenu] - ExportMenu theme.
67
+ * @extends Chart
68
+ */
69
+ export default class RadialBarChart extends Chart<RadialBarChartOptions> {
70
+ constructor({ el, options, data }: RadialBarChartProps);
71
+ initialize(): void;
72
+ /**
73
+ * Add series.
74
+ * @param {Object} data - Data to be added.
75
+ * @param {string} data.name - Series name.
76
+ * @param {Array<number>} data.data - Array of data to be added.
77
+ * @api
78
+ * @example
79
+ * chart.addSeries({
80
+ * name: 'newSeries',
81
+ * data: [10, 20, 30, 40],
82
+ * });
83
+ */
84
+ addSeries(data: RadialBarSeriesType): void;
85
+ /**
86
+ * Convert the chart data to new data.
87
+ * @param {Object} data - Data to be set.
88
+ * @api
89
+ * @example
90
+ * chart.setData({
91
+ * categories: ['1', '2', '3'],
92
+ * series: [
93
+ * {
94
+ * name: 'new series',
95
+ * data: [1, 2, 3],
96
+ * },
97
+ * {
98
+ * name: 'new series2',
99
+ * data: [4, 5, 6],
100
+ * }
101
+ * ]
102
+ * });
103
+ */
104
+ setData(data: RadialBarSeriesData): void;
105
+ /**
106
+ * Hide series data label.
107
+ * @api
108
+ * @example
109
+ * chart.hideSeriesDataLabel();
110
+ */
111
+ hideSeriesDataLabel(): void;
112
+ /**
113
+ * Show series data label.
114
+ * @api
115
+ * @example
116
+ * chart.showSeriesDataLabel();
117
+ */
118
+ showSeriesDataLabel(): void;
119
+ /**
120
+ * Convert the chart options to new options.
121
+ * @param {Object} options - Chart options.
122
+ * @api
123
+ * @example
124
+ * chart.setOptions({
125
+ * chart: {
126
+ * width: 500,
127
+ * height: 500,
128
+ * title: 'Olympic Medals',
129
+ * },
130
+ * series: {
131
+ * selectable: true
132
+ * }
133
+ * });
134
+ */
135
+ setOptions(options: RadialBarChartOptions): void;
136
+ /**
137
+ * Update chart options.
138
+ * @param {Object} options - Chart options.
139
+ * @api
140
+ * @example
141
+ * chart.updateOptions({
142
+ * chart: {
143
+ * title: 'Olympic Medals',
144
+ * },
145
+ * series: {
146
+ * eventDetectType: 'grouped'
147
+ * }
148
+ * });
149
+ */
150
+ updateOptions(options: RadialBarChartOptions): void;
151
+ /**
152
+ * Show tooltip.
153
+ * @param {Object} seriesInfo - Information of the series for the tooltip to be displayed.
154
+ * @param {number} seriesInfo.index - Index of data within series. If 'series.eventDetectType' is "grouped", only index is needed.
155
+ * @param {number} [seriesInfo.seriesIndex] - Index of series
156
+ * @api
157
+ * @example
158
+ * // eventDetectType is 'grouped'
159
+ * chart.showTooltip({index: 1});
160
+ *
161
+ * // eventDetectType is 'point'
162
+ * chart.showTooltip({index: 1, seriesIndex: 2});
163
+ */
164
+ showTooltip(seriesInfo: SelectSeriesInfo): void;
165
+ /**
166
+ * Hide tooltip.
167
+ * @api
168
+ * @example
169
+ * chart.hideTooltip();
170
+ */
171
+ hideTooltip(): void;
172
+ }