fix design

UNDP-Data · Jan 27, 2025 · 41bc0db · 41bc0db
1 parent a9d65ac
commit 41bc0db
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 41 deletions.
diff --git a/src/HomePage/GlobalHomePage.tsx b/src/HomePage/GlobalHomePage.tsx
@@ -58,6 +58,14 @@ const Button = styled.button`
   border: 0;
 `;
 
+const FileNameChip = styled.div`
+  font-size: 1rem;
+  padding: 0.5rem;
+  background-color: var(--gray-300);
+  font-weight: bold;
+  margin: 2px;
+`;
+
 const HeaderTextDiv = styled.div`
   position: absolute;
   top: 0;
@@ -942,12 +950,47 @@ export const GlobalHomePage = () => {
                     )
                     : data
                       ? (
-                        <VNRAnalysis
-                          data={data.mode === 'analyze' || data.mode === 'defaultDocs' ? data.data : data}
-                          document={selectedFile.map((d: any) => d.name)}
-                          defaultDocs={false}
-                          onlyBubbleChart
-                        />
+                        <div
+                          className='margin-top-11'
+                        >
+                          <div className='flex-div flex-vert-align-center flex-wrap'>
+                            <h5 className='undp-typography margin-bottom-00'>
+                              National Priorities Based on
+                            </h5>
+                            {selectedFile.map((d: any) => d.name).length === 1 ? (
+                              <FileNameChip>
+                                {selectedFile.link ? (
+                                  <a href={selectedFile[0].link} target='_blank' rel='noreferrer' className='undp-style'>{selectedFile[0].name}</a>
+                                ) : (
+                                  selectedFile[0].name
+                                )}
+                              </FileNameChip>
+                            ) : (
+                              <Popover
+                                title='Analysis based on the following files'
+                                placement='topRight'
+                                content={(
+                                  <div style={{ maxHeight: '200px', overflowY: 'scroll' }}>
+                                    {selectedFile.map((d: any) => d.name) && selectedFile.map((d: any) => d.name).map((d: any, i: number) => <FileNameChip key={i}>{d}</FileNameChip>)}
+                                  </div>
+                            )}
+                              >
+                                <Button>
+                                  {selectedFile.map((d: any) => d.name).length}
+                                  {' '}
+                                  file(s)
+                                </Button>
+                              </Popover>
+                            )}
+                          </div>
+                          <VNRAnalysis
+                            data={data.mode === 'analyze' || data.mode === 'defaultDocs' ? data.data : data}
+                            document={selectedFile.map((d: any) => d.name)}
+                            defaultDocs={false}
+                            onlyBubbleChart
+                            hideTitle
+                          />
+                        </div>
                       )
                       : null
                 }

diff --git a/src/Priorities/BubbleChart.tsx b/src/Priorities/BubbleChart.tsx
@@ -49,7 +49,7 @@ export const BubbleChart = (props: Props) => {
   }, [data, graphOrientation]);
   return (
     <>
-      <div className='max-width-1440 margin-top-09 flex-div flex-wrap' style={{ padding: '0 1rem', gap: 'var(--spacing-05)' }}>
+      <div className='max-width-1440 margin-top-09 flex-div flex-wrap' style={{ padding: !statusAvailable ? 0 : '0 1rem', gap: 'var(--spacing-05)' }}>
         <div style={{
           width: 'calc(25% - 1rem)',
           minWidth: '20rem',

diff --git a/src/Priorities/VNRAnalysis.tsx b/src/Priorities/VNRAnalysis.tsx
@@ -17,6 +17,7 @@ interface Props {
   document: any;
   defaultDocs: boolean;
   onlyBubbleChart: boolean;
+  hideTitle?: boolean;
 }
 
 interface SDGHoveredProps {
@@ -69,6 +70,7 @@ export const VNRAnalysis = (props: Props) => {
     goalStatuses,
     defaultDocs,
     onlyBubbleChart,
+    hideTitle,
   } = props;
   const [selectedSDG, setSelectedSDG] = useState<any>(null);
   const [hoveredSDG, setHoveredSDG] = useState<null | SDGHoveredProps>(null);
@@ -105,43 +107,48 @@ export const VNRAnalysis = (props: Props) => {
     <>
       <div className=' margin-top-00' style={{ padding: onlyBubbleChart ? 0 : 'var(--spacing-13) var(--spacing-13) var(--spacing-09) var(--spacing-13)' }}>
         <div className='max-width-1440'>
-          <div className='flex-div flex-vert-align-center flex-wrap'>
-            <h2 className='undp-typography margin-bottom-00'>
-              National Priorities Based on
-            </h2>
-            {defaultDocs && document.length === 1 ? (
-              <FileNameChip>
-                {document[0].link ? (
-                  <a href={document[0].link} target='_blank' rel='noreferrer' className='undp-style'>{document[0].name}</a>
-                ) : (
-                  document[0].name
-                )}
-              </FileNameChip>
-            ) : (
-              <Popover
-                title='Analysis based on the following files'
-                placement='topRight'
-                content={(
-                  defaultDocs ? (
-                    <div style={{ maxHeight: '200px', overflowY: 'scroll' }}>
-                      {document && document.map((d: any, i: number) => (d.link ? <FileNameChip key={i}><a href={d.link} target='_blank' rel='noreferrer' className='undp-style'>{d.name}</a></FileNameChip> : <FileNameChip key={i}>{d.name}</FileNameChip>))}
-                    </div>
-                  )
-                    : (
+          {
+            hideTitle ? null
+              : (
+                <div className='flex-div flex-vert-align-center flex-wrap'>
+                  <h2 className='undp-typography margin-bottom-00'>
+                    National Priorities Based on
+                  </h2>
+                  {defaultDocs && document.length === 1 ? (
+                    <FileNameChip>
+                      {document[0].link ? (
+                        <a href={document[0].link} target='_blank' rel='noreferrer' className='undp-style'>{document[0].name}</a>
+                      ) : (
+                        document[0].name
+                      )}
+                    </FileNameChip>
+                  ) : (
+                    <Popover
+                      title='Analysis based on the following files'
+                      placement='topRight'
+                      content={(
+                    defaultDocs ? (
                       <div style={{ maxHeight: '200px', overflowY: 'scroll' }}>
-                        {document && document.map((d: any, i: number) => <FileNameChip key={i}>{d}</FileNameChip>)}
+                        {document && document.map((d: any, i: number) => (d.link ? <FileNameChip key={i}><a href={d.link} target='_blank' rel='noreferrer' className='undp-style'>{d.name}</a></FileNameChip> : <FileNameChip key={i}>{d.name}</FileNameChip>))}
                       </div>
                     )
-                )}
-              >
-                <Button>
-                  {document.length}
-                  {' '}
-                  file(s)
-                </Button>
-              </Popover>
-            )}
-          </div>
+                      : (
+                        <div style={{ maxHeight: '200px', overflowY: 'scroll' }}>
+                          {document && document.map((d: any, i: number) => <FileNameChip key={i}>{d}</FileNameChip>)}
+                        </div>
+                      )
+                  )}
+                    >
+                      <Button>
+                        {document.length}
+                        {' '}
+                        file(s)
+                      </Button>
+                    </Popover>
+                  )}
+                </div>
+              )
+          }
           <BubbleChart statusAvailable={goalStatuses !== undefined} data={dataWithStatuses} setSelectedSDG={setSelectedSDG} />
         </div>
       </div>