mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-15 23:47:33 +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>