Added 'Save all chart images' button to School and Trust cost comparison pages

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

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",

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">

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>
@@ -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)

front-end-components/src/components/charts/line-chart/component.tsx

@@ -187,6 +187,7 @@ function LineChartInner<TData extends ChartDataSeries>(
             true
           )
         }
+        isAnimationActive={false}
       ></Line>
     );
   };
@@ -195,7 +196,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>

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>
@@ -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)
               )}

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>
+  );
+};

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";

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;
+    }
+}

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;
+};