feat: add quadrant chart to compare page

app/composables/useChartWatermark.ts

@@ -76,15 +76,23 @@ export function drawNpmxLogoAndTaglineWatermark({
   colors,
   translateFn,
   positioning = 'bottom',
+  sizeRatioLogo = 1,
+  sizeRatioTagline = 1,
+  offsetYTagline = -6,
+  offsetYLogo = 0,
 }: {
   svg: Record<string, any>
   colors: WatermarkColors
   translateFn: (key: string) => string
   positioning?: 'bottom' | 'belowDrawingArea'
+  sizeRatioLogo?: number
+  sizeRatioTagline?: number
+  offsetYTagline?: number
+  offsetYLogo?: number
 }) {
   if (!svg?.drawingArea) return ''
-  const npmxLogoWidthToHeight = 2.64
-  const npmxLogoWidth = 100
+  const npmxLogoWidthToHeight = 2.64 * sizeRatioLogo
+  const npmxLogoWidth = 100 * sizeRatioLogo
   const npmxLogoHeight = npmxLogoWidth / npmxLogoWidthToHeight
 
   // Position watermark based on the positioning strategy
@@ -94,18 +102,20 @@ export function drawNpmxLogoAndTaglineWatermark({
       : svg.height - npmxLogoHeight
 
   const taglineY =
-    positioning === 'belowDrawingArea' ? watermarkY - 6 : svg.height - npmxLogoHeight - 6
+    positioning === 'belowDrawingArea'
+      ? watermarkY + offsetYTagline
+      : svg.height - npmxLogoHeight + offsetYTagline
 
   // Center the watermark horizontally relative to the full SVG width
   const watermarkX = svg.width / 2 - npmxLogoWidth / 2
 
   return `
-    ${generateWatermarkLogo({ x: watermarkX, y: watermarkY, width: npmxLogoWidth, height: npmxLogoHeight, fill: colors.fg })}
+    ${generateWatermarkLogo({ x: watermarkX, y: watermarkY + offsetYLogo, width: npmxLogoWidth, height: npmxLogoHeight, fill: colors.fg })}
     <text
       fill="${colors.fgSubtle}"
       x="${svg.width / 2}"
       y="${taglineY}"
-      font-size="12"
+      font-size="${12 * sizeRatioTagline}"
       text-anchor="middle"
     >
       ${translateFn('tagline')}

app/pages/compare.vue

@@ -2,6 +2,7 @@
 import { NO_DEPENDENCY_ID } from '~/composables/usePackageComparison'
 import { useRouteQuery } from '@vueuse/router'
 import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
+import FacetQuadrantChart from '~/components/Compare/FacetQuadrantChart.vue'
 
 definePageMeta({
   name: 'compare',
@@ -330,7 +331,7 @@ useSeoMeta({
               </div>
             </TabPanel>
 
-            <!-- bar charts -->
+            <!-- Charts: per-facet bars & quadrant -->
             <TabPanel value="charts" panel-id="comparison-panel-charts">
               <div
                 v-if="selectedFacets.some(facet => facet.chartable)"
@@ -353,6 +354,13 @@ useSeoMeta({
               <p v-else class="py-12 text-center text-fg-subtle">
                 {{ $t('compare.packages.no_chartable_data') }}
               </p>
+              <div class="max-w-[450px] mx-auto">
+                <FacetQuadrantChart
+                  v-if="packages.length"
+                  :packages-data="packagesData"
+                  :packages="packages"
+                />
+              </div>
             </TabPanel>
           </TabRoot>
 

app/utils/charts.ts

@@ -2,6 +2,7 @@ import type {
   AltCopyArgs,
   VueUiHorizontalBarConfig,
   VueUiHorizontalBarDatapoint,
+  VueUiQuadrantDatapoint,
   VueUiXyConfig,
   VueUiXyDatasetBarItem,
   VueUiXyDatasetLineItem,
@@ -636,6 +637,73 @@ export async function copyAltTextForCompareFacetBarChart({
   await config.copy(altText)
 }
 
+export function createAltTextForCompareQuadrantChart({
+  dataset,
+  config,
+}: AltCopyArgs<VueUiQuadrantDatapoint[], any>) {
+  const packages = {
+    topRight: dataset.filter(d => d.quadrant === 'TOP_RIGHT'),
+    topLeft: dataset.filter(d => d.quadrant === 'TOP_LEFT'),
+    bottomRight: dataset.filter(d => d.quadrant === 'BOTTOM_RIGHT'),
+    bottomLeft: dataset.filter(d => d.quadrant === 'BOTTOM_LEFT'),
+  }
+
+  const descriptions = {
+    topRight: '',
+    topLeft: '',
+    bottomRight: '',
+    bottomLeft: '',
+  }
+
+  if (packages.topRight.length) {
+    descriptions.topRight = config.$t('compare.quadrant_chart.copy_alt.side_analysis_top_right', {
+      packages: packages.topRight.map(p => p.fullname).join(', '),
+    })
+  }
+
+  if (packages.topLeft.length) {
+    descriptions.topLeft = config.$t('compare.quadrant_chart.copy_alt.side_analysis_top_left', {
+      packages: packages.topLeft.map(p => p.fullname).join(', '),
+    })
+  }
+
+  if (packages.bottomRight.length) {
+    descriptions.bottomRight = config.$t(
+      'compare.quadrant_chart.copy_alt.side_analysis_bottom_right',
+      {
+        packages: packages.bottomRight.map(p => p.fullname).join(', '),
+      },
+    )
+  }
+
+  if (packages.bottomLeft.length) {
+    descriptions.bottomLeft = config.$t(
+      'compare.quadrant_chart.copy_alt.side_analysis_bottom_left',
+      {
+        packages: packages.bottomLeft.map(p => p.fullname).join(', '),
+      },
+    )
+  }
+
+  const analysis = Object.values(descriptions).filter(Boolean).join('. ')
+
+  const altText = config.$t('compare.quadrant_chart.copy_alt.description', {
+    packages: dataset.map(p => p.fullname).join(', '),
+    analysis,
+    watermark: config.$t('package.trends.copy_alt.watermark'),
+  })
+
+  return altText
+}
+
+export async function copyAltTextForCompareQuadrantChart({
+  dataset,
+  config,
+}: AltCopyArgs<VueUiQuadrantDatapoint[], any>) {
+  const altText = createAltTextForCompareQuadrantChart({ dataset, config })
+  await config.copy(altText)
+}
+
 // Used in chart context menu callbacks
 // @todo replace with downloadFileLink
 export function loadFile(link: string, filename: string) {