Skip to content

Commit 4700446

Browse files
mayswindmayswind
committed
use for-of statements to replace for and for-in
1 parent 67bc81d commit 4700446

38 files changed

+389
-597
lines changed

‎src/components/base/AccountBalanceTrendsChartBase.ts‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,7 @@ export function useAccountBalanceTrendsChartBase(props: CommonAccountBalanceTren
6969
let minUnixTimeClosingBalance = 0;
7070
let maxUnixTimeClosingBalance = 0;
7171

72-
for (let i = 0; i < props.items.length; i++) {
73-
const item = props.items[i];
74-
72+
for (const item of props.items) {
7573
if (item.time < minUnixTime) {
7674
minUnixTime = item.time;
7775
minUnixTimeOpeningBalance = item.accountOpeningBalance;
@@ -120,8 +118,7 @@ export function useAccountBalanceTrendsChartBase(props: CommonAccountBalanceTren
120118

121119
const dayDataItemsMap: Record<number, TransactionReconciliationStatementResponseItem[]> = {};
122120

123-
for (let i = 0; i < props.items.length; i++) {
124-
const dateItem = props.items[i];
121+
for (const dateItem of props.items) {
125122
let dateRangeMinUnixTime = 0;
126123

127124
if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
@@ -149,8 +146,7 @@ export function useAccountBalanceTrendsChartBase(props: CommonAccountBalanceTren
149146
let lastMedianBalance = lastClosingBalance;
150147
let lastAverageBalance = lastClosingBalance;
151148

152-
for (let i = 0; i < allDateRanges.value.length; i++) {
153-
const dateRange = allDateRanges.value[i];
149+
for (const dateRange of allDateRanges.value) {
154150
const dataItems = dayDataItemsMap[dateRange.minUnixTime];
155151

156152
let displayDate = '';
@@ -176,11 +172,11 @@ export function useAccountBalanceTrendsChartBase(props: CommonAccountBalanceTren
176172
return data1.time - data2.time;
177173
});
178174

179-
const openingBalance = dataItems[0].accountOpeningBalance;
180-
const closingBalance = dataItems[dataItems.length - 1].accountClosingBalance;
175+
const openingBalance = dataItems[0]!.accountOpeningBalance;
176+
const closingBalance = dataItems[dataItems.length - 1]!.accountClosingBalance;
181177
const minimumBalance = Math.min(...dataItems.map(item => item.accountClosingBalance));
182178
const maximumBalance = Math.max(...dataItems.map(item => item.accountClosingBalance));
183-
const medianBalance = dataItems[Math.floor(dataItems.length / 2)].accountClosingBalance;
179+
const medianBalance = dataItems[Math.floor(dataItems.length / 2)]!.accountClosingBalance;
184180
const averageBalance = Math.trunc(sumAmounts(dataItems.map(item => item.accountClosingBalance)) / dataItems.length);
185181

186182
if (props.account.isAsset) {

‎src/components/base/DateRangeSelectionBase.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,11 @@ export function useDateRangeSelectionBase(props: CommonDateRangeSelectionProps)
5656

5757
const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
5858
const beginDateTime = computed<string>(() => {
59-
const actualBeginUnixTime = getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateRange.value[0]), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
59+
const actualBeginUnixTime = getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateRange.value[0] as Date), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
6060
return formatUnixTimeToLongDateTime(actualBeginUnixTime);
6161
});
6262
const endDateTime = computed<string>(() => {
63-
const actualEndUnixTime = getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateRange.value[1]), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
63+
const actualEndUnixTime = getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateRange.value[1] as Date), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
6464
return formatUnixTimeToLongDateTime(actualEndUnixTime);
6565
});
6666
const presetRanges = computed<PresetDateRange[]>(() => {

‎src/components/base/ItemIconBase.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,23 +42,27 @@ export function useItemIconBase(props: CommonIconProps) {
4242
iconId = iconId.toString();
4343
}
4444

45-
if (!ALL_ACCOUNT_ICONS[iconId]) {
45+
const iconInfo = ALL_ACCOUNT_ICONS[iconId];
46+
47+
if (!iconInfo) {
4648
return DEFAULT_ACCOUNT_ICON.icon;
4749
}
4850

49-
return ALL_ACCOUNT_ICONS[iconId].icon;
51+
return iconInfo.icon;
5052
}
5153

5254
function getCategoryIcon(iconId: string | number): string {
5355
if (isNumber(iconId)) {
5456
iconId = iconId.toString();
5557
}
5658

57-
if (!ALL_CATEGORY_ICONS[iconId]) {
59+
const iconInfo = ALL_CATEGORY_ICONS[iconId];
60+
61+
if (!iconInfo) {
5862
return DEFAULT_CATEGORY_ICON.icon;
5963
}
6064

61-
return ALL_CATEGORY_ICONS[iconId].icon;
65+
return iconInfo.icon;
6266
}
6367

6468
function getAccountIconStyle(color?: ColorValue, defaultColor?: ColorStyleValue, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {

‎src/components/base/MonthRangeSelectionBase.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,8 @@ export function useMonthRangeSelectionBase(props: CommonMonthRangeSelectionProps
5757
maxDate
5858
]);
5959

60-
const beginDateTime = computed<string>(() => formatUnixTimeToGregorianLikeLongYearMonth(getYearMonthFirstUnixTime(dateRange.value[0])));
61-
const endDateTime = computed<string>(() => formatUnixTimeToGregorianLikeLongYearMonth(getYearMonthLastUnixTime(dateRange.value[1])));
60+
const beginDateTime = computed<string>(() => formatUnixTimeToGregorianLikeLongYearMonth(getYearMonthFirstUnixTime(dateRange.value[0] as Year0BasedMonth)));
61+
const endDateTime = computed<string>(() => formatUnixTimeToGregorianLikeLongYearMonth(getYearMonthLastUnixTime(dateRange.value[1] as Year0BasedMonth)));
6262

6363
function getFinalMonthRange(): { minYearMonth: TextualYearMonth | '', maxYearMonth: TextualYearMonth | '' } | null {
6464
if (!dateRange.value[0] || !dateRange.value[1]) {
@@ -69,8 +69,8 @@ export function useMonthRangeSelectionBase(props: CommonMonthRangeSelectionProps
6969
throw new Error('Date is too early');
7070
}
7171

72-
const minYearMonth = getYearMonthStringFromYear0BasedMonthObject(dateRange.value[0]);
73-
const maxYearMonth = getYearMonthStringFromYear0BasedMonthObject(dateRange.value[1]);
72+
const minYearMonth = getYearMonthStringFromYear0BasedMonthObject(dateRange.value[0] as Year0BasedMonth);
73+
const maxYearMonth = getYearMonthStringFromYear0BasedMonthObject(dateRange.value[1] as Year0BasedMonth);
7474

7575
return {
7676
minYearMonth,

‎src/components/common/DateTimePicker.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ function getDisplayYear(year: number): string {
146146
147147
function getDisplayMonth(month: number): string {
148148
if (isArray(dateTime.value)) {
149-
return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value[0].getFullYear(), month + 1, 1).getUnixTime(), actualNumeralSystem.value);
149+
return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value[0]!.getFullYear(), month + 1, 1).getUnixTime(), actualNumeralSystem.value);
150150
} else if (dateTime.value) {
151151
return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value.getFullYear(), month + 1, 1).getUnixTime(), actualNumeralSystem.value);
152152
} else {

‎src/components/common/MonthPicker.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ function getDisplayYear(year: number): string {
102102
103103
function getDisplayMonth(month: number): string {
104104
if (isArray(dateTime.value)) {
105-
return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value[0].year, month + 1, 1).getUnixTime());
105+
return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value[0]!.year, month + 1, 1).getUnixTime());
106106
} else {
107107
return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value.year, month + 1, 1).getUnixTime());
108108
}

‎src/components/desktop/AccountBalanceTrendsChart.vue‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,15 @@ import { useTheme } from 'vuetify';
88
import type { CallbackDataParams } from 'echarts/types/dist/shared';
99
1010
import { useI18n } from '@/locales/helpers.ts';
11-
import { type CommonAccountBalanceTrendsChartProps, useAccountBalanceTrendsChartBase } from '@/components/base/AccountBalanceTrendsChartBase.ts'
11+
import {
12+
type AccountBalanceTrendsChartItem,
13+
type CommonAccountBalanceTrendsChartProps,
14+
useAccountBalanceTrendsChartBase
15+
} from '@/components/base/AccountBalanceTrendsChartBase.ts'
1216
1317
import { useUserStore } from '@/stores/user.ts';
1418
15-
import type { NameValue } from '@/core/base.ts';
19+
import { type NameValue, itemAndIndex } from '@/core/base.ts';
1620
import { TextDirection } from '@/core/text.ts';
1721
import type { ColorStyleValue } from '@/core/color.ts';
1822
import { ThemeType } from '@/core/theme.ts';
@@ -83,9 +87,7 @@ const allSeries = computed<AccountBalanceTrendsChartDataItem[]>(() => {
8387
series.itemStyle.borderColor0 = expenseIncomeAmountColor.expenseAmountColor;
8488
}
8589
86-
for (let i = 0; i < allDataItems.value.length; i++) {
87-
const item = allDataItems.value[i];
88-
90+
for (const item of allDataItems.value) {
8991
if (props.type === AccountBalanceTrendChartType.Candlestick.type) {
9092
series.data.push([
9193
item.openingBalance,
@@ -110,13 +112,12 @@ const yAxisWidth = computed<number>(() => {
110112
return width;
111113
}
112114
113-
for (let i = 0; i < allSeries.value.length; i++) {
114-
for (let j = 0; j < allSeries.value[i].data.length; j++) {
115-
const data = allSeries.value[i].data[j];
115+
for (const series of allSeries.value) {
116+
for (const data of series.data) {
116117
let value: number;
117118
118119
if (isArray(data)) {
119-
value = data[1]; // for candlestick, use closing balance
120+
value = data[1] as number; // for candlestick, use closing balance
120121
} else {
121122
value = data as number; // for line or bar chart
122123
}
@@ -172,8 +173,8 @@ const chartOptions = computed<object>(() => {
172173
},
173174
formatter: (params: CallbackDataParams[]) => {
174175
if (props.type === AccountBalanceTrendChartType.Candlestick.type) {
175-
const dataIndex = params[0].dataIndex;
176-
const dataItem = allDataItems.value[dataIndex];
176+
const dataIndex = params[0]!.dataIndex;
177+
const dataItem = allDataItems.value[dataIndex] as AccountBalanceTrendsChartItem;
177178
const displayItems: NameValue[] = [
178179
{
179180
name: tt('Opening Balance'),
@@ -201,20 +202,20 @@ const chartOptions = computed<object>(() => {
201202
}
202203
];
203204
204-
let tooltip = `${params[0].name} ${props.legendName}<br/>`;
205+
let tooltip = `${params[0]!.name} ${props.legendName}<br/>`;
205206
206-
for (let i = 0; i < displayItems.length; i++) {
207-
tooltip += `<div><span class="chart-pointer" style="background-color: #${DEFAULT_CHART_COLORS[i]}"></span>`
208-
+ `<span>${displayItems[i].name}</span><span class="ms-5" style="float: inline-end">${displayItems[i].value}</span><br/>`
207+
for (const [displayItem, index] of itemAndIndex(displayItems)) {
208+
tooltip += `<div><span class="chart-pointer" style="background-color: #${DEFAULT_CHART_COLORS[index]}"></span>`
209+
+ `<span>${displayItem.name}</span><span class="ms-5" style="float: inline-end">${displayItem.value}</span><br/>`
209210
+ `</div>`;
210211
}
211212
212213
return tooltip;
213214
} else {
214-
const amount = params[0].data as number;
215+
const amount = params[0]!.data as number;
215216
const value = formatAmountToLocalizedNumeralsWithCurrency(amount, props.account.currency);
216217
217-
return `${params[0].name}<br/>`
218+
return `${params[0]!.name}<br/>`
218219
+ '<div><span class="chart-pointer" style="background-color: #' + DEFAULT_CHART_COLORS[0] + '"></span>'
219220
+ `<span>${props.legendName}</span><span class="ms-5" style="float: inline-end">${value}</span><br/>`
220221
+ '</div>';

‎src/components/desktop/MonthlyTrendsChart.vue‎

Lines changed: 27 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { type CommonMonthlyTrendsChartProps, type MonthlyTrendsBarChartClickEven
1414
1515
import { useUserStore } from '@/stores/user.ts';
1616
17+
import { itemAndIndex } from '@/core/base.ts';
1718
import { TextDirection } from '@/core/text.ts';
1819
import { type Year1BasedMonth, DateRangeScene } from '@/core/datetime.ts';
1920
import type { ColorStyleValue } from '@/core/color.ts';
@@ -100,8 +101,7 @@ const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType
100101
const itemsMap = computed<Record<string, Record<string, unknown>>>(() => {
101102
const map: Record<string, Record<string, unknown>> = {};
102103
103-
for (let i = 0; i < props.items.length; i++) {
104-
const item = props.items[i];
104+
for (const item of props.items) {
105105
let id: string = '';
106106
107107
if (props.idField && item[props.idField]) {
@@ -135,9 +135,7 @@ const itemsMap = computed<Record<string, Record<string, unknown>>>(() => {
135135
const allDisplayDateRanges = computed<string[]>(() => {
136136
const allDisplayDateRanges: string[] = [];
137137
138-
for (let i = 0; i < allDateRanges.value.length; i++) {
139-
const dateRange = allDateRanges.value[i];
140-
138+
for (const dateRange of allDateRanges.value) {
141139
if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
142140
allDisplayDateRanges.push(formatUnixTimeToGregorianLikeShortYear(dateRange.minUnixTime));
143141
} else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type && 'year' in dateRange) {
@@ -155,18 +153,15 @@ const allDisplayDateRanges = computed<string[]>(() => {
155153
const allSeries = computed<MonthlyTrendsChartDataItem[]>(() => {
156154
const allSeries: MonthlyTrendsChartDataItem[] = [];
157155
158-
for (let i = 0; i < props.items.length; i++) {
159-
const item = props.items[i];
160-
156+
for (const [item, index] of itemAndIndex(props.items)) {
161157
if (props.hiddenField && item[props.hiddenField]) {
162158
continue;
163159
}
164160
165161
const allAmounts: number[] = [];
166162
const dateRangeAmountMap: Record<string, YearMonthDataItem[]> = {};
167163
168-
for (let j = 0; j < item.items.length; j++) {
169-
const dataItem = item.items[j];
164+
for (const dataItem of item.items) {
170165
let dateRangeKey = '';
171166
172167
if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
@@ -189,8 +184,7 @@ const allSeries = computed<MonthlyTrendsChartDataItem[]>(() => {
189184
dateRangeAmountMap[dateRangeKey] = dataItems;
190185
}
191186
192-
for (let j = 0; j < allDateRanges.value.length; j++) {
193-
const dateRange = allDateRanges.value[j];
187+
for (const dateRange of allDateRanges.value) {
194188
let dateRangeKey = '';
195189
196190
if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
@@ -207,9 +201,7 @@ const allSeries = computed<MonthlyTrendsChartDataItem[]>(() => {
207201
const dataItems = dateRangeAmountMap[dateRangeKey];
208202
209203
if (isArray(dataItems)) {
210-
for (let i = 0; i < dataItems.length; i++) {
211-
const dataItem = dataItems[i];
212-
204+
for (const dataItem of dataItems) {
213205
if (isNumber(dataItem[props.valueField])) {
214206
amount += dataItem[props.valueField] as number;
215207
}
@@ -223,7 +215,7 @@ const allSeries = computed<MonthlyTrendsChartDataItem[]>(() => {
223215
id: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
224216
name: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
225217
itemStyle: {
226-
color: getDisplayColor(props.colorField && item[props.colorField] ? item[props.colorField] as string : DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length]),
218+
color: getDisplayColor(props.colorField && item[props.colorField] ? item[props.colorField] as string : DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length]),
227219
},
228220
selected: true,
229221
type: 'line',
@@ -253,10 +245,9 @@ const yAxisWidth = computed<number>(() => {
253245
return width;
254246
}
255247
256-
for (let i = 0; i < allSeries.value.length; i++) {
257-
for (let j = 0; j < allSeries.value[i].data.length; j++) {
258-
const value = allSeries.value[i].data[j];
259248
249+
for (const series of allSeries.value) {
250+
for (const value of series.data) {
260251
if (value > maxValue) {
261252
maxValue = value;
262253
}
@@ -311,12 +302,12 @@ const chartOptions = computed<object>(() => {
311302
let totalAmount = 0;
312303
const displayItems: MonthlyTrendsChartTooltipItem[] = [];
313304
314-
for (let i = 0; i < params.length; i++) {
315-
const id = params[i].seriesId as string;
305+
for (const param of params) {
306+
const id = param.seriesId as string;
316307
const name = itemsMap.value[id] && props.nameField && itemsMap.value[id][props.nameField] ? getItemName(itemsMap.value[id][props.nameField] as string) : id;
317-
const color = params[i].color;
308+
const color = param.color;
318309
const displayOrders = itemsMap.value[id] && props.displayOrdersField && itemsMap.value[id][props.displayOrdersField] ? itemsMap.value[id][props.displayOrdersField] as number[] : [0];
319-
const amount = params[i].data as number;
310+
const amount = param.data as number;
320311
321312
displayItems.push({
322313
name: name,
@@ -330,9 +321,7 @@ const chartOptions = computed<object>(() => {
330321
331322
sortStatisticsItems(displayItems, props.sortingType);
332323
333-
for (let i = 0; i < displayItems.length; i++) {
334-
const item = displayItems[i];
335-
324+
for (const item of displayItems) {
336325
if (displayItems.length === 1 || item.totalAmount !== 0) {
337326
const value = formatAmountToLocalizedNumeralsWithCurrency(item.totalAmount, props.defaultCurrency);
338327
tooltip += '<div><span class="chart-pointer" style="background-color: ' + item.color + '"></span>';
@@ -349,7 +338,7 @@ const chartOptions = computed<object>(() => {
349338
+ '</div>' + tooltip;
350339
}
351340
352-
if (params.length && params[0].name) {
341+
if (params.length && params[0] && params[0].name) {
353342
tooltip = `${params[0].name}<br/>` + tooltip;
354343
}
355344
@@ -410,9 +399,14 @@ function clickItem(e: ECElementEvent): void {
410399
}
411400
412401
const id = e.seriesId as string;
413-
const item = itemsMap.value[id];
402+
const item = itemsMap.value[id] as Record<string, unknown>;
414403
const itemId = props.idField ? item[props.idField] as string : '';
415404
const dateRange = allDateRanges.value[e.dataIndex];
405+
406+
if (!dateRange) {
407+
return;
408+
}
409+
416410
let minUnixTime = dateRange.minUnixTime;
417411
let maxUnixTime = dateRange.maxUnixTime;
418412
@@ -450,16 +444,16 @@ function exportData(): { headers: string[], data: string[][] } {
450444
451445
headers.push(tt('Date'));
452446
453-
for (let i = 0; i < allSeries.value.length; i++) {
454-
const id = allSeries.value[i].id;
447+
for (const series of allSeries.value) {
448+
const id = series.id;
455449
const name = itemsMap.value[id] && props.nameField && itemsMap.value[id][props.nameField] ? getItemName(itemsMap.value[id][props.nameField] as string) : id;
456450
headers.push(name);
457451
}
458452
459-
for (let i = 0; i < allDisplayDateRanges.value.length; i++) {
453+
for (const [displayDateRange, index] of itemAndIndex(allDisplayDateRanges.value)) {
460454
const row: string[] = [];
461-
row.push(allDisplayDateRanges.value[i]);
462-
row.push(...allSeries.value.map(item => formatAmountToWesternArabicNumeralsWithoutDigitGrouping(item.data[i])));
455+
row.push(displayDateRange);
456+
row.push(...allSeries.value.map(item => formatAmountToWesternArabicNumeralsWithoutDigitGrouping(item.data[index] ?? 0)));
463457
data.push(row);
464458
}
465459

0 commit comments

Comments
 (0)