changes for reusing code

src/AppExternalDebtQuantiles.tsx

@@ -2,7 +2,7 @@
 import { csv } from 'd3-fetch';
 import { useEffect, useState } from 'react';
 import { CategoryData, ChartSourceType } from './Types';
-import { QuantilesLinesExternalDebt } from './RegionLineChart/index2';
+import { RegionLineChartNoOptions } from './RegionLineChart/index1';
 import './style.css';
 
 function AppNetInterestQuantiles() {
@@ -29,12 +29,17 @@ function AppNetInterestQuantiles() {
   return (
     <div className='undp-container'>
       {externalDebtQuantiles && categoriesData1 ? (
-        <QuantilesLinesExternalDebt
+        <RegionLineChartNoOptions
           data={externalDebtQuantiles}
           categories={categoriesData1}
+          title='Public and publicly guaranteed total external debt service as a
+          percentage of revenue'
+          yAxisName='Total debt service as % of revenue'
+          id='externalDebtQuantilesLines'
           chartSource={
             sourcesData.filter(d => d.graph === 'External debt quantiles')[0]
           }
+          option='external'
         />
       ) : null}
     </div>

src/AppNetInterestQuantiles.tsx

@@ -32,11 +32,15 @@ function AppNetInterestQuantiles() {
         <RegionLineChartNoOptions
           data={debtNetInterest}
           categories={categoriesData1}
+          title='General government net interest payments as percentage of revenue'
+          yAxisName='Net interest as % of revenue'
+          id='netInterestLine'
           chartSource={
             sourcesData.filter(
               d => d.graph === 'Net interest payments to revenue',
             )[0]
           }
+          option='netInterest'
         />
       ) : null}
     </div>

src/DebtInterestBars/index.tsx

@@ -56,7 +56,7 @@ export function DebtInterestBars(props: Props) {
                       UNDPColorModule.categoricalColors.colors[0],
                   }}
                 />
-                <div className='small-font'>{(periods as any)[0]}</div>
+                <div className='small-font'>Average {(periods as any)[0]}</div>
               </div>
               <div className='legend-item'>
                 <div
@@ -66,7 +66,7 @@ export function DebtInterestBars(props: Props) {
                       UNDPColorModule.categoricalColors.colors[1],
                   }}
                 />
-                <div className='small-font'>{(periods as any)[1]}</div>
+                <div className='small-font'>Average {(periods as any)[1]}</div>
               </div>
             </div>
             <div>

src/RegionLineChart/index1.tsx

@@ -8,11 +8,15 @@ import { Graph } from './Graph';
 interface Props {
   data: object[];
   categories: CategoryData[];
+  title: string;
+  yAxisName: string;
+  id: string;
   chartSource: ChartSourceType;
+  option: string;
 }
 
 export function RegionLineChartNoOptions(props: Props) {
-  const { data, categories, chartSource } = props;
+  const { data, categories, title, yAxisName, id, chartSource, option } = props;
   const [categorySelection, setCategorySelection] = useState('All developing');
   return (
     <>
@@ -39,17 +43,17 @@ export function RegionLineChartNoOptions(props: Props) {
         <div className='flex-div flex-space-between flex-wrap'>
           <div>
             <h6 className='undp-typography margin-bottom-01 margin-top-03'>
-              General government net interest payments as percentage of revenue
+              {title}
             </h6>
           </div>
         </div>
         <Graph
           data={data.filter(d => (d as any).Group === categorySelection)}
-          option='netInterest'
+          option={option}
           svgWidth={960}
           svgHeight={550}
-          id='netInterestLine'
-          yAxisName='Net interest as % of revenue'
+          id={id}
+          yAxisName={yAxisName}
         />
         {chartSource?.source ? (
           <p className='source'>{`Source: ${chartSource.source}`}</p>