Update Plot benchmarks to use the latest set of dependencies.

Test: Tested locally.
Change-Id: I107bef5e39f023f8397d29f906a376f832b0d16c

development/plot-benchmarks/src/lib/App.svelte

diff --git a/development/plot-benchmarks/src/lib/App.svelte b/development/plot-benchmarks/src/lib/App.svelte
index f1ace88..ca22bb0 100644
--- a/development/plot-benchmarks/src/lib/App.svelte
+++ b/development/plot-benchmarks/src/lib/App.svelte
@@ -15,7 +15,7 @@
     })
   );
 
-  function onFilesChanged(event) {
+  function onFilesChanged(event: CustomEvent) {
     const detail: FileMetadata[] = event.detail;
     if (detail) {
       const enabled = detail.filter((metadata) => metadata.enabled === true);

development/plot-benchmarks/src/lib/Chart.svelte

diff --git a/development/plot-benchmarks/src/lib/Chart.svelte b/development/plot-benchmarks/src/lib/Chart.svelte
index 175da99..edf6584 100644
--- a/development/plot-benchmarks/src/lib/Chart.svelte
+++ b/development/plot-benchmarks/src/lib/Chart.svelte
@@ -34,13 +34,13 @@
     const onUpdate = (chart: Chart) => {
       $chart = chart;
       // Bad typings.
-      const legend = chart.options.plugins.legend as any;
+      const legend = chart.options.plugins?.legend as any;
       $items = legend.labels.generateLabels(chart);
     };
     const plugins = {
       tooltip: {
         callbacks: {
-          label: (context: TooltipItem<typeof chartType>): string | null => {
+          label: (context: TooltipItem<typeof chartType>): string | void | string[] => {
             // TODO: Configure Tooltips
             // https://www.chartjs.org/docs/latest/configuration/tooltip.html
             const label = context.dataset.label;
@@ -51,7 +51,7 @@
               return `${label}: ${fx} F(${frequency})`;
             } else {
               // Fallback to default behavior
-              return undefined;
+              return;
             }
           },
         },
@@ -131,7 +131,7 @@
   {/if}
 </article>
 
-{#if $items}
+{#if $chart && $items}
   <Legend chart={$chart} items={$items} />
 {/if}
 

development/plot-benchmarks/src/lib/Legend.svelte

diff --git a/development/plot-benchmarks/src/lib/Legend.svelte b/development/plot-benchmarks/src/lib/Legend.svelte
index ef239f5..2795fb2 100644
--- a/development/plot-benchmarks/src/lib/Legend.svelte
+++ b/development/plot-benchmarks/src/lib/Legend.svelte
@@ -5,12 +5,14 @@
 
   const handlerFactory = (item: LegendItem) => {
     return (event: Event) => {
-      // https://www.chartjs.org/docs/latest/samples/legend/html.html
-      chart.setDatasetVisibility(
-        item.datasetIndex,
-        !chart.isDatasetVisible(item.datasetIndex)
-      );
-      chart.update();
+      if (item.datasetIndex !== undefined) {
+        // https://www.chartjs.org/docs/latest/samples/legend/html.html
+        chart.setDatasetVisibility(
+          item.datasetIndex,
+          !chart.isDatasetVisible(item.datasetIndex)
+        );
+        chart.update();
+      }
     };
   };
 </script>