Frontend Timeserieschallange

About   |   Features   |   Technologies   |   Requirements   |   Starting   |   License   |   Author

🎯 About

This project using dummy data, and show them in HighCharts library time series.

• Data dumps contained in this repository: assets <-> signals <-> time series

• When starting to create project I used apexcharts library.It use SVG rather than Canvas. But I have more than 4000 data.I faced performance issue since I have big data. See the issue here (apexcharts/apexcharts.js#214). Then I changed my library which have more flexibility and performance to (https://www.highcharts.com/)

• I have data in csv format instead of json in measurement. To convert csv format to json format, I made some changes on next.config.js.

✨ Features

✔️ Selection(s) for Assets and Signals ✔️ Time series visualization of selected time serie(s) with the possibility to zoom, to add and remove different signals ✔️ Option to export the visualized data as PNG, CSV formats ✔️ Option to make full screen

🚀 Technologies

The following tools were used in this project:

• NextJS
• HighCharts
• Jest

✅ Requirements

Before starting 🏁, you need to have Git installed.

🏁 Starting

# Clone this project
$ git clone https://github.com/sayinmehmet47/frontend-timeserieschallange

# Access
$ cd frontend-timeserieschallange

# Install dependencies
$ yarn

# Run the project
$ yarn start

# The server will initialize in the <http://localhost:3000>

#For docker
$ docker build -t nextjs-docker .
$ docker run -p 3000:3000 nextjs-docker

📝 License

This project is under license from MIT. For more details, see the LICENSE file.

Made with ❤️ by Mehmet Sayin

 

Back to top