Limit amounts of techs shown per page

config/techreport.json

@@ -705,7 +705,6 @@
             "#E24070"
           ],
           "overrides": {
-            "WordPress": "#3858e9",
             "ALL": "#69797e"
           }
         },
@@ -719,6 +718,7 @@
           "id": "tech_comparison_summary",
           "table": {
             "caption": "Summary",
+            "prefill": "tech",
             "columns": [
               {
                 "key": "technology",
@@ -1159,14 +1159,14 @@
             "endpoint": "category",
             "metric": "origins",
             "label": "Origins",
-            "description": "Origins analyzed in this category.",
+            "description": "Total amount of origins analyzed in this category.",
             "key": "info"
           },
           {
             "endpoint": "category",
             "metric": "technologies",
             "label": "Technologies",
-            "description": "Amount of technologies in this category.",
+            "description": "Total number of technologies tagged with this category.",
             "key": "info"
           }
         ],

server/routes.py

@@ -88,12 +88,24 @@ def techreportlanding(page_id):
     # Get the filters
     requested_geo = request.args.get("geo") or "ALL"
     requested_rank = request.args.get("rank") or "ALL"
-    requested_category = request.args.get("category") or "ALL"
+    requested_category = request.args.get("category") or "CMS"
+    requested_page = request.args.get("page") or 1
+    requested_page = int(requested_page)
+    selected_techs = request.args.get("selected")
+    selected_rows = request.args.get("rows") or 10
+    selected_rows = str(selected_rows)
+
+    last_page = request.args.get("last_page") or False
+
     filters = {
         "geo": requested_geo,
         "rank": requested_rank,
         "app": requested_technologies,
         "category": requested_category,
+        "page": requested_page,
+        "last_page": last_page,
+        "selected": selected_techs,
+        "rows": selected_rows,
     }
     params = {
         "geo": requested_geo.replace(" ", "+"),

src/js/components/filters.js

@@ -78,36 +78,31 @@ class Filters {
 
   /* Update the list of technologies */
   updateTechnologies() {
-    this.technologies = DataUtils.filterDuplicates(this.technologies, 'technology');
-
     /* Get existing tech selectors on the page */
     const allTechSelectors = document.querySelectorAll('select[name="tech"]');
-    const techNames = this.technologies.map(element => element.app);
 
     /* Update the options inside all of the selectors */
     allTechSelectors.forEach(techSelector => {
       techSelector.innerHTML = '';
 
       /* If the technology doesn't exist, throw a warning */
-      const techNamesFiltered = techNames;
-      if(!techNamesFiltered) {
+      if(!this.technologies) {
         const errorMsg = document.createElement('p');
         errorMsg.textContent = 'Technology not found, please select a different one';
         techSelector.before(errorMsg);
       }
 
       /* Get a list of technologies */
       const techs = this.technologies;
-      techs.unshift({ technology: 'ALL' });
 
       /* Add one option per technology */
       if(document.getElementById('filter-option')) {
         techs.forEach((technology) => {
           const optionTmpl = document.getElementById('filter-option').content.cloneNode(true);
           const option = optionTmpl.querySelector('option');
-          const formattedTech = DataUtils.formatAppName(technology.technology);
+          const formattedTech = DataUtils.formatAppName(technology);
           option.textContent = formattedTech;
-          option.value = technology.technology;
+          option.value = technology;
           if(formattedTech === techSelector.getAttribute('data-selected')) {
             option.selected = true;
           }
@@ -161,17 +156,17 @@ class Filters {
 
         const all = document.createElement('option');
         all.value = 'ALL';
-        all.innerHTML = 'ALL';
+        all.textContent = 'ALL';
         select.append(all);
 
-        const sortedCategories = this.categories.sort((a, b) => a.category !== b.category ? a.category < b.category ? -1 : 1 : 0);
+        const sortedCategories = this.categories.sort((a, b) => a !== b ? a < b ? -1 : 1 : 0);
         sortedCategories.forEach((category) => {
           const option = document.createElement('option');
-          if(category.category === select.getAttribute('data-selected')) {
+          if(category === select.getAttribute('data-selected')) {
             option.selected = true;
           }
-          option.value = category.category;
-          option.innerHTML = category.category;
+          option.value = category;
+          option.textContent = category;
           select.append(option);
         });
       })

src/js/techreport/index.js

@@ -90,9 +90,8 @@ class TechReport {
         break;
 
       case 'category': {
-        const category = this.filters.category || 'CMS';
         this.initializeReport();
-        this.getCategoryData(category);
+        this.getCategoryData();
         break;
       }
     }
@@ -277,83 +276,9 @@ class TechReport {
     });
   }
 
-  getCategoryData(category) {
-    const url = `${Constants.apiBase}/categories?category=${category}`;
-    const apis = [
-      {
-        endpoint: 'cwv',
-        metric: 'vitals',
-        parse: DataUtils.parseVitalsData,
-      },
-      {
-        endpoint: 'lighthouse',
-        metric: 'lighthouse',
-        parse: DataUtils.parseLighthouseData,
-      },
-      {
-        endpoint: 'adoption',
-        metric: 'adoption',
-        parse: DataUtils.parseAdoptionData,
-      },
-      {
-        endpoint: 'page-weight',
-        metric: 'pageWeight',
-        parse: DataUtils.parsePageWeightData,
-      },
-    ];
-
-    fetch(url)
-      .then(result => result.json())
-      .then(result => {
-        const category = result[0];
-        const technologyFormatted = category?.technologies?.join('%2C')
-          .replaceAll(" ", "%20");
-
-          const geo = this.filters.geo.replaceAll(" ", "%20");
-          const rank = this.filters.rank.replaceAll(" ", "%20");
-          const geoFormatted = geo.replaceAll(" ", "%20");
-          const rankFormatted = rank.replaceAll(" ", "%20");
-
-          let allResults = {};
-          category.technologies.forEach(tech => allResults[tech] = []);
-
-          Promise.all(apis.map(api => {
-            const url = `${Constants.apiBase}/${api.endpoint}?technology=${technologyFormatted}&geo=${geoFormatted}&rank=${rankFormatted}&start=latest`;
-
-            return fetch(url)
-              .then(techResult => techResult.json())
-              .then(techResult => {
-                techResult.forEach(row => {
-                  const parsedRow = {
-                    ...row,
-                  }
-
-                  if(api.parse) {
-                    parsedRow[api.metric] = api.parse(parsedRow[api.metric], parsedRow?.date);
-                  }
-
-                  const resIndex = allResults[row.technology].findIndex(res => res.date === row.date);
-                  if(resIndex > -1) {
-                    allResults[row.technology][resIndex] = {
-                      ...allResults[row.technology][resIndex],
-                      ...parsedRow
-                    }
-                  } else {
-                    allResults[row.technology].push(parsedRow);
-                  }
-                });
-              });
-          })).then(() => {
-            category.data = {
-              technologies: allResults,
-              info: {
-                origins: category.origins,
-                technologies: Object.keys(allResults).length,
-              },
-            };
-            this.updateCategoryComponents(category);
-          });
-      });
+  getCategoryData() {
+    const callback = this.updateCategoryComponents.bind(this);
+    DataUtils.fetchCategoryData(this.filters.rows, this.filters, callback)
   }
 
   // Get the information about the selected technology
@@ -411,14 +336,31 @@ class TechReport {
   getFilterInfo() {
     const filterData = {};
 
-    const filterApis = ['categories', 'technologies', 'ranks', 'geos'];
+    const filterApis = [
+      {
+        name: 'categories',
+        endpoint: 'categories?onlyname',
+      },
+      {
+        name: 'technologies',
+        endpoint: 'technologies?onlyname',
+      },
+      {
+        name: 'ranks',
+        endpoint: 'ranks',
+      },
+      {
+        name: 'geos',
+        endpoint: 'geos',
+      },
+    ];
 
     Promise.all(filterApis.map(api => {
-      const url = `${Constants.apiBase}/${api}`;
+      const url = `${Constants.apiBase}/${api.endpoint}`;
 
       return fetch(url)
         .then(result => result.json())
-        .then(result => filterData[api] = result)
+        .then(result => filterData[api.name] = result)
         .catch(error => console.log('Something went wrong', error));
     })).then(() => {
       const FilterComponent = new Filters(filterData, this.filters);