feat: make watermark generator more flexible

Author: graphieros

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,18 @@ 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')}