export statistics & analysis data in desktop version

src/components/desktop/TrendsChart.vue

@@ -25,6 +25,9 @@ import {
     isArray,
     isNumber
 } from '@/lib/common.ts';
+import {
+    formatAmount
+} from '@/lib/numeral.ts';
 import {
     getYearMonthFirstUnixTime,
     getYearMonthLastUnixTime,
@@ -420,9 +423,38 @@ function clickItem(e: ECElementEvent): void {
     });
 }
 
+function exportData(): { headers: string[], data: string[][] } {
+    const headers: string[] = [];
+    const data: string[][] = [];
+
+    headers.push(tt('Date'));
+
+    for (let i = 0; i < allSeries.value.length; i++) {
+        const id = allSeries.value[i].id;
+        const name = itemsMap.value[id] && props.nameField && itemsMap.value[id][props.nameField] ? getItemName(itemsMap.value[id][props.nameField] as string) : id;
+        headers.push(name);
+    }
+
+    for (let i = 0; i < allDisplayDateRanges.value.length; i++) {
+        const row: string[] = [];
+        row.push(allDisplayDateRanges.value[i]);
+        row.push(...allSeries.value.map(item => formatAmount(item.data[i], {})));
+        data.push(row);
+    }
+
+    return {
+        headers: headers,
+        data: data
+    };
+}
+
 function onLegendSelectChanged(e: { selected: Record<string, boolean> }): void {
     selectedLegends.value = e.selected;
 }
+
+defineExpose({
+    exportData
+})
 </script>
 
 <style scoped>

src/locales/de.json

@@ -118,7 +118,9 @@
     },
     "dataExport": {
         "defaultExportFilename": "ezBookkeeping_export_data",
-        "exportFilename": "ezBookkeeping_{nickname}_export_data"
+        "exportFilename": "ezBookkeeping_{nickname}_export_data",
+        "defaultExportStatisticsFileName": "ezBookkeeping_statistics_data",
+        "exportStatisticsFileName": "ezBookkeeping_{nickname}_statistics_data"
     },
     "datetime": {
         "AM": {
@@ -1429,7 +1431,11 @@
     "Select All Invalid Items": "Alle ungültigen Elemente auswählen",
     "Back": "Zurück",
     "Load More": "Mehr laden",
+    "Export Results": "Export Results",
     "No data": "Keine Daten",
+    "Data copied": "Data copied",
+    "Table": "Table",
+    "Raw Data": "Raw Data",
     "Zoom in": "Vergrößern",
     "Zoom out": "Verkleinern",
     "Drag to Reorder": "Zum Neuanordnen ziehen",
@@ -1814,6 +1820,7 @@
     "Maximum Amount": "Höchstbetrag",
     "Display Order": "Anzeigereihenfolge",
     "Name": "Name",
+    "Proportion (%)": "Proportion (%)",
     "Sort by Amount": "Nach Betrag sortieren",
     "Sort by Display Order": "Nach Anzeigereihenfolge sortieren",
     "Sort by Name": "Nach Name sortieren",
@@ -1915,6 +1922,7 @@
     "Data Management": "Datenverwaltung",
     "Unable to retrieve user statistics data": "Benutzerstatistikdaten können nicht abgerufen werden",
     "Export Data": "Daten exportieren",
+    "Field Separator": "Field Separator",
     "CSV (Comma-separated values) File": "CSV (Kommagetrennte Werte) Datei",
     "TSV (Tab-separated values) File": "TSV (Tabulatorgetrennte Werte) Datei",
     "Clear User Data": "Benutzerdaten löschen",

src/locales/en.json

@@ -118,7 +118,9 @@
     },
     "dataExport": {
         "defaultExportFilename": "ezBookkeeping_export_data",
-        "exportFilename": "ezBookkeeping_{nickname}_export_data"
+        "exportFilename": "ezBookkeeping_{nickname}_export_data",
+        "defaultExportStatisticsFileName": "ezBookkeeping_statistics_data",
+        "exportStatisticsFileName": "ezBookkeeping_{nickname}_statistics_data"
     },
     "datetime": {
         "AM": {
@@ -1429,7 +1431,11 @@
     "Select All Invalid Items": "Select All Invalid Items",
     "Back": "Back",
     "Load More": "Load More",
+    "Export Results": "Export Results",
     "No data": "No data",
+    "Data copied": "Data copied",
+    "Table": "Table",
+    "Raw Data": "Raw Data",
     "Zoom in": "Zoom in",
     "Zoom out": "Zoom out",
     "Drag to Reorder": "Drag to Reorder",
@@ -1814,6 +1820,7 @@
     "Maximum Amount": "Maximum Amount",
     "Display Order": "Display Order",
     "Name": "Name",
+    "Proportion (%)": "Proportion (%)",
     "Sort by Amount": "Sort by Amount",
     "Sort by Display Order": "Sort by Display Order",
     "Sort by Name": "Sort by Name",
@@ -1915,6 +1922,7 @@
     "Data Management": "Data Management",
     "Unable to retrieve user statistics data": "Unable to retrieve user statistics data",
     "Export Data": "Export Data",
+    "Field Separator": "Field Separator",
     "CSV (Comma-separated values) File": "CSV (Comma-separated values) File",
     "TSV (Tab-separated values) File": "TSV (Tab-separated values) File",
     "Clear User Data": "Clear User Data",

src/locales/es.json

@@ -118,7 +118,9 @@
     },
     "dataExport": {
         "defaultExportFilename": "ezBookkeeping_export_data",
-        "exportFilename": "ezBookkeeping_{nickname}_export_data"
+        "exportFilename": "ezBookkeeping_{nickname}_export_data",
+        "defaultExportStatisticsFileName": "ezBookkeeping_statistics_data",
+        "exportStatisticsFileName": "ezBookkeeping_{nickname}_statistics_data"
     },
     "datetime": {
         "AM": {
@@ -1429,7 +1431,11 @@
     "Select All Invalid Items": "Seleccionar todos los artículos no válidos",
     "Back": "Atrás",
     "Load More": "Cargar más",
+    "Export Results": "Export Results",
     "No data": "Sin datos",
+    "Data copied": "Data copied",
+    "Table": "Table",
+    "Raw Data": "Raw Data",
     "Zoom in": "Acercar",
     "Zoom out": "Alejar",
     "Drag to Reorder": "Arrastrar para reordenar",
@@ -1814,6 +1820,7 @@
     "Maximum Amount": "Importe Máximo",
     "Display Order": "Orden de visualización",
     "Name": "Nombre",
+    "Proportion (%)": "Proportion (%)",
     "Sort by Amount": "Ordenar por Importe",
     "Sort by Display Order": "Ordenar por orden de visualización",
     "Sort by Name": "Ordenar por Nombre",
@@ -1915,6 +1922,7 @@
     "Data Management": "Gestión de datos",
     "Unable to retrieve user statistics data": "No se pueden recuperar datos de estadísticas de usuario",
     "Export Data": "Exportar datos",
+    "Field Separator": "Field Separator",
     "CSV (Comma-separated values) File": "Archivo CSV (valores separados por comas)",
     "TSV (Tab-separated values) File": "Archivo TSV (valores separados por tabulaciones)",
     "Clear User Data": "Borrar datos de usuario",

src/locales/it.json

@@ -118,7 +118,9 @@
     },
     "dataExport": {
         "defaultExportFilename": "ezBookkeeping_export_data",
-        "exportFilename": "ezBookkeeping_{nickname}_export_data"
+        "exportFilename": "ezBookkeeping_{nickname}_export_data",
+        "defaultExportStatisticsFileName": "ezBookkeeping_statistics_data",
+        "exportStatisticsFileName": "ezBookkeeping_{nickname}_statistics_data"
     },
     "datetime": {
         "AM": {
@@ -1429,7 +1431,11 @@
     "Select All Invalid Items": "Seleziona tutti gli elementi non validi",
     "Back": "Indietro",
     "Load More": "Carica altro",
+    "Export Results": "Export Results",
     "No data": "Nessun dato",
+    "Data copied": "Data copied",
+    "Table": "Table",
+    "Raw Data": "Raw Data",
     "Zoom in": "Ingrandisci",
     "Zoom out": "Riduci",
     "Drag to Reorder": "Trascina per riordinare",
@@ -1814,6 +1820,7 @@
     "Maximum Amount": "Importo massimo",
     "Display Order": "Ordine di visualizzazione",
     "Name": "Nome",
+    "Proportion (%)": "Proportion (%)",
     "Sort by Amount": "Ordina per importo",
     "Sort by Display Order": "Ordina per ordine di visualizzazione",
     "Sort by Name": "Ordina per nome",
@@ -1915,6 +1922,7 @@
     "Data Management": "Gestione dati",
     "Unable to retrieve user statistics data": "Impossibile recuperare i dati statistici dell'utente",
     "Export Data": "Esporta dati",
+    "Field Separator": "Field Separator",
     "CSV (Comma-separated values) File": "File CSV (valori separati da virgola)",
     "TSV (Tab-separated values) File": "File TSV (valori separati da tabulazione)",
     "Clear User Data": "Cancella dati utente",

src/locales/ja.json

@@ -118,7 +118,9 @@
     },
     "dataExport": {
         "defaultExportFilename": "ezBookkeeping_エクスポートデータ",
-        "exportFilename": "ezBookkeeping_{nickname}_エクスポートデータ"
+        "exportFilename": "ezBookkeeping_{nickname}_エクスポートデータ",
+        "defaultExportStatisticsFileName": "ezBookkeeping_statistics_data",
+        "exportStatisticsFileName": "ezBookkeeping_{nickname}_statistics_data"
     },
     "datetime": {
         "AM": {
@@ -1429,7 +1431,11 @@
     "Select All Invalid Items": "すべての無効なアイテムを選択します",
     "Back": "戻る",
     "Load More": "さらに読み込む",
+    "Export Results": "Export Results",
     "No data": "データはありません",
+    "Data copied": "Data copied",
+    "Table": "Table",
+    "Raw Data": "Raw Data",
     "Zoom in": "拡大",
     "Zoom out": "縮小",
     "Drag to Reorder": "ドラッグして並べ替え",
@@ -1814,6 +1820,7 @@
     "Maximum Amount": "最大金額",
     "Display Order": "表示順",
     "Name": "名前",
+    "Proportion (%)": "Proportion (%)",
     "Sort by Amount": "金額で並べ替え",
     "Sort by Display Order": "表示で並べ替え",
     "Sort by Name": "名前で並べ替え",
@@ -1915,6 +1922,7 @@
     "Data Management": "データ管理",
     "Unable to retrieve user statistics data": "ユーザー統計データを取得できません",
     "Export Data": "データのエクスポート",
+    "Field Separator": "Field Separator",
     "CSV (Comma-separated values) File": "CSV（コンマ区切り）ファイル",
     "TSV (Tab-separated values) File": "TSV（タブ区切り）ファイル",
     "Clear User Data": "ユーザーデータをクリア",

src/locales/ru.json

@@ -118,7 +118,9 @@
     },
     "dataExport": {
         "defaultExportFilename": "ezBookkeeping_export_data",
-        "exportFilename": "ezBookkeeping_{nickname}_export_data"
+        "exportFilename": "ezBookkeeping_{nickname}_export_data",
+        "defaultExportStatisticsFileName": "ezBookkeeping_statistics_data",
+        "exportStatisticsFileName": "ezBookkeeping_{nickname}_statistics_data"
     },
     "datetime": {
         "AM": {
@@ -1429,7 +1431,11 @@
     "Select All Invalid Items": "Выбрать все недействительные элементы",
     "Back": "Назад",
     "Load More": "Загрузить еще",
+    "Export Results": "Export Results",
     "No data": "Нет данных",
+    "Data copied": "Data copied",
+    "Table": "Table",
+    "Raw Data": "Raw Data",
     "Zoom in": "Увеличить",
     "Zoom out": "Уменьшить",
     "Drag to Reorder": "Перетащите для изменения порядка",
@@ -1814,6 +1820,7 @@
     "Maximum Amount": "Максимальная сумма",
     "Display Order": "Порядок отображения",
     "Name": "Имя",
+    "Proportion (%)": "Proportion (%)",
     "Sort by Amount": "Сортировать по сумме",
     "Sort by Display Order": "Сортировать по порядку отображения",
     "Sort by Name": "Сортировать по имени",
@@ -1915,6 +1922,7 @@
     "Data Management": "Управление данными",
     "Unable to retrieve user statistics data": "Не удалось получить статистические данные пользователя",
     "Export Data": "Экспорт данных",
+    "Field Separator": "Field Separator",
     "CSV (Comma-separated values) File": "Файл CSV (значения, разделенные запятыми)",
     "TSV (Tab-separated values) File": "Файл TSV (значения, разделенные табуляцией)",
     "Clear User Data": "Очистить данные пользователя",

src/locales/uk.json

@@ -118,7 +118,9 @@
     },
     "dataExport": {
         "defaultExportFilename": "ezBookkeeping_export_data",
-        "exportFilename": "ezBookkeeping_{nickname}_export_data"
+        "exportFilename": "ezBookkeeping_{nickname}_export_data",
+        "defaultExportStatisticsFileName": "ezBookkeeping_statistics_data",
+        "exportStatisticsFileName": "ezBookkeeping_{nickname}_statistics_data"
     },
     "datetime": {
         "AM": {
@@ -1429,7 +1431,11 @@
     "Select All Invalid Items": "Вибрати всі недійсні елементи",
     "Back": "Назад",
     "Load More": "Завантажити ще",
+    "Export Results": "Export Results",
     "No data": "Немає даних",
+    "Data copied": "Data copied",
+    "Table": "Table",
+    "Raw Data": "Raw Data",
     "Zoom in": "Збільшити",
     "Zoom out": "Зменшити",
     "Drag to Reorder": "Перетягніть для зміни порядку",
@@ -1814,6 +1820,7 @@
     "Maximum Amount": "Максимальна сума",
     "Display Order": "Порядок відображення",
     "Name": "Ім'я",
+    "Proportion (%)": "Proportion (%)",
     "Sort by Amount": "Сортувати за сумою",
     "Sort by Display Order": "Сортувати за порядком відображення",
     "Sort by Name": "Сортувати за назвою",
@@ -1915,6 +1922,7 @@
     "Data Management": "Керування даними",
     "Unable to retrieve user statistics data": "Не вдалося отримати статистику користувача",
     "Export Data": "Експорт даних",
+    "Field Separator": "Field Separator",
     "CSV (Comma-separated values) File": "Файл CSV (значення, розділені комами)",
     "TSV (Tab-separated values) File": "Файл TSV (значення, розділені табуляцією)",
     "Clear User Data": "Очистити дані користувача",

src/locales/vi.json

@@ -118,7 +118,9 @@
     },
     "dataExport": {
         "defaultExportFilename": "ezBookkeeping_export_data",
-        "exportFilename": "ezBookkeeping_{nickname}_export_data"
+        "exportFilename": "ezBookkeeping_{nickname}_export_data",
+        "defaultExportStatisticsFileName": "ezBookkeeping_statistics_data",
+        "exportStatisticsFileName": "ezBookkeeping_{nickname}_statistics_data"
     },
     "datetime": {
         "AM": {
@@ -1429,7 +1431,11 @@
     "Select All Invalid Items": "Chọn tất cả các mục không hợp lệ",
     "Back": "Quay lại",
     "Load More": "Tải thêm",
+    "Export Results": "Export Results",
     "No data": "Không có dữ liệu",
+    "Data copied": "Data copied",
+    "Table": "Table",
+    "Raw Data": "Raw Data",
     "Zoom in": "Phóng to",
     "Zoom out": "Thu nhỏ",
     "Drag to Reorder": "Kéo để sắp xếp lại",
@@ -1814,6 +1820,7 @@
     "Maximum Amount": "Số tiền tối đa",
     "Display Order": "Thứ tự hiển thị",
     "Name": "Tên",
+    "Proportion (%)": "Proportion (%)",
     "Sort by Amount": "Sắp xếp theo số tiền",
     "Sort by Display Order": "Sắp xếp theo thứ tự hiển thị",
     "Sort by Name": "Sắp xếp theo tên",
@@ -1915,6 +1922,7 @@
     "Data Management": "Quản lý dữ liệu",
     "Unable to retrieve user statistics data": "Không thể lấy dữ liệu thống kê người dùng",
     "Export Data": "Xuất dữ liệu",
+    "Field Separator": "Field Separator",
     "CSV (Comma-separated values) File": "Tệp CSV (Giá trị phân cách bằng dấu phẩy)",
     "TSV (Tab-separated values) File": "Tệp TSV (Giá trị phân cách bằng tab)",
     "Clear User Data": "Xóa dữ liệu người dùng",

src/locales/zh_Hans.json

@@ -118,7 +118,9 @@
     },
     "dataExport": {
         "defaultExportFilename": "ezBookkeeping_导出数据",
-        "exportFilename": "ezBookkeeping_{nickname}_导出数据"
+        "exportFilename": "ezBookkeeping_{nickname}_导出数据",
+        "defaultExportStatisticsFileName": "ezBookkeeping_统计数据",
+        "exportStatisticsFileName": "ezBookkeeping_{nickname}_统计数据"
     },
     "datetime": {
         "AM": {
@@ -1429,7 +1431,11 @@
     "Select All Invalid Items": "选择全部无效项目",
     "Back": "返回",
     "Load More": "加载更多",
+    "Export Results": "导出结果",
     "No data": "没有数据",
+    "Data copied": "数据已复制",
+    "Table": "表格",
+    "Raw Data": "原始数据",
     "Zoom in": "放大",
     "Zoom out": "缩小",
     "Drag to Reorder": "拖拽改变顺序",
@@ -1814,6 +1820,7 @@
     "Maximum Amount": "最大金额",
     "Display Order": "显示顺序",
     "Name": "名称",
+    "Proportion (%)": "比例 (%)",
     "Sort by Amount": "按金额排序",
     "Sort by Display Order": "按显示顺序排序",
     "Sort by Name": "按名称排序",
@@ -1915,6 +1922,7 @@
     "Data Management": "数据管理",
     "Unable to retrieve user statistics data": "无法获取用户统计数据",
     "Export Data": "导出数据",
+    "Field Separator": "字段分隔符",
     "CSV (Comma-separated values) File": "CSV (逗号分隔的值) 文件",
     "TSV (Tab-separated values) File": "TSV (制表符分隔的值) 文件",
     "Clear User Data": "清除用户数据",

src/locales/zh_Hant.json

@@ -118,7 +118,9 @@
     },
     "dataExport": {
         "defaultExportFilename": "ezBookkeeping_匯出資料",
-        "exportFilename": "ezBookkeeping_{nickname}_匯出資料"
+        "exportFilename": "ezBookkeeping_{nickname}_匯出資料",
+        "defaultExportStatisticsFileName": "ezBookkeeping_統計資料",
+        "exportStatisticsFileName": "ezBookkeeping_{nickname}_統計資料"
     },
     "datetime": {
         "AM": {
@@ -1429,7 +1431,11 @@
     "Select All Invalid Items": "選擇全部無效項目",
     "Back": "返回",
     "Load More": "載入更多",
+    "Export Results": "匯出結果",
     "No data": "無資料",
+    "Data copied": "資料已複製",
+    "Table": "表格",
+    "Raw Data": "原始資料",
     "Zoom in": "放大",
     "Zoom out": "縮小",
     "Drag to Reorder": "拖曳以重新排序",
@@ -1814,6 +1820,7 @@
     "Maximum Amount": "最大金額",
     "Display Order": "顯示順序",
     "Name": "名稱",
+    "Proportion (%)": "比例 (%)",
     "Sort by Amount": "依金額排序",
     "Sort by Display Order": "依顯示順序排序",
     "Sort by Name": "依名稱排序",
@@ -1915,6 +1922,7 @@
     "Data Management": "資料管理",
     "Unable to retrieve user statistics data": "無法取得使用者統計資料",
     "Export Data": "匯出資料",
+    "Field Separator": "欄位分隔符",
     "CSV (Comma-separated values) File": "CSV (逗號分隔的值) 檔案",
     "TSV (Tab-separated values) File": "TSV (定位點分隔的值) 檔案",
     "Clear User Data": "清除使用者資料",

src/styles/desktop/global.scss

@@ -133,6 +133,14 @@ input[type=number] {
     height: 10px;
 }
 
+.code-container {
+    background-color: #efefef;
+}
+
+.v-theme--dark .code-container {
+    background-color: #2f2f2f;
+}
+
 /** Common class for replacing the default style of vuetify **/
 .v-input.v-input--readonly input,
 .v-input.v-input--readonly textarea,

src/views/desktop/statistics/TransactionPage.vue

@@ -128,6 +128,11 @@
                                                                      :title="tt('Filter Transaction Tags')"
                                                                      @click="showFilterTagDialog = true"></v-list-item>
                                                         <v-divider class="my-2"/>
+                                                        <v-list-item :prepend-icon="mdiExport"
+                                                                     :title="tt('Export Results')"
+                                                                     :disabled="!statisticsDataHasData"
+                                                                     @click="exportResults"></v-list-item>
+                                                        <v-divider class="my-2"/>
                                                         <v-list-item to="/app/settings?tab=statisticsSetting"
                                                                      :prepend-icon="mdiFilterCogOutline"
                                                                      :title="tt('Settings')"></v-list-item>
@@ -270,6 +275,7 @@
                                             :enable-click-item="true"
                                             :default-currency="defaultCurrency"
                                             :show-total-amount-in-tooltip="showTotalAmountInTrendsChart"
+                                            ref="trendsChart"
                                             id-field="id"
                                             name-field="name"
                                             value-field="totalAmount"
@@ -317,14 +323,18 @@
                                               @settings:change="setTagFilter" />
     </v-dialog>
 
+    <export-dialog ref="exportDialog" />
+
     <snack-bar ref="snackbar" />
 </template>
 
 <script setup lang="ts">
 import SnackBar from '@/components/desktop/SnackBar.vue';
+import TrendsChart from '@/components/desktop/TrendsChart.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';
+import ExportDialog from '@/views/desktop/statistics/transaction/dialogs/ExportDialog.vue';
 
 import { ref, computed, useTemplateRef, watch } from 'vue';
 import { useRouter, onBeforeRouteUpdate } from 'vue-router';
@@ -353,7 +363,10 @@ import {
     isString,
     isNumber,
     arrayItemToObjectField
-} from '@/lib/common.ts'
+} from '@/lib/common.ts';
+import {
+    formatAmount
+} from '@/lib/numeral.ts';
 import {
     getYearAndMonthFromUnixTime,
     getYearMonthFirstUnixTime,
@@ -373,10 +386,13 @@ import {
     mdiMenu,
     mdiFilterOutline,
     mdiFilterCogOutline,
+    mdiExport,
     mdiDotsVertical
 } from '@mdi/js';
 
 type SnackBarType = InstanceType<typeof SnackBar>;
+type TrendsChartType = InstanceType<typeof TrendsChart>;
+type ExportDialogType = InstanceType<typeof ExportDialog>;
 
 interface TransactionStatisticsProps {
     initAnalysisType?: string,
@@ -433,6 +449,8 @@ const transactionCategoriesStore = useTransactionCategoriesStore();
 const statisticsStore = useStatisticsStore();
 
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
+const trendsChart = useTemplateRef<TrendsChartType>('trendsChart');
+const exportDialog = useTemplateRef<ExportDialogType>('exportDialog');
 
 const activeTab = ref<string>('statisticsPage');
 const initing = ref<boolean>(true);
@@ -446,6 +464,16 @@ const showFilterTagDialog = ref<boolean>(false);
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
 
+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 false;
+});
+
 const allChartTypes = computed<TypeAndDisplayName[]>(() => {
     if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
         return getAllCategoricalChartTypes();
@@ -876,6 +904,31 @@ function setTagFilter(changed: boolean): void {
     }
 }
 
+function exportResults(): void {
+    if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis && categoricalAnalysisData.value && categoricalAnalysisData.value.items) {
+        exportDialog.value?.open({
+            headers: [
+                tt('Name'),
+                tt('Amount') + ` (${defaultCurrency.value})`,
+                tt('Proportion (%)')
+            ],
+            data: categoricalAnalysisData.value.items
+                .filter(item => !item.hidden)
+                .map(item => [
+                    item.name,
+                    formatAmount(item.totalAmount, {}),
+                    item.percent.toFixed(4)
+                ])
+        });
+    } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis && trendsAnalysisData.value && trendsAnalysisData.value.items && trendsChart.value) {
+        const exportData = trendsChart.value.exportData();
+        exportDialog.value?.open({
+            headers: exportData.headers || [],
+            data: exportData.data || []
+        });
+    }
+}
+
 function onClickPieChartItem(item: Record<string, unknown>): void {
     router.push(getTransactionItemLinkUrl(item['id'] as string));
 }

src/views/desktop/statistics/transaction/dialogs/ExportDialog.vue

@@ -0,0 +1,206 @@
+<template>
+    <v-dialog width="1000" v-model="showState">
+        <v-card class="pa-2 pa-sm-4 pa-md-4">
+            <template #title>
+                <div class="d-flex align-center justify-center">
+                    <div class="d-flex w-100 align-center justify-center">
+                        <h4 class="text-h4">{{ tt('Export Results') }}</h4>
+                    </div>
+                    <v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true">
+                        <v-icon :icon="mdiDotsVertical" />
+                        <v-menu activator="parent">
+                            <v-list>
+                                <v-list-subheader :title="tt('Field Separator')"/>
+                                <v-list-item :prepend-icon="mdiComma"
+                                             :append-icon="separator === ',' ? mdiCheck : undefined"
+                                             :title="tt('Comma')"
+                                             @click="separator = ','"></v-list-item>
+                                <v-list-item :prepend-icon="mdiKeyboardTab"
+                                             :append-icon="separator === '\t' ? mdiCheck : undefined"
+                                             :title="tt('Tab')"
+                                             @click="separator = '\t'"></v-list-item>
+                            </v-list>
+                        </v-menu>
+                    </v-btn>
+                </div>
+            </template>
+
+            <v-card-text class="py-0 w-100 d-flex justify-center">
+                <v-switch class="export-data-display-switch" color="secondary"
+                          :label="tt('Raw Data')"
+                          v-model="showRawData"
+                          @click="showRawData = !showRawData">
+                    <template #prepend>
+                        <span>{{ tt('Table') }}</span>
+                    </template>
+                </v-switch>
+            </v-card-text>
+
+            <v-card-text class="my-md-4 w-100 d-flex justify-center">
+                <v-data-table
+                    fixed-header
+                    fixed-footer
+                    multi-sort
+                    density="compact"
+                    height="365"
+                    :headers="dataTableHeaders"
+                    :items="dataTableItems"
+                    :hover="true"
+                    :hide-default-footer="true"
+                    :items-per-page="dataTableItems.length"
+                    :no-data-text="tt('No data')"
+                    v-if="!showRawData"
+                ></v-data-table>
+                <div class="w-100 pl-2 code-container" v-if="showRawData">
+                    <textarea class="w-100" style="outline: none; height: 360px" :readonly="true" :value="exportedData"></textarea>
+                </div>
+            </v-card-text>
+
+            <v-card-text class="overflow-y-visible">
+                <div ref="buttonContainer" class="w-100 d-flex justify-center gap-4">
+                    <v-btn-group variant="tonal" density="comfortable">
+                        <v-btn color="primary" :disabled="!exportedData" @click="copy">{{ tt('Copy') }}</v-btn>
+                        <v-btn density="compact" color="primary" :disabled="!exportedData" :icon="true">
+                            <v-icon :icon="mdiMenuDown" size="24" />
+                            <v-menu activator="parent">
+                                <v-list>
+                                    <v-list-item :title="tt('Save')" @click="save()"></v-list-item>
+                                </v-list>
+                            </v-menu>
+                        </v-btn>
+                    </v-btn-group>
+                    <v-btn color="secondary" variant="tonal" @click="cancel">{{ tt('Cancel') }}</v-btn>
+                </div>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+
+    <snack-bar ref="snackbar" />
+</template>
+
+<script setup lang="ts">
+import SnackBar from '@/components/desktop/SnackBar.vue';
+
+import { ref, computed, useTemplateRef } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useUserStore } from '@/stores/user.ts';
+
+import { copyTextToClipboard, startDownloadFile } from '@/lib/ui/common.ts';
+
+import {
+    mdiDotsVertical,
+    mdiCheck,
+    mdiComma,
+    mdiKeyboardTab,
+    mdiMenuDown
+} from '@mdi/js';
+
+type SnackBarType = InstanceType<typeof SnackBar>;
+
+const { tt } = useI18n();
+
+const userStore = useUserStore();
+
+const buttonContainer = useTemplateRef<HTMLElement>('buttonContainer');
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+
+const showState = ref<boolean>(false);
+const headers = ref<string[]>([]);
+const data = ref<string[][]>([]);
+const separator = ref<string>(',');
+const showRawData = ref<boolean>(false);
+
+const dataTableHeaders = computed<object[]>(() => {
+    return headers.value.map((header, index) => ({
+        key: index.toString(),
+        value: `column${index}`,
+        title: header,
+        sortable: index > 0,
+        nowrap: true
+    }));
+});
+
+const dataTableItems = computed<object[]>(() => {
+    return data.value.map(row => {
+        const item: Record<string, string> = {};
+
+        row.forEach((value, index) => {
+            item[`column${index}`] = value;
+        });
+
+        return item;
+    });
+});
+
+const exportedData = computed<string>(() => {
+    let ret = '';
+
+    if (headers.value.length > 0) {
+        ret += headers.value.join(separator.value);
+    }
+
+    for (const row of data.value) {
+        ret += '\n';
+        ret += row.join(separator.value);
+    }
+
+    return ret;
+});
+
+function getExportFileName(fileExtension: string): string {
+    const nickname = userStore.currentUserNickname;
+
+    if (nickname) {
+        return tt('dataExport.exportStatisticsFileName', {
+            nickname: nickname
+        }) + '.' + fileExtension;
+    }
+
+    return tt('dataExport.defaultExportStatisticsFileName') + '.' + fileExtension;
+}
+
+function open(options: { headers: string[], data: string[][] }): void {
+    headers.value = options.headers || [];
+    data.value = options.data || [];
+    separator.value = ',';
+    showRawData.value = false;
+    showState.value = true;
+}
+
+function copy(): void {
+    copyTextToClipboard(exportedData.value, buttonContainer.value);
+    snackbar.value?.showMessage('Data copied');
+}
+
+function save(): void {
+    let fileExtension = 'csv';
+    let contentType = 'text/csv';
+
+    if (separator.value === '\t') {
+        fileExtension = 'tsv';
+        contentType = 'text/tab-separated-values';
+    }
+
+    startDownloadFile(getExportFileName(fileExtension), new Blob([exportedData.value], { type: contentType }));
+}
+
+function cancel(): void {
+    showState.value = false;
+}
+
+defineExpose({
+    open
+});
+</script>
+
+<style>
+.export-data-display-switch {
+    cursor: pointer;
+}
+
+.export-data-display-switch.v-input--horizontal .v-input__prepend {
+    margin-right: 10px; /* same as the padding-left of `.v-switch .v-label` */
+}
+</style>