SONAR-13368 Bump to prettier@2.7.1

21 files changed, 221 insertions, 250 deletions

diff --git a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx
index 114afb0ae26..03100524339 100644
--- a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx
+++ b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx
@@ -77,7 +77,7 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
     eventSize: 8,
     maxYTicksCount: 4,
     padding: [26, 10, 50, 60],
-    zoomSpeed: 1
+    zoomSpeed: 1,
   };
 
   constructor(props: Props) {
@@ -131,15 +131,11 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
   }
 
   getRatingScale = (availableHeight: number) => {
-    return scalePoint<number>()
-      .domain([5, 4, 3, 2, 1])
-      .range([availableHeight, 0]);
+    return scalePoint<number>().domain([5, 4, 3, 2, 1]).range([availableHeight, 0]);
   };
 
   getLevelScale = (availableHeight: number) => {
-    return scalePoint()
-      .domain(['ERROR', 'WARN', 'OK'])
-      .range([availableHeight, 0]);
+    return scalePoint().domain(['ERROR', 'WARN', 'OK']).range([availableHeight, 0]);
   };
 
   getYScale = (props: Props, availableHeight: number, flatData: Chart.Point[]): YScale => {
@@ -150,12 +146,12 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
     }
     return scaleLinear()
       .range([availableHeight, 0])
-      .domain([0, max(flatData, d => Number(d.y || 0)) || 1])
+      .domain([0, max(flatData, (d) => Number(d.y || 0)) || 1])
       .nice();
   };
 
   getXScale = ({ startDate, endDate }: Props, availableWidth: number, flatData: Chart.Point[]) => {
-    const dateRange = extent(flatData, d => d.x) as [Date, Date];
+    const dateRange = extent(flatData, (d) => d.x) as [Date, Date];
     const start = startDate && startDate > dateRange[0] ? startDate : dateRange[0];
     const end = endDate && endDate < dateRange[1] ? endDate : dateRange[1];
     const xScale: ScaleTime<number, number> = scaleTime()
@@ -164,31 +160,31 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
       .clamp(false);
     return {
       xScale,
-      maxXRange: dateRange.map(xScale)
+      maxXRange: dateRange.map(xScale),
     };
   };
 
   getScales = (props: Props) => {
     const availableWidth = props.width - props.padding[1] - props.padding[3];
     const availableHeight = props.height - props.padding[0] - props.padding[2];
-    const flatData = flatten(props.series.map(serie => serie.data));
+    const flatData = flatten(props.series.map((serie) => serie.data));
     return {
       ...this.getXScale(props, availableWidth, flatData),
-      yScale: this.getYScale(props, availableHeight, flatData)
+      yScale: this.getYScale(props, availableHeight, flatData),
     };
   };
 
   getSelectedDatePos = (xScale: XScale, selectedDate?: Date) => {
     const firstSerie = this.props.series[0];
     if (selectedDate && firstSerie) {
-      const idx = firstSerie.data.findIndex(p => p.x.valueOf() === selectedDate.valueOf());
+      const idx = firstSerie.data.findIndex((p) => p.x.valueOf() === selectedDate.valueOf());
       const xRange = sortBy(xScale.range());
       const xPos = xScale(selectedDate);
       if (idx >= 0 && xPos >= xRange[0] && xPos <= xRange[1]) {
         return {
           selectedDate,
           selectedDateXPos: xScale(selectedDate),
-          selectedDateIdx: idx
+          selectedDateIdx: idx,
         };
       }
     }
@@ -239,7 +235,7 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
         mouseOver: false,
         selectedDate: undefined,
         selectedDateXPos: undefined,
-        selectedDateIdx: undefined
+        selectedDateIdx: undefined,
       });
       updateTooltip(undefined, undefined, undefined);
     }
@@ -259,12 +255,12 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
   };
 
   updateTooltipPos = (xPos: number) => {
-    this.setState(state => {
+    this.setState((state) => {
       const firstSerie = this.props.series[0];
       if (state.mouseOver && firstSerie) {
         const { updateTooltip } = this.props;
         const date = state.xScale.invert(xPos);
-        const bisectX = bisector<Chart.Point, Date>(d => d.x).right;
+        const bisectX = bisector<Chart.Point, Date>((d) => d.x).right;
         let idx = bisectX(firstSerie.data, date);
         if (idx >= 0) {
           const previousPoint = firstSerie.data[idx - 1];
@@ -303,7 +299,7 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
     // if there are duplicated ticks, that means 4 ticks are too much for this data
     // so let's just use the domain values (min and max)
     if (formatYTick) {
-      const formattedTicks = ticks.map(tick => formatYTick(tick));
+      const formattedTicks = ticks.map((tick) => formatYTick(tick));
       if (ticks.length > uniq(formattedTicks).length) {
         ticks = yScale.domain();
       }
@@ -311,7 +307,7 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
 
     return (
       <g>
-        {ticks.map(tick => (
+        {ticks.map((tick) => (
           <g key={tick}>
             {formatYTick != null && (
               <text
@@ -320,7 +316,8 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
                 dy="0.3em"
                 textAnchor="end"
                 x={xScale.range()[0]}
-                y={yScale(tick)}>
+                y={yScale(tick)}
+              >
                 {formatYTick(tick)}
               </text>
             )}
@@ -355,7 +352,8 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
               textAnchor="end"
               transform={`rotate(-35, ${x}, ${y})`}
               x={x}
-              y={y}>
+              y={y}
+            >
               {format(tick)}
             </text>
           );
@@ -407,7 +405,8 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
           ref={this.setLeakLegendTextWidth}
           x={legendPosition}
           y={yRange[yRange.length - 1] - legendPadding - legendMargin}
-          textAnchor={legendTextAnchor}>
+          textAnchor={legendTextAnchor}
+        >
           new code
         </text>
       </>
@@ -449,9 +448,9 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
 
   renderLines = () => {
     const lineGenerator = d3Line<Chart.Point>()
-      .defined(d => Boolean(d.y || d.y === 0))
-      .x(d => this.state.xScale(d.x))
-      .y(d => this.state.yScale(d.y));
+      .defined((d) => Boolean(d.y || d.y === 0))
+      .x((d) => this.state.xScale(d.x))
+      .y((d) => this.state.yScale(d.y));
     if (this.props.basisCurve) {
       lineGenerator.curve(curveBasis);
     }
@@ -496,16 +495,16 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
               })
               .filter(isDefined)
           )
-          .filter(dots => dots.length > 0)}
+          .filter((dots) => dots.length > 0)}
       </g>
     );
   };
 
   renderAreas = () => {
     const areaGenerator = area<Chart.Point>()
-      .defined(d => Boolean(d.y || d.y === 0))
-      .x(d => this.state.xScale(d.x))
-      .y1(d => this.state.yScale(d.y))
+      .defined((d) => Boolean(d.y || d.y === 0))
+      .x((d) => this.state.xScale(d.x))
+      .y1((d) => this.state.yScale(d.y))
       .y0(this.state.yScale(0));
     if (this.props.basisCurve) {
       areaGenerator.curve(curveBasis);
@@ -607,7 +606,7 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
       hideGrid,
       hideXAxis,
       showAreas,
-      graphDescription
+      graphDescription,
     } = this.props;
     if (!width || !height) {
       return <div />;
@@ -619,7 +618,8 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State>
         aria-label={graphDescription}
         className={classNames('line-chart', { 'chart-zoomed': isZoomed })}
         height={height}
-        width={width}>
+        width={width}
+      >
         {zoomEnabled && this.renderClipPath()}
         <g transform={`translate(${padding[3]}, ${padding[0]})`}>
           {leakPeriodDate != null && this.renderLeak()}
diff --git a/server/sonar-web/src/main/js/components/charts/BarChart.tsx b/server/sonar-web/src/main/js/components/charts/BarChart.tsx
index 188a7cdb8bc..5d1ddc8654d 100644
--- a/server/sonar-web/src/main/js/components/charts/BarChart.tsx
+++ b/server/sonar-web/src/main/js/components/charts/BarChart.tsx
@@ -69,7 +69,8 @@ export default class BarChart<T> extends React.PureComponent<Props<T>> {
           onClick={() => this.handleClick(point)}
           style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
           x={x}
-          y={y}>
+          y={y}
+        >
           {tick}
         </text>
       );
@@ -103,7 +104,8 @@ export default class BarChart<T> extends React.PureComponent<Props<T>> {
           onClick={() => this.handleClick(point)}
           style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
           x={x}
-          y={y}>
+          y={y}
+        >
           {value}
         </text>
       );
@@ -156,14 +158,12 @@ export default class BarChart<T> extends React.PureComponent<Props<T>> {
     const innerPadding = (availableWidth - barsWidth * data.length) / (data.length - 1);
     const relativeInnerPadding = innerPadding / (innerPadding + barsWidth);
 
-    const maxY = max(data, d => d.y) as number;
+    const maxY = max(data, (d) => d.y) as number;
     const xScale = scaleBand<number>()
-      .domain(data.map(d => d.x))
+      .domain(data.map((d) => d.x))
       .range([0, availableWidth])
       .paddingInner(relativeInnerPadding);
-    const yScale = scaleLinear()
-      .domain([0, maxY])
-      .range([availableHeight, 0]);
+    const yScale = scaleLinear().domain([0, maxY]).range([availableHeight, 0]);
 
     return (
       <svg className="bar-chart" height={height} width={width}>
diff --git a/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx b/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx
index 955d9f62610..e2c0f16e638 100644
--- a/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx
+++ b/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx
@@ -77,7 +77,7 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
     formatXTick: (d: number) => String(d),
     formatYTick: (d: number) => String(d),
     padding: [10, 10, 10, 10],
-    sizeRange: [5, 45]
+    sizeRange: [5, 45],
   };
 
   constructor(props: Props<T>) {
@@ -90,16 +90,14 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
       const rect = this.node.getBoundingClientRect();
       this.zoom.translateExtent([
         [0, 0],
-        [rect.width, rect.height]
+        [rect.width, rect.height],
       ]);
     }
   }
 
   boundNode = (node: SVGSVGElement) => {
     this.node = node;
-    this.zoom = zoom()
-      .scaleExtent([1, 10])
-      .on('zoom', this.zoomed);
+    this.zoom = zoom().scaleExtent([1, 10]).on('zoom', this.zoomed);
     select(this.node).call(this.zoom as any);
   };
 
@@ -110,8 +108,8 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
       transform: {
         x: x + padding[3] * (k - 1),
         y: y + padding[0] * (k - 1),
-        k
-      }
+        k,
+      },
     });
   };
 
@@ -124,16 +122,16 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
   };
 
   getXRange(xScale: Scale, sizeScale: Scale, availableWidth: number) {
-    const minX = min(this.props.items, d => xScale(d.x) - sizeScale(d.size)) || 0;
-    const maxX = max(this.props.items, d => xScale(d.x) + sizeScale(d.size)) || 0;
+    const minX = min(this.props.items, (d) => xScale(d.x) - sizeScale(d.size)) || 0;
+    const maxX = max(this.props.items, (d) => xScale(d.x) + sizeScale(d.size)) || 0;
     const dMinX = minX < 0 ? xScale.range()[0] - minX : xScale.range()[0];
     const dMaxX = maxX > xScale.range()[1] ? maxX - xScale.range()[1] : 0;
     return [dMinX, availableWidth - dMaxX];
   }
 
   getYRange(yScale: Scale, sizeScale: Scale, availableHeight: number) {
-    const minY = min(this.props.items, d => yScale(d.y) - sizeScale(d.size)) || 0;
-    const maxY = max(this.props.items, d => yScale(d.y) + sizeScale(d.size)) || 0;
+    const minY = min(this.props.items, (d) => yScale(d.y) - sizeScale(d.size)) || 0;
+    const maxY = max(this.props.items, (d) => yScale(d.y) + sizeScale(d.size)) || 0;
     const dMinY = minY < 0 ? yScale.range()[1] - minY : yScale.range()[1];
     const dMaxY = maxY > yScale.range()[0] ? maxY - yScale.range()[0] : 0;
     return [availableHeight - dMaxY, dMinY];
@@ -141,7 +139,7 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
 
   getTicks(scale: Scale, format: (d: number) => string) {
     const zoomAmount = Math.ceil(this.state.transform.k);
-    const ticks = scale.ticks(TICKS_COUNT * zoomAmount).map(tick => format(tick));
+    const ticks = scale.ticks(TICKS_COUNT * zoomAmount).map((tick) => format(tick));
     const uniqueTicksCount = uniq(ticks).length;
     const ticksCount =
       uniqueTicksCount < TICKS_COUNT * zoomAmount ? uniqueTicksCount - 1 : TICKS_COUNT * zoomAmount;
@@ -243,7 +241,8 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
           // eslint-disable-next-line react/no-array-index-key
           key={index}
           x={x}
-          y={y}>
+          y={y}
+        >
           {innerText}
         </text>
       ) : null;
@@ -258,15 +257,15 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
     const availableHeight = this.props.height - this.props.padding[0] - this.props.padding[2];
 
     const xScale = scaleLinear()
-      .domain(this.props.xDomain || [0, max(this.props.items, d => d.x) || 0])
+      .domain(this.props.xDomain || [0, max(this.props.items, (d) => d.x) || 0])
       .range([0, availableWidth])
       .nice();
     const yScale = scaleLinear()
-      .domain(this.props.yDomain || [0, max(this.props.items, d => d.y) || 0])
+      .domain(this.props.yDomain || [0, max(this.props.items, (d) => d.y) || 0])
       .range([availableHeight, 0])
       .nice();
     const sizeScale = scaleLinear()
-      .domain(this.props.sizeDomain || [0, max(this.props.items, d => d.size) || 0])
+      .domain(this.props.sizeDomain || [0, max(this.props.items, (d) => d.size) || 0])
       .range(this.props.sizeRange || []);
 
     const xScaleOriginal = xScale.copy();
@@ -275,7 +274,7 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
     xScale.range(this.getXRange(xScale, sizeScale, availableWidth));
     yScale.range(this.getYRange(yScale, sizeScale, availableHeight));
 
-    const bubbles = sortBy(this.props.items, b => -b.size).map((item, index) => {
+    const bubbles = sortBy(this.props.items, (b) => -b.size).map((item, index) => {
       return (
         <Bubble
           color={item.color}
@@ -299,7 +298,8 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
         className={classNames('bubble-chart')}
         height={this.props.height}
         ref={this.boundNode}
-        width={width}>
+        width={width}
+      >
         <defs>
           <clipPath id="graph-region">
             <rect
@@ -336,7 +336,7 @@ export default class BubbleChart<T> extends React.PureComponent<Props<T>, State>
             </Link>
           </Tooltip>
         </div>
-        <AutoSizer disableHeight={true}>{size => this.renderChart(size.width)}</AutoSizer>
+        <AutoSizer disableHeight={true}>{(size) => this.renderChart(size.width)}</AutoSizer>
       </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.tsx b/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.tsx
index 98b37510dfb..8cd5c7659e9 100644
--- a/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.tsx
+++ b/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.tsx
@@ -42,7 +42,7 @@ export default function ColorGradientLegend({
   padding = [12, 24, 0, 0],
   height,
   showColorNA = false,
-  width
+  width,
 }: Props) {
   const colorRange: Array<string | number> = colorScale.range();
   const colorDomain: Array<string | number> = colorScale.domain();
@@ -65,8 +65,9 @@ export default function ColorGradientLegend({
           width="30"
           height="30"
           patternTransform="rotate(45 0 0)"
-          patternUnits="userSpaceOnUse">
-          {NA_GRADIENT_LINE_INCREMENTS.map(i => (
+          patternUnits="userSpaceOnUse"
+        >
+          {NA_GRADIENT_LINE_INCREMENTS.map((i) => (
             <React.Fragment key={i}>
               <line
                 x1={i}
@@ -95,7 +96,8 @@ export default function ColorGradientLegend({
             // eslint-disable-next-line react/no-array-index-key
             key={idx}
             x={widthNoPadding * (idx / lastDomainIdx)}
-            y={0}>
+            y={0}
+          >
             {d}
           </text>
         ))}
@@ -113,7 +115,8 @@ export default function ColorGradientLegend({
             className="gradient-legend-na"
             dy="-2px"
             x={NA_SPACING + (padding[1] - NA_SPACING) / 2}
-            y={0}>
+            y={0}
+          >
             N/A
           </text>
         </g>
diff --git a/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx b/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx
index 982d0fea5c6..526f303b240 100644
--- a/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx
+++ b/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx
@@ -38,23 +38,26 @@ export default function ColorRatingsLegend(props: ColorRatingsLegendProps) {
   const { className, filters } = props;
   return (
     <ul className={classNames('color-box-legend', className)}>
-      {RATINGS.map(rating => (
+      {RATINGS.map((rating) => (
         <li key={rating}>
           <Tooltip
             overlay={translateWithParameters(
               'component_measures.legend.help_x',
               formatMeasure(rating, 'RATING')
-            )}>
+            )}
+          >
             <Checkbox
               className="display-flex-center"
               checked={!filters[rating]}
-              onCheck={() => props.onRatingClick(rating)}>
+              onCheck={() => props.onRatingClick(rating)}
+            >
               <span
                 className="color-box-legend-rating little-spacer-left"
                 style={{
                   borderColor: RATING_COLORS[rating - 1].stroke,
-                  backgroundColor: RATING_COLORS[rating - 1].fillTransparent
-                }}>
+                  backgroundColor: RATING_COLORS[rating - 1].fillTransparent,
+                }}
+              >
                 {formatMeasure(rating, 'RATING')}
               </span>
             </Checkbox>
diff --git a/server/sonar-web/src/main/js/components/charts/DonutChart.tsx b/server/sonar-web/src/main/js/components/charts/DonutChart.tsx
index cee0f656c9e..3fbd261f68c 100644
--- a/server/sonar-web/src/main/js/components/charts/DonutChart.tsx
+++ b/server/sonar-web/src/main/js/components/charts/DonutChart.tsx
@@ -45,7 +45,7 @@ export default function DonutChart(props: DonutChartProps) {
 
   const pie = d3Pie<any, DataPoint>()
     .sort(null)
-    .value(d => d.value);
+    .value((d) => d.value);
 
   if (padAngle !== undefined) {
     pie.padAngle(padAngle);
diff --git a/server/sonar-web/src/main/js/components/charts/Histogram.tsx b/server/sonar-web/src/main/js/components/charts/Histogram.tsx
index 22d634edcf6..f2dc6aa4641 100644
--- a/server/sonar-web/src/main/js/components/charts/Histogram.tsx
+++ b/server/sonar-web/src/main/js/components/charts/Histogram.tsx
@@ -92,7 +92,8 @@ export default class Histogram extends React.PureComponent<Props> {
         dx={alignTicks ? 0 : '-1em'}
         dy="0.3em"
         x={x}
-        y={y}>
+        y={y}
+      >
         {tick}
       </text>
     );
diff --git a/server/sonar-web/src/main/js/components/charts/LanguageDistribution.tsx b/server/sonar-web/src/main/js/components/charts/LanguageDistribution.tsx
index 18dc1af38c6..377562b85d8 100644
--- a/server/sonar-web/src/main/js/components/charts/LanguageDistribution.tsx
+++ b/server/sonar-web/src/main/js/components/charts/LanguageDistribution.tsx
@@ -34,19 +34,19 @@ interface LanguageDistributionProps {
 const NUMBER_FORMAT_THRESHOLD = 1000;
 
 export function LanguageDistribution(props: LanguageDistributionProps) {
-  let distribution = props.distribution.split(';').map(point => {
+  let distribution = props.distribution.split(';').map((point) => {
     const tokens = point.split('=');
     return { language: tokens[0], lines: parseInt(tokens[1], 10) };
   });
 
-  distribution = sortBy(distribution, d => -d.lines);
+  distribution = sortBy(distribution, (d) => -d.lines);
 
-  const data = distribution.map(d => d.lines);
-  const yTicks = distribution.map(d => getLanguageName(d.language)).map(cutLanguageName);
-  const yTooltips = distribution.map(d =>
+  const data = distribution.map((d) => d.lines);
+  const yTicks = distribution.map((d) => getLanguageName(d.language)).map(cutLanguageName);
+  const yTooltips = distribution.map((d) =>
     d.lines > NUMBER_FORMAT_THRESHOLD ? formatMeasure(d.lines, MetricType.Integer) : ''
   );
-  const yValues = distribution.map(d => formatMeasure(d.lines, MetricType.ShortInteger));
+  const yValues = distribution.map((d) => formatMeasure(d.lines, MetricType.ShortInteger));
 
   return (
     <Histogram
diff --git a/server/sonar-web/src/main/js/components/charts/LineChart.tsx b/server/sonar-web/src/main/js/components/charts/LineChart.tsx
index f08097ac18c..8354644e19c 100644
--- a/server/sonar-web/src/main/js/components/charts/LineChart.tsx
+++ b/server/sonar-web/src/main/js/components/charts/LineChart.tsx
@@ -52,16 +52,16 @@ export default class LineChart extends React.PureComponent<Props> {
     }
 
     const area = d3Area<DataPoint>()
-      .x(d => xScale(d.x))
+      .x((d) => xScale(d.x))
       .y0(yScale.range()[0])
-      .y1(d => yScale(d.y || 0))
-      .defined(d => d.y != null)
+      .y1((d) => yScale(d.y || 0))
+      .defined((d) => d.y != null)
       .curve(curveBasis);
 
     let { data } = this.props;
     if (this.props.backdropConstraints) {
       const c = this.props.backdropConstraints;
-      data = data.filter(d => c[0] <= d.x && d.x <= c[1]);
+      data = data.filter((d) => c[0] <= d.x && d.x <= c[1]);
     }
 
     return <path className="line-chart-backdrop" d={area(data) as string} />;
@@ -75,7 +75,7 @@ export default class LineChart extends React.PureComponent<Props> {
     }
 
     const points = this.props.data
-      .filter(point => point.y != null)
+      .filter((point) => point.y != null)
       .map((point, index) => {
         const x = xScale(point.x);
         const y = yScale(point.y || 0);
@@ -146,9 +146,9 @@ export default class LineChart extends React.PureComponent<Props> {
 
   renderLine(xScale: ScaleLinear<number, number>, yScale: ScaleLinear<number, number>) {
     const p = d3Line<DataPoint>()
-      .x(d => xScale(d.x))
-      .y(d => yScale(d.y || 0))
-      .defined(d => d.y != null)
+      .x((d) => xScale(d.x))
+      .y((d) => yScale(d.y || 0))
+      .defined((d) => d.y != null)
       .curve(curveBasis);
     return <path className="line-chart-path" d={p(this.props.data) as string} />;
   }
@@ -164,14 +164,14 @@ export default class LineChart extends React.PureComponent<Props> {
     const availableHeight = height - padding[0] - padding[2];
 
     const xScale = scaleLinear()
-      .domain(extent(this.props.data, d => d.x) as [number, number])
+      .domain(extent(this.props.data, (d) => d.x) as [number, number])
       .range([0, availableWidth]);
     const yScale = scaleLinear().range([availableHeight, 0]);
 
     if (this.props.domain) {
       yScale.domain(this.props.domain);
     } else {
-      const maxY = max(this.props.data, d => d.y) as number;
+      const maxY = max(this.props.data, (d) => d.y) as number;
       yScale.domain([0, maxY]);
     }
 
@@ -193,7 +193,7 @@ export default class LineChart extends React.PureComponent<Props> {
     return this.props.width !== undefined ? (
       this.renderChart(this.props.width)
     ) : (
-      <AutoSizer disableHeight={true}>{size => this.renderChart(size.width)}</AutoSizer>
+      <AutoSizer disableHeight={true}>{(size) => this.renderChart(size.width)}</AutoSizer>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/components/charts/TreeMap.tsx b/server/sonar-web/src/main/js/components/charts/TreeMap.tsx
index 9e55af3a974..68357581674 100644
--- a/server/sonar-web/src/main/js/components/charts/TreeMap.tsx
+++ b/server/sonar-web/src/main/js/components/charts/TreeMap.tsx
@@ -75,20 +75,18 @@ export default class TreeMap extends React.PureComponent<Props> {
   render() {
     const { items, height, width } = this.props;
     const hierarchy = d3Hierarchy({ children: items } as HierarchicalTreemapItem)
-      .sum(d => d.size)
+      .sum((d) => d.size)
       .sort((a, b) => (b.value || 0) - (a.value || 0));
 
-    const treemap = d3Treemap<TreeMapItem>()
-      .round(true)
-      .size([width, height]);
+    const treemap = d3Treemap<TreeMapItem>().round(true).size([width, height]);
 
     const nodes = treemap(hierarchy).leaves();
-    const prefix = this.mostCommitPrefix(items.map(item => item.label));
+    const prefix = this.mostCommitPrefix(items.map((item) => item.label));
     const halfWidth = width / 2;
     return (
       <div className="sonar-d3">
         <div className="treemap-container" style={{ width, height }}>
-          {nodes.map(node => (
+          {nodes.map((node) => (
             <TreeMapRect
               fill={node.data.color}
               gradient={node.data.gradient}
diff --git a/server/sonar-web/src/main/js/components/charts/TreeMapRect.tsx b/server/sonar-web/src/main/js/components/charts/TreeMapRect.tsx
index 40ac38666fa..1ef42c2e899 100644
--- a/server/sonar-web/src/main/js/components/charts/TreeMapRect.tsx
+++ b/server/sonar-web/src/main/js/components/charts/TreeMapRect.tsx
@@ -25,10 +25,7 @@ import Link from '../common/Link';
 import Tooltip, { Placement } from '../controls/Tooltip';
 import LinkIcon from '../icons/LinkIcon';
 
-const SIZE_SCALE = scaleLinear()
-  .domain([3, 15])
-  .range([11, 18])
-  .clamp(true);
+const SIZE_SCALE = scaleLinear().domain([3, 15]).range([11, 18]).clamp(true);
 
 interface Props {
   fill?: string;
@@ -88,7 +85,7 @@ export default class TreeMapRect extends React.PureComponent<Props> {
       backgroundSize: '12px 12px',
       fontSize: SIZE_SCALE(this.props.width / this.props.label.length),
       lineHeight: `${this.props.height}px`,
-      cursor: this.props.onClick != null ? 'pointer' : 'default'
+      cursor: this.props.onClick != null ? 'pointer' : 'default',
     };
     const isTextVisible =
       this.props.width >= TEXT_VISIBLE_AT_WIDTH && this.props.height >= TEXT_VISIBLE_AT_HEIGHT;
@@ -101,7 +98,8 @@ export default class TreeMapRect extends React.PureComponent<Props> {
         onClick={this.handleRectClick}
         role="treeitem"
         style={cellStyles}
-        tabIndex={0}>
+        tabIndex={0}
+      >
         {isTextVisible && (
           <div className="treemap-inner" style={{ maxWidth: this.props.width }}>
             {this.props.prefix || this.props.value ? (
diff --git a/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.tsx b/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.tsx
index 01e9951d87e..1a46ea54772 100644
--- a/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.tsx
+++ b/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.tsx
@@ -59,7 +59,7 @@ type YScale = any;
 export default class ZoomTimeLine extends React.PureComponent<Props, State> {
   static defaultProps = {
     padding: [0, 0, 18, 0],
-    showXTicks: true
+    showXTicks: true,
   };
 
   constructor(props: Props) {
@@ -69,15 +69,11 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
   }
 
   getRatingScale = (availableHeight: number) => {
-    return scalePoint<number>()
-      .domain([5, 4, 3, 2, 1])
-      .range([availableHeight, 0]);
+    return scalePoint<number>().domain([5, 4, 3, 2, 1]).range([availableHeight, 0]);
   };
 
   getLevelScale = (availableHeight: number) => {
-    return scalePoint()
-      .domain(['ERROR', 'WARN', 'OK'])
-      .range([availableHeight, 0]);
+    return scalePoint().domain(['ERROR', 'WARN', 'OK']).range([availableHeight, 0]);
   };
 
   getYScale = (availableHeight: number, flatData: Chart.Point[]): YScale => {
@@ -88,13 +84,13 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
     }
     return scaleLinear()
       .range([availableHeight, 0])
-      .domain([0, max(flatData, d => Number(d.y || 0)) as number])
+      .domain([0, max(flatData, (d) => Number(d.y || 0)) as number])
       .nice();
   };
 
   getXScale = (availableWidth: number, flatData: Chart.Point[]): XScale => {
     return scaleTime()
-      .domain(extent(flatData, d => d.x) as [Date, Date])
+      .domain(extent(flatData, (d) => d.x) as [Date, Date])
       .range([0, availableWidth])
       .clamp(true);
   };
@@ -102,10 +98,10 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
   getScales = () => {
     const availableWidth = this.props.width - this.props.padding[1] - this.props.padding[3];
     const availableHeight = this.props.height - this.props.padding[0] - this.props.padding[2];
-    const flatData = flatten(this.props.series.map(serie => serie.data));
+    const flatData = flatten(this.props.series.map((serie) => serie.data));
     return {
       xScale: this.getXScale(availableWidth, flatData),
-      yScale: this.getYScale(availableHeight, flatData)
+      yScale: this.getYScale(availableHeight, flatData),
     };
   };
 
@@ -118,34 +114,29 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
     this.handleZoomUpdate(xScale, xDim);
   };
 
-  handleSelectionDrag = (xScale: XScale, width: number, xDim: number[], checkDelta = false) => (
-    _: MouseEvent,
-    data: DraggableData
-  ) => {
-    if (!checkDelta || data.deltaX) {
-      const x = Math.max(xDim[0], Math.min(data.x, xDim[1] - width));
-      this.handleZoomUpdate(xScale, [x, width + x]);
-    }
-  };
+  handleSelectionDrag =
+    (xScale: XScale, width: number, xDim: number[], checkDelta = false) =>
+    (_: MouseEvent, data: DraggableData) => {
+      if (!checkDelta || data.deltaX) {
+        const x = Math.max(xDim[0], Math.min(data.x, xDim[1] - width));
+        this.handleZoomUpdate(xScale, [x, width + x]);
+      }
+    };
 
-  handleSelectionHandleDrag = (
-    xScale: XScale,
-    fixedX: number,
-    xDim: number[],
-    handleDirection: string,
-    checkDelta = false
-  ) => (_: MouseEvent, data: DraggableData) => {
-    if (!checkDelta || data.deltaX) {
-      const x = Math.max(xDim[0], Math.min(data.x, xDim[1]));
-      this.handleZoomUpdate(xScale, handleDirection === 'right' ? [fixedX, x] : [x, fixedX]);
-    }
-  };
+  handleSelectionHandleDrag =
+    (xScale: XScale, fixedX: number, xDim: number[], handleDirection: string, checkDelta = false) =>
+    (_: MouseEvent, data: DraggableData) => {
+      if (!checkDelta || data.deltaX) {
+        const x = Math.max(xDim[0], Math.min(data.x, xDim[1]));
+        this.handleZoomUpdate(xScale, handleDirection === 'right' ? [fixedX, x] : [x, fixedX]);
+      }
+    };
 
   handleNewZoomDragStart = (xDim: number[]) => (_: MouseEvent, data: DraggableData) => {
     const overlayLeftPos = data.node.getBoundingClientRect().left;
     this.setState({
       overlayLeftPos,
-      newZoomStart: Math.round(Math.max(xDim[0], Math.min(data.x - overlayLeftPos, xDim[1])))
+      newZoomStart: Math.round(Math.max(xDim[0], Math.min(data.x - overlayLeftPos, xDim[1]))),
     });
   };
 
@@ -159,17 +150,15 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
     }
   };
 
-  handleNewZoomDragEnd = (xScale: XScale, xDim: number[]) => (
-    _: MouseEvent,
-    data: DraggableData
-  ) => {
-    const { newZoomStart, overlayLeftPos } = this.state;
-    if (newZoomStart !== undefined && overlayLeftPos !== undefined) {
-      const x = Math.round(Math.max(xDim[0], Math.min(data.x - overlayLeftPos, xDim[1])));
-      this.handleZoomUpdate(xScale, newZoomStart === x ? xDim : sortBy([newZoomStart, x]));
-      this.setState({ newZoomStart: undefined, overlayLeftPos: undefined });
-    }
-  };
+  handleNewZoomDragEnd =
+    (xScale: XScale, xDim: number[]) => (_: MouseEvent, data: DraggableData) => {
+      const { newZoomStart, overlayLeftPos } = this.state;
+      if (newZoomStart !== undefined && overlayLeftPos !== undefined) {
+        const x = Math.round(Math.max(xDim[0], Math.min(data.x - overlayLeftPos, xDim[1])));
+        this.handleZoomUpdate(xScale, newZoomStart === x ? xDim : sortBy([newZoomStart, x]));
+        this.setState({ newZoomStart: undefined, overlayLeftPos: undefined });
+      }
+    };
 
   handleZoomUpdate = (xScale: XScale, xArray: number[]) => {
     const xRange = xScale.range();
@@ -235,9 +224,9 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
 
   renderLines = (xScale: XScale, yScale: YScale) => {
     const lineGenerator = d3Line<Chart.Point>()
-      .defined(d => Boolean(d.y || d.y === 0))
-      .x(d => xScale(d.x))
-      .y(d => yScale(d.y));
+      .defined((d) => Boolean(d.y || d.y === 0))
+      .x((d) => xScale(d.x))
+      .y((d) => yScale(d.y));
     if (this.props.basisCurve) {
       lineGenerator.curve(curveBasis);
     }
@@ -256,9 +245,9 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
 
   renderAreas = (xScale: XScale, yScale: YScale) => {
     const areaGenerator = area<Chart.Point>()
-      .defined(d => Boolean(d.y || d.y === 0))
-      .x(d => xScale(d.x))
-      .y1(d => yScale(d.y))
+      .defined((d) => Boolean(d.y || d.y === 0))
+      .x((d) => xScale(d.x))
+      .y1((d) => yScale(d.y))
       .y0(yScale(0));
     if (this.props.basisCurve) {
       areaGenerator.curve(curveBasis);
@@ -300,7 +289,8 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
         options.xDim,
         options.direction
       )}
-      position={{ x: options.xPos, y: 0 }}>
+      position={{ x: options.xPos, y: 0 }}
+    >
       <rect
         className="zoom-selection-handle"
         height={options.yDim[0] - options.yDim[1] + 1}
@@ -330,7 +320,8 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
         <DraggableCore
           onDrag={this.handleNewZoomDrag(xScale, xDim)}
           onStart={this.handleNewZoomDragStart(xDim)}
-          onStop={this.handleNewZoomDragEnd(xScale, xDim)}>
+          onStop={this.handleNewZoomDragEnd(xScale, xDim)}
+        >
           <rect
             className="zoom-overlay"
             height={yDim[0] - yDim[1]}
@@ -345,7 +336,8 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
             bounds={{ left: xDim[0], right: Math.floor(xDim[1] - zoomBoxWidth) } as DraggableBounds}
             onDrag={this.handleSelectionDrag(xScale, zoomBoxWidth, xDim, true)}
             onStop={this.handleSelectionDrag(xScale, zoomBoxWidth, xDim)}
-            position={{ x: xArray[0], y: 0 }}>
+            position={{ x: xArray[0], y: 0 }}
+          >
             <rect
               className="zoom-selection"
               height={yDim[0] - yDim[1] + 1}
@@ -363,7 +355,7 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
             fixedPos: endX,
             xDim,
             yDim,
-            direction: 'left'
+            direction: 'left',
           })}
         {showZoomArea &&
           this.renderZoomHandle({
@@ -372,7 +364,7 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> {
             fixedPos: startX,
             xDim,
             yDim,
-            direction: 'right'
+            direction: 'right',
           })}
       </g>
     );
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/AdvancedTimeline-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/AdvancedTimeline-test.tsx
index d9f5beea736..91b9cb80fe1 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/AdvancedTimeline-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/AdvancedTimeline-test.tsx
@@ -30,7 +30,7 @@ jest.mock('d3-scale', () => {
 
   return {
     ...others,
-    scaleTime: scaleUtc
+    scaleTime: scaleUtc,
   };
 });
 
@@ -44,7 +44,7 @@ it('should render correctly', () => {
   expect(shallowRender({ disableZoom: false, updateZoom: () => {} })).toMatchSnapshot(
     'Zoom enabled'
   );
-  expect(shallowRender({ formatYTick: t => `Nicer tick ${t}` })).toMatchSnapshot('format y tick');
+  expect(shallowRender({ formatYTick: (t) => `Nicer tick ${t}` })).toMatchSnapshot('format y tick');
   expect(shallowRender({ width: undefined })).toMatchSnapshot('no width');
   expect(shallowRender({ height: undefined })).toMatchSnapshot('no height');
   expect(shallowRender({ showAreas: undefined })).toMatchSnapshot('no areas');
@@ -61,7 +61,7 @@ it('should render leak correctly', () => {
 it('should render leak legend correctly', () => {
   const wrapper = shallowRender({
     displayNewCodeLegend: true,
-    leakPeriodDate: new Date('2019-10-02')
+    leakPeriodDate: new Date('2019-10-02'),
   });
 
   const leakNode = wrapper;
@@ -81,8 +81,8 @@ it('should render leak legend correctly for small leak', () => {
       mockData(4, '2020-02-04'),
       mockData(5, '2020-02-05'),
       mockData(6, '2020-02-06'),
-      mockData(7, '2020-02-07')
-    ]
+      mockData(7, '2020-02-07'),
+    ],
   });
 
   const leakNode = wrapper;
@@ -94,7 +94,7 @@ it('should set leakLegendTextWidth correctly', () => {
   const wrapper = shallowRender();
 
   wrapper.instance().setLeakLegendTextWidth({
-    getBoundingClientRect: () => ({ width: 12 } as DOMRect)
+    getBoundingClientRect: () => ({ width: 12 } as DOMRect),
   } as SVGTextElement);
 
   expect(wrapper.state().leakLegendTextWidth).toBe(12);
@@ -155,14 +155,14 @@ it('should handle scroll correcly', () => {
   let updateZoom = jest.fn();
   let preventDefault = jest.fn();
   let wrapper = shallowRender({ updateZoom });
-  wrapper.instance().handleWheel(({
+  wrapper.instance().handleWheel({
     preventDefault,
     deltaX: 1,
     deltaY: -2,
     deltaZ: 0,
     pageX: 100,
     pageY: 1,
-    currentTarget: ({
+    currentTarget: {
       getBoundingClientRect: () => ({
         bottom: 0,
         height: 100,
@@ -172,17 +172,17 @@ it('should handle scroll correcly', () => {
         top: 10,
         x: 12,
         y: 23,
-        toJSON: () => ''
-      })
-    } as any) as SVGElement
-  } as any) as React.WheelEvent<SVGElement>);
+        toJSON: () => '',
+      }),
+    } as any as SVGElement,
+  } as any as React.WheelEvent<SVGElement>);
   expect(preventDefault).toHaveBeenCalled();
   expect(updateZoom).toHaveBeenCalledWith(new Date('2019-10-01T06:24:00.000Z'), undefined);
 
   updateZoom = jest.fn();
   preventDefault = jest.fn();
   wrapper = shallowRender({ updateZoom });
-  wrapper.instance().handleWheel(({
+  wrapper.instance().handleWheel({
     preventDefault,
     deltaX: 1,
     deltaY: 2,
@@ -190,7 +190,7 @@ it('should handle scroll correcly', () => {
     pageX: 100,
     pageY: 1,
     deltaMode: 25,
-    currentTarget: ({
+    currentTarget: {
       getBoundingClientRect: () => ({
         bottom: 0,
         height: 100,
@@ -200,10 +200,10 @@ it('should handle scroll correcly', () => {
         top: 10,
         x: 12,
         y: 23,
-        toJSON: () => ''
-      })
-    } as any) as SVGElement
-  } as any) as React.WheelEvent<SVGElement>);
+        toJSON: () => '',
+      }),
+    } as any as SVGElement,
+  } as any as React.WheelEvent<SVGElement>);
   expect(preventDefault).toHaveBeenCalled();
   expect(updateZoom).toHaveBeenCalledWith(undefined, new Date('2019-10-02T20:48:00.000Z'));
 });
@@ -215,7 +215,7 @@ it('should handle mouse out correcly', () => {
     mouseOver: true,
     selectedDate: new Date(),
     selectedDateXPos: 1,
-    selectedDateIdx: 1
+    selectedDateIdx: 1,
   });
   wrapper.instance().handleMouseOut();
   expect(wrapper.state().mouseOver).toBe(true);
@@ -257,13 +257,13 @@ function shallowRender(props?: Partial<AdvancedTimeline['props']>) {
           data: [
             {
               x: new Date('2019-10-01'),
-              y: 1
+              y: 1,
             },
             {
               x: new Date('2019-10-02'),
-              y: 2
-            }
-          ]
+              y: 2,
+            },
+          ],
         },
         {
           name: 'test-2',
@@ -272,10 +272,10 @@ function shallowRender(props?: Partial<AdvancedTimeline['props']>) {
           data: [
             {
               x: new Date('2019-10-03'),
-              y: 3
-            }
-          ]
-        }
+              y: 3,
+            },
+          ],
+        },
       ]}
       width={100}
       zoomSpeed={1}
@@ -289,6 +289,6 @@ function mockData(i: number, date: string): Chart.Serie {
     name: `t${i}`,
     type: 'type',
     translatedName: '',
-    data: [{ x: new Date(date), y: i }]
+    data: [{ x: new Date(date), y: i }],
   };
 }
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/BarChart-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/BarChart-test.tsx
index 040c7fcd861..371c37ee5d2 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/BarChart-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/BarChart-test.tsx
@@ -25,7 +25,7 @@ it('should display bars', () => {
   const data = [
     { x: 1, y: 10, description: '' },
     { x: 2, y: 30, description: '' },
-    { x: 3, y: 20, description: '' }
+    { x: 3, y: 20, description: '' },
   ];
   const chart = shallow(<BarChart barsWidth={20} data={data} height={100} width={100} />);
   expect(chart.find('.bar-chart-bar').length).toBe(3);
@@ -35,7 +35,7 @@ it('should display ticks', () => {
   const data = [
     { x: 1, y: 10, description: '' },
     { x: 2, y: 30, description: '' },
-    { x: 3, y: 20, description: '' }
+    { x: 3, y: 20, description: '' },
   ];
   const ticks = ['A', 'B', 'C'];
   const chart = shallow(
@@ -48,7 +48,7 @@ it('should display values', () => {
   const data = [
     { x: 1, y: 10, description: '' },
     { x: 2, y: 30, description: '' },
-    { x: 3, y: 20, description: '' }
+    { x: 3, y: 20, description: '' },
   ];
   const values = ['A', 'B', 'C'];
   const chart = shallow(
@@ -61,7 +61,7 @@ it('should display bars, ticks and values', () => {
   const data = [
     { x: 1, y: 10, description: '' },
     { x: 2, y: 30, description: '' },
-    { x: 3, y: 20, description: '' }
+    { x: 3, y: 20, description: '' },
   ];
   const ticks = ['A', 'B', 'C'];
   const values = ['A', 'B', 'C'];
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx
index 91bf26bb3ac..69d1fe49fe9 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/BubbleChart-test.tsx
@@ -30,17 +30,17 @@ import { ComponentMeasureEnhanced } from '../../../types/types';
 import BubbleChart from '../BubbleChart';
 
 jest.mock('react-virtualized/dist/commonjs/AutoSizer', () => ({
-  AutoSizer: ({ children }: AutoSizerProps) => children({ width: 100, height: NaN })
+  AutoSizer: ({ children }: AutoSizerProps) => children({ width: 100, height: NaN }),
 }));
 
 jest.mock('d3-selection', () => ({
-  select: jest.fn().mockReturnValue({ call: jest.fn() })
+  select: jest.fn().mockReturnValue({ call: jest.fn() }),
 }));
 
 jest.mock('d3-zoom', () => {
   return {
     zoomidentity: { k: 1, tx: 0, ty: 0 },
-    zoom: jest.fn()
+    zoom: jest.fn(),
   };
 });
 
@@ -52,7 +52,7 @@ it('should display bubbles', () => {
     .find(AutoSizer)
     .dive()
     .find('Bubble')
-    .forEach(bubble => {
+    .forEach((bubble) => {
       expect(bubble.dive()).toMatchSnapshot();
     });
 });
@@ -61,14 +61,14 @@ it('should render bubble links', () => {
   const wrapper = shallowRender({
     items: [
       { x: 1, y: 10, size: 7, color: { fill: 'blue', stroke: 'blue' } },
-      { x: 2, y: 30, size: 5, color: { fill: 'green', stroke: 'green' } }
-    ]
+      { x: 2, y: 30, size: 5, color: { fill: 'green', stroke: 'green' } },
+    ],
   });
   wrapper
     .find(AutoSizer)
     .dive()
     .find('Bubble')
-    .forEach(bubble => {
+    .forEach((bubble) => {
       expect(bubble.dive()).toMatchSnapshot();
     });
 });
@@ -80,7 +80,7 @@ it('should render bubbles with click handlers', () => {
     .find(AutoSizer)
     .dive()
     .find('Bubble')
-    .forEach(bubble => {
+    .forEach((bubble) => {
       click(bubble.dive().find('a'));
       expect(bubble.dive()).toMatchSnapshot();
     });
@@ -104,7 +104,7 @@ it('should correctly handle zooming', () => {
     const wrapper = shallowRender({ padding: [5, 5, 5, 5] });
     wrapper.instance().boundNode(
       mockHtmlElement<SVGSVGElement>({
-        getBoundingClientRect: () => ({ width: 100, height: 100 } as DOMRect)
+        getBoundingClientRect: () => ({ width: 100, height: 100 } as DOMRect),
       })
     );
 
@@ -117,14 +117,11 @@ it('should correctly handle zooming', () => {
     expect(wrapper.state().transform).toEqual({
       x: 105,
       y: 105,
-      k: 20
+      k: 20,
     });
 
     // Reset Zoom levels.
-    const resetZoomClick = wrapper
-      .find('div.bubble-chart-zoom')
-      .find(Link)
-      .props().onClick;
+    const resetZoomClick = wrapper.find('div.bubble-chart-zoom').find(Link).props().onClick;
     if (!resetZoomClick) {
       reject();
       return;
@@ -151,15 +148,15 @@ function shallowRender(props: Partial<BubbleChart<ComponentMeasureEnhanced>['pro
           y: 10,
           size: 7,
           data: mockComponentMeasureEnhanced(),
-          color: { fill: 'blue', stroke: 'blue' }
+          color: { fill: 'blue', stroke: 'blue' },
         },
         {
           x: 2,
           y: 30,
           size: 5,
           data: mockComponentMeasureEnhanced(),
-          color: { fill: 'red', stroke: 'red' }
-        }
+          color: { fill: 'red', stroke: 'red' },
+        },
       ]}
       padding={[0, 0, 0, 0]}
       {...props}
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/ColorGradientLegend-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/ColorGradientLegend-test.tsx
index d9ba675f809..641fe076d2b 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/ColorGradientLegend-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/ColorGradientLegend-test.tsx
@@ -26,9 +26,7 @@ import ColorGradientLegend from '../ColorGradientLegend';
 const COLORS = [colors.green, colors.lightGreen, colors.yellow, colors.orange, colors.red];
 
 it('should render properly', () => {
-  const colorScale = scaleLinear<string, string>()
-    .domain([0, 25, 50, 75, 100])
-    .range(COLORS);
+  const colorScale = scaleLinear<string, string>().domain([0, 25, 50, 75, 100]).range(COLORS);
   const wrapper = shallow(
     <ColorGradientLegend
       className="measure-details-treemap-legend"
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/DonutChart-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/DonutChart-test.tsx
index 409f712b3e5..d5825eb111b 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/DonutChart-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/DonutChart-test.tsx
@@ -24,12 +24,7 @@ import DonutChart, { DonutChartProps } from '../DonutChart';
 it('should render correctly', () => {
   const wrapper = shallowRender();
   expect(wrapper).toMatchSnapshot();
-  expect(
-    wrapper
-      .find('Sector')
-      .first()
-      .dive()
-  ).toMatchSnapshot();
+  expect(wrapper.find('Sector').first().dive()).toMatchSnapshot();
 });
 
 it('should render correctly with padding and pad angle too', () => {
@@ -41,7 +36,7 @@ function shallowRender(props: Partial<DonutChartProps> = {}) {
     <DonutChart
       data={[
         { fill: '#000000', value: 25 },
-        { fill: '#ffffff', value: 75 }
+        { fill: '#ffffff', value: 75 },
       ]}
       height={20}
       thickness={2}
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/Histogram-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/Histogram-test.tsx
index c6d81236294..ddd218eb7d6 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/Histogram-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/Histogram-test.tsx
@@ -26,7 +26,7 @@ jest.mock('d3-scale', () => {
   const d3 = jest.requireActual('d3-scale');
   return {
     ...d3,
-    scaleBand: jest.fn(d3.scaleBand)
+    scaleBand: jest.fn(d3.scaleBand),
   };
 });
 
@@ -43,7 +43,7 @@ it('renders correctly', () => {
     shallowRender({
       yTicks: ['a', 'b', 'c'],
       yTooltips: ['a - 100', 'b - 75', 'c - 150'],
-      yValues: ['100.0', '75.0', '150.0']
+      yValues: ['100.0', '75.0', '150.0'],
     })
   ).toMatchSnapshot('with yValues, yTicks and yTooltips');
 });
@@ -53,7 +53,7 @@ it('correctly handles yScale() returning undefined', () => {
   yScale.bandwidth = () => 1;
 
   (scaleBand as jest.Mock).mockReturnValueOnce({
-    domain: () => ({ rangeRound: () => yScale })
+    domain: () => ({ rangeRound: () => yScale }),
   });
 
   expect(
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/LineChart-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/LineChart-test.tsx
index a74ed22ebd5..fcafda1fed5 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/LineChart-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/LineChart-test.tsx
@@ -25,7 +25,7 @@ it('should display line', () => {
   const data = [
     { x: 1, y: 10 },
     { x: 2, y: 30 },
-    { x: 3, y: 20 }
+    { x: 3, y: 20 },
   ];
   const chart = shallow(<LineChart data={data} height={100} width={100} />);
   expect(chart.find('.line-chart-path').length).toBe(1);
@@ -35,7 +35,7 @@ it('should display ticks', () => {
   const data = [
     { x: 1, y: 10 },
     { x: 2, y: 30 },
-    { x: 3, y: 20 }
+    { x: 3, y: 20 },
   ];
   const ticks = ['A', 'B', 'C'];
   const chart = shallow(<LineChart data={data} height={100} width={100} xTicks={ticks} />);
@@ -46,7 +46,7 @@ it('should display values', () => {
   const data = [
     { x: 1, y: 10 },
     { x: 2, y: 30 },
-    { x: 3, y: 20 }
+    { x: 3, y: 20 },
   ];
   const values = ['A', 'B', 'C'];
   const chart = shallow(<LineChart data={data} height={100} width={100} xValues={values} />);
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/TreeMap-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/TreeMap-test.tsx
index aa071a54e7f..3526e0c4178 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/TreeMap-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/TreeMap-test.tsx
@@ -30,14 +30,14 @@ it('should render correctly', () => {
       size: 10,
       color: '#777',
       label: 'SonarQube :: Server',
-      component: mockComponentMeasureEnhanced()
+      component: mockComponentMeasureEnhanced(),
     },
     {
       key: '2',
       size: 30,
       color: '#777',
       label: 'SonarQube :: Web',
-      component: mockComponentMeasureEnhanced()
+      component: mockComponentMeasureEnhanced(),
     },
     {
       key: '3',
@@ -45,8 +45,8 @@ it('should render correctly', () => {
       gradient: '#777',
       label: 'SonarQube :: Search',
       metric: { key: 'coverage', type: 'PERCENT' },
-      component: mockComponentMeasureEnhanced()
-    }
+      component: mockComponentMeasureEnhanced(),
+    },
   ];
   const onRectClick = jest.fn();
   const chart = mount(
@@ -56,7 +56,7 @@ it('should render correctly', () => {
   expect(rects).toHaveLength(3);
 
   const event: React.MouseEvent<HTMLAnchorElement> = {
-    stopPropagation: jest.fn()
+    stopPropagation: jest.fn(),
   } as any;
 
   (rects.first().instance() as TreeMapRect).handleLinkClick(event);
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/ZoomTimeLine-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/ZoomTimeLine-test.tsx
index 458c565546f..4ed8034f17f 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/ZoomTimeLine-test.tsx
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/ZoomTimeLine-test.tsx
@@ -28,17 +28,17 @@ const series = [
     data: [
       {
         x: new Date('2020-01-01'),
-        y: 'beginning'
+        y: 'beginning',
       },
       {
         x: new Date('2020-02-01'),
-        y: 'end'
-      }
+        y: 'end',
+      },
     ],
     name: 'foo',
     translatedName: 'foo-translated',
-    type: 'bar'
-  }
+    type: 'bar',
+  },
 ];
 
 it('should render correctly', () => {
@@ -55,11 +55,7 @@ it('should draw a graph with lines', () => {
 });
 
 it('should be zoomable', () => {
-  expect(
-    shallowRender()
-      .find('.chart-zoom')
-      .exists()
-  ).toBe(true);
+  expect(shallowRender().find('.chart-zoom').exists()).toBe(true);
 });
 
 it('should render a leak period', () => {
@@ -71,11 +67,7 @@ it('should render a leak period', () => {
 });
 
 it('should render areas under the graph lines', () => {
-  expect(
-    shallowRender({ showAreas: true })
-      .find('.line-chart-area')
-      .exists()
-  ).toBe(true);
+  expect(shallowRender({ showAreas: true }).find('.line-chart-area').exists()).toBe(true);
 });
 
 it('should handle zoom update correctly', () => {
@@ -83,12 +75,9 @@ it('should handle zoom update correctly', () => {
   const startDate = new Date('1970-01-01T00:00:00.001Z');
   const endDate = new Date('2000-01-01T00:00:00.001Z');
   let wrapper = shallowRender({ updateZoom, startDate, endDate });
-  wrapper.instance().handleZoomUpdate(
-    scaleTime()
-      .domain([startDate, endDate])
-      .range([0, 150]),
-    [3, 50]
-  );
+  wrapper
+    .instance()
+    .handleZoomUpdate(scaleTime().domain([startDate, endDate]).range([0, 150]), [3, 50]);
   expect(updateZoom).toHaveBeenCalledWith(
     new Date('1970-08-08T03:21:36.001Z'),
     new Date('1980-01-01T08:00:00.001Z')
@@ -98,12 +87,9 @@ it('should handle zoom update correctly', () => {
 
   // We throttle the handleZoomUpdate so re-render to avoid issue
   wrapper = shallowRender({ updateZoom, startDate, endDate });
-  wrapper.instance().handleZoomUpdate(
-    scaleTime()
-      .domain([startDate, endDate])
-      .range([0, 150]),
-    [-1, 151]
-  );
+  wrapper
+    .instance()
+    .handleZoomUpdate(scaleTime().domain([startDate, endDate]).range([0, 150]), [-1, 151]);
   expect(updateZoom).toHaveBeenCalledWith(undefined, undefined);
 });