From a461a2e4cf928c94fb1c0e9f3e153d8b7a5c7d66 Mon Sep 17 00:00:00 2001 From: Juan Picado Date: Mon, 20 Jan 2025 20:56:43 +0100 Subject: [PATCH] chore: improve charts (#5057) chore: improve charts --- .../docusaurus-plugin-downloads/package.json | 12 ----------- pnpm-lock.yaml | 3 +++ website/package.json | 1 + .../components/Chart/NpmjsVersionsChart.tsx | 14 +++++++++---- .../Chart/VersionDownloadsChart.tsx | 21 +++++++++++++++---- website/src/components/Downloads.tsx | 21 +++++++++++-------- 6 files changed, 43 insertions(+), 29 deletions(-) diff --git a/packages/tools/docusaurus-plugin-downloads/package.json b/packages/tools/docusaurus-plugin-downloads/package.json index 9cf7056d9..a60286442 100644 --- a/packages/tools/docusaurus-plugin-downloads/package.json +++ b/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" - ] } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d80101a76..bdb495dc2 100644 --- a/pnpm-lock.yaml +++ b/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) diff --git a/website/package.json b/website/package.json index e2a8f103c..08bbe82fd 100644 --- a/website/package.json +++ b/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" diff --git a/website/src/components/Chart/NpmjsVersionsChart.tsx b/website/src/components/Chart/NpmjsVersionsChart.tsx index a67f47f4c..8b20aa0fb 100644 --- a/website/src/components/Chart/NpmjsVersionsChart.tsx +++ b/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, diff --git a/website/src/components/Chart/VersionDownloadsChart.tsx b/website/src/components/Chart/VersionDownloadsChart.tsx index f91c970d8..aabb15a01 100644 --- a/website/src/components/Chart/VersionDownloadsChart.tsx +++ b/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: { diff --git a/website/src/components/Downloads.tsx b/website/src/components/Downloads.tsx index 158a21061..68a0ceddf 100644 --- a/website/src/components/Downloads.tsx +++ b/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 => { - -
-
+ +
- -
+
- -
+
-
+
-
+
+ +
+