Metrics
Fullstack application to visualize and create metrics.
Features
Create new metrics
Create metrics given a name and value.
Validate if the metric name and input.
Metrics Visualization
Filter
Select the metric you want to visualize.
The first metric returned is selected by default.
Drill Down
Metrics average are grouped per day by default
When clicking a specific dataset point on the day vizualization it will go to the hour vizualization
When clicking a specific dataset point on the hour vizualization it will go to the minute vizualization
Setup
Necessary Tools
yarn v1
docker
node v14
Steps
Clone the project
https://github.com/larizzatg/metrics.git
Enter the directory cd metrics
Execute yarn install
Go to the api directory cd metrics/apps/api
Create a .env files
copy the values of example.env
add password
modify as you like
In the api dir open run docker-compose up -d this will run the docker image with the database on detachment mode
Move back to the parent directoy cd ../../ and run yarn dev
client port default is localhost:3000
api port default is localhost:4000
Seed the database (Optional)
Conect with your favorite db manager and run this query to seed the db, modify it as you like
INSERT INTO
metric
SELECT
id,
name,
value,
— modify generated interval with random minutes
TIMESTAMP + random() * (
timestamp ‘2017-12-31 00:00:30‘ – timestamp ‘2017-12-31 00:00:59‘
) TIMESTAMP
FROM
(
SELECT
row_number() OVER () AS id,
— the name of the metric
‘responsive‘ as name,
— random value for the metric
ROUND(random() * 100) as value,
*
FROM
— generate data from 03-01 until
— current date with one minute intervals
generate_series(
‘2022-03-01 00:00:00.00+00‘,
NOW(),
INTERVAL ‘1 minute‘
) as TIMESTAMP
) query_generator;
— alter the sequence so it’s nice with the orm
ALTER SEQUENCE metric_id_seq RESTART WITH 100000;
Stack
Turbo repo and yarn workspaces for monorepo managament
Frontend
vite for bundling and dev server
typescript
vue3 as a web framework
storybook for rapid testing of components
tailwind as a css utility framework
chart.js to display the visualizations
vitest as a test runner
testing/library for component testing
cypress for e2e (not in use)
msw to mock server calls
prettier for code formating
axios for api call
date-fns, date-fns-tz as a time scale adapter for chart.js and some time utility functions
headless/ui for select and modal headless logic
vue-toastification to display status messages
Backend
nestjs as a backend framework with express.js and typeorm
postgress as a database
typescript
jest for testing
prettier
class-validator/transformer for dto pipe validation
hapi/joi for configuration schema
Considerations and Roadmap
move shared types to it’s own package inside the yarn workspace
Frontend
make timeline-chart an async component for better bundler
need to decouple logic from metric-selector so we can refresh the data
add stories for all component
add unit testing for metric form state
add component testing for core components like the form and the timeline
add e2e testing and fixx msw calls
Backend
install a seeder so we have e2e tests with specific data