Revert image workarounds (#3821)

* Revert figure workarounds

* Add comment

Author: tunetheweb

src/static/js/almanac.js

@@ -388,11 +388,6 @@ function googleSheetsPixelNotLoaded() {
 //We use Google Sheets for detailed visualisations
 //Check for support and switch out images if supported
 function upgradeInteractiveFigures() {
-
-  // Temporarily disable charts since embedding is currently broken in Sheets
-  // See: https://github.com/HTTPArchive/almanac.httparchive.org/issues/3803
-  return;
-
   try {
     if (!isInPrintMode() && bigEnoughForInteractiveFigures() && !dataSaverEnabled() && highBandwidthConnection() && highResolutionCanvasSupported()) {
 

src/tools/generate/generate_figure_images.js

@@ -7,8 +7,7 @@ const take_single_screenshot = async (graphUrl, filename) => {
 
   const sheets_chart = graphUrl.startsWith('https://docs.google.com/spreadsheets') ? true :  false;
 
-  // Temporarily replace `&format=interactive` with `&format=image`
-  const chartUrl = sheets_chart ? graphUrl.replaceAll('&format=interactive', '&format=image') : 'http://localhost:8080/' + graphUrl;
+  const chartUrl = sheets_chart ? graphUrl : 'http://localhost:8080/' + graphUrl;
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
   await page.setViewport({
@@ -21,9 +20,8 @@ const take_single_screenshot = async (graphUrl, filename) => {
   });
 
 
-  // Temporarily handle `&format=image` instead of `&format=interactive`
-  // const el = sheets_chart ? await page.$('#embed_chart') : await page.$('main');
-  const el = sheets_chart ? await page.$('img') : await page.$('main');
+  // Charts are in #embed_chart, maps are in #c div div
+  const el = sheets_chart ? await page.$('#embed_chart, #c div div') : await page.$('main');
   await el.screenshot({ path: filename });
   await browser.close();
 }