noUncheckedIndexedAccess

acheronfail · Sep 16, 2024 · fae1f17 · fae1f17
1 parent fae1a77
commit fae1f17
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 44 deletions.
diff --git a/src/components/App.svelte b/src/components/App.svelte
@@ -28,7 +28,7 @@
     const gpsGaps: number[] = [0];
     for (let i = 0; i < rows.length; ++i) {
       const prev = rows[i - 1];
-      const curr = rows[i];
+      const curr = rows[i]!;
 
       gpsPoints.push([curr.gps_latitude, curr.gps_longitude]);
       if (prev && curr.time - prev.time > 60) {
@@ -42,9 +42,9 @@
     // Either way, here we attempt to find the first "good" point and use that instead.
     // TODO: verify if we need to do this for Floaty-recorded rides
     for (let i = 0; i < gpsGaps.length; ++i) {
-      const start = gpsGaps[i];
+      const start = gpsGaps[i]!;
       const end = gpsGaps[i + 1];
-      const curr = rows[start];
+      const curr = rows[start]!;
       const guessedGoodValue = rows.slice(start, end).find((row) => {
         const samePoint = curr.gps_latitude === row.gps_latitude && curr.gps_longitude === row.gps_longitude;
         return row.gps_accuracy > 0 && !samePoint;
@@ -63,7 +63,7 @@
   let faultPoints = $derived.by(() => {
     const points: FaultPoint[] = [];
     for (let i = 0; i < rows.length; i++) {
-      const row = rows[i];
+      const row = rows[i]!;
 
       let fault: string | undefined;
       if (row.state !== 'riding') {
@@ -96,7 +96,7 @@
     let gaps: number[] = [];
     let prev = visibleRows[0]?.index ?? 0;
     for (let i = 1; i < visibleRows.length; i++) {
-      const { index } = visibleRows[i];
+      const { index } = visibleRows[i]!;
       if (prev < index - 1) {
         gaps.push(i);
       }

diff --git a/src/components/Chart.svelte b/src/components/Chart.svelte
@@ -52,7 +52,7 @@
   const aggMaxAbs = (acc: number, n: number) => (Math.abs(acc) > Math.abs(n) ? acc : n);
 
   let { data, selectedIndex, setSelectedIdx, gapIndices, unit = '', title = '', precision, yAxis }: Props = $props();
-  let dataLen = $derived(data[0].values.length);
+  let dataLen = $derived(data[0]?.values.length ?? 0);
   assert(
     data.every(({ values }) => values.length === dataLen),
     'All input data lists must be the same length',
@@ -65,7 +65,7 @@
   let chunkSize = $state(1);
   /** scaled points representing the data */
   let dataPoints = $state<number[][]>(data.map(() => []));
-  let dataPointsLen = $derived(dataPoints[0].length);
+  let dataPointsLen = $derived(dataPoints[0]?.length ?? 0);
   /** start and end coordinates of where 0 is on the x axis */
   let zeroPath = $state<[[number, number], [number, number]] | undefined>();
   /** x coordinate of where the vertical line indicator should be */
@@ -143,16 +143,18 @@
 
   const touchXThreshold = 15;
   let touchStartX = Infinity;
-  const ontouchstart: TouchEventHandler<SVGSVGElement> = (e) => (touchStartX = e.touches[0].clientX);
+  const ontouchstart: TouchEventHandler<SVGSVGElement> = (e) => e.touches[0] && (touchStartX = e.touches[0].clientX);
   const ontouchmove: TouchEventHandler<SVGSVGElement> = (e) => {
-    const { clientX } = e.touches[0];
-    if (touchStartX === Infinity || Math.abs(touchStartX - clientX) > touchXThreshold) {
-      selectPoint(clientX);
-      touchStartX = Infinity;
+    if (e.touches[0]) {
+      const { clientX } = e.touches[0];
+      if (touchStartX === Infinity || Math.abs(touchStartX - clientX) > touchXThreshold) {
+        selectPoint(clientX);
+        touchStartX = Infinity;
+      }
     }
   };
 
-  const formatValue = (value: number): string => {
+  const formatValue = (value: number | undefined): string => {
     if (typeof value !== 'number' || Number.isNaN(value)) {
       return '';
     }
@@ -161,34 +163,33 @@
     return `${n}${unit}`;
   };
 
-  let chartDiv: HTMLDivElement | undefined;
-  const nodes: HTMLDivElement[] = [];
+  let chartEl: HTMLDivElement | undefined;
+  let tooltipEl: HTMLDivElement | undefined;
   const onCreateTooltip = (el: HTMLDivElement) => {
-    nodes.push(el);
+    tooltipEl = el;
   };
   const onCreateContainer = (el: HTMLDivElement) => {
-    chartDiv = el;
+    chartEl = el;
   };
-
   $effect(() => {
-    if (selectedDataPointIndex > -1) {
-      const tooltipEl = nodes[0];
-      const container = chartDiv!.parentElement!;
-      const halfWidth = tooltipEl.offsetWidth / 2;
-
-      const containerRect = container.getBoundingClientRect();
-      const chartRect = chartDiv!.getBoundingClientRect();
-      const tooltipRect = tooltipEl.getBoundingClientRect();
-
-      const leftGap = chartRect.left - containerRect.left;
-      if (tooltipRect.left < containerRect.left) {
-        tooltipEl.style.left = `${halfWidth - leftGap}px`;
-      }
+    if (!chartEl || !tooltipEl) return;
+    if (selectedDataPointIndex == -1) return;
 
-      const rightGap = containerRect.right - chartRect.right;
-      if (tooltipRect.right > containerRect.right) {
-        tooltipEl.style.left = `${chartRect.width + rightGap - halfWidth}px`;
-      }
+    const container = chartEl!.parentElement!;
+    const halfWidth = tooltipEl.offsetWidth / 2;
+
+    const containerRect = container.getBoundingClientRect();
+    const chartRect = chartEl!.getBoundingClientRect();
+    const tooltipRect = tooltipEl.getBoundingClientRect();
+
+    const leftGap = chartRect.left - containerRect.left;
+    if (tooltipRect.left < containerRect.left) {
+      tooltipEl.style.left = `${halfWidth - leftGap}px`;
+    }
+
+    const rightGap = containerRect.right - chartRect.right;
+    if (tooltipRect.right > containerRect.right) {
+      tooltipEl.style.left = `${chartRect.width + rightGap - halfWidth}px`;
     }
   });
 </script>
@@ -274,7 +275,7 @@
         {#each dataPoints as values, i}
           <path
             fill="none"
-            stroke={data[i].color ?? DEFAULT_COLOUR}
+            stroke={data[i]?.color ?? DEFAULT_COLOUR}
             d="M{values
               .map((y, i) => `${indexToXPct(i) * scaleFactor},${valueToYPct(y, yTickMin, yTickMax) * scaleFactor}`)
               .join('L')}"
@@ -355,12 +356,12 @@
         {#each data as _, i}
           <div
             class="w-full flex flex-rol justify-between items-center gap-4"
-            style:color={data[i].color ?? DEFAULT_COLOUR}
+            style:color={data[i]?.color ?? DEFAULT_COLOUR}
           >
-            {#if data[i].label}
-              <span>{data[i].label + ':'}</span>
+            {#if data[i]?.label}
+              <span>{data[i]?.label + ':'}</span>
             {/if}
-            <span>{formatValue(data[i].values[selectedIndex])}</span>
+            <span>{formatValue(data[i]?.values[selectedIndex])}</span>
           </div>
         {/each}
       {/if}

diff --git a/src/components/Map.svelte b/src/components/Map.svelte
@@ -101,7 +101,7 @@
     // add fault markers
     for (const { index, fault } of faultPoints) {
       const { icon, className } = getIcon(fault);
-      const marker = Leaflet.marker(gpsPoints[index], {
+      const marker = Leaflet.marker(gpsPoints[index]!, {
         icon,
         title: fault,
       });
@@ -117,7 +117,7 @@
           // find the point in `visibleRows`, if it was clicked it was visible, so it must
           // be in this list
           for (let i = 0; i < visibleRows.length; i++) {
-            if (visibleRows[i].index === index) {
+            if (visibleRows[i]!.index === index) {
               setSelectedIdx(i);
               break;
             }

diff --git a/tsconfig.json b/tsconfig.json
@@ -16,8 +16,7 @@
     "isolatedModules": true,
     "strict": true,
     "noUnusedLocals": true,
-    // TODO: enable, and also add svelte-check to `types` script
-    "noUncheckedIndexedAccess": false,
+    "noUncheckedIndexedAccess": true,
     "moduleDetection": "force"
   },
   "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],