Design graph component (CO2 Captured and Canopy Cover)

.github/workflows/chromatic.yml

@@ -10,6 +10,7 @@ on:
       - develop
       - feature/redesign-explore-btn
       - feature/merge-from-develop
+      - feature/design-capture-graph
 # List of jobs
 jobs:
   chromatic-deployment:

public/static/locales/en/projectDetails.json

@@ -16,6 +16,13 @@
     "plantingSeasons": "planting seasons",
     "privateProperty": "private property",
     "publicProperty": "public property",
-    "progressReports": "progress reports"
+    "progressReports": "progress reports",
+    "co2CapturePerHa": "CO₂ Captured<captureContainer>(per ha.)</captureContainer>",
+    "comparedToRegionalAverage": "Compared to regional average",
+    "co2Removed": "{value}t CO₂ removed",
+    "biomass": "{value}t Biomass",
+    "yoy": "+{value}% YoY",
+    "projectLaunch": "Project Launch",
+    "canopyCover": "Canopy Cover"
   }
 }

src/temp/CarbonCapture/Graph.module.scss

@@ -0,0 +1,75 @@
+@import '../../theme/theme';
+
+.tooltipContainer {
+  min-width: 120px;
+  .header {
+    padding: 10px 10px 8px 10px;
+    .title {
+      color: #333; //to be replaced
+      font-size: $fontSmall;
+      font-weight: 500;
+      margin-bottom: 5px;
+    }
+    .subtitle {
+      font-size: $fontXXSmallNew;
+      font-weight: 400;
+    }
+  }
+  .body {
+    background-color: rgba(var(--primary-color-new), 0.1);
+    padding: 4px 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .yoyValue {
+      color: $secondaryColorNew;
+      font-weight: 700;
+      font-size: $fontXXSmallNew;
+    }
+    .date {
+      font-size: 10px;
+      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;
+    span {
+      font-weight: 400;
+    }
+  }
+  .graphSubheading {
+    color: #bdbdbd; //to be replaced
+    font-size: $fontXXSmallNew;
+    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,248 @@
+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 { useTranslations } from 'next-intl';
+import themeProperties from '../../theme/themeProperties';
+
+interface TooltipProps {
+  headerTitle: string;
+  subTitle: string;
+  yoyValue: string;
+  date: string;
+  type: 'canopyCover' | 'carbonCapture';
+  canopyCoverPercentage: number;
+}
+
+export const Tooltip = ({
+  headerTitle,
+  subTitle,
+  yoyValue,
+  date,
+  type,
+  canopyCoverPercentage,
+}: TooltipProps) => {
+  return (
+    <div className={styles.tooltipContainer}>
+      <div className={styles.header}>
+        <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>
+        <p className={styles.date}>Aug {date}</p>
+      </div>
+    </div>
+  );
+};
+
+interface GraphProps {
+  title: string;
+  subtitle: string;
+  years: number[];
+  byProjectResult: number[];
+  regionalAverage: number[];
+  type: 'carbonCapture' | 'canopyCover';
+}
+
+interface CustomTooltipProps {
+  dataPointIndex: number;
+  w: { config: ApexOptions; globals: any };
+}
+
+const Graph = ({
+  years,
+  byProjectResult,
+  regionalAverage,
+  type,
+}: GraphProps) => {
+  const t = useTranslations('ProjectDetails');
+  const [xaxisOptions, setXaxisOptions] = useState<
+    (number | (string | number)[])[]
+  >([]);
+  const { light, primaryDarkColorX, darkBlackColor } = themeProperties;
+  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 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 date = year.toString();
+
+          return (
+            <Tooltip
+              headerTitle={headingTranslation}
+              subTitle={subHeadingTranslation}
+              yoyValue={yoyTranslation}
+              date={date}
+              type={type}
+              canopyCoverPercentage={canopyCoverPercentage}
+            />
+          );
+        };
+
+        return ReactDOMServer.renderToString(getToolTip());
+      },
+      followCursor: true,
+    },
+    markers: {
+      size: 0,
+      colors: [`${light.light}`, 'transparent'],
+      strokeColors: [`${primaryDarkColorX}`, '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: `${light.grayFontColorNew}`,
+          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: 2,
+          borderColor: `${darkBlackColor}`,
+        },
+      ],
+    },
+  };
+  const series = [
+    {
+      name: 'series1',
+      data: byProjectResult,
+      color: `${primaryDarkColorX}`,
+      zIndex: 2,
+    },
+    {
+      name: 'series2',
+      data: regionalAverage,
+      color: `${light.dividerColorNew}`,
+      zIndex: 1,
+    },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.titleContainer}>
+        <h5 className={styles.graphHeading}>
+          {type === 'carbonCapture'
+            ? t.rich('co2CapturePerHa', {
+                captureContainer: (chunk) => <span>{chunk}</span>,
+              })
+            : t('canopyCover')}
+          <div className={styles.newInfoIcon}>
+            <NewInfoIcon
+              height={17}
+              width={17}
+              color={`${light.dividerColorNew}`}
+            />
+          </div>
+        </h5>
+        {type === 'carbonCapture' && (
+          <p className={styles.graphSubheading}>
+            {t('comparedToRegionalAverage')}
+          </p>
+        )}
+      </div>
+      <div id="chart">
+        <ReactApexChart
+          options={options}
+          series={series}
+          type="area"
+          height={153}
+          width={'100%'}
+        />
+      </div>
+      <div id="html-dist"></div>
+    </div>
+  );
+};
+
+export default Graph;

src/temp/stories/Graph.stories.tsx

@@ -0,0 +1,29 @@
+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 CarbonCapture: Story = {
+  args: {
+    years: years,
+    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',
+  },
+};

src/theme/_colors.scss

@@ -37,3 +37,4 @@ $dividerColorNew: var(--divider-color-new);
 $reviewFontColorNew: var(--review-font-color-new);
 $aboutProjectBackgroundColorNew: var(--about-project-background-color-new);
 $dangerColorNew: var(--danger-color-new);
+$secondaryColorNew: var(--secondary-color-new);

src/theme/_fonts.scss

@@ -11,3 +11,4 @@ $fontXXXLarge: var(--font-xxx-large);
 $secondaryFontFamily: var(--secondary-font-family);
 $fontXXXSmallNew: var(--font-xxx-extra-small-new);
 $fontXXXXSmallNew: var(--font-xxxx-extra-small-new);
+$fontXXSmallNew: var(--font-xx-extra-small-new);