New WebPart: React Carbon Footprint Calculator (by João Livio) #5473
Conversation
Sample PR validation for #5473
|
| Validation | Status |
|---|---|
| Pull request affects only one folder | ✅ Succeeded |
| Sample folder name follows naming convention | ✅ Succeeded |
| README.md contains visitor stat image | |
| Sample requires a .nvmrc file | |
| Sample requires a README.md | ✅ Succeeded |
| Sample requires a screenshot .png in assets folder | ✅ Succeeded |
| No .sppkg file | ✅ Succeeded |
| No node_modules folder | ✅ Succeeded |
| No lib folder | ✅ Succeeded |
@jtlivio please address the above issues and push new changes to this branch.
For more information, see the contribution guidance.
Sample PR validation for #5473
|
| Validation | Status |
|---|---|
| Pull request affects only one folder | ✅ Succeeded |
| Sample folder name follows naming convention | ✅ Succeeded |
| README.md contains visitor stat image | |
| Sample requires a .nvmrc file | |
| Sample requires a README.md | ✅ Succeeded |
| Sample requires a screenshot .png in assets folder | ✅ Succeeded |
| No .sppkg file | ✅ Succeeded |
| No node_modules folder | ✅ Succeeded |
| No lib folder | ✅ Succeeded |
@jtlivio please address the above issues and push new changes to this branch.
For more information, see the contribution guidance.
|
Hi, I have addressed the following issues raised during the validation of the pull request: README.md: Added a visitor stat image to comply with the requirements. .nvmrc file: Created the .nvmrc file to specify the Node.js version required for this project. .sppkg file: No .sppkg file was needed as the solution is not packaged for SharePoint deployment yet. This is an optional step depending on the distribution method. Additionally, I’ve updated the README.md to clarify the setup instructions and included any missing details. Please let me know if there are any other issues to address. Best regards, |
Sample PR validation for #5473
|
| Validation | Status |
|---|---|
| Pull request affects only one folder | ✅ Succeeded |
| Sample folder name follows naming convention | ✅ Succeeded |
| README.md contains visitor stat image | |
| Sample requires a .nvmrc file | ✅ Succeeded |
| Sample requires a README.md | ✅ Succeeded |
| Sample requires a screenshot .png in assets folder | ✅ Succeeded |
| No .sppkg file | ✅ Succeeded |
| No node_modules folder | ✅ Succeeded |
| No lib folder | ✅ Succeeded |
@jtlivio please address the above issues and push new changes to this branch.
For more information, see the contribution guidance.
Sample PR validation for #5473
|
| Validation | Status |
|---|---|
| Pull request affects only one folder | ✅ Succeeded |
| Sample folder name follows naming convention | ✅ Succeeded |
| README.md contains visitor stat image | |
| Sample requires a .nvmrc file | ✅ Succeeded |
| Sample requires a README.md | ✅ Succeeded |
| Sample requires a screenshot .png in assets folder | ✅ Succeeded |
| No .sppkg file | ✅ Succeeded |
| No node_modules folder | ✅ Succeeded |
| No lib folder | ✅ Succeeded |
@jtlivio please address the above issues and push new changes to this branch.
For more information, see the contribution guidance.
Sample PR validation for #5473
|
| Validation | Status |
|---|---|
| Pull request affects only one folder | ✅ Succeeded |
| Sample folder name follows naming convention | ✅ Succeeded |
| README.md contains visitor stat image | |
| Sample requires a .nvmrc file | ✅ Succeeded |
| Sample requires a README.md | ✅ Succeeded |
| Sample requires a screenshot .png in assets folder | ✅ Succeeded |
| No .sppkg file | ✅ Succeeded |
| No node_modules folder | ✅ Succeeded |
| No lib folder | ✅ Succeeded |
@jtlivio please address the above issues and push new changes to this branch.
For more information, see the contribution guidance.
Sample PR validation for #5473
|
| Validation | Status |
|---|---|
| Pull request affects only one folder | ✅ Succeeded |
| Sample folder name follows naming convention | ✅ Succeeded |
| README.md contains visitor stat image | |
| Sample requires a .nvmrc file | ✅ Succeeded |
| Sample requires a README.md | ✅ Succeeded |
| Sample requires a screenshot .png in assets folder | ✅ Succeeded |
| No .sppkg file | ✅ Succeeded |
| No node_modules folder | ✅ Succeeded |
| No lib folder | ✅ Succeeded |
@jtlivio please address the above issues and push new changes to this branch.
For more information, see the contribution guidance.
Sample PR validation for #5473✅ Validation status: successWe automatically validate all pull requests against our contribution guidance to ensure that all samples provide a consistent experience to our community. In order to merge this PR in a timely manner, the following criteria must be met:
|
github-actions
bot
added
Sample validation: Success
and removed
Sample validation: Warning
labels
|
Thank you @jtlivio for your sample! Much appreciated! We'd love to have your sample featured in one of our future community calls. If haven't done so yet, and you'd be interested on showing this great sample in a public community call, please fill in following form and we'll get you scheduled - aka.ms/community/request/demo Thank you for sharing your sample with others - you rock! 👏🥇👩💻 |
By submitting this pull request, you agree to the [contribution guidelines](https://github.com/pnp/sp-dev-fx-webparts/blob/main/CONTRIBUTING.md)
What's in this Pull Request?
This PR introduces the React Carbon Footprint Calculator WebPart.
The web part provides an interactive tool that allows users to input their monthly consumption for electricity, car travel, flights (short and long), natural gas, and water. It calculates real-time carbon emissions per person, visualizes them through an interactive bar chart, and highlights sustainable thresholds clearly with color coding (green, yellow, red). Additionally, it provides actionable sustainability tips and enables exporting the results and chart to a PDF document.
Use Case
This solution helps organizations encourage sustainable habits by visualizing individual carbon footprints directly within SharePoint environments. It enhances environmental awareness and motivates positive behavior changes among users.
Built With
Author
João Livio, pH7x Systems
Node Version
Node version used: v18.20.2
Checklist
README.mdfile's Version history. For new samples, created a newREADME.mdfile matching the provided template.README.mdhas at least one static high-resolution screenshot located in theassetsfolder.README.mdcontains complete setup instructions, including prerequisites and permissions required..nvmrcfile indicating the version of Node.js.