fix: apply ellipsis to long package names in charts

Author: graphieros

app/components/Package/TrendsChart.vue

@@ -215,7 +215,7 @@ function formatXyDataset(
   const temperatureColors = lightColor ? [lightColor, accent.value] : undefined
 
   const datasetItem: VueUiXyDatasetItem = {
-    name: seriesName,
+    name: applyEllipsis(seriesName, 32),
     type: 'line',
     series: dataset.map(d => d.value),
     color: accent.value,
@@ -1050,7 +1050,7 @@ const chartData = computed<{
       .filter(index => index !== -1)
 
     const item: VueUiXyDatasetItem = {
-      name: pkg,
+      name: applyEllipsis(pkg, 32),
       type: 'line',
       series,
       dashIndices,
@@ -1111,10 +1111,10 @@ function buildExportFilename(extension: string): string {
 
   if (!isMultiPackageMode.value) {
     const name = effectivePackageNames.value[0] ?? props.packageName ?? 'package'
-    return `${sanitise(name)}-${g}_${range}.${extension}`
+    return `${sanitise(applyEllipsis(name, 32))}-${g}_${range}.${extension}`
   }
 
-  const names = effectivePackageNames.value
+  const names = effectivePackageNames.value.map(name => applyEllipsis(name, 32))
   const label = names.length === 1 ? names[0] : names.join('_')
   return `${sanitise(label ?? '')}-${g}_${range}.${extension}`
 }

app/components/Package/VersionDistribution.vue

@@ -131,7 +131,7 @@ const dateRangeLabel = computed(() => {
 function buildExportFilename(extension: string): string {
   const range = dateRangeLabel.value.replaceAll(' ', '_').replaceAll(',', '')
 
-  const label = props.packageName
+  const label = applyEllipsis(props.packageName, 32)
   return `${sanitise(label ?? '')}_${range}.${extension}`
 }
 
@@ -141,7 +141,7 @@ const xyDataset = computed<VueUiXyDatasetItem[]>(() => {
 
   return [
     {
-      name: props.packageName,
+      name: applyEllipsis(props.packageName, 32),
       series: chartDataset.value.map(item => item.downloads),
       type: 'bar' as const,
       color: accent.value,