From 942283c72b8fedf200157f7779c849e9e3742a37 Mon Sep 17 00:00:00 2001
From: Marc Woolfson <marc.woolfson@education.gov.uk>
Date: Thu, 23 Jan 2025 08:32:39 +0000
Subject: [PATCH 1/4] feat: Added `<ShareContentByElements />` component for
 use with any HTMLElement

Added default implementation to be to select by matching element class name(s), which may be outside the React context
---
 front-end-components/index.html               |  12 +-
 front-end-components/package-lock.json        |  85 ++++++++-
 front-end-components/package.json             |   1 +
 .../share-content-by-elements/component.tsx   |  30 ++++
 .../share-content-by-elements/index.tsx       |   3 +
 .../share-content-by-elements/types.tsx       |  15 ++
 .../components/share-content/component.tsx    |  13 +-
 front-end-components/src/constants.tsx        |   2 +
 .../src/hooks/useDownloadImage.ts             | 170 ++++++++++++++----
 front-end-components/src/index.css            |   2 +-
 front-end-components/src/main.tsx             |  43 +++++
 11 files changed, 331 insertions(+), 45 deletions(-)
 create mode 100644 front-end-components/src/components/share-content-by-elements/component.tsx
 create mode 100644 front-end-components/src/components/share-content-by-elements/index.tsx
 create mode 100644 front-end-components/src/components/share-content-by-elements/types.tsx

diff --git a/front-end-components/index.html b/front-end-components/index.html
index a5a3f6c1b..bb6055b1b 100644
--- a/front-end-components/index.html
+++ b/front-end-components/index.html
@@ -121,9 +121,19 @@
         data-trust-input=""
         data-urn=""
       >-->
-    <div data-share-content-by-element-id data-element-id="test-element-id" data-title="Test title"></div>
+    <!-- <div data-share-content-by-element-id data-element-id="test-element-id" data-title="Test title"></div>
     <svg id="test-element-id" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
       <circle r="45" cx="50" cy="50" fill="red" />
+    </svg> -->
+    <div data-share-content-by-element-class-name data-element-class-name="test-element-class" data-label="Save all" data-element-title-attr="aria-label"></div>
+    <svg class="test-element-class" aria-label="Red" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
+      <circle r="45" cx="50" cy="50" fill="red" />
+    </svg>
+    <svg class="test-element-class" aria-label="Green" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
+      <circle r="45" cx="50" cy="50" fill="green" />
+    </svg>
+    <svg class="test-element-class" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
+      <circle r="45" cx="50" cy="50" fill="blue" />
     </svg>
     <script type="module" src="/src/main.tsx"></script>
     <script
diff --git a/front-end-components/package-lock.json b/front-end-components/package-lock.json
index 5b13eef13..74ed4f14e 100644
--- a/front-end-components/package-lock.json
+++ b/front-end-components/package-lock.json
@@ -14,6 +14,7 @@
         "file-saver": "^2.0.5",
         "govuk-frontend": "^5.6.0",
         "html-to-image": "^1.11.11",
+        "jszip": "^3.10.1",
         "punycode": "^2.3.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -4508,6 +4509,11 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
     "node_modules/create-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz",
@@ -5720,6 +5726,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -5787,8 +5798,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/internmap": {
       "version": "2.0.3",
@@ -5894,6 +5904,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -6984,6 +6999,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -7024,6 +7050,14 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -7450,6 +7484,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -8097,6 +8136,11 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
     "node_modules/prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -8255,6 +8299,20 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
     "node_modules/recharts": {
       "version": "2.15.0",
       "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.0.tgz",
@@ -8549,6 +8607,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -8584,6 +8647,11 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -8692,6 +8760,14 @@
         "node": ">=2.0.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/string-format": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/string-format/-/string-format-2.0.0.tgz",
@@ -9099,6 +9175,11 @@
         "react": "^16.8.0  || ^17 || ^18"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
     "node_modules/uuid": {
       "version": "11.0.3",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.3.tgz",
diff --git a/front-end-components/package.json b/front-end-components/package.json
index 781d678c9..2630efe19 100644
--- a/front-end-components/package.json
+++ b/front-end-components/package.json
@@ -23,6 +23,7 @@
     "file-saver": "^2.0.5",
     "govuk-frontend": "^5.6.0",
     "html-to-image": "^1.11.11",
+    "jszip": "^3.10.1",
     "punycode": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/front-end-components/src/components/share-content-by-elements/component.tsx b/front-end-components/src/components/share-content-by-elements/component.tsx
new file mode 100644
index 000000000..bd11ff2f0
--- /dev/null
+++ b/front-end-components/src/components/share-content-by-elements/component.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import { ShareContentByElementsProps } from "./types";
+import { useDownloadPngImages } from "src/hooks/useDownloadImage";
+import { ShareContent } from "../share-content";
+
+export const ShareContentByElements: React.FC<ShareContentByElementsProps> = ({
+  disabled,
+  elementsSelector,
+  showTitles,
+  label,
+  ...props
+}) => {
+  const [imagesLoading, setImagesLoading] = useState<boolean>();
+
+  const downloadPngs = useDownloadPngImages({
+    elementsSelector,
+    onImagesLoading: setImagesLoading,
+    showTitles,
+  });
+
+  return (
+    <ShareContent
+      disabled={imagesLoading || disabled}
+      onSaveClick={async () => await downloadPngs()}
+      {...props}
+    >
+      {label}
+    </ShareContent>
+  );
+};
diff --git a/front-end-components/src/components/share-content-by-elements/index.tsx b/front-end-components/src/components/share-content-by-elements/index.tsx
new file mode 100644
index 000000000..e6488b9e6
--- /dev/null
+++ b/front-end-components/src/components/share-content-by-elements/index.tsx
@@ -0,0 +1,3 @@
+/* eslint-disable react-refresh/only-export-components */
+export * from "src/components/share-content-by-elements/types";
+export * from "src/components/share-content-by-elements/component";
diff --git a/front-end-components/src/components/share-content-by-elements/types.tsx b/front-end-components/src/components/share-content-by-elements/types.tsx
new file mode 100644
index 000000000..490df28ae
--- /dev/null
+++ b/front-end-components/src/components/share-content-by-elements/types.tsx
@@ -0,0 +1,15 @@
+import { ShareContentByElementProps } from "../share-content-by-element";
+
+type ElementAndTitle = {
+  element: HTMLElement;
+  title?: string;
+};
+
+export type ShareContentByElementsProps = Omit<
+  ShareContentByElementProps,
+  "elementSelector" | "title" | "showTitle"
+> & {
+  elementsSelector: () => ElementAndTitle[];
+  label: string;
+  showTitles?: boolean;
+};
diff --git a/front-end-components/src/components/share-content/component.tsx b/front-end-components/src/components/share-content/component.tsx
index 548f3481b..3cbcbc99a 100644
--- a/front-end-components/src/components/share-content/component.tsx
+++ b/front-end-components/src/components/share-content/component.tsx
@@ -1,8 +1,9 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import "src/components/share-content/styles.css";
 import { ShareContentProps } from "./types";
 
-export const ShareContent: React.FC<ShareContentProps> = ({
+export const ShareContent: React.FC<PropsWithChildren<ShareContentProps>> = ({
+  children,
   disabled,
   onSaveClick,
   saveEventId,
@@ -20,7 +21,13 @@ export const ShareContent: React.FC<ShareContentProps> = ({
         data-custom-event-id={saveEventId}
         data-custom-event-chart-name={saveEventId && title}
       >
-        Save <span className="govuk-visually-hidden">{title}</span> as image
+        {children ? (
+          children
+        ) : (
+          <>
+            Save <span className="govuk-visually-hidden">{title}</span> as image
+          </>
+        )}
       </button>
     </div>
   );
diff --git a/front-end-components/src/constants.tsx b/front-end-components/src/constants.tsx
index cbada4a1d..9001e9080 100644
--- a/front-end-components/src/constants.tsx
+++ b/front-end-components/src/constants.tsx
@@ -20,3 +20,5 @@ export const LaSuggesterId = "la-suggester";
 export const TrustSuggesterId = "trust-suggester";
 export const BudgetForecastReturnsElementId = "budget-forecast-returns";
 export const ShareContentByElementIdDataAttr = "share-content-by-element-id";
+export const ShareContentByElementClassNameDataAttr =
+  "share-content-by-element-class-name";
diff --git a/front-end-components/src/hooks/useDownloadImage.ts b/front-end-components/src/hooks/useDownloadImage.ts
index a0df0e8f8..07722fc4a 100644
--- a/front-end-components/src/hooks/useDownloadImage.ts
+++ b/front-end-components/src/hooks/useDownloadImage.ts
@@ -1,4 +1,5 @@
 import saveAs from "file-saver";
+import JSZip from "jszip";
 import { useCallback } from "react";
 import { ImageOptions, ImageService } from "src/services";
 
@@ -11,6 +12,17 @@ export type DownloadPngImageOptions<T> = {
   title?: string;
 } & Pick<ImageOptions, "filter">;
 
+type ElementAndTitle = {
+  element: HTMLElement;
+  title?: string;
+};
+
+export type DownloadPngImagesOptions = {
+  elementsSelector: () => ElementAndTitle[];
+  onImagesLoading?: (loading: boolean) => void;
+  showTitles?: boolean;
+} & Pick<ImageOptions, "filter">;
+
 const imageTitleHeight = 50;
 
 export function useDownloadPngImage<T>({
@@ -22,16 +34,7 @@ export function useDownloadPngImage<T>({
   ref,
   title,
 }: DownloadPngImageOptions<T>) {
-  const fileName = title
-    ? `${title
-        .toLowerCase()
-        .replace(/\W/g, " ")
-        .replace(/\s{2,}/g, " ")
-        .trim()
-        .replace(/\s/g, "-")}.png`
-    : fileNameProp
-      ? fileNameProp
-      : "download.png";
+  const fileName = getFileName(title, fileNameProp);
 
   const downloadPng = useCallback(async () => {
     const element = elementSelector(ref?.current || undefined);
@@ -39,35 +42,11 @@ export function useDownloadPngImage<T>({
       return;
     }
 
-    let height = element.clientHeight;
-
-    // use customised onCloned() callback to add additional elements to the DOM once already
-    // cloned for the purpose of generating the image (so as to not affect the original DOM,
-    // but still be able to apply styles and fonts as resolved from class names).
-    let onCloned: (node: HTMLElement) => void | undefined;
-    if (title && showTitle) {
-      height += imageTitleHeight;
-      onCloned = (node) => {
-        const child = document.createElement("h2");
-        child.innerText = title;
-        child.classList.add("govuk-heading-s");
-        child.style.height = `${imageTitleHeight}px`;
-        child.style.margin = `${imageTitleHeight / 2}px 0 -${imageTitleHeight / 2}px ${imageTitleHeight / 2}px`;
-        child.style.padding = "0";
-        node.insertBefore(child, node.firstChild);
-      };
-    }
-
     const download = async () => {
-      const blob = await ImageService.toBlob(element, {
-        cacheBust: true,
-        backgroundColor: "#fff",
-        type: "image/png",
-        filter,
-        width: element.clientWidth,
-        height,
-        onCloned,
-      });
+      const blob = await ImageService.toBlob(
+        element,
+        getImageOptions(element, title, showTitle, filter)
+      );
 
       if (blob) {
         if (window.saveAs) {
@@ -108,3 +87,118 @@ export function useDownloadPngImage<T>({
 
   return downloadPng;
 }
+
+export function useDownloadPngImages({
+  elementsSelector,
+  filter,
+  onImagesLoading,
+  showTitles,
+}: DownloadPngImagesOptions) {
+  const fileName = "download.zip";
+
+  const downloadPng = useCallback(async () => {
+    const elements = elementsSelector();
+    if (!elements?.length) {
+      return;
+    }
+
+    const download = async () => {
+      const zip = new JSZip();
+
+      for (let i = 0; i < elements.length; i++) {
+        const { element, title } = elements[i];
+
+        const blob = await ImageService.toBlob(
+          element,
+          getImageOptions(element, title, showTitles, filter)
+        );
+
+        if (blob) {
+          zip.file(
+            getFileName(title ? title : `${element.tagName}-${i}`),
+            blob
+          );
+        }
+      }
+
+      const blob = await zip.generateAsync({ type: "blob" });
+      if (blob) {
+        if (window.saveAs) {
+          window.saveAs(blob, fileName);
+        } else {
+          saveAs.saveAs(blob, fileName);
+        }
+      }
+    };
+
+    if (onImagesLoading) {
+      onImagesLoading(true);
+
+      // If loader event is subscribed, allow it to be triggered before the actual generate and download PNG process
+      // due to the latter performing a synchronous XMLHttpRequest on the main thread which is documented as being
+      // detrimental effects to the end user's experience (see `Issues` in browser DevTools for more information).
+      setTimeout(async () => {
+        try {
+          await download();
+        } catch (err) {
+          console.error(`Unable to download images`, err);
+        } finally {
+          onImagesLoading(false);
+        }
+      }, 100);
+    } else {
+      await download();
+    }
+  }, [elementsSelector, filter, onImagesLoading, showTitles]);
+
+  return downloadPng;
+}
+
+const getFileName = (title?: string, fileName?: string) => {
+  return title
+    ? `${title
+        .toLowerCase()
+        .replace(/\W/g, " ")
+        .replace(/\s{2,}/g, " ")
+        .trim()
+        .replace(/\s/g, "-")}.png`
+    : fileName
+      ? fileName
+      : "download.png";
+};
+
+const getImageOptions = (
+  element: HTMLElement,
+  title?: string,
+  showTitle?: boolean,
+  filter?: (domNode: HTMLElement) => boolean
+): ImageOptions => {
+  let height = element.clientHeight;
+
+  // use customised onCloned() callback to add additional elements to the DOM once already
+  // cloned for the purpose of generating the image (so as to not affect the original DOM,
+  // but still be able to apply styles and fonts as resolved from class names).
+  let onCloned: ((node: HTMLElement) => void) | undefined;
+  if (title && showTitle) {
+    height += imageTitleHeight;
+    onCloned = (node) => {
+      const child = document.createElement("h2");
+      child.innerText = title;
+      child.classList.add("govuk-heading-s");
+      child.style.height = `${imageTitleHeight}px`;
+      child.style.margin = `${imageTitleHeight / 2}px 0 -${imageTitleHeight / 2}px ${imageTitleHeight / 2}px`;
+      child.style.padding = "0";
+      node.insertBefore(child, node.firstChild);
+    };
+  }
+
+  return {
+    cacheBust: true,
+    backgroundColor: "#fff",
+    type: "image/png",
+    filter,
+    width: element.clientWidth,
+    height,
+    onCloned,
+  };
+};
diff --git a/front-end-components/src/index.css b/front-end-components/src/index.css
index e63b1f49e..f6c0bf3c9 100644
--- a/front-end-components/src/index.css
+++ b/front-end-components/src/index.css
@@ -531,7 +531,7 @@ ul.autocomplete__menu {
   padding-left: 12px;
 }
 
-div[data-share-content-by-element-id] {
+div[data-share-content-by-element-id], div[data-share-content-by-element-class-name] {
   min-height: 40px;
 }
 
diff --git a/front-end-components/src/main.tsx b/front-end-components/src/main.tsx
index 01a93c62a..7cf1e8332 100644
--- a/front-end-components/src/main.tsx
+++ b/front-end-components/src/main.tsx
@@ -32,6 +32,7 @@ import {
   LineChart2SeriesElementId,
   BudgetForecastReturnsElementId,
   ShareContentByElementIdDataAttr,
+  ShareContentByElementClassNameDataAttr,
 } from "src/constants";
 import { HorizontalBarChart } from "./components/charts/horizontal-bar-chart";
 import { VerticalBarChart } from "./components/charts/vertical-bar-chart";
@@ -60,6 +61,7 @@ import { TrustDataTooltip } from "./components/charts/trust-data-tooltip";
 import { TrustChartData } from "./components/charts/table-chart";
 import { BudgetForecastReturns } from "./views/budget-forecast-returns";
 import { ShareContentByElement } from "./components/share-content-by-element";
+import { ShareContentByElements } from "./components/share-content-by-elements";
 
 const historicDataElement = document.getElementById(HistoricDataElementId);
 if (historicDataElement) {
@@ -891,3 +893,44 @@ if (shareContentByElementIdElements) {
     }
   });
 }
+
+const shareContentByElementClassNameElements =
+  document.querySelectorAll<HTMLElement>(
+    `[data-${ShareContentByElementClassNameDataAttr}]`
+  );
+
+if (shareContentByElementClassNameElements) {
+  shareContentByElementClassNameElements.forEach((element) => {
+    const { elementClassName, elementTitleAttr, label, showTitles } =
+      element.dataset;
+    if (elementClassName && label) {
+      const el = document.getElementsByClassName(elementClassName);
+      if (el.length > 0) {
+        const root = ReactDOM.createRoot(element);
+        root.render(
+          <React.StrictMode>
+            <ShareContentByElements
+              elementsSelector={() => {
+                const results = [];
+                const elements =
+                  document.getElementsByClassName(elementClassName);
+
+                for (let i = 0; i < elements.length; i++) {
+                  const element = elements[i] as HTMLElement;
+                  const title = elementTitleAttr
+                    ? element.getAttribute(elementTitleAttr) || undefined
+                    : undefined;
+                  results.push({ element, title });
+                }
+
+                return results;
+              }}
+              label={label}
+              showTitles={showTitles === "true"}
+            />
+          </React.StrictMode>
+        );
+      }
+    }
+  });
+}

From 0263b0ec31f9d3f9705aef5d033a83778820c9b1 Mon Sep 17 00:00:00 2001
From: Marc Woolfson <marc.woolfson@education.gov.uk>
Date: Thu, 23 Jan 2025 11:33:51 +0000
Subject: [PATCH 2/4] feat: Added optional progress indicator to
 `<ShareContentByElements />` component

---
 .../charts/horizontal-bar-chart/component.tsx |  2 +-
 .../charts/line-chart/component.tsx           |  2 +-
 .../charts/vertical-bar-chart/component.tsx   |  2 +-
 .../src/components/progress/component.tsx     | 27 +++++++++
 .../src/components/progress/index.tsx         |  3 +
 .../src/components/progress/styles.css        | 24 ++++++++
 .../src/components/progress/types.tsx         |  8 +++
 .../share-content-by-elements/component.tsx   | 24 +++++++-
 .../share-content-by-elements/types.tsx       |  1 +
 .../src/hooks/useDownloadImage.ts             |  7 ++-
 front-end-components/src/main.tsx             | 59 ++++++++++---------
 11 files changed, 125 insertions(+), 34 deletions(-)
 create mode 100644 front-end-components/src/components/progress/component.tsx
 create mode 100644 front-end-components/src/components/progress/index.tsx
 create mode 100644 front-end-components/src/components/progress/styles.css
 create mode 100644 front-end-components/src/components/progress/types.tsx

diff --git a/front-end-components/src/components/charts/horizontal-bar-chart/component.tsx b/front-end-components/src/components/charts/horizontal-bar-chart/component.tsx
index b5a404d84..7cdbcb090 100644
--- a/front-end-components/src/components/charts/horizontal-bar-chart/component.tsx
+++ b/front-end-components/src/components/charts/horizontal-bar-chart/component.tsx
@@ -250,7 +250,7 @@ function HorizontalBarChartInner<TData extends ChartDataSeries>(
       <div style={{ height: 22 * filteredData.length + 75 }}>
         <div
           aria-label={chartTitle}
-          className="govuk-body-s govuk-!-font-size-14 full-height-width"
+          className="govuk-body-s govuk-!-font-size-14 full-height-width chart-wrapper"
           role="img"
         >
           <ResponsiveContainer>
diff --git a/front-end-components/src/components/charts/line-chart/component.tsx b/front-end-components/src/components/charts/line-chart/component.tsx
index e653a5b17..2b8032f6b 100644
--- a/front-end-components/src/components/charts/line-chart/component.tsx
+++ b/front-end-components/src/components/charts/line-chart/component.tsx
@@ -195,7 +195,7 @@ function LineChartInner<TData extends ChartDataSeries>(
     // a11y: https://github.com/recharts/recharts/issues/3816
     <div
       aria-label={chartTitle}
-      className="govuk-body-s govuk-!-font-size-14 full-height-width"
+      className="govuk-body-s govuk-!-font-size-14 full-height-width chart-wrapper"
       role="img"
     >
       <ResponsiveContainer>
diff --git a/front-end-components/src/components/charts/vertical-bar-chart/component.tsx b/front-end-components/src/components/charts/vertical-bar-chart/component.tsx
index 9ae175e02..7f0d21c56 100644
--- a/front-end-components/src/components/charts/vertical-bar-chart/component.tsx
+++ b/front-end-components/src/components/charts/vertical-bar-chart/component.tsx
@@ -131,7 +131,7 @@ function VerticalBarChartInner<TData extends ChartDataSeries>(
     // a11y: https://github.com/recharts/recharts/issues/3816
     <div
       aria-label={chartTitle}
-      className="govuk-body-s govuk-!-font-size-14 full-height-width"
+      className="govuk-body-s govuk-!-font-size-14 full-height-width chart-wrapper"
       role="img"
     >
       <ResponsiveContainer>
diff --git a/front-end-components/src/components/progress/component.tsx b/front-end-components/src/components/progress/component.tsx
new file mode 100644
index 000000000..d15cb29e5
--- /dev/null
+++ b/front-end-components/src/components/progress/component.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import "src/components/progress/styles.css";
+import { ProgressProps } from ".";
+import classNames from "classnames";
+
+// inspired by https://medium.com/@pppped/how-to-code-a-responsive-circular-percentage-chart-with-svg-and-css-3632f8cd7705
+export const Progress: React.FC<ProgressProps> = ({
+  className,
+  percentage,
+  ...props
+}) => {
+  return (
+    <svg
+      viewBox="0 0 40 40"
+      className={classNames("progress-wrapper", className)}
+      {...props}
+    >
+      <path
+        className="progress-circle"
+        d="M20 4.0845
+      a 15.9155 15.9155 0 0 1 0 31.831
+      a 15.9155 15.9155 0 0 1 0 -31.831"
+        strokeDasharray={`${percentage}, 100`}
+      />
+    </svg>
+  );
+};
diff --git a/front-end-components/src/components/progress/index.tsx b/front-end-components/src/components/progress/index.tsx
new file mode 100644
index 000000000..aaba48ab3
--- /dev/null
+++ b/front-end-components/src/components/progress/index.tsx
@@ -0,0 +1,3 @@
+/* eslint-disable react-refresh/only-export-components */
+export * from "src/components/progress/component";
+export * from "src/components/progress/types";
diff --git a/front-end-components/src/components/progress/styles.css b/front-end-components/src/components/progress/styles.css
new file mode 100644
index 000000000..0ec7913a5
--- /dev/null
+++ b/front-end-components/src/components/progress/styles.css
@@ -0,0 +1,24 @@
+.progress-wrapper {
+    display: block;
+    max-width: 80%;
+    max-height: 250px;
+}
+
+.progress-wrapper.progress-left {
+    float: left;
+    margin-right: 10px;
+}
+
+.progress-wrapper .progress-circle {
+    stroke: #005EA5;
+    fill: none;
+    stroke-width: 6;
+    stroke-linecap: round;
+    animation: progress 1s ease-out forwards;
+}
+
+@keyframes progress {
+    0% {
+        stroke-dasharray: 0 100;
+    }
+}
\ No newline at end of file
diff --git a/front-end-components/src/components/progress/types.tsx b/front-end-components/src/components/progress/types.tsx
new file mode 100644
index 000000000..611fc76bf
--- /dev/null
+++ b/front-end-components/src/components/progress/types.tsx
@@ -0,0 +1,8 @@
+import { SVGProps } from "react";
+
+export type ProgressProps = Pick<
+  SVGProps<SVGSVGElement>,
+  "width" | "height" | "className"
+> & {
+  percentage: number;
+};
diff --git a/front-end-components/src/components/share-content-by-elements/component.tsx b/front-end-components/src/components/share-content-by-elements/component.tsx
index bd11ff2f0..c7aaf18a7 100644
--- a/front-end-components/src/components/share-content-by-elements/component.tsx
+++ b/front-end-components/src/components/share-content-by-elements/component.tsx
@@ -1,30 +1,50 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { ShareContentByElementsProps } from "./types";
 import { useDownloadPngImages } from "src/hooks/useDownloadImage";
 import { ShareContent } from "../share-content";
+import { Progress } from "../progress";
 
 export const ShareContentByElements: React.FC<ShareContentByElementsProps> = ({
   disabled,
   elementsSelector,
+  showProgress,
   showTitles,
   label,
   ...props
 }) => {
   const [imagesLoading, setImagesLoading] = useState<boolean>();
+  const [progress, setProgress] = useState<number>();
 
   const downloadPngs = useDownloadPngImages({
     elementsSelector,
     onImagesLoading: setImagesLoading,
+    onProgress: setProgress,
     showTitles,
   });
 
+  useEffect(() => {
+    if (!imagesLoading) {
+      setProgress(undefined);
+    }
+  }, [imagesLoading]);
+
   return (
     <ShareContent
       disabled={imagesLoading || disabled}
       onSaveClick={async () => await downloadPngs()}
       {...props}
     >
-      {label}
+      <>
+        {showProgress && progress && (
+          <Progress
+            className="progress-left"
+            percentage={progress}
+            width={18}
+            height={18}
+          />
+        )}
+        {label}
+      </>
     </ShareContent>
   );
 };
diff --git a/front-end-components/src/components/share-content-by-elements/types.tsx b/front-end-components/src/components/share-content-by-elements/types.tsx
index 490df28ae..f94b7d169 100644
--- a/front-end-components/src/components/share-content-by-elements/types.tsx
+++ b/front-end-components/src/components/share-content-by-elements/types.tsx
@@ -11,5 +11,6 @@ export type ShareContentByElementsProps = Omit<
 > & {
   elementsSelector: () => ElementAndTitle[];
   label: string;
+  showProgress?: boolean;
   showTitles?: boolean;
 };
diff --git a/front-end-components/src/hooks/useDownloadImage.ts b/front-end-components/src/hooks/useDownloadImage.ts
index 07722fc4a..3798adbc5 100644
--- a/front-end-components/src/hooks/useDownloadImage.ts
+++ b/front-end-components/src/hooks/useDownloadImage.ts
@@ -20,6 +20,7 @@ type ElementAndTitle = {
 export type DownloadPngImagesOptions = {
   elementsSelector: () => ElementAndTitle[];
   onImagesLoading?: (loading: boolean) => void;
+  onProgress?: (percentage: number) => void;
   showTitles?: boolean;
 } & Pick<ImageOptions, "filter">;
 
@@ -92,6 +93,7 @@ export function useDownloadPngImages({
   elementsSelector,
   filter,
   onImagesLoading,
+  onProgress,
   showTitles,
 }: DownloadPngImagesOptions) {
   const fileName = "download.zip";
@@ -107,6 +109,9 @@ export function useDownloadPngImages({
 
       for (let i = 0; i < elements.length; i++) {
         const { element, title } = elements[i];
+        if (onProgress) {
+          onProgress(((i + 1) / elements.length) * 100);
+        }
 
         const blob = await ImageService.toBlob(
           element,
@@ -149,7 +154,7 @@ export function useDownloadPngImages({
     } else {
       await download();
     }
-  }, [elementsSelector, filter, onImagesLoading, showTitles]);
+  }, [elementsSelector, filter, onImagesLoading, onProgress, showTitles]);
 
   return downloadPng;
 }
diff --git a/front-end-components/src/main.tsx b/front-end-components/src/main.tsx
index 7cf1e8332..c3d5d13e7 100644
--- a/front-end-components/src/main.tsx
+++ b/front-end-components/src/main.tsx
@@ -901,36 +901,39 @@ const shareContentByElementClassNameElements =
 
 if (shareContentByElementClassNameElements) {
   shareContentByElementClassNameElements.forEach((element) => {
-    const { elementClassName, elementTitleAttr, label, showTitles } =
-      element.dataset;
+    const {
+      elementClassName,
+      elementTitleAttr,
+      label,
+      showProgress,
+      showTitles,
+    } = element.dataset;
     if (elementClassName && label) {
-      const el = document.getElementsByClassName(elementClassName);
-      if (el.length > 0) {
-        const root = ReactDOM.createRoot(element);
-        root.render(
-          <React.StrictMode>
-            <ShareContentByElements
-              elementsSelector={() => {
-                const results = [];
-                const elements =
-                  document.getElementsByClassName(elementClassName);
-
-                for (let i = 0; i < elements.length; i++) {
-                  const element = elements[i] as HTMLElement;
-                  const title = elementTitleAttr
-                    ? element.getAttribute(elementTitleAttr) || undefined
-                    : undefined;
-                  results.push({ element, title });
-                }
+      const root = ReactDOM.createRoot(element);
+      root.render(
+        <React.StrictMode>
+          <ShareContentByElements
+            elementsSelector={() => {
+              const results = [];
+              const elements =
+                document.getElementsByClassName(elementClassName);
+
+              for (let i = 0; i < elements.length; i++) {
+                const element = elements[i] as HTMLElement;
+                const title = elementTitleAttr
+                  ? element.getAttribute(elementTitleAttr) || undefined
+                  : undefined;
+                results.push({ element, title });
+              }
 
-                return results;
-              }}
-              label={label}
-              showTitles={showTitles === "true"}
-            />
-          </React.StrictMode>
-        );
-      }
+              return results;
+            }}
+            label={label}
+            showProgress={showProgress === "true"}
+            showTitles={showTitles === "true"}
+          />
+        </React.StrictMode>
+      );
     }
   });
 }

From 4d0327c9b9617f6cb2e31645a7cfdcd6ffa2f195 Mon Sep 17 00:00:00 2001
From: Marc Woolfson <marc.woolfson@education.gov.uk>
Date: Thu, 23 Jan 2025 12:27:11 +0000
Subject: [PATCH 3/4] feat: Added 'save all' button to School and Trust
 comparison pages

---
 web/src/Web.App/AssetSrc/scss/main.scss       |  6 ++++-
 .../Views/SchoolComparison/Index.cshtml       |  5 ++++
 .../Views/Shared/_SaveChartsButton.cshtml     |  9 +++++++
 .../Views/TrustComparison/Index.cshtml        | 24 ++++++++++++-------
 4 files changed, 35 insertions(+), 9 deletions(-)
 create mode 100644 web/src/Web.App/Views/Shared/_SaveChartsButton.cshtml

diff --git a/web/src/Web.App/AssetSrc/scss/main.scss b/web/src/Web.App/AssetSrc/scss/main.scss
index e62cdf8e0..2b8c5d117 100644
--- a/web/src/Web.App/AssetSrc/scss/main.scss
+++ b/web/src/Web.App/AssetSrc/scss/main.scss
@@ -393,7 +393,7 @@ hr.govuk-section-break--print {
 
 .app-resources {
   margin-top: govuk-spacing(6);
-  
+
   @include govuk-media-query('tablet') {
     margin-top: 0;
   }
@@ -405,4 +405,8 @@ hr.govuk-section-break--print {
   @include govuk-media-query('tablet') {
     padding-top: govuk-spacing(2);
   }
+}
+
+.save-charts {
+  float: right;
 }
\ No newline at end of file
diff --git a/web/src/Web.App/Views/SchoolComparison/Index.cshtml b/web/src/Web.App/Views/SchoolComparison/Index.cshtml
index a664c921d..d0c0b767a 100644
--- a/web/src/Web.App/Views/SchoolComparison/Index.cshtml
+++ b/web/src/Web.App/Views/SchoolComparison/Index.cshtml
@@ -11,6 +11,11 @@
     @await Html.PartialAsync("_IncompleteFinances")
 }
 
+@if (!hasMissingComparatorSet)
+{
+    @await Html.PartialAsync("_SaveChartsButton")
+}
+
 @await Component.InvokeAsync("EstablishmentHeading", new
 {
     title = ViewData[ViewDataKeys.Title],
diff --git a/web/src/Web.App/Views/Shared/_SaveChartsButton.cshtml b/web/src/Web.App/Views/Shared/_SaveChartsButton.cshtml
new file mode 100644
index 000000000..d3c25f8f8
--- /dev/null
+++ b/web/src/Web.App/Views/Shared/_SaveChartsButton.cshtml
@@ -0,0 +1,9 @@
+<div class="save-charts">
+    <div
+        data-share-content-by-element-class-name
+        data-element-class-name="chart-wrapper"
+        data-label="Save all chart images"
+        data-element-title-attr="aria-label"
+        data-show-titles="true"
+        data-show-progress="true"></div>
+</div>
diff --git a/web/src/Web.App/Views/TrustComparison/Index.cshtml b/web/src/Web.App/Views/TrustComparison/Index.cshtml
index 52d7a8684..b6ff027d6 100644
--- a/web/src/Web.App/Views/TrustComparison/Index.cshtml
+++ b/web/src/Web.App/Views/TrustComparison/Index.cshtml
@@ -1,27 +1,35 @@
-@using Web.App.Extensions
-@using Newtonsoft.Json
+@using Newtonsoft.Json
+@using Web.App.Extensions
 @model Web.App.ViewModels.TrustComparisonViewModel
 @{
     ViewData[ViewDataKeys.Title] = PageTitles.TrustComparison;
 }
 
-@await Component.InvokeAsync("EstablishmentHeading", new { title = ViewData[ViewDataKeys.Title], name = Model.Name, id = Model.CompanyNumber, kind = OrganisationTypes.Trust })
+@await Html.PartialAsync("_SaveChartsButton")
+
+@await Component.InvokeAsync("EstablishmentHeading", new
+{
+    title = ViewData[ViewDataKeys.Title],
+    name = Model.Name,
+    id = Model.CompanyNumber,
+    kind = OrganisationTypes.Trust
+})
 
 @await Component.InvokeAsync("DataSource", new
 {
     organisationType = OrganisationTypes.Trust,
     sourceType = DataSourceTypes.Spending,
-    isPartOfTrust = true, 
+    isPartOfTrust = true,
     additionText = new[] { "View the spending between schools in this trust." }
 })
 
 @if (Model.NumberOfSchools > 0)
 {
-    <div id="compare-your-costs" 
-         data-type="@OrganisationTypes.Trust" 
-         data-id="@Model.CompanyNumber" 
+    <div id="compare-your-costs"
+         data-type="@OrganisationTypes.Trust"
+         data-id="@Model.CompanyNumber"
          data-phases="@Model.Phases.ToJson(Formatting.None)">
-    </div>    
+    </div>
 }
 
 @await Component.InvokeAsync("TrustFinanceTools", new

From ab2685d654829d009ad3c1fb316a938fd9a5e556 Mon Sep 17 00:00:00 2001
From: Marc Woolfson <marc.woolfson@education.gov.uk>
Date: Thu, 23 Jan 2025 12:50:46 +0000
Subject: [PATCH 4/4] feat: Ensured if 'table' mode selected in chart radios
 then first select 'chart' before saving chart images

---
 .../src/components/chart-mode/component.tsx         |  2 +-
 .../charts/horizontal-bar-chart/component.tsx       |  1 +
 .../src/components/charts/line-chart/component.tsx  |  1 +
 .../charts/vertical-bar-chart/component.tsx         |  6 +++++-
 .../share-content-by-elements/component.tsx         |  9 ++++++++-
 .../components/share-content-by-elements/types.tsx  |  1 +
 front-end-components/src/main.tsx                   | 13 +++++++++++++
 .../Pages/Schools/WhenViewingComparison.cs          |  2 +-
 .../Pages/Trusts/WhenViewingComparison.cs           |  2 +-
 9 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/front-end-components/src/components/chart-mode/component.tsx b/front-end-components/src/components/chart-mode/component.tsx
index fbbb5814a..fdbb8b623 100644
--- a/front-end-components/src/components/chart-mode/component.tsx
+++ b/front-end-components/src/components/chart-mode/component.tsx
@@ -15,7 +15,7 @@ export const ChartMode: React.FC<ChartModeProps> = (props) => {
           <h2 className="govuk-fieldset__heading">View as</h2>
         </legend>
         <div
-          className="govuk-radios govuk-radios--small govuk-radios--inline"
+          className="govuk-radios govuk-radios--small govuk-radios--inline chart-mode-radios"
           data-module="govuk-radios"
         >
           <div className="govuk-radios__item">
diff --git a/front-end-components/src/components/charts/horizontal-bar-chart/component.tsx b/front-end-components/src/components/charts/horizontal-bar-chart/component.tsx
index 7cdbcb090..56bdb8dd5 100644
--- a/front-end-components/src/components/charts/horizontal-bar-chart/component.tsx
+++ b/front-end-components/src/components/charts/horizontal-bar-chart/component.tsx
@@ -280,6 +280,7 @@ function HorizontalBarChartInner<TData extends ChartDataSeries>(
                     key={seriesName as string}
                     dataKey={seriesName as string}
                     stackId={config?.stackId}
+                    isAnimationActive={false}
                   >
                     {filteredData.map((entry, dataIndex) =>
                       renderCell(entry, dataIndex, seriesIndex, config)
diff --git a/front-end-components/src/components/charts/line-chart/component.tsx b/front-end-components/src/components/charts/line-chart/component.tsx
index 2b8032f6b..1c6580d52 100644
--- a/front-end-components/src/components/charts/line-chart/component.tsx
+++ b/front-end-components/src/components/charts/line-chart/component.tsx
@@ -187,6 +187,7 @@ function LineChartInner<TData extends ChartDataSeries>(
             true
           )
         }
+        isAnimationActive={false}
       ></Line>
     );
   };
diff --git a/front-end-components/src/components/charts/vertical-bar-chart/component.tsx b/front-end-components/src/components/charts/vertical-bar-chart/component.tsx
index 7f0d21c56..0c224f146 100644
--- a/front-end-components/src/components/charts/vertical-bar-chart/component.tsx
+++ b/front-end-components/src/components/charts/vertical-bar-chart/component.tsx
@@ -176,7 +176,11 @@ function VerticalBarChartInner<TData extends ChartDataSeries>(
             />
           )}
           {visibleSeriesNames.map((seriesName, seriesIndex) => (
-            <Bar key={seriesName as string} dataKey={seriesName as string}>
+            <Bar
+              key={seriesName as string}
+              dataKey={seriesName as string}
+              isAnimationActive={false}
+            >
               {data.map((entry, dataIndex) =>
                 renderCell(entry, dataIndex, seriesName, seriesIndex)
               )}
diff --git a/front-end-components/src/components/share-content-by-elements/component.tsx b/front-end-components/src/components/share-content-by-elements/component.tsx
index c7aaf18a7..2a5f79f5c 100644
--- a/front-end-components/src/components/share-content-by-elements/component.tsx
+++ b/front-end-components/src/components/share-content-by-elements/component.tsx
@@ -10,6 +10,7 @@ export const ShareContentByElements: React.FC<ShareContentByElementsProps> = ({
   showProgress,
   showTitles,
   label,
+  onClick,
   ...props
 }) => {
   const [imagesLoading, setImagesLoading] = useState<boolean>();
@@ -31,7 +32,13 @@ export const ShareContentByElements: React.FC<ShareContentByElementsProps> = ({
   return (
     <ShareContent
       disabled={imagesLoading || disabled}
-      onSaveClick={async () => await downloadPngs()}
+      onSaveClick={async () => {
+        if (onClick) {
+          await onClick();
+        }
+
+        await downloadPngs();
+      }}
       {...props}
     >
       <>
diff --git a/front-end-components/src/components/share-content-by-elements/types.tsx b/front-end-components/src/components/share-content-by-elements/types.tsx
index f94b7d169..d475e9ace 100644
--- a/front-end-components/src/components/share-content-by-elements/types.tsx
+++ b/front-end-components/src/components/share-content-by-elements/types.tsx
@@ -11,6 +11,7 @@ export type ShareContentByElementsProps = Omit<
 > & {
   elementsSelector: () => ElementAndTitle[];
   label: string;
+  onClick: () => Promise<void>;
   showProgress?: boolean;
   showTitles?: boolean;
 };
diff --git a/front-end-components/src/main.tsx b/front-end-components/src/main.tsx
index c3d5d13e7..c584c602c 100644
--- a/front-end-components/src/main.tsx
+++ b/front-end-components/src/main.tsx
@@ -913,6 +913,19 @@ if (shareContentByElementClassNameElements) {
       root.render(
         <React.StrictMode>
           <ShareContentByElements
+            onClick={async () => {
+              const radio = document.getElementById(
+                "mode-chart"
+              ) as HTMLInputElement;
+              if (radio && radio.checked === false) {
+                radio.click();
+                await new Promise<void>((resolve) => {
+                  setTimeout(() => {
+                    resolve();
+                  }, 1000);
+                });
+              }
+            }}
             elementsSelector={() => {
               const results = [];
               const elements =
diff --git a/web/tests/Web.Integration.Tests/Pages/Schools/WhenViewingComparison.cs b/web/tests/Web.Integration.Tests/Pages/Schools/WhenViewingComparison.cs
index 7130ed766..9cbdd101e 100644
--- a/web/tests/Web.Integration.Tests/Pages/Schools/WhenViewingComparison.cs
+++ b/web/tests/Web.Integration.Tests/Pages/Schools/WhenViewingComparison.cs
@@ -127,7 +127,7 @@ private static void AssertPageLayout(IHtmlDocument page, School school)
         var comparisonComponent = page.GetElementById("compare-your-costs");
         Assert.NotNull(comparisonComponent);
 
-        var toolsListSection = page.Body.SelectSingleNode("//main/div/div[5]");
+        var toolsListSection = page.Body.SelectSingleNode("//main/div/div[6]");
         DocumentAssert.Heading2(toolsListSection, "Benchmarking and planning tools");
 
         var toolsLinks = toolsListSection.ChildNodes.QuerySelectorAll("ul> li > h3 > a").ToList();
diff --git a/web/tests/Web.Integration.Tests/Pages/Trusts/WhenViewingComparison.cs b/web/tests/Web.Integration.Tests/Pages/Trusts/WhenViewingComparison.cs
index cef1244ce..2c39e1ef8 100644
--- a/web/tests/Web.Integration.Tests/Pages/Trusts/WhenViewingComparison.cs
+++ b/web/tests/Web.Integration.Tests/Pages/Trusts/WhenViewingComparison.cs
@@ -107,7 +107,7 @@ private static void AssertPageLayout(IHtmlDocument page, Trust trust)
         Assert.Equal(expectedPhases.ToJson(Formatting.None), dataPhases);
 
 
-        var toolsSection = page.Body.SelectSingleNode("//main/div/div[4]");
+        var toolsSection = page.Body.SelectSingleNode("//main/div/div[5]");
         DocumentAssert.Heading2(toolsSection, "Benchmarking and planning tools");
 
         var toolsLinks = toolsSection.ChildNodes.QuerySelectorAll("ul> li > h3 > a").ToList();