Fix typo and chart explorer titles

Author: smdsgn

frontend/scripts/components/charts/ChartExplorer.tsx

@@ -79,10 +79,6 @@ const ChartContainer = styled.div`
     min-height: 450px;
 `;
 
-const TableSection = styled.div`
-    margin-top: 1.5rem;
-`;
-
 const Separator = styled.div`
     margin-top: 1.5rem;
     padding-top: 1.25rem;
@@ -205,24 +201,25 @@ const ChartExplorer: React.FC<ChartExplorerProps> = ({
                     </ChartContainer>
 
                     {hasTable && (
-                        <TableSection>
-                            <h6 className="fr-mb-1w">Données du graphique</h6>
+                        <Separator>
+                            <h6>Données du graphique</h6>
                             <ChartDataTable
                                 data={dataTable}
                                 title={chartTitle || ''}
                             />
-                        </TableSection>
+                        </Separator>
                     )}
 
                     {sources.length > 0 && (
                         <Separator>
+                            <h6>Sources</h6>
                             <ChartDataSource sources={sources} displayMode="text" />
                         </Separator>
                     )}
 
                     {children && (
                         <Separator>
-                            <h6 className="fr-mb-1w">Détails du calcul</h6>
+                            <h6>Détails du calcul</h6>
                             {children}
                         </Separator>
                     )}

frontend/scripts/components/pages/Friches/components/FrichesCharts.tsx

@@ -37,10 +37,9 @@ const DetailsFricheZonageEnvironnemental: React.FC = () => (
 
 const DetailsFricheBySize: React.FC = () => (
   <div>
-    <h6 className="fr-mb-1w">Calcul</h6>
     <p className="fr-text--xs">
       Les 4 catégories de taille sont déterminées à partir de l'ensemble des
-      tailles des friches à l'échelle nationale, d'après les friches incluent
+      tailles des friches à l'échelle nationale, d'après les friches incluses
       dans les données <strong>Cartofriches</strong>.
     </p>
   </div>
@@ -69,6 +68,12 @@ const DetailsFricheByZonageType: React.FC = () => (
   </div>
 );
 
+const FRICHE_DETAILS: Partial<Record<string, React.ReactNode>> = {
+  friche_zonage_environnemental: <DetailsFricheZonageEnvironnemental />,
+  friche_surface: <DetailsFricheBySize />,
+  friche_zonage_type: <DetailsFricheByZonageType />,
+};
+
 export const FrichesCharts: React.FC = () => {
   const { landId, landType, showCharts } = useFrichesContext();
 
@@ -86,13 +91,7 @@ export const FrichesCharts: React.FC = () => {
               sources={chart.sources}
               showDataTable={true}
             >
-              {chart.id === "friche_zonage_environnemental" && (
-                <DetailsFricheZonageEnvironnemental />
-              )}
-              {chart.id === "friche_surface" && <DetailsFricheBySize />}
-              {chart.id === "friche_zonage_type" && (
-                <DetailsFricheByZonageType />
-              )}
+              {FRICHE_DETAILS[chart.id]}
             </FrichesChart>
           </BaseCard>
         </div>