11import Filters from '../components/filters' ;
2+ import { Constants } from './utils/constants' ;
23const { DrilldownHeader } = require ( "../components/drilldownHeader" ) ;
34const { DataUtils } = require ( "./utils/data" ) ;
45const { UIUtils } = require ( "./utils/ui" ) ;
@@ -25,17 +26,21 @@ class TechReport {
2526 this . initializePage ( ) ;
2627 this . getAllMetricData ( ) ;
2728 this . bindSettingsListeners ( ) ;
29+ this . initializeAccessibility ( ) ;
2830 }
2931
3032 // Initialize the sections for the different pages
3133 initializePage ( ) {
34+ this . updateStyling ( ) ;
35+
3236 switch ( this . pageId ) {
3337 case 'landing' :
3438 this . initializeLanding ( ) ;
3539 break ;
3640
3741 case 'drilldown' :
3842 this . initializeReport ( ) ;
43+ this . getTechInfo ( ) ;
3944 break ;
4045
4146 case 'comparison' :
@@ -44,18 +49,14 @@ class TechReport {
4449 }
4550 }
4651
47- // TODO
48- initializeLanding ( ) {
49- }
50-
51- // TODO
52- initializeReport ( ) {
53- // TODO: Move to function
52+ // Load accessibility/themeing info
53+ initializeAccessibility ( ) {
54+ // Show indicators?
5455 const showIndicators = localStorage . getItem ( 'showIndicators' ) ;
5556 document . querySelector ( 'main' ) . dataset . showIndicators = showIndicators ;
5657 document . querySelector ( '#indicators-check' ) . checked = showIndicators === 'true' ;
5758
58- // TODO: Move to function
59+ // Dark or light mode?
5960 const theme = localStorage . getItem ( 'haTheme' ) ;
6061 document . querySelector ( 'html' ) . dataset . theme = theme ;
6162 const btn = document . querySelector ( '.theme-switcher' ) ;
@@ -64,7 +65,13 @@ class TechReport {
6465 } else if ( theme === 'light' ) {
6566 btn . innerHTML = '🌚 Switch to dark theme' ;
6667 }
68+ }
6769
70+ initializeLanding ( ) {
71+ }
72+
73+ // TODO
74+ initializeReport ( ) {
6875 const sections = document . querySelectorAll ( '[data-type="section"]' ) ;
6976 // TODO: add general config too
7077 sections . forEach ( section => {
@@ -79,7 +86,6 @@ class TechReport {
7986 } ) ;
8087
8188 this . bindClientListener ( ) ;
82- this . updateStyling ( ) ;
8389 }
8490
8591 // Watch for changes in the client dropdown
@@ -174,8 +180,6 @@ class TechReport {
174180 } ,
175181 ] ;
176182
177- const base = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1' ;
178-
179183 const technology = technologies . join ( '%2C' )
180184 . replaceAll ( " " , "%20" ) ;
181185
@@ -186,18 +190,21 @@ class TechReport {
186190 technologies . forEach ( tech => allResults [ tech ] = [ ] ) ;
187191
188192 Promise . all ( apis . map ( api => {
189- const url = `${ base } ${ api . endpoint } ${ technology } ${ geo } ${ rank } ;
193+ const url = `${ Constants . apiBase } ${ api . endpoint } ${ technology } ${ geo } ${ rank } ;
190194
191195 return fetch ( url )
192196 . then ( result => result . json ( ) )
193197 . then ( result => {
198+ // Loop through all the rows of the API result
194199 result . forEach ( row => {
195200 const parsedRow = {
196201 ...row ,
197202 }
198203
204+ // Parse the data and add it to the results
199205 if ( api . parse ) {
200- parsedRow [ api . metric ] = api . parse ( parsedRow [ api . metric ] , parsedRow ?. date ) ;
206+ const metric = parsedRow [ api . metric ] || parsedRow ;
207+ parsedRow [ api . metric ] = api . parse ( metric , parsedRow ?. date ) ;
201208 }
202209
203210 const resIndex = allResults [ row . technology ] . findIndex ( res => res . date === row . date ) ;
@@ -217,6 +224,37 @@ class TechReport {
217224 } ) ;
218225 }
219226
227+ // Get the information about the selected technology
228+ getTechInfo ( ) {
229+ const technologies = this . filters . app ;
230+ const technology = technologies . join ( '%2C' )
231+ . replaceAll ( " " , "%20" ) ;
232+
233+ const url = `${ Constants . apiBase } ${ technology } ;
234+
235+ fetch ( url )
236+ . then ( result => result . json ( ) )
237+ . then ( result => {
238+ const techInfo = result [ 0 ] ;
239+
240+ const categoryListEl = document . getElementsByClassName ( 'category-list' ) [ 0 ] ;
241+ categoryListEl . innerHTML = '' ;
242+
243+ const categories = techInfo && techInfo . category ? techInfo . category . split ( ', ' ) : [ ] ;
244+ categories . forEach ( category => {
245+ const categoryItemEl = document . createElement ( 'li' ) ;
246+ categoryItemEl . className = 'cell' ;
247+ categoryItemEl . textContent = category ;
248+ categoryListEl . append ( categoryItemEl ) ;
249+ } ) ;
250+
251+ const descriptionEl = document . createElement ( 'p' ) ;
252+ descriptionEl . className = 'tech-description' ;
253+ descriptionEl . textContent = techInfo ?. description ;
254+ categoryListEl . after ( descriptionEl ) ;
255+ } ) ;
256+ }
257+
220258 // Update components and sections that are relevant to the current page
221259 updateComponents ( data ) {
222260 switch ( this . pageId ) {
@@ -239,12 +277,11 @@ class TechReport {
239277 // Fetch the data for the filter dropdowns
240278 getFilterInfo ( ) {
241279 const filterData = { } ;
242- const base = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1' ;
243280
244281 const filterApis = [ 'categories' , 'technologies' , 'ranks' , 'geos' ] ;
245282
246283 Promise . all ( filterApis . map ( api => {
247- const url = `${ base } ${ api } ;
284+ const url = `${ Constants . apiBase } ${ api } ;
248285
249286 return fetch ( url )
250287 . then ( result => result . json ( ) )
0 commit comments