From 12138047bc030c0893534065b2224566b2cc0540 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Tue, 20 Feb 2024 15:30:01 +0530
Subject: [PATCH 01/28] add graph

---
 src/temp/CarbonCapture/Graph.tsx   | 21 +++++++++
 src/temp/stories/Graph.stories.tsx | 73 ++++++++++++++++++++++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 src/temp/CarbonCapture/Graph.tsx
 create mode 100644 src/temp/stories/Graph.stories.tsx

diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
new file mode 100644
index 0000000000..b6904295e4
--- /dev/null
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactApexChart from 'react-apexcharts';
+
+const Graph = ({ graphData }) => {
+  return (
+    <div>
+      <div id="chart">
+        <ReactApexChart
+          options={graphData.options}
+          series={graphData.series}
+          type="area"
+          height={153}
+          width={299}
+        />
+      </div>
+      <div id="html-dist"></div>
+    </div>
+  );
+};
+
+export default Graph;
diff --git a/src/temp/stories/Graph.stories.tsx b/src/temp/stories/Graph.stories.tsx
new file mode 100644
index 0000000000..4266cd25a7
--- /dev/null
+++ b/src/temp/stories/Graph.stories.tsx
@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Graph from '../CarbonCapture/Graph';
+
+const meta: Meta<typeof Graph> = {
+  component: Graph,
+};
+
+export default meta;
+type Story = StoryObj<typeof Graph>;
+
+const graphValues = {
+  series: [
+    {
+      name: 'series1',
+      data: [31, 40, 28, 51, 42, 109, 100],
+      color: '#219653',
+    },
+    {
+      name: 'series2',
+      data: [11, 32, 45, 32, 34, 52, 41],
+      color: '#BDBDBD',
+      strokeWidth: 1.202,
+    },
+  ],
+  options: {
+    chart: {
+      height: 153.752,
+      type: 'area',
+      width: 300,
+      toolbar: {
+        show: false,
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      curve: 'smooth',
+    },
+    xaxis: {
+      type: 'year',
+      categories: ['2018', '2023'],
+      // min: 2018,
+      // max: 2023,
+      stepSize: 6,
+      show: false,
+      axisTicks: {
+        show: false,
+      },
+      tooltip: {
+        enabled: false,
+      },
+      axisBorder: {
+        show: false,
+      },
+    },
+    yaxis: {
+      show: false,
+    },
+    grid: {
+      show: false,
+    },
+    legend: {
+      show: false,
+    },
+  },
+};
+
+export const TabsView: Story = {
+  args: {
+    graphData: graphValues,
+  },
+};

From 9b7385e770be7c960b19ed54ec96bd29037d020a Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Tue, 20 Feb 2024 15:30:59 +0530
Subject: [PATCH 02/28] modify graph

---
 src/temp/CarbonCapture/Graph.tsx | 141 ++++++++++++++++++++++++++++++-
 1 file changed, 138 insertions(+), 3 deletions(-)

diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index b6904295e4..daa9d22847 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -1,13 +1,148 @@
 import React from 'react';
 import ReactApexChart from 'react-apexcharts';
+import styles from './Graph.module.scss';
+import { useTranslation } from 'next-i18next';
+import ReactDOMServer from 'react-dom/server';
 
-const Graph = ({ graphData }) => {
+export const Tooltip = ({ headerTitle, subTitle, yoyValue, date }) => {
+  const {
+    i18n: { language },
+  } = useTranslation();
+
+  return (
+    <div className={styles.tooltipContainer}>
+      <div className={styles.header}>
+        <p className={styles.title}>{headerTitle}</p>
+        <p className={styles.subtitle}>{subTitle}</p>
+      </div>
+      <div className={styles.body}>
+        <p className={styles.yoyValue}>
+          {yoyValue}
+          {'  YoY'}
+        </p>
+        <p className={styles.date}>{date}</p>
+      </div>
+    </div>
+  );
+};
+
+const Graph = ({ years }) => {
+  const graphValues = {
+    series: [
+      {
+        name: 'series1',
+        data: [21.4, 21.27, 20.78, 21.7, 21.78],
+        color: '#219653',
+        zIndex: 2,
+      },
+      {
+        name: 'series2',
+        data: [22.54, 22.65, 21.8, 21.85, 22.03],
+        color: '#BDBDBD',
+        zIndex: 1,
+      },
+    ],
+    options: {
+      tooltip: {
+        custom: function () {
+          const getToolTip = () => {
+            return (
+              <Tooltip
+                headerTitle={'6.9t CO2 removed'}
+                subTitle={'3.8t Biomass'}
+                yoyValue={'+4%'}
+                date={'Aug 2020'}
+              />
+            );
+          };
+
+          return ReactDOMServer.renderToString(getToolTip());
+        },
+      },
+      markers: {
+        size: 0,
+        colors: ['#fff', 'transparent'],
+        strokeColors: ['#219653', 'transparent'],
+        strokeOpacity: [1, 1],
+        strokeWidth: 2.2,
+        hover: {
+          size: 6,
+        },
+      },
+      chart: {
+        // height: 153.752,
+        type: 'area',
+        width: 300,
+        toolbar: {
+          show: false,
+        },
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      stroke: {
+        curve: 'smooth',
+        width: 2.2,
+      },
+      xaxis: {
+        type: 'year',
+        labels: {
+          formatter: function (index: number) {
+            if (index === 2) {
+              return [years[1], 'Project Launch'];
+            } else if (index == years.length) {
+              return years[index - 1];
+            } else {
+              return '';
+            }
+          },
+          minHeight: 35,
+          style: {
+            colors: '#4F4F4F',
+            fontSize: 10,
+          },
+          padding: {
+            top: 8, // Increase top padding to provide more space for the second line
+          },
+        },
+        categories: [],
+        show: false,
+        axisTicks: {
+          show: false,
+        },
+        tooltip: {
+          enabled: false,
+        },
+        axisBorder: {
+          show: false,
+        },
+      },
+      yaxis: {
+        show: false,
+      },
+      grid: {
+        show: false,
+      },
+      legend: {
+        show: false,
+      },
+      annotations: {
+        xaxis: [
+          {
+            x: [years[1], 'Project Launch'],
+            strokeDashArray: 1,
+            borderColor: '#4F4F4F',
+          },
+        ],
+      },
+    },
+  };
   return (
     <div>
       <div id="chart">
         <ReactApexChart
-          options={graphData.options}
-          series={graphData.series}
+          options={graphValues.options}
+          series={graphValues.series}
           type="area"
           height={153}
           width={299}

From dd0567afb69fcc3ff7a0f1fb23ca121b9bfa3fd0 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Tue, 20 Feb 2024 15:31:21 +0530
Subject: [PATCH 03/28] change stories for graph

---
 src/temp/stories/Graph.stories.tsx | 65 +++---------------------------
 1 file changed, 5 insertions(+), 60 deletions(-)

diff --git a/src/temp/stories/Graph.stories.tsx b/src/temp/stories/Graph.stories.tsx
index 4266cd25a7..f60409b023 100644
--- a/src/temp/stories/Graph.stories.tsx
+++ b/src/temp/stories/Graph.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Graph from '../CarbonCapture/Graph';
+import Graph, { Tooltip } from '../CarbonCapture/Graph';
+import ReactDOMServer from 'react-dom/server';
 
 const meta: Meta<typeof Graph> = {
   component: Graph,
@@ -8,66 +9,10 @@ const meta: Meta<typeof Graph> = {
 export default meta;
 type Story = StoryObj<typeof Graph>;
 
-const graphValues = {
-  series: [
-    {
-      name: 'series1',
-      data: [31, 40, 28, 51, 42, 109, 100],
-      color: '#219653',
-    },
-    {
-      name: 'series2',
-      data: [11, 32, 45, 32, 34, 52, 41],
-      color: '#BDBDBD',
-      strokeWidth: 1.202,
-    },
-  ],
-  options: {
-    chart: {
-      height: 153.752,
-      type: 'area',
-      width: 300,
-      toolbar: {
-        show: false,
-      },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    stroke: {
-      curve: 'smooth',
-    },
-    xaxis: {
-      type: 'year',
-      categories: ['2018', '2023'],
-      // min: 2018,
-      // max: 2023,
-      stepSize: 6,
-      show: false,
-      axisTicks: {
-        show: false,
-      },
-      tooltip: {
-        enabled: false,
-      },
-      axisBorder: {
-        show: false,
-      },
-    },
-    yaxis: {
-      show: false,
-    },
-    grid: {
-      show: false,
-    },
-    legend: {
-      show: false,
-    },
-  },
-};
+const years = [2019, 2020, 2021, 2022, 2023];
 
-export const TabsView: Story = {
+export const Preview: Story = {
   args: {
-    graphData: graphValues,
+    years: years,
   },
 };

From 48a56fbfbb57622fd9cd8d865d3e06dbafa0ed35 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Tue, 20 Feb 2024 15:31:38 +0530
Subject: [PATCH 04/28] add style for tooltips

---
 src/temp/CarbonCapture/Graph.module.scss | 37 ++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/temp/CarbonCapture/Graph.module.scss

diff --git a/src/temp/CarbonCapture/Graph.module.scss b/src/temp/CarbonCapture/Graph.module.scss
new file mode 100644
index 0000000000..7d94fcb03b
--- /dev/null
+++ b/src/temp/CarbonCapture/Graph.module.scss
@@ -0,0 +1,37 @@
+.tooltipContainer {
+ 
+    .header {
+        padding: 10px 10px 8px 10px;
+        .title {
+            color: #333;
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 5px;
+        }
+        .subtitle {
+            font-size: 8px;
+            font-weight: 400;
+        }
+    }
+    .body {
+        background-color: rgba(33, 150, 83, 0.10);
+        padding: 4px 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .yoyValue {
+            color: #377E36;
+            font-weight: 700;
+            font-size: 9px;
+        }
+        .date {
+            font-size: 6px;
+            font-weight: 500;
+            color: #000;
+            opacity: 0.5;
+        }
+    }
+}
+.apexcharts-xaxis-texts-g {
+    background-color: red;
+}
\ No newline at end of file

From 0fba756ee4937e551ab30eda6dbdcb6f803fd0f6 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Tue, 20 Feb 2024 18:28:31 +0530
Subject: [PATCH 05/28] changes made: 1. add project launch text 2. add dynamic
 values to tooltip

---
 src/temp/CarbonCapture/Graph.module.scss |  3 ---
 src/temp/CarbonCapture/Graph.tsx         | 33 ++++++++++++++----------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/temp/CarbonCapture/Graph.module.scss b/src/temp/CarbonCapture/Graph.module.scss
index 7d94fcb03b..9b86f08ea9 100644
--- a/src/temp/CarbonCapture/Graph.module.scss
+++ b/src/temp/CarbonCapture/Graph.module.scss
@@ -31,7 +31,4 @@
             opacity: 0.5;
         }
     }
-}
-.apexcharts-xaxis-texts-g {
-    background-color: red;
 }
\ No newline at end of file
diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index daa9d22847..1d0d5dbcc3 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -27,6 +27,14 @@ export const Tooltip = ({ headerTitle, subTitle, yoyValue, date }) => {
 };
 
 const Graph = ({ years }) => {
+  const xaxisOptions = years.map((year, index) => {
+    if (index === 1) {
+      return [2020, ' Project Launch'];
+    } else {
+      return year;
+    }
+  });
+
   const graphValues = {
     series: [
       {
@@ -44,14 +52,18 @@ const Graph = ({ years }) => {
     ],
     options: {
       tooltip: {
-        custom: function () {
+        custom: function ({ dataPointIndex, w }) {
           const getToolTip = () => {
+            const year =
+              xaxisOptions[dataPointIndex] > 0
+                ? xaxisOptions[dataPointIndex]
+                : xaxisOptions[dataPointIndex][0];
             return (
               <Tooltip
-                headerTitle={'6.9t CO2 removed'}
-                subTitle={'3.8t Biomass'}
+                headerTitle={`${w.globals.series[0][dataPointIndex]}t CO2 removed`}
+                subTitle={`${w.globals.series[1][dataPointIndex]}t Biomass`}
                 yoyValue={'+4%'}
-                date={'Aug 2020'}
+                date={year}
               />
             );
           };
@@ -70,7 +82,6 @@ const Graph = ({ years }) => {
         },
       },
       chart: {
-        // height: 153.752,
         type: 'area',
         width: 300,
         toolbar: {
@@ -89,9 +100,9 @@ const Graph = ({ years }) => {
         labels: {
           formatter: function (index: number) {
             if (index === 2) {
-              return [years[1], 'Project Launch'];
-            } else if (index == years.length) {
-              return years[index - 1];
+              return xaxisOptions[1];
+            } else if (index == xaxisOptions.length) {
+              return xaxisOptions[index - 1];
             } else {
               return '';
             }
@@ -101,11 +112,7 @@ const Graph = ({ years }) => {
             colors: '#4F4F4F',
             fontSize: 10,
           },
-          padding: {
-            top: 8, // Increase top padding to provide more space for the second line
-          },
         },
-        categories: [],
         show: false,
         axisTicks: {
           show: false,
@@ -129,7 +136,7 @@ const Graph = ({ years }) => {
       annotations: {
         xaxis: [
           {
-            x: [years[1], 'Project Launch'],
+            x: years[1],
             strokeDashArray: 1,
             borderColor: '#4F4F4F',
           },

From 1d5fc82111686b4f0f000c9f62b58d379479ba20 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Tue, 20 Feb 2024 18:28:43 +0530
Subject: [PATCH 06/28] add annotation line

---
 src/temp/CarbonCapture/Graph.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index 1d0d5dbcc3..5410041f0a 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -136,7 +136,7 @@ const Graph = ({ years }) => {
       annotations: {
         xaxis: [
           {
-            x: years[1],
+            x: xaxisOptions[1],
             strokeDashArray: 1,
             borderColor: '#4F4F4F',
           },

From 112cbfb2347022aa7e76fbcdbdcb6492e550d3ee Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Tue, 20 Feb 2024 19:18:19 +0530
Subject: [PATCH 07/28] add title and subtitle

---
 src/temp/CarbonCapture/Graph.module.scss | 28 ++++++++++++++++++++++++
 src/temp/CarbonCapture/Graph.tsx         | 13 +++++++++--
 src/temp/stories/Graph.stories.tsx       |  2 ++
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/temp/CarbonCapture/Graph.module.scss b/src/temp/CarbonCapture/Graph.module.scss
index 9b86f08ea9..95800cbaa9 100644
--- a/src/temp/CarbonCapture/Graph.module.scss
+++ b/src/temp/CarbonCapture/Graph.module.scss
@@ -31,4 +31,32 @@
             opacity: 0.5;
         }
     }
+}
+
+.container {
+    width: 338px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  
+    .graphHeading {
+        font-size: 10px;
+        color: #2F3336;
+        font-weight: 700;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding:0 15px;
+    }
+    .graphSubheading {
+        color: #BDBDBD;
+        font-size: 8px;
+        text-transform: lowercase;
+        padding:0 15px;
+    }
+}
+
+.titleContainer {
+    width: 299px;
 }
\ No newline at end of file
diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index 5410041f0a..13f0d6eb7a 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -3,6 +3,7 @@ import ReactApexChart from 'react-apexcharts';
 import styles from './Graph.module.scss';
 import { useTranslation } from 'next-i18next';
 import ReactDOMServer from 'react-dom/server';
+import NewInfoIcon from '../icons/NewInfoIcon';
 
 export const Tooltip = ({ headerTitle, subTitle, yoyValue, date }) => {
   const {
@@ -26,7 +27,7 @@ export const Tooltip = ({ headerTitle, subTitle, yoyValue, date }) => {
   );
 };
 
-const Graph = ({ years }) => {
+const Graph = ({ title, subtitle, years }) => {
   const xaxisOptions = years.map((year, index) => {
     if (index === 1) {
       return [2020, ' Project Launch'];
@@ -145,7 +146,14 @@ const Graph = ({ years }) => {
     },
   };
   return (
-    <div>
+    <div className={styles.container}>
+      <div className={styles.titleContainer}>
+        <h5 className={styles.graphHeading}>
+          {title}
+          <NewInfoIcon height={17.6} width={17.6} color={'#BDBDBD'} />
+        </h5>
+        <p className={styles.graphSubheading}>{subtitle}</p>
+      </div>
       <div id="chart">
         <ReactApexChart
           options={graphValues.options}
@@ -153,6 +161,7 @@ const Graph = ({ years }) => {
           type="area"
           height={153}
           width={299}
+          style={{ display: 'flex', justifyContent: 'center' }}
         />
       </div>
       <div id="html-dist"></div>
diff --git a/src/temp/stories/Graph.stories.tsx b/src/temp/stories/Graph.stories.tsx
index f60409b023..b015b63f3e 100644
--- a/src/temp/stories/Graph.stories.tsx
+++ b/src/temp/stories/Graph.stories.tsx
@@ -14,5 +14,7 @@ const years = [2019, 2020, 2021, 2022, 2023];
 export const Preview: Story = {
   args: {
     years: years,
+    title: 'CO2 Captured (per ha.)',
+    subtitle: 'Compared to regional average',
   },
 };

From 0773520f7d3e567624ffa5fbb071c34d69715950 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Tue, 20 Feb 2024 19:28:48 +0530
Subject: [PATCH 08/28] make component common

---
 src/temp/CarbonCapture/Graph.module.scss |  2 +-
 src/temp/CarbonCapture/Graph.tsx         | 21 ++++++++++++++++-----
 src/temp/stories/Graph.stories.tsx       |  7 +++++++
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/temp/CarbonCapture/Graph.module.scss b/src/temp/CarbonCapture/Graph.module.scss
index 95800cbaa9..5701874120 100644
--- a/src/temp/CarbonCapture/Graph.module.scss
+++ b/src/temp/CarbonCapture/Graph.module.scss
@@ -1,5 +1,5 @@
 .tooltipContainer {
- 
+    min-width: 100px;
     .header {
         padding: 10px 10px 8px 10px;
         .title {
diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index 13f0d6eb7a..b1abc52b8e 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -27,7 +27,14 @@ export const Tooltip = ({ headerTitle, subTitle, yoyValue, date }) => {
   );
 };
 
-const Graph = ({ title, subtitle, years }) => {
+const Graph = ({
+  title,
+  subtitle,
+  years,
+  series1Values,
+  series2Values,
+  tooltip,
+}) => {
   const xaxisOptions = years.map((year, index) => {
     if (index === 1) {
       return [2020, ' Project Launch'];
@@ -40,13 +47,13 @@ const Graph = ({ title, subtitle, years }) => {
     series: [
       {
         name: 'series1',
-        data: [21.4, 21.27, 20.78, 21.7, 21.78],
+        data: series1Values,
         color: '#219653',
         zIndex: 2,
       },
       {
         name: 'series2',
-        data: [22.54, 22.65, 21.8, 21.85, 22.03],
+        data: series2Values,
         color: '#BDBDBD',
         zIndex: 1,
       },
@@ -61,8 +68,12 @@ const Graph = ({ title, subtitle, years }) => {
                 : xaxisOptions[dataPointIndex][0];
             return (
               <Tooltip
-                headerTitle={`${w.globals.series[0][dataPointIndex]}t CO2 removed`}
-                subTitle={`${w.globals.series[1][dataPointIndex]}t Biomass`}
+                headerTitle={`${w.globals.series[0][dataPointIndex]}${tooltip.unit} ${tooltip.heading}`}
+                subTitle={
+                  tooltip.subheading
+                    ? `${w.globals.series[1][dataPointIndex]}${tooltip.unit} ${tooltip.subheading}`
+                    : ''
+                }
                 yoyValue={'+4%'}
                 date={year}
               />
diff --git a/src/temp/stories/Graph.stories.tsx b/src/temp/stories/Graph.stories.tsx
index b015b63f3e..6feb2d46c3 100644
--- a/src/temp/stories/Graph.stories.tsx
+++ b/src/temp/stories/Graph.stories.tsx
@@ -16,5 +16,12 @@ export const Preview: Story = {
     years: years,
     title: 'CO2 Captured (per ha.)',
     subtitle: 'Compared to regional average',
+    series1Values: [21.4, 21.27, 20.78, 21.7, 21.78],
+    series2Values: [22.54, 22.65, 21.8, 21.85, 22.03],
+    tooltip: {
+      heading: 'CO2 removed',
+      unit: 't',
+      subheading: 'Biomass',
+    },
   },
 };

From 0b580e920b17c27d8e7ff6cf4340bd94f6ef7a22 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Tue, 20 Feb 2024 19:42:31 +0530
Subject: [PATCH 09/28] add interface

---
 src/temp/CarbonCapture/Graph.tsx | 51 ++++++++++++++++++++++++--------
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index b1abc52b8e..5d0f1f140f 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -5,7 +5,19 @@ import { useTranslation } from 'next-i18next';
 import ReactDOMServer from 'react-dom/server';
 import NewInfoIcon from '../icons/NewInfoIcon';
 
-export const Tooltip = ({ headerTitle, subTitle, yoyValue, date }) => {
+interface TooltipProps {
+  headerTitle: string;
+  subTitle: string;
+  yoyValue: string;
+  date: string;
+}
+
+export const Tooltip = ({
+  headerTitle,
+  subTitle,
+  yoyValue,
+  date,
+}: TooltipProps) => {
   const {
     i18n: { language },
   } = useTranslation();
@@ -27,6 +39,19 @@ export const Tooltip = ({ headerTitle, subTitle, yoyValue, date }) => {
   );
 };
 
+interface graphProps {
+  title: string;
+  subtitle: string;
+  years: number[];
+  series1Values: number[];
+  series2Values: number[];
+  tooltip: {
+    heading: string;
+    unit: string;
+    subheading: string;
+  };
+}
+
 const Graph = ({
   title,
   subtitle,
@@ -34,7 +59,7 @@ const Graph = ({
   series1Values,
   series2Values,
   tooltip,
-}) => {
+}: graphProps) => {
   const xaxisOptions = years.map((year, index) => {
     if (index === 1) {
       return [2020, ' Project Launch'];
@@ -59,13 +84,19 @@ const Graph = ({
       },
     ],
     options: {
+      chart: {
+        type: 'area',
+        width: 300,
+        toolbar: {
+          show: false,
+        },
+      },
       tooltip: {
         custom: function ({ dataPointIndex, w }) {
           const getToolTip = () => {
-            const year =
-              xaxisOptions[dataPointIndex] > 0
-                ? xaxisOptions[dataPointIndex]
-                : xaxisOptions[dataPointIndex][0];
+            const year = Array.isArray(xaxisOptions[dataPointIndex])
+              ? xaxisOptions[dataPointIndex][0]
+              : xaxisOptions[dataPointIndex];
             return (
               <Tooltip
                 headerTitle={`${w.globals.series[0][dataPointIndex]}${tooltip.unit} ${tooltip.heading}`}
@@ -93,13 +124,7 @@ const Graph = ({
           size: 6,
         },
       },
-      chart: {
-        type: 'area',
-        width: 300,
-        toolbar: {
-          show: false,
-        },
-      },
+
       dataLabels: {
         enabled: false,
       },

From 127bf0eb6b2389227a68bc6e1bb64465341e3539 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Tue, 20 Feb 2024 19:42:42 +0530
Subject: [PATCH 10/28] remove unused imports

---
 src/temp/stories/Graph.stories.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/temp/stories/Graph.stories.tsx b/src/temp/stories/Graph.stories.tsx
index 6feb2d46c3..d8b682112e 100644
--- a/src/temp/stories/Graph.stories.tsx
+++ b/src/temp/stories/Graph.stories.tsx
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Graph, { Tooltip } from '../CarbonCapture/Graph';
-import ReactDOMServer from 'react-dom/server';
+import Graph from '../CarbonCapture/Graph';
 
 const meta: Meta<typeof Graph> = {
   component: Graph,

From 4bfc2ed33fd288a6ede1d9e3c0271149912f192f Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Wed, 21 Feb 2024 14:44:35 +0530
Subject: [PATCH 11/28] resolve ts errors

---
 src/temp/CarbonCapture/Graph.tsx | 212 +++++++++++++++----------------
 1 file changed, 105 insertions(+), 107 deletions(-)

diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index 5d0f1f140f..d1d5e1efb3 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactApexChart from 'react-apexcharts';
 import styles from './Graph.module.scss';
-import { useTranslation } from 'next-i18next';
 import ReactDOMServer from 'react-dom/server';
 import NewInfoIcon from '../icons/NewInfoIcon';
+import { ApexOptions } from 'apexcharts';
 
 interface TooltipProps {
   headerTitle: string;
@@ -18,10 +18,6 @@ export const Tooltip = ({
   yoyValue,
   date,
 }: TooltipProps) => {
-  const {
-    i18n: { language },
-  } = useTranslation();
-
   return (
     <div className={styles.tooltipContainer}>
       <div className={styles.header}>
@@ -39,7 +35,7 @@ export const Tooltip = ({
   );
 };
 
-interface graphProps {
+interface GraphProps {
   title: string;
   subtitle: string;
   years: number[];
@@ -52,6 +48,11 @@ interface graphProps {
   };
 }
 
+interface CustomTooltipProps {
+  dataPointIndex: number;
+  w: { config: ApexOptions; globals: any };
+}
+
 const Graph = ({
   title,
   subtitle,
@@ -59,7 +60,7 @@ const Graph = ({
   series1Values,
   series2Values,
   tooltip,
-}: graphProps) => {
+}: GraphProps) => {
   const xaxisOptions = years.map((year, index) => {
     if (index === 1) {
       return [2020, ' Project Launch'];
@@ -68,119 +69,116 @@ const Graph = ({
     }
   });
 
-  const graphValues = {
-    series: [
-      {
-        name: 'series1',
-        data: series1Values,
-        color: '#219653',
-        zIndex: 2,
-      },
-      {
-        name: 'series2',
-        data: series2Values,
-        color: '#BDBDBD',
-        zIndex: 1,
-      },
-    ],
-    options: {
-      chart: {
-        type: 'area',
-        width: 300,
-        toolbar: {
-          show: false,
-        },
+  const options = {
+    chart: {
+      type: 'area',
+      width: 300,
+      toolbar: {
+        show: false,
       },
-      tooltip: {
-        custom: function ({ dataPointIndex, w }) {
-          const getToolTip = () => {
-            const year = Array.isArray(xaxisOptions[dataPointIndex])
-              ? xaxisOptions[dataPointIndex][0]
-              : xaxisOptions[dataPointIndex];
-            return (
-              <Tooltip
-                headerTitle={`${w.globals.series[0][dataPointIndex]}${tooltip.unit} ${tooltip.heading}`}
-                subTitle={
-                  tooltip.subheading
-                    ? `${w.globals.series[1][dataPointIndex]}${tooltip.unit} ${tooltip.subheading}`
-                    : ''
-                }
-                yoyValue={'+4%'}
-                date={year}
-              />
-            );
-          };
+    },
+    tooltip: {
+      custom: function ({ dataPointIndex, w }: CustomTooltipProps) {
+        const getToolTip = () => {
+          const dataPoint = xaxisOptions[dataPointIndex];
+          const year = Array.isArray(dataPoint) ? dataPoint[0] : dataPoint;
+          return (
+            <Tooltip
+              headerTitle={`${w.globals.series[0][dataPointIndex]}${tooltip.unit} ${tooltip.heading}`}
+              subTitle={
+                tooltip.subheading
+                  ? `${w.globals.series[1][dataPointIndex]}${tooltip.unit} ${tooltip.subheading}`
+                  : ''
+              }
+              yoyValue={'+4%'}
+              date={year.toString()}
+            />
+          );
+        };
 
-          return ReactDOMServer.renderToString(getToolTip());
-        },
+        return ReactDOMServer.renderToString(getToolTip());
       },
-      markers: {
-        size: 0,
-        colors: ['#fff', 'transparent'],
-        strokeColors: ['#219653', 'transparent'],
-        strokeOpacity: [1, 1],
-        strokeWidth: 2.2,
-        hover: {
-          size: 6,
-        },
+    },
+    markers: {
+      size: 0,
+      colors: ['#fff', 'transparent'],
+      strokeColors: ['#219653', 'transparent'],
+      strokeOpacity: [1, 1],
+      strokeWidth: 2.2,
+      hover: {
+        size: 6,
       },
+    },
 
-      dataLabels: {
-        enabled: false,
-      },
-      stroke: {
-        curve: 'smooth',
-        width: 2.2,
-      },
-      xaxis: {
-        type: 'year',
-        labels: {
-          formatter: function (index: number) {
-            if (index === 2) {
-              return xaxisOptions[1];
-            } else if (index == xaxisOptions.length) {
-              return xaxisOptions[index - 1];
-            } else {
-              return '';
-            }
-          },
-          minHeight: 35,
-          style: {
-            colors: '#4F4F4F',
-            fontSize: 10,
-          },
-        },
-        show: false,
-        axisTicks: {
-          show: false,
-        },
-        tooltip: {
-          enabled: false,
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      curve: 'smooth',
+      width: 2.2,
+    },
+    xaxis: {
+      type: 'year',
+      labels: {
+        formatter: function (index: number) {
+          if (index === 2) {
+            return xaxisOptions[1];
+          } else if (index == xaxisOptions.length) {
+            return xaxisOptions[index - 1];
+          } else {
+            return '';
+          }
         },
-        axisBorder: {
-          show: false,
+        minHeight: 35,
+        style: {
+          colors: '#4F4F4F',
+          fontSize: 10,
         },
       },
-      yaxis: {
+      show: false,
+      axisTicks: {
         show: false,
       },
-      grid: {
-        show: false,
+      tooltip: {
+        enabled: false,
       },
-      legend: {
+      axisBorder: {
         show: false,
       },
-      annotations: {
-        xaxis: [
-          {
-            x: xaxisOptions[1],
-            strokeDashArray: 1,
-            borderColor: '#4F4F4F',
-          },
-        ],
-      },
+    },
+    yaxis: {
+      show: false,
+    },
+    grid: {
+      show: false,
+    },
+    legend: {
+      show: false,
+    },
+    annotations: {
+      xaxis: [
+        {
+          x: xaxisOptions[1],
+          strokeDashArray: 1,
+          borderColor: '#4F4F4F',
+        },
+      ],
     },
   };
+  const series = [
+    {
+      name: 'series1',
+      data: series1Values,
+      color: '#219653',
+      zIndex: 2,
+    },
+    {
+      name: 'series2',
+      data: series2Values,
+      color: '#BDBDBD',
+      zIndex: 1,
+    },
+  ];
   return (
     <div className={styles.container}>
       <div className={styles.titleContainer}>
@@ -192,8 +190,8 @@ const Graph = ({
       </div>
       <div id="chart">
         <ReactApexChart
-          options={graphValues.options}
-          series={graphValues.series}
+          options={options}
+          series={series}
           type="area"
           height={153}
           width={299}

From b877681e0b75e251f7524906991c186b3ba93683 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Wed, 21 Feb 2024 14:45:36 +0530
Subject: [PATCH 12/28] add chromatic workflow

---
 .github/workflows/chromatic.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index 1835eb970e..5778ac03aa 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -10,6 +10,7 @@ on:
       - feature/storybook-update
       - develop
       - feature/redesign-explore-btn
+      - feature/design-capture-graph
 # List of jobs
 jobs:
   chromatic-deployment:

From 905bef8409167a322d114cee7914245ad20f3e56 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Wed, 21 Feb 2024 15:12:14 +0530
Subject: [PATCH 13/28] add gradient in graph

---
 src/temp/CarbonCapture/Graph.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index d1d5e1efb3..0ea0dc5d21 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -70,6 +70,14 @@ const Graph = ({
   });
 
   const options = {
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 1,
+        opacityFrom: 0.58,
+        opacityTo: 0,
+      },
+    },
     chart: {
       type: 'area',
       width: 300,

From 0c17009f2fcf7ef0bc25adf77b91a2196048d64e Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Wed, 21 Feb 2024 16:06:27 +0530
Subject: [PATCH 14/28] add property to make tooltip follow cursor

---
 src/temp/CarbonCapture/Graph.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index 0ea0dc5d21..c6ee55e2d6 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -106,6 +106,7 @@ const Graph = ({
 
         return ReactDOMServer.renderToString(getToolTip());
       },
+      followCursor: true,
     },
     markers: {
       size: 0,

From e26e9fbee8a3b25fa7988231cd064e0b6c99ccbb Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Wed, 21 Feb 2024 16:50:36 +0530
Subject: [PATCH 15/28] add styles for annotation

---
 src/temp/CarbonCapture/Graph.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index c6ee55e2d6..567ece0602 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -168,8 +168,8 @@ const Graph = ({
       xaxis: [
         {
           x: xaxisOptions[1],
-          strokeDashArray: 1,
-          borderColor: '#4F4F4F',
+          strokeDashArray: 0,
+          borderColor: '#219653',
         },
       ],
     },

From af864b812bf9370756602b2e7f03138b210026a9 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Wed, 21 Feb 2024 18:01:03 +0530
Subject: [PATCH 16/28] add translations

---
 public/static/locales/en/projectDetails.json |  9 ++++++++-
 src/temp/CarbonCapture/Graph.tsx             | 20 +++++++++++++-------
 src/temp/stories/Graph.stories.tsx           |  8 ++++----
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/public/static/locales/en/projectDetails.json b/public/static/locales/en/projectDetails.json
index 88891f60e5..c397082898 100644
--- a/public/static/locales/en/projectDetails.json
+++ b/public/static/locales/en/projectDetails.json
@@ -1,3 +1,10 @@
 {
-    "satelliteAnalysis": "Satellite Analysis"
+    "satelliteAnalysis": "Satellite Analysis",
+    "co2CapturePerHa": "CO2 Captured (per ha.)",
+    "comparedToRegionalAverage": "Compared to regional average",
+    "co2Removed": "CO2 removed",
+    "biomass": "Biomass",
+    "yoy": "YoY",
+    "projectLaunch": "Project Launch",
+    "canopyCover": "Canopy Cover"
 }
\ No newline at end of file
diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index 567ece0602..78d09903eb 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -4,6 +4,7 @@ import styles from './Graph.module.scss';
 import ReactDOMServer from 'react-dom/server';
 import NewInfoIcon from '../icons/NewInfoIcon';
 import { ApexOptions } from 'apexcharts';
+import { useTranslation } from 'next-i18next';
 
 interface TooltipProps {
   headerTitle: string;
@@ -18,6 +19,7 @@ export const Tooltip = ({
   yoyValue,
   date,
 }: TooltipProps) => {
+  const { t } = useTranslation('projectDetails');
   return (
     <div className={styles.tooltipContainer}>
       <div className={styles.header}>
@@ -26,8 +28,7 @@ export const Tooltip = ({
       </div>
       <div className={styles.body}>
         <p className={styles.yoyValue}>
-          {yoyValue}
-          {'  YoY'}
+          {yoyValue} {t('yoy')}
         </p>
         <p className={styles.date}>{date}</p>
       </div>
@@ -61,9 +62,10 @@ const Graph = ({
   series2Values,
   tooltip,
 }: GraphProps) => {
+  const { t } = useTranslation('projectDetails');
   const xaxisOptions = years.map((year, index) => {
     if (index === 1) {
-      return [2020, ' Project Launch'];
+      return [2020, ` ${t('projectLaunch')}`];
     } else {
       return year;
     }
@@ -92,10 +94,14 @@ const Graph = ({
           const year = Array.isArray(dataPoint) ? dataPoint[0] : dataPoint;
           return (
             <Tooltip
-              headerTitle={`${w.globals.series[0][dataPointIndex]}${tooltip.unit} ${tooltip.heading}`}
+              headerTitle={`${w.globals.series[0][dataPointIndex]}${
+                tooltip.unit
+              } ${t(`${tooltip.heading}`)}`}
               subTitle={
                 tooltip.subheading
-                  ? `${w.globals.series[1][dataPointIndex]}${tooltip.unit} ${tooltip.subheading}`
+                  ? `${w.globals.series[1][dataPointIndex]}${tooltip.unit} ${t(
+                      `${tooltip.subheading}`
+                    )}`
                   : ''
               }
               yoyValue={'+4%'}
@@ -192,10 +198,10 @@ const Graph = ({
     <div className={styles.container}>
       <div className={styles.titleContainer}>
         <h5 className={styles.graphHeading}>
-          {title}
+          {t(`${title}`)}
           <NewInfoIcon height={17.6} width={17.6} color={'#BDBDBD'} />
         </h5>
-        <p className={styles.graphSubheading}>{subtitle}</p>
+        <p className={styles.graphSubheading}> {t(`${subtitle}`)}</p>
       </div>
       <div id="chart">
         <ReactApexChart
diff --git a/src/temp/stories/Graph.stories.tsx b/src/temp/stories/Graph.stories.tsx
index d8b682112e..37a5ee502c 100644
--- a/src/temp/stories/Graph.stories.tsx
+++ b/src/temp/stories/Graph.stories.tsx
@@ -13,14 +13,14 @@ const years = [2019, 2020, 2021, 2022, 2023];
 export const Preview: Story = {
   args: {
     years: years,
-    title: 'CO2 Captured (per ha.)',
-    subtitle: 'Compared to regional average',
+    title: 'co2CapturePerHa',
+    subtitle: 'comparedToRegionalAverage',
     series1Values: [21.4, 21.27, 20.78, 21.7, 21.78],
     series2Values: [22.54, 22.65, 21.8, 21.85, 22.03],
     tooltip: {
-      heading: 'CO2 removed',
+      heading: 'co2Removed',
       unit: 't',
-      subheading: 'Biomass',
+      subheading: 'biomass',
     },
   },
 };

From 90812994f7b55a712b0ff8c5d4a7b0da6f81d9d0 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Thu, 22 Feb 2024 15:13:12 +0530
Subject: [PATCH 17/28] add useEffect and useState

---
 src/temp/CarbonCapture/Graph.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index 78d09903eb..2bf1548aa2 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactApexChart from 'react-apexcharts';
 import styles from './Graph.module.scss';
 import ReactDOMServer from 'react-dom/server';
@@ -63,13 +63,20 @@ const Graph = ({
   tooltip,
 }: GraphProps) => {
   const { t } = useTranslation('projectDetails');
-  const xaxisOptions = years.map((year, index) => {
-    if (index === 1) {
-      return [2020, ` ${t('projectLaunch')}`];
-    } else {
-      return year;
-    }
-  });
+  const [xaxisOptions, setXaxisOptions] = useState<
+    (number | (string | number)[])[]
+  >([]);
+
+  useEffect(() => {
+    const newOptions = years.map((year, index) => {
+      if (index === 1) {
+        return [2020, ` ${t('projectLaunch')}`];
+      } else {
+        return year;
+      }
+    });
+    setXaxisOptions(newOptions);
+  }, []);
 
   const options = {
     fill: {

From ee59f93ff70b497826a512fb07e0d5f115b28f73 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Tue, 27 Feb 2024 14:12:52 +0530
Subject: [PATCH 18/28] fix heading style

---
 public/static/locales/en/projectDetails.json |  2 +-
 src/temp/CarbonCapture/Graph.module.scss     | 16 +++++++++++++---
 src/temp/CarbonCapture/Graph.tsx             | 14 +++++++++++---
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/public/static/locales/en/projectDetails.json b/public/static/locales/en/projectDetails.json
index c397082898..e320d10543 100644
--- a/public/static/locales/en/projectDetails.json
+++ b/public/static/locales/en/projectDetails.json
@@ -1,6 +1,6 @@
 {
     "satelliteAnalysis": "Satellite Analysis",
-    "co2CapturePerHa": "CO2 Captured (per ha.)",
+    "co2CapturePerHa": "CO2 Captured <p>(per ha.)</p>",
     "comparedToRegionalAverage": "Compared to regional average",
     "co2Removed": "CO2 removed",
     "biomass": "Biomass",
diff --git a/src/temp/CarbonCapture/Graph.module.scss b/src/temp/CarbonCapture/Graph.module.scss
index 5701874120..09af4dede5 100644
--- a/src/temp/CarbonCapture/Graph.module.scss
+++ b/src/temp/CarbonCapture/Graph.module.scss
@@ -39,15 +39,18 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-  
     .graphHeading {
         font-size: 10px;
         color: #2F3336;
-        font-weight: 700;
         display: flex;
         align-items: center;
-        justify-content: space-between;
         padding:0 15px;
+        gap: 2px;
+        font-weight: 700;
+        p {
+            font-weight: 400;
+        }
+       
     }
     .graphSubheading {
         color: #BDBDBD;
@@ -59,4 +62,11 @@
 
 .titleContainer {
     width: 299px;
+}
+.newInfoIcon {
+    margin-left: auto;
+    margin-right: 8px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index 2bf1548aa2..8c684c9e38 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -4,7 +4,7 @@ import styles from './Graph.module.scss';
 import ReactDOMServer from 'react-dom/server';
 import NewInfoIcon from '../icons/NewInfoIcon';
 import { ApexOptions } from 'apexcharts';
-import { useTranslation } from 'next-i18next';
+import { Trans, useTranslation } from 'next-i18next';
 
 interface TooltipProps {
   headerTitle: string;
@@ -205,8 +205,16 @@ const Graph = ({
     <div className={styles.container}>
       <div className={styles.titleContainer}>
         <h5 className={styles.graphHeading}>
-          {t(`${title}`)}
-          <NewInfoIcon height={17.6} width={17.6} color={'#BDBDBD'} />
+          {title === 'co2CapturePerHa' ? (
+            <Trans i18nKey="co2CapturePerHa">
+              CO2 Captured<p>(per ha.)</p>
+            </Trans>
+          ) : (
+            t(`${title}`)
+          )}
+          <div className={styles.newInfoIcon}>
+            <NewInfoIcon height={17} width={17} color={'#BDBDBD'} />
+          </div>
         </h5>
         <p className={styles.graphSubheading}> {t(`${subtitle}`)}</p>
       </div>

From fa4dd154ad4e21d2b740bf234d26191bdc1bef76 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Tue, 27 Feb 2024 14:42:01 +0530
Subject: [PATCH 19/28] remove hard coded width

---
 src/temp/CarbonCapture/Graph.module.scss | 8 +++++---
 src/temp/CarbonCapture/Graph.tsx         | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/temp/CarbonCapture/Graph.module.scss b/src/temp/CarbonCapture/Graph.module.scss
index 09af4dede5..948585c048 100644
--- a/src/temp/CarbonCapture/Graph.module.scss
+++ b/src/temp/CarbonCapture/Graph.module.scss
@@ -34,7 +34,8 @@
 }
 
 .container {
-    width: 338px;
+    width: 100%;
+    max-width: 338px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -61,11 +62,12 @@
 }
 
 .titleContainer {
-    width: 299px;
+    width: 100%;
+    max-width: 300px;
 }
 .newInfoIcon {
     margin-left: auto;
-    margin-right: 8px;
+    margin-right: 6px;
     display: flex;
     align-items: center;
     cursor: pointer;
diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index 8c684c9e38..e8ffb3b27f 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -224,7 +224,7 @@ const Graph = ({
           series={series}
           type="area"
           height={153}
-          width={299}
+          width={'100%'}
           style={{ display: 'flex', justifyContent: 'center' }}
         />
       </div>

From 5b48d1f4deff27cfbe2e075213fe9b4217918934 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Tue, 5 Mar 2024 12:25:17 +0530
Subject: [PATCH 20/28] replace hardcoded colors and fonts

---
 src/temp/CarbonCapture/Graph.module.scss | 26 +++++++++++++-----------
 src/theme/_colors.scss                   |  1 +
 src/theme/_fonts.scss                    |  1 +
 src/theme/theme.ts                       |  3 +++
 src/theme/themeProperties.ts             |  4 +++-
 5 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/temp/CarbonCapture/Graph.module.scss b/src/temp/CarbonCapture/Graph.module.scss
index 948585c048..144b206740 100644
--- a/src/temp/CarbonCapture/Graph.module.scss
+++ b/src/temp/CarbonCapture/Graph.module.scss
@@ -1,33 +1,35 @@
+@import '../../theme/theme';
+
 .tooltipContainer {
     min-width: 100px;
     .header {
         padding: 10px 10px 8px 10px;
         .title {
-            color: #333;
-            font-size: 14px;
+            color: #333; //to be replaced
+            font-size: $fontSmall;
             font-weight: 500;
             margin-bottom: 5px;
         }
         .subtitle {
-            font-size: 8px;
+            font-size: $fontXXXSmallNew;
             font-weight: 400;
         }
     }
     .body {
-        background-color: rgba(33, 150, 83, 0.10);
+        background-color: rgba(var(--primary-color-new), 0.10);
         padding: 4px 10px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         .yoyValue {
-            color: #377E36;
+            color: $secondaryColorNew;
             font-weight: 700;
-            font-size: 9px;
+            font-size: $fontXXSmallNew;
         }
         .date {
-            font-size: 6px;
+            font-size: 6px; //to be replaced
             font-weight: 500;
-            color: #000;
+            color: $dark;
             opacity: 0.5;
         }
     }
@@ -41,8 +43,8 @@
     justify-content: center;
     align-items: center;
     .graphHeading {
-        font-size: 10px;
-        color: #2F3336;
+        font-size: $fontXXSmall;
+        color: #2F3336; //to be replaced
         display: flex;
         align-items: center;
         padding:0 15px;
@@ -54,8 +56,8 @@
        
     }
     .graphSubheading {
-        color: #BDBDBD;
-        font-size: 8px;
+        color: #BDBDBD; //to be replaced
+        font-size: $fontXXXSmallNew;
         text-transform: lowercase;
         padding:0 15px;
     }
diff --git a/src/theme/_colors.scss b/src/theme/_colors.scss
index 90b06f079d..80ab3b7773 100644
--- a/src/theme/_colors.scss
+++ b/src/theme/_colors.scss
@@ -17,3 +17,4 @@ $primaryLightColor: var(--primary-light-color);
 $topProjectBackgroundColor: var(--top-project-background-color);
 $nonDonatableProjectBackgroundColor: var(--non-donatable-project-background-color);
 $primaryColorNew: var(--primary-color-new);
+$secondaryColorNew: var(--secondary-color-new)
diff --git a/src/theme/_fonts.scss b/src/theme/_fonts.scss
index 514d406266..ee9bb8fe69 100644
--- a/src/theme/_fonts.scss
+++ b/src/theme/_fonts.scss
@@ -10,3 +10,4 @@ $fontXXLarge: var(--font-xx-large);
 $fontXXXLarge: var(--font-xxx-large);
 $secondaryFontFamily: var(--secondary-font-family);
 $fontXXXSmallNew: var(--font-xxx-extra-small-new);
+$fontXXSmallNew: var(--font-xx-extra-small-new);
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 4519b256f9..543d0b47aa 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -14,6 +14,7 @@ const {
   topProjectBackgroundColor,
   nonDonatableProjectBackgroundColor,
   primaryColorNew,
+  secondaryColorNew,
 } = theme;
 
 const globalStyles = css.global`
@@ -23,6 +24,7 @@ const globalStyles = css.global`
     --secondary-font-family: ${config.font.secondaryFontFamily ||
     defaultFontFamily};
     --font-xxx-extra-small-new: ${fontSizes.fontXXXSmallNew};
+    --font-xx-extra-small-new: ${fontSizes.fontXXSmallNew};
     --font-xx-extra-small: ${fontSizes.fontXXSmall};
     --font-x-extra-small: ${fontSizes.fontXSmall};
     --font-small: ${fontSizes.fontSmall};
@@ -38,6 +40,7 @@ const globalStyles = css.global`
     --top-project-background-color: ${topProjectBackgroundColor};
     --non-donatable-project-background-color: ${nonDonatableProjectBackgroundColor};
     --primary-color-new: ${primaryColorNew};
+    --secondary-color-new: ${secondaryColorNew};
   }
   .theme-light {
     --primary-font-color: ${light.primaryFontColor};
diff --git a/src/theme/themeProperties.ts b/src/theme/themeProperties.ts
index 1827f246c6..d24dba4ecc 100644
--- a/src/theme/themeProperties.ts
+++ b/src/theme/themeProperties.ts
@@ -3,6 +3,7 @@ const themeProperties = {
     '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
   fontSizes: {
     fontXXXSmallNew: '8px',
+    fontXXSmallNew: '9px',
     fontXXSmall: '10px',
     fontXSmall: '12px',
     fontSmall: '14px',
@@ -23,7 +24,8 @@ const themeProperties = {
   primaryLightColor: '#79AE4633',
   topProjectBackgroundColor: '#F3BB44',
   nonDonatableProjectBackgroundColor: '#828282',
-  primaryColorNew: '#219653',
+  primaryColorNew: '33, 150, 83',
+  secondaryColorNew: '#377E36',
   light: {
     primaryFontColor: '#2f3336',
     dividerColor: '#d5d5d5',

From 32dd91a5143e074691b755e5797466f5d0f7f099 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Thu, 14 Mar 2024 17:05:16 +0530
Subject: [PATCH 21/28] fix: fix heading

---
 public/static/locales/en/projectDetails.json | 4 ++--
 src/temp/CarbonCapture/Graph.tsx             | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/static/locales/en/projectDetails.json b/public/static/locales/en/projectDetails.json
index e320d10543..c3e536f0c3 100644
--- a/public/static/locales/en/projectDetails.json
+++ b/public/static/locales/en/projectDetails.json
@@ -1,8 +1,8 @@
 {
     "satelliteAnalysis": "Satellite Analysis",
-    "co2CapturePerHa": "CO2 Captured <p>(per ha.)</p>",
+    "co2CapturePerHa": "CO₂ Captured <p>(per ha.)</p>",
     "comparedToRegionalAverage": "Compared to regional average",
-    "co2Removed": "CO2 removed",
+    "co2Removed": "CO₂ removed",
     "biomass": "Biomass",
     "yoy": "YoY",
     "projectLaunch": "Project Launch",
diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index e8ffb3b27f..a620f0d983 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -207,7 +207,7 @@ const Graph = ({
         <h5 className={styles.graphHeading}>
           {title === 'co2CapturePerHa' ? (
             <Trans i18nKey="co2CapturePerHa">
-              CO2 Captured<p>(per ha.)</p>
+              CO₂ Captured<p>(per ha.)</p>
             </Trans>
           ) : (
             t(`${title}`)

From 338075b4e8307a7607e807fa57f61166a4e9f534 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Tue, 9 Jul 2024 16:19:52 +0530
Subject: [PATCH 22/28] fix: translation issue, code clean up, remove hardcode
 value

---
 public/static/locales/en/projectDetails.json |  2 +-
 src/temp/CarbonCapture/Graph.module.scss     |  4 +-
 src/temp/CarbonCapture/Graph.tsx             | 71 ++++++++++----------
 src/temp/stories/Graph.stories.tsx           |  4 +-
 4 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/public/static/locales/en/projectDetails.json b/public/static/locales/en/projectDetails.json
index 2736a60f2d..0643ce8bdd 100644
--- a/public/static/locales/en/projectDetails.json
+++ b/public/static/locales/en/projectDetails.json
@@ -21,7 +21,7 @@
     "comparedToRegionalAverage": "Compared to regional average",
     "co2Removed": "CO₂ removed",
     "biomass": "Biomass",
-    "yoy": "YoY",
+    "yoy": "+{value}% YoY",
     "projectLaunch": "Project Launch",
     "canopyCover": "Canopy Cover"
   }
diff --git a/src/temp/CarbonCapture/Graph.module.scss b/src/temp/CarbonCapture/Graph.module.scss
index 4d84a7e56b..5c861bf394 100644
--- a/src/temp/CarbonCapture/Graph.module.scss
+++ b/src/temp/CarbonCapture/Graph.module.scss
@@ -49,8 +49,8 @@
     align-items: center;
     padding: 0 15px;
     gap: 2px;
-    p {
-      font-weight: 400;
+    span {
+      font-weight: 700;
     }
   }
   .graphSubheading {
diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index 01661ea520..c6016b6b37 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -5,6 +5,7 @@ import ReactDOMServer from 'react-dom/server';
 import NewInfoIcon from '../icons/NewInfoIcon';
 import { ApexOptions } from 'apexcharts';
 import { useTranslations } from 'next-intl';
+import themeProperties from '../../theme/themeProperties';
 
 interface TooltipProps {
   headerTitle: string;
@@ -19,7 +20,6 @@ export const Tooltip = ({
   yoyValue,
   date,
 }: TooltipProps) => {
-  const t = useTranslations('ProjectDetails');
   return (
     <div className={styles.tooltipContainer}>
       <div className={styles.header}>
@@ -27,9 +27,7 @@ export const Tooltip = ({
         <p className={styles.subtitle}>{subTitle}</p>
       </div>
       <div className={styles.body}>
-        <p className={styles.yoyValue}>
-          {yoyValue} {t('yoy')}
-        </p>
+        <p className={styles.yoyValue}>{yoyValue}</p>
         <p className={styles.date}>{date}</p>
       </div>
     </div>
@@ -40,8 +38,8 @@ interface GraphProps {
   title: string;
   subtitle: string;
   years: number[];
-  series1Values: number[];
-  series2Values: number[];
+  carbonRemoved: number[];
+  biomass: number[];
   tooltip: {
     heading: string;
     unit: string;
@@ -58,15 +56,15 @@ const Graph = ({
   title,
   subtitle,
   years,
-  series1Values,
-  series2Values,
+  carbonRemoved,
+  biomass,
   tooltip,
 }: GraphProps) => {
   const t = useTranslations('ProjectDetails');
   const [xaxisOptions, setXaxisOptions] = useState<
     (number | (string | number)[])[]
   >([]);
-
+  const { light, primaryDarkColorX } = themeProperties;
   useEffect(() => {
     const newOptions = years.map((year, index) => {
       if (index === 1) {
@@ -97,22 +95,26 @@ const Graph = ({
     tooltip: {
       custom: function ({ dataPointIndex, w }: CustomTooltipProps) {
         const getToolTip = () => {
+          const headingTranslation = t(`${tooltip.heading}`);
+          const subHeadingTranslation = t(`${tooltip.subheading}`);
+          const yoyTranslation = t('yoy', {
+            value: 4,
+          });
           const dataPoint = xaxisOptions[dataPointIndex];
           const year = Array.isArray(dataPoint) ? dataPoint[0] : dataPoint;
+
+          const headerTitle = `${w.globals.series[0][dataPointIndex]}${tooltip.unit} ${headingTranslation}`;
+          const subTitle = subHeadingTranslation
+            ? `${w.globals.series[1][dataPointIndex]}${tooltip.unit} ${subHeadingTranslation}`
+            : '';
+          const date = year.toString();
+
           return (
             <Tooltip
-              headerTitle={`${w.globals.series[0][dataPointIndex]}${
-                tooltip.unit
-              } ${t(`${tooltip.heading}`)}`}
-              subTitle={
-                tooltip.subheading
-                  ? `${w.globals.series[1][dataPointIndex]}${tooltip.unit} ${t(
-                      `${tooltip.subheading}`
-                    )}`
-                  : ''
-              }
-              yoyValue={'+4%'}
-              date={year.toString()}
+              headerTitle={headerTitle}
+              subTitle={subTitle}
+              yoyValue={yoyTranslation}
+              date={date}
             />
           );
         };
@@ -123,8 +125,8 @@ const Graph = ({
     },
     markers: {
       size: 0,
-      colors: ['#fff', 'transparent'],
-      strokeColors: ['#219653', 'transparent'],
+      colors: [`${light.light}`, 'transparent'],
+      strokeColors: [`${primaryDarkColorX}`, 'transparent'],
       strokeOpacity: [1, 1],
       strokeWidth: 2.2,
       hover: {
@@ -153,7 +155,7 @@ const Graph = ({
         },
         minHeight: 35,
         style: {
-          colors: '#4F4F4F',
+          colors: `${light.grayFontColorNew}`,
           fontSize: 10,
         },
       },
@@ -182,7 +184,7 @@ const Graph = ({
         {
           x: xaxisOptions[1],
           strokeDashArray: 0,
-          borderColor: '#219653',
+          borderColor: `${primaryDarkColorX}`,
         },
       ],
     },
@@ -190,14 +192,14 @@ const Graph = ({
   const series = [
     {
       name: 'series1',
-      data: series1Values,
-      color: '#219653',
+      data: carbonRemoved,
+      color: `${primaryDarkColorX}`,
       zIndex: 2,
     },
     {
       name: 'series2',
-      data: series2Values,
-      color: '#BDBDBD',
+      data: biomass,
+      color: `${light.dividerColorNew}`,
       zIndex: 1,
     },
   ];
@@ -207,13 +209,15 @@ const Graph = ({
         <h5 className={styles.graphHeading}>
           {title === 'co2CapturePerHa'
             ? t.rich('co2CapturePerHa', {
-                captureContainer: (chunk) => (
-                  <span style={{ fontWeight: '700' }}>{chunk}</span>
-                ),
+                captureContainer: (chunk) => <span>{chunk}</span>,
               })
             : t(`${title}`)}
           <div className={styles.newInfoIcon}>
-            <NewInfoIcon height={17} width={17} color={'#BDBDBD'} />
+            <NewInfoIcon
+              height={17}
+              width={17}
+              color={`${light.dividerColorNew}`}
+            />
           </div>
         </h5>
         <p className={styles.graphSubheading}> {t(`${subtitle}`)}</p>
@@ -225,7 +229,6 @@ const Graph = ({
           type="area"
           height={153}
           width={'100%'}
-          style={{ display: 'flex', justifyContent: 'center' }}
         />
       </div>
       <div id="html-dist"></div>
diff --git a/src/temp/stories/Graph.stories.tsx b/src/temp/stories/Graph.stories.tsx
index 37a5ee502c..3e1751a23a 100644
--- a/src/temp/stories/Graph.stories.tsx
+++ b/src/temp/stories/Graph.stories.tsx
@@ -15,8 +15,8 @@ export const Preview: Story = {
     years: years,
     title: 'co2CapturePerHa',
     subtitle: 'comparedToRegionalAverage',
-    series1Values: [21.4, 21.27, 20.78, 21.7, 21.78],
-    series2Values: [22.54, 22.65, 21.8, 21.85, 22.03],
+    carbonRemoved: [23.4, 23.27, 23.78, 23.7, 23.78],
+    biomass: [22.54, 22.65, 21.8, 21.85, 22.03],
     tooltip: {
       heading: 'co2Removed',
       unit: 't',

From ae8b71a6bad5c1191609dffb7c9edc0526a1a38a Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Fri, 12 Jul 2024 13:37:27 +0530
Subject: [PATCH 23/28] feat: story for canopy cover, minor code cleanup

---
 public/static/locales/en/projectDetails.json |  4 +-
 src/temp/CarbonCapture/Graph.tsx             | 65 +++++++++++---------
 src/temp/stories/Graph.stories.tsx           | 23 ++++---
 3 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/public/static/locales/en/projectDetails.json b/public/static/locales/en/projectDetails.json
index 0643ce8bdd..0681d8a054 100644
--- a/public/static/locales/en/projectDetails.json
+++ b/public/static/locales/en/projectDetails.json
@@ -19,8 +19,8 @@
     "progressReports": "progress reports",
     "co2CapturePerHa": "<captureContainer>CO₂ Captured</captureContainer>(per ha.)",
     "comparedToRegionalAverage": "Compared to regional average",
-    "co2Removed": "CO₂ removed",
-    "biomass": "Biomass",
+    "co2Removed": "{value}t CO₂ removed",
+    "biomass": "{value}t Biomass",
     "yoy": "+{value}% YoY",
     "projectLaunch": "Project Launch",
     "canopyCover": "Canopy Cover"
diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index c6016b6b37..fcb96d4e1f 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -12,6 +12,8 @@ interface TooltipProps {
   subTitle: string;
   yoyValue: string;
   date: string;
+  type: 'canopyCover' | 'carbonCapture';
+  canopyCoverPercentage: number;
 }
 
 export const Tooltip = ({
@@ -19,12 +21,18 @@ export const Tooltip = ({
   subTitle,
   yoyValue,
   date,
+  type,
+  canopyCoverPercentage,
 }: TooltipProps) => {
   return (
     <div className={styles.tooltipContainer}>
       <div className={styles.header}>
-        <p className={styles.title}>{headerTitle}</p>
-        <p className={styles.subtitle}>{subTitle}</p>
+        <p className={styles.title}>
+          {type === 'carbonCapture' ? headerTitle : `${canopyCoverPercentage}%`}
+        </p>
+        {type === 'carbonCapture' && (
+          <p className={styles.subtitle}>{subTitle}</p>
+        )}
       </div>
       <div className={styles.body}>
         <p className={styles.yoyValue}>{yoyValue}</p>
@@ -38,13 +46,9 @@ interface GraphProps {
   title: string;
   subtitle: string;
   years: number[];
-  carbonRemoved: number[];
-  biomass: number[];
-  tooltip: {
-    heading: string;
-    unit: string;
-    subheading: string;
-  };
+  byProjectResult: number[];
+  regionalAverage: number[];
+  type: 'carbonCapture' | 'canopyCover';
 }
 
 interface CustomTooltipProps {
@@ -53,12 +57,10 @@ interface CustomTooltipProps {
 }
 
 const Graph = ({
-  title,
-  subtitle,
   years,
-  carbonRemoved,
-  biomass,
-  tooltip,
+  byProjectResult,
+  regionalAverage,
+  type,
 }: GraphProps) => {
   const t = useTranslations('ProjectDetails');
   const [xaxisOptions, setXaxisOptions] = useState<
@@ -75,7 +77,6 @@ const Graph = ({
     });
     setXaxisOptions(newOptions);
   }, []);
-
   const options = {
     fill: {
       type: 'gradient',
@@ -95,26 +96,28 @@ const Graph = ({
     tooltip: {
       custom: function ({ dataPointIndex, w }: CustomTooltipProps) {
         const getToolTip = () => {
-          const headingTranslation = t(`${tooltip.heading}`);
-          const subHeadingTranslation = t(`${tooltip.subheading}`);
+          const headingTranslation = t('co2Removed', {
+            value: w.globals.series[0][dataPointIndex],
+          });
+          const subHeadingTranslation = t('biomass', {
+            value: w.globals.series[1][dataPointIndex],
+          });
           const yoyTranslation = t('yoy', {
             value: 4,
           });
+          const canopyCoverPercentage = 43;
           const dataPoint = xaxisOptions[dataPointIndex];
           const year = Array.isArray(dataPoint) ? dataPoint[0] : dataPoint;
-
-          const headerTitle = `${w.globals.series[0][dataPointIndex]}${tooltip.unit} ${headingTranslation}`;
-          const subTitle = subHeadingTranslation
-            ? `${w.globals.series[1][dataPointIndex]}${tooltip.unit} ${subHeadingTranslation}`
-            : '';
           const date = year.toString();
 
           return (
             <Tooltip
-              headerTitle={headerTitle}
-              subTitle={subTitle}
+              headerTitle={headingTranslation}
+              subTitle={subHeadingTranslation}
               yoyValue={yoyTranslation}
               date={date}
+              type={type}
+              canopyCoverPercentage={canopyCoverPercentage}
             />
           );
         };
@@ -192,13 +195,13 @@ const Graph = ({
   const series = [
     {
       name: 'series1',
-      data: carbonRemoved,
+      data: byProjectResult,
       color: `${primaryDarkColorX}`,
       zIndex: 2,
     },
     {
       name: 'series2',
-      data: biomass,
+      data: regionalAverage,
       color: `${light.dividerColorNew}`,
       zIndex: 1,
     },
@@ -207,11 +210,11 @@ const Graph = ({
     <div className={styles.container}>
       <div className={styles.titleContainer}>
         <h5 className={styles.graphHeading}>
-          {title === 'co2CapturePerHa'
+          {type === 'carbonCapture'
             ? t.rich('co2CapturePerHa', {
                 captureContainer: (chunk) => <span>{chunk}</span>,
               })
-            : t(`${title}`)}
+            : t('canopyCover')}
           <div className={styles.newInfoIcon}>
             <NewInfoIcon
               height={17}
@@ -220,7 +223,11 @@ const Graph = ({
             />
           </div>
         </h5>
-        <p className={styles.graphSubheading}> {t(`${subtitle}`)}</p>
+        {type === 'carbonCapture' && (
+          <p className={styles.graphSubheading}>
+            {t('comparedToRegionalAverage')}
+          </p>
+        )}
       </div>
       <div id="chart">
         <ReactApexChart
diff --git a/src/temp/stories/Graph.stories.tsx b/src/temp/stories/Graph.stories.tsx
index 3e1751a23a..27110efd7e 100644
--- a/src/temp/stories/Graph.stories.tsx
+++ b/src/temp/stories/Graph.stories.tsx
@@ -10,17 +10,20 @@ type Story = StoryObj<typeof Graph>;
 
 const years = [2019, 2020, 2021, 2022, 2023];
 
-export const Preview: Story = {
+export const CarbonCapture: Story = {
   args: {
     years: years,
-    title: 'co2CapturePerHa',
-    subtitle: 'comparedToRegionalAverage',
-    carbonRemoved: [23.4, 23.27, 23.78, 23.7, 23.78],
-    biomass: [22.54, 22.65, 21.8, 21.85, 22.03],
-    tooltip: {
-      heading: 'co2Removed',
-      unit: 't',
-      subheading: 'biomass',
-    },
+    byProjectResult: [23.4, 23.27, 23.78, 23.7, 23.78],
+    regionalAverage: [22.54, 22.65, 21.8, 21.85, 22.03],
+    type: 'carbonCapture',
+  },
+};
+
+export const CanopyCover: Story = {
+  args: {
+    years: years,
+    byProjectResult: [23, 24, 25, 26, 27],
+    regionalAverage: [19, 20, 21, 22, 23],
+    type: 'canopyCover',
   },
 };

From 40295164f010842f72f076c0801d85b057c8c5c3 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Fri, 12 Jul 2024 14:23:35 +0530
Subject: [PATCH 24/28] refactor: increase the font-size

---
 src/temp/CarbonCapture/Graph.module.scss | 6 +++---
 src/temp/CarbonCapture/Graph.tsx         | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/temp/CarbonCapture/Graph.module.scss b/src/temp/CarbonCapture/Graph.module.scss
index 5c861bf394..473066f34c 100644
--- a/src/temp/CarbonCapture/Graph.module.scss
+++ b/src/temp/CarbonCapture/Graph.module.scss
@@ -11,7 +11,7 @@
       margin-bottom: 5px;
     }
     .subtitle {
-      font-size: $fontXXXSmallNew;
+      font-size: $fontXXSmallNew;
       font-weight: 400;
     }
   }
@@ -27,7 +27,7 @@
       font-size: $fontXXSmallNew;
     }
     .date {
-      font-size: 6px; //to be replaced
+      font-size: 10px;
       font-weight: 500;
       color: $dark;
       opacity: 0.5;
@@ -55,7 +55,7 @@
   }
   .graphSubheading {
     color: #bdbdbd; //to be replaced
-    font-size: $fontXXXSmallNew;
+    font-size: $fontXXSmallNew;
     text-transform: lowercase;
     padding: 0 15px;
   }
diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index fcb96d4e1f..d12adf25bc 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -77,6 +77,7 @@ const Graph = ({
     });
     setXaxisOptions(newOptions);
   }, []);
+
   const options = {
     fill: {
       type: 'gradient',
@@ -206,6 +207,7 @@ const Graph = ({
       zIndex: 1,
     },
   ];
+
   return (
     <div className={styles.container}>
       <div className={styles.titleContainer}>

From b6227d76d096eb4765d965761962afe284906df5 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Fri, 12 Jul 2024 14:32:13 +0530
Subject: [PATCH 25/28] refactor: make text bold

---
 public/static/locales/en/projectDetails.json | 2 +-
 src/temp/CarbonCapture/Graph.module.scss     | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/public/static/locales/en/projectDetails.json b/public/static/locales/en/projectDetails.json
index 0681d8a054..f1b5e55644 100644
--- a/public/static/locales/en/projectDetails.json
+++ b/public/static/locales/en/projectDetails.json
@@ -17,7 +17,7 @@
     "privateProperty": "private property",
     "publicProperty": "public property",
     "progressReports": "progress reports",
-    "co2CapturePerHa": "<captureContainer>CO₂ Captured</captureContainer>(per ha.)",
+    "co2CapturePerHa": "CO₂ Captured<captureContainer>(per ha.)</captureContainer>",
     "comparedToRegionalAverage": "Compared to regional average",
     "co2Removed": "{value}t CO₂ removed",
     "biomass": "{value}t Biomass",
diff --git a/src/temp/CarbonCapture/Graph.module.scss b/src/temp/CarbonCapture/Graph.module.scss
index 473066f34c..178b9262de 100644
--- a/src/temp/CarbonCapture/Graph.module.scss
+++ b/src/temp/CarbonCapture/Graph.module.scss
@@ -49,8 +49,9 @@
     align-items: center;
     padding: 0 15px;
     gap: 2px;
+    font-weight: 700;
     span {
-      font-weight: 700;
+      font-weight: 400;
     }
   }
   .graphSubheading {

From c7de0b15b7556ed86c37d65b6903269b4ee90044 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Fri, 12 Jul 2024 15:52:07 +0530
Subject: [PATCH 26/28] feat: dot notation for project launch verticle line

---
 src/temp/CarbonCapture/Graph.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index d12adf25bc..27c675fda1 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -66,7 +66,7 @@ const Graph = ({
   const [xaxisOptions, setXaxisOptions] = useState<
     (number | (string | number)[])[]
   >([]);
-  const { light, primaryDarkColorX } = themeProperties;
+  const { light, primaryDarkColorX, darkBlackColor } = themeProperties;
   useEffect(() => {
     const newOptions = years.map((year, index) => {
       if (index === 1) {
@@ -187,8 +187,8 @@ const Graph = ({
       xaxis: [
         {
           x: xaxisOptions[1],
-          strokeDashArray: 0,
-          borderColor: `${primaryDarkColorX}`,
+          strokeDashArray: 4,
+          borderColor: `${darkBlackColor}`,
         },
       ],
     },

From 09f4a45c4119959bb75529d8a26a053140cdf17a Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Fri, 12 Jul 2024 16:10:06 +0530
Subject: [PATCH 27/28] feat: include month in the graph tootip

---
 src/temp/CarbonCapture/Graph.module.scss | 2 +-
 src/temp/CarbonCapture/Graph.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/temp/CarbonCapture/Graph.module.scss b/src/temp/CarbonCapture/Graph.module.scss
index 178b9262de..5d60e0578f 100644
--- a/src/temp/CarbonCapture/Graph.module.scss
+++ b/src/temp/CarbonCapture/Graph.module.scss
@@ -1,7 +1,7 @@
 @import '../../theme/theme';
 
 .tooltipContainer {
-  min-width: 100px;
+  min-width: 120px;
   .header {
     padding: 10px 10px 8px 10px;
     .title {
diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index 27c675fda1..797e0ac119 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -36,7 +36,7 @@ export const Tooltip = ({
       </div>
       <div className={styles.body}>
         <p className={styles.yoyValue}>{yoyValue}</p>
-        <p className={styles.date}>{date}</p>
+        <p className={styles.date}>Aug {date}</p>
       </div>
     </div>
   );

From 314a4e26fa66df3fd444ce7f9520e1b60f256491 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Fri, 12 Jul 2024 16:15:43 +0530
Subject: [PATCH 28/28] feat: reduce stroke dash array

---
 src/temp/CarbonCapture/Graph.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx
index 797e0ac119..3d859b2388 100644
--- a/src/temp/CarbonCapture/Graph.tsx
+++ b/src/temp/CarbonCapture/Graph.tsx
@@ -187,7 +187,7 @@ const Graph = ({
       xaxis: [
         {
           x: xaxisOptions[1],
-          strokeDashArray: 4,
+          strokeDashArray: 2,
           borderColor: `${darkBlackColor}`,
         },
       ],