JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: migrated StorageChart to use composition API

Browse Source 
Migrated component to use SFC composition API.

Change-Id: I7328b76ce6e3b038877232e2c76814d7583bbf66
This commit is contained in:
Vitalii 2023-03-07 15:00:40 +02:00 committed by Vitalii Shpital
parent 28f08405f4
commit e3cbbd4d80
2 changed files with 58 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/satellite/src/components/common/BaseChart.vue
View File

@ -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>

110
web/satellite/src/components/project/dashboard/StorageChart.vue
View File

@ -12,71 +12,77 @@
/>
</template>
<script lang="ts">
import { Component, Prop } from 'vue-property-decorator';
<script setup lang="ts">
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
@Component({
components: { VChart },
})
export default class StorageChart extends BaseChart {
@Prop({ default: () => [] })
public readonly data: DataStamp[];
@Prop({ default: new Date() })
public readonly since: Date;
@Prop({ default: new Date() })
public readonly before: Date;
const props = withDefaults(defineProps<{
data: DataStamp[],
since: Date,
before: Date,
width: number,
height: number,
}>(), {
data: () => [],
since: () => new Date(),
before: () => new Date(),
width: 0,
height: 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);
const chartKey = ref<number>(0);
return new ChartData(
xAxisDateLabels,
'#E6EDF7',
'#D7E8FF',
'#003DC1',
data,
);
}
/**
* Returns formatted data to render chart.
*/
const chartData = computed((): ChartData => {
const data: number[] = props.data.map(el => el.value);
const xAxisDateLabels: string[] = ChartUtils.daysDisplayedOnChart(props.since, props.before);
/**
* Used as constructor of custom tooltip.
*/
public tooltip(tooltipModel: TooltipModel): void {
const tooltipParams = new TooltipParams(tooltipModel, 'storage-chart', 'storage-tooltip',
this.tooltipMarkUp(tooltipModel), 76, 81);
return new ChartData(
xAxisDateLabels,
'#E6EDF7',
'#D7E8FF',
'#003DC1',
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);
/**
* 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>`;
}
Tooltip.custom(tooltipParams);
}
/**
* 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">