hide percent for outflows/inflows by account categorical chart

This commit is contained in:
MaysWind
2025-10-27 23:47:04 +08:00
parent f93610b5e0
commit 765e64d96f
8 changed files with 55 additions and 15 deletions
+1
View File
@@ -33,6 +33,7 @@ export interface CommonPieChartProps {
minValidPercent?: number;
defaultCurrency?: string;
showValue?: boolean;
showPercent?: boolean;
enableClickItem?: boolean;
}
+4 -2
View File
@@ -142,9 +142,11 @@ const chartOptions = computed<object>(() => {
tooltip += `<div class="d-inline-flex">${name}</div><br/>`;
}
if (props.showValue) {
if (props.showValue && props.showPercent) {
tooltip += `<div class="d-inline-flex"><span>${value}</span><span class="ms-1">(${percent})</span></div>`;
} else {
} else if (props.showValue && !props.showPercent) {
tooltip += `<div class="d-inline-flex">${value}</div>`;
} else if (!props.showValue && props.showPercent) {
tooltip += `<div class="d-inline-flex">${percent}</div>`;
}
+7 -2
View File
@@ -40,6 +40,7 @@ const props = defineProps<{
minValidPercent?: number;
defaultCurrency?: string;
showValue?: boolean;
showPercent?: boolean;
}>();
const theme = useTheme();
@@ -92,11 +93,15 @@ const radarData = computed<RadarChartData>(() => {
tooltip += '<div><span class="chart-pointer" style="background-color: ' + color + '"></span>';
tooltip += `<span>${name}</span>`;
if (props.showValue) {
if (props.showValue && props.showPercent) {
tooltip += `<span class="ms-1" style="float: inline-end">(${displayPercent})</span><span class="ms-5" style="float: inline-end">${displayValue}</span>`;
} else {
} else if (props.showValue && !props.showPercent) {
tooltip += `<span class="ms-5" style="float: inline-end">${displayValue}</span>`;
} else if (!props.showValue && props.showPercent) {
tooltip += `<span class="ms-5" style="float: inline-end">${displayPercent}</span>`;
}
tooltip += '</div>';
}
}
+2 -2
View File
@@ -44,7 +44,7 @@
</f7-link>
<div class="pie-chart-toolbox-info">
<p v-if="selectedItem">
<p v-if="showPercent && selectedItem">
<f7-chip class="chip-placeholder" outline v-if="skeleton">
<span class="skeleton-text">Percent</span>
</f7-chip>
@@ -53,7 +53,7 @@
:style="getColorStyle(selectedItem?.color, '--f7-chip-outline-border-color')"
v-else-if="!skeleton"></f7-chip>
</p>
<p v-else-if="!validItems || !validItems.length">
<p v-else-if="showPercent && (!validItems || !validItems.length)">
<f7-chip outline text="---"></f7-chip>
</p>
<f7-link class="pie-chart-selected-item-info" :no-link-class="!enableClickItem" v-if="selectedItem" @click="clickItem(selectedItem)">