Skip to content

feat: add React KPI scorecard sample - #6478

Open
vystartasv wants to merge 1 commit into
pnp:mainfrom
vystartasv:feat/react-kpi-scorecard
Open

feat: add React KPI scorecard sample#6478
vystartasv wants to merge 1 commit into
pnp:mainfrom
vystartasv:feat/react-kpi-scorecard

Conversation

@vystartasv

Copy link
Copy Markdown
Contributor

Description

Adds a read-only React KPI scorecard web part for SharePoint lists. It displays up to six configured KPIs with current value, target, threshold state, trend, and last observation date.

What changed

  • Added configurable SharePoint list and field mapping.
  • Added safe validation for internal field names, root paths, date filters, and bounded queries.
  • Added deterministic threshold, delta, trend, and value-normalization utilities.
  • Added Fluent UI cards with loading, empty, error, refresh, and accessible status states.
  • Added README setup instructions and gallery metadata.

How was this tested?

  • npm ci
  • npm test -- --clean — 5/5 tests passed.
  • npm run build — TypeScript, ESLint, Sass, and webpack passed with zero warnings.
  • npm run package — production SharePoint package generated and validated successfully.
  • Removed generated dependencies and build artifacts before commit.

Tenant validation requested

This sample needs SharePoint Online tenant validation with a representative KPI list. Please add a real tenant screenshot showing the configured web part and report any compatibility issues.

Type of change

  • New sample
  • Tests included
  • Documentation included
  • No fabricated tenant screenshots

@vystartasv

Copy link
Copy Markdown
Contributor Author

Could someone with a SharePoint Online tenant please validate this sample using a representative KPI list and add a real screenshot to assets/ or this PR?

The local build, tests, lint, and production package pass, but tenant validation is intentionally still needed for configuration UX, list-field compatibility, threshold rendering, and responsive behavior. Any findings—positive or negative—would be very helpful. Thank you!

@github-actions

Copy link
Copy Markdown
Contributor

Sample PR validation for #6478

⚠️ Validation status: warnings

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

Validation Status
Pull request affects only one folder ✅ Succeeded
Sample folder name follows naming convention ✅ Succeeded
README.md contains visitor stat image ✅ Succeeded
Sample requires a .nvmrc file ✅ Succeeded
Sample requires a README.md ✅ Succeeded
Sample requires a screenshot .png in assets folder ⚠️ Warning
No .sppkg file ✅ Succeeded
No node_modules folder ✅ Succeeded
No lib folder ✅ Succeeded
No upgrade reports ✅ Succeeded

@vystartasv please address the above issues and push new changes to this branch.
For more information, see the contribution guidance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant