this repo has no description
More formatting for annual report
+47
-10
+2
-2
src/locales/en.po
+2
-2
src/locales/en.po
···
2268
2268
msgstr ""
2269
2269
2270
2270
#: src/components/status.jsx:3006
2271
-
#: src/pages/annual-report.jsx:44
2271
+
#: src/pages/annual-report.jsx:46
2272
2272
msgid "Loading…"
2273
2273
msgstr ""
2274
2274
···
2410
2410
msgstr "Login required."
2411
2411
2412
2412
#: src/compose.jsx:90
2413
-
#: src/pages/annual-report.jsx:136
2413
+
#: src/pages/annual-report.jsx:165
2414
2414
#: src/pages/http-route.jsx:91
2415
2415
#: src/pages/login.jsx:270
2416
2416
msgid "Go home"
+12
-4
src/pages/annual-report.css
+12
-4
src/pages/annual-report.css
···
31
31
table {
32
32
width: 100%;
33
33
34
-
td, th {
34
+
td,
35
+
th {
35
36
vertical-align: top;
37
+
38
+
&.number {
39
+
text-align: end;
40
+
}
36
41
}
37
42
38
43
th {
···
44
49
45
50
tr > * {
46
51
border-top: 1px dashed var(--outline-color);
52
+
53
+
~ * {
54
+
padding-inline-start: 1ch;
55
+
}
47
56
}
48
57
}
49
58
···
68
77
69
78
.status {
70
79
pointer-events: none;
71
-
font-size: calc(var(--text-size) * .8);
80
+
font-size: calc(var(--text-size) * 0.8);
72
81
}
73
82
}
74
-
75
83
}
76
84
}
77
-
}
85
+
}
+33
-4
src/pages/annual-report.jsx
+33
-4
src/pages/annual-report.jsx
···
35
35
const { accounts, annualReports, statuses } = results || {};
36
36
const report = annualReports?.find((report) => report.year == year)?.data;
37
37
38
+
const datePlaceholder = new Date();
39
+
38
40
return (
39
41
<div id="annual-report-page" class="deck-container" tabIndex="-1">
40
42
<div class="report">
···
54
56
<table>
55
57
<thead>
56
58
<tr>
57
-
{Object.keys(value[0]).map((key) => (
58
-
<th>{key}</th>
59
+
{Object.entries(value[0]).map(([key, value]) => (
60
+
<th
61
+
class={
62
+
key !== 'month' && typeof value === 'number'
63
+
? 'number'
64
+
: ''
65
+
}
66
+
>
67
+
{key}
68
+
</th>
59
69
))}
60
70
</tr>
61
71
</thead>
···
63
73
{value.map((item) => (
64
74
<tr>
65
75
{Object.entries(item).map(([k, value]) => (
66
-
<td>
76
+
<td
77
+
class={
78
+
k !== 'month' && typeof value === 'number'
79
+
? 'number'
80
+
: ''
81
+
}
82
+
>
67
83
{value &&
68
84
/(accountId)/i.test(k) &&
69
85
/^(mostRebloggedAccounts|commonlyInteractedWithAccounts)$/i.test(
···
75
91
)}
76
92
showAvatar
77
93
/>
94
+
) : k === 'month' ? (
95
+
datePlaceholder.setMonth(value - 1) &&
96
+
datePlaceholder.toLocaleString(undefined, {
97
+
month: 'long',
98
+
})
99
+
) : typeof value === 'number' ? (
100
+
value.toLocaleString()
78
101
) : (
79
102
value
80
103
)}
···
112
135
{Object.entries(value).map(([k, value]) => (
113
136
<tr>
114
137
<th>{k}</th>
115
-
<td>{value}</td>
138
+
<td
139
+
class={
140
+
typeof value === 'number' ? 'number' : ''
141
+
}
142
+
>
143
+
{value}
144
+
</td>
116
145
</tr>
117
146
))}
118
147
</tbody>