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 - Remove lib/ directory
• yarn 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-config
• yarn 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