Vue.js APIs and Charts Reference

📑 Description

• Intro: This project is designed as reference material for FactSet/CodeDoor training sessions.
• Aim: To build an Application that takes Data from an API and displays it in a Chart or two.
• Coding Rules: There are none. Use whatever IDE, API, Chart Engine, Code Style you prefer.
• Destiny: Make it as elegant and beautiful as possible while keeping it functional.
• Questions: Ask us! We are here to help so that you get the most out of the experience.
• Improvements: Always welcome 👉 Push it!
• Contribute: So everyone can benefit!

✅ Prerequisites

• Basic Knowledge of JavaScript
• Will to Learn
• Keyboard etc.

🔨 Environment Setup

1. Install Version Control System (VCS): Git for Windows
2. Install JavaScript Runtime Engine: Node.js LTS
3. Install Package Manager: Yarn
4. Install Editor: Visual Studio Code
5. Install Visual Studio Code Vue.js Extension: Vetur - Vue tooling for VS Code
6. Install Vue CLI using Git Bash: $ yarn global add @vue/cli
7. Open the Vue UI $ vue ui
8. Open Visual Studio Code $ code

🔧 Project Setup

# Install Dependencies
$ yarn install

# Compiles and hot-reloads for development
$ yarn serve

# Compiles and minifies for production
$ yarn build

# Lints and fixes files
$ yarn lint

💠 Reference APIs

• CoinDesk Documentation
• CoinDesk Bitcoin Price Index
• CoinDesk Bitcoin Price Historical

📈 Reference Chart Engines

• Highcharts
• ChartJS
• Google Charts
• Chartist
• C3.js
• Made with Vue.js

👁 Useful Resources

• ES2015+ Cheat Sheet

💡 Ideas

• Reactive Live Updating Chart
• Historic Data Chart
• Multiple Data Sets
• Loading Spinner
• Poll Interval Progress Bar

💾 Push to GitHub

1. Create an Account
2. Create an New Repository your-project-name
3. Create SSH Keys: $ ssh-keygen -t rsa -b 4096 -C "[email protected]"
4. Upload SSH Keys to GitHub. Copy public key to clipboard with: $ clip < ~/.ssh/id_rsa.pub
5. Commit your changes: $ git commit -m "New: Project Setup"
6. Push your branch: $ git push origin master

🚀 Deploy using Surge

https://surge.sh/

# Install Surge
$ yarn global add surge

## Deploy Application
$ surge

👉 Contribute

Make the world a better place 🌳

🍴 Fork the project, check out the documentation and follow these instructions...

# Clone the Repository
$ git clone [email protected]:YOUR_USERNAME/vue-highcharts-example.git

# Checkout a new branch and start coding!
$ git checkout -b my-new-feature-branch

# Stage and Commit changes 
$ git commit -am "New: Exciting Feature"

# Push commit to remote repository
$ git push origin my-new-feature-branch

Once happy with your submission create a pull request for the changes to be submitted for review.

If the changes are approved, the code in your feature branch will be merged with the master branch.

Once on master the code will be available for everyone to update their local copy using $ git pull.