Fix Dashboard shows incorrect download numbers #385

src/Graph/ColumnDrilldown.tsx

@@ -9,7 +9,6 @@ import {splitDrilldownSeriesByArtifacts} from '../utils'
 drilldown(Highcharts);
 
 interface ColumnDrilldownProps {
-  data?: { [key: string]: number };
   name: string;
 }
 
@@ -58,17 +57,24 @@ export default class ColumnDrilldown extends Component<ColumnDrilldownProps, Col
   }
 
   async updateData() {
-    const { data } = this.props;
-    if (data) {
+    const availableReleases = await api.availableReleases();
+
+    if (availableReleases.available_releases) {
       const drilldownSeries: DrilldownItem[] = [];
       const archLevelDrilldownSeries: DrilldownSeries[] = [];
 
-      const seriesDataPromises: Promise<DrilldownData | null>[] = Object.keys(data).map(async key => {
+      // this step loops over all versions (e.g. "8":41425474,"11":50446738...)
+      const seriesDataPromises: Promise<DrilldownData | null>[] = availableReleases.available_releases.map(async key => {
+        // then call download data of key (e.g. https://api.adoptium.net/v3/stats/downloads/total/21)
         const apiData = await api.downloads(key);
         if (!apiData) return null;
-
+
+        // loop over all elements
         const drilldownDataPromises: Promise<DrilldownData>[] = Object.keys(apiData).map(async apiDataKey => {
+          // get data (e.g. https://api.adoptium.net/v3/stats/downloads/total/21/jdk-21+35)
           const secondLevelApiData = await api.downloads(`${key}/${apiDataKey}`);
+
+          // this returns data of each element (e.g. OpenJDK20U-jdk_x64_windows_hotspot_20.0.2_9.zip)
           const secondLevelDrilldownSeriesData: DrilldownData[] = Object.keys(secondLevelApiData).map(secondLevelApiKey => {
             return {
               name: secondLevelApiKey,
@@ -77,13 +83,15 @@ export default class ColumnDrilldown extends Component<ColumnDrilldownProps, Col
             };
           });
 
+          // this step will allocate element by level
           const r = splitDrilldownSeriesByArtifacts(secondLevelDrilldownSeriesData);
           archLevelDrilldownSeries.push({
             name: apiDataKey,
             id: apiDataKey,
             data: Object.keys(r.artifacts).sort((a, b) => a.localeCompare(b)).map(val => {
               return {
                 name: val,
+                // count number of value per level
                 y: r.artifacts[val].data.reduce((a, b) => a + b.y || 0, 0),
                 drilldown: `${apiDataKey}-${val}`
               }
@@ -94,19 +102,21 @@ export default class ColumnDrilldown extends Component<ColumnDrilldownProps, Col
             archLevelDrilldownSeries.push({
               name: `${apiDataKey}-${val}`,
               id: `${apiDataKey}-${val}`,
+              // count number of value per level
               data: r.artifacts[val].data.sort((a, b) => a.name.localeCompare(b.name))
             });
           });
 
           return {
             name: apiDataKey,
-            y: apiData[apiDataKey],
+            y: secondLevelDrilldownSeriesData.reduce((a, b) => a + b.y || 0, 0),
             drilldown: apiDataKey,
           };
         });
 
         // this get all primary level keys: JDK21, JDK20...
         const drilldownSeriesData = await Promise.all(drilldownDataPromises);
+
         drilldownSeries.push({
           name: `JDK${key}`,
           id: key,
@@ -115,7 +125,7 @@ export default class ColumnDrilldown extends Component<ColumnDrilldownProps, Col
 
         return {
           name: `JDK${key}`,
-          y: data[key],
+          y: drilldownSeriesData.reduce((a, b) => a + b.y || 0, 0),
           drilldown: key,
         };
       });
@@ -128,7 +138,6 @@ export default class ColumnDrilldown extends Component<ColumnDrilldownProps, Col
         drilldownSeries: [...drilldownSeries, ...archLevelDrilldownSeries],
       });
     }
-
   }
 
   render() {

src/Graph/Download.tsx

@@ -74,7 +74,7 @@ export default class DownloadTotal extends Component<{}, DownloadTotalState> {
           <PieChart data={totalPieChartData} name='Total Downloads' showInLegend dataLabels colors={['rgb(108,109,227)', 'rgb(254,174,98)']} />
           {/* <PieChart data={pieChartData} name="jdk8u222-b10 Downloads" /> */}
         </div>
-        <ColumnDrilldown data={data.github_downloads} name='Github Downloads' />
+        <ColumnDrilldown name='Github Release Downloads' />
       </>
     )
   }

src/Graph/Trends.tsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { api } from '../api';
-import { get } from '../utils';
 import LineChart from './LineChart';
 import BarChart from './BarChart';
 import moment from 'moment';
@@ -95,7 +94,7 @@ export default class Trends extends Component<{}, State> {
     await this.updateData(2, this.state.args2);
     await this.updateMonthlyData(this.state.monthlyArgs);
     this.setState({
-      versions: (await get('https://api.adoptium.net/v3/info/available_releases')).available_releases,
+      versions: (await api.availableReleases()).available_releases,
     });
   }
 

src/Graph/__tests__/ColumnDrilldown.test.tsx

@@ -11,18 +11,16 @@ import { api } from '../../api';
 const delay = 2000;
 
 const mock_data = {
-  "date": "2023-10-09T07:10:48Z",
-  "docker_pulls": {
-      "eclipse-temurin": 74596680
-  },
-  "github_downloads": {
-      "8": 40769834
-  },
-  "total_downloads": {
-      "docker_pulls": 74596680,
-      "github_downloads": 165154324,
-      "total": 239751004
-  }
+  "available_lts_releases": [
+      8
+  ],
+  "available_releases": [
+      8
+  ],
+  "most_recent_feature_release": 21,
+  "most_recent_feature_version": 22,
+  "most_recent_lts": 21,
+  "tip_version": 22
 }
 
 const mock_data_api_8 = {
@@ -51,8 +49,12 @@ const mock_data_api_b08 = {
 
 describe('ColumnDrilldown component', () => {
   test('renders correctly', async () => {
+    api.availableReleases = vi.fn().mockImplementation(() => {
+      return mock_data
+    });
+
     api.downloads = vi.fn().mockImplementation((arg) => {
-      if(arg === '8') return mock_data_api_8;
+      if(arg === 8) return mock_data_api_8;
       else if (arg === '8/jdk8u302-b08') return mock_data_api_b08;
       return undefined
     });
@@ -61,7 +63,7 @@ describe('ColumnDrilldown component', () => {
 
     await act(async () => {
       ({ getByText } = render(
-        <ColumnDrilldown data={mock_data.github_downloads} name='Github Downloads' />
+        <ColumnDrilldown name='Github Release Downloads' />
       ));
       setTimeout(() => { }, delay)
     });

src/Graph/__tests__/Download.test.tsx

@@ -56,12 +56,8 @@ describe('Download component', () => {
         expect(getByText('160 810 668')).toBeInTheDocument();
         expect(getByText('233 144 070')).toBeInTheDocument();
 
-        expect(queryAllByText('Github Downloads', {selector: 'text'}).length).toBe(3);
-        expect(getByText('39 821 217')).toBeInTheDocument();
-        expect(getByText('48 300 842')).toBeInTheDocument();
-        expect(getByText('45 342 098')).toBeInTheDocument();
-        expect(getByText('594 778')).toBeInTheDocument();
-
+        expect(queryAllByText('Github Downloads', {selector: 'text'}).length).toBe(2);
+        expect(queryAllByText('Github Release Downloads', {selector: 'text'}).length).toBe(1);
         expect(queryAllByText('JDK Versions', {selector: 'text'}).length).toBe(1);
     });
 });

src/api.tsx

@@ -5,5 +5,7 @@ export const api = {
   // eslint-disable-next-line camelcase
   tracking: ({ source, feature_version, jvm_impl, days, ...rest }) => get('https://api.adoptium.net/v3/stats/downloads/tracking/', { source, feature_version, jvm_impl, days, ...rest }),
   // eslint-disable-next-line camelcase
-  monthly: ({ source, feature_version, jvm_impl, ...rest }) => get('https://api.adoptium.net/v3/stats/downloads/monthly/', { source, feature_version, jvm_impl, ...rest })
+  monthly: ({ source, feature_version, jvm_impl, ...rest }) => get('https://api.adoptium.net/v3/stats/downloads/monthly/', { source, feature_version, jvm_impl, ...rest }),
+  // eslint-disable-next-line camelcase
+  availableReleases: () => get('https://api.adoptium.net/v3/info/available_releases')
 }