MaysWind
344 lines
14 KiB
Vue
344 lines
14 KiB
Vue
<template>
|
|
<v-chart autoresize class="account-balance-trends-chart-container" :class="{ 'transition-in': skeleton }" :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 {
|
|
type AccountBalanceTrendsChartItem,
|
|
type CommonAccountBalanceTrendsChartProps,
|
|
useAccountBalanceTrendsChartBase
|
|
} from '@/components/base/AccountBalanceTrendsChartBase.ts'
|
|
|
|
import { useUserStore } from '@/stores/user.ts';
|
|
|
|
import { type NameValue, itemAndIndex } from '@/core/base.ts';
|
|
import { TextDirection } from '@/core/text.ts';
|
|
import type { ColorStyleValue } from '@/core/color.ts';
|
|
import { ThemeType } from '@/core/theme.ts';
|
|
import { AccountBalanceTrendChartType } from '@/core/statistics.ts';
|
|
import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
|
|
|
|
import { isArray } from '@/lib/common.ts';
|
|
import { getExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
|
|
|
|
interface DesktopAccountBalanceTrendsChartProps extends CommonAccountBalanceTrendsChartProps {
|
|
legendName: string;
|
|
skeleton?: boolean;
|
|
type?: number;
|
|
}
|
|
|
|
interface AccountBalanceTrendsChartDataItem {
|
|
id: string;
|
|
name: string;
|
|
itemStyle: {
|
|
color: ColorStyleValue;
|
|
color0?: ColorStyleValue;
|
|
borderColor?: ColorStyleValue;
|
|
borderColor0?: ColorStyleValue;
|
|
};
|
|
selected: boolean;
|
|
type: string;
|
|
areaStyle?: object;
|
|
stack: string;
|
|
animation: boolean;
|
|
data: (number | number[])[];
|
|
}
|
|
|
|
const props = defineProps<DesktopAccountBalanceTrendsChartProps>();
|
|
|
|
const theme = useTheme();
|
|
const { tt, getCurrentLanguageTextDirection, formatAmountToLocalizedNumeralsWithCurrency } = useI18n();
|
|
const { allDataItems, allDisplayDateRanges } = useAccountBalanceTrendsChartBase(props);
|
|
|
|
const userStore = useUserStore();
|
|
|
|
const textDirection = computed<TextDirection>(() => getCurrentLanguageTextDirection());
|
|
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
|
|
|
|
const allSeries = computed<AccountBalanceTrendsChartDataItem[]>(() => {
|
|
const series: AccountBalanceTrendsChartDataItem = {
|
|
id: 'accountBalance',
|
|
name: props.legendName,
|
|
itemStyle: {
|
|
color: `#${DEFAULT_CHART_COLORS[0]}`
|
|
},
|
|
selected: true,
|
|
type: 'line',
|
|
stack: 'a',
|
|
animation: !props.skeleton,
|
|
data: []
|
|
};
|
|
|
|
if (props.type === AccountBalanceTrendChartType.Area.type) {
|
|
series.areaStyle = {};
|
|
} else if (props.type === AccountBalanceTrendChartType.Column.type) {
|
|
series.type = 'bar';
|
|
} else if (props.type === AccountBalanceTrendChartType.Boxplot.type) {
|
|
series.type = 'boxplot';
|
|
series.itemStyle.borderColor = series.itemStyle.color;
|
|
} else if (props.type === AccountBalanceTrendChartType.Candlestick.type) {
|
|
const expenseIncomeAmountColor = getExpenseAndIncomeAmountColor(userStore.currentUserExpenseAmountColor, userStore.currentUserIncomeAmountColor, isDarkMode.value);
|
|
series.type = 'candlestick';
|
|
series.itemStyle.color = expenseIncomeAmountColor.incomeAmountColor;
|
|
series.itemStyle.color0 = expenseIncomeAmountColor.expenseAmountColor;
|
|
series.itemStyle.borderColor = expenseIncomeAmountColor.incomeAmountColor;
|
|
series.itemStyle.borderColor0 = expenseIncomeAmountColor.expenseAmountColor;
|
|
}
|
|
|
|
for (const item of allDataItems.value) {
|
|
if (props.type === AccountBalanceTrendChartType.Boxplot.type) {
|
|
series.data.push([
|
|
item.minimumBalance,
|
|
item.q1Balance,
|
|
item.medianBalance,
|
|
item.q3Balance,
|
|
item.maximumBalance
|
|
]);
|
|
} else if (props.type === AccountBalanceTrendChartType.Candlestick.type) {
|
|
series.data.push([
|
|
item.openingBalance,
|
|
item.closingBalance,
|
|
item.minimumBalance,
|
|
item.maximumBalance
|
|
]);
|
|
} else {
|
|
series.data.push(item.closingBalance);
|
|
}
|
|
}
|
|
|
|
return [series];
|
|
});
|
|
|
|
const yAxisWidth = computed<number>(() => {
|
|
let maxValue = Number.MIN_SAFE_INTEGER;
|
|
let minValue = Number.MAX_SAFE_INTEGER;
|
|
let width = 90;
|
|
|
|
if (!allSeries.value || !allSeries.value.length) {
|
|
return width;
|
|
}
|
|
|
|
for (const series of allSeries.value) {
|
|
for (const data of series.data) {
|
|
let currentMinValue: number;
|
|
let currentMaxValue: number;
|
|
|
|
if (isArray(data) && props.type === AccountBalanceTrendChartType.Boxplot.type) {
|
|
currentMinValue = data[0] as number;
|
|
currentMaxValue = data[4] as number;
|
|
} else if (isArray(data) && props.type === AccountBalanceTrendChartType.Candlestick.type) {
|
|
currentMinValue = data[2] as number;
|
|
currentMaxValue = data[3] as number;
|
|
} else {
|
|
currentMinValue = data as number;
|
|
currentMaxValue = data as number;
|
|
}
|
|
|
|
if (currentMaxValue > maxValue) {
|
|
maxValue = currentMaxValue;
|
|
}
|
|
|
|
if (currentMinValue < minValue) {
|
|
minValue = currentMinValue;
|
|
}
|
|
}
|
|
}
|
|
|
|
const maxValueText = formatAmountToLocalizedNumeralsWithCurrency(maxValue, props.account.currency);
|
|
const minValueText = formatAmountToLocalizedNumeralsWithCurrency(minValue, props.account.currency);
|
|
const maxLengthText = maxValueText.length > minValueText.length ? maxValueText : minValueText;
|
|
|
|
const canvas = document.createElement('canvas');
|
|
const context = canvas.getContext('2d');
|
|
|
|
if (context) {
|
|
context.font = '12px Arial';
|
|
|
|
const textMetrics = context.measureText(maxLengthText);
|
|
const actualWidth = Math.round(textMetrics.width) + 20;
|
|
|
|
if (actualWidth >= 200) {
|
|
width = 200;
|
|
} if (actualWidth > 90) {
|
|
width = actualWidth;
|
|
}
|
|
}
|
|
|
|
return width;
|
|
});
|
|
|
|
const chartOptions = computed<object>(() => {
|
|
return {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: isDarkMode.value ? '#333' : '#fff',
|
|
color: isDarkMode.value ? '#eee' : '#333'
|
|
},
|
|
},
|
|
backgroundColor: isDarkMode.value ? '#333' : '#fff',
|
|
borderColor: isDarkMode.value ? '#333' : '#fff',
|
|
textStyle: {
|
|
color: isDarkMode.value ? '#eee' : '#333'
|
|
},
|
|
formatter: (params: CallbackDataParams[]) => {
|
|
if (props.type === AccountBalanceTrendChartType.Boxplot.type) {
|
|
const dataIndex = params[0]!.dataIndex;
|
|
const dataItem = allDataItems.value[dataIndex] as AccountBalanceTrendsChartItem;
|
|
const displayItems: NameValue[] = [
|
|
{
|
|
name: tt('Minimum Balance'),
|
|
value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.minimumBalance, props.account.currency)
|
|
},
|
|
{
|
|
name: tt('Q1 Balance (First Quartile)'),
|
|
value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.q1Balance, props.account.currency)
|
|
},
|
|
{
|
|
name: tt('Median Balance'),
|
|
value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.medianBalance, props.account.currency)
|
|
},
|
|
{
|
|
name: tt('Q3 Balance (Third Quartile)'),
|
|
value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.q3Balance, props.account.currency)
|
|
},
|
|
{
|
|
name: tt('Maximum Balance'),
|
|
value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.maximumBalance, props.account.currency)
|
|
},
|
|
{
|
|
name: tt('Opening Balance'),
|
|
value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.openingBalance, props.account.currency)
|
|
},
|
|
{
|
|
name: tt('Closing Balance'),
|
|
value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.closingBalance, props.account.currency)
|
|
}
|
|
];
|
|
|
|
let tooltip = `${params[0]!.name} ${props.legendName}<br/>`;
|
|
|
|
for (const [displayItem, index] of itemAndIndex(displayItems)) {
|
|
if (index === 5) {
|
|
tooltip += '<div style="border-bottom: ' + (isDarkMode.value ? '#eee' : '#333') + ' dashed 1px"></div>';
|
|
}
|
|
|
|
tooltip += `<div><span class="chart-pointer" style="background-color: #${DEFAULT_CHART_COLORS[index]}"></span>`
|
|
+ `<span>${displayItem.name}</span><span class="ms-5" style="float: inline-end">${displayItem.value}</span>`
|
|
+ `</div>`;
|
|
}
|
|
|
|
return tooltip;
|
|
} else if (props.type === AccountBalanceTrendChartType.Candlestick.type) {
|
|
const dataIndex = params[0]!.dataIndex;
|
|
const dataItem = allDataItems.value[dataIndex] as AccountBalanceTrendsChartItem;
|
|
const displayItems: NameValue[] = [
|
|
{
|
|
name: tt('Opening Balance'),
|
|
value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.openingBalance, props.account.currency)
|
|
},
|
|
{
|
|
name: tt('Closing Balance'),
|
|
value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.closingBalance, props.account.currency)
|
|
},
|
|
{
|
|
name: tt('Minimum Balance'),
|
|
value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.minimumBalance, props.account.currency)
|
|
},
|
|
{
|
|
name: tt('Maximum Balance'),
|
|
value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.maximumBalance, props.account.currency)
|
|
},
|
|
{
|
|
name: tt('Median Balance'),
|
|
value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.medianBalance, props.account.currency)
|
|
},
|
|
{
|
|
name: tt('Average Balance'),
|
|
value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.averageBalance, props.account.currency)
|
|
}
|
|
];
|
|
|
|
let tooltip = `${params[0]!.name} ${props.legendName}<br/>`;
|
|
|
|
for (const [displayItem, index] of itemAndIndex(displayItems)) {
|
|
if (index === 4) {
|
|
tooltip += '<div style="border-bottom: ' + (isDarkMode.value ? '#eee' : '#333') + ' dashed 1px"></div>';
|
|
}
|
|
|
|
tooltip += `<div><span class="chart-pointer" style="background-color: #${DEFAULT_CHART_COLORS[index]}"></span>`
|
|
+ `<span>${displayItem.name}</span><span class="ms-5" style="float: inline-end">${displayItem.value}</span>`
|
|
+ `</div>`;
|
|
}
|
|
|
|
return tooltip;
|
|
} else {
|
|
const amount = params[0]!.data as number;
|
|
const value = formatAmountToLocalizedNumeralsWithCurrency(amount, props.account.currency);
|
|
|
|
return `${params[0]!.name}<br/>`
|
|
+ '<div><span class="chart-pointer" style="background-color: #' + DEFAULT_CHART_COLORS[0] + '"></span>'
|
|
+ `<span>${props.legendName}</span><span class="ms-5" style="float: inline-end">${value}</span>`
|
|
+ '</div>';
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
left: yAxisWidth.value,
|
|
right: 20,
|
|
top: 0,
|
|
bottom: 20
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: allDisplayDateRanges.value,
|
|
inverse: textDirection.value === TextDirection.RTL,
|
|
axisLabel: {
|
|
color: isDarkMode.value ? '#888' : '#666'
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: isDarkMode.value ? '#888' : '#666',
|
|
formatter: (value: string) => {
|
|
return formatAmountToLocalizedNumeralsWithCurrency(parseInt(value), props.account.currency);
|
|
}
|
|
},
|
|
axisPointer: {
|
|
label: {
|
|
formatter: (params: CallbackDataParams) => {
|
|
return formatAmountToLocalizedNumeralsWithCurrency(Math.trunc(params.value as number), props.account.currency);
|
|
}
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: isDarkMode.value ? '#4f4f4f' : '#e1e6f2',
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: allSeries.value
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.account-balance-trends-chart-container {
|
|
width: 100%;
|
|
height: 418px;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|