fix: various chart improvements (#2003)

Author: graphieros

app/components/Compare/FacetBarChart.vue

@@ -220,13 +220,18 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
             const name = datapoint?.name?.replace(/\n/g, '<br>')
             return `
             <div class="font-mono p-3 border border-border rounded-md bg-[var(--bg)]/10 backdrop-blur-md">
-              <div class="flex items-center gap-2">
+              <div class="grid grid-cols-[12px_minmax(0,1fr)_max-content] items-center gap-x-3">
                 <div class="w-3 h-3">
                   <svg viewBox="0 0 2 2" class="w-full h-full">
                     <rect x="0" y="0" width="2" height="2" rx="0.3" fill="${datapoint?.color}" />
                   </svg>
                 </div>
-                <span>${name}: ${(datapoint as VueUiHorizontalBarDatapoint).formattedValue ?? 0}</span>
+                <span class="text-3xs uppercase tracking-wide text-[var(--fg)]/70 truncate">
+                  ${name}
+                </span>
+                <span class="text-base text-[var(--fg)] font-mono tabular-nums text-end">
+                  ${(datapoint as VueUiHorizontalBarDatapoint).formattedValue ?? 0}
+                </span>
               </div>
             </div>
             `

app/components/Package/TrendsChart.vue

@@ -20,7 +20,7 @@ import type {
 import { DATE_INPUT_MAX } from '~/utils/input'
 import { applyDataCorrection } from '~/utils/chart-data-correction'
 import { applyBlocklistCorrection, getAnomaliesForPackages } from '~/utils/download-anomalies'
-import { copyAltTextForTrendLineChart, sanitise, loadFile } from '~/utils/charts'
+import { copyAltTextForTrendLineChart, sanitise, loadFile, applyEllipsis } from '~/utils/charts'
 
 import('vue-data-ui/style.css')
 
@@ -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

@@ -9,7 +9,7 @@ import {
   drawNpmxLogoAndTaglineWatermark,
 } from '~/composables/useChartWatermark'
 import TooltipApp from '~/components/Tooltip/App.vue'
-import { copyAltTextForVersionsBarChart, sanitise, loadFile } from '~/utils/charts'
+import { copyAltTextForVersionsBarChart, sanitise, loadFile, applyEllipsis } from '~/utils/charts'
 
 import('vue-data-ui/style.css')
 
@@ -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,