Merge pull request #197 from Open-Earth-Foundation/ON-670

feat(ON-670): responsive datacoverage page
Open-Earth-Foundation · Aug 22, 2023 · d4931f0 · d4931f0
2 parents 9e46642 + e5ef38b
commit d4931f0
Show file tree

Hide file tree

Showing 3 changed files with 484 additions and 66 deletions.
diff --git a/ui/src/components/data-coverage/Container/Container.module.scss b/ui/src/components/data-coverage/Container/Container.module.scss
@@ -1,6 +1,22 @@
 .root{
     width: 100%;
-    padding-left: 64px;
-    padding-right: 64px;
+    padding-left: 16px;
+    padding-right: 16px;
+    display: flex;
 }
 
+@media screen and (min-width: 600px) {
+    .root{
+        width: 100%;
+        padding-left: 64px;
+        padding-right: 64px;
+    }
+}
+
+@media screen and (min-width: 905px) {
+    .root{
+        width: 100%;
+        padding-left: 64px;
+        padding-right: 64px;
+    }
+}
diff --git a/ui/src/components/data-coverage/DataCoveragPage.tsx b/ui/src/components/data-coverage/DataCoveragPage.tsx
@@ -154,8 +154,10 @@ const DataCoveragePage:FC<DataCoveragePageProps> = ({
             }}>
                 <Container>
                     <div className={style.heroText}>
-                        <h1 className={style.h1Black}>Welcome to the </h1>
-                        <h1 className={style.h1Green}>Data Visualization Dashboard</h1>
+                        <div>
+                            <h1 className={style.h1Black}>Welcome to the </h1>
+                            <h1 className={style.h1Green}>Data Visualization Dashboard</h1>
+                        </div>
                         <p>
                             This is where to find emissions and pledges data 
                             we have on Open Climate and the data we still need.
@@ -248,7 +250,7 @@ const DataCoveragePage:FC<DataCoveragePageProps> = ({
                         <div className={style.chartwrapper}>
                             <div className={style.chart}>
                                 <p className={style.chartDescription}>Percentage of Actors with Emissions and Pledges Data</p>
-                                <ResponsiveContainer width="100%" height="100%">
+                                <ResponsiveContainer className={style.cr}>
                                     <BarChart
                                         width={500}
                                         height={300}
@@ -262,7 +264,10 @@ const DataCoveragePage:FC<DataCoveragePageProps> = ({
                                     >
                                         <CartesianGrid strokeDasharray="3 3" stroke="#E6E7FF" height={1}/>
                                         <XAxis dataKey="name" capHeight={30} />
-                                        <YAxis stroke='eeffee'/>
+                                        <YAxis tick={(props)=>(
+                                                <text {...props} className={style.tickText}>
+                                                    {props.payload.value} %
+                                                </text>)} stroke='eeffee'/>
                                         <Legend content={<LegendContent  />}/>
                                         <Bar barSize={100} style={{marginRight: "10px"}} dataKey="Emissions" fill="#FA7200">
                                             <LabelList