@@ -13,24 +13,25 @@ const props = defineProps<{
13
13
b: ArtifactDescription ;
14
14
}>();
15
15
16
- // Sort binaries first, libraries later. Then within each category, sort in descending order by size
17
- // of the original (a) artifact component.
18
- const components = Object .entries (props .a .component_sizes )
19
- .sort ((a , b ) => {
20
- const aLib = a [0 ].startsWith (" lib" );
21
- const bLib = b [0 ].startsWith (" lib" );
22
- if (aLib && ! bLib ) {
23
- return 1 ;
24
- } else if (! aLib && bLib ) {
25
- return - 1 ;
26
- } else {
27
- return b [1 ] - a [1 ];
28
- }
29
- })
30
- .map ((item ) => item [0 ]);
16
+ // Sort binaries first, libraries later. Then within each category, sort alphabetically.
17
+ const components = Object .keys (props .a .component_sizes ).sort ((a , b ) => {
18
+ const aLib = a .startsWith (" lib" );
19
+ const bLib = b .startsWith (" lib" );
20
+ if (aLib && ! bLib ) {
21
+ return 1 ;
22
+ } else if (! aLib && bLib ) {
23
+ return - 1 ;
24
+ } else {
25
+ return a .localeCompare (b );
26
+ }
27
+ });
28
+
29
+ function isLibrary(component : string ): boolean {
30
+ return component .startsWith (" lib" );
31
+ }
31
32
32
33
function formatName(component : string ): string {
33
- if (component . startsWith ( " lib " )) {
34
+ if (isLibrary ( component )) {
34
35
return ` ${component }.so ` ;
35
36
}
36
37
return component ;
@@ -85,69 +86,84 @@ function generateTitle(component: string): string {
85
86
86
87
<template >
87
88
<div class =" category-title" >Artifact component sizes</div >
88
- <table >
89
- <thead >
90
- <tr >
91
- <th >Component</ th >
92
- <th >Before </th >
93
- <th >After </th >
94
- <th >Change </th >
95
- <th >% Change </th >
96
- </ tr >
97
- </ thead >
98
- < tbody >
99
- <tr v-for = " component in components " >
100
- < td class = " component " :title = " generateTitle(component) " >
101
- {{ formatName( component) }}
102
- <Tooltip >{{ generateTitle( component) }}</ Tooltip >
103
- </ td >
104
- < td >
105
- <div class = " aligned " >
106
- {{ formatValue(a.component_sizes[component]) }}
107
- </ div >
108
- </td >
109
- <td >
110
- <div class =" aligned" >
111
- {{ formatValue(b .component_sizes[component]) }}
112
- </div >
113
- </td >
114
- <td
115
- : class ="
116
- getClass(a.component_sizes[component], b.component_sizes[component])
117
- "
118
- >
119
- <div class = " aligned " >
120
- {{
121
- formatChange (
89
+ <div class = " wrapper " >
90
+ <table >
91
+ <thead >
92
+ <tr >
93
+ <th >Component </th >
94
+ <th >Kind </th >
95
+ <th class = " aligned-header " >Before </th >
96
+ <th class = " aligned-header " >After </th >
97
+ < th class = " aligned-header " >Change</ th >
98
+ < th class = " aligned-header " >% Change</ th >
99
+ </ tr >
100
+ </ thead >
101
+ < tbody >
102
+ < tr v-for = " component in components " >
103
+ <td class = " component" >
104
+ {{ formatName(component) }}
105
+ < Tooltip >{{ generateTitle(component) }}</ Tooltip >
106
+ </ td >
107
+ < td >
108
+ {{ isLibrary(component) ? "Library" : "Binary" }}
109
+ </td >
110
+ <td >
111
+ <div class =" aligned" >
112
+ {{ formatValue(a .component_sizes[component]) }}
113
+ </div >
114
+ </td >
115
+ <td >
116
+ < div class =" aligned " >
117
+ {{ formatValue( b.component_sizes[component]) }}
118
+ </ div >
119
+ </ td >
120
+ <td
121
+ :class = "
122
+ getClass (
122
123
a.component_sizes[component],
123
124
b.component_sizes[component]
124
125
)
125
- }}
126
- </div >
127
- </td >
128
- <td
129
- :class ="
130
- getClass(a.component_sizes[component], b.component_sizes[component])
131
- "
132
- >
133
- <div class =" aligned" >
134
- {{
135
- formatPercentChange(
126
+ "
127
+ >
128
+ <div class =" aligned" >
129
+ {{
130
+ formatChange(
131
+ a.component_sizes[component],
132
+ b.component_sizes[component]
133
+ )
134
+ }}
135
+ </div >
136
+ </td >
137
+ <td
138
+ :class ="
139
+ getClass(
136
140
a.component_sizes[component],
137
141
b.component_sizes[component]
138
142
)
139
- }}
140
- </div >
141
- </td >
142
- </tr >
143
- </tbody >
144
- </table >
143
+ "
144
+ >
145
+ <div class =" aligned" >
146
+ {{
147
+ formatPercentChange(
148
+ a.component_sizes[component],
149
+ b.component_sizes[component]
150
+ )
151
+ }}
152
+ </div >
153
+ </td >
154
+ </tr >
155
+ </tbody >
156
+ </table >
157
+ </div >
145
158
</template >
146
159
147
160
<style scoped lang="scss">
161
+ .wrapper {
162
+ display : flex ;
163
+ justify-content : center ;
164
+ }
148
165
table {
149
166
table-layout : fixed ;
150
- width : 100% ;
151
167
margin-top : 10px ;
152
168
153
169
td ,
@@ -167,5 +183,8 @@ table {
167
183
width : 120px ;
168
184
}
169
185
}
186
+ .aligned-header {
187
+ text-align : right ;
188
+ }
170
189
}
171
190
</style >
0 commit comments