chore: improve charts (#5057)

chore: improve charts

packages/tools/docusaurus-plugin-downloads/package.json

@@ -15,17 +15,5 @@
   "scripts": {
     "clean": "rimraf ./build",
     "build": "babel src/ --out-dir build/ --copy-files --extensions \".ts,.tsx\" --source-maps"
-  },
-  "browserslist": {
-    "production": [
-      ">0.5%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
   }
 }

pnpm-lock.yaml

@@ -2355,6 +2355,9 @@ importers:
       react-twitter-widgets:
         specifier: ^1.10.0
         version: 1.11.0(react@18.3.1)
+      semver:
+        specifier: 7.6.3
+        version: 7.6.3
       use-is-in-viewport:
         specifier: 1.0.9
         version: 1.0.9(react@18.3.1)

website/package.json

@@ -49,6 +49,7 @@
     "chart.js": "^4.4.7",
     "react-chartjs-2": "^5.2.0",
     "react-player": "2.14.1",
+    "semver": "7.6.3",
     "react-twitter-widgets": "^1.10.0",
     "use-is-in-viewport": "1.0.9",
     "usehooks-ts": "3.1.0"

website/src/components/Chart/NpmjsVersionsChart.tsx

@@ -10,12 +10,13 @@ import {
 } from 'chart.js';
 import React from 'react';
 import { Line } from 'react-chartjs-2';
+import semver from 'semver';
 
 import { npmjsDownloads } from '@verdaccio/local-scripts';
 
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
 
-const processData = (data) => {
+const processData = (data, { prerelease }) => {
   const labels = [];
   const datasets = {};
 
@@ -68,9 +69,14 @@ const processData = (data) => {
   Object.values(groupedByMajor).forEach((versions) => {
     versions
       .sort((a, b) => b.total - a.total)
-      .slice(0, 2)
+      .filter(({ version }) =>
+        prerelease ? semver.prerelease(version) : !semver.prerelease(version)
+      )
+      .filter(({ version }) => (prerelease ? true : semver.satisfies(version, '>2.0.0')))
+      .splice(0, prerelease ? 2 : 8)
       .forEach(({ version }) => topVersions.push(version));
   });
+  console.log('topVersions', topVersions);
 
   const filteredDatasets = topVersions.map((version) => datasets[version]);
   filteredDatasets.sort((a, b) => semverCompare(a.label, b.label));
@@ -95,8 +101,8 @@ const getRandomColor = () => {
   return color;
 };
 
-const NpmjsVersionsChart = () => {
-  const { labels, datasetArray } = processData(npmjsDownloads);
+const NpmjsVersionsChart = ({ prerelease }) => {
+  const { labels, datasetArray } = processData(npmjsDownloads, { prerelease });
   const chartData = {
     labels: labels,
     datasets: datasetArray,

website/src/components/Chart/VersionDownloadsChart.tsx

@@ -29,13 +29,20 @@ function reduceDownloads(downloads) {
 const VersionDownloadsChart = () => {
   const processedData = reduceDownloads(data);
 
-  const labels = Object.keys(processedData).map((version) => `v${version}`);
-  const dataPoints = Object.values(processedData);
+  // Filter out versions with less than 400 downloads (mostly very old deprecated versions)
+  // @ts-ignore
+  const filteredData = Object.entries(processedData).filter(([_, count]) => count > 400);
+
+  const labels = filteredData.map(([version]) => `v${version}`);
+  const dataPoints = filteredData.map(([_, count]) => count);
+
+  console.log('dataPoints', dataPoints);
+
   const chartData = {
     labels,
     datasets: [
       {
-        label: 'v6',
+        label: 'Downloads',
         data: dataPoints,
         backgroundColor: [
           'rgba(75, 192, 192, 0.6)',
@@ -64,7 +71,13 @@ const VersionDownloadsChart = () => {
         text: `Downloads by Major Version ${lastDate}`,
       },
       tooltip: {
-        enabled: true,
+        callbacks: {
+          label: function (context) {
+            const label = context.dataset.label || ''; // General label
+            const value = context.raw; // Tooltip value
+            return `${context.label}: ${value}`; // Format each tooltip item as "vX: Y"
+          },
+        },
       },
     },
     scales: {

website/src/components/Downloads.tsx

@@ -1,4 +1,5 @@
 import Translate from '@docusaurus/Translate';
+import Box from '@mui/material/Box';
 import { createTheme } from '@mui/material/styles';
 import { ThemeProvider } from '@mui/styles';
 import { makeStyles, withStyles } from '@mui/styles';
@@ -38,23 +39,25 @@ const Downloads: React.FC<{}> = (): React.ReactElement => {
               </h1>
             </header>
           </div>
-
-          <div style={{ display: 'flex', width: '80%', flexFlow: 'wrap', margin: '1rem auto' }}>
-            <div style={{ width: '80%', margin: '0 auto' }}>
+          <Box
+            sx={{ display: 'grid', gap: 3, gridTemplateColumns: 'repeat(2, 2fr)', margin: '40px' }}
+          >
+            <div style={{ width: '100%', margin: '0 auto' }}>
               <VersionDownloadsChart />
             </div>
-
-            <div style={{ width: '80%', margin: '0 auto' }}>
+            <div style={{ width: '100%', margin: '0 auto' }}>
               <DockerPullChart />
             </div>
-
-            <div style={{ width: '80%', margin: '0 auto' }}>
+            <div style={{ width: '100%', margin: '0 auto' }}>
               <DockerTotalPull />
             </div>
-            <div style={{ width: '80%', margin: '0 auto' }}>
+            <div style={{ width: '100%', margin: '0 auto' }}>
               <NpmjsVersionsChart />
             </div>
-          </div>
+            <div style={{ width: '100%', margin: '0 auto' }}>
+              <NpmjsVersionsChart prerelease />
+            </div>
+          </Box>
         </ThemeProvider>
       </Layout>
     </>