web/satellite: migrated StorageChart to use composition API

Migrated component to use SFC composition API.

Change-Id: I7328b76ce6e3b038877232e2c76814d7583bbf66

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

@@ -1,28 +0,0 @@
-// Copyright (C) 2021 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<script lang="ts">
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-
-// @vue/component
-@Component
-export default class BaseChart extends Vue {
-    @Prop({ default: 0 })
-    public readonly width: number;
-    @Prop({ default: 0 })
-    public readonly height: number;
-
-    /**
-     * Used for chart re rendering.
-     */
-    public chartKey = 0;
-
-    /**
-     * Triggers chart re rendering if chart width is being changed.
-     */
-    @Watch('width')
-    public rebuildChart(): void {
-        this.chartKey += 1;
-    }
-}
-</script>

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

@@ -12,34 +12,37 @@
     />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { Component, Prop } from 'vue-property-decorator';
+import { computed, ref, watch } from 'vue';
 
 import { ChartData, Tooltip, TooltipParams, TooltipModel, ChartTooltipData } from '@/types/chart';
 import { DataStamp } from '@/types/projects';
 import { ChartUtils } from '@/utils/chart';
 
 import VChart from '@/components/common/VChart.vue';
-import BaseChart from '@/components/common/BaseChart.vue';
 
-// @vue/component
+const props = withDefaults(defineProps<{
-@Component({
+    data: DataStamp[],
-    components: { VChart },
+    since: Date,
-})
+    before: Date,
-export default class StorageChart extends BaseChart {
+    width: number,
-    @Prop({ default: () => [] })
+    height: number,
-    public readonly data: DataStamp[];
+}>(), {
-    @Prop({ default: new Date() })
+    data: () => [],
-    public readonly since: Date;
+    since: () => new Date(),
-    @Prop({ default: new Date() })
+    before: () => new Date(),
-    public readonly before: Date;
+    width: 0,
+    height: 0,
+});
+
+const chartKey = ref<number>(0);
 
 /**
  * Returns formatted data to render chart.
  */
-    public get chartData(): ChartData {
+const chartData = computed((): ChartData => {
-        const data: number[] = this.data.map(el => el.value);
+    const data: number[] = props.data.map(el => el.value);
-        const xAxisDateLabels: string[] = ChartUtils.daysDisplayedOnChart(this.since, this.before);
+    const xAxisDateLabels: string[] = ChartUtils.daysDisplayedOnChart(props.since, props.before);
 
     return new ChartData(
         xAxisDateLabels,
@@ -48,14 +51,14 @@ export default class StorageChart extends BaseChart {
         '#003DC1',
         data,
     );
-    }
+});
 
 /**
  * Used as constructor of custom tooltip.
  */
-    public tooltip(tooltipModel: TooltipModel): void {
+function tooltip(tooltipModel: TooltipModel): void {
     const tooltipParams = new TooltipParams(tooltipModel, 'storage-chart', 'storage-tooltip',
-            this.tooltipMarkUp(tooltipModel), 76, 81);
+        tooltipMarkUp(tooltipModel), 76, 81);
 
     Tooltip.custom(tooltipParams);
 }
@@ -63,20 +66,23 @@ export default class StorageChart extends BaseChart {
 /**
  * Returns tooltip's html mark up.
  */
-    private tooltipMarkUp(tooltipModel: TooltipModel): string {
+function tooltipMarkUp(tooltipModel: TooltipModel): string {
     if (!tooltipModel.dataPoints) {
         return '';
     }
 
     const dataIndex = tooltipModel.dataPoints[0].index;
-        const dataPoint = new ChartTooltipData(this.data[dataIndex]);
+    const dataPoint = new ChartTooltipData(props.data[dataIndex]);
 
     return `<div class='tooltip'>
                 <p class='tooltip__value'>${dataPoint.date}<b class='tooltip__value__bold'> / ${dataPoint.value}</b></p>
                 <div class='tooltip__arrow' />
             </div>`;
 }
-}
+
+watch(() => props.width, () => {
+    chartKey.value += 1;
+});
 </script>
 
 <style lang="scss">