PerfAnalytics Dashboard

PerfAnalytics Dashboard is part of PerfAnalytics ecosystem which collects and criticizes web performance data.

PerfAnalytics Dashboard shows metrics that comes from PerfAnalytics API

Desktop preview

👉 Click for detailed showcase video

Demo Sites for Metric Data

You can create analytics metric data from those sites:

• Test site 1: https://react-metrics.netlify.app/
• Test site 2: https://penguins-metrics.netlify.app/
• Test site 3: https://random-metrics.netlify.app/

Tech Stack

• Developed with React Typescript
• Used Ant design as a UI library.
• Used Recharts for metric charts
• Used React Testing Library and Jest for testing
• Deployed with GitHub pages.
• Used GitHub Actions for CI/CD

Dockerfile is ready if you want to use the dockerized version you can use it!

Features

• Initially, the dashboard shows the last 30 minutes metrics.
• You can select a time range from the range picker section.
• And you can filter URLs which want to see from the URL filter section.
  • This filter affects main charts and entries.
• You can see the four main metrics with the chart in the middle of the page. If there are multiple URLs exists you will see all of them in the chart initially but you can filter URLs if you want in later.
• You can see all metrics values in the table from the bottom of the site. This table shows every single analytics metric record coming from the client.
  • You can sort them as ascending and descending from head of the table.
  • And also you can click the little plus button from the start of the row and expand the entires section. These are the entry files that load with the site where metrics come from. You can see the type of file, response time and transfer size from here.
• This dashboard also has responsive support. You can watch metric records on mobile phones or any device.
• This application is written with react typescript. Whole structure covered with types.
• Application is tested with react testing library and jest you can see test coverage value in the next section.

Code coverage

For Development

Install packages.

  yarn install

• Runs the app in the development mode.

  yarn start

Open http://localhost:3000 to view it in the browser.

And also you can run tests like that:

  yarn test

For Deploy with GitHub pages

• You need to add this enviroment variable as a GitHub secret key..

SKIP_PREFLIGHT_CHECK=true

This prevent croco warning!

Set gh-pages branch as the main GitHub pages branch from repo GitHub pages settings.

After that GitHub action will work and the site will deploy under:

https://<username>.github.io/<repoName>/

Click for detail github pages deployment tutorial is here!

Dev Logs

You can reach my dev logs about this project!

Commit message convention

I use this commit message conventions standard in this project.

https://www.conventionalcommits.org

License

MIT