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,71 +12,77 @@
     />
 </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 data: number[] = this.data.map(el => el.value);
-        const xAxisDateLabels: string[] = ChartUtils.daysDisplayedOnChart(this.since, this.before);
 
-        return new ChartData(
+/**
-            xAxisDateLabels,
+ * Returns formatted data to render chart.
-            '#E6EDF7',
+ */
-            '#D7E8FF',
+const chartData = computed((): ChartData => {
-            '#003DC1',
+    const data: number[] = props.data.map(el => el.value);
-            data,
+    const xAxisDateLabels: string[] = ChartUtils.daysDisplayedOnChart(props.since, props.before);
-        );
-    }
 
-    /**
+    return new ChartData(
-     * Used as constructor of custom tooltip.
+        xAxisDateLabels,
-     */
+        '#E6EDF7',
-    public tooltip(tooltipModel: TooltipModel): void {
+        '#D7E8FF',
-        const tooltipParams = new TooltipParams(tooltipModel, 'storage-chart', 'storage-tooltip',
+        '#003DC1',
-            this.tooltipMarkUp(tooltipModel), 76, 81);
+        data,
+    );
+});
 
-        Tooltip.custom(tooltipParams);
+/**
-    }
+ * Used as constructor of custom tooltip.
+ */
+function tooltip(tooltipModel: TooltipModel): void {
+    const tooltipParams = new TooltipParams(tooltipModel, 'storage-chart', 'storage-tooltip',
+        tooltipMarkUp(tooltipModel), 76, 81);
 
-    /**
+    Tooltip.custom(tooltipParams);
-     * Returns tooltip's html mark up.
-     */
-    private tooltipMarkUp(tooltipModel: TooltipModel): string {
-        if (!tooltipModel.dataPoints) {
-            return '';
-        }
-
-        const dataIndex = tooltipModel.dataPoints[0].index;
-        const dataPoint = new ChartTooltipData(this.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>`;
-    }
 }
+
+/**
+ * Returns tooltip's html mark up.
+ */
+function tooltipMarkUp(tooltipModel: TooltipModel): string {
+    if (!tooltipModel.dataPoints) {
+        return '';
+    }
+
+    const dataIndex = tooltipModel.dataPoints[0].index;
+    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">