chore: show N/A for ratio if we can't calculate it (#10580)

Also, change the widget title to reflect the order of the ratio.

Before:
<img width="214" height="105" alt="image"
src="https://github.com/user-attachments/assets/0e08e107-b142-4913-af06-a8ab7eed8cb7"
/>

<img width="280" height="153" alt="image"
src="https://github.com/user-attachments/assets/967ff1b4-ec44-4811-9a34-ad4979dbb761"
/>



After:
<img width="242" height="117" alt="image"
src="https://github.com/user-attachments/assets/ff43efee-81ad-4c6c-8513-960656b095b8"
/>

<img width="249" height="153" alt="image"
src="https://github.com/user-attachments/assets/47271484-1ba4-42c3-a85f-5db62e6560c3"
/>


Closes 1-4039

frontend/src/component/insights/calculate-ratio/calculate-ratio.test.ts

@@ -1,17 +1,17 @@
 import { calculateRatio } from './calculate-ratio.ts';
 
-test('A ratio of anything to 0 is 100', () => {
+test('A ratio of anything to 0 is N/A', () => {
-    expect(calculateRatio(0, 0)).toBe(100);
+    expect(calculateRatio(0, 0)).toBe('N/A');
-    expect(calculateRatio(5, 0)).toBe(100);
+    expect(calculateRatio(5, 0)).toBe('N/A');
 });
 
 test('Normal ratios work as expected', () => {
-    expect(calculateRatio(0, 1)).toBe(0);
+    expect(calculateRatio(0, 1)).toBe('0%');
-    expect(calculateRatio(1, 1)).toBe(100);
+    expect(calculateRatio(1, 1)).toBe('100%');
-    expect(calculateRatio(1, 2)).toBe(50);
+    expect(calculateRatio(1, 2)).toBe('50%');
-    expect(calculateRatio(5, 2)).toBe(250);
+    expect(calculateRatio(5, 2)).toBe('250%');
 });
 
 test('Numbers are rounded to the nearest integer', () => {
-    expect(calculateRatio(5, 9)).toBe(56);
+    expect(calculateRatio(5, 9)).toBe('56%');
 });

frontend/src/component/insights/calculate-ratio/calculate-ratio.ts

@@ -1,12 +1,11 @@
 export const calculateRatio = (
     antecedent: number,
     consequent: number,
-): number => {
+): string => {
-    const rawRatio = Math.round((antecedent / consequent) * 100);
+    if (consequent === 0) {
-
+        return 'N/A';
-    if (Number.isNaN(rawRatio) || rawRatio === Number.POSITIVE_INFINITY) {
-        return 100;
     }
+    const ratio = Math.round((antecedent / consequent) * 100);
 
-    return rawRatio;
+    return `${ratio}%`;
 };

frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveRatioTooltip.tsx

@@ -62,7 +62,7 @@ export const CreationArchiveRatioTooltip: FC<
                     fontWeight='bold'
                     sx={{ marginBottom: 1 }}
                 >
-                    Ratio {ratio}%
+                    Ratio {ratio}
                 </Typography>
 
                 <DataList>

frontend/src/component/insights/componentsStat/CreationArchiveStats/CreationArchiveStats.tsx

@@ -90,7 +90,7 @@ export const CreationArchiveStats: FC<CreationArchiveStatsProps> = ({
             <StyledRatioContainer>
                 <StyledPercentageRow>
                     <StyledRatioTypography>
-                        {isLoading ? '...' : `${currentRatio}%`}
+                        {isLoading ? '...' : currentRatio}
                     </StyledRatioTypography>
                     <HelpIcon tooltip='Ratio of archived flags to created flags'>
                         <StyledInfoIcon />

frontend/src/component/insights/sections/PerformanceInsights.tsx

@@ -113,7 +113,7 @@ export const PerformanceInsights: FC = () => {
             {isLifecycleGraphsEnabled && isEnterprise() ? (
                 <StyledWidget>
                     <StyledWidgetStats width={275}>
-                        <WidgetTitle title='Flags created vs archived' />
+                        <WidgetTitle title='Flags archived vs flags created' />
                         <CreationArchiveStats
                             groupedCreationArchiveData={
                                 groupedCreationArchiveData