forked from LaconicNetwork/cosmos-explorer
feat: style uptime
This commit is contained in:
Alisa | side.one
@@ -1,7 +1,4 @@
|
||||
<script lang="ts" setup>
|
||||
import TwoFactorAuthDialog from '@/plugins/vuetify/@core/components/TwoFactorAuthDialog.vue';
|
||||
import { PageRequest } from '@/types';
|
||||
import type { PropType } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
@@ -12,19 +9,19 @@ const props = defineProps({
|
||||
const current = ref(1)
|
||||
const showSize = 3
|
||||
const pages = computed(() => {
|
||||
const pages: {color: string, page: number}[] = []
|
||||
if(props.total && props.limit && props.total > props.limit) {
|
||||
const pages: { color: string, page: number }[] = []
|
||||
if (props.total && props.limit && props.total > props.limit) {
|
||||
let page = 0
|
||||
while(true) {
|
||||
if( page * props.limit > props.total ) break
|
||||
while (true) {
|
||||
if (page * props.limit > props.total) break
|
||||
page += 1
|
||||
if( props.total / props.limit > 10 && page > showSize && page < (props.total / props.limit - showSize + 1)) {
|
||||
if(!(page >= current.value - 1 && page <= current.value + 1)){
|
||||
if (props.total / props.limit > 10 && page > showSize && page < (props.total / props.limit - showSize + 1)) {
|
||||
if (!(page >= current.value - 1 && page <= current.value + 1)) {
|
||||
continue
|
||||
}
|
||||
}
|
||||
}
|
||||
pages.push({
|
||||
color: page === current.value? 'btn-primary': '',
|
||||
color: page === current.value ? 'btn-primary' : '',
|
||||
page: page,
|
||||
})
|
||||
}
|
||||
@@ -41,7 +38,8 @@ function gotoPage(pageNum: number) {
|
||||
<template>
|
||||
<div class="my-5 text-center">
|
||||
<div v-if="total && limit" class="btn-group">
|
||||
<button v-for="{page, color} in pages" class="btn btn-md" :class="color" @click="gotoPage(page)">{{ page }}</button>
|
||||
<button v-for="{ page, color } in pages" class="btn btn-md" :class="color" @click="gotoPage(page)">{{ page
|
||||
}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+143
-207
@@ -1,10 +1,9 @@
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
useBlockchain,
|
||||
useFormatter,
|
||||
useStakingStore,
|
||||
useWalletStore,
|
||||
useTxDialog
|
||||
useBlockchain,
|
||||
useFormatter,
|
||||
useStakingStore,
|
||||
useTxDialog
|
||||
} from '@/stores';
|
||||
import { select } from '@/components/dynamic/index';
|
||||
import type { PaginatedProposals } from '@/types';
|
||||
@@ -13,229 +12,166 @@ import type { PropType } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
const dialog = useTxDialog();
|
||||
defineProps({
|
||||
proposals: { type: Object as PropType<PaginatedProposals> },
|
||||
proposals: { type: Object as PropType<PaginatedProposals> },
|
||||
});
|
||||
|
||||
const format = useFormatter();
|
||||
const staking = useStakingStore();
|
||||
const chain = useBlockchain();
|
||||
function showType(v: string) {
|
||||
if (v) {
|
||||
return v.substring(v.lastIndexOf('.') + 1);
|
||||
}
|
||||
return v;
|
||||
if (v) {
|
||||
return v.substring(v.lastIndexOf('.') + 1);
|
||||
}
|
||||
return v;
|
||||
}
|
||||
|
||||
const statusMap: Record<string, string> = {
|
||||
PROPOSAL_STATUS_VOTING_PERIOD: 'VOTING',
|
||||
PROPOSAL_STATUS_PASSED: 'PASSED',
|
||||
PROPOSAL_STATUS_REJECTED: 'REJECTED',
|
||||
PROPOSAL_STATUS_VOTING_PERIOD: 'VOTING',
|
||||
PROPOSAL_STATUS_PASSED: 'PASSED',
|
||||
PROPOSAL_STATUS_REJECTED: 'REJECTED',
|
||||
};
|
||||
const voterStatusMap: Record<string, string> = {
|
||||
No_With_Veto: '',
|
||||
VOTE_OPTION_YES: 'success',
|
||||
VOTE_OPTION_NO: 'error',
|
||||
VOTE_OPTION_ABSTAIN: 'warning',
|
||||
No_With_Veto: '',
|
||||
VOTE_OPTION_YES: 'success',
|
||||
VOTE_OPTION_NO: 'error',
|
||||
VOTE_OPTION_ABSTAIN: 'warning',
|
||||
};
|
||||
|
||||
const proposalInfo = ref();
|
||||
</script>
|
||||
<template>
|
||||
<div class="bg-white dark:bg-[#28334e] rounded text-sm">
|
||||
<table class="table-compact w-full table-fixed hidden lg:!table">
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in proposals?.proposals" :key="index">
|
||||
<td class="px-4 w-20">
|
||||
<label
|
||||
for="proposal-detail-modal"
|
||||
class="text-main text-base hover:text-indigo-400 cursor-pointer"
|
||||
@click="proposalInfo = item"
|
||||
>
|
||||
#{{ item?.proposal_id }}</label
|
||||
>
|
||||
</td>
|
||||
<td class="w-full">
|
||||
<div>
|
||||
<RouterLink
|
||||
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
||||
class="text-main text-base mb-1 block hover:text-indigo-400 truncate"
|
||||
>
|
||||
{{ item?.content?.title }}
|
||||
</RouterLink>
|
||||
<div
|
||||
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
|
||||
>
|
||||
{{ showType(item.content['@type']) }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="w-60">
|
||||
<ProposalProcess
|
||||
:pool="staking.pool"
|
||||
:tally="item.final_tally_result"
|
||||
></ProposalProcess>
|
||||
</td>
|
||||
<td class="w-36">
|
||||
<div class="pl-4">
|
||||
<div
|
||||
class="flex items-center"
|
||||
:class="
|
||||
statusMap?.[item?.status] === 'PASSED'
|
||||
? 'text-yes'
|
||||
: statusMap?.[item?.status] === 'REJECTED'
|
||||
? 'text-no'
|
||||
: 'text-info'
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="w-1 h-1 rounded-full mr-2"
|
||||
:class="
|
||||
statusMap?.[item?.status] === 'PASSED'
|
||||
? 'bg-yes'
|
||||
: statusMap?.[item?.status] === 'REJECTED'
|
||||
? 'bg-no'
|
||||
: 'bg-info'
|
||||
"
|
||||
></div>
|
||||
<div class="text-xs">
|
||||
{{ statusMap?.[item?.status] || item?.status }}
|
||||
<div class="bg-white dark:bg-[#28334e] rounded text-sm">
|
||||
<table class="table-compact w-full table-fixed hidden lg:!table">
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in proposals?.proposals" :key="index">
|
||||
<td class="px-4 w-20">
|
||||
<label for="proposal-detail-modal" class="text-main text-base hover:text-indigo-400 cursor-pointer"
|
||||
@click="proposalInfo = item">
|
||||
#{{ item?.proposal_id }}</label>
|
||||
</td>
|
||||
<td class="w-full">
|
||||
<div>
|
||||
<RouterLink :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
||||
class="text-main text-base mb-1 block hover:text-indigo-400 truncate">
|
||||
{{ item?.content?.title }}
|
||||
</RouterLink>
|
||||
<div
|
||||
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1">
|
||||
{{ showType(item.content['@type']) }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="w-60">
|
||||
<ProposalProcess :pool="staking.pool" :tally="item.final_tally_result"></ProposalProcess>
|
||||
</td>
|
||||
<td class="w-36">
|
||||
<div class="pl-4">
|
||||
<div class="flex items-center" :class="statusMap?.[item?.status] === 'PASSED'
|
||||
? 'text-yes'
|
||||
: statusMap?.[item?.status] === 'REJECTED'
|
||||
? 'text-no'
|
||||
: 'text-info'
|
||||
">
|
||||
<div class="w-1 h-1 rounded-full mr-2" :class="statusMap?.[item?.status] === 'PASSED'
|
||||
? 'bg-yes'
|
||||
: statusMap?.[item?.status] === 'REJECTED'
|
||||
? 'bg-no'
|
||||
: 'bg-info'
|
||||
"></div>
|
||||
<div class="text-xs">
|
||||
{{ statusMap?.[item?.status] || item?.status }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="truncate col-span-2 md:!col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:!flex md:!justify-start">
|
||||
{{ format.toDay(item.voting_end_time, 'from') }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td v-if="statusMap?.[item?.status] === 'VOTING'" class="w-40">
|
||||
<div class="">
|
||||
<label for="vote" class="btn btn-xs btn-primary rounded"
|
||||
@click="dialog.open('vote', { proposal_id: item?.proposal_id })">
|
||||
<span v-if="item?.voterStatus">{{ item?.voterStatus.replace("VOTE_OPTION_", "") }}</span>
|
||||
<span v-else>Vote</span>
|
||||
</label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="lg:!hidden">
|
||||
<div v-for="(item, index) in proposals?.proposals" :key="index" class="px-4 py-4">
|
||||
<div class="text-main text-base mb-1 flex justify-between hover:text-indigo-400">
|
||||
<RouterLink :to="`/${chain.chainName}/gov/${item?.proposal_id}`" class="flex-1 w-0 truncate mr-4">{{
|
||||
item?.content?.title }}</RouterLink>
|
||||
<label for="proposal-detail-modal" class="text-main text-base hover:text-indigo-400 cursor-pointer"
|
||||
@click="proposalInfo = item">
|
||||
#{{ item?.proposal_id }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="truncate col-span-2 md:!col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:!flex md:!justify-start"
|
||||
>
|
||||
{{ format.toDay(item.voting_end_time, 'from') }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td v-if="statusMap?.[item?.status] === 'VOTING'" class="w-40">
|
||||
<div class="">
|
||||
<label
|
||||
for="vote"
|
||||
class="btn btn-xs btn-primary rounded-sm"
|
||||
@click="dialog.open('vote', { proposal_id: item?.proposal_id })"
|
||||
>
|
||||
<span v-if="item?.voterStatus">{{ item?.voterStatus.replace("VOTE_OPTION_", "")}}</span>
|
||||
<span v-else>Vote</span>
|
||||
</label
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="grid grid-cols-4 mt-2 mb-2">
|
||||
<div class="col-span-2">
|
||||
<div
|
||||
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1">
|
||||
{{ showType(item.content['@type']) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center" :class="statusMap?.[item?.status] === 'PASSED'
|
||||
? 'text-yes'
|
||||
: statusMap?.[item?.status] === 'REJECTED'
|
||||
? 'text-no'
|
||||
: 'text-info'
|
||||
">
|
||||
<div class="w-1 h-1 rounded-full mr-2" :class="statusMap?.[item?.status] === 'PASSED'
|
||||
? 'bg-yes'
|
||||
: statusMap?.[item?.status] === 'REJECTED'
|
||||
? 'bg-no'
|
||||
: 'bg-info'
|
||||
"></div>
|
||||
<div class="text-xs flex items-center">
|
||||
{{ statusMap?.[item?.status] || item?.status }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="truncate text-xs text-gray-500 dark:text-gray-400 flex items-center justify-end">
|
||||
{{ format.toDay(item.voting_end_time, 'from') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:!hidden">
|
||||
<div
|
||||
v-for="(item, index) in proposals?.proposals"
|
||||
:key="index"
|
||||
class="px-4 py-4"
|
||||
>
|
||||
<div
|
||||
class="text-main text-base mb-1 flex justify-between hover:text-indigo-400"
|
||||
>
|
||||
<RouterLink
|
||||
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
||||
class="flex-1 w-0 truncate mr-4"
|
||||
>{{ item?.content?.title }}</RouterLink
|
||||
>
|
||||
<label
|
||||
for="proposal-detail-modal"
|
||||
class="text-main text-base hover:text-indigo-400 cursor-pointer"
|
||||
@click="proposalInfo = item"
|
||||
>
|
||||
#{{ item?.proposal_id }}</label
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<ProposalProcess :pool="staking.pool" :tally="item.final_tally_result"></ProposalProcess>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-4 mt-2 mb-2">
|
||||
<div class="col-span-2">
|
||||
<div
|
||||
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
|
||||
>
|
||||
{{ showType(item.content['@type']) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center"
|
||||
:class="
|
||||
statusMap?.[item?.status] === 'PASSED'
|
||||
? 'text-yes'
|
||||
: statusMap?.[item?.status] === 'REJECTED'
|
||||
? 'text-no'
|
||||
: 'text-info'
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="w-1 h-1 rounded-full mr-2"
|
||||
:class="
|
||||
statusMap?.[item?.status] === 'PASSED'
|
||||
? 'bg-yes'
|
||||
: statusMap?.[item?.status] === 'REJECTED'
|
||||
? 'bg-no'
|
||||
: 'bg-info'
|
||||
"
|
||||
></div>
|
||||
<div class="text-xs flex items-center">
|
||||
{{ statusMap?.[item?.status] || item?.status }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="truncate text-xs text-gray-500 dark:text-gray-400 flex items-center justify-end"
|
||||
>
|
||||
{{ format.toDay(item.voting_end_time, 'from') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ProposalProcess
|
||||
:pool="staking.pool"
|
||||
:tally="item.final_tally_result"
|
||||
></ProposalProcess>
|
||||
</div>
|
||||
|
||||
<div class="mt-4" v-if="statusMap?.[item?.status] === 'VOTING'">
|
||||
<div class="" v-show="item?.voterStatus === 'No With Veto'">
|
||||
<label
|
||||
for="vote"
|
||||
class="btn btn-xs btn-primary rounded-sm"
|
||||
@click="dialog.open('vote', { proposal_id: item?.proposal_id })"
|
||||
>Vote</label
|
||||
>
|
||||
<div
|
||||
class="text-xs truncate relative py-1 px-3 rounded-full w-fit"
|
||||
:class="`text-${voterStatusMap?.[item?.voterStatus]}`"
|
||||
v-show="item?.voterStatus !== 'No With Veto'"
|
||||
>
|
||||
<span
|
||||
class="inset-x-0 inset-y-0 opacity-10 absolute"
|
||||
:class="`bg-${voterStatusMap?.[item?.voterStatus]}`"
|
||||
></span>
|
||||
{{ item?.voterStatus }}
|
||||
</div>
|
||||
<div class="mt-4" v-if="statusMap?.[item?.status] === 'VOTING'">
|
||||
<div class="" v-show="item?.voterStatus === 'No With Veto'">
|
||||
<label for="vote" class="btn btn-xs btn-primary rounded"
|
||||
@click="dialog.open('vote', { proposal_id: item?.proposal_id })">Vote</label>
|
||||
<div class="text-xs truncate relative py-1 px-3 rounded-full w-fit"
|
||||
:class="`text-${voterStatusMap?.[item?.voterStatus]}`"
|
||||
v-show="item?.voterStatus !== 'No With Veto'">
|
||||
<span class="inset-x-0 inset-y-0 opacity-10 absolute"
|
||||
:class="`bg-${voterStatusMap?.[item?.voterStatus]}`"></span>
|
||||
{{ item?.voterStatus }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" id="proposal-detail-modal" class="modal-toggle" />
|
||||
<label for="proposal-detail-modal" class="modal">
|
||||
<label class="modal-box w-11/12 max-w-5xl" for="">
|
||||
<label for="proposal-detail-modal" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
|
||||
<h3 class="font-bold text-lg">Description</h3>
|
||||
<p class="py-4">
|
||||
<Component v-if="proposalInfo?.content?.description"
|
||||
:is="select(proposalInfo?.content?.description, 'horizontal')"
|
||||
:value="proposalInfo?.content?.description">
|
||||
</Component>
|
||||
</p>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" id="proposal-detail-modal" class="modal-toggle" />
|
||||
<label for="proposal-detail-modal" class="modal">
|
||||
<label class="modal-box w-11/12 max-w-5xl" for="">
|
||||
<label
|
||||
for="proposal-detail-modal"
|
||||
class="btn btn-sm btn-circle absolute right-2 top-2"
|
||||
>✕</label
|
||||
>
|
||||
<h3 class="font-bold text-lg">Description</h3>
|
||||
<p class="py-4">
|
||||
<Component
|
||||
v-if="proposalInfo?.content?.description"
|
||||
:is="select(proposalInfo?.content?.description, 'horizontal')"
|
||||
:value="proposalInfo?.content?.description"
|
||||
></Component>
|
||||
</p>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,162 +1,143 @@
|
||||
<script setup lang="ts">
|
||||
import ApexCharts from 'vue3-apexcharts';
|
||||
import { useTheme } from 'vuetify';
|
||||
import { hexToRgb } from '@/plugins/vuetify/@layouts/utils';
|
||||
import { computed, type PropType } from 'vue';
|
||||
import { useFormatter } from '@/stores';
|
||||
import type { CommissionRate } from '@/types';
|
||||
|
||||
const props = defineProps({
|
||||
commission: { type: Object as PropType<CommissionRate> },
|
||||
commission: { type: Object as PropType<CommissionRate> },
|
||||
});
|
||||
|
||||
let rate = computed(
|
||||
() => Number(props.commission?.commission_rates.rate || 0) * 100
|
||||
() => Number(props.commission?.commission_rates.rate || 0) * 100
|
||||
);
|
||||
let change = computed(
|
||||
() => Number(props.commission?.commission_rates.max_change_rate || 0) * 100
|
||||
() => Number(props.commission?.commission_rates.max_change_rate || 0) * 100
|
||||
);
|
||||
let max = computed(
|
||||
() => Number(props.commission?.commission_rates.max_rate || 1) * 100
|
||||
() => Number(props.commission?.commission_rates.max_rate || 1) * 100
|
||||
);
|
||||
|
||||
// const rate = 15 // props.commision?.commissionRates.rate
|
||||
// const change = 15
|
||||
// const max = 20
|
||||
|
||||
const left = rate;
|
||||
const right = computed(() => max.value - rate.value);
|
||||
|
||||
const s1 = computed(() =>
|
||||
left.value > change.value ? left.value - change.value : 0
|
||||
left.value > change.value ? left.value - change.value : 0
|
||||
);
|
||||
const s2 = computed(() =>
|
||||
left.value > change.value ? change.value : left.value
|
||||
left.value > change.value ? change.value : left.value
|
||||
);
|
||||
const s3 = 2;
|
||||
const s4 = computed(() =>
|
||||
right.value > change.value ? change.value : right.value
|
||||
right.value > change.value ? change.value : right.value
|
||||
);
|
||||
const s5 = computed(() =>
|
||||
right.value > change.value ? right.value - change.value : 0
|
||||
right.value > change.value ? right.value - change.value : 0
|
||||
);
|
||||
|
||||
const series = computed(() => [s1.value, s2.value, s3, s4.value, s5.value]);
|
||||
|
||||
const vuetifyTheme = useTheme();
|
||||
const format = useFormatter();
|
||||
|
||||
const chartConfig = computed(() => {
|
||||
const themeColors = vuetifyTheme.current.value.colors;
|
||||
const variableTheme = vuetifyTheme.current.value.variables;
|
||||
|
||||
const secondaryText = `rgba(${hexToRgb(
|
||||
String(themeColors['on-background'])
|
||||
)},${variableTheme['medium-emphasis-opacity']})`;
|
||||
const primaryText = `rgba(${hexToRgb(String(themeColors['on-background']))},${
|
||||
variableTheme['high-emphasis-opacity']
|
||||
})`;
|
||||
const secondaryText = `hsl(var(--bc))`;
|
||||
const primaryText = `hsl(var(--bc))`;
|
||||
|
||||
return {
|
||||
chart: {
|
||||
sparkline: { enabled: false },
|
||||
},
|
||||
colors: [
|
||||
`rgba(${hexToRgb(String(themeColors.secondary))},0.2)`,
|
||||
`rgba(${hexToRgb(String(themeColors.success))},0.2)`,
|
||||
`rgba(${hexToRgb(String(themeColors.success))},1)`,
|
||||
`rgba(${hexToRgb(String(themeColors.success))},0.2)`,
|
||||
`rgba(${hexToRgb(String(themeColors.secondary))},0.2)`,
|
||||
],
|
||||
legend: { show: false },
|
||||
tooltip: { enabled: false },
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 3,
|
||||
lineCap: 'round',
|
||||
colors: ['rgba(var(--v-theme-surface), 1)'],
|
||||
},
|
||||
labels: [
|
||||
'Available',
|
||||
'Daily Change',
|
||||
'Commission Rate',
|
||||
'Daily Change',
|
||||
'Available',
|
||||
],
|
||||
states: {
|
||||
hover: {
|
||||
filter: { type: 'none' },
|
||||
},
|
||||
active: {
|
||||
filter: { type: 'none' },
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
endAngle: 130,
|
||||
startAngle: -130,
|
||||
customScale: 0.9,
|
||||
donut: {
|
||||
size: '83%',
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
offsetY: 25,
|
||||
fontSize: '1rem',
|
||||
color: secondaryText,
|
||||
},
|
||||
value: {
|
||||
offsetY: -15,
|
||||
fontWeight: 500,
|
||||
fontSize: '2.125rem',
|
||||
formatter: (value: unknown) => `${rate.value}%`,
|
||||
color: primaryText,
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Commission Rate',
|
||||
fontSize: '1rem',
|
||||
color: secondaryText,
|
||||
formatter: () => `${rate.value}%`,
|
||||
},
|
||||
},
|
||||
return {
|
||||
chart: {
|
||||
sparkline: { enabled: false },
|
||||
},
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1709,
|
||||
options: {
|
||||
chart: { height: 237 },
|
||||
colors: ['rgba(109,120,141,0.2)', 'rgba(114,225,40,0.2)', 'rgba(114,225,40,1)', 'rgba(114,225,40,0.2)', 'rgba(109,120,141,0.2)'],
|
||||
legend: { show: false },
|
||||
tooltip: { enabled: false },
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
width: 3,
|
||||
lineCap: 'round',
|
||||
colors: ['hsl(var(--b1))'],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
labels: [
|
||||
'Available',
|
||||
'Daily Change',
|
||||
'Commission Rate',
|
||||
'Daily Change',
|
||||
'Available',
|
||||
],
|
||||
states: {
|
||||
hover: {
|
||||
filter: { type: 'none' },
|
||||
},
|
||||
active: {
|
||||
filter: { type: 'none' },
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
endAngle: 130,
|
||||
startAngle: -130,
|
||||
customScale: 0.9,
|
||||
donut: {
|
||||
size: '83%',
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
offsetY: 25,
|
||||
fontSize: '1rem',
|
||||
color: secondaryText,
|
||||
},
|
||||
value: {
|
||||
offsetY: -15,
|
||||
fontWeight: 500,
|
||||
fontSize: '2.125rem',
|
||||
formatter: (value: unknown) => `${rate.value}%`,
|
||||
color: primaryText,
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Commission Rate',
|
||||
fontSize: '1rem',
|
||||
color: secondaryText,
|
||||
formatter: () => `${rate.value}%`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1709,
|
||||
options: {
|
||||
chart: { height: 237 },
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-base-100 rounded shadow p-4">
|
||||
<div class="text-lg text-main font-semibold mb-1">Commission Rate</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ `Updated at ${format.toDay(props.commission?.update_time, 'short')}` }}
|
||||
<div class="bg-base-100 rounded shadow p-4">
|
||||
<div class="text-lg text-main font-semibold mb-1">Commission Rate</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ `Updated at ${format.toDay(props.commission?.update_time, 'short')}` }}
|
||||
</div>
|
||||
<ApexCharts type="donut" :options="chartConfig" :series="series" />
|
||||
<div>
|
||||
<div class="flex items-center justify-center flex-wrap gap-x-3">
|
||||
<div class="flex items-center gap-x-2">
|
||||
<div class="bg-success w-[6px] h-[6px] rounded-full"></div>
|
||||
<span class="text-caption">Rate:{{ rate }}%</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-x-2">
|
||||
<div class="bg-success w-[6px] h-[6px] rounded-full opacity-60"></div>
|
||||
<span class="text-caption">24h: ±{{ change }}%</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-x-2">
|
||||
<div class="bg-secondary w-[6px] h-[6px] rounded-full"></div>
|
||||
<span class="text-caption">Max:{{ max }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ApexCharts type="donut" :options="chartConfig" :series="series" />
|
||||
<div>
|
||||
<div class="flex items-center justify-center flex-wrap gap-x-3">
|
||||
<div class="flex items-center gap-x-2">
|
||||
<div class="bg-success w-[6px] h-[6px] rounded-full"></div>
|
||||
<span class="text-caption">Rate:{{ rate }}%</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-x-2">
|
||||
<div class="bg-success w-[6px] h-[6px] rounded-full opacity-60"></div>
|
||||
<span class="text-caption">24h: ±{{ change }}%</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-x-2">
|
||||
<div class="bg-secondary w-[6px] h-[6px] rounded-full"></div>
|
||||
<span class="text-caption">Max:{{ max }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user