https://github.com/lehcode/chart-demo
A demo project showcasing the integration of Vue.js and Chart.js to create interactive and dynamic charts
https://github.com/lehcode/chart-demo
babel chartjs jest jest-tests scss ts-node typescript vuejs vuex webpack
Last synced: about 1 year ago
JSON representation
A demo project showcasing the integration of Vue.js and Chart.js to create interactive and dynamic charts
- Host: GitHub
- URL: https://github.com/lehcode/chart-demo
- Owner: lehcode
- Created: 2020-08-11T13:01:23.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-02-06T12:39:56.000Z (about 1 year ago)
- Last Synced: 2025-02-06T13:44:13.474Z (about 1 year ago)
- Topics: babel, chartjs, jest, jest-tests, scss, ts-node, typescript, vuejs, vuex, webpack
- Language: TypeScript
- Homepage:
- Size: 284 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# VueJS + ChartJS Demo
## Description
This is a demo project showcasing the integration of **Vue.js** and **Chart.js** to create interactive and dynamic charts. The application allows users to visualize data through various chart types while leveraging Vue.js for state management and reactivity.
## Features
- **Interactive Charts** using Chart.js
- **Vue.js Framework** for frontend development
- **TypeScript Support** for improved code maintainability
- **Vuex State Management** for handling application state
- **Vue Router** for navigation
- **Unit Testing** using Jest and Vue Test Utils
- **Draggable & Resizable Charts** with `vue-draggable-resizable`
- **Express.js Backend** for serving the application
- **SCSS Support** for styling
## Technologies Used
- **Frontend**:
- Vue.js (Vue 2)
- Vue Router
- Vuex
- Chart.js
- TypeScript
- SCSS
- Prettier & ESLint
- **Backend**:
- Express.js
- Body-parser
- Compression
- Connect
- Cookie-session
- **Development Tools**:
- Jest (for unit testing)
- Vue CLI
- Webpack
- Babel
- ts-node
- Sass-loader
## Project Setup
### Install dependencies
```sh
yarn install
```
### Run the development server
```sh
yarn serve
```
### Build for production
```sh
yarn build
```
### Run unit tests
```sh
yarn test:unit
```
### Lint and fix files
```sh
yarn lint
```
## Configuration
For additional configuration, see the [Vue CLI Configuration Reference](https://cli.vuejs.org/config/).