https://github.com/finesse/telegram-chart
🎖 A prize winning JS solution for the Telegram April 2019 coding contest
https://github.com/finesse/telegram-chart
canvas chart contest performance telegram
Last synced: 4 months ago
JSON representation
🎖 A prize winning JS solution for the Telegram April 2019 coding contest
- Host: GitHub
- URL: https://github.com/finesse/telegram-chart
- Owner: Finesse
- Created: 2019-03-20T01:09:01.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-04-16T13:38:37.000Z (about 5 years ago)
- Last Synced: 2025-06-18T22:39:50.724Z (about 1 year ago)
- Topics: canvas, chart, contest, performance, telegram
- Language: JavaScript
- Homepage: http://finesse.github.io/telegram-chart
- Size: 4.76 MB
- Stars: 42
- Watchers: 0
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Telegram chart
This is a JS solution for [the Telegram April 2019 coding contest](https://t.me/contest/59).
The goal was to develop an application for showing charts based on [the input data](src/data) and the [design specification](docs/design).
The solution is implemented without the bonus goals.
The solution page on the official contest platform: http://contest.dev/chart-js/entry18
This code was refactored and improved at https://github.com/fingerprintjs/audio-fingerprint-article-demos
## How to start the application
First install the application:
1. Make sure you have [Node.js](http://nodejs.org) installed
2. Download the source code
3. Open a terminal and go to the source code directory
4. Run `npm install`
### Development mode
1. Run `npm start`
2. Open http://localhost:8000 in a browser
### Production mode
1. Run `npm run build`
2. Open the `dist/index.html` file in a browser
If you want to serve the application with a web server,
upload the content of the `dist` directory to the web server and make the directory be the document root of the server.
## Architecture concepts
I've chosen [canvas](https://developer.mozilla.org/en-US/docs/HTML/Canvas) to draw the charts
because it's the best approach in terms of performance and reliability.
The DOM is manipulated using a pure JS to make it fast and the code small.
The chart supports multiple touches.
The source code is compiled to the distributive code using [Webpack](http://webpack.js.org) and [Babel](http://babeljs.io).