1.0.7 • Published 3 years ago
project-chartjs v1.0.7
Project-chartjs
Happy hacking =)
Require
$ node -v
v14.4.0
#Development Develop Directory
./src
Start webpack dev server
$ yarn start
or
$ npm run start
Features
- ES6/ESNext - Write ES6 code and Babel will transpile it to ES5 for backwards compatibility
- Test - Mocha with Istanbul coverage
- Lint - Preconfigured ESlint with Airbnb config
- CI - TravisCI configuration setup
- Minify - Built code will be minified for performance
Commands
yarn clean
- Removelib/
directoryyarn test
- Run tests with linting and coverage results.yarn test:only
- Run tests without linting or coverage.yarn test:watch
- You can even re-run tests on file changes!yarn test:prod
- Run tests with minified code.yarn test:examples
- Test written examples on pure JS for better understanding module usage.yarn lint
- Run ESlint with airbnb-configyarn cover
- Get coverage report for your code.yarn build
- Babel will transpile ES6 => ES5 and minify the code.yarn prepublish
- Hook for npm. Do all the checks before publishing your module.
Add Library
<div id="app"></div>
<script src="./node_modules/project-chartjs/dist/build/bundle.js"></script>
Sample Chart Data
const data =
{
"start_time": "yyyy-mm-dd",
"end_time": "yyyy-mm-dd",
"projects": [
{
"id": 1,
"name": "Sample Project",
"position": [
{
"name": "FE",
"members": [
{
"id": 1,
"name": "John",
"bg_color": "#eb4034",
"work": [
{
"join_date": "yyyy-mm-dd",
"leave_date": "yyyy-mm-dd",
"work_status": 1
},
...
]
},
...
]
},
...
]
},
...
]
}
How To Import Data
window.projectChart.$emit('chartData', data)
How To Show Lazyload
window.projectChart.$emit('chartLazyLoad', true)
How To Import Options
window.projectChart.$emit('chartOptions', {
scroll: false,
collapse: true,
date_format: 'YYYY-MM-DD',
...
})
Chart Options
Option | Type | Default | Description |
---|---|---|---|
scroll | boolean | false | show or hide scroll bar in y-axis |
date_format | string | 'YYYY-MM-DD' | set date format of duration bar |
collapse | boolean | false | add collapse for each project in project list |
full_width | boolean | false | set width of container , default is max-width: 1200px |
text_color | string | '#555555' | set text color |
background_color | string | '#ffffff' | set background color |
show_name_project | boolean | true | show or hide project name |
License
MIT © gumiviet