make plugin downloads page more performant

Author: mProjectsCode

website/src/components/svelte/charts/downloads/DownloadDistributionChart.svelte

@@ -1,28 +1,23 @@
 <script lang="ts">
-	import { Line, Plot, RegressionY } from 'svelteplot';
-	import type { IndividualDownloadDataPoint } from '../../../../../../data-wasm/pkg/data_wasm';
+	import { Line, Plot } from 'svelteplot';
 	import ChartWrapper from '../../ChartWrapper.svelte';
 
 	interface Props {
-		dataPoints: IndividualDownloadDataPoint[];
+		dataPoints: number[];
 	}
 
 	const { dataPoints }: Props = $props();
 
-	const mappedData = dataPoints
-		.filter(x => x.downloads > 0 && x.version_count > 0)
-		.sort((a, b) => b.downloads - a.downloads)
-		.map((point, i) => {
-			return {
-				rank: i,
-				id: point.id,
-				downloads: point.downloads,
-			};
-		});
+	const mappedData = dataPoints.map((downloads, index) => {
+		return {
+			index: index,
+			downloads: downloads,
+		};
+	});
 </script>
 
 <ChartWrapper>
 	<Plot grid x={{ label: 'Rank →', type: 'linear' }} y={{ label: '↑ Downloads', type: 'log', domain: [1, 10_000_000] }}>
-		<Line data={mappedData} x="rank" y="downloads" stroke="var(--sl-color-text-accent)" />
+		<Line data={mappedData} x="index" y="downloads" stroke="var(--sl-color-text-accent)" />
 	</Plot>
 </ChartWrapper>

website/src/components/svelte/charts/downloads/DownloadNameChart.svelte

@@ -1,26 +1,19 @@
 <script lang="ts">
 	import { Dot, GridY, Plot, RegressionY } from 'svelteplot';
-	import type { IndividualDownloadDataPoint } from '../../../../../../data-wasm/pkg/data_wasm';
 	import ChartWrapper from '../../ChartWrapper.svelte';
 
 	interface Props {
-		dataPoints: IndividualDownloadDataPoint[];
+		dataPoints: number[];
 	}
 
 	const { dataPoints }: Props = $props();
 
-	const mappedData = dataPoints
-		.filter(x => x.downloads > 0 && x.version_count > 0)
-		.sort((a, b) => a.name.localeCompare(b.name))
-		.map((point, i) => {
-			return {
-				index: i,
-				id: point.id,
-				name: point.name,
-				downloads: point.downloads ?? null,
-				version_count: point.version_count ?? null,
-			};
-		});
+	const mappedData = dataPoints.map((downloads, index) => {
+		return {
+			index: index,
+			downloads: downloads,
+		};
+	});
 </script>
 
 <ChartWrapper>

website/src/components/svelte/charts/downloads/DownloadRelationChart.svelte

@@ -1,34 +1,26 @@
 <script lang="ts">
 	import { Dot, Plot } from 'svelteplot';
-	import type { IndividualDownloadDataPoint } from '../../../../../../data-wasm/pkg/data_wasm';
 	import ChartWrapper from '../../ChartWrapper.svelte';
 
 	interface Props {
-		dataPoints: IndividualDownloadDataPoint[];
+		dataPoints: {
+			date: Date;
+			downloads: number;
+			version_count: number;
+		}[];
 	}
 
 	const { dataPoints }: Props = $props();
-
-	const mappedData = dataPoints
-		.filter(x => x.downloads > 0 && x.version_count > 0)
-		.map(point => {
-			return {
-				id: point.id,
-				date: new Date(point.date),
-				downloads: point.downloads ?? null,
-				version_count: point.version_count ?? null,
-			};
-		});
 </script>
 
 <ChartWrapper>
 	<Plot grid x={{ label: 'Releases →', type: 'log' }} y={{ label: '↑ Downloads', type: 'log', domain: [1, 10_000_000] }}>
-		<Dot data={mappedData} x="version_count" y="downloads" opacity={0.3} stroke="var(--sl-color-text-accent)" />
+		<Dot data={dataPoints} x="version_count" y="downloads" opacity={0.3} stroke="var(--sl-color-text-accent)" />
 	</Plot>
 </ChartWrapper>
 
 <ChartWrapper>
 	<Plot grid x={{ label: 'Release Date →' }} y={{ label: '↑ Downloads', type: 'log', domain: [1, 10_000_000] }}>
-		<Dot data={mappedData} x="date" y="downloads" opacity={0.3} stroke="var(--sl-color-text-accent)" />
+		<Dot data={dataPoints} x="date" y="downloads" opacity={0.3} stroke="var(--sl-color-text-accent)" />
 	</Plot>
 </ChartWrapper>

website/src/pages/pluginstats/downloads.astro

@@ -11,6 +11,30 @@ const view = data.view();
 
 const downloadDataPoints = view.total_download_data(data);
 const individualDownloadDataPoints = view.individual_download_data(data);
+
+const downloadRelationDataPoints = individualDownloadDataPoints
+	.filter(x => x.downloads > 0 && x.version_count > 0)
+	.map(point => {
+		return {
+			date: new Date(point.date),
+			downloads: point.downloads,
+			version_count: point.version_count,
+		};
+	});
+
+const downloadNameDataPoints = individualDownloadDataPoints
+	.filter(x => x.downloads > 0 && x.version_count > 0)
+	.sort((a, b) => a.name.localeCompare(b.name))
+	.map(point => {
+		return point.downloads;
+	});
+
+const downloadDistributionDataPoints = individualDownloadDataPoints
+	.filter(x => x.downloads > 0 && x.version_count > 0)
+	.sort((a, b) => b.downloads - a.downloads)
+	.map(point => {
+		return point.downloads;
+	});
 ---
 
 <StarlightPage
@@ -31,19 +55,19 @@ const individualDownloadDataPoints = view.individual_download_data(data);
 		more releases. The second figure shows the correlation between the number of downloads and the initial release time.
 	</p>
 
-	<DownloadRelationChart dataPoints={individualDownloadDataPoints} client:visible />
+	<DownloadRelationChart dataPoints={downloadRelationDataPoints} client:visible />
 
 	<p>
 		The chart below shows the correlation between the name of the plugin and the number of downloads. The regression line is calculated using the Simple Linear
 		Regression algorithm. It is evident that there is a slight correlation between the placement of the plugin in the alphabet and the number of downloads.
 	</p>
 
-	<DownloadNameChart dataPoints={individualDownloadDataPoints} client:visible />
+	<DownloadNameChart dataPoints={downloadNameDataPoints} client:visible />
 
 	<p>
 		This chart shows the overall distribution of downloads, it is clear that the majority of plugins have a low number of downloads, with a few plugins having a
 		very high number of downloads.
 	</p>
 
-	<DownloadDistributionChart dataPoints={individualDownloadDataPoints} client:visible />
+	<DownloadDistributionChart dataPoints={downloadDistributionDataPoints} client:visible />
 </StarlightPage>