show year-over-year and period-over-period in trends chart

src/components/desktop/AxisChart.vue

@@ -42,6 +42,7 @@ interface AxisChartDataItem {
 }
 
 interface AxisChartTooltipItem extends SortableTransactionStatisticDataItem {
+    readonly id: string;
     readonly name: string;
     readonly color: unknown;
     readonly displayOrders: number[];
@@ -71,6 +72,9 @@ const props = defineProps<{
     amountValue?: boolean;
     defaultCurrency?: string;
     enableClickItem?: boolean;
+    tooltipExtraColumnNames?: string[];
+    tooltipExtraColumnTotalValues?: (categoryIndex: number, totalValue: number, visibleSeriesIds: string[]) => string[];
+    tooltipExtraColumnValues?: (seriesId: string, categoryIndex: number, currentValue: number) => string[];
 }>();
 
 const emit = defineEmits<{
@@ -290,6 +294,8 @@ const chartOptions = computed<object>(() => {
                 let totalAmount = 0;
                 let actualDisplayItemCount = 0;
                 const displayItems: AxisChartTooltipItem[] = [];
+                const categoryIndex = params.length > 0 && params[0] ? (params[0].dataIndex ?? 0) : 0;
+                const visibleSeriesIds: string[] = [];
 
                 for (const param of params) {
                     const id = param.seriesId as string;
@@ -299,38 +305,111 @@ const chartOptions = computed<object>(() => {
                     const amount = param.data as number;
 
                     displayItems.push({
+                        id: id,
                         name: name,
                         color: color,
                         displayOrders: displayOrders,
                         totalAmount: amount
                     });
 
+                    visibleSeriesIds.push(id);
                     totalAmount += amount;
                 }
 
                 sortStatisticsItems(displayItems, props.sortingType);
 
-                for (const item of displayItems) {
+                const extraColumnValuesMap: Record<number, string[]> = {};
+                const extraColumnTotalValues: string[] = [];
+                const hasExtraColumnIndexes: Record<number, boolean> = {};
+
+                if (props.tooltipExtraColumnNames) {
+                    if (props.tooltipExtraColumnValues) {
+                        for (const [item, index] of itemAndIndex(displayItems)) {
+                            const values = props.tooltipExtraColumnValues(item.id, categoryIndex, item.totalAmount);
+                            extraColumnValuesMap[index] = values;
+
+                            for (const [value, columnIndex] of itemAndIndex(values)) {
+                                if (value && value !== '-') {
+                                    hasExtraColumnIndexes[columnIndex] = true;
+                                }
+                            }
+                        }
+                    }
+
+                    if (props.tooltipExtraColumnTotalValues) {
+                        const values = props.tooltipExtraColumnTotalValues(categoryIndex, totalAmount, visibleSeriesIds);
+                        extraColumnTotalValues.push(...values);
+
+                        for (const [value, columnIndex] of itemAndIndex(values)) {
+                            if (value && value !== '-') {
+                                hasExtraColumnIndexes[columnIndex] = true;
+                            }
+                        }
+                    }
+                }
+
+                for (const [item, index] of itemAndIndex(displayItems)) {
                     if (displayItems.length === 1 || item.totalAmount !== 0) {
                         const value = getDisplayValue(item.totalAmount);
-                        tooltip += '<div><span class="chart-pointer" style="background-color: ' + item.color + '"></span>';
-                        tooltip += `<span>${item.name}</span><span class="ms-5" style="float: inline-end">${value}</span>`;
-                        tooltip += '</div>';
+                        tooltip += '<tr><td><span class="chart-pointer" style="background-color: ' + item.color + '"></span>';
+                        tooltip += `<span>${item.name}</span></td><td><span class="ms-5" style="float: inline-end">${value}</span></td>`;
+
+                        if (props.tooltipExtraColumnNames) {
+                            const values = extraColumnValuesMap[index] ?? [];
+
+                            for (let i = 0; i < props.tooltipExtraColumnNames.length; i++) {
+                                if (!hasExtraColumnIndexes[i]) {
+                                    continue;
+                                }
+
+                                const value = values[i] ?? '-';
+                                tooltip += `<td><span class="ms-5" style="float: inline-end">${value}</span></td>`;
+                            }
+                        }
+
+                        tooltip += '</tr>';
                         actualDisplayItemCount++;
                     }
                 }
 
                 if (props.showTotalAmountInTooltip && !props.oneHundredPercentStacked) {
                     const displayTotalAmount = getDisplayValue(totalAmount);
-                    tooltip = '<div><span class="chart-pointer" style="background-color: ' + (isDarkMode.value ? '#eee' : '#333') + '"></span>'
-                        + `<span>${props.totalNameInTooltip}</span><span class="ms-5" style="float: inline-end">${displayTotalAmount}</span>`
-                        + '</div>'
-                        + (actualDisplayItemCount > 0 ? '<div style="border-bottom: ' + (isDarkMode.value ? '#eee' : '#333') + ' dashed 1px"></div>' : '')
-                        + tooltip;
+                    let totalColumnCount = 2;
+
+                    let totalTooltip = `<tr><td><span class="chart-pointer" style="background-color: ${isDarkMode.value ? '#eee' : '#333'}"></span>`
+                        + `<span>${props.totalNameInTooltip}</span></td><td><span class="ms-5" style="float: inline-end">${displayTotalAmount}</span></td>`;
+
+                    if (props.tooltipExtraColumnNames) {
+                        for (let i = 0; i < props.tooltipExtraColumnNames.length; i++) {
+                            if (!hasExtraColumnIndexes[i]) {
+                                continue;
+                            }
+
+                            const value = extraColumnTotalValues[i] ?? '-';
+                            totalTooltip += `<td><span class="ms-5" style="float: inline-end">${value}</span></td>`;
+                            totalColumnCount++;
+                        }
+                    }
+
+                    totalTooltip += '</tr>';
+                    totalTooltip += `<tr><td colspan="${totalColumnCount}" ${actualDisplayItemCount > 0 ? 'style="border-bottom: ' + (isDarkMode.value ? '#eee' : '#333') + ' dashed 1px"' : ''}></td></tr>`;
+                    tooltip = totalTooltip + tooltip;
                 }
 
                 if (params.length && params[0] && params[0].name) {
-                    tooltip = `${params[0].name}<br/>` + tooltip;
+                    let tooltipHeader = `<td>${params[0].name}</td><td></td>`;
+
+                    if (props.tooltipExtraColumnNames) {
+                        for (const [columnName, columnIndex] of itemAndIndex(props.tooltipExtraColumnNames)) {
+                            if (!hasExtraColumnIndexes[columnIndex]) {
+                                continue;
+                            }
+
+                            tooltipHeader += `<td><span class="ms-5" style="float: inline-end">${columnName}</span></td>`;
+                        }
+                    }
+
+                    tooltip = `<table class="chart-tooltip-table"><tbody><tr>${tooltipHeader}</tr>${tooltip}</tbody></table>`
                 }
 
                 return tooltip;

src/components/desktop/TrendsChart.vue

@@ -9,6 +9,9 @@
                 :translate-name="translateName"
                 :amount-value="true" :default-currency="defaultCurrency"
                 :enable-click-item="enableClickItem"
+                :tooltip-extra-column-names="allTooltipExtraColumnNames"
+                :tooltip-extra-column-total-values="showYearOverYear || showPeriodOverPeriod ? getTooltipExtraColumnTotalValues : undefined"
+                :tooltip-extra-column-values="showYearOverYear || showPeriodOverPeriod ? getTooltipExtraColumnValues : undefined"
                 @click="clickItem"
                 v-if="chartDisplayType"
     />
@@ -29,18 +32,31 @@ import {
 
 import { useUserStore } from '@/stores/user.ts';
 
+import {
+    itemAndIndex
+} from '@/core/base.ts';
 import {
     type Year1BasedMonth,
     type YearMonthDay,
+    type YearUnixTime,
+    type YearQuarterUnixTime,
+    type YearMonthUnixTime,
+    type YearMonthDayUnixTime,
     DateRangeScene
 } from '@/core/datetime.ts';
+import {
+    type FiscalYearUnixTime
+} from '@/core/fiscalyear.ts';
 import {
     ChartDataAggregationType,
     TrendChartType,
     ChartDateAggregationType
 } from '@/core/statistics.ts';
 
-import { isArray, isNumber } from '@/lib/common.ts';
+import {
+    isArray,
+    isNumber
+} from '@/lib/common.ts';
 import {
     parseDateTimeFromUnixTime,
     getYearMonthFirstUnixTime,
@@ -56,6 +72,8 @@ interface DesktopTrendsChartProps<T extends TrendsChartDateType> extends CommonT
     type?: number;
     showValue?: boolean;
     showTotalAmountInTooltip?: boolean;
+    showYearOverYear?: boolean;
+    showPeriodOverPeriod?: boolean;
 }
 
 const props = defineProps<DesktopTrendsChartProps<TrendsChartDateType>>();
@@ -70,7 +88,8 @@ const {
     formatDateTimeToGregorianLikeShortYear,
     formatDateTimeToGregorianLikeShortYearMonth,
     formatYearQuarterToGregorianLikeYearQuarter,
-    formatDateTimeToGregorianLikeFiscalYear
+    formatDateTimeToGregorianLikeFiscalYear,
+    formatPercentToLocalizedNumerals
 } = useI18n();
 
 const { allDateRanges } = useTrendsChartBase(props);
@@ -91,6 +110,20 @@ const chartDisplayType = computed<AxisChartDisplayType | undefined>(() => {
     }
 });
 
+const allTooltipExtraColumnNames = computed<string[]>(() => {
+    const extraColumnNames: string[] = [];
+
+    if (props.showYearOverYear) {
+        extraColumnNames.push(tt('Year-over-Year'));
+    }
+
+    if (props.showPeriodOverPeriod) {
+        extraColumnNames.push(tt('Period-over-Period'));
+    }
+
+    return extraColumnNames;
+});
+
 const allDisplayDateRanges = computed<string[]>(() => {
     const allDisplayDateRanges: string[] = [];
 
@@ -188,22 +221,9 @@ const allSeriesData = computed<Record<string, unknown>[]>(() => {
         }
 
         for (const dateRange of allDateRanges.value) {
-            let dateRangeKey = '';
-
-            if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
-                dateRangeKey = dateRange.year.toString();
-            } else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type && 'year' in dateRange) {
-                dateRangeKey = dateRange.year.toString();
-            } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type && 'quarter' in dateRange) {
-                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;
+            const dateRangeKey = getDateRangeKey(dateRange) ?? '';
             const dataItems = dateRangeAmountMap[dateRangeKey];
+            let amount = 0;
 
             if (isArray(dataItems)) {
                 for (const dataItem of dataItems) {
@@ -229,6 +249,172 @@ const allSeriesData = computed<Record<string, unknown>[]>(() => {
     return result;
 });
 
+const seriesIdValuesMap = computed<Record<string, number[]>>(() => {
+    const result: Record<string, number[]> = {};
+
+    for (const item of allSeriesData.value) {
+        const id = getSeriesId(item);
+        const values = item['values'] as number[];
+
+        if (id && values) {
+            result[id] = values;
+        }
+    }
+
+    return result;
+});
+
+const yoyIndexMap = computed<Record<number, number>>(() => {
+    const result: Record<number, number> = {};
+    const dateKeyToIndex: Record<string, number> = {};
+
+    for (const [dateRange, index] of itemAndIndex(allDateRanges.value)) {
+        const key = getDateRangeKey(dateRange);
+
+        if (key) {
+            dateKeyToIndex[key] = index;
+        }
+    }
+
+    for (const [dateRange, index] of itemAndIndex(allDateRanges.value)) {
+        const yoyKey = getDateRangeKey(dateRange, -1);
+
+        if (yoyKey && isNumber(dateKeyToIndex[yoyKey])) {
+            result[index] = dateKeyToIndex[yoyKey];
+        }
+    }
+
+    return result;
+});
+
+function getSeriesId(item: Record<string, unknown>): string {
+    if (props.idField && item[props.idField]) {
+        return item[props.idField] as string;
+    }
+
+    const name = item[props.nameField] as string;
+    return props.translateName ? tt(name) : name;
+}
+
+function getDateRangeKey(dateRange: YearUnixTime | FiscalYearUnixTime | YearQuarterUnixTime | YearMonthUnixTime | YearMonthDayUnixTime, yearOffset?: number): string | undefined {
+    if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
+        return (dateRange.year + (yearOffset ?? 0)).toString();
+    } else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type && 'year' in dateRange) {
+        return (dateRange.year + (yearOffset ?? 0)).toString();
+    } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type && 'quarter' in dateRange) {
+        return `${dateRange.year + (yearOffset ?? 0)}-${dateRange.quarter}`;
+    } else if (props.dateAggregationType === ChartDateAggregationType.Month.type && 'month0base' in dateRange) {
+        return `${dateRange.year + (yearOffset ?? 0)}-${dateRange.month0base + 1}`;
+    } else if (props.dateAggregationType === ChartDateAggregationType.Day.type && 'day' in dateRange && props.chartMode === 'daily') {
+        return `${dateRange.year + (yearOffset ?? 0)}-${dateRange.month}-${dateRange.day}`;
+    } else {
+        return undefined;
+    }
+}
+
+function formatDisplayChangeRate(current: number, reference: number): string {
+    if (reference === 0 && current === 0) {
+        return formatPercentToLocalizedNumerals(0, 2, '<0.01');
+    }
+
+    if (reference === 0) {
+        return '-';
+    }
+
+    const rate = (current - reference) / reference * 100;
+    return formatPercentToLocalizedNumerals(rate, 2, '<0.01');
+}
+
+function getTooltipExtraColumnTotalValues(categoryIndex: number, totalValue: number, visibleSeriesIds: string[]): string[] {
+    const extraColumnValues: string[] = [];
+
+    if (!props.showYearOverYear && !props.showPeriodOverPeriod) {
+        return extraColumnValues;
+    }
+
+    if (props.showYearOverYear) {
+        const yoyReferenceIndex = yoyIndexMap.value[categoryIndex];
+        let displayChangeRate = '-';
+
+        if (isNumber(yoyReferenceIndex)) {
+            let referenceTotalValue = 0;
+
+            for (const seriesId of visibleSeriesIds) {
+                const values = seriesIdValuesMap.value[seriesId];
+
+                if (values) {
+                    referenceTotalValue += values[yoyReferenceIndex] ?? 0;
+                }
+            }
+
+            displayChangeRate = formatDisplayChangeRate(totalValue, referenceTotalValue);
+        }
+
+        extraColumnValues.push(displayChangeRate);
+    }
+
+    if (props.showPeriodOverPeriod) {
+        const popReferenceIndex = categoryIndex - 1;
+        let displayChangeRate = '-';
+
+        if (popReferenceIndex >= 0) {
+            let referenceTotalValue = 0;
+
+            for (const seriesId of visibleSeriesIds) {
+                const values = seriesIdValuesMap.value[seriesId];
+
+                if (values) {
+                    referenceTotalValue += values[popReferenceIndex] ?? 0;
+                }
+            }
+
+            displayChangeRate = formatDisplayChangeRate(totalValue, referenceTotalValue);
+        }
+
+        extraColumnValues.push(displayChangeRate);
+    }
+
+    return extraColumnValues;
+}
+
+function getTooltipExtraColumnValues(seriesId: string, categoryIndex: number, currentValue: number): string[] {
+    const extraColumnValues: string[] = [];
+
+    if (!props.showYearOverYear && !props.showPeriodOverPeriod) {
+        return extraColumnValues;
+    }
+
+    const values = seriesIdValuesMap.value[seriesId];
+
+    if (!values) {
+        return extraColumnValues;
+    }
+
+    if (props.showYearOverYear) {
+        const yoyReferenceIndex = yoyIndexMap.value[categoryIndex];
+        let displayChangeRate = '-';
+
+        if (isNumber(yoyReferenceIndex) && yoyReferenceIndex >= 0 && yoyReferenceIndex < values.length) {
+            displayChangeRate = formatDisplayChangeRate(currentValue, values[yoyReferenceIndex] ?? 0);
+        }
+
+        extraColumnValues.push(displayChangeRate);
+    }
+
+    if (props.showPeriodOverPeriod) {
+        const popReferenceIndex = categoryIndex - 1;
+        let displayChangeRate = '-';
+
+        if (popReferenceIndex >= 0 && popReferenceIndex < values.length) {
+            displayChangeRate = formatDisplayChangeRate(currentValue, values[popReferenceIndex] ?? 0);
+        }
+
+        extraColumnValues.push(displayChangeRate);
+    }
+
+    return extraColumnValues;
+}
+
 function clickItem(itemId: string, categoryIndex: number): void {
     const dateRange = allDateRanges.value[categoryIndex];