From 296c7d22ac7b40d9bc31942d7cc63f37b0cc3878 Mon Sep 17 00:00:00 2001
From: Mustafa Saifee <mustafa.saifee@undp.org>
Date: Mon, 10 Jun 2024 20:10:07 +0300
Subject: [PATCH] Fix layput issue for small screens

---
 src/BarChart/index.tsx           | 36 ++++++++++++++++----------------
 src/DebtInterestBars/index.tsx   | 33 +++++++++++++++--------------
 src/QuantilesLineChart/index.tsx | 33 +++++++++++++++--------------
 src/StackedBarChart/index.tsx    | 33 +++++++++++++++--------------
 4 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx
index 26379f7..0b52c48 100644
--- a/src/BarChart/index.tsx
+++ b/src/BarChart/index.tsx
@@ -50,10 +50,27 @@ export function BarChart(props: Props) {
             income {domain[0]} - {domain[1]}
           </h6>
           <div className='flex-div flex-vert-align-center no-shrink'>
+            <DownloadImageButton element={divToBeDownloaded} />
+            <DownloadDataButton link='https://github.com/UNDP-Data/dv-debt-all-data-repo/raw/main/ExcelData/ExternalDebtService.xlsx' />
+          </div>
+        </div>
+        <div className='margin-bottom-07 flex-div flex-vert-align-center'>
+          <Select
+            options={categories.map(d => ({
+              label: d.description,
+              value: d.description,
+            }))}
+            className='undp-select'
+            style={{ width: '100%' }}
+            onChange={el => {
+              setCategorySelection(el);
+            }}
+            value={categorySelection}
+          />
+          <div className='no-shrink flex-div flex-vert-align-center'>
             <Radio.Group
               optionType='button'
               className='undp-button-radio'
-              size='small'
               defaultValue={totalPercentSelection}
               onChange={(el: RadioChangeEvent) => {
                 setTotalPercentSelection(el.target.value);
@@ -68,7 +85,6 @@ export function BarChart(props: Props) {
             <Radio.Group
               optionType='button'
               className='undp-button-radio'
-              size='small'
               defaultValue={revenueExportsSelection}
               onChange={(el: RadioChangeEvent) => {
                 setRevenueExportsSelection(el.target.value);
@@ -80,24 +96,8 @@ export function BarChart(props: Props) {
                 </Radio>
               ))}
             </Radio.Group>
-            <DownloadImageButton element={divToBeDownloaded} />
-            <DownloadDataButton link='https://github.com/UNDP-Data/dv-debt-all-data-repo/raw/main/ExcelData/ExternalDebtService.xlsx' />
           </div>
         </div>
-        <div className='margin-bottom-07'>
-          <Select
-            options={categories.map(d => ({
-              label: d.description,
-              value: d.description,
-            }))}
-            className='undp-select'
-            style={{ width: '100%' }}
-            onChange={el => {
-              setCategorySelection(el);
-            }}
-            value={categorySelection}
-          />
-        </div>
         <Graph
           data={data.filter(d => d.Group === categorySelection)}
           totalPercentOption={totalPercentSelection}
diff --git a/src/DebtInterestBars/index.tsx b/src/DebtInterestBars/index.tsx
index def481a..b939523 100644
--- a/src/DebtInterestBars/index.tsx
+++ b/src/DebtInterestBars/index.tsx
@@ -33,28 +33,13 @@ export function DebtInterestBars(props: Props) {
             percent of revenue today relative to a decade ago
           </h6>
           <div className='flex-div flex-vert-align-center no-shrink'>
-            <Radio.Group
-              optionType='button'
-              className='undp-button-radio'
-              size='small'
-              defaultValue={totalPercentSelection}
-              onChange={(el: RadioChangeEvent) => {
-                setTotalPercentSelection(el.target.value);
-              }}
-            >
-              {numberPercentOptions.map((d, i) => (
-                <Radio key={i} className='undp-radio' value={d}>
-                  {d}
-                </Radio>
-              ))}
-            </Radio.Group>
             {divToBeDownloaded ? (
               <DownloadImageButton element={divToBeDownloaded} />
             ) : null}
             <DownloadDataButton link='https://github.com/UNDP-Data/dv-debt-all-data-repo/raw/main/ExcelData/DebtNetInterest.xlsx' />
           </div>
         </div>
-        <div className='margin-bottom-07'>
+        <div className='margin-bottom-07 flex-div flex-vert-align-center'>
           <Select
             options={categories.map(d => ({
               label: d.description,
@@ -67,6 +52,22 @@ export function DebtInterestBars(props: Props) {
             }}
             value={categorySelection}
           />
+          <div className='flex-div no-shrink'>
+            <Radio.Group
+              optionType='button'
+              className='undp-button-radio'
+              defaultValue={totalPercentSelection}
+              onChange={(el: RadioChangeEvent) => {
+                setTotalPercentSelection(el.target.value);
+              }}
+            >
+              {numberPercentOptions.map((d, i) => (
+                <Radio key={i} className='undp-radio' value={d}>
+                  {d}
+                </Radio>
+              ))}
+            </Radio.Group>
+          </div>
         </div>
         <Graph
           data={data.filter(
diff --git a/src/QuantilesLineChart/index.tsx b/src/QuantilesLineChart/index.tsx
index abf4189..240fa86 100644
--- a/src/QuantilesLineChart/index.tsx
+++ b/src/QuantilesLineChart/index.tsx
@@ -36,26 +36,11 @@ export function QuantilesLineChart(props: Props) {
             {Math.max(...dateDomain)})
           </h6>
           <div className='flex-div flex-vert-align-center no-shrink'>
-            <Radio.Group
-              optionType='button'
-              className='undp-button-radio'
-              size='small'
-              defaultValue={totalExternalSelection}
-              onChange={(el: RadioChangeEvent) =>
-                setTotalExternalSelection(el.target.value)
-              }
-            >
-              {totalExternalOptions.map((d, i) => (
-                <Radio key={i} className='undp-radio' value={d}>
-                  {d[0].toUpperCase() + d.slice(1)}
-                </Radio>
-              ))}
-            </Radio.Group>
             <DownloadImageButton element={divToBeDownloaded} />
             <DownloadDataButton link='https://github.com/UNDP-Data/dv-debt-all-data-repo/raw/main/ExcelData/DebtToGDPQuantile.xlsx' />
           </div>
         </div>
-        <div className='margin-bottom-07'>
+        <div className='margin-bottom-07 flex-div flex-vert-align-center'>
           <Select
             options={categories.map(d => ({
               label: d.description,
@@ -68,6 +53,22 @@ export function QuantilesLineChart(props: Props) {
             }}
             value={categorySelection}
           />
+          <div className='flex-div no-shrink'>
+            <Radio.Group
+              optionType='button'
+              className='undp-button-radio'
+              defaultValue={totalExternalSelection}
+              onChange={(el: RadioChangeEvent) =>
+                setTotalExternalSelection(el.target.value)
+              }
+            >
+              {totalExternalOptions.map((d, i) => (
+                <Radio key={i} className='undp-radio' value={d}>
+                  {d[0].toUpperCase() + d.slice(1)}
+                </Radio>
+              ))}
+            </Radio.Group>
+          </div>
         </div>
         <Graph
           data={data.filter(d => d.Group === categorySelection)}
diff --git a/src/StackedBarChart/index.tsx b/src/StackedBarChart/index.tsx
index 618dde5..f4936a8 100644
--- a/src/StackedBarChart/index.tsx
+++ b/src/StackedBarChart/index.tsx
@@ -60,26 +60,11 @@ export function StackedBarChart(props: Props) {
             rating classes
           </h6>
           <div className='flex-div flex-vert-align-center no-shrink'>
-            <Radio.Group
-              optionType='button'
-              className='undp-button-radio'
-              size='small'
-              defaultValue={creditDsaSelection}
-              onChange={(el: RadioChangeEvent) => {
-                setCreditDsaSelection(el.target.value);
-              }}
-            >
-              {creditDsaOptions.map((d, i) => (
-                <Radio key={i} className='undp-radio' value={d}>
-                  {d}
-                </Radio>
-              ))}
-            </Radio.Group>
             <DownloadImageButton element={divToBeDownloaded} />
             <DownloadDataButton link='https://github.com/UNDP-Data/dv-debt-all-data-repo/raw/main/ExcelData/CreditAndDSARating.xlsx' />
           </div>
         </div>
-        <div className='margin-bottom-07'>
+        <div className='margin-bottom-07 flex-div flex-vert-align-center'>
           <Select
             options={categories.map(d => ({
               label: d.description,
@@ -92,6 +77,22 @@ export function StackedBarChart(props: Props) {
             }}
             value={categorySelection}
           />
+          <div className='flex-div no-shrink'>
+            <Radio.Group
+              optionType='button'
+              className='undp-button-radio'
+              defaultValue={creditDsaSelection}
+              onChange={(el: RadioChangeEvent) => {
+                setCreditDsaSelection(el.target.value);
+              }}
+            >
+              {creditDsaOptions.map((d, i) => (
+                <Radio key={i} className='undp-radio' value={d}>
+                  {d}
+                </Radio>
+              ))}
+            </Radio.Group>
+          </div>
         </div>
         <div ref={containerRef}>
           <Graph data={selectedData} svgWidth={svgWidth} />