carbon capture modal #1979
+513
−4
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import style from './CarbonCapture.module.scss'; | ||
| import { useTranslations, useLocale } from 'next-intl'; | ||
| import { getFormattedNumber } from '../../utils/getFormattedNumber'; | ||
|
|
||
| interface CO2BarGraphProps { | ||
| beforeIntervation: number; | ||
| byProject: number; | ||
| sitePotential: number; | ||
| } | ||
|
|
||
| export const CO2BarGraph = ({ | ||
| beforeIntervation, | ||
| byProject, | ||
| sitePotential, | ||
| }: CO2BarGraphProps) => { | ||
| const calculatePercentage = (value: number, sitePotential: number) => { | ||
| return (value / sitePotential) * 100; | ||
| }; | ||
|
|
||
| const beforeIntervationPercentage = calculatePercentage( | ||
| beforeIntervation, | ||
| sitePotential | ||
| ); | ||
| const byProjectPercentage = calculatePercentage(byProject, sitePotential); | ||
|
|
||
| return ( | ||
| <div className={style.carbonCaptureIndicator}> | ||
| <div | ||
| style={{ | ||
| width: `${beforeIntervationPercentage}%`, | ||
| }} | ||
| className={style.beforeIntervationIndicator} | ||
| /> | ||
|
|
||
| <div | ||
| style={{ | ||
| width: `${byProjectPercentage}%`, | ||
| }} | ||
| className={style.byProjectIndicator} | ||
| /> | ||
|
|
||
| <div | ||
| style={{ | ||
| width: `${ | ||
| 100 - (beforeIntervationPercentage + byProjectPercentage) | ||
| }%`, | ||
| }} | ||
| className={style.projectPotential} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export const CO2CaptureData = ({ | ||
| beforeIntervation, | ||
| byProject, | ||
| sitePotential, | ||
| }: CO2BarGraphProps) => { | ||
| const t = useTranslations('ProjectDetails'); | ||
| const locale = useLocale(); | ||
| return ( | ||
| <div className={style.carbonCaptureDataContainerMain}> | ||
| <div> | ||
| <p className={style.beforeIntervationData}> | ||
| {t('co₂Quantity', { | ||
| quantity: getFormattedNumber(locale, beforeIntervation), | ||
| })} | ||
| </p> | ||
| <p className={style.beforeIntervationLabel}> | ||
| {t('beforeIntervention')} | ||
| </p> | ||
| <p className={style.beforeIntervationDate}> | ||
| {t('before', { | ||
| date: 2018, | ||
| })} | ||
| </p> | ||
| </div> | ||
| <div> | ||
| <p className={style.byProjectData}> | ||
| {t('byProjectCO₂Quantity', { | ||
| quantity: getFormattedNumber(locale, byProject), | ||
| })} | ||
| </p> | ||
| <p className={style.byProjectLabel}>{t('byProject')}</p> | ||
| <p className={style.byProjectDate}> | ||
| {t('since', { | ||
| date: 2018, | ||
| })} | ||
| </p> | ||
| </div> | ||
| <div className={style.sitePotentialDataContainer}> | ||
| <p className={style.sitePotentialData}> | ||
| {t('co₂Quantity', { | ||
| quantity: getFormattedNumber(locale, sitePotential), | ||
| })} | ||
| </p> | ||
| <p className={style.sitePotentialLabel}>{t('sitePotential')}</p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
Comment on lines
+1
to
+101
There was a problem hiding this comment. 🛠️ Refactor suggestion Consider overall structural and type improvements.
type FormattedNumber = string;
interface CO2CaptureProps {
beforeIntervation: number;
byProject: number;
sitePotential: number;
getFormattedNumber: (locale: string, value: number) => FormattedNumber;
}This change will make the component more robust and easier to maintain in the long run.
Comment on lines
+54
to
+101
There was a problem hiding this comment. 🛠️ Refactor suggestion Consider extracting the hardcoded year to a constant or prop. The year 2018 is used multiple times in the component. To improve maintainability and flexibility, consider extracting it to a constant or passing it as a prop. + const INTERVENTION_YEAR = 2018;
// or add it to the component props
// Then use it in the component
- date: 2018,
+ date: INTERVENTION_YEAR,This change will make it easier to update the year in the future if needed.
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,185 @@ | ||
| @import '../../theme/theme'; | ||
|
|
||
| .carbonCaptureMainContainer { | ||
| width: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .carbonCaptureInfoContainer { | ||
| display: flex; | ||
| height: 111px; | ||
| flex-direction: column; | ||
| gap: 12px; | ||
| padding-left: 15.5px; | ||
| padding-right: 15.5px; | ||
| } | ||
|
|
||
| .carbonCaptureLabelMainContainer { | ||
| font-size: $fontXXSmall; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .carbonCaptureLabelContainer { | ||
| display: flex; | ||
| align-items: center; | ||
| > .carbonCapture { | ||
| display: flex; | ||
| font-weight: 700; | ||
| gap: 2px; | ||
| p { | ||
| font-weight: 400; | ||
| } | ||
| } | ||
| .unit { | ||
| margin-left: 1px; | ||
| } | ||
| } | ||
|
|
||
| .carbonCaptureDetailContainer { | ||
| padding-left: 16px; | ||
| padding-right: 16px; | ||
| padding-top: 16px; | ||
| border: 1px solid rgba(111, 207, 151, 0.02); | ||
| background: linear-gradient( | ||
| 0deg, | ||
| rgba(33, 150, 83, 0.1) 0%, | ||
| rgba(33, 150, 83, 0.1) 100% | ||
| ), | ||
| $light; | ||
|
|
||
| height: 70px; | ||
| border-radius: 12px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 10px; | ||
| } | ||
|
|
||
| .carbonCaptureIndicator { | ||
| max-width: 274px; | ||
| height: 11px; | ||
| display: flex; | ||
| border-radius: 3px; | ||
|
|
||
| .beforeIntervationIndicator { | ||
| width: 100%; | ||
| height: 100%; | ||
| background: rgba(0, 122, 73, 1); | ||
| border-top-left-radius: 3px; | ||
| border-bottom-left-radius: 3px; | ||
| } | ||
| .byProjectIndicator { | ||
| width: 100%; | ||
| background: rgba(104, 176, 48, 1); | ||
| height: 100%; | ||
| } | ||
| .projectPotential { | ||
| width: 100%; | ||
| background: $light; | ||
| height: 100%; | ||
| border-top-right-radius: 3px; | ||
| border-bottom-right-radius: 3px; | ||
| } | ||
| } | ||
|
|
||
| .carbonCaptureDataContainerMain { | ||
| display: flex; | ||
| width: 100%; | ||
| justify-content: space-between; | ||
| } | ||
| .carbonCaptureDataContainer { | ||
| display: flex; | ||
| padding-left: 16px; | ||
| padding-top: 4px; | ||
| padding-right: 16px; | ||
| } | ||
| .beforeIntervationData { | ||
| color: $primaryColorNew; | ||
| font-size: $fontXXXSmallNew; | ||
| font-weight: 700; | ||
| } | ||
| .beforeIntervationLabel { | ||
| font-size: $fontXXXSmallNew; | ||
| font-weight: 400; | ||
| } | ||
| .beforeIntervationDate { | ||
| font-size: 6px; | ||
| color: $nonDonatableProjectBackgroundColor; | ||
| } | ||
| .byProjectData { | ||
| color: $primaryColor; | ||
| font-size: $fontXXXSmallNew; | ||
| font-weight: 700; | ||
| } | ||
| .byProjectLabel { | ||
| font-size: $fontXXXSmallNew; | ||
| font-weight: 400; | ||
| } | ||
| .byProjectDate { | ||
| font-size: 6px; | ||
| color: $nonDonatableProjectBackgroundColor; | ||
| } | ||
| .sitePotentialDataContainer { | ||
| display: flex; | ||
| align-items: flex-end; | ||
| flex-direction: column; | ||
| .sitePotentialData { | ||
| color: #333; | ||
| font-size: $fontXXXSmallNew; | ||
| font-weight: bold; | ||
| } | ||
| .sitePotentialLabel { | ||
| font-size: $fontXXXSmallNew; | ||
| font-weight: 400; | ||
| } | ||
| } | ||
|
|
||
| .carbonCaptureModal { | ||
| max-width: 338px; | ||
| border-radius: 16px; | ||
| overflow: hidden; | ||
| background-color: $light; | ||
| } | ||
|
|
||
| .infoIconContainer { | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .seeMoreButton { | ||
| background: linear-gradient(0deg, $primaryColorNew 0%, $primaryColorNew 100%), | ||
| $light; | ||
| width: 100%; | ||
| height: 27px; | ||
| margin-top: 24px; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .seeMoreLabel { | ||
| font-size: $fontXXXSmallNew; | ||
| font-weight: 700; | ||
| color: $light; | ||
| } | ||
|
|
||
| .downArrow { | ||
| margin-left: 5px; | ||
| margin-bottom: 5px; | ||
| } | ||
|
|
||
| .horizontalLine { | ||
| position: relative; | ||
| top: -8px; | ||
| } | ||
|
|
||
| .carbonCaptureValue { | ||
| margin-left: 2px; | ||
| font-weight: 400; | ||
| } | ||
|
|
||
| .areaCount { | ||
| margin-right: 2px; | ||
| font-weight: 700; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { styled, Tabs } from '@mui/material'; | ||
|
|
||
| const CustomMuiTabs = styled(Tabs)(() => ({ | ||
| '.MuiTabs-flexContainer': { | ||
| justifyContent: 'center', | ||
| marginTop: '24px', | ||
| gap: '30px', | ||
| }, | ||
| '.MuiButtonBase-root': { | ||
| textTransform: 'none', | ||
| fontSize: '12px', | ||
| color: `var(--primary-font-color)`, | ||
| }, | ||
| '.MuiButtonBase-root-MuiTab-root.Mui-selected': { | ||
| color: `var(--primary-color-new)`, | ||
| }, | ||
| '.MuiTabs-indicator': { | ||
| backgroundColor: `var(--primary-color-new)`, | ||
| }, | ||
| '.MuiTab-root.Mui-selected': { | ||
| color: `var(--primary-color-new)`, | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| }, | ||
| '.MuiTab-root': { | ||
| minHeight: '0px', | ||
| padding: '0px 0px', | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| }, | ||
| })); | ||
|
Comment on lines
+3
to
+31
There was a problem hiding this comment. 🛠️ Refactor suggestion Consider enhancing responsiveness and reusability of the CustomMuiTabs component. The styled component effectively customizes the Material-UI Tabs with specific styles. However, there are a few suggestions for improvement:
Would you like assistance in implementing these suggestions? |
||
|
|
||
| export default CustomMuiTabs; | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
LGTM with a minor optimization suggestion.
The
CO2BarGraphcomponent is well-implemented and correctly visualizes the carbon capture data. Consider this small optimization:You can optimize the percentage calculations by computing them once and reusing the results:
This change improves readability and avoids recalculating the remaining percentage.
📝 Committable suggestion