save insights explorer to database

This commit is contained in:
MaysWind
2026-01-07 01:04:54 +08:00
parent d4d1342c70
commit d462d0164c
36 changed files with 2091 additions and 286 deletions
@@ -9,11 +9,11 @@
item-title="name"
item-value="value"
density="compact"
:disabled="loading"
:disabled="loading || disabled"
:label="tt('Chart Type')"
:items="allTransactionExplorerChartTypes"
:model-value="currentChartType"
@update:model-value="updateChartType($event as TransactionExplorerChartTypeValue)"
:model-value="currentExplorer.chartType"
@update:model-value="currentExplorer.chartType = $event as TransactionExplorerChartTypeValue"
/>
<v-select
class="flex-0-0"
@@ -21,11 +21,11 @@
item-title="name"
item-value="value"
density="compact"
:disabled="loading"
:disabled="loading || disabled"
:label="tt('Axis / Category')"
:items="allTransactionExplorerDataDimensions"
:model-value="currentCategoryDimension"
@update:model-value="updateCategoryDimension($event as TransactionExplorerDataDimensionType)"
:model-value="currentExplorer.categoryDimension"
@update:model-value="currentExplorer.categoryDimension = $event as TransactionExplorerDataDimensionType"
/>
<v-select
class="flex-0-0"
@@ -33,14 +33,14 @@
item-title="name"
item-value="value"
density="compact"
:disabled="loading || !TransactionExplorerChartType.valueOf(currentChartType)?.seriesDimensionRequired"
:disabled="loading || disabled || !TransactionExplorerChartType.valueOf(currentExplorer.chartType)?.seriesDimensionRequired"
:label="tt('Series')"
:items="allTransactionExplorerDataDimensions"
:model-value="TransactionExplorerChartType.valueOf(currentChartType)?.seriesDimensionRequired ? currentSeriesDimension : TransactionExplorerDataDimension.None.value"
@update:model-value="updateSeriesDimension($event as TransactionExplorerDataDimensionType)"
:model-value="TransactionExplorerChartType.valueOf(currentExplorer.chartType)?.seriesDimensionRequired ? currentExplorer.seriesDimension : TransactionExplorerDataDimension.None.value"
@update:model-value="currentExplorer.seriesDimension = $event as TransactionExplorerDataDimensionType"
>
<template #item="{ props, item }">
<v-list-item :disabled="item.value === currentCategoryDimension && item.value !== TransactionExplorerDataDimension.SeriesDimensionDefault.value" v-bind="props">
<v-list-item :disabled="item.value === currentExplorer.categoryDimension && item.value !== TransactionExplorerDataDimension.SeriesDimensionDefault.value" v-bind="props">
<template #title>
<div class="text-truncate">{{ item.raw.name }}</div>
</template>
@@ -53,11 +53,11 @@
item-title="name"
item-value="value"
density="compact"
:disabled="loading"
:disabled="loading || disabled"
:label="tt('Value Metric')"
:items="allTransactionExplorerValueMetrics"
:model-value="currentValueMetric"
@update:model-value="updateValueMetric($event as TransactionExplorerValueMetricType)"
:model-value="currentExplorer.valueMetric"
@update:model-value="currentExplorer.valueMetric = $event as TransactionExplorerValueMetricType"
/>
<v-select
class="flex-0-0"
@@ -65,18 +65,18 @@
item-title="displayName"
item-value="type"
density="compact"
:disabled="loading"
:disabled="loading || disabled"
:label="tt('Sort Order')"
:items="allTransactionExplorerChartSortingTypes"
:model-value="currentChartSortingType"
@update:model-value="updateChartSortingType($event)"
:model-value="currentExplorer.chartSortingType"
@update:model-value="currentExplorer.chartSortingType = $event"
/>
<v-spacer class="flex-1-1"/>
</div>
</v-col>
</v-row>
</v-card-text>
<v-card-text :class="{ 'readonly': loading }" v-if="currentChartType === TransactionExplorerChartType.Pie.value">
<v-card-text :class="{ 'readonly': loading }" v-if="currentExplorer.chartType === TransactionExplorerChartType.Pie.value">
<pie-chart
:items="[
{id: '1', name: '---', value: 60, color: '7c7c7f'},
@@ -95,7 +95,7 @@
:show-value="true"
:show-percent="true"
:enable-click-item="true"
:amount-value="explorersStore.transactionExplorerFilter.valueMetric !== TransactionExplorerValueMetric.TransactionCount.value"
:amount-value="currentExplorer.valueMetric !== TransactionExplorerValueMetric.TransactionCount.value"
:default-currency="defaultCurrency"
id-field="id"
name-field="name"
@@ -104,7 +104,7 @@
@click="onClickPieChartItem"
/>
</v-card-text>
<v-card-text :class="{ 'readonly': loading }" v-if="currentChartType === TransactionExplorerChartType.Radar.value">
<v-card-text :class="{ 'readonly': loading }" v-if="currentExplorer.chartType === TransactionExplorerChartType.Radar.value">
<radar-chart
:items="[
{name: '---', value: 10},
@@ -124,7 +124,7 @@
:min-valid-percent="0.0001"
:show-value="true"
:show-percent="true"
:amount-value="explorersStore.transactionExplorerFilter.valueMetric !== TransactionExplorerValueMetric.TransactionCount.value"
:amount-value="currentExplorer.valueMetric !== TransactionExplorerValueMetric.TransactionCount.value"
:default-currency="defaultCurrency"
name-field="name"
value-field="totalAmount"
@@ -159,6 +159,7 @@ import {
} from '@/core/explorer.ts';
import { type SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
import type { InsightsExplorer } from '@/models/explorer.ts';
import { isDefined } from '@/lib/common.ts';
import { parseDateTimeFromString } from '@/lib/datetime.ts';
@@ -166,6 +167,7 @@ import { sortStatisticsItems } from '@/lib/statistics.ts';
interface InsightsExplorerDataTableTabProps {
loading?: boolean;
disabled?: boolean;
}
interface CategoryDimensionData extends SortableTransactionStatisticDataItem {
@@ -210,14 +212,10 @@ const allTransactionExplorerValueMetrics = computed<NameValue[]>(() => getAllTra
const allTransactionExplorerChartTypes = computed<NameValue[]>(() => getAllTransactionExplorerChartTypes());
const allTransactionExplorerChartSortingTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsSortingTypes());
const currentCategoryDimension = computed<TransactionExplorerDataDimensionType>(() => explorersStore.transactionExplorerFilter.categoryDimension);
const currentSeriesDimension = computed<TransactionExplorerDataDimensionType>(() => explorersStore.transactionExplorerFilter.seriesDimension);
const currentValueMetric = computed<TransactionExplorerValueMetricType>(() => explorersStore.transactionExplorerFilter.valueMetric);
const currentChartType = computed<TransactionExplorerChartTypeValue>(() => explorersStore.transactionExplorerFilter.chartType);
const currentChartSortingType = computed<number>(() => explorersStore.transactionExplorerFilter.chartSortingType);
const currentExplorer = computed<InsightsExplorer>(() => explorersStore.currentInsightsExplorer);
const categoryDimensionTransactionExplorerData = computed<CategoryDimensionData[]>(() => {
if (currentChartType.value !== TransactionExplorerChartType.Pie.value && currentChartType.value !== TransactionExplorerChartType.Radar.value) {
if (currentExplorer.value.chartType !== TransactionExplorerChartType.Pie.value && currentExplorer.value.chartType !== TransactionExplorerChartType.Radar.value) {
return [];
}
@@ -245,7 +243,7 @@ const categoryDimensionTransactionExplorerData = computed<CategoryDimensionData[
});
}
sortStatisticsItems(result, explorersStore.transactionExplorerFilter.chartSortingType);
sortStatisticsItems(result, currentExplorer.value.chartSortingType);
return result;
});
@@ -262,13 +260,13 @@ function getCategoriedDataDisplayName(info: CategoriedInfo | SeriesedInfo): stri
needI18n = info.categoryNameNeedI18n;
i18nParameters = info.categoryNameI18nParameters;
dimessionType = info.categoryIdType;
dimession = explorersStore.transactionExplorerFilter.categoryDimension;
dimession = currentExplorer.value.categoryDimension;
} else if ('seriesName' in info) {
name = info.seriesName;
needI18n = info.seriesNameNeedI18n;
i18nParameters = info.seriesNameI18nParameters;
dimessionType = info.seriesIdType;
dimession = explorersStore.transactionExplorerFilter.seriesDimension;
dimession = currentExplorer.value.seriesDimension;
}
let displayName: string = name;
@@ -323,36 +321,6 @@ function getCategoriedDataDisplayName(info: CategoriedInfo | SeriesedInfo): stri
return displayName;
}
function updateChartType(chartType: TransactionExplorerChartTypeValue): void {
explorersStore.updateTransactionExplorerFilter({
chartType: chartType,
});
}
function updateCategoryDimension(categoryDimension: TransactionExplorerDataDimensionType): void {
explorersStore.updateTransactionExplorerFilter({
categoryDimension: categoryDimension,
});
}
function updateSeriesDimension(seriesDimension: TransactionExplorerDataDimensionType): void {
explorersStore.updateTransactionExplorerFilter({
seriesDimension: seriesDimension,
});
}
function updateValueMetric(valueMetric: TransactionExplorerValueMetricType): void {
explorersStore.updateTransactionExplorerFilter({
valueMetric: valueMetric,
});
}
function updateChartSortingType(sortingType: number): void {
explorersStore.updateTransactionExplorerFilter({
chartSortingType: sortingType,
});
}
function onClickPieChartItem(item: Record<string, unknown>): void {
if (!item || !('id' in item) || !('dimension' in item)) {
return;
@@ -367,8 +335,8 @@ function onClickPieChartItem(item: Record<string, unknown>): void {
}
function buildExportResults(): { headers: string[], data: string[][] } | undefined {
if (currentChartType.value === TransactionExplorerChartType.Pie.value || currentChartType.value === TransactionExplorerChartType.Radar.value) {
const valueMetric = TransactionExplorerValueMetric.valueOf(explorersStore.transactionExplorerFilter.valueMetric);
if (currentExplorer.value.chartType === TransactionExplorerChartType.Pie.value || currentExplorer.value.chartType === TransactionExplorerChartType.Radar.value) {
const valueMetric = TransactionExplorerValueMetric.valueOf(currentExplorer.value.valueMetric);
return {
headers: [
@@ -1,14 +1,33 @@
<template>
<v-card-text class="px-5 py-0 mb-4">
<v-row>
<v-col cols="12">
<div class="d-flex overflow-x-auto align-center gap-2 pt-2">
<v-select
class="flex-0-0"
min-width="150"
item-title="name"
item-value="value"
density="compact"
:disabled="loading || disabled"
:label="tt('Transactions Per Page')"
:items="allPageCounts"
v-model="countPerPage"
/>
</div>
</v-col>
</v-row>
</v-card-text>
<v-data-table
fixed-header
fixed-footer
multi-sort
item-value="index"
:class="{ 'insights-explorer-table': true, 'text-sm': true, 'disabled': loading, 'loading-skeleton': loading }"
:class="{ 'insights-explorer-table': true, 'text-sm': true, 'disabled': loading || disabled, 'loading-skeleton': loading }"
:headers="dataTableHeaders"
:items="filteredTransactions"
:hover="true"
v-model:items-per-page="itemsPerPage"
v-model:items-per-page="countPerPage"
v-model:page="currentPage"
>
<template #item.time="{ item }">
@@ -61,7 +80,7 @@
</div>
</template>
<template #item.operation="{ item }">
<v-btn density="compact" variant="text" color="default" :disabled="loading"
<v-btn density="compact" variant="text" color="default" :disabled="loading || disabled"
@click="showTransaction(item)">
{{ tt('View') }}
</v-btn>
@@ -78,7 +97,7 @@
</template>
<template #bottom>
<div class="title-and-toolbar d-flex align-center justify-center text-no-wrap mt-2 mb-4">
<pagination-buttons :disabled="loading"
<pagination-buttons :disabled="loading || disabled"
:totalPageCount="totalPageCount"
v-model="currentPage">
</pagination-buttons>
@@ -98,6 +117,7 @@ import { useSettingsStore } from '@/stores/setting.ts';
import { useUserStore } from '@/stores/user.ts';
import { useExplorersStore } from '@/stores/explorer.ts';
import type { NameNumeralValue } from '@/core/base.ts';
import type { NumeralSystem } from '@/core/numeral.ts';
import { TransactionType } from '@/core/transaction.ts';
@@ -121,13 +141,13 @@ import {
interface InsightsExplorerDataTableTabProps {
loading?: boolean;
countPerPage: number;
disabled?: boolean;
}
const props = defineProps<InsightsExplorerDataTableTabProps>();
defineProps<InsightsExplorerDataTableTabProps>();
const emit = defineEmits<{
(e: 'click:transaction', value: TransactionInsightDataItem): void;
(e: 'update:countPerPage', value: number): void;
}>();
const {
@@ -144,21 +164,30 @@ const userStore = useUserStore();
const explorersStore = useExplorersStore();
const currentPage = ref<number>(1);
const countPerPage = ref<number>(15);
const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
const filteredTransactions = computed<TransactionInsightDataItem[]>(() => explorersStore.filteredTransactions);
const itemsPerPage = computed<number>({
get: () => props.countPerPage,
set: (value: number) => emit('update:countPerPage', value)
})
const allPageCounts = computed<NameNumeralValue[]>(() => {
const pageCounts: NameNumeralValue[] = [];
const availableCountPerPage: number[] = [ 5, 10, 15, 20, 25, 30, 50 ];
for (const count of availableCountPerPage) {
pageCounts.push({ value: count, name: numeralSystem.value.formatNumber(count) });
}
pageCounts.push({ value: -1, name: tt('All') });
return pageCounts;
});
const skeletonData = computed<number[]>(() => {
const data: number[] = [];
for (let i = 0; i < itemsPerPage.value; i++) {
for (let i = 0; i < countPerPage.value; i++) {
data.push(i);
}
@@ -171,7 +200,7 @@ const totalPageCount = computed<number>(() => {
}
const count = filteredTransactions.value.length;
return Math.ceil(count / itemsPerPage.value);
return Math.ceil(count / countPerPage.value);
});
const dataTableHeaders = computed<object[]>(() => {
@@ -2,11 +2,11 @@
<v-card-subtitle class="px-5">
<div class="title-and-toolbar d-flex">
<v-btn color="default" variant="outlined"
:disabled="loading || !!editingQuery"
:disabled="loading || disabled || !!editingQuery"
@click="addQuery">{{ tt('Add Query') }}</v-btn>
<v-spacer />
<v-btn color="secondary" variant="tonal"
:disabled="loading || !!editingQuery || queries.length < 1"
:disabled="loading || disabled || !!editingQuery || queries.length < 1"
@click="clearAllQueries">{{ tt('Clear All') }}</v-btn>
</div>
</v-card-subtitle>
@@ -18,7 +18,7 @@
<span class="query-name text-subtitle-1 ms-2" v-if="editingQuery !== query">{{ query.name || tt('format.misc.queryIndex', { index: queryIndex + 1 }) }}</span>
<div class="query-name-edit ms-2" v-if="editingQuery === query">
<v-text-field autofocus type="text" density="compact" variant="underlined"
:disabled="loading"
:disabled="loading || disabled"
:placeholder="tt('format.misc.queryIndex', { index: queryIndex + 1 })"
v-text-field-auto-width="{ minWidth: 20, maxWidth: 300, auxSpanId: `query-name-aux-span-${queryIndex + 1}` }"
v-model="editingQueryName"
@@ -27,28 +27,28 @@
<span :id="`query-name-aux-span-${queryIndex + 1}`" />
</div>
<v-btn class="ms-2" density="compact" color="primary" variant="text" size="small"
:icon="true" :disabled="loading"
:icon="true" :disabled="loading || disabled"
@click="updateQueryName(query)"
v-if="editingQuery === query">
<v-icon :icon="mdiCheck" size="18" />
<v-tooltip activator="parent">{{ tt('Update') }}</v-tooltip>
</v-btn>
<v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
:icon="true" :disabled="loading"
:icon="true" :disabled="loading || disabled"
@click="cancelUpdateQueryName"
v-if="editingQuery === query">
<v-icon :icon="mdiClose" size="18" />
<v-tooltip activator="parent">{{ tt('Cancel') }}</v-tooltip>
</v-btn>
<v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
:icon="true" :disabled="loading || !!editingQuery"
:icon="true" :disabled="loading || disabled || !!editingQuery"
@click="editingQueryName = query.name; editingQuery = query"
v-if="!editingQuery || editingQuery !== query">
<v-icon :icon="mdiPencilOutline" size="18" />
<v-tooltip activator="parent">{{ tt('Modify Query Name') }}</v-tooltip>
</v-btn>
<v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
:icon="true" :disabled="loading || !!editingQuery"
:icon="true" :disabled="loading || disabled || !!editingQuery"
@click="duplicateQuery(query)"
v-if="!editingQuery || editingQuery !== query">
<v-icon :icon="mdiContentCopy" size="18" />
@@ -56,7 +56,7 @@
</v-btn>
<v-spacer />
<v-switch class="bidirectional-switch ms-2" color="secondary"
:disabled="loading || !!editingQuery || !query.conditions || query.conditions.length < 1"
:disabled="loading || disabled || !!editingQuery || !query.conditions || query.conditions.length < 1"
:label="tt('Expression')"
v-model="showExpression[queryIndex]"
@click="showExpression[queryIndex] = !showExpression[queryIndex]">
@@ -65,7 +65,7 @@
</template>
</v-switch>
<v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
:icon="true" :disabled="loading || !!editingQuery || queries.length < 1"
:icon="true" :disabled="loading || disabled || !!editingQuery || queries.length < 1"
@click="removeQuery(queryIndex)">
<v-icon :icon="mdiClose" size="18" />
<v-tooltip activator="parent">{{ tt('Remove Query') }}</v-tooltip>
@@ -102,7 +102,7 @@
density="compact"
item-title="displayName"
item-value="value"
:disabled="loading || !!editingQuery"
:disabled="loading || disabled || !!editingQuery"
:items="[
{ value: TransactionExplorerConditionRelation.And, displayName: tt('AND') },
{ value: TransactionExplorerConditionRelation.Or, displayName: tt('OR') }
@@ -116,7 +116,7 @@
density="compact"
item-title="name"
item-value="value"
:disabled="loading || !!editingQuery"
:disabled="loading || disabled || !!editingQuery"
:items="allTransactionExplorerConditionFields"
@update:model-value="updateConditionField(queryIndex, conditionIndex, TransactionExplorerConditionField.valueOf($event))"
v-model="conditionWithRelation.condition.field"
@@ -127,7 +127,7 @@
density="compact"
item-title="name"
item-value="value"
:disabled="loading || !!editingQuery"
:disabled="loading || disabled || !!editingQuery"
:items="getAllTransactionExplorerConditionOperators(conditionWithRelation.getSupportedOperators())"
v-model="conditionWithRelation.condition.operator"
/>
@@ -138,7 +138,7 @@
density="compact"
item-title="displayName"
item-value="type"
:disabled="loading || !!editingQuery"
:disabled="loading || disabled || !!editingQuery"
:placeholder="tt('None')"
:items="[
{ type: TransactionType.Expense, displayName: tt('Expense') },
@@ -166,7 +166,7 @@
item-value="type"
persistent-placeholder
:readonly="true"
:disabled="loading || !!editingQuery || !hasAnyTransactionCategory"
:disabled="loading || disabled || !!editingQuery || !hasAnyTransactionCategory"
:placeholder="tt('None')"
:model-value="getFilteredTransactionCategoriesDisplayContent(arrayItemToObjectField(conditionWithRelation.condition.value as string[], true))"
@click="currentCondition = conditionWithRelation.condition; showFilterTransactionCategoriesDialog = true"
@@ -180,7 +180,7 @@
item-value="type"
persistent-placeholder
:readonly="true"
:disabled="loading || !!editingQuery || !hasAnyAccount"
:disabled="loading || disabled || !!editingQuery || !hasAnyAccount"
:placeholder="tt('None')"
:model-value="getFilteredAccountsDisplayContent(arrayItemToObjectField(conditionWithRelation.condition.value as string[], true))"
@click="currentCondition = conditionWithRelation.condition; showFilterSourceAccountsDialog = true"
@@ -194,7 +194,7 @@
item-value="type"
persistent-placeholder
:readonly="true"
:disabled="loading || !!editingQuery || !hasAnyAccount"
:disabled="loading || disabled || !!editingQuery || !hasAnyAccount"
:placeholder="tt('None')"
:model-value="getFilteredAccountsDisplayContent(arrayItemToObjectField(conditionWithRelation.condition.value as string[], true))"
@click="currentCondition = conditionWithRelation.condition; showFilterDestinationAccountsDialog = true"
@@ -206,7 +206,7 @@
conditionWithRelation.condition.field === TransactionExplorerConditionField.DestinationAmount.value">
<amount-input density="compact"
:currency="defaultCurrency"
:disabled="loading || !!editingQuery"
:disabled="loading || disabled || !!editingQuery"
v-model="conditionWithRelation.condition.value[0]"
/>
<span class="ms-2 me-2"
@@ -214,7 +214,7 @@
conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.NotBetween.value">~</span>
<amount-input density="compact"
:currency="defaultCurrency"
:disabled="loading || !!editingQuery"
:disabled="loading || disabled || !!editingQuery"
v-model="conditionWithRelation.condition.value[1]"
v-if="conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.Between.value ||
conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.NotBetween.value"
@@ -245,7 +245,7 @@
multiple
chips
closable-chips
:disabled="loading || !!editingQuery"
:disabled="loading || disabled || !!editingQuery"
:placeholder="tt('None')"
:items="allTags"
v-model="conditionWithRelation.condition.value"
@@ -300,7 +300,7 @@
/>
<v-text-field density="compact"
:disabled="loading || !!editingQuery"
:disabled="loading || disabled || !!editingQuery"
:placeholder="tt('None')"
v-model="conditionWithRelation.condition.value"
v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.Description.value &&
@@ -311,7 +311,7 @@
<v-btn color="default" density="compact"
variant="text" size="small"
:icon="true"
:disabled="loading || !!editingQuery"
:disabled="loading || disabled || !!editingQuery"
@click="removeCondition(queryIndex, conditionIndex)">
<v-icon :icon="mdiClose" size="18" />
<v-tooltip activator="parent">{{ tt('Remove Condition') }}</v-tooltip>
@@ -328,7 +328,7 @@
<v-btn class="px-2" density="comfortable" color="primary" variant="text" size="small"
:prepend-icon="mdiPlus"
:disabled="loading || !!editingQuery || showExpression[queryIndex]"
:disabled="loading || disabled || !!editingQuery || showExpression[queryIndex]"
@click="addCondition(queryIndex)">
{{ tt('Add Condition') }}
</v-btn>
@@ -421,6 +421,7 @@ import {
interface ExplorerQueryTabProps {
loading?: boolean;
disabled?: boolean;
}
type SnackBarType = InstanceType<typeof SnackBar>;
@@ -451,7 +452,7 @@ const tagSearchContent = ref<string>('');
const editingQuery = ref<TransactionExplorerQuery | undefined>(undefined);
const editingQueryName = ref<string>('');
const queries = computed<TransactionExplorerQuery[]>(() => explorersStore.transactionExplorerFilter.query);
const queries = computed<TransactionExplorerQuery[]>(() => explorersStore.currentInsightsExplorer.queries);
const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
const hasAnyAccount = computed<boolean>(() => accountsStore.allPlainAccounts.length > 0);