AnyChart Playground is an online tool for testing and showcasing user-created HTML, CSS and JavaScript code snippets.
The application backend is written on Clojure and consists of three parts:
- Web part - for serving http requets, the main site and the editor
- Generator - for parsing git repositories and put data to database
- Preview generator - for generating images for samples
All parts communicate via Redis queues.
The frontend is written on ClojureScript and consists of:
- Site
- Editor
The editor is a single page application built with Reagent and re-frame. It uses CodeMirror as a code editor and Tern as a code-analysis engine for JavaScript.
sudo apt-get install postgresql postgresql-contrib
sudo apt-get install redis-server
sudo apt-get install phantomjs
sudo apt-get install pngquant
# elasticsearch
# logstash
PostgreSQL is used as a main storage.
Redis is used for communications between generators and Web part of application.
PhantomJS is used for generating previews. Pngquant - for images optimizations.
ElasticSearch is used for samples search.
To synchronize Elastic with Postgres you need to set up Logstash.
sudo bin/logstash-plugin install logstash-input-jdbc
sudo systemctl start logstash.service # start
sudo systemctl stop logstash.service # stop
Config files are available here.
For now playground uses some of AnyChart resources, later we'll need to rework it to make Playground standalone project.
| Resource | Description |
|---|---|
| Data Sets source file | JSON file what contains lists of available data sets. |
| Tags list | JSON file what contains data for tags generating process. |
| Gallery, Chartopedia, API Reference, Documentation, Templates | Repositories with predefined samples, some of them are private. |
| Chartopedia | Also chartopedia repo is used as a source for Chart Types pages. |
If you have any questions regarding licensing - please contact us. [email protected]