add asset trends in statistics & analysis (#314)

src/components/base/AccountBalanceTrendsChartBase.ts

@@ -14,7 +14,7 @@ import { ChartDateAggregationType } from '@/core/statistics.ts';
 import type { AccountInfoResponse } from '@/models/account.ts';
 import type { TransactionReconciliationStatementResponseItem } from '@/models/transaction.ts';
 
-import { isDefined, isArray } from '@/lib/common.ts';
+import { isArray } from '@/lib/common.ts';
 import { sumAmounts } from '@/lib/numeral.ts';
 import {
     getGregorianCalendarYearAndMonthFromUnixTime,
@@ -45,7 +45,7 @@ export interface AccountBalanceTrendsChartItem {
 
 export interface CommonAccountBalanceTrendsChartProps {
     items: TransactionReconciliationStatementResponseItem[] | undefined;
-    dateAggregationType?: number;
+    dateAggregationType: number;
     fiscalYearStart: number;
     account: AccountInfoResponse;
 }
@@ -100,7 +100,7 @@ export function useAccountBalanceTrendsChartBase(props: CommonAccountBalanceTren
             return [];
         }
 
-        if (!isDefined(props.dateAggregationType)) {
+        if (props.dateAggregationType === ChartDateAggregationType.Day.type) {
             return getAllDaysStartAndEndUnixTimes(dataDateRange.value.minUnixTime, dataDateRange.value.maxUnixTime);
         } else {
             const startYearMonth = getGregorianCalendarYearAndMonthFromUnixTime(dataDateRange.value.minUnixTime);
@@ -129,8 +129,10 @@ export function useAccountBalanceTrendsChartBase(props: CommonAccountBalanceTren
                 dateRangeMinUnixTime = getQuarterFirstUnixTimeBySpecifiedUnixTime(dateItem.time);
             } else if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
                 dateRangeMinUnixTime = getMonthFirstUnixTimeBySpecifiedUnixTime(dateItem.time);
-            } else {
+            } else if (props.dateAggregationType === ChartDateAggregationType.Day.type) {
                 dateRangeMinUnixTime = getDayFirstUnixTimeBySpecifiedUnixTime(dateItem.time);
+            } else {
+                return ret;
             }
 
             const dataItems: TransactionReconciliationStatementResponseItem[] = dayDataItemsMap[dateRangeMinUnixTime] || [];
@@ -159,8 +161,10 @@ export function useAccountBalanceTrendsChartBase(props: CommonAccountBalanceTren
                 displayDate = formatUnixTimeToGregorianLikeYearQuarter(dateRange.minUnixTime);
             } else if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
                 displayDate = formatUnixTimeToGregorianLikeShortYearMonth(dateRange.minUnixTime);
-            } else {
+            } else if (props.dateAggregationType === ChartDateAggregationType.Day.type) {
                 displayDate = formatUnixTimeToShortDate(dateRange.minUnixTime);
+            } else {
+                return ret;
             }
 
             if (isArray(dataItems)) {

src/components/base/TrendsChartBase.ts

@@ -0,0 +1,136 @@
+import { computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import type {
+    TextualYearMonth,
+    Year1BasedMonth,
+    YearMonthDay,
+    TimeRangeAndDateType,
+    YearUnixTime,
+    YearQuarterUnixTime,
+    YearMonthUnixTime,
+    YearMonthDayUnixTime
+} from '@/core/datetime.ts';
+import type { FiscalYearUnixTime } from '@/core/fiscalyear.ts';
+import { ChartDataAggregationType, ChartDateAggregationType } from '@/core/statistics.ts';
+import type { YearMonthItems, YearMonthDayItems } from '@/models/transaction.ts';
+
+import {
+    getYearMonthDayDateTime,
+    getGregorianCalendarYearAndMonthFromUnixTime,
+    getAllDaysStartAndEndUnixTimes
+} from '@/lib/datetime.ts';
+import {
+    getAllDateRangesFromItems,
+    getAllDateRangesByYearMonthRange
+} from '@/lib/statistics.ts';
+
+export type TrendsChartDateType = 'daily' | 'monthly';
+
+interface TrendsChartTypes {
+    daily: {
+        ItemsType: YearMonthDayItems<YearMonthDay>;
+        DateTimeRangeType: number;
+        MonthRangeType: undefined;
+    };
+    monthly: {
+        ItemsType: YearMonthItems<Year1BasedMonth>;
+        DateTimeRangeType: undefined;
+        MonthRangeType: TextualYearMonth | '';
+    };
+}
+
+export interface CommonTrendsChartProps<T extends TrendsChartDateType> {
+    chartMode: T;
+    items: TrendsChartTypes[T]['ItemsType'][];
+    stacked?: boolean;
+    startTime: TrendsChartTypes[T]['DateTimeRangeType'];
+    endTime: TrendsChartTypes[T]['DateTimeRangeType'];
+    startYearMonth: TrendsChartTypes[T]['MonthRangeType'];
+    endYearMonth: TrendsChartTypes[T]['MonthRangeType'];
+    fiscalYearStart: number;
+    sortingType: number;
+    dataAggregationType: ChartDataAggregationType;
+    dateAggregationType: number;
+    idField?: string;
+    nameField: string;
+    valueField: string;
+    colorField?: string;
+    hiddenField?: string;
+    displayOrdersField?: string;
+    translateName?: boolean;
+    defaultCurrency?: string;
+    enableClickItem?: boolean;
+}
+
+export interface TrendsBarChartClickEvent {
+    itemId: string;
+    dateRange: TimeRangeAndDateType;
+}
+
+function buildDailyAllDateRanges(props: CommonTrendsChartProps<'daily'>): YearUnixTime[] | FiscalYearUnixTime[] | YearQuarterUnixTime[] | YearMonthUnixTime[] | YearMonthDayUnixTime[] {
+    let startTime: number = props.startTime;
+    let endTime: number = props.endTime;
+
+    if ((!startTime || !endTime) && props.items && props.items.length) {
+        let minUnixTime = Number.MAX_SAFE_INTEGER, maxUnixTime = 0;
+
+        for (const accountItem of props.items) {
+            for (const dataItem of accountItem.items) {
+                const dateTime = getYearMonthDayDateTime(dataItem.year, dataItem.month, dataItem.day);
+                const unixTime = dateTime.getUnixTime();
+
+                if (unixTime < minUnixTime) {
+                    minUnixTime = unixTime;
+                }
+
+                if (unixTime > maxUnixTime) {
+                    maxUnixTime = unixTime;
+                }
+            }
+        }
+
+        if (minUnixTime < Number.MAX_SAFE_INTEGER && maxUnixTime > 0) {
+            startTime = minUnixTime;
+            endTime = maxUnixTime;
+        }
+    }
+
+    if (props.dateAggregationType === ChartDateAggregationType.Day.type) {
+        return getAllDaysStartAndEndUnixTimes(startTime, endTime);
+    } else {
+        const startYearMonth = getGregorianCalendarYearAndMonthFromUnixTime(startTime);
+        const endYearMonth = getGregorianCalendarYearAndMonthFromUnixTime(endTime);
+        return getAllDateRangesByYearMonthRange(startYearMonth, endYearMonth, props.fiscalYearStart, props.dateAggregationType);
+    }
+}
+
+function buildMonthlyAllDateRanges(props: CommonTrendsChartProps<'monthly'>): YearUnixTime[] | FiscalYearUnixTime[] | YearQuarterUnixTime[] | YearMonthUnixTime[] {
+    return getAllDateRangesFromItems(props.items, props.startYearMonth, props.endYearMonth, props.fiscalYearStart, props.dateAggregationType);
+}
+
+export function useTrendsChartBase<T extends TrendsChartDateType>(props: CommonTrendsChartProps<T>) {
+    const { tt } = useI18n();
+
+    const allDateRanges = computed<YearUnixTime[] | FiscalYearUnixTime[] | YearQuarterUnixTime[] | YearMonthUnixTime[] | YearMonthDayUnixTime[]>(() => {
+        if (props.chartMode === 'daily') {
+            return buildDailyAllDateRanges(props as CommonTrendsChartProps<'daily'>);
+        } else if (props.chartMode === 'monthly') {
+            return buildMonthlyAllDateRanges(props as CommonTrendsChartProps<'monthly'>);
+        } else {
+            return [];
+        }
+    });
+
+    function getItemName(name: string): string {
+        return props.translateName ? tt(name) : name;
+    }
+
+    return {
+        // computed states
+        allDateRanges,
+        // functions
+        getItemName
+    };
+}

src/components/desktop/PieChart.vue

@@ -263,7 +263,7 @@ function onLegendSelectChanged(e: { selected: Record<string, boolean> }): void {
 
 @media (min-width: 600px) {
     .pie-chart-container {
-        height: 610px;
+        height: 650px;
     }
 }
 

src/components/desktop/RadarChart.vue

@@ -193,7 +193,7 @@ const chartOptions = computed<object>(() => {
 
 @media (min-width: 600px) {
     .radar-chart-container {
-        height: 610px;
+        height: 650px;
     }
 }
 

src/components/desktop/TrendsChart.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-chart autoresize class="monthly-trends-chart-container" :class="{ 'transition-in': skeleton }" :option="chartOptions"
+    <v-chart autoresize class="trends-chart-container" :class="{ 'transition-in': skeleton }" :option="chartOptions"
              @click="clickItem" @legendselectchanged="onLegendSelectChanged" />
 </template>
 
@@ -10,20 +10,33 @@ import type { ECElementEvent } from 'echarts/core';
 import type { CallbackDataParams } from 'echarts/types/dist/shared';
 
 import { useI18n } from '@/locales/helpers.ts';
-import { type CommonMonthlyTrendsChartProps, type MonthlyTrendsBarChartClickEvent, useMonthlyTrendsChartBase } from '@/components/base/MonthlyTrendsChartBase.ts'
+import {
+    type TrendsChartDateType,
+    type CommonTrendsChartProps,
+    type TrendsBarChartClickEvent,
+    useTrendsChartBase
+} from '@/components/base/TrendsChartBase.ts'
 
 import { useUserStore } from '@/stores/user.ts';
 
 import { itemAndIndex } from '@/core/base.ts';
 import { TextDirection } from '@/core/text.ts';
-import { type Year1BasedMonth, DateRangeScene } from '@/core/datetime.ts';
+import {
+    type Year1BasedMonth,
+    type YearMonthDay,
+    DateRangeScene
+} from '@/core/datetime.ts';
 import type { ColorStyleValue } from '@/core/color.ts';
 import { ThemeType } from '@/core/theme.ts';
-import { TrendChartType, ChartDateAggregationType } from '@/core/statistics.ts';
+import {
+    ChartDataAggregationType,
+    TrendChartType,
+    ChartDateAggregationType
+} from '@/core/statistics.ts';
 
 import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
 
-import type { YearMonthDataItem, SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
+import type { SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
 
 import {
     isArray,
@@ -42,14 +55,14 @@ import {
     sortStatisticsItems
 } from '@/lib/statistics.ts';
 
-interface DesktopMonthlyTrendsChartProps<T extends Year1BasedMonth> extends CommonMonthlyTrendsChartProps<T> {
+interface DesktopTrendsChartProps<T extends TrendsChartDateType> extends CommonTrendsChartProps<T> {
     skeleton?: boolean;
     type?: number;
     showValue?: boolean;
     showTotalAmountInTooltip?: boolean;
 }
 
-interface MonthlyTrendsChartDataItem {
+interface TrendsChartDataItem {
     id: string;
     name: string;
     itemStyle: {
@@ -64,17 +77,17 @@ interface MonthlyTrendsChartDataItem {
     data: number[];
 }
 
-interface MonthlyTrendsChartTooltipItem extends SortableTransactionStatisticDataItem {
+interface TrendsChartTooltipItem extends SortableTransactionStatisticDataItem {
     readonly name: string;
     readonly color: unknown;
     readonly displayOrders: number[];
     readonly totalAmount: number;
 }
 
-const props = defineProps<DesktopMonthlyTrendsChartProps<YearMonthDataItem>>();
+const props = defineProps<DesktopTrendsChartProps<TrendsChartDateType>>();
 
 const emit = defineEmits<{
-    (e: 'click', value: MonthlyTrendsBarChartClickEvent): void;
+    (e: 'click', value: TrendsBarChartClickEvent): void;
 }>();
 
 const theme = useTheme();
@@ -82,6 +95,7 @@ const theme = useTheme();
 const {
     tt,
     getCurrentLanguageTextDirection,
+    formatUnixTimeToShortDate,
     formatUnixTimeToGregorianLikeShortYear,
     formatUnixTimeToGregorianLikeShortYearMonth,
     formatYearQuarterToGregorianLikeYearQuarter,
@@ -90,7 +104,7 @@ const {
     formatAmountToLocalizedNumeralsWithCurrency
 } = useI18n();
 
-const { allDateRanges, getItemName } = useMonthlyTrendsChartBase(props);
+const { allDateRanges, getItemName } = useTrendsChartBase(props);
 
 const userStore = useUserStore();
 
@@ -143,16 +157,18 @@ const allDisplayDateRanges = computed<string[]>(() => {
             allDisplayDateRanges.push(formatUnixTimeToGregorianLikeFiscalYear(dateRange.minUnixTime));
         } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type && 'quarter' in dateRange) {
             allDisplayDateRanges.push(formatYearQuarterToGregorianLikeYearQuarter(dateRange.year, dateRange.quarter));
-        } else { // if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
+        } else if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
             allDisplayDateRanges.push(formatUnixTimeToGregorianLikeShortYearMonth(dateRange.minUnixTime));
+        } else if (props.dateAggregationType === ChartDateAggregationType.Day.type && props.chartMode === 'daily') {
+            allDisplayDateRanges.push(formatUnixTimeToShortDate(dateRange.minUnixTime));
         }
     }
 
     return allDisplayDateRanges;
 });
 
-const allSeries = computed<MonthlyTrendsChartDataItem[]>(() => {
-    const allSeries: MonthlyTrendsChartDataItem[] = [];
+const allSeries = computed<TrendsChartDataItem[]>(() => {
+    const allSeries: TrendsChartDataItem[] = [];
     let maxAmount: number = 0;
 
     for (const [item, index] of itemAndIndex(props.items)) {
@@ -161,23 +177,41 @@ const allSeries = computed<MonthlyTrendsChartDataItem[]>(() => {
         }
 
         const allAmounts: number[] = [];
-        const dateRangeAmountMap: Record<string, YearMonthDataItem[]> = {};
+        const dateRangeAmountMap: Record<string, (Year1BasedMonth | YearMonthDay)[]> = {};
 
         for (const dataItem of item.items) {
             let dateRangeKey = '';
 
-            if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
-                dateRangeKey = dataItem.year.toString();
-            } else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type) {
-                const fiscalYear = getFiscalYearFromUnixTime(
-                    getYearMonthFirstUnixTime({ year: dataItem.year, month1base: dataItem.month1base }),
-                    props.fiscalYearStart
-                );
-                dateRangeKey = fiscalYear.toString();
-            } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type) {
-                dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month1base - 1) / 3) + 1}`;
-            } else { // if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
-                dateRangeKey = `${dataItem.year}-${dataItem.month1base}`;
+            if (props.chartMode === 'daily' && 'month' in dataItem) {
+                if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
+                    dateRangeKey = dataItem.year.toString();
+                } else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type) {
+                    const fiscalYear = getFiscalYearFromUnixTime(
+                        getYearMonthFirstUnixTime({ year: dataItem.year, month1base: dataItem.month }),
+                        props.fiscalYearStart
+                    );
+                    dateRangeKey = fiscalYear.toString();
+                } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type) {
+                    dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month - 1) / 3) + 1}`;
+                } else if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
+                    dateRangeKey = `${dataItem.year}-${dataItem.month}`;
+                } else { // if (props.dateAggregationType === ChartDateAggregationType.Day.type) {
+                    dateRangeKey = `${dataItem.year}-${dataItem.month}-${dataItem.day}`;
+                }
+            } else if (props.chartMode === 'monthly' && 'month1base' in dataItem) {
+                if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
+                    dateRangeKey = dataItem.year.toString();
+                } else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type) {
+                    const fiscalYear = getFiscalYearFromUnixTime(
+                        getYearMonthFirstUnixTime({ year: dataItem.year, month1base: dataItem.month1base }),
+                        props.fiscalYearStart
+                    );
+                    dateRangeKey = fiscalYear.toString();
+                } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type) {
+                    dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month1base - 1) / 3) + 1}`;
+                } else { // if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
+                    dateRangeKey = `${dataItem.year}-${dataItem.month1base}`;
+                }
             }
 
             const dataItems = dateRangeAmountMap[dateRangeKey] || [];
@@ -197,6 +231,8 @@ const allSeries = computed<MonthlyTrendsChartDataItem[]>(() => {
                 dateRangeKey = `${dateRange.year}-${dateRange.quarter}`;
             } else if (props.dateAggregationType === ChartDateAggregationType.Month.type && 'month0base' in dateRange) {
                 dateRangeKey = `${dateRange.year}-${dateRange.month0base + 1}`;
+            } else if (props.dateAggregationType === ChartDateAggregationType.Day.type && 'day' in dateRange && props.chartMode === 'daily') {
+                dateRangeKey = `${dateRange.year}-${dateRange.month}-${dateRange.day}`;
             }
 
             let amount = 0;
@@ -204,8 +240,14 @@ const allSeries = computed<MonthlyTrendsChartDataItem[]>(() => {
 
             if (isArray(dataItems)) {
                 for (const dataItem of dataItems) {
-                    if (isNumber(dataItem[props.valueField])) {
-                        amount += dataItem[props.valueField] as number;
+                    const value = (dataItem as unknown as Record<string, unknown>)[props.valueField];
+
+                    if (isNumber(value)) {
+                        if (props.dataAggregationType === ChartDataAggregationType.Sum) {
+                            amount += value;
+                        } else if (props.dataAggregationType === ChartDataAggregationType.Last) {
+                            amount = value;
+                        }
                     }
                 }
             }
@@ -217,7 +259,7 @@ const allSeries = computed<MonthlyTrendsChartDataItem[]>(() => {
             allAmounts.push(amount);
         }
 
-        const finalItem: MonthlyTrendsChartDataItem = {
+        const finalItem: TrendsChartDataItem = {
             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: {
@@ -317,7 +359,7 @@ const chartOptions = computed<object>(() => {
                 let tooltip = '';
                 let totalAmount = 0;
                 let actualDisplayItemCount = 0;
-                const displayItems: MonthlyTrendsChartTooltipItem[] = [];
+                const displayItems: TrendsChartTooltipItem[] = [];
 
                 for (const param of params) {
                     const id = param.seriesId as string;
@@ -435,19 +477,33 @@ function clickItem(e: ECElementEvent): void {
     let minUnixTime = dateRange.minUnixTime;
     let maxUnixTime = dateRange.maxUnixTime;
 
-    if (props.startYearMonth) {
-        const startMinUnixTime = getYearMonthFirstUnixTime(props.startYearMonth);
-
-        if (startMinUnixTime > minUnixTime) {
-            minUnixTime = startMinUnixTime;
+    if (props.chartMode === 'daily') {
+        if (props.startTime) {
+            if (props.startTime > minUnixTime) {
+                minUnixTime = props.startTime;
+            }
         }
-    }
 
-    if (props.endYearMonth) {
-        const endMaxUnixTime = getYearMonthLastUnixTime(props.endYearMonth);
+        if (props.endTime) {
+            if (props.endTime < maxUnixTime) {
+                maxUnixTime = props.endTime;
+            }
+        }
+    } else if (props.chartMode === 'monthly') {
+        if (props.startYearMonth) {
+            const startMinUnixTime = getYearMonthFirstUnixTime(props.startYearMonth);
 
-        if (endMaxUnixTime < maxUnixTime) {
-            maxUnixTime = endMaxUnixTime;
+            if (startMinUnixTime > minUnixTime) {
+                minUnixTime = startMinUnixTime;
+            }
+        }
+
+        if (props.endYearMonth) {
+            const endMaxUnixTime = getYearMonthLastUnixTime(props.endYearMonth);
+
+            if (endMaxUnixTime < maxUnixTime) {
+                maxUnixTime = endMaxUnixTime;
+            }
         }
     }
 
@@ -498,15 +554,15 @@ defineExpose({
 </script>
 
 <style scoped>
-.monthly-trends-chart-container {
+.trends-chart-container {
     width: 100%;
     height: 720px;
     margin-top: 10px;
 }
 
 @media (min-width: 600px) {
-    .monthly-trends-chart-container {
-        height: 760px;
+    .trends-chart-container {
+        height: 790px;
     }
 }
 </style>

src/components/mobile/TrendsBarChart.vue

@@ -30,23 +30,31 @@
         <f7-list-item :title="tt('No transaction data')"></f7-list-item>
     </f7-list>
 
-    <f7-list v-else-if="!loading && allDisplayDataItems && allDisplayDataItems.data && allDisplayDataItems.data.length">
+    <f7-list v-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="monthly-trends-bar-chart-legend display-flex align-items-center"
-                     :class="{ 'monthly-trends-bar-chart-legend-unselected': !!unselectedLegends[legend.id] }"
+                <div class="trends-bar-chart-legend display-flex align-items-center"
+                     :class="{ '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="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>
+                    <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>
                 </div>
             </div>
         </f7-list-item>
+    </f7-list>
+
+    <f7-list :key="`trends-bar-chart-${allDisplayDataItemsVersion}`"
+             :virtual-list="useVirtualList"
+             :virtual-list-params="useVirtualList ? { items: allDisplayDataItems.data, renderExternal, height: 'auto' } : undefined"
+             v-if="!loading && allDisplayDataItems && allDisplayDataItems.data && allDisplayDataItems.data.length">
         <f7-list-item link="#"
-                      :key="idx"
+                      :key="item.index"
                       :class="{ 'statistics-list-item': true, 'statistics-list-item-stacked': stacked, 'statistics-list-item-non-stacked': !stacked }"
-                      v-for="(item, idx) in allDisplayDataItems.data"
+                      :style="useVirtualList ? `top: ${virtualDataItems.topPosition}px` : undefined"
+                      :virtual-list-index="item.index"
+                      v-for="item in (useVirtualList ? virtualDataItems.items : allDisplayDataItems.data)"
                       @click="clickItem(item)"
         >
             <template #media>
@@ -105,21 +113,32 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
-import { type CommonMonthlyTrendsChartProps, type MonthlyTrendsBarChartClickEvent, useMonthlyTrendsChartBase } from '@/components/base/MonthlyTrendsChartBase.ts'
+import {
+    type TrendsChartDateType,
+    type CommonTrendsChartProps,
+    type TrendsBarChartClickEvent,
+    useTrendsChartBase
+} from '@/components/base/TrendsChartBase.ts'
 
 import { useUserStore } from '@/stores/user.ts';
 
 import { itemAndIndex } from '@/core/base.ts';
-import { type Year1BasedMonth, type UnixTimeRange, DateRangeScene } from '@/core/datetime.ts';
+import {
+    type UnixTimeRange,
+    DateRangeScene
+} from '@/core/datetime.ts';
 import type { ColorStyleValue } from '@/core/color.ts';
-import { ChartDateAggregationType } from '@/core/statistics.ts';
+import {
+    ChartDataAggregationType,
+    ChartDateAggregationType
+} from '@/core/statistics.ts';
 
 import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
 
-import type { YearMonthDataItem, SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
+import type { SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
 
 import {
     isNumber
@@ -144,37 +163,44 @@ interface TrendsBarChartLegend {
     readonly displayOrders: number[];
 }
 
-interface MonthlyTrendsBarChartDataAmount extends SortableTransactionStatisticDataItem, TrendsBarChartLegend {
+interface TrendsBarChartDataAmount extends SortableTransactionStatisticDataItem, TrendsBarChartLegend {
     totalAmount: number;
 }
 
-interface MonthlyTrendsBarChartDataItem {
+interface TrendsBarChartDataItem {
+    index: number;
     dateRange: UnixTimeRange;
     displayDateRange: string;
-    items: MonthlyTrendsBarChartDataAmount[];
+    items: TrendsBarChartDataAmount[];
     totalAmount: number;
     totalPositiveAmount: number;
     maxAmount: number;
     percent: number;
 }
 
-interface MonthlyTrendsBarChartData {
-    readonly data: MonthlyTrendsBarChartDataItem[];
+interface TrendsBarChartVirtualListData {
+    items: TrendsBarChartDataItem[],
+    topPosition: number
+}
+
+interface TrendsBarChartData {
+    readonly data: TrendsBarChartDataItem[];
     readonly legends: TrendsBarChartLegend[];
 }
 
-interface MobileMonthlyTrendsChartProps<T extends Year1BasedMonth> extends CommonMonthlyTrendsChartProps<T> {
+interface MobileTrendsChartProps<T extends TrendsChartDateType> extends CommonTrendsChartProps<T> {
     loading?: boolean;
 }
 
-const props = defineProps<MobileMonthlyTrendsChartProps<YearMonthDataItem>>();
+const props = defineProps<MobileTrendsChartProps<TrendsChartDateType>>();
 
 const emit = defineEmits<{
-    (e: 'click', value: MonthlyTrendsBarChartClickEvent): void;
+    (e: 'click', value: TrendsBarChartClickEvent): void;
 }>();
 
 const {
     tt,
+    formatUnixTimeToShortDate,
     formatUnixTimeToGregorianLikeShortYear,
     formatUnixTimeToGregorianLikeShortYearMonth,
     formatYearQuarterToGregorianLikeYearQuarter,
@@ -182,14 +208,22 @@ const {
     formatAmountToLocalizedNumeralsWithCurrency
 } = useI18n();
 
-const { allDateRanges, getItemName } = useMonthlyTrendsChartBase(props);
+const { allDateRanges, getItemName } = useTrendsChartBase(props);
 
 const userStore = useUserStore();
 
+const allDisplayDataItemsVersion = ref<number>(0);
 const unselectedLegends = ref<Record<string, boolean>>({});
 
-const allDisplayDataItems = computed<MonthlyTrendsBarChartData>(() => {
-    const allDateRangeItemsMap: Record<string, MonthlyTrendsBarChartDataAmount[]> = {};
+const virtualDataItems = ref<TrendsBarChartVirtualListData>({
+    items: [],
+    topPosition: 0
+});
+
+const useVirtualList = computed<boolean>(() => allDisplayDataItems.value.legends.length <= 1 || props.stacked);
+
+const allDisplayDataItems = computed<TrendsBarChartData>(() => {
+    const allDateRangeItemsMap: Record<string, TrendsBarChartDataAmount[]> = {};
     const legends: TrendsBarChartLegend[] = [];
 
     for (const [item, index] of itemAndIndex(props.items)) {
@@ -212,31 +246,57 @@ const allDisplayDataItems = computed<MonthlyTrendsBarChartData>(() => {
             continue;
         }
 
-        const dateRangeItemMap: Record<string, MonthlyTrendsBarChartDataAmount> = {};
+        const dateRangeItemMap: Record<string, TrendsBarChartDataAmount> = {};
 
         for (const dataItem of item.items) {
             let dateRangeKey = '';
 
-            if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
-                dateRangeKey = dataItem.year.toString();
-            } else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type) {
-                const fiscalYear = getFiscalYearFromUnixTime(
-                    getYearMonthFirstUnixTime({ year: dataItem.year, month1base: dataItem.month1base }),
-                    props.fiscalYearStart
-                );
-                dateRangeKey = fiscalYear.toString();
-            } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type) {
-                dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month1base - 1) / 3) + 1}`;
-            } else { // if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
-                dateRangeKey = `${dataItem.year}-${dataItem.month1base}`;
+            if (props.chartMode === 'daily' && 'month' in dataItem) {
+                if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
+                    dateRangeKey = dataItem.year.toString();
+                } else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type) {
+                    const fiscalYear = getFiscalYearFromUnixTime(
+                        getYearMonthFirstUnixTime({ year: dataItem.year, month1base: dataItem.month }),
+                        props.fiscalYearStart
+                    );
+                    dateRangeKey = fiscalYear.toString();
+                } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type) {
+                    dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month - 1) / 3) + 1}`;
+                } else if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
+                    dateRangeKey = `${dataItem.year}-${dataItem.month}`;
+                } else { // if (props.dateAggregationType === ChartDateAggregationType.Day.type) {
+                    dateRangeKey = `${dataItem.year}-${dataItem.month}-${dataItem.day}`;
+                }
+            } else if (props.chartMode === 'monthly' && 'month1base' in dataItem) {
+                if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
+                    dateRangeKey = dataItem.year.toString();
+                } else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type) {
+                    const fiscalYear = getFiscalYearFromUnixTime(
+                        getYearMonthFirstUnixTime({ year: dataItem.year, month1base: dataItem.month1base }),
+                        props.fiscalYearStart
+                    );
+                    dateRangeKey = fiscalYear.toString();
+                } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type) {
+                    dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month1base - 1) / 3) + 1}`;
+                } else { // if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
+                    dateRangeKey = `${dataItem.year}-${dataItem.month1base}`;
+                }
             }
 
+            const value = (dataItem as unknown as Record<string, unknown>)[props.valueField];
+
             if (dateRangeItemMap[dateRangeKey]) {
-                dateRangeItemMap[dateRangeKey]!.totalAmount += (props.valueField && isNumber(dataItem[props.valueField])) ? dataItem[props.valueField] as number : 0;
+                if (isNumber(value)) {
+                    if (props.dataAggregationType === ChartDataAggregationType.Sum) {
+                        dateRangeItemMap[dateRangeKey]!.totalAmount += value;
+                    } else if (props.dataAggregationType === ChartDataAggregationType.Last) {
+                        dateRangeItemMap[dateRangeKey]!.totalAmount = value;
+                    }
+                }
             } else {
-                const allDataItems: MonthlyTrendsBarChartDataAmount[] = allDateRangeItemsMap[dateRangeKey] || [];
-                const finalDataItem: MonthlyTrendsBarChartDataAmount = Object.assign({}, legend, {
-                    totalAmount: (props.valueField && isNumber(dataItem[props.valueField])) ? dataItem[props.valueField] as number : 0
+                const allDataItems: TrendsBarChartDataAmount[] = allDateRangeItemsMap[dateRangeKey] || [];
+                const finalDataItem: TrendsBarChartDataAmount = Object.assign({}, legend, {
+                    totalAmount: isNumber(value) ? value : 0
                 });
 
                 allDataItems.push(finalDataItem);
@@ -246,7 +306,7 @@ const allDisplayDataItems = computed<MonthlyTrendsBarChartData>(() => {
         }
     }
 
-    const finalDataItems: MonthlyTrendsBarChartDataItem[] = [];
+    const finalDataItems: TrendsBarChartDataItem[] = [];
     let maxTotalAmount = 0;
 
     for (const dateRange of allDateRanges.value) {
@@ -260,6 +320,8 @@ const allDisplayDataItems = computed<MonthlyTrendsBarChartData>(() => {
             dateRangeKey = `${dateRange.year}-${dateRange.quarter}`;
         } else if (props.dateAggregationType === ChartDateAggregationType.Month.type && 'month0base' in dateRange) {
             dateRangeKey = `${dateRange.year}-${dateRange.month0base + 1}`;
+        } else if (props.dateAggregationType === ChartDateAggregationType.Day.type && 'day' in dateRange && props.chartMode === 'daily') {
+            dateRangeKey = `${dateRange.year}-${dateRange.month}-${dateRange.day}`;
         }
 
         let displayDateRange = '';
@@ -270,8 +332,10 @@ const allDisplayDataItems = computed<MonthlyTrendsBarChartData>(() => {
             displayDateRange = formatUnixTimeToGregorianLikeFiscalYear(dateRange.minUnixTime);
         } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type && 'quarter' in dateRange) {
             displayDateRange = formatYearQuarterToGregorianLikeYearQuarter(dateRange.year, dateRange.quarter);
-        } else { // if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
+        } else if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
             displayDateRange = formatUnixTimeToGregorianLikeShortYearMonth(dateRange.minUnixTime);
+        } else if (props.dateAggregationType === ChartDateAggregationType.Day.type && props.chartMode === 'daily') {
+            displayDateRange = formatUnixTimeToShortDate(dateRange.minUnixTime);
         }
 
         const dataItems = allDateRangeItemsMap[dateRangeKey] || [];
@@ -297,7 +361,8 @@ const allDisplayDataItems = computed<MonthlyTrendsBarChartData>(() => {
             maxTotalAmount = totalAmount;
         }
 
-        const finalDataItem: MonthlyTrendsBarChartDataItem = {
+        const finalDataItem: TrendsBarChartDataItem = {
+            index: finalDataItems.length,
             dateRange: dateRange,
             displayDateRange: displayDateRange,
             items: dataItems,
@@ -324,7 +389,7 @@ const allDisplayDataItems = computed<MonthlyTrendsBarChartData>(() => {
     };
 });
 
-function clickItem(item: MonthlyTrendsBarChartDataItem): void {
+function clickItem(item: TrendsBarChartDataItem): void {
     let itemId = '';
 
     for (const item of props.items) {
@@ -349,19 +414,33 @@ function clickItem(item: MonthlyTrendsBarChartDataItem): void {
     let minUnixTime = dateRange.minUnixTime;
     let maxUnixTime = dateRange.maxUnixTime;
 
-    if (props.startYearMonth) {
-        const startMinUnixTime = getYearMonthFirstUnixTime(props.startYearMonth);
-
-        if (startMinUnixTime > minUnixTime) {
-            minUnixTime = startMinUnixTime;
+    if (props.chartMode === 'daily') {
+        if (props.startTime) {
+            if (props.startTime > minUnixTime) {
+                minUnixTime = props.startTime;
+            }
         }
-    }
 
-    if (props.endYearMonth) {
-        const endMaxUnixTime = getYearMonthLastUnixTime(props.endYearMonth);
+        if (props.endTime) {
+            if (props.endTime < maxUnixTime) {
+                maxUnixTime = props.endTime;
+            }
+        }
+    } else if (props.chartMode === 'monthly') {
+        if (props.startYearMonth) {
+            const startMinUnixTime = getYearMonthFirstUnixTime(props.startYearMonth);
 
-        if (endMaxUnixTime < maxUnixTime) {
-            maxUnixTime = endMaxUnixTime;
+            if (startMinUnixTime > minUnixTime) {
+                minUnixTime = startMinUnixTime;
+            }
+        }
+
+        if (props.endYearMonth) {
+            const endMaxUnixTime = getYearMonthLastUnixTime(props.endYearMonth);
+
+            if (endMaxUnixTime < maxUnixTime) {
+                maxUnixTime = endMaxUnixTime;
+            }
         }
     }
 
@@ -384,28 +463,38 @@ function toggleLegend(legend: TrendsBarChartLegend): void {
         unselectedLegends.value[legend.id] = true;
     }
 }
+
+function renderExternal(vl: unknown, vlData: TrendsBarChartVirtualListData): void {
+    virtualDataItems.value = vlData;
+}
+
+watch(allDisplayDataItems, () => {
+    allDisplayDataItemsVersion.value++;
+}, {
+    deep: true
+});
 </script>
 
 <style>
-.monthly-trends-bar-chart-legend {
+.trends-bar-chart-legend {
     margin-inline-end: 4px;
     cursor: pointer;
 }
 
-.monthly-trends-bar-chart-legend-icon.f7-icons {
+.trends-bar-chart-legend-icon.f7-icons {
     font-size: var(--ebk-trends-bar-chart-legend-icon-font-size);
     margin-inline-end: 2px;
 }
 
-.monthly-trends-bar-chart-legend-unselected .monthly-trends-bar-chart-legend-icon.f7-icons {
+.trends-bar-chart-legend-unselected .trends-bar-chart-legend-icon.f7-icons {
     color: #cccccc;
 }
 
-.monthly-trends-bar-chart-legend-text {
+.trends-bar-chart-legend-text {
     font-size: var(--ebk-trends-bar-chart-legend-text-font-size);
 }
 
-.monthly-trends-bar-chart-legend-unselected .monthly-trends-bar-chart-legend-text {
+.trends-bar-chart-legend-unselected .trends-bar-chart-legend-text {
     color: #cccccc;
 }
 </style>