@carbon/charts 0.41.20 → 0.41.24

package/components/graphs/radar.js

@@ -12,24 +12,24 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 // Internal Imports
-import { Component } from "../component";
-import { DOMUtils } from "../../services";
-import { Events, Roles, ColorClassNameTypes } from "../../interfaces";
-import { Tools } from "../../tools";
-import { radialLabelPlacement, radToDeg, polarToCartesianCoords, distanceBetweenPointOnCircAndVerticalDiameter } from "../../services/angle-utils";
-import * as Configuration from "../../configuration";
+import { Component } from '../component';
+import { DOMUtils } from '../../services';
+import { Events, Roles, ColorClassNameTypes } from '../../interfaces';
+import { Tools } from '../../tools';
+import { radialLabelPlacement, radToDeg, polarToCartesianCoords, distanceBetweenPointOnCircAndVerticalDiameter, } from '../../services/angle-utils';
+import * as Configuration from '../../configuration';
 // D3 Imports
-import { select } from "d3-selection";
-import { scaleBand, scaleLinear } from "d3-scale";
-import { max, extent } from "d3-array";
-import { lineRadial, curveLinearClosed } from "d3-shape";
+import { select } from 'd3-selection';
+import { scaleBand, scaleLinear } from 'd3-scale';
+import { max, extent } from 'd3-array';
+import { lineRadial, curveLinearClosed } from 'd3-shape';
 // used to make transitions
 var oldYScale;
 var Radar = /** @class */ (function (_super) {
     __extends(Radar, _super);
     function Radar() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.type = "radar";
+        _this.type = 'radar';
         // append temporarily the label to get the exact space that it occupies
         _this.getLabelDimensions = function (label) {
             var tmpTick = DOMUtils.appendOrSelect(_this.getContainerSVG(), "g.tmp-tick");
@@ -42,8 +42,8 @@ var Radar = /** @class */ (function (_super) {
         // creates corresponding data with value = null
         _this.normalizeFlatData = function (dataset) {
             var options = _this.getOptions();
-            var _a = Tools.getProperty(options, "radar", "axes"), angle = _a.angle, value = _a.value;
-            var groupMapsTo = Tools.getProperty(options, "data", "groupMapsTo");
+            var _a = Tools.getProperty(options, 'radar', 'axes'), angle = _a.angle, value = _a.value;
+            var groupMapsTo = Tools.getProperty(options, 'data', 'groupMapsTo');
             var completeBlankData = Tools.flatMapDeep(_this.uniqueKeys.map(function (key) {
                 return _this.uniqueGroups.map(function (group) {
                     var _a;
@@ -60,8 +60,8 @@ var Radar = /** @class */ (function (_super) {
         // creates corresponding data with value = null
         _this.normalizeGroupedData = function (dataset) {
             var options = _this.getOptions();
-            var _a = Tools.getProperty(options, "radar", "axes"), angle = _a.angle, value = _a.value;
-            var groupMapsTo = Tools.getProperty(options, "data", "groupMapsTo");
+            var _a = Tools.getProperty(options, 'radar', 'axes'), angle = _a.angle, value = _a.value;
+            var groupMapsTo = Tools.getProperty(options, 'data', 'groupMapsTo');
             return dataset.map(function (_a) {
                 var name = _a.name, data = _a.data;
                 var completeBlankData = _this.uniqueKeys.map(function (k) {
@@ -78,15 +78,15 @@ var Radar = /** @class */ (function (_super) {
         _this.handleLegendOnHover = function (event) {
             var hoveredElement = event.detail.hoveredElement;
             _this.parent
-                .selectAll("g.blobs path")
-                .transition(_this.services.transitions.getTransition("legend-hover-blob"))
-                .style("fill-opacity", function (group) {
+                .selectAll('g.blobs path')
+                .transition(_this.services.transitions.getTransition('legend-hover-blob'))
+                .style('fill-opacity', function (group) {
                 if (group.name !== hoveredElement.datum().name) {
                     return Configuration.radar.opacity.unselected;
                 }
                 return Configuration.radar.opacity.selected;
             })
-                .style("stroke-opacity", function (group) {
+                .style('stroke-opacity', function (group) {
                 if (group.name !== hoveredElement.datum().name) {
                     return Configuration.radar.opacity.unselected;
                 }
@@ -95,10 +95,10 @@ var Radar = /** @class */ (function (_super) {
         };
         _this.handleLegendMouseOut = function (event) {
             _this.parent
-                .selectAll("g.blobs path")
-                .transition(_this.services.transitions.getTransition("legend-mouseout-blob"))
-                .style("fill-opacity", Configuration.radar.opacity.selected)
-                .style("stroke-opacity", 1);
+                .selectAll('g.blobs path')
+                .transition(_this.services.transitions.getTransition('legend-mouseout-blob'))
+                .style('fill-opacity', Configuration.radar.opacity.selected)
+                .style('stroke-opacity', 1);
         };
         return _this;
     }
@@ -114,14 +114,14 @@ var Radar = /** @class */ (function (_super) {
         if (animate === void 0) { animate = true; }
         var svg = this.getContainerSVG();
         var _a = DOMUtils.getSVGElementSize(this.parent, {
-            useAttrs: true
+            useAttrs: true,
         }), width = _a.width, height = _a.height;
         var data = this.model.getData();
         var displayData = this.model.getDisplayData();
         var groupedData = this.model.getGroupedData();
         var options = this.getOptions();
-        var _b = Tools.getProperty(options, "radar", "axes"), angle = _b.angle, value = _b.value;
-        var groupMapsTo = Tools.getProperty(options, "data", "groupMapsTo");
+        var _b = Tools.getProperty(options, 'radar', 'axes'), angle = _b.angle, value = _b.value;
+        var groupMapsTo = Tools.getProperty(options, 'data', 'groupMapsTo');
         var _c = Configuration.radar, xLabelPadding = _c.xLabelPadding, yLabelPadding = _c.yLabelPadding, yTicksNumber = _c.yTicksNumber, minRange = _c.minRange, xAxisRectHeight = _c.xAxisRectHeight;
         this.uniqueKeys = Array.from(new Set(data.map(function (d) { return d[angle]; })));
         this.uniqueGroups = Array.from(new Set(data.map(function (d) { return d[groupMapsTo]; })));
@@ -143,7 +143,7 @@ var Radar = /** @class */ (function (_super) {
         var yScale = scaleLinear()
             .domain([
             0,
-            max(this.displayDataNormalized.map(function (d) { return d[value]; }))
+            max(this.displayDataNormalized.map(function (d) { return d[value]; })),
         ])
             .range([minRange, radius])
             .nice(yTicksNumber);
@@ -176,15 +176,15 @@ var Radar = /** @class */ (function (_super) {
         // center coordinates
         var c = {
             x: leftPadding + xLabelPadding,
-            y: height / 2
+            y: height / 2,
         };
         /////////////////////////////
         // Drawing the radar
         /////////////////////////////
         // y axes
-        var yAxes = DOMUtils.appendOrSelect(svg, "g.y-axes").attr("role", Roles.GROUP);
+        var yAxes = DOMUtils.appendOrSelect(svg, 'g.y-axes').attr('role', Roles.GROUP);
         var yAxisUpdate = yAxes
-            .selectAll("path")
+            .selectAll('path')
             .data(yTicks, function (tick) { return tick; });
         // for each tick, create array of data corresponding to the points composing the shape
         var shapeData = function (tick) {
@@ -195,294 +195,294 @@ var Radar = /** @class */ (function (_super) {
         };
         yAxisUpdate.join(function (enter) {
             return enter
-                .append("path")
-                .attr("role", Roles.GRAPHICS_SYMBOL)
-                .attr("opacity", 0)
-                .attr("transform", "translate(" + c.x + ", " + c.y + ")")
-                .attr("fill", "none")
-                .attr("d", function (tick) {
+                .append('path')
+                .attr('role', Roles.GRAPHICS_SYMBOL)
+                .attr('opacity', 0)
+                .attr('transform', "translate(" + c.x + ", " + c.y + ")")
+                .attr('fill', 'none')
+                .attr('d', function (tick) {
                 return oldRadialLineGenerator(shapeData(tick));
             })
                 .call(function (selection) {
                 return selection
-                    .transition(_this.services.transitions.getTransition("radar_y_axes_enter", animate))
-                    .attr("opacity", 1)
-                    .attr("d", function (tick) {
+                    .transition(_this.services.transitions.getTransition('radar_y_axes_enter', animate))
+                    .attr('opacity', 1)
+                    .attr('d', function (tick) {
                     return radialLineGenerator(shapeData(tick));
                 });
             });
         }, function (update) {
             return update.call(function (selection) {
                 return selection
-                    .transition(_this.services.transitions.getTransition("radar_y_axes_update", animate))
-                    .attr("opacity", 1)
-                    .attr("transform", "translate(" + c.x + ", " + c.y + ")")
-                    .attr("d", function (tick) {
+                    .transition(_this.services.transitions.getTransition('radar_y_axes_update', animate))
+                    .attr('opacity', 1)
+                    .attr('transform', "translate(" + c.x + ", " + c.y + ")")
+                    .attr('d', function (tick) {
                     return radialLineGenerator(shapeData(tick));
                 });
             });
         }, function (exit) {
             return exit.call(function (selection) {
                 return selection
-                    .transition(_this.services.transitions.getTransition("radar_y_axes_exit", animate))
-                    .attr("d", function (tick) {
+                    .transition(_this.services.transitions.getTransition('radar_y_axes_exit', animate))
+                    .attr('d', function (tick) {
                     return radialLineGenerator(shapeData(tick));
                 })
-                    .attr("opacity", 0)
+                    .attr('opacity', 0)
                     .remove();
             });
         });
         // x axes
-        var xAxes = DOMUtils.appendOrSelect(svg, "g.x-axes").attr("role", Roles.GROUP);
+        var xAxes = DOMUtils.appendOrSelect(svg, 'g.x-axes').attr('role', Roles.GROUP);
         var xAxisUpdate = xAxes
-            .selectAll("line")
+            .selectAll('line')
             .data(this.uniqueKeys, function (key) { return key; });
         xAxisUpdate.join(function (enter) {
             return enter
-                .append("line")
-                .attr("role", Roles.GRAPHICS_SYMBOL)
-                .attr("opacity", 0)
-                .attr("class", function (key) { return "x-axis-" + Tools.kebabCase(key); }) // replace spaces with -
-                .attr("stroke-dasharray", "0")
-                .attr("x1", function (key) { return polarToCartesianCoords(xScale(key), 0, c).x; })
-                .attr("y1", function (key) { return polarToCartesianCoords(xScale(key), 0, c).y; })
-                .attr("x2", function (key) { return polarToCartesianCoords(xScale(key), 0, c).x; })
-                .attr("y2", function (key) { return polarToCartesianCoords(xScale(key), 0, c).y; })
+                .append('line')
+                .attr('role', Roles.GRAPHICS_SYMBOL)
+                .attr('opacity', 0)
+                .attr('class', function (key) { return "x-axis-" + Tools.kebabCase(key); }) // replace spaces with -
+                .attr('stroke-dasharray', '0')
+                .attr('x1', function (key) { return polarToCartesianCoords(xScale(key), 0, c).x; })
+                .attr('y1', function (key) { return polarToCartesianCoords(xScale(key), 0, c).y; })
+                .attr('x2', function (key) { return polarToCartesianCoords(xScale(key), 0, c).x; })
+                .attr('y2', function (key) { return polarToCartesianCoords(xScale(key), 0, c).y; })
                 .call(function (selection) {
                 return selection
-                    .transition(_this.services.transitions.getTransition("radar_x_axes_enter", animate))
-                    .attr("opacity", 1)
-                    .attr("x1", function (key) {
+                    .transition(_this.services.transitions.getTransition('radar_x_axes_enter', animate))
+                    .attr('opacity', 1)
+                    .attr('x1', function (key) {
                     return polarToCartesianCoords(xScale(key), yScale.range()[0], c).x;
                 })
-                    .attr("y1", function (key) {
+                    .attr('y1', function (key) {
                     return polarToCartesianCoords(xScale(key), yScale.range()[0], c).y;
                 })
-                    .attr("x2", function (key) {
+                    .attr('x2', function (key) {
                     return polarToCartesianCoords(xScale(key), yScale.range()[1], c).x;
                 })
-                    .attr("y2", function (key) {
+                    .attr('y2', function (key) {
                     return polarToCartesianCoords(xScale(key), yScale.range()[1], c).y;
                 });
             });
         }, function (update) {
             return update.call(function (selection) {
                 return selection
-                    .transition(_this.services.transitions.getTransition("radar_x_axes_update", animate))
-                    .attr("opacity", 1)
-                    .attr("x1", function (key) {
+                    .transition(_this.services.transitions.getTransition('radar_x_axes_update', animate))
+                    .attr('opacity', 1)
+                    .attr('x1', function (key) {
                     return polarToCartesianCoords(xScale(key), yScale.range()[0], c).x;
                 })
-                    .attr("y1", function (key) {
+                    .attr('y1', function (key) {
                     return polarToCartesianCoords(xScale(key), yScale.range()[0], c).y;
                 })
-                    .attr("x2", function (key) {
+                    .attr('x2', function (key) {
                     return polarToCartesianCoords(xScale(key), yScale.range()[1], c).x;
                 })
-                    .attr("y2", function (key) {
+                    .attr('y2', function (key) {
                     return polarToCartesianCoords(xScale(key), yScale.range()[1], c).y;
                 });
             });
         }, function (exit) {
             return exit.call(function (selection) {
                 return selection
-                    .transition(_this.services.transitions.getTransition("radar_x_axes_exit", animate))
-                    .attr("opacity", 0)
+                    .transition(_this.services.transitions.getTransition('radar_x_axes_exit', animate))
+                    .attr('opacity', 0)
                     .remove();
             });
         });
         // x labels
-        var xLabels = DOMUtils.appendOrSelect(svg, "g.x-labels").attr("role", Roles.GROUP);
-        var xLabelUpdate = xLabels.selectAll("text").data(this.uniqueKeys);
+        var xLabels = DOMUtils.appendOrSelect(svg, 'g.x-labels').attr('role', Roles.GROUP);
+        var xLabelUpdate = xLabels.selectAll('text').data(this.uniqueKeys);
         xLabelUpdate.join(function (enter) {
             return enter
-                .append("text")
+                .append('text')
                 .text(function (key) { return key; })
-                .attr("opacity", 0)
-                .attr("x", function (key) {
+                .attr('opacity', 0)
+                .attr('x', function (key) {
                 return polarToCartesianCoords(xScale(key), yScale.range()[1] + xLabelPadding, c).x;
             })
-                .attr("y", function (key) {
+                .attr('y', function (key) {
                 return polarToCartesianCoords(xScale(key), yScale.range()[1] + xLabelPadding, c).y;
             })
-                .style("text-anchor", function (key) { return radialLabelPlacement(xScale(key)).textAnchor; })
-                .style("dominant-baseline", function (key) {
+                .style('text-anchor', function (key) { return radialLabelPlacement(xScale(key)).textAnchor; })
+                .style('dominant-baseline', function (key) {
                 return radialLabelPlacement(xScale(key)).dominantBaseline;
             })
                 .call(function (selection) {
                 return selection
-                    .transition(_this.services.transitions.getTransition("radar_x_labels_enter", animate))
-                    .attr("opacity", 1);
+                    .transition(_this.services.transitions.getTransition('radar_x_labels_enter', animate))
+                    .attr('opacity', 1);
             });
         }, function (update) {
             return update.call(function (selection) {
                 return selection
-                    .transition(_this.services.transitions.getTransition("radar_x_labels_update", animate))
-                    .attr("opacity", 1)
-                    .attr("x", function (key) {
+                    .transition(_this.services.transitions.getTransition('radar_x_labels_update', animate))
+                    .attr('opacity', 1)
+                    .attr('x', function (key) {
                     return polarToCartesianCoords(xScale(key), yScale.range()[1] + xLabelPadding, c).x;
                 })
-                    .attr("y", function (key) {
+                    .attr('y', function (key) {
                     return polarToCartesianCoords(xScale(key), yScale.range()[1] + xLabelPadding, c).y;
                 });
             });
         }, function (exit) {
             return exit.call(function (selection) {
                 return selection
-                    .transition(_this.services.transitions.getTransition("radar_x_labels_exit", animate))
-                    .attr("opacity", 0)
+                    .transition(_this.services.transitions.getTransition('radar_x_labels_exit', animate))
+                    .attr('opacity', 0)
                     .remove();
             });
         });
         // blobs
-        var blobs = DOMUtils.appendOrSelect(svg, "g.blobs").attr("role", Roles.GROUP);
+        var blobs = DOMUtils.appendOrSelect(svg, 'g.blobs').attr('role', Roles.GROUP);
         var blobUpdate = blobs
-            .selectAll("path")
+            .selectAll('path')
             .data(this.groupedDataNormalized, function (group) { return group.name; });
         blobUpdate.join(function (enter) {
             return enter
-                .append("path")
-                .attr("class", function (group) {
+                .append('path')
+                .attr('class', function (group) {
                 return _this.model.getColorClassName({
                     classNameTypes: [
                         ColorClassNameTypes.FILL,
-                        ColorClassNameTypes.STROKE
+                        ColorClassNameTypes.STROKE,
                     ],
                     dataGroupName: group.name,
-                    originalClassName: "blob"
+                    originalClassName: 'blob',
                 });
             })
-                .attr("role", Roles.GRAPHICS_SYMBOL)
-                .attr("opacity", 0)
-                .attr("transform", "translate(" + c.x + ", " + c.y + ")")
-                .style("fill", function (group) { return colorScale(group.name); })
-                .style("fill-opacity", Configuration.radar.opacity.selected)
-                .style("stroke", function (group) { return colorScale(group.name); })
-                .attr("d", function (group) { return oldRadialLineGenerator(group.data); })
+                .attr('role', Roles.GRAPHICS_SYMBOL)
+                .attr('opacity', 0)
+                .attr('transform', "translate(" + c.x + ", " + c.y + ")")
+                .style('fill', function (group) { return colorScale(group.name); })
+                .style('fill-opacity', Configuration.radar.opacity.selected)
+                .style('stroke', function (group) { return colorScale(group.name); })
+                .attr('d', function (group) { return oldRadialLineGenerator(group.data); })
                 .call(function (selection) {
                 return selection
-                    .transition(_this.services.transitions.getTransition("radar_blobs_enter", animate))
-                    .attr("opacity", 1)
-                    .attr("d", function (group) {
+                    .transition(_this.services.transitions.getTransition('radar_blobs_enter', animate))
+                    .attr('opacity', 1)
+                    .attr('d', function (group) {
                     return radialLineGenerator(group.data);
                 });
             });
         }, function (update) {
             update
-                .attr("class", function (group) {
+                .attr('class', function (group) {
                 return _this.model.getColorClassName({
                     classNameTypes: [
                         ColorClassNameTypes.FILL,
-                        ColorClassNameTypes.STROKE
+                        ColorClassNameTypes.STROKE,
                     ],
                     dataGroupName: group.name,
-                    originalClassName: "blob"
+                    originalClassName: 'blob',
                 });
             })
-                .style("fill", function (group) { return colorScale(group.name); })
-                .style("stroke", function (group) { return colorScale(group.name); });
+                .style('fill', function (group) { return colorScale(group.name); })
+                .style('stroke', function (group) { return colorScale(group.name); });
             update.call(function (selection) {
                 return selection
-                    .transition(_this.services.transitions.getTransition("radar_blobs_update", animate))
-                    .attr("opacity", 1)
-                    .attr("transform", "translate(" + c.x + ", " + c.y + ")")
-                    .attr("d", function (group) { return radialLineGenerator(group.data); });
+                    .transition(_this.services.transitions.getTransition('radar_blobs_update', animate))
+                    .attr('opacity', 1)
+                    .attr('transform', "translate(" + c.x + ", " + c.y + ")")
+                    .attr('d', function (group) { return radialLineGenerator(group.data); });
             });
         }, function (exit) {
             return exit.call(function (selection) {
                 return selection
-                    .transition(_this.services.transitions.getTransition("radar_blobs_exit", animate))
-                    .attr("d", function (group) { return radialLineGenerator(group.data); })
-                    .attr("opacity", 0)
+                    .transition(_this.services.transitions.getTransition('radar_blobs_exit', animate))
+                    .attr('d', function (group) { return radialLineGenerator(group.data); })
+                    .attr('opacity', 0)
                     .remove();
             });
         });
         // data dots
-        var dots = DOMUtils.appendOrSelect(svg, "g.dots").attr("role", Roles.GROUP);
+        var dots = DOMUtils.appendOrSelect(svg, 'g.dots').attr('role', Roles.GROUP);
         var dotsUpdate = dots
-            .selectAll("circle")
+            .selectAll('circle')
             .data(this.displayDataNormalized);
         dotsUpdate
             .join(function (enter) {
-            return enter.append("circle").attr("role", Roles.GRAPHICS_SYMBOL);
+            return enter.append('circle').attr('role', Roles.GRAPHICS_SYMBOL);
         }, function (update) { return update; }, function (exit) { return exit.remove(); })
-            .attr("class", function (d) {
+            .attr('class', function (d) {
             return _this.model.getColorClassName({
                 classNameTypes: [ColorClassNameTypes.FILL],
                 dataGroupName: d[groupMapsTo],
-                originalClassName: Tools.kebabCase(d[angle])
+                originalClassName: Tools.kebabCase(d[angle]),
             });
         })
-            .attr("cx", function (d) {
+            .attr('cx', function (d) {
             return polarToCartesianCoords(xScale(d[angle]), yScale(d[value]), c).x;
         })
-            .attr("cy", function (d) {
+            .attr('cy', function (d) {
             return polarToCartesianCoords(xScale(d[angle]), yScale(d[value]), c).y;
         })
-            .attr("r", 0)
-            .attr("opacity", 0)
-            .style("fill", function (d) { return colorScale(d[groupMapsTo]); });
+            .attr('r', 0)
+            .attr('opacity', 0)
+            .style('fill', function (d) { return colorScale(d[groupMapsTo]); });
         // rectangles
-        var xAxesRect = DOMUtils.appendOrSelect(svg, "g.x-axes-rect").attr("role", Roles.GROUP);
+        var xAxesRect = DOMUtils.appendOrSelect(svg, 'g.x-axes-rect').attr('role', Roles.GROUP);
         var xAxisRectUpdate = xAxesRect
-            .selectAll("rect")
+            .selectAll('rect')
             .data(this.uniqueKeys);
         xAxisRectUpdate
             .join(function (enter) {
-            return enter.append("rect").attr("role", Roles.GRAPHICS_SYMBOL);
+            return enter.append('rect').attr('role', Roles.GRAPHICS_SYMBOL);
         }, function (update) { return update; }, function (exit) { return exit.remove(); })
-            .attr("x", c.x)
-            .attr("y", c.y - xAxisRectHeight / 2)
-            .attr("width", yScale.range()[1])
-            .attr("height", xAxisRectHeight)
-            .style("fill", "red")
-            .style("fill-opacity", 0)
-            .attr("transform", function (key) { return "rotate(" + radToDeg(xScale(key)) + ", " + c.x + ", " + c.y + ")"; });
+            .attr('x', c.x)
+            .attr('y', c.y - xAxisRectHeight / 2)
+            .attr('width', yScale.range()[1])
+            .attr('height', xAxisRectHeight)
+            .style('fill', 'red')
+            .style('fill-opacity', 0)
+            .attr('transform', function (key) { return "rotate(" + radToDeg(xScale(key)) + ", " + c.x + ", " + c.y + ")"; });
         // y labels (show only the min and the max labels)
-        var yLabels = DOMUtils.appendOrSelect(svg, "g.y-labels").attr("role", Roles.GROUP);
-        var yLabelUpdate = yLabels.selectAll("text").data(extent(yTicks));
+        var yLabels = DOMUtils.appendOrSelect(svg, 'g.y-labels').attr('role', Roles.GROUP);
+        var yLabelUpdate = yLabels.selectAll('text').data(extent(yTicks));
         yLabelUpdate.join(function (enter) {
             return enter
-                .append("text")
-                .attr("opacity", 0)
+                .append('text')
+                .attr('opacity', 0)
                 .text(function (tick) { return tick; })
-                .attr("x", function (tick) {
+                .attr('x', function (tick) {
                 return polarToCartesianCoords(-Math.PI / 2, yScale(tick), c).x + yLabelPadding;
             })
-                .attr("y", function (tick) {
+                .attr('y', function (tick) {
                 return polarToCartesianCoords(-Math.PI / 2, yScale(tick), c).y;
             })
-                .style("text-anchor", "start")
-                .style("dominant-baseline", "middle")
+                .style('text-anchor', 'start')
+                .style('dominant-baseline', 'middle')
                 .call(function (selection) {
                 return selection
-                    .transition(_this.services.transitions.getTransition("radar_y_labels_enter", animate))
-                    .attr("opacity", 1);
+                    .transition(_this.services.transitions.getTransition('radar_y_labels_enter', animate))
+                    .attr('opacity', 1);
             });
         }, function (update) {
             return update.call(function (selection) {
                 return selection
-                    .transition(_this.services.transitions.getTransition("radar_y_labels_update", animate))
+                    .transition(_this.services.transitions.getTransition('radar_y_labels_update', animate))
                     .text(function (tick) { return tick; })
-                    .attr("opacity", 1)
-                    .attr("x", function (tick) {
+                    .attr('opacity', 1)
+                    .attr('x', function (tick) {
                     return polarToCartesianCoords(-Math.PI / 2, yScale(tick), c).x + yLabelPadding;
                 })
-                    .attr("y", function (tick) {
+                    .attr('y', function (tick) {
                     return polarToCartesianCoords(-Math.PI / 2, yScale(tick), c).y;
                 });
             });
         }, function (exit) {
             return exit.call(function (selection) {
                 return selection
-                    .transition(_this.services.transitions.getTransition("radar_y_labels_exit", animate))
-                    .attr("opacity", 0)
+                    .transition(_this.services.transitions.getTransition('radar_y_labels_exit', animate))
+                    .attr('opacity', 0)
                     .remove();
             });
         });
-        var alignment = Tools.getProperty(options, "radar", "alignment");
+        var alignment = Tools.getProperty(options, 'radar', 'alignment');
         var alignmentOffset = DOMUtils.getAlignmentOffset(alignment, svg, this.getParent());
-        svg.attr("transform", "translate(" + alignmentOffset + ", 0)");
+        svg.attr('transform', "translate(" + alignmentOffset + ", 0)");
         // Add event listeners
         this.addEventListeners();
         oldYScale = yScale; // save the current scale as the old one
@@ -490,10 +490,10 @@ var Radar = /** @class */ (function (_super) {
     Radar.prototype.destroy = function () {
         // Remove event listeners
         this.parent
-            .selectAll(".x-axes-rect > rect")
-            .on("mouseover", null)
-            .on("mousemove", null)
-            .on("mouseout", null);
+            .selectAll('.x-axes-rect > rect')
+            .on('mouseover', null)
+            .on('mousemove', null)
+            .on('mouseout', null);
         // Remove legend listeners
         var eventsFragment = this.services.events;
         eventsFragment.removeEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);
@@ -501,76 +501,76 @@ var Radar = /** @class */ (function (_super) {
     };
     Radar.prototype.addEventListeners = function () {
         var self = this;
-        var angle = Tools.getProperty(this.getOptions(), "radar").axes.angle;
+        var angle = Tools.getProperty(this.getOptions(), 'radar').axes.angle;
         // events on x axes rects
         this.parent
-            .selectAll(".x-axes-rect > rect")
-            .on("mouseover", function (datum) {
+            .selectAll('.x-axes-rect > rect')
+            .on('mouseover', function (datum) {
             var hoveredElement = select(this);
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Radar.X_AXIS_MOUSEOVER, {
                 element: hoveredElement,
-                datum: datum
+                datum: datum,
             });
             var axisLine = self.parent.select(".x-axes .x-axis-" + Tools.kebabCase(datum));
             var dots = self.parent.selectAll(".dots circle." + Tools.kebabCase(datum));
             // Change style
             axisLine
-                .classed("hovered", true)
-                .attr("stroke-dasharray", "4 4");
-            dots.classed("hovered", true)
-                .attr("opacity", 1)
-                .attr("r", Configuration.radar.dotsRadius);
+                .classed('hovered', true)
+                .attr('stroke-dasharray', '4 4');
+            dots.classed('hovered', true)
+                .attr('opacity', 1)
+                .attr('r', Configuration.radar.dotsRadius);
             // get the items that should be highlighted
             var itemsToHighlight = self.displayDataNormalized.filter(function (d) { return d[angle] === datum; });
             var options = self.getOptions();
             var groupMapsTo = options.data.groupMapsTo;
-            var valueMapsTo = Tools.getProperty(options, "radar", "axes", "value");
+            var valueMapsTo = Tools.getProperty(options, 'radar', 'axes', 'value');
             // Show tooltip
             self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                 hoveredElement: hoveredElement,
                 items: itemsToHighlight
-                    .filter(function (datum) { return typeof datum[valueMapsTo] === "number"; })
+                    .filter(function (datum) { return typeof datum[valueMapsTo] === 'number'; })
                     .map(function (datum) { return ({
                     label: datum[groupMapsTo],
                     value: datum[valueMapsTo],
                     color: self.model.getFillColor(datum[groupMapsTo]),
                     class: self.model.getColorClassName({
                         classNameTypes: [ColorClassNameTypes.TOOLTIP],
-                        dataGroupName: datum[groupMapsTo]
-                    })
-                }); })
+                        dataGroupName: datum[groupMapsTo],
+                    }),
+                }); }),
             });
         })
-            .on("mousemove", function (datum) {
+            .on('mousemove', function (datum) {
             var hoveredElement = select(this);
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Radar.X_AXIS_MOUSEMOVE, {
                 element: hoveredElement,
-                datum: datum
+                datum: datum,
             });
             self.services.events.dispatchEvent(Events.Tooltip.MOVE);
         })
-            .on("click", function (datum) {
+            .on('click', function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Radar.X_AXIS_CLICK, {
                 element: select(this),
-                datum: datum
+                datum: datum,
             });
         })
-            .on("mouseout", function (datum) {
+            .on('mouseout', function (datum) {
             var hoveredElement = select(this);
             var axisLine = self.parent.select(".x-axes .x-axis-" + Tools.kebabCase(datum));
             var dots = self.parent.selectAll(".dots circle." + Tools.kebabCase(datum));
             // Change style
             axisLine
-                .classed("hovered", false)
-                .attr("stroke-dasharray", "0");
-            dots.classed("hovered", false).attr("opacity", 0).attr("r", 0);
+                .classed('hovered', false)
+                .attr('stroke-dasharray', '0');
+            dots.classed('hovered', false).attr('opacity', 0).attr('r', 0);
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Radar.X_AXIS_MOUSEOUT, {
                 element: hoveredElement,
-                datum: datum
+                datum: datum,
             });
             // Hide tooltip
             self.services.events.dispatchEvent(Events.Tooltip.HIDE);