Design graph component (CO2 Captured and Canopy Cover)

.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:

public/static/locales/en/projectDetails.json

@@ -1,3 +1,10 @@
 {
-    "satelliteAnalysis": "Satellite Analysis"
+    "satelliteAnalysis": "Satellite Analysis",
+    "co2CapturePerHa": "CO₂ Captured <p>(per ha.)</p>",
+    "comparedToRegionalAverage": "Compared to regional average",
+    "co2Removed": "CO₂ removed",
+    "biomass": "Biomass",
+    "yoy": "YoY",
+    "projectLaunch": "Project Launch",
+    "canopyCover": "Canopy Cover"
 }

src/temp/CarbonCapture/Graph.module.scss

@@ -0,0 +1,76 @@
+@import '../../theme/theme';
+
+.tooltipContainer {
+    min-width: 100px;
+    .header {
+        padding: 10px 10px 8px 10px;
+        .title {
+            color: #333; //to be replaced
+            font-size: $fontSmall;
+            font-weight: 500;
+            margin-bottom: 5px;
+        }
+        .subtitle {
+            font-size: $fontXXXSmallNew;
+            font-weight: 400;
+        }
+    }
+    .body {
+        background-color: rgba(var(--primary-color-new), 0.10);
+        padding: 4px 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .yoyValue {
+            color: $secondaryColorNew;
+            font-weight: 700;
+            font-size: $fontXXSmallNew;
+        }
+        .date {
+            font-size: 6px; //to be replaced
+            font-weight: 500;
+            color: $dark;
+            opacity: 0.5;
+        }
+    }
+}
+
+.container {
+    width: 100%;
+    max-width: 338px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .graphHeading {
+        font-size: $fontXXSmall;
+        color: #2F3336; //to be replaced
+        display: flex;
+        align-items: center;
+        padding:0 15px;
+        gap: 2px;
+        font-weight: 700;
+        p {
+            font-weight: 400;
+        }
+
+    }
+    .graphSubheading {
+        color: #BDBDBD; //to be replaced
+        font-size: $fontXXXSmallNew;
+        text-transform: lowercase;
+        padding:0 15px;
+    }
+}
+
+.titleContainer {
+    width: 100%;
+    max-width: 300px;
+}
+.newInfoIcon {
+    margin-left: auto;
+    margin-right: 6px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}

src/temp/CarbonCapture/Graph.tsx

@@ -0,0 +1,236 @@
+import React, { useEffect, useState } from 'react';
+import ReactApexChart from 'react-apexcharts';
+import styles from './Graph.module.scss';
+import ReactDOMServer from 'react-dom/server';
+import NewInfoIcon from '../icons/NewInfoIcon';
+import { ApexOptions } from 'apexcharts';
+import { Trans, useTranslation } from 'next-i18next';
+
+interface TooltipProps {
+  headerTitle: string;
+  subTitle: string;
+  yoyValue: string;
+  date: string;
+}
+
+export const Tooltip = ({
+  headerTitle,
+  subTitle,
+  yoyValue,
+  date,
+}: TooltipProps) => {
+  const { t } = useTranslation('projectDetails');
+  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} {t('yoy')}
+        </p>
+        <p className={styles.date}>{date}</p>
+      </div>
+    </div>
+  );
+};
+
+interface GraphProps {
+  title: string;
+  subtitle: string;
+  years: number[];
+  series1Values: number[];
+  series2Values: number[];
+  tooltip: {
+    heading: string;
+    unit: string;
+    subheading: string;
+  };
+}
+
+interface CustomTooltipProps {
+  dataPointIndex: number;
+  w: { config: ApexOptions; globals: any };
+}
+
+const Graph = ({
+  title,
+  subtitle,
+  years,
+  series1Values,
+  series2Values,
+  tooltip,
+}: GraphProps) => {
+  const { t } = useTranslation('projectDetails');
+  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: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 1,
+        opacityFrom: 0.58,
+        opacityTo: 0,
+      },
+    },
+    chart: {
+      type: 'area',
+      width: 300,
+      toolbar: {
+        show: false,
+      },
+    },
+    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
+              } ${t(`${tooltip.heading}`)}`}
+              subTitle={
+                tooltip.subheading
+                  ? `${w.globals.series[1][dataPointIndex]}${tooltip.unit} ${t(
+                      `${tooltip.subheading}`
+                    )}`
+                  : ''
+              }
+              yoyValue={'+4%'}
+              date={year.toString()}
+            />
+          );
+        };
+
+        return ReactDOMServer.renderToString(getToolTip());
+      },
+      followCursor: true,
+    },
+    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,
+      },
+      axisBorder: {
+        show: false,
+      },
+    },
+    yaxis: {
+      show: false,
+    },
+    grid: {
+      show: false,
+    },
+    legend: {
+      show: false,
+    },
+    annotations: {
+      xaxis: [
+        {
+          x: xaxisOptions[1],
+          strokeDashArray: 0,
+          borderColor: '#219653',
+        },
+      ],
+    },
+  };
+  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}>
+        <h5 className={styles.graphHeading}>
+          {title === 'co2CapturePerHa' ? (
+            <Trans i18nKey="co2CapturePerHa">
+              CO₂ 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>
+      <div id="chart">
+        <ReactApexChart
+          options={options}
+          series={series}
+          type="area"
+          height={153}
+          width={'100%'}
+          style={{ display: 'flex', justifyContent: 'center' }}
+        />
+      </div>
+      <div id="html-dist"></div>
+    </div>
+  );
+};
+
+export default Graph;

src/temp/stories/Graph.stories.tsx

@@ -0,0 +1,26 @@
+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 years = [2019, 2020, 2021, 2022, 2023];
+
+export const Preview: Story = {
+  args: {
+    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],
+    tooltip: {
+      heading: 'co2Removed',
+      unit: 't',
+      subheading: 'biomass',
+    },
+  },
+};

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)

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);

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};