Elgato_dark/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping synced 2026-04-21 13:37:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

add calendar heat map chart in insights explorer

Browse source
This commit is contained in:
MaysWind 2026-04-19 16:29:05 +08:00
parent 374132fe7c
commit 892404924c
25 changed files with 420 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

268
src/components/desktop/CalendarHeatMapChart.vue Normal file
View file

@ -0,0 +1,268 @@
<template>
<v-chart autoresize :class="finalClass" :style="finalStyle" :option="chartOptions" />
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useTheme } from 'vuetify';
import type { CallbackDataParams } from 'echarts/types/dist/shared';
import { useI18n } from '@/locales/helpers.ts';
import { useUserStore } from '@/stores/user.ts';
import { type WeekDayValue, KnownDateTimeFormat } from '@/core/datetime.ts';
import { ThemeType } from '@/core/theme.ts';
import {
isNumber,
getObjectOwnFieldCount,
mapObjectToArray
} from '@/lib/common.ts';
import { parseDateTimeFromKnownDateTimeFormat } from '@/lib/datetime.ts';
interface HeatMapData {
data: Record<number, YearlyHeatmapData>;
minValue: number;
maxValue: number;
}
interface YearlyHeatmapData {
gregorianYear: number;
displayYear: string;
data: [string, number][];
}
const props = defineProps<{
class?: string;
skeleton?: boolean;
showValue?: boolean;
items: Record<string, unknown>[];
idField: string;
valueField: string;
hiddenField?: string;
translateName?: boolean;
valueTypeName: string;
amountValue?: boolean;
percentValue?: boolean;
defaultCurrency?: string;
}>();
const theme = useTheme();
const {
tt,
getAllShortMonthNames,
getAllMinWeekdayNames,
formatDateTimeToLongDate,
getCalendarDisplayLongYearFromDateTime,
formatAmountToLocalizedNumeralsWithCurrency,
formatNumberToLocalizedNumerals,
formatPercentToLocalizedNumerals
} = useI18n();
const userStore = useUserStore();
const visualMapHeight: number = 100;
const calendarHeight: number = 180;
const calendarBottomMargin: number = 10;
const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
const dayNames = computed<string[]>(() => getAllMinWeekdayNames());
const monthNames = computed<string[]>(() => getAllShortMonthNames());
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const finalClass = computed<string>(() => {
let finalClass = '';
if (props.skeleton) {
finalClass += 'transition-in';
}
if (props.class) {
finalClass += ` ${props.class}`;
} else {
finalClass += ' calendar-heatmap-chart-container';
}
return finalClass;
});
const finalStyle = computed<Record<string, string>>(() => {
const style: Record<string, string> = {};
if (heatMapData.value.data) {
const calendarCount = getObjectOwnFieldCount(heatMapData.value.data);
style['height'] = `${visualMapHeight + calendarCount * calendarHeight + (calendarCount - 1) * calendarBottomMargin}px`;
}
return style;
});
const heatMapData = computed<HeatMapData>(() => {
const allData: Record<number, YearlyHeatmapData> = {};
let minValue: number = Number.POSITIVE_INFINITY;
let maxValue: number = 0;
for (const item of props.items) {
const id = getItemName(item[props.idField] as string);
const dateTime = parseDateTimeFromKnownDateTimeFormat(id, KnownDateTimeFormat.DefaultDate);
const value = item[props.valueField];
if (dateTime && isNumber(value) && (!props.hiddenField || !item[props.hiddenField])) {
if (value > maxValue) {
maxValue = value;
}
if (value < minValue) {
minValue = value;
}
const year: number = dateTime.getGregorianCalendarYear();
let data: YearlyHeatmapData | undefined = allData[year];
if (!data) {
data = {
gregorianYear: year,
displayYear: getCalendarDisplayLongYearFromDateTime(dateTime),
data: []
};
allData[year] = data;
}
data.data.push([dateTime.getGregorianCalendarYearDashMonthDashDay(), value]);
}
}
const ret: HeatMapData = {
data: allData,
minValue: minValue === Number.POSITIVE_INFINITY ? 0 : minValue,
maxValue: maxValue
};
return ret;
});
const chartOptions = computed<object>(() => {
return {
tooltip: {
backgroundColor: isDarkMode.value ? '#333' : '#fff',
borderColor: isDarkMode.value ? '#333' : '#fff',
textStyle: {
color: isDarkMode.value ? '#eee' : '#333'
},
formatter: (params: CallbackDataParams) => {
if (!props.showValue) {
return '';
}
const dataItem = params.data as [string, number];
const dateTime = dataItem && dataItem[0] ? parseDateTimeFromKnownDateTimeFormat(dataItem[0], KnownDateTimeFormat.DefaultDate) : '';
const name = props.valueTypeName;
const value = dataItem && isNumber(dataItem[1]) ? getDisplayValue(dataItem[1]) : '';
return (dateTime ? `<div class="d-inline-flex">${formatDateTimeToLongDate(dateTime)}</div><br/>` : '')
+ `<div><span class="chart-pointer" style="background-color: ${params.color}"></span>`
+ `<span>${name}</span>`
+ `<span class="ms-5">${value}</span>`
+ '</div>';
}
},
visualMap: [
{
type: 'continuous',
orient: 'horizontal',
top: 0,
left: 'center',
itemHeight: 320,
min: heatMapData.value.minValue,
max: heatMapData.value.maxValue,
calculable: true,
inRange: {
color: isDarkMode.value ? [ '#1a1a1a', '#c67e48' ] : [ '#faf8f4', '#c67e48' ]
},
textStyle: {
color: isDarkMode.value ? '#888' : '#666'
},
formatter: (value: string) => {
if (!props.showValue) {
return '';
}
return getDisplayValue(parseInt(value));
}
}
],
calendar: mapObjectToArray(heatMapData.value.data, (item, _, index) => {
return {
range: item.gregorianYear,
orient: 'horizontal',
left: 70,
top: visualMapHeight + index * (calendarHeight + calendarBottomMargin),
right: 20,
cellSize: ['auto', 20],
itemStyle: {
color: isDarkMode.value ? '#060504' : '#ffffff',
borderColor: isDarkMode.value ? '#4f4f4f' : '#e1e6f2'
},
splitLine: {
show: false
},
dayLabel: {
firstDay: firstDayOfWeek.value,
nameMap: dayNames.value,
color: isDarkMode.value ? '#888' : '#666'
},
monthLabel: {
nameMap: monthNames.value,
color: isDarkMode.value ? '#888' : '#666'
},
yearLabel: {
formatter: item.displayYear,
color: isDarkMode.value ? '#888' : '#666'
}
};
}),
series: mapObjectToArray(heatMapData.value.data, (item, _, index) => {
return {
type: 'heatmap',
animation: !props.skeleton,
coordinateSystem: 'calendar',
calendarIndex: index,
data: item.data,
label: {
show: false
},
emphasis: {
itemStyle: {
shadowBlur: 6,
shadowColor: isDarkMode.value ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)'
}
}
};
})
};
});
function getItemName(name: string): string {
return props.translateName ? tt(name) : name;
}
function getDisplayValue(value: number): string {
if (props.percentValue) {
return formatPercentToLocalizedNumerals(value, 2, '<0.01');
}
if (props.amountValue) {
return formatAmountToLocalizedNumeralsWithCurrency(value, props.defaultCurrency);
}
return formatNumberToLocalizedNumerals(value, 2);
}
</script>
<style scoped>
.calendar-heatmap-chart-container {
width: 100%;
margin-top: 10px;
}
</style>

111
src/core/explorer.ts
View file

@ -1,5 +1,6 @@
import { type NameValue } from '@/core/base.ts';
import { DateRange } from '@/core/datetime.ts';
import { ChartSortingType } from '@/core/statistics.ts';
export enum TransactionExplorerConditionRelation {
First = 'first',
@ -166,58 +167,6 @@ export class TransactionExplorerConditionOperator implements NameValue {
}
}
export enum TransactionExplorerChartTypeValue {
Pie = 'pie',
ColumnStacked = 'columnStacked',
Column100PercentStacked = 'column100%Stacked',
ColumnGrouped = 'columnGrouped',
LineGrouped = 'lineGrouped',
AreaStacked = 'areaStacked',
Area100PercentStacked = 'area100%Stacked',
BubbleGrouped = 'bubbleGrouped',
Radar = 'radar',
Heatmap = 'heatmap'
}
export class TransactionExplorerChartType implements NameValue {
private static readonly allInstances: TransactionExplorerChartType[] = [];
private static readonly allInstancesByValue: Record<string, TransactionExplorerChartType> = {};
public static readonly Pie = new TransactionExplorerChartType('Pie Chart', TransactionExplorerChartTypeValue.Pie, false);
public static readonly Radar = new TransactionExplorerChartType('Radar Chart', TransactionExplorerChartTypeValue.Radar, false);
public static readonly ColumnStacked = new TransactionExplorerChartType('Column Chart (Stacked)', TransactionExplorerChartTypeValue.ColumnStacked, true);
public static readonly Column100PercentStacked = new TransactionExplorerChartType('Column Chart (100% Stacked)', TransactionExplorerChartTypeValue.Column100PercentStacked, true);
public static readonly ColumnGrouped = new TransactionExplorerChartType('Column Chart (Grouped)', TransactionExplorerChartTypeValue.ColumnGrouped, true);
public static readonly LineGrouped = new TransactionExplorerChartType('Line Chart (Grouped)', TransactionExplorerChartTypeValue.LineGrouped, true);
public static readonly AreaStacked = new TransactionExplorerChartType('Area Chart (Stacked)', TransactionExplorerChartTypeValue.AreaStacked, true);
public static readonly Area100PercentStacked = new TransactionExplorerChartType('Area Chart (100% Stacked)', TransactionExplorerChartTypeValue.Area100PercentStacked, true);
public static readonly BubbleGrouped = new TransactionExplorerChartType('Bubble Chart (Grouped)', TransactionExplorerChartTypeValue.BubbleGrouped, true);
public static readonly Heatmap = new TransactionExplorerChartType('Heatmap Chart', TransactionExplorerChartTypeValue.Heatmap, true);
public static readonly Default = TransactionExplorerChartType.Pie;
public readonly name: string;
public readonly value: TransactionExplorerChartTypeValue;
public readonly seriesDimensionRequired: boolean;
private constructor(name: string, value: TransactionExplorerChartTypeValue, seriesDimensionRequired: boolean) {
this.name = name;
this.value = value;
this.seriesDimensionRequired = seriesDimensionRequired;
TransactionExplorerChartType.allInstances.push(this);
TransactionExplorerChartType.allInstancesByValue[value] = this;
}
public static values(): TransactionExplorerChartType[] {
return TransactionExplorerChartType.allInstances;
}
public static valueOf(value: string): TransactionExplorerChartType | undefined {
return TransactionExplorerChartType.allInstancesByValue[value];
}
}
export enum TransactionExplorerDataDimensionType {
None = 'none',
Query = 'query',
@ -421,4 +370,62 @@ export class TransactionExplorerValueMetric implements NameValue {
}
}
export enum TransactionExplorerChartTypeValue {
Pie = 'pie',
ColumnStacked = 'columnStacked',
Column100PercentStacked = 'column100%Stacked',
ColumnGrouped = 'columnGrouped',
LineGrouped = 'lineGrouped',
AreaStacked = 'areaStacked',
Area100PercentStacked = 'area100%Stacked',
BubbleGrouped = 'bubbleGrouped',
Radar = 'radar',
Heatmap = 'heatmap',
CalendarHeatmap = 'calendarHeatmap'
}
export class TransactionExplorerChartType implements NameValue {
private static readonly allInstances: TransactionExplorerChartType[] = [];
private static readonly allInstancesByValue: Record<string, TransactionExplorerChartType> = {};
public static readonly Pie = new TransactionExplorerChartType('Pie Chart', TransactionExplorerChartTypeValue.Pie, undefined, false, undefined);
public static readonly Radar = new TransactionExplorerChartType('Radar Chart', TransactionExplorerChartTypeValue.Radar, undefined, false, undefined);
public static readonly ColumnStacked = new TransactionExplorerChartType('Column Chart (Stacked)', TransactionExplorerChartTypeValue.ColumnStacked, undefined, true, undefined);
public static readonly Column100PercentStacked = new TransactionExplorerChartType('Column Chart (100% Stacked)', TransactionExplorerChartTypeValue.Column100PercentStacked, undefined, true, undefined);
public static readonly ColumnGrouped = new TransactionExplorerChartType('Column Chart (Grouped)', TransactionExplorerChartTypeValue.ColumnGrouped, undefined, true, undefined);
public static readonly LineGrouped = new TransactionExplorerChartType('Line Chart (Grouped)', TransactionExplorerChartTypeValue.LineGrouped, undefined, true, undefined);
public static readonly AreaStacked = new TransactionExplorerChartType('Area Chart (Stacked)', TransactionExplorerChartTypeValue.AreaStacked, undefined, true, undefined);
public static readonly Area100PercentStacked = new TransactionExplorerChartType('Area Chart (100% Stacked)', TransactionExplorerChartTypeValue.Area100PercentStacked, undefined, true, undefined);
public static readonly BubbleGrouped = new TransactionExplorerChartType('Bubble Chart (Grouped)', TransactionExplorerChartTypeValue.BubbleGrouped, undefined, true, undefined);
public static readonly Heatmap = new TransactionExplorerChartType('Heatmap Chart', TransactionExplorerChartTypeValue.Heatmap, undefined, true, undefined);
public static readonly CalendarHeatmap = new TransactionExplorerChartType('Calendar Heatmap Chart', TransactionExplorerChartTypeValue.CalendarHeatmap, TransactionExplorerDataDimensionType.DateTimeByYearMonthDay, false, ChartSortingType.DisplayOrder.type);
public static readonly Default = TransactionExplorerChartType.Pie;
public readonly name: string;
public readonly value: TransactionExplorerChartTypeValue;
public readonly fixedCategoryDimension: TransactionExplorerDataDimensionType | undefined;
public readonly seriesDimensionRequired: boolean;
public readonly fixedSortingType: number | undefined;
private constructor(name: string, value: TransactionExplorerChartTypeValue, fixedCategoryDimension: TransactionExplorerDataDimensionType | undefined, seriesDimensionRequired: boolean, fixedSortingType: number | undefined) {
this.name = name;
this.value = value;
this.fixedCategoryDimension = fixedCategoryDimension;
this.seriesDimensionRequired = seriesDimensionRequired;
this.fixedSortingType = fixedSortingType;
TransactionExplorerChartType.allInstances.push(this);
TransactionExplorerChartType.allInstancesByValue[value] = this;
}
public static values(): TransactionExplorerChartType[] {
return TransactionExplorerChartType.allInstances;
}
public static valueOf(value: string): TransactionExplorerChartType | undefined {
return TransactionExplorerChartType.allInstancesByValue[value];
}
}
export const DEFAULT_TRANSACTION_EXPLORER_DATE_RANGE: DateRange = DateRange.ThisMonth;

4
src/desktop-main.ts
View file

@ -65,6 +65,7 @@ import {
} from 'echarts/charts';
import {
GridComponent,
CalendarComponent,
TooltipComponent,
LegendComponent,
VisualMapComponent
@ -115,6 +116,7 @@ import RadarChartComponent from '@/components/desktop/RadarChart.vue';
import AxisChart from '@/components/desktop/AxisChart.vue';
import TrendsChart from '@/components/desktop/TrendsChart.vue';
import HeatMapChart from '@/components/desktop/HeatMapChart.vue';
import CalendarHeatMapChart from '@/components/desktop/CalendarHeatMapChart.vue';
import RenameDialog from '@/components/desktop/RenameDialog.vue';
import DateRangeSelectionDialog from '@/components/desktop/DateRangeSelectionDialog.vue';
import MonthSelectionDialog from '@/components/desktop/MonthSelectionDialog.vue';
@ -521,6 +523,7 @@ echarts.use([
HeatmapChart,
SankeyChart,
GridComponent,
CalendarComponent,
TooltipComponent,
LegendComponent,
VisualMapComponent
@ -566,6 +569,7 @@ app.component('RadarChart', RadarChartComponent);
app.component('AxisChart', AxisChart);
app.component('TrendsChart', TrendsChart);
app.component('HeatMapChart', HeatMapChart);
app.component('CalendarHeatMapChart', CalendarHeatMapChart);
app.component('RenameDialog', RenameDialog);
app.component('DateRangeSelectionDialog', DateRangeSelectionDialog);
app.component('MonthSelectionDialog', MonthSelectionDialog);

18
src/lib/common.ts
View file

@ -2,9 +2,10 @@ import {
type GenericNameValue,
type TypeAndName,
type TypeAndDisplayName,
entries,
keys,
keysIfValueEquals,
values
values,
} from '@/core/base.ts';
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
@ -387,6 +388,21 @@ export function objectFieldToArrayItem(object: object): string[] {
return ret;
}
export function mapObjectToArray<V, R>(object: Record<string | number | symbol, V>, mapFunc: (value: V, key: string | number | symbol, index: number) => R): R[] {
const ret: R[] = [];
let index = 0;
for (const [key, value] of entries(object)) {
const mappedValue = mapFunc(value, key, index++);
if (isDefined(mappedValue)) {
ret.push(mappedValue);
}
}
return ret;
}
export function objectFieldWithValueToArrayItem<T>(object: Record<string, T>, value: T): string[] {
const ret: string[] = [];

1
src/locales/de.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "Flächendiagramm (100% Gestapelt)",
"Bubble Chart (Grouped)": "Blasendiagramm (Gruppiert)",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "Sortieren nach",
"Map": "Karte",
"Provider": "Anbieter",

1
src/locales/en.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
"Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "Sort by",
"Map": "Map",
"Provider": "Provider",

1
src/locales/es.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "Gráfico de área (100 % apilado)",
"Bubble Chart (Grouped)": "Gráfico de burbujas (agrupado)",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "Ordenar por",
"Map": "Mapa",
"Provider": "Proveedor",

1
src/locales/fr.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
"Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "Trier par",
"Map": "Carte",
"Provider": "Fournisseur",

1
src/locales/helpers.ts
View file

@ -2617,6 +2617,7 @@ export function useI18n() {
isLongTimeMinuteTwoDigits,
isLongTimeSecondTwoDigits,
// format date time (by calendar display type) functions
getCalendarDisplayLongYearFromDateTime: (dateTime: DateTime, numeralSystem?: NumeralSystem) => formatDateTime(dateTime, getLocalizedLongYearFormat(), getDateTimeFormatOptions({ calendarType: getCurrentCalendarDisplayType().primaryCalendarType, numeralSystem: numeralSystem })),
getCalendarDisplayShortYearFromDateTime: (dateTime: DateTime, numeralSystem?: NumeralSystem) => formatDateTime(dateTime, getLocalizedShortYearFormat(), getDateTimeFormatOptions({ calendarType: getCurrentCalendarDisplayType().primaryCalendarType, numeralSystem: numeralSystem })),
getCalendarDisplayShortMonthFromDateTime: (dateTime: DateTime, numeralSystem?: NumeralSystem) => formatDateTime(dateTime, 'MMM', getDateTimeFormatOptions({ calendarType: getCurrentCalendarDisplayType().primaryCalendarType, numeralSystem: numeralSystem })),
getCalendarDisplayDayOfMonthFromDateTime: (dateTime: DateTime, numeralSystem?: NumeralSystem) => formatDateTime(dateTime, getLocalizedShortDayFormat(), getDateTimeFormatOptions({ calendarType: getCurrentCalendarDisplayType().primaryCalendarType, numeralSystem: numeralSystem })),

1
src/locales/it.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
"Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "Ordina per",
"Map": "Mappa",
"Provider": "Fornitore",

1
src/locales/ja.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
"Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "ソート順",
"Map": "地図",
"Provider": "プロバイダー",

1
src/locales/kn.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
"Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "ಇದರ ಪ್ರಕಾರ ವಿಂಗಡಿಸಿ",
"Map": "ನಕ್ಷೆ",
"Provider": "ಪ್ರದಾತ",

1
src/locales/ko.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "100% 누적 영역 차트",
"Bubble Chart (Grouped)": "그룹화된 버블 차트",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "정렬 기준",
"Map": "지도",
"Provider": "제공자",

1
src/locales/nl.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
"Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "Sorteren op",
"Map": "Kaart",
"Provider": "Provider",

1
src/locales/pt_BR.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "Gráfico de Área (100% Empilhado)",
"Bubble Chart (Grouped)": "Gráfico de Bolhas (Agrupado)",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "Ordenar por",
"Map": "Mapa",
"Provider": "Provedor",

1
src/locales/ru.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "Диаграмма с областями (с 100% накоплением)",
"Bubble Chart (Grouped)": "Пузырьковая диаграмма (сгрупированная)",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "Сортировать по",
"Map": "Карта",
"Provider": "Провайдер",

1
src/locales/sl.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "100-odstotno naložen ploskovni grafikon",
"Bubble Chart (Grouped)": "Grupiran mehurčni grafikon",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "Razvrsti po",
"Map": "Zemljevid",
"Provider": "Ponudnik",

1
src/locales/ta.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "பரப்பு வரைபடம் (100% அடுக்கப்பட்ட)",
"Bubble Chart (Grouped)": "குமிழி வரைபடம் (குழுவாக்கப்பட்ட)",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "இதன் வகை வரிசைப்படுத்து",
"Map": "வரைபடம்",
"Provider": "வழங்குநர்",

1
src/locales/th.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
"Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "จัดเรียงตาม",
"Map": "แผนที่",
"Provider": "ผู้ให้บริการ",

1
src/locales/tr.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
"Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "Sıralama ölçütü",
"Map": "Harita",
"Provider": "Sağlayıcı",

1
src/locales/uk.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
"Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "Сортувати за",
"Map": "Карта",
"Provider": "Провайдер",

1
src/locales/vi.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
"Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
"Heatmap Chart": "Heatmap Chart",
"Calendar Heatmap Chart": "Calendar Heatmap Chart",
"Sort by": "Sắp xếp theo",
"Map": "Bản đồ",
"Provider": "Nhà cung cấp",

1
src/locales/zh_Hans.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "面积图（100%堆叠）",
"Bubble Chart (Grouped)": "气泡图（分组）",
"Heatmap Chart": "热力图",
"Calendar Heatmap Chart": "日历热力图",
"Sort by": "排序方式",
"Map": "地图",
"Provider": "提供者",

1
src/locales/zh_Hant.json
View file

@ -1604,6 +1604,7 @@
"Area Chart (100% Stacked)": "面積圖（100%堆疊）",
"Bubble Chart (Grouped)": "氣泡圖（分組）",
"Heatmap Chart": "熱力圖",
"Calendar Heatmap Chart": "日曆熱力圖",
"Sort by": "排序方式",
"Map": "地圖",
"Provider": "提供者",

59
src/views/desktop/insights/tabs/ExplorerChartTab.vue
View file

@ -12,7 +12,8 @@
:disabled="loading || disabled"
:label="tt('Chart Type')"
:items="allTransactionExplorerChartTypes"
v-model="currentExplorer.chartType"
:model-value="currentExplorer.chartType"
@update:model-value="updateChartType"
/>
<v-select
class="flex-0-0"
@ -20,10 +21,10 @@
item-title="name"
item-value="value"
density="compact"
:disabled="loading || disabled"
:disabled="loading || disabled || isDefined(TransactionExplorerChartType.valueOf(currentExplorer.chartType)?.fixedCategoryDimension)"
:label="tt('Axis / Category')"
:items="allTransactionExplorerDataDimensions"
:model-value="currentExplorer.categoryDimension"
:model-value="TransactionExplorerChartType.valueOf(currentExplorer.chartType)?.fixedCategoryDimension ?? currentExplorer.categoryDimension"
@update:model-value="updateCategoryDimensionType"
/>
<v-select
@ -75,7 +76,7 @@
item-title="displayName"
item-value="type"
density="compact"
:disabled="loading || disabled"
:disabled="loading || disabled || isDefined(TransactionExplorerChartType.valueOf(currentExplorer.chartType)?.fixedSortingType)"
:label="tt('Sort Order')"
:items="allTransactionExplorerChartSortingTypes"
v-model="currentExplorer.chartSortingType"
@ -203,6 +204,27 @@
v-else-if="!loading"
/>
</v-card-text>
<v-card-text :class="{ 'readonly': loading }" v-else-if="currentExplorer.chartType === TransactionExplorerChartType.CalendarHeatmap.value">
<calendar-heat-map-chart
:skeleton="true"
:items="[]"
:value-type-name="tt(TransactionExplorerValueMetric.valueOf(currentExplorer.valueMetric)?.name ?? 'Value')"
id-field="id"
value-field="totalAmount"
v-if="loading"
/>
<calendar-heat-map-chart
:show-value="true"
:items="categoryDimensionTransactionExplorerData && categoryDimensionTransactionExplorerData.length ? categoryDimensionTransactionExplorerData : []"
:value-type-name="tt(TransactionExplorerValueMetric.valueOf(currentExplorer.valueMetric)?.name ?? 'Value')"
:amount-value="TransactionExplorerValueMetric.valueOf(currentExplorer.valueMetric)?.isAmount"
:percent-value="TransactionExplorerValueMetric.valueOf(currentExplorer.valueMetric)?.isPercent"
:default-currency="defaultCurrency"
id-field="id"
value-field="totalAmount"
v-else-if="!loading"
/>
</v-card-text>
</template>
<script setup lang="ts">
@ -228,10 +250,11 @@ import { NumeralSystem } from '@/core/numeral.ts';
import { Month, WeekDay } from '@/core/datetime.ts';
import { ChartSortingType, ExportMermaidChartType } from '@/core/statistics.ts';
import {
TransactionExplorerChartType,
TransactionExplorerDataDimensionType,
TransactionExplorerDataDimension,
TransactionExplorerValueMetric
TransactionExplorerValueMetric,
TransactionExplorerChartTypeValue,
TransactionExplorerChartType
} from '@/core/explorer.ts';
import { type SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
@ -328,7 +351,9 @@ const allAmountRangeCounts = computed<NameNumeralValue[]>(() => {
});
const categoryDimensionTransactionExplorerData = computed<CategoryDimensionData[]>(() => {
if (currentExplorer.value.chartType !== TransactionExplorerChartType.Pie.value && currentExplorer.value.chartType !== TransactionExplorerChartType.Radar.value) {
if (currentExplorer.value.chartType !== TransactionExplorerChartType.Pie.value
&& currentExplorer.value.chartType !== TransactionExplorerChartType.Radar.value
&& currentExplorer.value.chartType !== TransactionExplorerChartType.CalendarHeatmap.value) {
return [];
}
@ -795,6 +820,26 @@ function getAxisChartTooltipExtraColumnValues(seriesId: string, categoryIndex: n
return extraColumnValues;
}
function updateChartType(chartTypeValue: TransactionExplorerChartTypeValue): void {
if (currentExplorer.value.chartType !== chartTypeValue) {
currentExplorer.value.chartType = chartTypeValue;
}
const chartType = TransactionExplorerChartType.valueOf(chartTypeValue);
if (isDefined(chartType?.fixedCategoryDimension)) {
currentExplorer.value.categoryDimension = chartType.fixedCategoryDimension;
}
if (!chartType?.seriesDimensionRequired) {
currentExplorer.value.seriesDimension = TransactionExplorerDataDimension.None.value;
}
if (isDefined(chartType?.fixedSortingType)) {
currentExplorer.value.chartSortingType = chartType.fixedSortingType;
}
}
function updateCategoryDimensionType(dimensionType: TransactionExplorerDataDimensionType): void {
if (currentExplorer.value.categoryDimension !== dimensionType) {
currentExplorer.value.categoryDimension = dimensionType;