Skip to content

Commit c77c2b3

Browse files
sarahfossheimrviscomitunetheweb
authored
Limit amounts of techs shown per page (#1007)
* custom techreport header * add prototype categories page * add filters in sidebar and change page based on amount of techs * add new nav and filter structure (wip * responsive filters prototype * wip: add collapsible filter sidebar * fix bug with double close button * add aria * add checkboxes on category page, update texts, minor bugfixes * select correct technology in comparison view, remove category selector, minor bugfixes * fix css linting * fix linting * fix linting * fix sorting order multi apps * sort table alternative correctly * close <nav> * update tests * format tests * Update src/js/techreport/tableLinked.js Co-authored-by: Rick Viscomi <rviscomi@users.noreply.github.com> * fix geo/rank bug, long category list bug, adoption bug, add category summary, improve landing page card interaction * add technologies to summary in category page * add timestamp to category page and format large numbers * remove console.log * select correct technology in comparison view filters * make menu responsive on mobile + track aria-expanded status * give remove button icon alt that matches the label * filter out data with empty content * fix linting * add width and height to close filter button * remove placeholder texts * add icons and chart to the summary tables * add descriptions to technologies * style lighthouse cards * add lighthouse progress circles to table * edit styling of the client dropdown selector * move breakdown selector to top of page * add LH circles to table alt, category descriptions, tech img * update colors and change linting * prototype 10 results at a time in the category view * add pagination info * style description * add basic skip-to-main links * paginate table and update selection correctly * update linting * linting * fix select button label bug * only fetch category and technology names in the dropdowns * prototype overview of selected techs * limit selection up to 10 and allow unselection from summary * don't programmatically set style attribute on elements that don't exist * add row selector * remove console.log * remove unused import * linting * add values to options * split up rows selector options * Update src/js/components/filters.js Co-authored-by: Barry Pollard <barry_pollard@hotmail.com> * Update src/js/components/filters.js Co-authored-by: Barry Pollard <barry_pollard@hotmail.com> * Update src/js/techreport/tableLinked.js Co-authored-by: Barry Pollard <barry_pollard@hotmail.com> * Update src/js/techreport/utils/data.js Co-authored-by: Barry Pollard <barry_pollard@hotmail.com> * use encodeURI instead of replaceAll * fix bugs, prefill table comparison view * fix indent * set lower default progress bar value --------- Co-authored-by: Rick Viscomi <rviscomi@users.noreply.github.com> Co-authored-by: Barry Pollard <barry_pollard@hotmail.com>
1 parent f02274d commit c77c2b3

File tree

13 files changed

+537
-158
lines changed

13 files changed

+537
-158
lines changed

‎config/techreport.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -705,7 +705,6 @@
705705
"#E24070"
706706
],
707707
"overrides": {
708-
"WordPress": "#3858e9",
709708
"ALL": "#69797e"
710709
}
711710
},
@@ -719,6 +718,7 @@
719718
"id": "tech_comparison_summary",
720719
"table": {
721720
"caption": "Summary",
721+
"prefill": "tech",
722722
"columns": [
723723
{
724724
"key": "technology",
@@ -1159,14 +1159,14 @@
11591159
"endpoint": "category",
11601160
"metric": "origins",
11611161
"label": "Origins",
1162-
"description": "Origins analyzed in this category.",
1162+
"description": "Total amount of origins analyzed in this category.",
11631163
"key": "info"
11641164
},
11651165
{
11661166
"endpoint": "category",
11671167
"metric": "technologies",
11681168
"label": "Technologies",
1169-
"description": "Amount of technologies in this category.",
1169+
"description": "Total number of technologies tagged with this category.",
11701170
"key": "info"
11711171
}
11721172
],

‎server/routes.py‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,12 +88,24 @@ def techreportlanding(page_id):
8888
# Get the filters
8989
requested_geo = request.args.get("geo") or "ALL"
9090
requested_rank = request.args.get("rank") or "ALL"
91-
requested_category = request.args.get("category") or "ALL"
91+
requested_category = request.args.get("category") or "CMS"
92+
requested_page = request.args.get("page") or 1
93+
requested_page = int(requested_page)
94+
selected_techs = request.args.get("selected")
95+
selected_rows = request.args.get("rows") or 10
96+
selected_rows = str(selected_rows)
97+
98+
last_page = request.args.get("last_page") or False
99+
92100
filters = {
93101
"geo": requested_geo,
94102
"rank": requested_rank,
95103
"app": requested_technologies,
96104
"category": requested_category,
105+
"page": requested_page,
106+
"last_page": last_page,
107+
"selected": selected_techs,
108+
"rows": selected_rows,
97109
}
98110
params = {
99111
"geo": requested_geo.replace(" ", "+"),

‎src/js/components/filters.js‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -78,36 +78,31 @@ class Filters {
7878

7979
/* Update the list of technologies */
8080
updateTechnologies() {
81-
this.technologies = DataUtils.filterDuplicates(this.technologies, 'technology');
82-
8381
/* Get existing tech selectors on the page */
8482
const allTechSelectors = document.querySelectorAll('select[name="tech"]');
85-
const techNames = this.technologies.map(element => element.app);
8683

8784
/* Update the options inside all of the selectors */
8885
allTechSelectors.forEach(techSelector => {
8986
techSelector.innerHTML = '';
9087

9188
/* If the technology doesn't exist, throw a warning */
92-
const techNamesFiltered = techNames;
93-
if(!techNamesFiltered) {
89+
if(!this.technologies) {
9490
const errorMsg = document.createElement('p');
9591
errorMsg.textContent = 'Technology not found, please select a different one';
9692
techSelector.before(errorMsg);
9793
}
9894

9995
/* Get a list of technologies */
10096
const techs = this.technologies;
101-
techs.unshift({ technology: 'ALL' });
10297

10398
/* Add one option per technology */
10499
if(document.getElementById('filter-option')) {
105100
techs.forEach((technology) => {
106101
const optionTmpl = document.getElementById('filter-option').content.cloneNode(true);
107102
const option = optionTmpl.querySelector('option');
108-
const formattedTech = DataUtils.formatAppName(technology.technology);
103+
const formattedTech = DataUtils.formatAppName(technology);
109104
option.textContent = formattedTech;
110-
option.value = technology.technology;
105+
option.value = technology;
111106
if(formattedTech === techSelector.getAttribute('data-selected')) {
112107
option.selected = true;
113108
}
@@ -161,17 +156,17 @@ class Filters {
161156

162157
const all = document.createElement('option');
163158
all.value = 'ALL';
164-
all.innerHTML = 'ALL';
159+
all.textContent = 'ALL';
165160
select.append(all);
166161

167-
const sortedCategories = this.categories.sort((a, b) => a.category !== b.category ? a.category < b.category ? -1 : 1 : 0);
162+
const sortedCategories = this.categories.sort((a, b) => a !== b ? a < b ? -1 : 1 : 0);
168163
sortedCategories.forEach((category) => {
169164
const option = document.createElement('option');
170-
if(category.category === select.getAttribute('data-selected')) {
165+
if(category === select.getAttribute('data-selected')) {
171166
option.selected = true;
172167
}
173-
option.value = category.category;
174-
option.innerHTML = category.category;
168+
option.value = category;
169+
option.textContent = category;
175170
select.append(option);
176171
});
177172
})

‎src/js/techreport/index.js‎

Lines changed: 24 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,8 @@ class TechReport {
9090
break;
9191

9292
case 'category': {
93-
const category = this.filters.category || 'CMS';
9493
this.initializeReport();
95-
this.getCategoryData(category);
94+
this.getCategoryData();
9695
break;
9796
}
9897
}
@@ -277,83 +276,9 @@ class TechReport {
277276
});
278277
}
279278

280-
getCategoryData(category) {
281-
const url = `${Constants.apiBase}/categories?category=${category}`;
282-
const apis = [
283-
{
284-
endpoint: 'cwv',
285-
metric: 'vitals',
286-
parse: DataUtils.parseVitalsData,
287-
},
288-
{
289-
endpoint: 'lighthouse',
290-
metric: 'lighthouse',
291-
parse: DataUtils.parseLighthouseData,
292-
},
293-
{
294-
endpoint: 'adoption',
295-
metric: 'adoption',
296-
parse: DataUtils.parseAdoptionData,
297-
},
298-
{
299-
endpoint: 'page-weight',
300-
metric: 'pageWeight',
301-
parse: DataUtils.parsePageWeightData,
302-
},
303-
];
304-
305-
fetch(url)
306-
.then(result => result.json())
307-
.then(result => {
308-
const category = result[0];
309-
const technologyFormatted = category?.technologies?.join('%2C')
310-
.replaceAll(" ", "%20");
311-
312-
const geo = this.filters.geo.replaceAll(" ", "%20");
313-
const rank = this.filters.rank.replaceAll(" ", "%20");
314-
const geoFormatted = geo.replaceAll(" ", "%20");
315-
const rankFormatted = rank.replaceAll(" ", "%20");
316-
317-
let allResults = {};
318-
category.technologies.forEach(tech => allResults[tech] = []);
319-
320-
Promise.all(apis.map(api => {
321-
const url = `${Constants.apiBase}/${api.endpoint}?technology=${technologyFormatted}&geo=${geoFormatted}&rank=${rankFormatted}&start=latest`;
322-
323-
return fetch(url)
324-
.then(techResult => techResult.json())
325-
.then(techResult => {
326-
techResult.forEach(row => {
327-
const parsedRow = {
328-
...row,
329-
}
330-
331-
if(api.parse) {
332-
parsedRow[api.metric] = api.parse(parsedRow[api.metric], parsedRow?.date);
333-
}
334-
335-
const resIndex = allResults[row.technology].findIndex(res => res.date === row.date);
336-
if(resIndex > -1) {
337-
allResults[row.technology][resIndex] = {
338-
...allResults[row.technology][resIndex],
339-
...parsedRow
340-
}
341-
} else {
342-
allResults[row.technology].push(parsedRow);
343-
}
344-
});
345-
});
346-
})).then(() => {
347-
category.data = {
348-
technologies: allResults,
349-
info: {
350-
origins: category.origins,
351-
technologies: Object.keys(allResults).length,
352-
},
353-
};
354-
this.updateCategoryComponents(category);
355-
});
356-
});
279+
getCategoryData() {
280+
const callback = this.updateCategoryComponents.bind(this);
281+
DataUtils.fetchCategoryData(this.filters.rows, this.filters, callback)
357282
}
358283

359284
// Get the information about the selected technology
@@ -411,14 +336,31 @@ class TechReport {
411336
getFilterInfo() {
412337
const filterData = {};
413338

414-
const filterApis = ['categories', 'technologies', 'ranks', 'geos'];
339+
const filterApis = [
340+
{
341+
name: 'categories',
342+
endpoint: 'categories?onlyname',
343+
},
344+
{
345+
name: 'technologies',
346+
endpoint: 'technologies?onlyname',
347+
},
348+
{
349+
name: 'ranks',
350+
endpoint: 'ranks',
351+
},
352+
{
353+
name: 'geos',
354+
endpoint: 'geos',
355+
},
356+
];
415357

416358
Promise.all(filterApis.map(api => {
417-
const url = `${Constants.apiBase}/${api}`;
359+
const url = `${Constants.apiBase}/${api.endpoint}`;
418360

419361
return fetch(url)
420362
.then(result => result.json())
421-
.then(result => filterData[api] = result)
363+
.then(result => filterData[api.name] = result)
422364
.catch(error => console.log('Something went wrong', error));
423365
})).then(() => {
424366
const FilterComponent = new Filters(filterData, this.filters);

0 commit comments

Comments
 (0)