@carbon/charts 0.30.24 → 0.30.25

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 (162) hide show
  1. package/CHANGELOG.md +330 -1052
  2. package/README.md +3 -0
  3. package/axis-chart.js +8 -14
  4. package/axis-chart.js.map +1 -1
  5. package/build/demo/{data/create-codesandbox.d.ts → create-codesandbox.d.ts} +16 -13
  6. package/build/demo/data/bar.d.ts +1 -1
  7. package/build/demo/data/line.d.ts +1 -1
  8. package/build/src/interfaces/axis-scales.d.ts +11 -11
  9. package/build/src/interfaces/charts.d.ts +1 -0
  10. package/bundle.js +1 -1
  11. package/chart.js +15 -24
  12. package/chart.js.map +1 -1
  13. package/charts/bar-grouped.js +3 -1
  14. package/charts/bar-grouped.js.map +1 -1
  15. package/charts/bar-simple.js +3 -1
  16. package/charts/bar-simple.js.map +1 -1
  17. package/charts/bar-stacked.js +3 -1
  18. package/charts/bar-stacked.js.map +1 -1
  19. package/charts/bubble.js +3 -1
  20. package/charts/bubble.js.map +1 -1
  21. package/charts/donut.js +3 -1
  22. package/charts/donut.js.map +1 -1
  23. package/charts/line.js +3 -1
  24. package/charts/line.js.map +1 -1
  25. package/charts/pie.js +3 -1
  26. package/charts/pie.js.map +1 -1
  27. package/charts/radar.js +1 -3
  28. package/charts/radar.js.map +1 -1
  29. package/charts/scatter.js +3 -1
  30. package/charts/scatter.js.map +1 -1
  31. package/components/axes/axis.js +72 -33
  32. package/components/axes/axis.js.map +1 -1
  33. package/components/axes/grid.js +23 -18
  34. package/components/axes/grid.js.map +1 -1
  35. package/components/axes/ruler.js +7 -5
  36. package/components/axes/ruler.js.map +1 -1
  37. package/components/axes/two-dimensional-axes.js +5 -2
  38. package/components/axes/two-dimensional-axes.js.map +1 -1
  39. package/components/axes/zero-line.js +2 -1
  40. package/components/axes/zero-line.js.map +1 -1
  41. package/components/component.js +2 -4
  42. package/components/component.js.map +1 -1
  43. package/components/essentials/legend.js +46 -23
  44. package/components/essentials/legend.js.map +1 -1
  45. package/components/essentials/threshold.js +11 -5
  46. package/components/essentials/threshold.js.map +1 -1
  47. package/components/essentials/title.js +6 -4
  48. package/components/essentials/title.js.map +1 -1
  49. package/components/essentials/tooltip-bar.js +39 -20
  50. package/components/essentials/tooltip-bar.js.map +1 -1
  51. package/components/essentials/tooltip-pie.js +4 -3
  52. package/components/essentials/tooltip-pie.js.map +1 -1
  53. package/components/essentials/tooltip-radar.js +6 -3
  54. package/components/essentials/tooltip-radar.js.map +1 -1
  55. package/components/essentials/tooltip-scatter.js +3 -1
  56. package/components/essentials/tooltip-scatter.js.map +1 -1
  57. package/components/essentials/tooltip.js +35 -15
  58. package/components/essentials/tooltip.js.map +1 -1
  59. package/components/graphs/bar-grouped.js +46 -20
  60. package/components/graphs/bar-grouped.js.map +1 -1
  61. package/components/graphs/bar-simple.js +39 -19
  62. package/components/graphs/bar-simple.js.map +1 -1
  63. package/components/graphs/bar-stacked.js +50 -28
  64. package/components/graphs/bar-stacked.js.map +1 -1
  65. package/components/graphs/bar.js.map +1 -1
  66. package/components/graphs/bubble.js +22 -8
  67. package/components/graphs/bubble.js.map +1 -1
  68. package/components/graphs/donut.js +12 -4
  69. package/components/graphs/donut.js.map +1 -1
  70. package/components/graphs/line.js +14 -7
  71. package/components/graphs/line.js.map +1 -1
  72. package/components/graphs/pie.js +80 -44
  73. package/components/graphs/pie.js.map +1 -1
  74. package/components/graphs/radar.js +271 -140
  75. package/components/graphs/radar.js.map +1 -1
  76. package/components/graphs/scatter.js +54 -21
  77. package/components/graphs/scatter.js.map +1 -1
  78. package/components/graphs/skeleton.js +29 -14
  79. package/components/graphs/skeleton.js.map +1 -1
  80. package/components/layout/layout.js +38 -26
  81. package/components/layout/layout.js.map +1 -1
  82. package/components/layout/spacer.js +2 -1
  83. package/components/layout/spacer.js.map +1 -1
  84. package/configuration.js +15 -13
  85. package/configuration.js.map +1 -1
  86. package/demo/{data/create-codesandbox.d.ts → create-codesandbox.d.ts} +16 -13
  87. package/demo/{data/create-codesandbox.js → create-codesandbox.js} +24 -21
  88. package/demo/create-codesandbox.js.map +1 -0
  89. package/demo/data/bar.d.ts +1 -1
  90. package/demo/data/bar.js +1 -1
  91. package/demo/data/bar.js.map +1 -1
  92. package/demo/data/bubble.js +5 -3
  93. package/demo/data/bubble.js.map +1 -1
  94. package/demo/data/bundle.js +1 -1
  95. package/demo/data/index.js +12 -7
  96. package/demo/data/index.js.map +1 -1
  97. package/demo/data/line.d.ts +1 -1
  98. package/demo/data/line.js +2 -4
  99. package/demo/data/line.js.map +1 -1
  100. package/demo/data/radar.js.map +1 -1
  101. package/demo/data/time-series-axis.js +1 -3
  102. package/demo/data/time-series-axis.js.map +1 -1
  103. package/demo/styles.css +50 -18
  104. package/demo/styles.css.map +1 -1
  105. package/demo/styles.min.css +1 -1
  106. package/demo/styles.min.css.map +1 -1
  107. package/demo/tsconfig.tsbuildinfo +68 -68
  108. package/index.js.map +1 -1
  109. package/interfaces/axis-scales.d.ts +11 -11
  110. package/interfaces/axis-scales.js.map +1 -1
  111. package/interfaces/charts.d.ts +1 -0
  112. package/interfaces/charts.js.map +1 -1
  113. package/interfaces/components.js.map +1 -1
  114. package/interfaces/enums.js.map +1 -1
  115. package/model.js +27 -16
  116. package/model.js.map +1 -1
  117. package/package.json +4 -2
  118. package/polyfills.js +7 -2
  119. package/polyfills.js.map +1 -1
  120. package/services/angle-utils.js +34 -9
  121. package/services/angle-utils.js.map +1 -1
  122. package/services/colors.js.map +1 -1
  123. package/services/curves.js +4 -2
  124. package/services/curves.js.map +1 -1
  125. package/services/essentials/dom-utils.js +4 -3
  126. package/services/essentials/dom-utils.js.map +1 -1
  127. package/services/essentials/transitions.js +3 -4
  128. package/services/essentials/transitions.js.map +1 -1
  129. package/services/scales-cartesian.js +63 -23
  130. package/services/scales-cartesian.js.map +1 -1
  131. package/services/time-series.js +28 -12
  132. package/services/time-series.js.map +1 -1
  133. package/styles/components/_axis.scss +4 -0
  134. package/styles/components/_layout.scss +0 -1
  135. package/styles/components/_ruler.scss +5 -2
  136. package/styles/components/_skeleton.scss +2 -3
  137. package/styles/components/_threshold.scss +2 -2
  138. package/styles/components/_tooltip.scss +6 -5
  139. package/styles/graphs/_bubble.scss +1 -1
  140. package/styles/graphs/_radar.scss +4 -2
  141. package/styles/graphs/_scatter.scss +1 -1
  142. package/styles/mixins.scss +2 -2
  143. package/styles-g10.css +11 -4
  144. package/styles-g10.css.map +1 -1
  145. package/styles-g10.min.css +1 -1
  146. package/styles-g10.min.css.map +1 -1
  147. package/styles-g100.css +11 -4
  148. package/styles-g100.css.map +1 -1
  149. package/styles-g100.min.css +1 -1
  150. package/styles-g100.min.css.map +1 -1
  151. package/styles-g90.css +11 -4
  152. package/styles-g90.css.map +1 -1
  153. package/styles-g90.min.css +1 -1
  154. package/styles-g90.min.css.map +1 -1
  155. package/styles.css +11 -4
  156. package/styles.css.map +1 -1
  157. package/styles.min.css +1 -1
  158. package/styles.min.css.map +1 -1
  159. package/tools.js +19 -7
  160. package/tools.js.map +1 -1
  161. package/tsconfig.tsbuildinfo +56 -56
  162. package/demo/data/create-codesandbox.js.map +0 -1
@@ -46,7 +46,11 @@ var Radar = /** @class */ (function (_super) {
46
46
  var completeBlankData = Tools.flatMapDeep(_this.uniqueKeys.map(function (key) {
47
47
  return _this.uniqueGroups.map(function (group) {
48
48
  var _a;
49
- return (_a = {}, _a[angle] = key, _a[groupMapsTo] = group, _a[value] = null, _a);
49
+ return (_a = {},
50
+ _a[angle] = key,
51
+ _a[groupMapsTo] = group,
52
+ _a[value] = null,
53
+ _a);
50
54
  });
51
55
  }));
52
56
  return Tools.merge(completeBlankData, dataset);
@@ -61,7 +65,11 @@ var Radar = /** @class */ (function (_super) {
61
65
  var name = _a.name, data = _a.data;
62
66
  var completeBlankData = _this.uniqueKeys.map(function (k) {
63
67
  var _a;
64
- return (_a = {}, _a[groupMapsTo] = name, _a[angle] = k, _a[value] = null, _a);
68
+ return (_a = {},
69
+ _a[groupMapsTo] = name,
70
+ _a[angle] = k,
71
+ _a[value] = null,
72
+ _a);
65
73
  });
66
74
  return { name: name, data: Tools.merge(completeBlankData, data) };
67
75
  });
@@ -69,7 +77,8 @@ var Radar = /** @class */ (function (_super) {
69
77
  _this.handleLegendOnHover = function (event) {
70
78
  var hoveredElement = event.detail.hoveredElement;
71
79
  var opacity = Tools.getProperty(_this.model.getOptions(), "radar", "opacity");
72
- _this.parent.selectAll("g.blobs path")
80
+ _this.parent
81
+ .selectAll("g.blobs path")
73
82
  .transition(_this.services.transitions.getTransition("legend-hover-blob"))
74
83
  .style("fill-opacity", function (group) {
75
84
  if (group.name !== hoveredElement.datum().name) {
@@ -80,7 +89,8 @@ var Radar = /** @class */ (function (_super) {
80
89
  };
81
90
  _this.handleLegendMouseOut = function (event) {
82
91
  var opacity = Tools.getProperty(_this.model.getOptions(), "radar", "opacity");
83
- _this.parent.selectAll("g.blobs path")
92
+ _this.parent
93
+ .selectAll("g.blobs path")
84
94
  .transition(_this.services.transitions.getTransition("legend-mouseout-blob"))
85
95
  .style("fill-opacity", Tools.getProperty(opacity, "selected"));
86
96
  };
@@ -97,7 +107,9 @@ var Radar = /** @class */ (function (_super) {
97
107
  var _this = this;
98
108
  if (animate === void 0) { animate = true; }
99
109
  this.svg = this.getContainerSVG();
100
- var _a = DOMUtils.getSVGElementSize(this.parent, { useAttrs: true }), width = _a.width, height = _a.height;
110
+ var _a = DOMUtils.getSVGElementSize(this.parent, {
111
+ useAttrs: true
112
+ }), width = _a.width, height = _a.height;
101
113
  var data = this.model.getData();
102
114
  var displayData = this.model.getDisplayData();
103
115
  var groupedData = this.model.getGroupedData();
@@ -123,11 +135,16 @@ var Radar = /** @class */ (function (_super) {
123
135
  .domain(this.displayDataNormalized.map(function (d) { return d[angle]; }))
124
136
  .range([0, 2 * Math.PI].map(function (a) { return a - Math.PI / 2; }));
125
137
  var yScale = scaleLinear()
126
- .domain([0, max(this.displayDataNormalized.map(function (d) { return d[value]; }))])
138
+ .domain([
139
+ 0,
140
+ max(this.displayDataNormalized.map(function (d) { return d[value]; }))
141
+ ])
127
142
  .range([minRange, radius])
128
143
  .nice(yTicksNumber);
129
144
  var yTicks = yScale.ticks(yTicksNumber);
130
- var colorScale = function (group) { return _this.model.getFillColor(group); };
145
+ var colorScale = function (group) {
146
+ return _this.model.getFillColor(group);
147
+ };
131
148
  // constructs a new radial line generator
132
149
  // the angle accessor returns the angle in radians with 0° at -y (12 o’clock)
133
150
  // so map back the angle
@@ -139,7 +156,7 @@ var Radar = /** @class */ (function (_super) {
139
156
  // position it occupies using the old scale to the position it occupies using the new scale
140
157
  var oldRadialLineGenerator = lineRadial()
141
158
  .angle(radialLineGenerator.angle())
142
- .radius(function (d) { return oldYScale ? oldYScale(d[value]) : minRange; })
159
+ .radius(function (d) { return (oldYScale ? oldYScale(d[value]) : minRange); })
143
160
  .curve(radialLineGenerator.curve());
144
161
  // compute the space that each x label needs
145
162
  var horizSpaceNeededByEachXLabel = this.uniqueKeys.map(function (key) {
@@ -162,150 +179,256 @@ var Radar = /** @class */ (function (_super) {
162
179
  var yAxes = DOMUtils.appendOrSelect(this.svg, "g.y-axes").attr("role", Roles.GROUP);
163
180
  var yAxisUpdate = yAxes.selectAll("path").data(yTicks, function (tick) { return tick; });
164
181
  // for each tick, create array of data corresponding to the points composing the shape
165
- var shapeData = function (tick) { return _this.uniqueKeys.map(function (key) {
166
- var _a;
167
- return (_a = {}, _a[angle] = key, _a[value] = tick, _a);
168
- }); };
169
- yAxisUpdate.join(function (enter) { return enter
170
- .append("path")
171
- .attr("role", Roles.GRAPHICS_SYMBOL)
172
- .attr("opacity", 0)
173
- .attr("transform", "translate(" + c.x + ", " + c.y + ")")
174
- .attr("fill", "none")
175
- .attr("d", function (tick) { return oldRadialLineGenerator(shapeData(tick)); })
176
- .call(function (selection) { return selection
177
- .transition(_this.services.transitions.getTransition("radar_y_axes_enter", animate))
178
- .attr("opacity", 1)
179
- .attr("d", function (tick) { return radialLineGenerator(shapeData(tick)); }); }); }, function (update) { return update
180
- .call(function (selection) { return selection
181
- .transition(_this.services.transitions.getTransition("radar_y_axes_update", animate))
182
- .attr("opacity", 1)
183
- .attr("transform", "translate(" + c.x + ", " + c.y + ")")
184
- .attr("d", function (tick) { return radialLineGenerator(shapeData(tick)); }); }); }, function (exit) { return exit
185
- .call(function (selection) { return selection
186
- .transition(_this.services.transitions.getTransition("radar_y_axes_exit", animate))
187
- .attr("d", function (tick) { return radialLineGenerator(shapeData(tick)); })
188
- .attr("opacity", 0)
189
- .remove(); }); });
182
+ var shapeData = function (tick) {
183
+ return _this.uniqueKeys.map(function (key) {
184
+ var _a;
185
+ return (_a = {}, _a[angle] = key, _a[value] = tick, _a);
186
+ });
187
+ };
188
+ yAxisUpdate.join(function (enter) {
189
+ return enter
190
+ .append("path")
191
+ .attr("role", Roles.GRAPHICS_SYMBOL)
192
+ .attr("opacity", 0)
193
+ .attr("transform", "translate(" + c.x + ", " + c.y + ")")
194
+ .attr("fill", "none")
195
+ .attr("d", function (tick) { return oldRadialLineGenerator(shapeData(tick)); })
196
+ .call(function (selection) {
197
+ return selection
198
+ .transition(_this.services.transitions.getTransition("radar_y_axes_enter", animate))
199
+ .attr("opacity", 1)
200
+ .attr("d", function (tick) {
201
+ return radialLineGenerator(shapeData(tick));
202
+ });
203
+ });
204
+ }, function (update) {
205
+ return update.call(function (selection) {
206
+ return selection
207
+ .transition(_this.services.transitions.getTransition("radar_y_axes_update", animate))
208
+ .attr("opacity", 1)
209
+ .attr("transform", "translate(" + c.x + ", " + c.y + ")")
210
+ .attr("d", function (tick) { return radialLineGenerator(shapeData(tick)); });
211
+ });
212
+ }, function (exit) {
213
+ return exit.call(function (selection) {
214
+ return selection
215
+ .transition(_this.services.transitions.getTransition("radar_y_axes_exit", animate))
216
+ .attr("d", function (tick) { return radialLineGenerator(shapeData(tick)); })
217
+ .attr("opacity", 0)
218
+ .remove();
219
+ });
220
+ });
190
221
  // y labels (show only the min and the max labels)
191
222
  var yLabels = DOMUtils.appendOrSelect(this.svg, "g.y-labels").attr("role", Roles.GROUP);
192
223
  var yLabelUpdate = yLabels.selectAll("text").data(extent(yTicks));
193
- yLabelUpdate.join(function (enter) { return enter
194
- .append("text")
195
- .attr("opacity", 0)
196
- .text(function (tick) { return tick; })
197
- .attr("x", function (tick) { return polarToCartesianCoords(-Math.PI / 2, yScale(tick), c).x + yLabelPadding; })
198
- .attr("y", function (tick) { return polarToCartesianCoords(-Math.PI / 2, yScale(tick), c).y; })
199
- .style("text-anchor", "start")
200
- .style("dominant-baseline", "middle")
201
- .call(function (selection) { return selection
202
- .transition(_this.services.transitions.getTransition("radar_y_labels_enter", animate))
203
- .attr("opacity", 1); }); }, function (update) { return update
204
- .call(function (selection) { return selection
205
- .transition(_this.services.transitions.getTransition("radar_y_labels_update", animate))
206
- .text(function (tick) { return tick; })
207
- .attr("opacity", 1)
208
- .attr("x", function (tick) { return polarToCartesianCoords(-Math.PI / 2, yScale(tick), c).x + yLabelPadding; })
209
- .attr("y", function (tick) { return polarToCartesianCoords(-Math.PI / 2, yScale(tick), c).y; }); }); }, function (exit) { return exit
210
- .call(function (selection) { return selection
211
- .transition(_this.services.transitions.getTransition("radar_y_labels_exit", animate))
212
- .attr("opacity", 0)
213
- .remove(); }); });
224
+ yLabelUpdate.join(function (enter) {
225
+ return enter
226
+ .append("text")
227
+ .attr("opacity", 0)
228
+ .text(function (tick) { return tick; })
229
+ .attr("x", function (tick) {
230
+ return polarToCartesianCoords(-Math.PI / 2, yScale(tick), c).x + yLabelPadding;
231
+ })
232
+ .attr("y", function (tick) {
233
+ return polarToCartesianCoords(-Math.PI / 2, yScale(tick), c).y;
234
+ })
235
+ .style("text-anchor", "start")
236
+ .style("dominant-baseline", "middle")
237
+ .call(function (selection) {
238
+ return selection
239
+ .transition(_this.services.transitions.getTransition("radar_y_labels_enter", animate))
240
+ .attr("opacity", 1);
241
+ });
242
+ }, function (update) {
243
+ return update.call(function (selection) {
244
+ return selection
245
+ .transition(_this.services.transitions.getTransition("radar_y_labels_update", animate))
246
+ .text(function (tick) { return tick; })
247
+ .attr("opacity", 1)
248
+ .attr("x", function (tick) {
249
+ return polarToCartesianCoords(-Math.PI / 2, yScale(tick), c).x + yLabelPadding;
250
+ })
251
+ .attr("y", function (tick) {
252
+ return polarToCartesianCoords(-Math.PI / 2, yScale(tick), c).y;
253
+ });
254
+ });
255
+ }, function (exit) {
256
+ return exit.call(function (selection) {
257
+ return selection
258
+ .transition(_this.services.transitions.getTransition("radar_y_labels_exit", animate))
259
+ .attr("opacity", 0)
260
+ .remove();
261
+ });
262
+ });
214
263
  // x axes
215
264
  var xAxes = DOMUtils.appendOrSelect(this.svg, "g.x-axes").attr("role", Roles.GROUP);
216
- var xAxisUpdate = xAxes.selectAll("line").data(this.uniqueKeys, function (key) { return key; });
217
- xAxisUpdate.join(function (enter) { return enter
218
- .append("line")
219
- .attr("role", Roles.GRAPHICS_SYMBOL)
220
- .attr("opacity", 0)
221
- .attr("class", function (key) { return "x-axis-" + Tools.kebabCase(key); }) // replace spaces with -
222
- .attr("stroke-dasharray", "0")
223
- .attr("x1", function (key) { return polarToCartesianCoords(xScale(key), 0, c).x; })
224
- .attr("y1", function (key) { return polarToCartesianCoords(xScale(key), 0, c).y; })
225
- .attr("x2", function (key) { return polarToCartesianCoords(xScale(key), 0, c).x; })
226
- .attr("y2", function (key) { return polarToCartesianCoords(xScale(key), 0, c).y; })
227
- .call(function (selection) { return selection
228
- .transition(_this.services.transitions.getTransition("radar_x_axes_enter", animate))
229
- .attr("opacity", 1)
230
- .attr("x1", function (key) { return polarToCartesianCoords(xScale(key), yScale.range()[0], c).x; })
231
- .attr("y1", function (key) { return polarToCartesianCoords(xScale(key), yScale.range()[0], c).y; })
232
- .attr("x2", function (key) { return polarToCartesianCoords(xScale(key), yScale.range()[1], c).x; })
233
- .attr("y2", function (key) { return polarToCartesianCoords(xScale(key), yScale.range()[1], c).y; }); }); }, function (update) { return update
234
- .call(function (selection) { return selection
235
- .transition(_this.services.transitions.getTransition("radar_x_axes_update", animate))
236
- .attr("opacity", 1)
237
- .attr("x1", function (key) { return polarToCartesianCoords(xScale(key), yScale.range()[0], c).x; })
238
- .attr("y1", function (key) { return polarToCartesianCoords(xScale(key), yScale.range()[0], c).y; })
239
- .attr("x2", function (key) { return polarToCartesianCoords(xScale(key), yScale.range()[1], c).x; })
240
- .attr("y2", function (key) { return polarToCartesianCoords(xScale(key), yScale.range()[1], c).y; }); }); }, function (exit) { return exit
241
- .call(function (selection) { return selection
242
- .transition(_this.services.transitions.getTransition("radar_x_axes_exit", animate))
243
- .attr("opacity", 0)
244
- .remove(); }); });
265
+ var xAxisUpdate = xAxes
266
+ .selectAll("line")
267
+ .data(this.uniqueKeys, function (key) { return key; });
268
+ xAxisUpdate.join(function (enter) {
269
+ return enter
270
+ .append("line")
271
+ .attr("role", Roles.GRAPHICS_SYMBOL)
272
+ .attr("opacity", 0)
273
+ .attr("class", function (key) { return "x-axis-" + Tools.kebabCase(key); }) // replace spaces with -
274
+ .attr("stroke-dasharray", "0")
275
+ .attr("x1", function (key) { return polarToCartesianCoords(xScale(key), 0, c).x; })
276
+ .attr("y1", function (key) { return polarToCartesianCoords(xScale(key), 0, c).y; })
277
+ .attr("x2", function (key) { return polarToCartesianCoords(xScale(key), 0, c).x; })
278
+ .attr("y2", function (key) { return polarToCartesianCoords(xScale(key), 0, c).y; })
279
+ .call(function (selection) {
280
+ return selection
281
+ .transition(_this.services.transitions.getTransition("radar_x_axes_enter", animate))
282
+ .attr("opacity", 1)
283
+ .attr("x1", function (key) {
284
+ return polarToCartesianCoords(xScale(key), yScale.range()[0], c).x;
285
+ })
286
+ .attr("y1", function (key) {
287
+ return polarToCartesianCoords(xScale(key), yScale.range()[0], c).y;
288
+ })
289
+ .attr("x2", function (key) {
290
+ return polarToCartesianCoords(xScale(key), yScale.range()[1], c).x;
291
+ })
292
+ .attr("y2", function (key) {
293
+ return polarToCartesianCoords(xScale(key), yScale.range()[1], c).y;
294
+ });
295
+ });
296
+ }, function (update) {
297
+ return update.call(function (selection) {
298
+ return selection
299
+ .transition(_this.services.transitions.getTransition("radar_x_axes_update", animate))
300
+ .attr("opacity", 1)
301
+ .attr("x1", function (key) {
302
+ return polarToCartesianCoords(xScale(key), yScale.range()[0], c).x;
303
+ })
304
+ .attr("y1", function (key) {
305
+ return polarToCartesianCoords(xScale(key), yScale.range()[0], c).y;
306
+ })
307
+ .attr("x2", function (key) {
308
+ return polarToCartesianCoords(xScale(key), yScale.range()[1], c).x;
309
+ })
310
+ .attr("y2", function (key) {
311
+ return polarToCartesianCoords(xScale(key), yScale.range()[1], c).y;
312
+ });
313
+ });
314
+ }, function (exit) {
315
+ return exit.call(function (selection) {
316
+ return selection
317
+ .transition(_this.services.transitions.getTransition("radar_x_axes_exit", animate))
318
+ .attr("opacity", 0)
319
+ .remove();
320
+ });
321
+ });
245
322
  // x labels
246
323
  var xLabels = DOMUtils.appendOrSelect(this.svg, "g.x-labels").attr("role", Roles.GROUP);
247
324
  var xLabelUpdate = xLabels.selectAll("text").data(this.uniqueKeys);
248
- xLabelUpdate.join(function (enter) { return enter
249
- .append("text")
250
- .text(function (key) { return key; })
251
- .attr("opacity", 0)
252
- .attr("x", function (key) { return polarToCartesianCoords(xScale(key), yScale.range()[1] + xLabelPadding, c).x; })
253
- .attr("y", function (key) { return polarToCartesianCoords(xScale(key), yScale.range()[1] + xLabelPadding, c).y; })
254
- .style("text-anchor", function (key) { return radialLabelPlacement(xScale(key)).textAnchor; })
255
- .style("dominant-baseline", function (key) { return radialLabelPlacement(xScale(key)).dominantBaseline; })
256
- .call(function (selection) { return selection
257
- .transition(_this.services.transitions.getTransition("radar_x_labels_enter", animate))
258
- .attr("opacity", 1); }); }, function (update) { return update
259
- .call(function (selection) { return selection
260
- .transition(_this.services.transitions.getTransition("radar_x_labels_update", animate))
261
- .attr("opacity", 1)
262
- .attr("x", function (key) { return polarToCartesianCoords(xScale(key), yScale.range()[1] + xLabelPadding, c).x; })
263
- .attr("y", function (key) { return polarToCartesianCoords(xScale(key), yScale.range()[1] + xLabelPadding, c).y; }); }); }, function (exit) { return exit
264
- .call(function (selection) { return selection
265
- .transition(_this.services.transitions.getTransition("radar_x_labels_exit", animate))
266
- .attr("opacity", 0)
267
- .remove(); }); });
325
+ xLabelUpdate.join(function (enter) {
326
+ return enter
327
+ .append("text")
328
+ .text(function (key) { return key; })
329
+ .attr("opacity", 0)
330
+ .attr("x", function (key) {
331
+ return polarToCartesianCoords(xScale(key), yScale.range()[1] + xLabelPadding, c).x;
332
+ })
333
+ .attr("y", function (key) {
334
+ return polarToCartesianCoords(xScale(key), yScale.range()[1] + xLabelPadding, c).y;
335
+ })
336
+ .style("text-anchor", function (key) { return radialLabelPlacement(xScale(key)).textAnchor; })
337
+ .style("dominant-baseline", function (key) {
338
+ return radialLabelPlacement(xScale(key)).dominantBaseline;
339
+ })
340
+ .call(function (selection) {
341
+ return selection
342
+ .transition(_this.services.transitions.getTransition("radar_x_labels_enter", animate))
343
+ .attr("opacity", 1);
344
+ });
345
+ }, function (update) {
346
+ return update.call(function (selection) {
347
+ return selection
348
+ .transition(_this.services.transitions.getTransition("radar_x_labels_update", animate))
349
+ .attr("opacity", 1)
350
+ .attr("x", function (key) {
351
+ return polarToCartesianCoords(xScale(key), yScale.range()[1] + xLabelPadding, c).x;
352
+ })
353
+ .attr("y", function (key) {
354
+ return polarToCartesianCoords(xScale(key), yScale.range()[1] + xLabelPadding, c).y;
355
+ });
356
+ });
357
+ }, function (exit) {
358
+ return exit.call(function (selection) {
359
+ return selection
360
+ .transition(_this.services.transitions.getTransition("radar_x_labels_exit", animate))
361
+ .attr("opacity", 0)
362
+ .remove();
363
+ });
364
+ });
268
365
  // blobs
269
366
  var blobs = DOMUtils.appendOrSelect(this.svg, "g.blobs").attr("role", Roles.GROUP);
270
- var blobUpdate = blobs.selectAll("path").data(this.groupedDataNormalized, function (group) { return group.name; });
271
- blobUpdate.join(function (enter) { return enter
272
- .append("path")
273
- .attr("class", "blob")
274
- .attr("role", Roles.GRAPHICS_SYMBOL)
275
- .attr("opacity", 0)
276
- .attr("transform", "translate(" + c.x + ", " + c.y + ")")
277
- .attr("fill", function (group) { return colorScale(group.name); })
278
- .style("fill-opacity", opacity.selected)
279
- .attr("stroke", function (group) { return colorScale(group.name); })
280
- .attr("d", function (group) { return oldRadialLineGenerator(group.data); })
281
- .call(function (selection) { return selection
282
- .transition(_this.services.transitions.getTransition("radar_blobs_enter", animate))
283
- .attr("opacity", 1)
284
- .attr("d", function (group) { return radialLineGenerator(group.data); }); }); }, function (update) { return update
285
- .call(function (selection) { return selection
286
- .transition(_this.services.transitions.getTransition("radar_blobs_update", animate))
287
- .attr("opacity", 1)
288
- .attr("transform", "translate(" + c.x + ", " + c.y + ")")
289
- .attr("d", function (group) { return radialLineGenerator(group.data); }); }); }, function (exit) { return exit
290
- .call(function (selection) { return selection
291
- .transition(_this.services.transitions.getTransition("radar_blobs_exit", animate))
292
- .attr("d", function (group) { return radialLineGenerator(group.data); })
293
- .attr("opacity", 0)
294
- .remove(); }); });
367
+ var blobUpdate = blobs
368
+ .selectAll("path")
369
+ .data(this.groupedDataNormalized, function (group) { return group.name; });
370
+ blobUpdate.join(function (enter) {
371
+ return enter
372
+ .append("path")
373
+ .attr("class", "blob")
374
+ .attr("role", Roles.GRAPHICS_SYMBOL)
375
+ .attr("opacity", 0)
376
+ .attr("transform", "translate(" + c.x + ", " + c.y + ")")
377
+ .attr("fill", function (group) { return colorScale(group.name); })
378
+ .style("fill-opacity", opacity.selected)
379
+ .attr("stroke", function (group) { return colorScale(group.name); })
380
+ .attr("d", function (group) { return oldRadialLineGenerator(group.data); })
381
+ .call(function (selection) {
382
+ return selection
383
+ .transition(_this.services.transitions.getTransition("radar_blobs_enter", animate))
384
+ .attr("opacity", 1)
385
+ .attr("d", function (group) { return radialLineGenerator(group.data); });
386
+ });
387
+ }, function (update) {
388
+ return update.call(function (selection) {
389
+ return selection
390
+ .transition(_this.services.transitions.getTransition("radar_blobs_update", animate))
391
+ .attr("opacity", 1)
392
+ .attr("transform", "translate(" + c.x + ", " + c.y + ")")
393
+ .attr("d", function (group) { return radialLineGenerator(group.data); });
394
+ });
395
+ }, function (exit) {
396
+ return exit.call(function (selection) {
397
+ return selection
398
+ .transition(_this.services.transitions.getTransition("radar_blobs_exit", animate))
399
+ .attr("d", function (group) { return radialLineGenerator(group.data); })
400
+ .attr("opacity", 0)
401
+ .remove();
402
+ });
403
+ });
295
404
  // data dots
296
405
  var dots = DOMUtils.appendOrSelect(this.svg, "g.dots").attr("role", Roles.GROUP);
297
- var dotsUpdate = dots.selectAll("circle").data(this.displayDataNormalized);
298
- dotsUpdate.join(function (enter) { return enter.append("circle").attr("role", Roles.GRAPHICS_SYMBOL); }, function (update) { return update; }, function (exit) { return exit.remove(); })
406
+ var dotsUpdate = dots
407
+ .selectAll("circle")
408
+ .data(this.displayDataNormalized);
409
+ dotsUpdate
410
+ .join(function (enter) {
411
+ return enter.append("circle").attr("role", Roles.GRAPHICS_SYMBOL);
412
+ }, function (update) { return update; }, function (exit) { return exit.remove(); })
299
413
  .attr("class", function (d) { return Tools.kebabCase(d[angle]); })
300
- .attr("cx", function (d) { return polarToCartesianCoords(xScale(d[angle]), yScale(d[value]), c).x; })
301
- .attr("cy", function (d) { return polarToCartesianCoords(xScale(d[angle]), yScale(d[value]), c).y; })
414
+ .attr("cx", function (d) {
415
+ return polarToCartesianCoords(xScale(d[angle]), yScale(d[value]), c).x;
416
+ })
417
+ .attr("cy", function (d) {
418
+ return polarToCartesianCoords(xScale(d[angle]), yScale(d[value]), c).y;
419
+ })
302
420
  .attr("r", 0)
303
421
  .attr("opacity", 0)
304
422
  .attr("fill", function (d) { return colorScale(d[groupMapsTo]); });
305
423
  // rectangles
306
424
  var xAxesRect = DOMUtils.appendOrSelect(this.svg, "g.x-axes-rect").attr("role", Roles.GROUP);
307
- var xAxisRectUpdate = xAxesRect.selectAll("rect").data(this.uniqueKeys);
308
- xAxisRectUpdate.join(function (enter) { return enter.append("rect").attr("role", Roles.GRAPHICS_SYMBOL); }, function (update) { return update; }, function (exit) { return exit.remove(); })
425
+ var xAxisRectUpdate = xAxesRect
426
+ .selectAll("rect")
427
+ .data(this.uniqueKeys);
428
+ xAxisRectUpdate
429
+ .join(function (enter) {
430
+ return enter.append("rect").attr("role", Roles.GRAPHICS_SYMBOL);
431
+ }, function (update) { return update; }, function (exit) { return exit.remove(); })
309
432
  .attr("x", c.x)
310
433
  .attr("y", c.y - xAxisRectHeight / 2)
311
434
  .attr("width", yScale.range()[1])
@@ -319,7 +442,8 @@ var Radar = /** @class */ (function (_super) {
319
442
  };
320
443
  Radar.prototype.destroy = function () {
321
444
  // Remove event listeners
322
- this.parent.selectAll(".x-axes-rect > rect")
445
+ this.parent
446
+ .selectAll(".x-axes-rect > rect")
323
447
  .on("mouseover", null)
324
448
  .on("mousemove", null)
325
449
  .on("mouseout", null);
@@ -332,7 +456,8 @@ var Radar = /** @class */ (function (_super) {
332
456
  var self = this;
333
457
  var _a = Tools.getProperty(this.model.getOptions(), "radar"), angle = _a.axes.angle, dotsRadius = _a.dotsRadius;
334
458
  // events on x axes rects
335
- this.parent.selectAll(".x-axes-rect > rect")
459
+ this.parent
460
+ .selectAll(".x-axes-rect > rect")
336
461
  .on("mouseover", function (datum) {
337
462
  // Dispatch mouse event
338
463
  self.services.events.dispatchEvent(Events.Radar.X_AXIS_MOUSEOVER, {
@@ -345,7 +470,8 @@ var Radar = /** @class */ (function (_super) {
345
470
  var axisLine = self.parent.select(".x-axes .x-axis-" + Tools.kebabCase(datum));
346
471
  var dots = self.parent.selectAll(".dots circle." + Tools.kebabCase(datum));
347
472
  // Change style
348
- axisLine.classed("hovered", true)
473
+ axisLine
474
+ .classed("hovered", true)
349
475
  .attr("stroke-dasharray", "4 4");
350
476
  dots.classed("hovered", true)
351
477
  .attr("opacity", 1)
@@ -376,7 +502,8 @@ var Radar = /** @class */ (function (_super) {
376
502
  var axisLine = self.parent.select(".x-axes .x-axis-" + Tools.kebabCase(datum));
377
503
  var dots = self.parent.selectAll(".dots circle." + Tools.kebabCase(datum));
378
504
  // Change style
379
- axisLine.classed("hovered", false)
505
+ axisLine
506
+ .classed("hovered", false)
380
507
  .attr("stroke-dasharray", "0");
381
508
  dots.classed("hovered", false)
382
509
  .attr("opacity", 0)
@@ -387,8 +514,12 @@ var Radar = /** @class */ (function (_super) {
387
514
  datum: datum
388
515
  });
389
516
  // Hide tooltip
390
- self.services.events.dispatchEvent("hide-tooltip", { hoveredElement: hoveredElement });
391
- self.services.events.dispatchEvent(Events.Tooltip.HIDE, { hoveredElement: hoveredElement });
517
+ self.services.events.dispatchEvent("hide-tooltip", {
518
+ hoveredElement: hoveredElement
519
+ });
520
+ self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
521
+ hoveredElement: hoveredElement
522
+ });
392
523
  });
393
524
  };
394
525
  return Radar;