mirrors/nginx-ui
1
0
Fork 0
mirror of https://github.com/0xJacky/nginx-ui.git synced 2025-05-11 02:15:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refactor: upgrade ant design vue v3 to v4

Browse source
This commit is contained in:
0xJacky 2023-11-26 00:23:29 +08:00
parent c578f26054
commit d84dbffb54
No known key found for this signature in database
GPG key ID: B6E4A6E4A561BAF0
142 changed files with 7883 additions and 13745 deletions
Download patch file Download diff file Expand all files Collapse all files

147
frontend/src/components/Chart/RadialBarChart.vue
View file

@ -1,95 +1,102 @@
<script setup lang="ts">
import VueApexCharts from 'vue3-apexcharts'
import {reactive} from 'vue'
import {useSettingsStore} from '@/pinia'
import {storeToRefs} from 'pinia'
const {series, centerText, colors, name, bottomText}
= defineProps(['series', 'centerText', 'colors', 'name', 'bottomText'])
= defineProps(['series', 'centerText', 'colors', 'name', 'bottomText'])
const settings = useSettingsStore()
const {theme} = storeToRefs(settings)
const chartOptions = reactive({
series: series,
chart: {
type: 'radialBar',
offsetY: 0
},
plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 135,
dataLabels: {
name: {
fontSize: '14px',
color: colors,
offsetY: 36
},
value: {
offsetY: 50,
fontSize: '14px',
color: undefined,
formatter: () => {
return ''
}
}
}
}
},
fill: {
colors: colors
},
labels: [name],
states: {
hover: {
filter: {
type: 'none'
}
series: series,
chart: {
type: 'radialBar',
offsetY: 0
},
plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 135,
dataLabels: {
name: {
fontSize: '14px',
color: colors,
offsetY: 36
},
active: {
filter: {
type: 'none'
}
value: {
offsetY: 50,
fontSize: '14px',
color: undefined,
formatter: () => {
return ''
}
}
}
}
},
fill: {
colors: colors
},
labels: [name],
states: {
hover: {
filter: {
type: 'none'
}
},
active: {
filter: {
type: 'none'
}
}
}
})
</script>
<template>
<div class="radial-bar-container">
<p class="text">{{ centerText }}</p>
<p class="bottom_text">{{ bottomText }}</p>
<VueApexCharts v-if="centerText" class="radialBar" type="radialBar" height="205" :options="chartOptions"
:series="series"
ref="chart"/>
</div>
<!-- Use theme as key to rerender the chart when theme changes to prevent style issues -->
<div class="radial-bar-container" :key="theme">
<p class="text">{{ centerText }}</p>
<p class="bottom_text">{{ bottomText }}</p>
<VueApexCharts v-if="centerText" class="radialBar" type="radialBar" height="205" :options="chartOptions"
:series="series"
ref="chart"/>
</div>
</template>
<style lang="less" scoped>
.radial-bar-container {
position: relative;
margin: 0 auto;
height: 112px !important;
position: relative;
margin: 0 auto;
height: 112px !important;
.radialBar {
position: absolute;
top: -30px;
@media (max-width: 768px) and (min-width: 290px) {
left: 50%;
transform: translateX(-50%);
}
.radialBar {
position: absolute;
top: -30px;
@media (max-width: 768px) and (min-width: 290px) {
left: 50%;
transform: translateX(-50%);
}
}
.text {
position: absolute;
top: calc(50% - 5px);
width: 100%;
text-align: center;
}
.text {
position: absolute;
top: calc(50% - 5px);
width: 100%;
text-align: center;
}
.bottom_text {
position: absolute;
top: calc(106px);
font-weight: 600;
width: 100%;
text-align: center;
}
.bottom_text {
position: absolute;
top: calc(106px);
font-weight: 600;
width: 100%;
text-align: center;
}
}
</style>