mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-14 06:57:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

modify file name

Browse Source
This commit is contained in:
MaysWind
2025-08-03 19:28:22 +08:00
parent e90b76c80e
commit 15d1d269ae
7 changed files with 60 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/base/TrendsChartBase.ts → src/components/base/MonthlyTrendsChartBase.ts
+3 -3
View File
@@ -16,7 +16,7 @@ import type { YearMonthItems } from '@/models/transaction.ts';
import { getAllDateRanges } from '@/lib/statistics.ts';
export interface CommonTrendsChartProps<T extends Year1BasedMonth> {
export interface CommonMonthlyTrendsChartProps<T extends Year1BasedMonth> {
items: YearMonthItems<T>[];
startYearMonth: string;
endYearMonth: string;
@@ -34,12 +34,12 @@ export interface CommonTrendsChartProps<T extends Year1BasedMonth> {
enableClickItem?: boolean;
}
export interface TrendsBarChartClickEvent {
export interface MonthlyTrendsBarChartClickEvent {
itemId: string;
dateRange: TimeRangeAndDateType;
}
export function useTrendsChartBase<T extends Year1BasedMonth>(props: CommonTrendsChartProps<T>) {
export function useMonthlyTrendsChartBase<T extends Year1BasedMonth>(props: CommonMonthlyTrendsChartProps<T>) {
const { tt } = useI18n();
const allDateRanges = computed<YearUnixTime[] | FiscalYearUnixTime[] | YearQuarterUnixTime[] | YearMonthUnixTime[]>(() => getAllDateRanges(props.items, props.startYearMonth, props.endYearMonth, props.fiscalYearStart, props.dateAggregationType));
src/components/desktop/TrendsChart.vue → src/components/desktop/MonthlyTrendsChart.vue
+15 -15
View File
@@ -1,5 +1,5 @@
<template>
<v-chart autoresize class="trends-chart-container" :class="{ 'transition-in': skeleton }" :option="chartOptions"
<v-chart autoresize class="monthly-trends-chart-container" :class="{ 'transition-in': skeleton }" :option="chartOptions"
@click="clickItem" @legendselectchanged="onLegendSelectChanged" />
</template>
@@ -10,7 +10,7 @@ import type { ECElementEvent } from 'echarts/core';
import type { CallbackDataParams } from 'echarts/types/dist/shared';
import { useI18n } from '@/locales/helpers.ts';
import { type CommonTrendsChartProps, type TrendsBarChartClickEvent, useTrendsChartBase } from '@/components/base/TrendsChartBase.ts'
import { type CommonMonthlyTrendsChartProps, type MonthlyTrendsBarChartClickEvent, useMonthlyTrendsChartBase } from '@/components/base/MonthlyTrendsChartBase.ts'
import { useUserStore } from '@/stores/user.ts';
@@ -38,14 +38,14 @@ import {
sortStatisticsItems
} from '@/lib/statistics.ts';
interface DesktopTrendsChartProps<T extends Year1BasedMonth> extends CommonTrendsChartProps<T> {
interface DesktopMonthlyTrendsChartProps<T extends Year1BasedMonth> extends CommonMonthlyTrendsChartProps<T> {
skeleton?: boolean;
type?: number;
showValue?: boolean;
showTotalAmountInTooltip?: boolean;
}
interface TrendsChartDataItem {
interface MonthlyTrendsChartDataItem {
id: string;
name: string;
itemStyle: {
@@ -59,22 +59,22 @@ interface TrendsChartDataItem {
data: number[];
}
interface TrendsChartTooltipItem extends SortableTransactionStatisticDataItem {
interface MonthlyTrendsChartTooltipItem extends SortableTransactionStatisticDataItem {
readonly name: string;
readonly color: unknown;
readonly displayOrders: number[];
readonly totalAmount: number;
}
const props = defineProps<DesktopTrendsChartProps<YearMonthDataItem>>();
const props = defineProps<DesktopMonthlyTrendsChartProps<YearMonthDataItem>>();
const emit = defineEmits<{
(e: 'click', value: TrendsBarChartClickEvent): void;
(e: 'click', value: MonthlyTrendsBarChartClickEvent): void;
}>();
const theme = useTheme();
const { tt, formatUnixTimeToShortYear, formatYearQuarter, formatUnixTimeToShortYearMonth, formatUnixTimeToFiscalYear, formatAmountWithCurrency } = useI18n();
const { allDateRanges, getItemName, getColor } = useTrendsChartBase(props);
const { allDateRanges, getItemName, getColor } = useMonthlyTrendsChartBase(props);
const userStore = useUserStore();
@@ -137,8 +137,8 @@ const allDisplayDateRanges = computed<string[]>(() => {
return allDisplayDateRanges;
});
const allSeries = computed<TrendsChartDataItem[]>(() => {
const allSeries: TrendsChartDataItem[] = [];
const allSeries = computed<MonthlyTrendsChartDataItem[]>(() => {
const allSeries: MonthlyTrendsChartDataItem[] = [];
for (let i = 0; i < props.items.length; i++) {
const item = props.items[i];
@@ -204,7 +204,7 @@ const allSeries = computed<TrendsChartDataItem[]>(() => {
allAmounts.push(amount);
}
const finalItem: TrendsChartDataItem = {
const finalItem: MonthlyTrendsChartDataItem = {
id: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
name: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
itemStyle: {
@@ -294,7 +294,7 @@ const chartOptions = computed<object>(() => {
formatter: (params: CallbackDataParams[]) => {
let tooltip = '';
let totalAmount = 0;
const displayItems: TrendsChartTooltipItem[] = [];
const displayItems: MonthlyTrendsChartTooltipItem[] = [];
for (let i = 0; i < params.length; i++) {
const id = params[i].seriesId as string;
@@ -458,15 +458,15 @@ defineExpose({
</script>
<style scoped>
.trends-chart-container {
.monthly-trends-chart-container {
width: 100%;
height: 560px;
margin-top: 10px;
}
@media (min-width: 600px) {
.pie-chart-container {
height: 500px;
.monthly-trends-chart-container {
height: 600px;
}
}
</style>
src/components/mobile/TrendsBarChart.vue → src/components/mobile/MonthlyTrendsBarChart.vue
+27 -27
View File
@@ -33,13 +33,13 @@
<f7-list v-else-if="!loading && allDisplayDataItems && allDisplayDataItems.data && allDisplayDataItems.data.length">
<f7-list-item v-if="allDisplayDataItems.legends && allDisplayDataItems.legends.length > 1">
<div class="display-flex" style="flex-wrap: wrap">
<div class="trends-bar-chart-legend display-flex align-items-center"
:class="{ 'trends-bar-chart-legend-unselected': !!unselectedLegends[legend.id] }"
<div class="monthly-trends-bar-chart-legend display-flex align-items-center"
:class="{ 'monthly-trends-bar-chart-legend-unselected': !!unselectedLegends[legend.id] }"
:key="idx"
v-for="(legend, idx) in allDisplayDataItems.legends"
@click="toggleLegend(legend)">
<f7-icon f7="app_fill" class="trends-bar-chart-legend-icon" :style="{ 'color': unselectedLegends[legend.id] ? '' : legend.color }"></f7-icon>
<span class="trends-bar-chart-legend-text">{{ legend.name }}</span>
<f7-icon f7="app_fill" class="monthly-trends-bar-chart-legend-icon" :style="{ 'color': unselectedLegends[legend.id] ? '' : legend.color }"></f7-icon>
<span class="monthly-trends-bar-chart-legend-text">{{ legend.name }}</span>
</div>
</div>
</f7-list-item>
@@ -91,7 +91,7 @@
import { ref, computed } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { type CommonTrendsChartProps, type TrendsBarChartClickEvent, useTrendsChartBase } from '@/components/base/TrendsChartBase.ts'
import { type CommonMonthlyTrendsChartProps, type MonthlyTrendsBarChartClickEvent, useMonthlyTrendsChartBase } from '@/components/base/MonthlyTrendsChartBase.ts'
import { useUserStore } from '@/stores/user.ts';
@@ -120,43 +120,43 @@ interface TrendsBarChartLegend {
readonly displayOrders: number[];
}
interface TrendsBarChartDataAmount extends SortableTransactionStatisticDataItem, TrendsBarChartLegend {
interface MonthlyTrendsBarChartDataAmount extends SortableTransactionStatisticDataItem, TrendsBarChartLegend {
totalAmount: number;
}
interface TrendsBarChartDataItem {
interface MonthlyTrendsBarChartDataItem {
dateRange: UnixTimeRange;
displayDateRange: string;
items: TrendsBarChartDataAmount[];
items: MonthlyTrendsBarChartDataAmount[];
totalAmount: number;
totalPositiveAmount: number;
percent: number;
}
interface TrendsBarChartData {
readonly data: TrendsBarChartDataItem[];
interface MonthlyTrendsBarChartData {
readonly data: MonthlyTrendsBarChartDataItem[];
readonly legends: TrendsBarChartLegend[];
}
interface MobileTrendsChartProps<T extends Year1BasedMonth> extends CommonTrendsChartProps<T> {
interface MobileMonthlyTrendsChartProps<T extends Year1BasedMonth> extends CommonMonthlyTrendsChartProps<T> {
loading?: boolean;
}
const props = defineProps<MobileTrendsChartProps<YearMonthDataItem>>();
const props = defineProps<MobileMonthlyTrendsChartProps<YearMonthDataItem>>();
const emit = defineEmits<{
(e: 'click', value: TrendsBarChartClickEvent): void;
(e: 'click', value: MonthlyTrendsBarChartClickEvent): void;
}>();
const { tt, formatUnixTimeToShortYear, formatYearQuarter, formatUnixTimeToShortYearMonth, formatUnixTimeToFiscalYear, formatAmountWithCurrency } = useI18n();
const { allDateRanges, getItemName, getColor } = useTrendsChartBase(props);
const { allDateRanges, getItemName, getColor } = useMonthlyTrendsChartBase(props);
const userStore = useUserStore();
const unselectedLegends = ref<Record<string, boolean>>({});
const allDisplayDataItems = computed<TrendsBarChartData>(() => {
const allDateRangeItemsMap: Record<string, TrendsBarChartDataAmount[]> = {};
const allDisplayDataItems = computed<MonthlyTrendsBarChartData>(() => {
const allDateRangeItemsMap: Record<string, MonthlyTrendsBarChartDataAmount[]> = {};
const legends: TrendsBarChartLegend[] = [];
for (let i = 0; i < props.items.length; i++) {
@@ -181,7 +181,7 @@ const allDisplayDataItems = computed<TrendsBarChartData>(() => {
continue;
}
const dateRangeItemMap: Record<string, TrendsBarChartDataAmount> = {};
const dateRangeItemMap: Record<string, MonthlyTrendsBarChartDataAmount> = {};
for (let j = 0; j < item.items.length; j++) {
const dataItem = item.items[j];
@@ -204,8 +204,8 @@ const allDisplayDataItems = computed<TrendsBarChartData>(() => {
if (dateRangeItemMap[dateRangeKey]) {
dateRangeItemMap[dateRangeKey].totalAmount += (props.valueField && isNumber(dataItem[props.valueField])) ? dataItem[props.valueField] as number : 0;
} else {
const allDataItems: TrendsBarChartDataAmount[] = allDateRangeItemsMap[dateRangeKey] || [];
const finalDataItem: TrendsBarChartDataAmount = Object.assign({}, legend, {
const allDataItems: MonthlyTrendsBarChartDataAmount[] = allDateRangeItemsMap[dateRangeKey] || [];
const finalDataItem: MonthlyTrendsBarChartDataAmount = Object.assign({}, legend, {
totalAmount: (props.valueField && isNumber(dataItem[props.valueField])) ? dataItem[props.valueField] as number : 0
});
@@ -216,7 +216,7 @@ const allDisplayDataItems = computed<TrendsBarChartData>(() => {
}
}
const finalDataItems: TrendsBarChartDataItem[] = [];
const finalDataItems: MonthlyTrendsBarChartDataItem[] = [];
let maxTotalAmount = 0;
for (let i = 0; i < allDateRanges.value.length; i++) {
@@ -263,7 +263,7 @@ const allDisplayDataItems = computed<TrendsBarChartData>(() => {
maxTotalAmount = totalAmount;
}
const finalDataItem: TrendsBarChartDataItem = {
const finalDataItem: MonthlyTrendsBarChartDataItem = {
dateRange: dateRange,
displayDateRange: displayDateRange,
items: dataItems,
@@ -289,7 +289,7 @@ const allDisplayDataItems = computed<TrendsBarChartData>(() => {
};
});
function clickItem(item: TrendsBarChartDataItem): void {
function clickItem(item: MonthlyTrendsBarChartDataItem): void {
let itemId = '';
for (let i = 0; i < props.items.length; i++) {
@@ -354,25 +354,25 @@ function toggleLegend(legend: TrendsBarChartLegend): void {
</script>
<style>
.trends-bar-chart-legend {
.monthly-trends-bar-chart-legend {
margin-right: 4px;
cursor: pointer;
}
.trends-bar-chart-legend-icon.f7-icons {
.monthly-trends-bar-chart-legend-icon.f7-icons {
font-size: var(--ebk-trends-bar-chart-legend-icon-font-size);
margin-right: 2px;
}
.trends-bar-chart-legend-unselected .trends-bar-chart-legend-icon.f7-icons {
.monthly-trends-bar-chart-legend-unselected .monthly-trends-bar-chart-legend-icon.f7-icons {
color: #cccccc;
}
.trends-bar-chart-legend-text {
.monthly-trends-bar-chart-legend-text {
font-size: var(--ebk-trends-bar-chart-legend-text-font-size);
}
.trends-bar-chart-legend-unselected .trends-bar-chart-legend-text {
.monthly-trends-bar-chart-legend-unselected .monthly-trends-bar-chart-legend-text {
color: #cccccc;
}
</style>
src/desktop-main.ts
+2 -2
View File
@@ -95,7 +95,7 @@ import StepsBar from '@/components/desktop/StepsBar.vue';
import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
import SnackBar from '@/components/desktop/SnackBar.vue';
import PieChartComponent from '@/components/desktop/PieChart.vue';
import TrendsChartComponent from '@/components/desktop/TrendsChart.vue';
import MonthlyTrendsChart from '@/components/desktop/MonthlyTrendsChart.vue';
import DateRangeSelectionDialog from '@/components/desktop/DateRangeSelectionDialog.vue';
import MonthSelectionDialog from '@/components/desktop/MonthSelectionDialog.vue';
import MonthRangeSelectionDialog from '@/components/desktop/MonthRangeSelectionDialog.vue';
@@ -521,7 +521,7 @@ app.component('StepsBar', StepsBar);
app.component('ConfirmDialog', ConfirmDialog);
app.component('SnackBar', SnackBar);
app.component('PieChart', PieChartComponent);
app.component('TrendsChart', TrendsChartComponent);
app.component('MonthlyTrendsChart', MonthlyTrendsChart);
app.component('DateRangeSelectionDialog', DateRangeSelectionDialog);
app.component('MonthSelectionDialog', MonthSelectionDialog);
app.component('MonthRangeSelectionDialog', MonthRangeSelectionDialog);
src/mobile-main.ts
+2 -2
View File
@@ -87,7 +87,7 @@ import MapView from '@/components/common/MapView.vue';
import ItemIcon from '@/components/mobile/ItemIcon.vue';
import LanguageSelectButton from '@/components/mobile/LanguageSelectButton.vue';
import PieChart from '@/components/mobile/PieChart.vue';
import TrendsBarChart from '@/components/mobile/TrendsBarChart.vue';
import MonthlyTrendsBarChart from '@/components/mobile/MonthlyTrendsBarChart.vue';
import PinCodeInputSheet from '@/components/mobile/PinCodeInputSheet.vue';
import PasswordInputSheet from '@/components/mobile/PasswordInputSheet.vue';
import PasscodeInputSheet from '@/components/mobile/PasscodeInputSheet.vue';
@@ -176,7 +176,7 @@ app.component('MapView', MapView);
app.component('ItemIcon', ItemIcon);
app.component('LanguageSelectButton', LanguageSelectButton);
app.component('PieChart', PieChart);
app.component('TrendsBarChart', TrendsBarChart);
app.component('MonthlyTrendsBarChart', MonthlyTrendsBarChart);
app.component('PinCodeInputSheet', PinCodeInputSheet);
app.component('PasswordInputSheet', PasswordInputSheet);
app.component('PasscodeInputSheet', PasscodeInputSheet);
src/views/desktop/statistics/TransactionPage.vue
+10 -10
View File
@@ -257,7 +257,7 @@
</v-card-text>
<v-card-text :class="{ 'readonly': loading }" v-if="queryAnalysisType === StatisticsAnalysisType.TrendAnalysis">
<trends-chart
<monthly-trends-chart
:type="queryChartType"
:start-year-month="query.trendChartStartYearMonth"
:end-year-month="query.trendChartEndYearMonth"
@@ -271,8 +271,8 @@
value-field="value"
color-field="color"
v-if="initing"
></trends-chart>
<trends-chart
/>
<monthly-trends-chart
:type="queryChartType"
:start-year-month="query.trendChartStartYearMonth"
:end-year-month="query.trendChartEndYearMonth"
@@ -285,7 +285,7 @@
:enable-click-item="true"
:default-currency="defaultCurrency"
:show-total-amount-in-tooltip="showTotalAmountInTrendsChart"
ref="trendsChart"
ref="monthlyTrendsChart"
id-field="id"
name-field="name"
value-field="totalAmount"
@@ -340,7 +340,7 @@
<script setup lang="ts">
import SnackBar from '@/components/desktop/SnackBar.vue';
import TrendsChart from '@/components/desktop/TrendsChart.vue';
import MonthlyTrendsChart from '@/components/desktop/MonthlyTrendsChart.vue';
import AccountFilterSettingsCard from '@/views/desktop/common/cards/AccountFilterSettingsCard.vue';
import CategoryFilterSettingsCard from '@/views/desktop/common/cards/CategoryFilterSettingsCard.vue';
import TransactionTagFilterSettingsCard from '@/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue';
@@ -402,7 +402,7 @@ import {
} from '@mdi/js';
type SnackBarType = InstanceType<typeof SnackBar>;
type TrendsChartType = InstanceType<typeof TrendsChart>;
type MonthlyTrendsChartType = InstanceType<typeof MonthlyTrendsChart>;
type ExportDialogType = InstanceType<typeof ExportDialog>;
interface TransactionStatisticsProps {
@@ -461,7 +461,7 @@ const transactionCategoriesStore = useTransactionCategoriesStore();
const statisticsStore = useStatisticsStore();
const snackbar = useTemplateRef<SnackBarType>('snackbar');
const trendsChart = useTemplateRef<TrendsChartType>('trendsChart');
const monthlyTrendsChart = useTemplateRef<MonthlyTrendsChartType>('monthlyTrendsChart');
const exportDialog = useTemplateRef<ExportDialogType>('exportDialog');
const activeTab = ref<string>('statisticsPage');
@@ -481,7 +481,7 @@ const statisticsDataHasData = computed<boolean>(() => {
if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
return !!categoricalAnalysisData.value && !!categoricalAnalysisData.value.items && categoricalAnalysisData.value.items.length > 0;
} else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
return !!trendsAnalysisData.value && !!trendsAnalysisData.value.items && trendsAnalysisData.value.items.length > 0 && !!trendsChart.value;
return !!trendsAnalysisData.value && !!trendsAnalysisData.value.items && trendsAnalysisData.value.items.length > 0 && !!monthlyTrendsChart.value;
}
return false;
@@ -960,8 +960,8 @@ function exportResults(): void {
item.percent.toFixed(4)
])
});
} else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis && trendsAnalysisData.value && trendsAnalysisData.value.items && trendsChart.value) {
const exportData = trendsChart.value.exportData();
} else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis && trendsAnalysisData.value && trendsAnalysisData.value.items && monthlyTrendsChart.value) {
const exportData = monthlyTrendsChart.value.exportData();
exportDialog.value?.open({
headers: exportData.headers || [],
data: exportData.data || []
src/views/mobile/statistics/TransactionPage.vue
+1 -1
View File
@@ -202,7 +202,7 @@
</div>
</f7-card-header>
<f7-card-content style="margin-top: -14px" :padding="false">
<trends-bar-chart
<monthly-trends-bar-chart
:loading="loading || reloading"
:start-year-month="query.trendChartStartYearMonth"
:end-year-month="query.trendChartEndYearMonth"