Add a new level in drilldown by Package Type (#367)

* [Highcharts] Improve tests & avoid warnings

* Add a small test on Trends component

* Standar --fix

* Add new level in drilldown

* compute sum

* Rename and change function name

* Rename function & try to improve name

* Improve displayed name

* Split by artifacts & improve names

* Detect Mac installer

src/Graph/ColumnDrilldown.tsx

@@ -4,6 +4,7 @@ import HighchartsReact from 'highcharts-react-official';
 import drilldown from 'highcharts/modules/drilldown';
 import './Graph.css';
 import { api } from '../api';
+import {splitDrilldownSeriesByArtifacts} from '../utils'
 
 drilldown(Highcharts);
 
@@ -60,7 +61,8 @@ export default class ColumnDrilldown extends Component<ColumnDrilldownProps, Col
     const { data } = this.props;
     if (data) {
       const drilldownSeries: DrilldownItem[] = [];
-      const secondLevelDrilldownSeries: DrilldownSeries[] = [];
+      const archLevelDrilldownSeries: DrilldownSeries[] = [];
+
       const seriesDataPromises: Promise<DrilldownData | null>[] = Object.keys(data).map(async key => {
         const apiData = await api.downloads(key);
         if (!apiData) return null;
@@ -74,21 +76,37 @@ export default class ColumnDrilldown extends Component<ColumnDrilldownProps, Col
               drilldown: secondLevelApiKey,
             };
           });
-          secondLevelDrilldownSeries.push({
+
+          const r = splitDrilldownSeriesByArtifacts(secondLevelDrilldownSeriesData);
+          archLevelDrilldownSeries.push({
             name: apiDataKey,
             id: apiDataKey,
-            data: secondLevelDrilldownSeriesData,
+            data: Object.keys(r.artifacts).sort((a, b) => a.localeCompare(b)).map(val => {
+              return {
+                name: val,
+                y: r.artifacts[val].data.reduce((a, b) => a + b.y || 0, 0),
+                drilldown: `${apiDataKey}-${val}`
+              }
+            })
           });
-
+
+          Object.keys(r.artifacts).forEach(val => {
+            archLevelDrilldownSeries.push({
+              name: `${apiDataKey}-${val}`,
+              id: `${apiDataKey}-${val}`,
+              data: r.artifacts[val].data.sort((a, b) => a.name.localeCompare(b.name))
+            });
+          });
+
           return {
             name: apiDataKey,
             y: apiData[apiDataKey],
             drilldown: apiDataKey,
           };
         });
-
+
+        // this get all primary level keys: JDK21, JDK20...
         const drilldownSeriesData = await Promise.all(drilldownDataPromises);
-
         drilldownSeries.push({
           name: `JDK${key}`,
           id: key,
@@ -103,13 +121,14 @@ export default class ColumnDrilldown extends Component<ColumnDrilldownProps, Col
       });
 
       const seriesData = (await Promise.all(seriesDataPromises)).filter(Boolean) as DrilldownData[];
-      
-      drilldownSeries.push(...secondLevelDrilldownSeries)
+
+      drilldownSeries.push(...archLevelDrilldownSeries)
       this.setState({
         seriesData,
-        drilldownSeries: [...drilldownSeries, ...secondLevelDrilldownSeries],
+        drilldownSeries: [...drilldownSeries, ...archLevelDrilldownSeries],
       });
     }
+
   }
 
   render() {
@@ -129,7 +148,10 @@ export default class ColumnDrilldown extends Component<ColumnDrilldownProps, Col
         useHTML: true
       },
       xAxis: {
-        type: 'category'
+        type: 'category',
+        labels: {
+          autoRotation: [-10, -20, -30, -45]
+        }
       },
       yAxis: {
         title: {

src/Graph/LineChart.tsx

@@ -31,12 +31,17 @@ const LineChart: FC<LineChartProps> = ({ series, categories, name }) => {
         text: 'Downloads',
       },
     },
+    tooltip: {
+      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
+      footerFormat: '</table>',
+      shared: true,
+      useHTML: true
+    },
     plotOptions: {
       line: {
         dataLabels: {
           enabled: true,
         },
-        enableMouseTracking: false,
       },
     },
     series,

src/utils.js

@@ -30,3 +30,53 @@ export const parse = query => {
 export const formatNum = number => {
   return number.toLocaleString(navigator.language)
 }
+
+export const splitDrilldownSeriesByArtifacts = (data) => {
+  const mArtifacts = new Map()
+
+  data.forEach((entry) => {
+    const { artifact, name } = getArtifactAndFormattedName(entry)
+
+    if (artifact !== undefined && name !== undefined) {
+      // add a name field
+      entry.name = name
+
+      if (!mArtifacts.has(artifact)) mArtifacts.set(artifact, { name: artifact, id: artifact, data: [] })
+
+      mArtifacts.get(artifact).data.push(entry)
+    }
+  })
+
+  return {
+    artifacts: Object.fromEntries(mArtifacts)
+  }
+}
+
+/**
+ * what = tokens[0]
+ * arch = tokens[1]
+ * os =  tokens[2]
+ * hotspot = tokens[3]
+ * version = tokens[4]
+ */
+const getArtifactAndFormattedName = (entry) => {
+  const tokens = entry.name.split('_')
+
+  if (tokens.length > 0 && tokens[0].endsWith('sources')) {
+    return { artifact: 'sources', name: 'sources' }
+  } else if (tokens.length >= 5) {
+    const artifact = tokens[0].slice(tokens[0].indexOf('-') + 1)
+    const name = (entry.name.endsWith('.msi') || entry.name.endsWith('.pkg'))
+      ? `${capitalizeFirst(tokens[2])} (${capitalizeFirst(tokens[1])} / installer)`
+      : `${capitalizeFirst(tokens[2])} (${capitalizeFirst(tokens[1])})`
+
+    return { artifact, name }
+  } else {
+    // this should not append
+    return { artifact: undefined, name: undefined }
+  }
+}
+
+const capitalizeFirst = (text) => {
+  return text[0].toUpperCase() + text.substring(1)
+}