feat: copy repo page Contributors chart as image (#4025)

open-sauced · Aug 23, 2024 · 581497e · 581497e
1 parent dd379b6
commit 581497e
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 16 deletions.
diff --git a/components/Repositories/RossChart.tsx b/components/Repositories/RossChart.tsx
@@ -166,7 +166,7 @@ export default function RossChart({ stats, isLoading, error, range, onFilterClic
             !filterOutside && "opacity-60"
           } transition-all duration-300 hover:bg-slate-100 rounded-lg px-2 py-1`}
         >
-          <span className={`w-4 h-4 rounded-sm bg-[#60A5FA] inline-block`} />
+          <span data-copy-image-legend-square className={`w-4 h-4 rounded-sm bg-[#60A5FA] inline-block`} />
           Outside
         </button>
 
@@ -179,7 +179,7 @@ export default function RossChart({ stats, isLoading, error, range, onFilterClic
             !filterRecurring && "opacity-60"
           } transition-all duration-300 hover:bg-slate-100 rounded-lg px-2 py-1`}
         >
-          <span className={`w-4 h-4 rounded-sm bg-[#2563EB] inline-block`} />
+          <span data-copy-image-legend-square className={`w-4 h-4 rounded-sm bg-[#2563EB] inline-block`} />
           Recurring
         </button>
 
@@ -192,7 +192,7 @@ export default function RossChart({ stats, isLoading, error, range, onFilterClic
             !filterInternal && "opacity-60"
           } transition-all duration-300 hover:bg-slate-100 rounded-lg px-2 py-1`}
         >
-          <span className={`w-4 h-4 rounded-sm bg-[#1E3A8A] inline-block`} />
+          <span data-copy-image-legend-square className={`w-4 h-4 rounded-sm bg-[#1E3A8A] inline-block`} />
           Internal
         </button>
       </fieldset>

diff --git a/pages/s/[org]/[repo]/index.tsx b/pages/s/[org]/[repo]/index.tsx
@@ -430,20 +430,42 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                     )}
                   </div>
 
-                  <RossChart
-                    stats={rossStats}
-                    range={range}
-                    isLoading={isRossDataLoading}
-                    error={rossError}
-                    onFilterClick={(category, value) =>
-                      posthog.capture(`Repo Data: toggled ROSS filter`, {
+                  <CopyContainer
+                    onCopyClick={() => {
+                      posthog.capture("Repo Pages: copied Contributors (ROSS) chart", {
                         repository: repoData.full_name,
-                        category,
-                        value,
-                      })
-                    }
-                    className="h-fit"
-                  />
+                      });
+                    }}
+                    options={{
+                      windowWidth: 1700,
+                      allowTaint: true,
+                      onclone(document, element) {
+                        element.querySelectorAll("[data-copy-image-branding]").forEach((el) => {
+                          el.classList.remove("hidden");
+                        });
+                        element.querySelectorAll("[data-copy-image-legend-square]").forEach((el) => {
+                          el.classList.replace("w-4", "w-5");
+                          el.classList.replace("h-4", "h-5");
+                        });
+                      },
+                    }}
+                  >
+                    <CopyImageBranding repository={repoData.full_name} />
+                    <RossChart
+                      stats={rossStats}
+                      range={range}
+                      isLoading={isRossDataLoading}
+                      error={rossError}
+                      onFilterClick={(category, value) =>
+                        posthog.capture(`Repo Data: toggled ROSS filter`, {
+                          repository: repoData.full_name,
+                          category,
+                          value,
+                        })
+                      }
+                      className="h-fit"
+                    />
+                  </CopyContainer>
                 </div>
 
                 <div className="lg:col-span-4 flex flex-col gap-4">