feat: Ensured if 'table' mode selected in chart radios then first sel…

…ect 'chart' before saving chart images
DFE-Digital · Jan 23, 2025 · d9f195d · d9f195d
1 parent 0f6b749
commit d9f195d
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();
-Original file line number
+Diff line change
@@ Expand Up / @@ -187,6 +187,7 @@ function LineChartInner<TData extends ChartDataSeries>( @@
                 true
               )
             }
+            isAnimationActive={false}
           ></Line>
         );
       };
@@ Expand Down @@