web/satellite: remove VChart tooltip elements on unmounted

We use a custom plugin for the chart tooltips. If a user navigates away
from the page while a tooltip is rendered, the element doesn't get
removed. To fix it, when the chart is unmounted check for the tooltip
elements and remove them if they exist.

issue: #6344

Change-Id: I42122ef5fad3a1ee7d16ed554881f8c3f79f2b26

web/satellite/src/components/common/VChart.vue

@@ -23,6 +23,8 @@ import {
     Plugin,
 } from 'chart.js';
 
+import { TooltipId } from '@/types/chart';
+
 ChartJS.register(LineElement, PointElement, VTooltip, Filler, LineController, CategoryScale, LinearScale);
 
 const props = defineProps<{
@@ -157,6 +159,18 @@ onMounted(() => {
 
 onUnmounted(() => {
     chart.value?.destroy();
+
+    // custom tooltip element doesn't get cleaned up if the user navigates to a new page using the keyboard.
+    // There is probably a better way to do this
+    const storageTooltip = document.getElementById(TooltipId.Storage);
+    if (storageTooltip) {
+        document.body.removeChild(storageTooltip);
+    }
+
+    const egressTooltip = document.getElementById(TooltipId.Bandwidth);
+    if (egressTooltip) {
+        document.body.removeChild(egressTooltip);
+    }
 });
 
 watch(() => props.chartData, () => {

web/satellite/src/components/project/dashboard/BandwidthChart.vue

@@ -16,7 +16,7 @@
 import { computed, ref, watch } from 'vue';
 import { ChartType, TooltipModel, ChartData } from 'chart.js';
 
-import { Tooltip, TooltipParams, ChartTooltipData } from '@/types/chart';
+import { Tooltip, TooltipParams, TooltipId, ChartTooltipData } from '@/types/chart';
 import { DataStamp } from '@/types/projects';
 import { ChartUtils } from '@/utils/chart';
 
@@ -69,7 +69,7 @@ const chartData = computed((): ChartData => {
  * Used as constructor of custom tooltip.
  */
 function tooltip(tooltipModel: TooltipModel<ChartType>): void {
-    const tooltipParams = new TooltipParams(tooltipModel, 'bandwidth-chart', 'allocated-bandwidth-tooltip',
+    const tooltipParams = new TooltipParams(tooltipModel, 'bandwidth-chart', TooltipId.Bandwidth,
         allocatedTooltipMarkUp(tooltipModel), 76, 81);
 
     Tooltip.custom(tooltipParams);

web/satellite/src/components/project/dashboard/StorageChart.vue

@@ -16,7 +16,7 @@
 import { computed, ref, watch } from 'vue';
 import { ChartType, TooltipModel, ChartData } from 'chart.js';
 
-import { Tooltip, TooltipParams, ChartTooltipData } from '@/types/chart';
+import { Tooltip, TooltipParams, TooltipId, ChartTooltipData } from '@/types/chart';
 import { DataStamp } from '@/types/projects';
 import { ChartUtils } from '@/utils/chart';
 
@@ -68,7 +68,7 @@ const chartData = computed((): ChartData => {
  * Used as constructor of custom tooltip.
  */
 function tooltip(tooltipModel: TooltipModel<ChartType>): void {
-    const tooltipParams = new TooltipParams(tooltipModel, 'storage-chart', 'storage-tooltip',
+    const tooltipParams = new TooltipParams(tooltipModel, 'storage-chart', TooltipId.Storage,
         tooltipMarkUp(tooltipModel), 76, 81);
 
     Tooltip.custom(tooltipParams);

web/satellite/src/types/chart.ts

@@ -41,6 +41,14 @@ class Styling {
     ) {}
 }
 
+/**
+ * TooltipId defines tooltip IDs.
+ */
+export enum TooltipId {
+    Storage = 'storage-tooltip',
+    Bandwidth = 'allocated-bandwidth-tooltip',
+}
+
 /**
  * Tooltip provides custom tooltip rendering
  */