refactor the trends chart component and extract a reusable axis chart component
This commit is contained in:
MaysWind
@@ -0,0 +1,416 @@
|
||||
<template>
|
||||
<v-chart autoresize class="axis-chart-container" :class="{ 'transition-in': skeleton }" :option="chartOptions"
|
||||
@click="clickItem" @legendselectchanged="onLegendSelectChanged" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
import type { ECElementEvent } from 'echarts/core';
|
||||
import type { CallbackDataParams } from 'echarts/types/dist/shared';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import { 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 { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
|
||||
|
||||
import type { SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
|
||||
|
||||
import { isArray } from '@/lib/common.ts';
|
||||
import { getDisplayColor } from '@/lib/color.ts';
|
||||
import { sortStatisticsItems } from '@/lib/statistics.ts';
|
||||
|
||||
export type AxisChartDisplayType = 'area' | 'column' | 'bubble';
|
||||
|
||||
interface AxisChartDataItem {
|
||||
id: string;
|
||||
name: string;
|
||||
itemStyle: {
|
||||
color: ColorStyleValue;
|
||||
};
|
||||
selected: boolean;
|
||||
type: string;
|
||||
areaStyle?: object;
|
||||
stack?: string;
|
||||
symbolSize?: (data: number) => number;
|
||||
animation: boolean;
|
||||
data: number[];
|
||||
}
|
||||
|
||||
interface AxisChartTooltipItem extends SortableTransactionStatisticDataItem {
|
||||
readonly name: string;
|
||||
readonly color: unknown;
|
||||
readonly displayOrders: number[];
|
||||
readonly totalAmount: number;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
skeleton?: boolean;
|
||||
type: AxisChartDisplayType;
|
||||
stacked?: boolean;
|
||||
sortingType: number;
|
||||
showValue?: boolean;
|
||||
showTotalAmountInTooltip?: boolean;
|
||||
totalNameInTooltip?: string;
|
||||
categoryTypeName: string;
|
||||
allCategoryNames: string[];
|
||||
items: Record<string, unknown>[];
|
||||
idField?: string;
|
||||
nameField: string;
|
||||
valuesField: string;
|
||||
colorField?: string;
|
||||
hiddenField?: string;
|
||||
displayOrdersField?: string;
|
||||
translateName?: boolean;
|
||||
amountValue?: boolean;
|
||||
defaultCurrency?: string;
|
||||
enableClickItem?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', itemId: string, categoryIndex: number): void;
|
||||
}>();
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const {
|
||||
tt,
|
||||
getCurrentLanguageTextDirection,
|
||||
formatAmountToWesternArabicNumeralsWithoutDigitGrouping,
|
||||
formatAmountToLocalizedNumeralsWithCurrency
|
||||
} = useI18n();
|
||||
|
||||
const selectedLegends = ref<Record<string, boolean>>({});
|
||||
|
||||
const textDirection = computed<TextDirection>(() => getCurrentLanguageTextDirection());
|
||||
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
|
||||
|
||||
const itemsMap = computed<Record<string, Record<string, unknown>>>(() => {
|
||||
const map: Record<string, Record<string, unknown>> = {};
|
||||
|
||||
for (const item of props.items) {
|
||||
let id: string = '';
|
||||
|
||||
if (props.idField && item[props.idField]) {
|
||||
id = item[props.idField] as string;
|
||||
} else {
|
||||
id = getItemName(item[props.nameField] as string);
|
||||
}
|
||||
|
||||
const finalItem: Record<string, unknown> = {
|
||||
[props.nameField]: item[props.nameField]
|
||||
};
|
||||
|
||||
if (props.idField) {
|
||||
finalItem[props.idField] = item[props.idField];
|
||||
}
|
||||
|
||||
if (props.hiddenField) {
|
||||
finalItem[props.hiddenField] = item[props.hiddenField];
|
||||
}
|
||||
|
||||
if (props.displayOrdersField) {
|
||||
finalItem[props.displayOrdersField] = item[props.displayOrdersField];
|
||||
}
|
||||
|
||||
map[id] = finalItem;
|
||||
}
|
||||
|
||||
return map;
|
||||
});
|
||||
|
||||
const allSeries = computed<AxisChartDataItem[]>(() => {
|
||||
const allSeries: AxisChartDataItem[] = [];
|
||||
let maxAmount: number = 0;
|
||||
|
||||
for (const item of props.items) {
|
||||
if (props.hiddenField && item[props.hiddenField]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!isArray(item[props.valuesField])) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const allAmounts: number[] = item[props.valuesField] as number[];
|
||||
|
||||
if (props.type === 'bubble') {
|
||||
for (const amount of allAmounts) {
|
||||
if (amount > maxAmount) {
|
||||
maxAmount = amount;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const finalItem: AxisChartDataItem = {
|
||||
id: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
|
||||
name: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
|
||||
itemStyle: {
|
||||
color: getDisplayColor(props.colorField && item[props.colorField] ? item[props.colorField] as string : DEFAULT_CHART_COLORS[allSeries.length % DEFAULT_CHART_COLORS.length]),
|
||||
},
|
||||
selected: true,
|
||||
type: 'line',
|
||||
animation: !props.skeleton,
|
||||
data: allAmounts
|
||||
};
|
||||
|
||||
if (props.stacked) {
|
||||
finalItem.stack = 'a';
|
||||
} else if (props.idField && item[props.idField]) {
|
||||
finalItem.stack = item[props.idField] as string;
|
||||
}
|
||||
|
||||
if (props.type === 'area') {
|
||||
finalItem.areaStyle = {};
|
||||
} else if (props.type === 'column') {
|
||||
finalItem.type = 'bar';
|
||||
} else if (props.type === 'bubble') {
|
||||
finalItem.type = 'scatter';
|
||||
finalItem.symbolSize = (data: number): number => {
|
||||
return Math.sqrt(data) / Math.sqrt(maxAmount) * 80 + 5;
|
||||
}
|
||||
}
|
||||
|
||||
allSeries.push(finalItem);
|
||||
}
|
||||
|
||||
return allSeries;
|
||||
});
|
||||
|
||||
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 value of series.data) {
|
||||
if (value > maxValue) {
|
||||
maxValue = value;
|
||||
}
|
||||
|
||||
if (value < minValue) {
|
||||
minValue = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const maxValueText = props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(maxValue, props.defaultCurrency) : maxValue.toString();
|
||||
const minValueText = props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(minValue, props.defaultCurrency) : minValue.toString();
|
||||
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[]) => {
|
||||
let tooltip = '';
|
||||
let totalAmount = 0;
|
||||
let actualDisplayItemCount = 0;
|
||||
const displayItems: AxisChartTooltipItem[] = [];
|
||||
|
||||
for (const param of params) {
|
||||
const id = param.seriesId as string;
|
||||
const name = itemsMap.value[id] && props.nameField && itemsMap.value[id][props.nameField] ? getItemName(itemsMap.value[id][props.nameField] as string) : id;
|
||||
const color = param.color;
|
||||
const displayOrders = itemsMap.value[id] && props.displayOrdersField && itemsMap.value[id][props.displayOrdersField] ? itemsMap.value[id][props.displayOrdersField] as number[] : [0];
|
||||
const amount = param.data as number;
|
||||
|
||||
displayItems.push({
|
||||
name: name,
|
||||
color: color,
|
||||
displayOrders: displayOrders,
|
||||
totalAmount: amount
|
||||
});
|
||||
|
||||
totalAmount += amount;
|
||||
}
|
||||
|
||||
sortStatisticsItems(displayItems, props.sortingType);
|
||||
|
||||
for (const item of displayItems) {
|
||||
if (displayItems.length === 1 || item.totalAmount !== 0) {
|
||||
const value = props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(item.totalAmount, props.defaultCurrency) : item.totalAmount.toString();
|
||||
tooltip += '<div><span class="chart-pointer" style="background-color: ' + item.color + '"></span>';
|
||||
tooltip += `<span>${item.name}</span><span class="ms-5" style="float: inline-end">${value}</span><br/>`;
|
||||
tooltip += '</div>';
|
||||
actualDisplayItemCount++;
|
||||
}
|
||||
}
|
||||
|
||||
if (props.showTotalAmountInTooltip) {
|
||||
const displayTotalAmount = props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(totalAmount, props.defaultCurrency) : totalAmount.toString();
|
||||
tooltip = (actualDisplayItemCount > 0 ? '<div style="border-bottom: ' + (isDarkMode.value ? '#eee' : '#333') + ' dashed 1px">' : '<div></div>')
|
||||
+ '<span class="chart-pointer" style="background-color: ' + (isDarkMode.value ? '#eee' : '#333') + '"></span>'
|
||||
+ `<span>${props.totalNameInTooltip}</span><span class="ms-5" style="float: inline-end">${displayTotalAmount}</span><br/>`
|
||||
+ '</div>' + tooltip;
|
||||
}
|
||||
|
||||
if (params.length && params[0] && params[0].name) {
|
||||
tooltip = `${params[0].name}<br/>` + tooltip;
|
||||
}
|
||||
|
||||
return tooltip;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
type: 'scroll',
|
||||
top: 0,
|
||||
data: allSeries.value.map(item => item.name),
|
||||
selected: selectedLegends.value,
|
||||
textStyle: {
|
||||
color: isDarkMode.value ? '#eee' : '#333'
|
||||
},
|
||||
formatter: (id: string) => {
|
||||
return itemsMap.value[id] && props.nameField && itemsMap.value[id][props.nameField] ? getItemName(itemsMap.value[id][props.nameField] as string) : id;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: yAxisWidth.value,
|
||||
right: 20,
|
||||
bottom: 40
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: props.allCategoryNames,
|
||||
inverse: textDirection.value === TextDirection.RTL,
|
||||
axisLabel: {
|
||||
color: isDarkMode.value ? '#888' : '#666'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: isDarkMode.value ? '#888' : '#666',
|
||||
formatter: (value: string) => {
|
||||
return props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(parseInt(value), props.defaultCurrency): value;
|
||||
}
|
||||
},
|
||||
axisPointer: {
|
||||
label: {
|
||||
formatter: (params: CallbackDataParams) => {
|
||||
return props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(Math.trunc(params.value as number), props.defaultCurrency) : params.value;
|
||||
}
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: isDarkMode.value ? '#4f4f4f' : '#e1e6f2',
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: allSeries.value
|
||||
};
|
||||
});
|
||||
|
||||
function getItemName(name: string): string {
|
||||
return props.translateName ? tt(name) : name;
|
||||
}
|
||||
|
||||
function clickItem(e: ECElementEvent): void {
|
||||
if (!props.enableClickItem || e.componentType !== 'series') {
|
||||
return;
|
||||
}
|
||||
|
||||
const id = e.seriesId as string;
|
||||
const item = itemsMap.value[id] as Record<string, unknown>;
|
||||
const itemId = props.idField ? item[props.idField] as string : '';
|
||||
const category = props.allCategoryNames[e.dataIndex];
|
||||
|
||||
if (!category) {
|
||||
return;
|
||||
}
|
||||
|
||||
emit('click', itemId, e.dataIndex);
|
||||
}
|
||||
|
||||
function exportData(): { headers: string[], data: string[][] } {
|
||||
const headers: string[] = [];
|
||||
const data: string[][] = [];
|
||||
|
||||
headers.push(props.categoryTypeName);
|
||||
|
||||
for (const series of allSeries.value) {
|
||||
const id = series.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 (const [categoryName, index] of itemAndIndex(props.allCategoryNames)) {
|
||||
const row: string[] = [];
|
||||
row.push(categoryName);
|
||||
row.push(...allSeries.value.map(item => formatAmountToWesternArabicNumeralsWithoutDigitGrouping(item.data[index] ?? 0)));
|
||||
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>
|
||||
.axis-chart-container {
|
||||
width: 100%;
|
||||
height: 720px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.axis-chart-container {
|
||||
height: 790px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +1,23 @@
|
||||
<template>
|
||||
<v-chart autoresize class="trends-chart-container" :class="{ 'transition-in': skeleton }" :option="chartOptions"
|
||||
@click="clickItem" @legendselectchanged="onLegendSelectChanged" />
|
||||
<axis-chart ref="axisChart" values-field="values"
|
||||
:skeleton="skeleton" :type="chartDisplayType" :stacked="stacked" :sorting-type="sortingType"
|
||||
:show-value="showValue"
|
||||
:show-total-amount-in-tooltip="showTotalAmountInTooltip" :total-name-in-tooltip="tt('Total Amount')"
|
||||
:category-type-name="tt('Date')" :all-category-names="allDisplayDateRanges" :items="allSeriesData"
|
||||
:id-field="idField" :name-field="nameField" :color-field="colorField" :hidden-field="hiddenField"
|
||||
:display-orders-field="displayOrdersField"
|
||||
:translate-name="translateName"
|
||||
:amount-value="true" :default-currency="defaultCurrency"
|
||||
:enable-click-item="enableClickItem"
|
||||
@click="clickItem"
|
||||
v-if="chartDisplayType"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
import type { ECElementEvent } from 'echarts/core';
|
||||
import type { CallbackDataParams } from 'echarts/types/dist/shared';
|
||||
import AxisChart, { type AxisChartDisplayType } from './AxisChart.vue';
|
||||
|
||||
import { computed, useTemplateRef } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import {
|
||||
@@ -19,29 +29,18 @@ import {
|
||||
|
||||
import { useUserStore } from '@/stores/user.ts';
|
||||
|
||||
import { itemAndIndex } from '@/core/base.ts';
|
||||
import { TextDirection } from '@/core/text.ts';
|
||||
import {
|
||||
type Year1BasedMonth,
|
||||
type YearMonthDay,
|
||||
DateRangeScene
|
||||
} from '@/core/datetime.ts';
|
||||
import type { ColorStyleValue } from '@/core/color.ts';
|
||||
import { ThemeType } from '@/core/theme.ts';
|
||||
import {
|
||||
ChartDataAggregationType,
|
||||
TrendChartType,
|
||||
ChartDateAggregationType
|
||||
} from '@/core/statistics.ts';
|
||||
|
||||
import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
|
||||
|
||||
import type { SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
|
||||
|
||||
import {
|
||||
isArray,
|
||||
isNumber
|
||||
} from '@/lib/common.ts';
|
||||
import { isArray, isNumber } from '@/lib/common.ts';
|
||||
import {
|
||||
parseDateTimeFromUnixTime,
|
||||
getYearMonthFirstUnixTime,
|
||||
@@ -49,12 +48,8 @@ import {
|
||||
getDateTypeByDateRange,
|
||||
getFiscalYearFromUnixTime
|
||||
} from '@/lib/datetime.ts';
|
||||
import {
|
||||
getDisplayColor
|
||||
} from '@/lib/color.ts';
|
||||
import {
|
||||
sortStatisticsItems
|
||||
} from '@/lib/statistics.ts';
|
||||
|
||||
type AxisChartType = InstanceType<typeof AxisChart>;
|
||||
|
||||
interface DesktopTrendsChartProps<T extends TrendsChartDateType> extends CommonTrendsChartProps<T> {
|
||||
skeleton?: boolean;
|
||||
@@ -63,89 +58,37 @@ interface DesktopTrendsChartProps<T extends TrendsChartDateType> extends CommonT
|
||||
showTotalAmountInTooltip?: boolean;
|
||||
}
|
||||
|
||||
interface TrendsChartDataItem {
|
||||
id: string;
|
||||
name: string;
|
||||
itemStyle: {
|
||||
color: ColorStyleValue;
|
||||
};
|
||||
selected: boolean;
|
||||
type: string;
|
||||
areaStyle?: object;
|
||||
stack?: string;
|
||||
symbolSize?: (data: number) => number;
|
||||
animation: boolean;
|
||||
data: number[];
|
||||
}
|
||||
|
||||
interface TrendsChartTooltipItem extends SortableTransactionStatisticDataItem {
|
||||
readonly name: string;
|
||||
readonly color: unknown;
|
||||
readonly displayOrders: number[];
|
||||
readonly totalAmount: number;
|
||||
}
|
||||
|
||||
const props = defineProps<DesktopTrendsChartProps<TrendsChartDateType>>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', value: TrendsBarChartClickEvent): void;
|
||||
}>();
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const {
|
||||
tt,
|
||||
getCurrentLanguageTextDirection,
|
||||
formatDateTimeToShortDate,
|
||||
formatDateTimeToGregorianLikeShortYear,
|
||||
formatDateTimeToGregorianLikeShortYearMonth,
|
||||
formatYearQuarterToGregorianLikeYearQuarter,
|
||||
formatDateTimeToGregorianLikeFiscalYear,
|
||||
formatAmountToWesternArabicNumeralsWithoutDigitGrouping,
|
||||
formatAmountToLocalizedNumeralsWithCurrency
|
||||
formatDateTimeToGregorianLikeFiscalYear
|
||||
} = useI18n();
|
||||
|
||||
const { allDateRanges, getItemName } = useTrendsChartBase(props);
|
||||
const { allDateRanges } = useTrendsChartBase(props);
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const selectedLegends = ref<Record<string, boolean>>({});
|
||||
const axisChart = useTemplateRef<AxisChartType>('axisChart');
|
||||
|
||||
const textDirection = computed<TextDirection>(() => getCurrentLanguageTextDirection());
|
||||
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
|
||||
|
||||
const itemsMap = computed<Record<string, Record<string, unknown>>>(() => {
|
||||
const map: Record<string, Record<string, unknown>> = {};
|
||||
|
||||
for (const item of props.items) {
|
||||
let id: string = '';
|
||||
|
||||
if (props.idField && item[props.idField]) {
|
||||
id = item[props.idField] as string;
|
||||
} else {
|
||||
id = getItemName(item[props.nameField] as string);
|
||||
}
|
||||
|
||||
const finalItem: Record<string, unknown> = {
|
||||
[props.nameField]: item[props.nameField]
|
||||
};
|
||||
|
||||
if (props.idField) {
|
||||
finalItem[props.idField] = item[props.idField];
|
||||
}
|
||||
|
||||
if (props.hiddenField) {
|
||||
finalItem[props.hiddenField] = item[props.hiddenField];
|
||||
}
|
||||
|
||||
if (props.displayOrdersField) {
|
||||
finalItem[props.displayOrdersField] = item[props.displayOrdersField];
|
||||
}
|
||||
|
||||
map[id] = finalItem;
|
||||
const chartDisplayType = computed<AxisChartDisplayType | undefined>(() => {
|
||||
if (props.type === TrendChartType.Area.type) {
|
||||
return 'area';
|
||||
} else if (props.type === TrendChartType.Column.type) {
|
||||
return 'column';
|
||||
} else if (props.type === TrendChartType.Bubble.type) {
|
||||
return 'bubble';
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return map;
|
||||
});
|
||||
|
||||
const allDisplayDateRanges = computed<string[]>(() => {
|
||||
@@ -170,15 +113,36 @@ const allDisplayDateRanges = computed<string[]>(() => {
|
||||
return allDisplayDateRanges;
|
||||
});
|
||||
|
||||
const allSeries = computed<TrendsChartDataItem[]>(() => {
|
||||
const allSeries: TrendsChartDataItem[] = [];
|
||||
let maxAmount: number = 0;
|
||||
const allSeriesData = computed<Record<string, unknown>[]>(() => {
|
||||
const result: Record<string, unknown>[] = [];
|
||||
|
||||
for (const [item, index] of itemAndIndex(props.items)) {
|
||||
for (const item of props.items) {
|
||||
if (props.hiddenField && item[props.hiddenField]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const finalItem: Record<string, unknown> = {};
|
||||
|
||||
if (props.idField) {
|
||||
finalItem[props.idField] = item[props.idField];
|
||||
}
|
||||
|
||||
if (props.nameField) {
|
||||
finalItem[props.nameField] = item[props.nameField];
|
||||
}
|
||||
|
||||
if (props.colorField) {
|
||||
finalItem[props.colorField] = item[props.colorField];
|
||||
}
|
||||
|
||||
if (props.hiddenField) {
|
||||
finalItem[props.hiddenField] = item[props.hiddenField];
|
||||
}
|
||||
|
||||
if (props.displayOrdersField) {
|
||||
finalItem[props.displayOrdersField] = item[props.displayOrdersField];
|
||||
}
|
||||
|
||||
const allAmounts: number[] = [];
|
||||
const dateRangeAmountMap: Record<string, (Year1BasedMonth | YearMonthDay)[]> = {};
|
||||
|
||||
@@ -255,223 +219,18 @@ const allSeries = computed<TrendsChartDataItem[]>(() => {
|
||||
}
|
||||
}
|
||||
|
||||
if (amount > maxAmount) {
|
||||
maxAmount = amount;
|
||||
}
|
||||
|
||||
allAmounts.push(amount);
|
||||
}
|
||||
|
||||
const finalItem: TrendsChartDataItem = {
|
||||
id: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
|
||||
name: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
|
||||
itemStyle: {
|
||||
color: getDisplayColor(props.colorField && item[props.colorField] ? item[props.colorField] as string : DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length]),
|
||||
},
|
||||
selected: true,
|
||||
type: 'line',
|
||||
animation: !props.skeleton,
|
||||
data: allAmounts
|
||||
};
|
||||
|
||||
if (props.stacked) {
|
||||
finalItem.stack = 'a';
|
||||
} else if (props.idField && item[props.idField]) {
|
||||
finalItem.stack = item[props.idField] as string;
|
||||
}
|
||||
|
||||
if (props.type === TrendChartType.Area.type) {
|
||||
finalItem.areaStyle = {};
|
||||
} else if (props.type === TrendChartType.Column.type) {
|
||||
finalItem.type = 'bar';
|
||||
} else if (props.type === TrendChartType.Bubble.type) {
|
||||
finalItem.type = 'scatter';
|
||||
finalItem.symbolSize = (data: number): number => {
|
||||
return Math.sqrt(data) / Math.sqrt(maxAmount) * 80 + 5;
|
||||
}
|
||||
}
|
||||
|
||||
allSeries.push(finalItem);
|
||||
finalItem['values'] = allAmounts;
|
||||
result.push(finalItem);
|
||||
}
|
||||
|
||||
return allSeries;
|
||||
return result;
|
||||
});
|
||||
|
||||
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 value of series.data) {
|
||||
if (value > maxValue) {
|
||||
maxValue = value;
|
||||
}
|
||||
|
||||
if (value < minValue) {
|
||||
minValue = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const maxValueText = formatAmountToLocalizedNumeralsWithCurrency(maxValue, props.defaultCurrency);
|
||||
const minValueText = formatAmountToLocalizedNumeralsWithCurrency(minValue, props.defaultCurrency);
|
||||
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[]) => {
|
||||
let tooltip = '';
|
||||
let totalAmount = 0;
|
||||
let actualDisplayItemCount = 0;
|
||||
const displayItems: TrendsChartTooltipItem[] = [];
|
||||
|
||||
for (const param of params) {
|
||||
const id = param.seriesId as string;
|
||||
const name = itemsMap.value[id] && props.nameField && itemsMap.value[id][props.nameField] ? getItemName(itemsMap.value[id][props.nameField] as string) : id;
|
||||
const color = param.color;
|
||||
const displayOrders = itemsMap.value[id] && props.displayOrdersField && itemsMap.value[id][props.displayOrdersField] ? itemsMap.value[id][props.displayOrdersField] as number[] : [0];
|
||||
const amount = param.data as number;
|
||||
|
||||
displayItems.push({
|
||||
name: name,
|
||||
color: color,
|
||||
displayOrders: displayOrders,
|
||||
totalAmount: amount
|
||||
});
|
||||
|
||||
totalAmount += amount;
|
||||
}
|
||||
|
||||
sortStatisticsItems(displayItems, props.sortingType);
|
||||
|
||||
for (const item of displayItems) {
|
||||
if (displayItems.length === 1 || item.totalAmount !== 0) {
|
||||
const value = formatAmountToLocalizedNumeralsWithCurrency(item.totalAmount, props.defaultCurrency);
|
||||
tooltip += '<div><span class="chart-pointer" style="background-color: ' + item.color + '"></span>';
|
||||
tooltip += `<span>${item.name}</span><span class="ms-5" style="float: inline-end">${value}</span><br/>`;
|
||||
tooltip += '</div>';
|
||||
actualDisplayItemCount++;
|
||||
}
|
||||
}
|
||||
|
||||
if (props.showTotalAmountInTooltip) {
|
||||
const displayTotalAmount = formatAmountToLocalizedNumeralsWithCurrency(totalAmount, props.defaultCurrency);
|
||||
tooltip = (actualDisplayItemCount > 0 ? '<div style="border-bottom: ' + (isDarkMode.value ? '#eee' : '#333') + ' dashed 1px">' : '<div></div>')
|
||||
+ '<span class="chart-pointer" style="background-color: ' + (isDarkMode.value ? '#eee' : '#333') + '"></span>'
|
||||
+ `<span>${tt('Total Amount')}</span><span class="ms-5" style="float: inline-end">${displayTotalAmount}</span><br/>`
|
||||
+ '</div>' + tooltip;
|
||||
}
|
||||
|
||||
if (params.length && params[0] && params[0].name) {
|
||||
tooltip = `${params[0].name}<br/>` + tooltip;
|
||||
}
|
||||
|
||||
return tooltip;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
type: 'scroll',
|
||||
top: 0,
|
||||
data: allSeries.value.map(item => item.name),
|
||||
selected: selectedLegends.value,
|
||||
textStyle: {
|
||||
color: isDarkMode.value ? '#eee' : '#333'
|
||||
},
|
||||
formatter: (id: string) => {
|
||||
return itemsMap.value[id] && props.nameField && itemsMap.value[id][props.nameField] ? getItemName(itemsMap.value[id][props.nameField] as string) : id;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: yAxisWidth.value,
|
||||
right: 20,
|
||||
bottom: 40
|
||||
},
|
||||
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.defaultCurrency);
|
||||
}
|
||||
},
|
||||
axisPointer: {
|
||||
label: {
|
||||
formatter: (params: CallbackDataParams) => {
|
||||
return formatAmountToLocalizedNumeralsWithCurrency(Math.trunc(params.value as number), props.defaultCurrency);
|
||||
}
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: isDarkMode.value ? '#4f4f4f' : '#e1e6f2',
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: allSeries.value
|
||||
};
|
||||
});
|
||||
|
||||
function clickItem(e: ECElementEvent): void {
|
||||
if (!props.enableClickItem || e.componentType !== 'series') {
|
||||
return;
|
||||
}
|
||||
|
||||
const id = e.seriesId as string;
|
||||
const item = itemsMap.value[id] as Record<string, unknown>;
|
||||
const itemId = props.idField ? item[props.idField] as string : '';
|
||||
const dateRange = allDateRanges.value[e.dataIndex];
|
||||
function clickItem(itemId: string, categoryIndex: number): void {
|
||||
const dateRange = allDateRanges.value[categoryIndex];
|
||||
|
||||
if (!dateRange) {
|
||||
return;
|
||||
@@ -523,49 +282,10 @@ function clickItem(e: ECElementEvent): void {
|
||||
}
|
||||
|
||||
function exportData(): { headers: string[], data: string[][] } {
|
||||
const headers: string[] = [];
|
||||
const data: string[][] = [];
|
||||
|
||||
headers.push(tt('Date'));
|
||||
|
||||
for (const series of allSeries.value) {
|
||||
const id = series.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 (const [displayDateRange, index] of itemAndIndex(allDisplayDateRanges.value)) {
|
||||
const row: string[] = [];
|
||||
row.push(displayDateRange);
|
||||
row.push(...allSeries.value.map(item => formatAmountToWesternArabicNumeralsWithoutDigitGrouping(item.data[index] ?? 0)));
|
||||
data.push(row);
|
||||
}
|
||||
|
||||
return {
|
||||
headers: headers,
|
||||
data: data
|
||||
};
|
||||
}
|
||||
|
||||
function onLegendSelectChanged(e: { selected: Record<string, boolean> }): void {
|
||||
selectedLegends.value = e.selected;
|
||||
return axisChart.value?.exportData() ?? { headers: [], data: [] };
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
exportData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.trends-chart-container {
|
||||
width: 100%;
|
||||
height: 720px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.trends-chart-container {
|
||||
height: 790px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -100,6 +100,7 @@ import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
|
||||
import SnackBar from '@/components/desktop/SnackBar.vue';
|
||||
import PieChartComponent from '@/components/desktop/PieChart.vue';
|
||||
import RadarChartComponent from '@/components/desktop/RadarChart.vue';
|
||||
import AxisChart from '@/components/desktop/AxisChart.vue';
|
||||
import TrendsChart from '@/components/desktop/TrendsChart.vue';
|
||||
import DateRangeSelectionDialog from '@/components/desktop/DateRangeSelectionDialog.vue';
|
||||
import MonthSelectionDialog from '@/components/desktop/MonthSelectionDialog.vue';
|
||||
@@ -544,6 +545,7 @@ app.component('ConfirmDialog', ConfirmDialog);
|
||||
app.component('SnackBar', SnackBar);
|
||||
app.component('PieChart', PieChartComponent);
|
||||
app.component('RadarChart', RadarChartComponent);
|
||||
app.component('AxisChart', AxisChart);
|
||||
app.component('TrendsChart', TrendsChart);
|
||||
app.component('DateRangeSelectionDialog', DateRangeSelectionDialog);
|
||||
app.component('MonthSelectionDialog', MonthSelectionDialog);
|
||||
|
||||
Reference in New Issue
Block a user