diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index abb2d414df..c27551dd07 100644 --- a/.github/workflows/chromatic.yml +++ b/.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: diff --git a/public/static/locales/en/projectDetails.json b/public/static/locales/en/projectDetails.json index 1475ed2d08..f1b5e55644 100644 --- a/public/static/locales/en/projectDetails.json +++ b/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(per ha.)", + "comparedToRegionalAverage": "Compared to regional average", + "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.module.scss b/src/temp/CarbonCapture/Graph.module.scss new file mode 100644 index 0000000000..5d60e0578f --- /dev/null +++ b/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; +} diff --git a/src/temp/CarbonCapture/Graph.tsx b/src/temp/CarbonCapture/Graph.tsx new file mode 100644 index 0000000000..3d859b2388 --- /dev/null +++ b/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 ( +
+
+

+ {type === 'carbonCapture' ? headerTitle : `${canopyCoverPercentage}%`} +

+ {type === 'carbonCapture' && ( +

{subTitle}

+ )} +
+
+

{yoyValue}

+

Aug {date}

+
+
+ ); +}; + +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 ( + + ); + }; + + 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 ( +
+
+
+ {type === 'carbonCapture' + ? t.rich('co2CapturePerHa', { + captureContainer: (chunk) => {chunk}, + }) + : t('canopyCover')} +
+ +
+
+ {type === 'carbonCapture' && ( +

+ {t('comparedToRegionalAverage')} +

+ )} +
+
+ +
+
+
+ ); +}; + +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..27110efd7e --- /dev/null +++ b/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 = { + component: Graph, +}; + +export default meta; +type Story = StoryObj; + +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', + }, +}; diff --git a/src/theme/_colors.scss b/src/theme/_colors.scss index b8ad55974c..a865b9d254 100644 --- a/src/theme/_colors.scss +++ b/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); diff --git a/src/theme/_fonts.scss b/src/theme/_fonts.scss index d435fe3918..78937774df 100644 --- a/src/theme/_fonts.scss +++ b/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); diff --git a/src/theme/theme.ts b/src/theme/theme.ts index 0835ad640e..a595911dad 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -16,6 +16,7 @@ const { deforestrationRangeBackgroundNew, horizontalLineColorNew, exploreDescriptionBackground, + secondaryColorNew, } = theme; const getGlobalStyles = async () => { @@ -60,6 +61,7 @@ const getGlobalStyles = async () => { --font-xxxx-extra-small-new: ${fontSizes.fontXXXXSmallNew}; --font-xxx-extra-small-new: ${fontSizes.fontXXXSmallNew}; --font-xx-extra-small: ${fontSizes.fontXXSmall}; + --font-xx-extra-small-new: ${fontSizes.fontXXSmallNew}; --font-x-extra-small: ${fontSizes.fontXSmall}; --font-small: ${fontSizes.fontSmall}; --font-sixteen: ${fontSizes.fontSixteen}; @@ -77,6 +79,7 @@ const getGlobalStyles = async () => { --deforestration-range-background-new: ${deforestrationRangeBackgroundNew}; --explore-description-background-color-new: ${exploreDescriptionBackground}; --horizontal-line-color: ${horizontalLineColorNew}; + --secondary-color-new: ${secondaryColorNew}; } .theme-light { --primary-font-color: ${light.primaryFontColor}; diff --git a/src/theme/themeProperties.ts b/src/theme/themeProperties.ts index 5070d5e0b1..4bf0bbe75d 100644 --- a/src/theme/themeProperties.ts +++ b/src/theme/themeProperties.ts @@ -4,6 +4,7 @@ const themeProperties = { fontSizes: { fontXXXXSmallNew: '6px', fontXXXSmallNew: '8px', + fontXXSmallNew: '9px', fontXXSmall: '10px', fontXSmall: '12px', fontSmall: '14px', @@ -29,11 +30,12 @@ const themeProperties = { topProjectBackgroundColor: '#F3BB44', nonDonatableProjectBackgroundColor: '#828282', deforestrationRangeBackgroundNew: '235, 87, 87', - primaryColorNew: '#219653', + primaryColorNew: '33, 150, 83', horizontalLineColorNew: '#bdbdbd', restorationToggleColorNew: '#2f80ed', deforestrationToggleColorNew: 'rgba(235, 87, 87, 1)', exploreDescriptionBackground: '242, 242, 242', + secondaryColorNew: '#377E36', light: { primaryFontColor: '#2f3336', dividerColor: '#d5d5d5',