improve version download chart appearance, add dist tag labels (#2268)

Author: Simek

components/Package/VersionBox.tsx

@@ -29,9 +29,9 @@ export default function VersionBox({ label, time, versionData, downloads = 0 }:
       ]}>
       <View>
         <View style={tw`min-h-4 flex-row items-center gap-1`}>
-          {label && <Caption>{label}</Caption>}
+          {label && <Caption style={tw`tabular-nums`}>{label}</Caption>}
           {label && <Caption style={tw`text-secondary`}>{` • `}</Caption>}
-          <Caption style={label && tw`text-secondary`}>{versionData.version}</Caption>
+          <Caption style={label && tw`tabular-nums text-secondary`}>{versionData.version}</Caption>
         </View>
         <View style={tw`min-h-4 flex-row items-center gap-1`}>
           <Label style={tw`font-light text-secondary`}>

components/Package/VersionDownloadsChart.tsx

@@ -20,14 +20,14 @@ type ChartData = {
   downloads: number;
   publishedAt?: string;
   isAggregate?: boolean;
+  distTags?: string[];
 };
 
 const VERSIONS_LIMIT = 12;
 const OTHER_VERSION_LABEL = 'Other';
-const AXIS_LABEL_STYLE = {
-  fontSize: 12,
+const DIST_TAG_LABEL_STYLE = {
   fontWeight: 400,
-  letterSpacing: 0,
+  fontSize: 10,
 };
 
 export default function VersionDownloadsChart({
@@ -37,12 +37,13 @@ export default function VersionDownloadsChart({
   limit = VERSIONS_LIMIT,
 }: Props) {
   const isDark = tw.prefixMatch('dark');
+  const versionDistTags = useMemo(() => mapVersionDistTags(registryData), [registryData]);
   const series = useMemo(
-    () => buildChartSeries(npmDownloads, registryData, limit),
-    [limit, npmDownloads, registryData]
+    () => buildChartSeries(npmDownloads, registryData, versionDistTags, limit),
+    [limit, npmDownloads, registryData, versionDistTags]
   );
 
-  const chartHeight = height ?? Math.max(120, series.length * 26 + 42);
+  const chartHeight = height ?? Math.max(120, series.length * 27 + 42);
   const maxDownloads = Math.max(...series.map(item => item.downloads), 0);
   const xDomain = maxDownloads ? [0, maxDownloads + Math.max(1, maxDownloads * 0.05)] : undefined;
   const gridColor = isDark ? '#374151' : '#e5e7eb';
@@ -67,8 +68,8 @@ export default function VersionDownloadsChart({
             width={width}
             height={chartHeight}
             xScale={{ type: 'linear', domain: xDomain }}
-            yScale={{ type: 'band', paddingInner: 0.3, paddingOuter: 0.3 }}
-            margin={{ top: 6, right: 8, bottom: 20, left: 54 }}>
+            yScale={{ type: 'band', paddingInner: 0.23, paddingOuter: 0.15 }}
+            margin={{ top: 6, right: 2, bottom: 20, left: 60 }}>
             <Grid
               columns
               rows={false}
@@ -84,35 +85,83 @@ export default function VersionDownloadsChart({
               hideAxisLine
               hideTicks
               tickFormat={value => formatNumberToString(value)}
-              tickLabelProps={() => ({
-                fill: 'var(--secondary)',
-                textAnchor: 'middle',
-                ...AXIS_LABEL_STYLE,
-              })}
+              tickComponent={({ formattedValue = 'unknown', x, y }) => {
+                return (
+                  <text
+                    x={x}
+                    y={y}
+                    textAnchor="middle"
+                    dominantBaseline="middle"
+                    style={tw`select-none tabular-nums`}
+                    fill="var(--secondary)">
+                    <tspan x={x} style={tw`text-[12px] font-light`}>
+                      {formattedValue}
+                    </tspan>
+                  </text>
+                );
+              }}
             />
             <Axis
               orientation="left"
               hideAxisLine
               hideTicks
               numTicks={series.length}
-              tickLabelProps={() => ({
-                fill: isDark ? 'var(--white)' : 'var(--black)',
-                textAnchor: 'end',
-                ...AXIS_LABEL_STYLE,
-              })}
+              tickComponent={({ formattedValue = 'unknown', x, y }) => {
+                const labelX = (x ?? 0) - 4;
+                const data = series.find(item => item.version === formattedValue);
+                const hasDistTags = Boolean(data?.distTags?.length);
+                const [version, suffix] = formattedValue.split('-');
+
+                return (
+                  <text
+                    x={labelX}
+                    y={y}
+                    textAnchor="end"
+                    dominantBaseline="middle"
+                    style={tw`select-none tabular-nums`}
+                    fill={isDark ? 'var(--white)' : 'var(--black)'}>
+                    <tspan
+                      x={labelX}
+                      dy={hasDistTags || suffix ? '-0.44em' : '0'}
+                      style={tw`text-[12px]`}>
+                      {version}
+                    </tspan>
+                    {hasDistTags && (
+                      <tspan
+                        x={labelX}
+                        dy="1.2em"
+                        fill="var(--secondary)"
+                        style={DIST_TAG_LABEL_STYLE}>
+                        {data?.distTags?.join(', ')}
+                      </tspan>
+                    )}
+                    {suffix && !hasDistTags && (
+                      <tspan
+                        x={labelX}
+                        dy="1.2em"
+                        fill="var(--secondary)"
+                        style={DIST_TAG_LABEL_STYLE}>
+                        {suffix}
+                      </tspan>
+                    )}
+                  </text>
+                );
+              }}
             />
             <BarSeries
               dataKey="downloads"
               data={series}
               xAccessor={item => item.downloads}
               yAccessor={item => item.version}
-              colorAccessor={({ isAggregate }) =>
-                isAggregate
-                  ? 'var(--pewter)'
-                  : isDark
-                    ? 'var(--primary-dark)'
-                    : 'var(--primary-darker)'
-              }
+              colorAccessor={({ isAggregate, distTags }) => {
+                if (isAggregate) {
+                  return 'var(--pewter)';
+                }
+                if (distTags?.length) {
+                  return isDark ? 'var(--primary)' : 'var(--primary-dark)';
+                }
+                return isDark ? 'var(--primary-darker)' : 'var(--primary-darker)';
+              }}
               radius={3}
               radiusAll
             />
@@ -138,6 +187,7 @@ export default function VersionDownloadsChart({
 function buildChartSeries(
   npmDownloads: NpmPerVersionDownloads,
   registryData: NpmRegistryData,
+  versionDistTags: Record<string, string[]>,
   limit: number
 ): ChartData[] {
   const sortedVersions = Object.entries(npmDownloads.downloads)
@@ -151,6 +201,7 @@ function buildChartSeries(
       version,
       downloads,
       publishedAt: registryData.time[version],
+      distTags: versionDistTags[version],
     }));
 
   const normalizedLimit = Math.max(1, limit);
@@ -184,8 +235,15 @@ function renderTooltipContent(data?: ChartData) {
 
   return (
     <Text
-      style={tw`font-sans flex flex-col rounded bg-black px-2.5 py-1.5 text-xs font-light text-white dark:border dark:border-default`}>
-      <span style={tw`font-medium`}>{data.version}</span>
+      style={tw`font-sans flex flex-col gap-px rounded bg-black px-2.5 py-1.5 text-xs font-light text-white dark:border dark:border-default`}>
+      <span style={tw`text-[14px] font-medium tabular-nums`}>
+        {data.version}
+        {data.distTags?.length && (
+          <span style={tw`text-palette-gray3 dark:text-secondary`}>
+            {` `}• {data.distTags.join(', ')}
+          </span>
+        )}
+      </span>
       <span>{data.downloads.toLocaleString()} downloads last week</span>
       {data.publishedAt && !data.isAggregate ? (
         <span style={tw`text-palette-gray3 dark:text-secondary`}>
@@ -195,3 +253,13 @@ function renderTooltipContent(data?: ChartData) {
     </Text>
   );
 }
+
+function mapVersionDistTags(registryData: NpmRegistryData) {
+  return Object.entries(registryData['dist-tags']).reduce<Record<string, string[]>>(
+    (acc, [tag, version]) => {
+      acc[version] = [...(acc[version] ?? []), tag];
+      return acc;
+    },
+    {}
+  );
+}

styles/styles.css

@@ -79,6 +79,7 @@
 
 :root.dark {
   --primary-dark: #2e9ab8;
+  --primary-darker: #23839e;
 
   --powder: #262a36;
   --pewter: #767c8e;