Improve code quality

Fix lint warnings

src/chart.tsx

@@ -1,6 +1,6 @@
 import {max, min} from 'd3-array';
 import {interpolateNumber} from 'd3-interpolate';
-import {select, Selection} from 'd3-selection';
+import {BaseType, select, Selection} from 'd3-selection';
 import 'd3-transition';
 import {
   D3ZoomEvent,
@@ -69,7 +69,7 @@ function scrolled() {
 function loadAsDataUrl(blob: Blob): Promise<string> {
   const reader = new FileReader();
   reader.readAsDataURL(blob);
-  return new Promise<string>((resolve, reject) => {
+  return new Promise<string>((resolve, _reject) => {
     reader.onload = (e) => resolve((e.target as FileReader).result as string);
   });
 }
@@ -103,7 +103,7 @@ async function inlineImages(svg: Element): Promise<void> {
 function loadImage(blob: Blob): Promise<HTMLImageElement> {
   const image = new Image();
   image.src = URL.createObjectURL(blob);
-  return new Promise<HTMLImageElement>((resolve, reject) => {
+  return new Promise<HTMLImageElement>((resolve, _reject) => {
     image.addEventListener('load', () => resolve(image));
   });
 }
@@ -115,6 +115,7 @@ function drawImageOnCanvas(image: HTMLImageElement) {
   canvas.width = image.width * 2;
   canvas.height = image.height * 2;
 
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const ctx = canvas.getContext('2d')!;
   const oldFill = ctx.fillStyle;
   ctx.fillStyle = 'white';
@@ -139,6 +140,7 @@ function canvasToBlob(canvas: HTMLCanvasElement, type: string) {
 
 /** Return a copy of the SVG chart but without scaling and positioning. */
 function getStrippedSvg() {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const svg = document.getElementById('chartSvg')!.cloneNode(true) as Element;
 
   svg.removeAttribute('transform');
@@ -149,12 +151,14 @@ function getStrippedSvg() {
     'height',
     String(Number(svg.getAttribute('height')) / scale),
   );
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   svg.querySelector('#chart')!.removeAttribute('transform');
 
   return svg;
 }
 
 function getSvgDimensions() {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const svg = document.getElementById('chartSvg')!;
   return {
     width: Number(svg.getAttribute('width')),
@@ -191,14 +195,14 @@ export function printChart() {
   printWindow.style.top = '-1000px';
   printWindow.style.left = '-1000px';
   printWindow.onload = () => {
-    printWindow.contentDocument!.open();
-    printWindow.contentDocument!.write(getSvgContents());
-    printWindow.contentDocument!.close();
+    printWindow.contentDocument?.open();
+    printWindow.contentDocument?.write(getSvgContents());
+    printWindow.contentDocument?.close();
     // Doesn't work on Firefox without the setTimeout.
     setTimeout(() => {
-      printWindow.contentWindow!.focus();
-      printWindow.contentWindow!.print();
-      printWindow.parentNode!.removeChild(printWindow);
+      printWindow.contentWindow?.focus();
+      printWindow.contentWindow?.print();
+      printWindow.parentNode?.removeChild(printWindow);
     }, 500);
   };
   document.body.appendChild(printWindow);
@@ -299,6 +303,7 @@ function calculateScaleExtent(
 ): [number, number] {
   const [availWidth, availHeight] = getScrollbarAwareSize(parent);
 
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const zoomOutFactor = min([
     1,
     scale,
@@ -306,6 +311,7 @@ function calculateScaleExtent(
     availHeight / chartInfo.size[1],
   ])!;
 
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return [max([0.1, zoomOutFactor])!, 2];
 }
 
@@ -328,14 +334,19 @@ class ChartWrapper {
   /** Rendering is required after the current animation finishes. */
   private rerenderRequired = false;
   /** The d3 zoom behavior object. */
-  private zoomBehavior?: ZoomBehavior<Element, any>;
+  private zoomBehavior?: ZoomBehavior<Element, unknown>;
   /** Props that will be used for rerendering. */
   private rerenderProps?: ChartProps;
   private rerenderResetPosition?: boolean;
 
   zoom(factor: number) {
-    const parent = select('#svgContainer') as Selection<Element, any, any, any>;
-    this.zoomBehavior!.scaleBy(parent, factor);
+    const parent = select('#svgContainer') as Selection<
+      Element,
+      unknown,
+      BaseType,
+      unknown
+    >;
+    this.zoomBehavior?.scaleBy(parent, factor);
   }
 
   /**
@@ -364,7 +375,7 @@ class ChartWrapper {
       return;
     }
 
-    if (args.initialRender) {
+    if (args.initialRender || !this.chart) {
       (select('#chart').node() as HTMLElement).innerHTML = '';
       this.chart = createChart({
         json: props.data,
@@ -382,15 +393,15 @@ class ChartWrapper {
             props.onSelection(info);
           }
         },
-        colors: chartColors.get(props.colors!),
+        colors: (props.colors && chartColors.get(props.colors)) || undefined,
         animate: true,
         updateSvgSize: false,
         locale: intl.locale,
       });
     } else {
-      this.chart!.setData(props.data);
+      this.chart.setData(props.data);
     }
-    const chartInfo = this.chart!.render({
+    const chartInfo = this.chart.render({
       startIndi: props.selection.id,
       baseGeneration: props.selection.generation,
     });
@@ -461,10 +472,16 @@ class ChartWrapper {
         this.rerenderRequired = false;
         // Use `this.rerenderProps` instead of the props in scope because
         // the props may have been updated in the meantime.
-        this.renderChart(this.rerenderProps!, intl, {
-          initialRender: false,
-          resetPosition: !!this.rerenderResetPosition,
-        });
+        if (this.rerenderProps) {
+          this.renderChart(this.rerenderProps, intl, {
+            initialRender: false,
+            resetPosition: !!this.rerenderResetPosition,
+          });
+        } else {
+          console.error(
+            'Rerender required after animation, but rerenderProps was not set.',
+          );
+        }
       }
     });
   }