First commit
This commit is contained in:
Faris Ansari
commit
77af1bb8fb
4
.babelrc
Executable file
4
.babelrc
Executable file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"presets": ["es2015"],
|
||||||
|
"plugins": ["babel-plugin-add-module-exports"]
|
||||||
|
}
|
||||||
182
.eslintrc
Executable file
182
.eslintrc
Executable file
@ -0,0 +1,182 @@
|
|||||||
|
{
|
||||||
|
"ecmaFeatures": {
|
||||||
|
"globalReturn": true,
|
||||||
|
"jsx": true,
|
||||||
|
"modules": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es6": true,
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"globals": {
|
||||||
|
"document": false,
|
||||||
|
"escape": false,
|
||||||
|
"navigator": false,
|
||||||
|
"unescape": false,
|
||||||
|
"window": false,
|
||||||
|
"describe": true,
|
||||||
|
"before": true,
|
||||||
|
"it": true,
|
||||||
|
"expect": true,
|
||||||
|
"sinon": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"parser": "babel-eslint",
|
||||||
|
|
||||||
|
"plugins": [
|
||||||
|
|
||||||
|
],
|
||||||
|
|
||||||
|
"rules": {
|
||||||
|
"block-scoped-var": 2,
|
||||||
|
"brace-style": [2, "1tbs", { "allowSingleLine": true }],
|
||||||
|
"comma-dangle": [2, "never"],
|
||||||
|
"comma-spacing": [2, { "before": false, "after": true }],
|
||||||
|
"comma-style": [2, "last"],
|
||||||
|
"complexity": 0,
|
||||||
|
"consistent-return": 2,
|
||||||
|
"consistent-this": 0,
|
||||||
|
"curly": [2, "multi-line"],
|
||||||
|
"default-case": 0,
|
||||||
|
"dot-location": [2, "property"],
|
||||||
|
"dot-notation": 0,
|
||||||
|
"eol-last": 2,
|
||||||
|
"eqeqeq": [2, "allow-null"],
|
||||||
|
"func-names": 0,
|
||||||
|
"func-style": 0,
|
||||||
|
"generator-star-spacing": [2, "both"],
|
||||||
|
"guard-for-in": 0,
|
||||||
|
"handle-callback-err": [2, "^(err|error|anySpecificError)$" ],
|
||||||
|
"indent": [2, "tab", { "SwitchCase": 1 }],
|
||||||
|
"key-spacing": [2, { "beforeColon": false, "afterColon": true }],
|
||||||
|
"linebreak-style": 0,
|
||||||
|
"max-depth": 0,
|
||||||
|
"max-len": [2, 120, 4],
|
||||||
|
"max-nested-callbacks": 0,
|
||||||
|
"max-params": 0,
|
||||||
|
"max-statements": 0,
|
||||||
|
"new-cap": [2, { "newIsCap": true, "capIsNew": false }],
|
||||||
|
"new-parens": 2,
|
||||||
|
"no-alert": 0,
|
||||||
|
"no-array-constructor": 2,
|
||||||
|
"no-bitwise": 0,
|
||||||
|
"no-caller": 2,
|
||||||
|
"no-catch-shadow": 0,
|
||||||
|
"no-cond-assign": 2,
|
||||||
|
"no-console": 0,
|
||||||
|
"no-constant-condition": 0,
|
||||||
|
"no-continue": 0,
|
||||||
|
"no-control-regex": 2,
|
||||||
|
"no-debugger": 2,
|
||||||
|
"no-delete-var": 2,
|
||||||
|
"no-div-regex": 0,
|
||||||
|
"no-dupe-args": 2,
|
||||||
|
"no-dupe-keys": 2,
|
||||||
|
"no-duplicate-case": 2,
|
||||||
|
"no-else-return": 2,
|
||||||
|
"no-empty": 0,
|
||||||
|
"no-empty-character-class": 2,
|
||||||
|
"no-empty-label": 2,
|
||||||
|
"no-eq-null": 0,
|
||||||
|
"no-eval": 2,
|
||||||
|
"no-ex-assign": 2,
|
||||||
|
"no-extend-native": 2,
|
||||||
|
"no-extra-bind": 2,
|
||||||
|
"no-extra-boolean-cast": 2,
|
||||||
|
"no-extra-parens": 0,
|
||||||
|
"no-extra-semi": 0,
|
||||||
|
"no-extra-strict": 0,
|
||||||
|
"no-fallthrough": 2,
|
||||||
|
"no-floating-decimal": 2,
|
||||||
|
"no-func-assign": 2,
|
||||||
|
"no-implied-eval": 2,
|
||||||
|
"no-inline-comments": 0,
|
||||||
|
"no-inner-declarations": [2, "functions"],
|
||||||
|
"no-invalid-regexp": 2,
|
||||||
|
"no-irregular-whitespace": 2,
|
||||||
|
"no-iterator": 2,
|
||||||
|
"no-label-var": 2,
|
||||||
|
"no-labels": 2,
|
||||||
|
"no-lone-blocks": 0,
|
||||||
|
"no-lonely-if": 0,
|
||||||
|
"no-loop-func": 0,
|
||||||
|
"no-mixed-requires": 0,
|
||||||
|
"no-mixed-spaces-and-tabs": [2, false],
|
||||||
|
"no-multi-spaces": 2,
|
||||||
|
"no-multi-str": 2,
|
||||||
|
"no-multiple-empty-lines": [2, { "max": 1 }],
|
||||||
|
"no-native-reassign": 2,
|
||||||
|
"no-negated-in-lhs": 2,
|
||||||
|
"no-nested-ternary": 0,
|
||||||
|
"no-new": 2,
|
||||||
|
"no-new-func": 2,
|
||||||
|
"no-new-object": 2,
|
||||||
|
"no-new-require": 2,
|
||||||
|
"no-new-wrappers": 2,
|
||||||
|
"no-obj-calls": 2,
|
||||||
|
"no-octal": 2,
|
||||||
|
"no-octal-escape": 2,
|
||||||
|
"no-path-concat": 0,
|
||||||
|
"no-plusplus": 0,
|
||||||
|
"no-process-env": 0,
|
||||||
|
"no-process-exit": 0,
|
||||||
|
"no-proto": 2,
|
||||||
|
"no-redeclare": 2,
|
||||||
|
"no-regex-spaces": 2,
|
||||||
|
"no-reserved-keys": 0,
|
||||||
|
"no-restricted-modules": 0,
|
||||||
|
"no-return-assign": 2,
|
||||||
|
"no-script-url": 0,
|
||||||
|
"no-self-compare": 2,
|
||||||
|
"no-sequences": 2,
|
||||||
|
"no-shadow": 0,
|
||||||
|
"no-shadow-restricted-names": 2,
|
||||||
|
"no-spaced-func": 2,
|
||||||
|
"no-sparse-arrays": 2,
|
||||||
|
"no-sync": 0,
|
||||||
|
"no-ternary": 0,
|
||||||
|
"no-throw-literal": 2,
|
||||||
|
"no-trailing-spaces": 2,
|
||||||
|
"no-undef": 2,
|
||||||
|
"no-undef-init": 2,
|
||||||
|
"no-undefined": 0,
|
||||||
|
"no-underscore-dangle": 0,
|
||||||
|
"no-unneeded-ternary": 2,
|
||||||
|
"no-unreachable": 2,
|
||||||
|
"no-unused-expressions": 0,
|
||||||
|
"no-unused-vars": [2, { "vars": "all", "args": "none" }],
|
||||||
|
"no-var": 0,
|
||||||
|
"no-void": 0,
|
||||||
|
"no-warning-comments": 0,
|
||||||
|
"no-with": 2,
|
||||||
|
"one-var": 0,
|
||||||
|
"operator-assignment": 0,
|
||||||
|
"operator-linebreak": [2, "after"],
|
||||||
|
"padded-blocks": 0,
|
||||||
|
"quote-props": 0,
|
||||||
|
"quotes": [2, "single", "avoid-escape"],
|
||||||
|
"radix": 2,
|
||||||
|
"semi": [2, "always"],
|
||||||
|
"semi-spacing": 0,
|
||||||
|
"sort-vars": 0,
|
||||||
|
"space-before-blocks": [2, "always"],
|
||||||
|
"space-before-function-paren": [2, {"anonymous": "always", "named": "never"}],
|
||||||
|
"space-in-brackets": 0,
|
||||||
|
"space-in-parens": [2, "never"],
|
||||||
|
"space-infix-ops": 2,
|
||||||
|
"space-return-throw-case": 2,
|
||||||
|
"space-unary-ops": [2, { "words": true, "nonwords": false }],
|
||||||
|
"spaced-comment": [2, "always"],
|
||||||
|
"strict": 0,
|
||||||
|
"use-isnan": 2,
|
||||||
|
"valid-jsdoc": 0,
|
||||||
|
"valid-typeof": 2,
|
||||||
|
"vars-on-top": 2,
|
||||||
|
"wrap-iife": [2, "any"],
|
||||||
|
"wrap-regex": 0,
|
||||||
|
"yoda": [2, "never"]
|
||||||
|
}
|
||||||
|
}
|
||||||
29
.gitignore
vendored
Executable file
29
.gitignore
vendored
Executable file
@ -0,0 +1,29 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directory
|
||||||
|
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
.DS_Store
|
||||||
67
index.html
Normal file
67
index.html
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Simple Gantt</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
background: #ccc;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
width: 80%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.gantt-container {
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||||
|
<script src="node_modules/snapsvg/dist/snap.svg-min.js"></script>
|
||||||
|
<script src="lib/gantt.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h2>Interactive Gantt Chart entirely made in SVG!</h2>
|
||||||
|
<div class="gantt-container">
|
||||||
|
<svg id="gantt" width="400" height="600"></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
var arr = [1, 2, 3, 4, 5, 6];
|
||||||
|
var tasks = arr.map(function(i){
|
||||||
|
return {
|
||||||
|
start: "2016-10-0"+i,
|
||||||
|
end: "2016-10-2"+i,
|
||||||
|
name: "Task "+i,
|
||||||
|
id: i,
|
||||||
|
progress: i*10
|
||||||
|
}
|
||||||
|
});
|
||||||
|
tasks[0].dependencies = '2, 3';
|
||||||
|
|
||||||
|
var gantt_chart = gantt("#gantt", tasks, {
|
||||||
|
date_format: "YYYY-MM-DD",
|
||||||
|
bar: {
|
||||||
|
height: 20
|
||||||
|
}
|
||||||
|
// events: {
|
||||||
|
// bar_on_click: function (task) {
|
||||||
|
// console.log(task);
|
||||||
|
// },
|
||||||
|
// bar_on_date_change: function(task, start, end) {
|
||||||
|
// console.log(task, start, end);
|
||||||
|
// },
|
||||||
|
// bar_on_progress_change: function(task, progress) {
|
||||||
|
// console.log(task, progress);
|
||||||
|
// },
|
||||||
|
// on_viewmode_change: function(mode) {
|
||||||
|
// console.log(mode);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
console.log(gantt_chart);
|
||||||
|
// gantt.render();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1762
lib/gantt.js
Normal file
1762
lib/gantt.js
Normal file
File diff suppressed because one or more lines are too long
1
lib/gantt.js.map
Normal file
1
lib/gantt.js.map
Normal file
File diff suppressed because one or more lines are too long
2
lib/gantt.min.js
vendored
Normal file
2
lib/gantt.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
lib/gantt.min.js.map
Normal file
1
lib/gantt.min.js.map
Normal file
File diff suppressed because one or more lines are too long
52
package.json
Executable file
52
package.json
Executable file
@ -0,0 +1,52 @@
|
|||||||
|
{
|
||||||
|
"name": "gantt",
|
||||||
|
"version": "0.1.3",
|
||||||
|
"description": "Visualize tasks on a timeline",
|
||||||
|
"main": "lib/gantt.js",
|
||||||
|
"scripts": {
|
||||||
|
"build": "webpack --mode=build",
|
||||||
|
"dev": "webpack --progress --colors --watch --mode=dev",
|
||||||
|
"test": "mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"babel": "6.3.13",
|
||||||
|
"babel-core": "6.1.18",
|
||||||
|
"babel-eslint": "5.0.0",
|
||||||
|
"babel-loader": "6.1.0",
|
||||||
|
"babel-plugin-add-module-exports": "0.1.2",
|
||||||
|
"babel-preset-es2015": "6.3.13",
|
||||||
|
"chai": "3.4.1",
|
||||||
|
"css-loader": "^0.26.1",
|
||||||
|
"eslint": "1.7.2",
|
||||||
|
"eslint-loader": "1.1.0",
|
||||||
|
"mocha": "2.3.4",
|
||||||
|
"node-sass": "^4.0.0",
|
||||||
|
"sass-loader": "^4.1.0",
|
||||||
|
"style-loader": "^0.13.1",
|
||||||
|
"webpack": "1.12.9",
|
||||||
|
"yargs": "3.32.0"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/krasimir/webpack-library-starter.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"webpack",
|
||||||
|
"es6",
|
||||||
|
"starter",
|
||||||
|
"library",
|
||||||
|
"universal",
|
||||||
|
"umd",
|
||||||
|
"commonjs"
|
||||||
|
],
|
||||||
|
"author": "Krasimir Tsonev",
|
||||||
|
"license": "MIT",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/krasimir/webpack-library-starter/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/krasimir/webpack-library-starter",
|
||||||
|
"dependencies": {
|
||||||
|
"moment": "^2.17.1",
|
||||||
|
"snapsvg": "^0.4.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
105
src/Arrow.js
Normal file
105
src/Arrow.js
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
/* global Snap */
|
||||||
|
/*
|
||||||
|
Class: Arrow
|
||||||
|
from_task ---> to_task
|
||||||
|
|
||||||
|
Opts:
|
||||||
|
gantt (Gantt object)
|
||||||
|
from_task (Bar object)
|
||||||
|
to_task (Bar object)
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default function Arrow(gt, from_task, to_task) {
|
||||||
|
|
||||||
|
const self = {};
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
self.from_task = from_task;
|
||||||
|
self.to_task = to_task;
|
||||||
|
prepare();
|
||||||
|
draw();
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepare() {
|
||||||
|
|
||||||
|
self.start_x = from_task.$bar.getX() + from_task.$bar.getWidth() / 2;
|
||||||
|
|
||||||
|
const condition = () =>
|
||||||
|
to_task.$bar.getX() < self.start_x + gt.config.padding &&
|
||||||
|
self.start_x > from_task.$bar.getX() + gt.config.padding;
|
||||||
|
|
||||||
|
while(condition()) {
|
||||||
|
self.start_x -= 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
self.start_y = gt.config.header_height + gt.config.bar.height +
|
||||||
|
(gt.config.padding + gt.config.bar.height) * from_task.task._index +
|
||||||
|
gt.config.padding;
|
||||||
|
|
||||||
|
self.end_x = to_task.$bar.getX() - gt.config.padding / 2;
|
||||||
|
self.end_y = gt.config.header_height + gt.config.bar.height / 2 +
|
||||||
|
(gt.config.padding + gt.config.bar.height) * to_task.task._index +
|
||||||
|
gt.config.padding;
|
||||||
|
|
||||||
|
const from_is_below_to = (from_task.task._index > to_task.task._index);
|
||||||
|
self.curve = gt.config.arrow.curve;
|
||||||
|
self.clockwise = from_is_below_to ? 1 : 0;
|
||||||
|
self.curve_y = from_is_below_to ? -self.curve : self.curve;
|
||||||
|
self.offset = from_is_below_to ?
|
||||||
|
self.end_y + gt.config.arrow.curve :
|
||||||
|
self.end_y - gt.config.arrow.curve;
|
||||||
|
|
||||||
|
self.path =
|
||||||
|
Snap.format('M {start_x} {start_y} V {offset} ' +
|
||||||
|
'a {curve} {curve} 0 0 {clockwise} {curve} {curve_y} ' +
|
||||||
|
'L {end_x} {end_y} m -5 -5 l 5 5 l -5 5',
|
||||||
|
{
|
||||||
|
start_x: self.start_x,
|
||||||
|
start_y: self.start_y,
|
||||||
|
end_x: self.end_x,
|
||||||
|
end_y: self.end_y,
|
||||||
|
offset: self.offset,
|
||||||
|
curve: self.curve,
|
||||||
|
clockwise: self.clockwise,
|
||||||
|
curve_y: self.curve_y
|
||||||
|
});
|
||||||
|
|
||||||
|
if(to_task.$bar.getX() < from_task.$bar.getX() + gt.config.padding) {
|
||||||
|
self.path =
|
||||||
|
Snap.format('M {start_x} {start_y} v {down_1} ' +
|
||||||
|
'a {curve} {curve} 0 0 1 -{curve} {curve} H {left} ' +
|
||||||
|
'a {curve} {curve} 0 0 {clockwise} -{curve} {curve_y} V {down_2} ' +
|
||||||
|
'a {curve} {curve} 0 0 {clockwise} {curve} {curve_y} ' +
|
||||||
|
'L {end_x} {end_y} m -5 -5 l 5 5 l -5 5',
|
||||||
|
{
|
||||||
|
start_x: self.start_x,
|
||||||
|
start_y: self.start_y,
|
||||||
|
end_x: self.end_x,
|
||||||
|
end_y: self.end_y,
|
||||||
|
down_1: gt.config.padding / 2 - self.curve,
|
||||||
|
down_2: to_task.$bar.getY() + to_task.$bar.get('height') / 2 - self.curve_y,
|
||||||
|
left: to_task.$bar.getX() - gt.config.padding,
|
||||||
|
offset: self.offset,
|
||||||
|
curve: self.curve,
|
||||||
|
clockwise: self.clockwise,
|
||||||
|
curve_y: self.curve_y
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
self.element = self.gantt.canvas.path(self.path)
|
||||||
|
.attr('data-from', self.from_task.task.id)
|
||||||
|
.attr('data-to', self.to_task.task.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() { // eslint-disable-line
|
||||||
|
self.prepare();
|
||||||
|
self.element.attr('d', self.path);
|
||||||
|
}
|
||||||
|
self.update = update;
|
||||||
|
|
||||||
|
init();
|
||||||
|
|
||||||
|
return self;
|
||||||
|
}
|
||||||
528
src/Bar.js
Normal file
528
src/Bar.js
Normal file
@ -0,0 +1,528 @@
|
|||||||
|
/* global Snap */
|
||||||
|
/*
|
||||||
|
Class: Bar
|
||||||
|
|
||||||
|
Opts:
|
||||||
|
canvas [reqd]
|
||||||
|
task [reqd]
|
||||||
|
column_width [reqd]
|
||||||
|
x
|
||||||
|
y
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default function Bar(gt, task) {
|
||||||
|
|
||||||
|
const self = {};
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
set_defaults();
|
||||||
|
prepare();
|
||||||
|
draw();
|
||||||
|
bind();
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_defaults() {
|
||||||
|
self.action_completed = false;
|
||||||
|
self.task = task;
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepare() {
|
||||||
|
prepare_values();
|
||||||
|
prepare_plugins();
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepare_values() {
|
||||||
|
self.invalid = self.task.invalid;
|
||||||
|
self.height = gt.config.bar.height;
|
||||||
|
self.x = compute_x();
|
||||||
|
self.y = compute_y();
|
||||||
|
self.corner_radius = 3;
|
||||||
|
self.duration = (self.task._end.diff(self.task._start, 'hours') + 24) / gt.config.step;
|
||||||
|
self.width = gt.config.column_width * self.duration;
|
||||||
|
self.progress_width = gt.config.column_width * self.duration * (self.task.progress / 100) || 0;
|
||||||
|
self.group = gt.canvas.group().addClass('bar-wrapper');
|
||||||
|
self.bar_group = gt.canvas.group().addClass('bar-group').appendTo(self.group);
|
||||||
|
self.handle_group = gt.canvas.group().addClass('handle-group').appendTo(self.group);
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepare_plugins() {
|
||||||
|
Snap.plugin(function (Snap, Element, Paper, global, Fragment) {
|
||||||
|
Element.prototype.getX = function () {
|
||||||
|
return +this.attr('x');
|
||||||
|
};
|
||||||
|
Element.prototype.getY = function () {
|
||||||
|
return +this.attr('y');
|
||||||
|
};
|
||||||
|
Element.prototype.getWidth = function () {
|
||||||
|
return +this.attr('width');
|
||||||
|
};
|
||||||
|
Element.prototype.getHeight = function () {
|
||||||
|
return +this.attr('height');
|
||||||
|
};
|
||||||
|
Element.prototype.getEndX = function () {
|
||||||
|
return this.getX() + this.getWidth();
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
draw_bar();
|
||||||
|
draw_progress_bar();
|
||||||
|
draw_label();
|
||||||
|
draw_resize_handles();
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw_bar() {
|
||||||
|
self.$bar = gt.canvas.rect(self.x, self.y,
|
||||||
|
self.width, self.height,
|
||||||
|
self.corner_radius, self.corner_radius)
|
||||||
|
.addClass('bar')
|
||||||
|
.appendTo(self.bar_group);
|
||||||
|
if (self.invalid) {
|
||||||
|
self.$bar.addClass('bar-invalid');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw_progress_bar() {
|
||||||
|
if (self.invalid) return;
|
||||||
|
self.$bar_progress = gt.canvas.rect(self.x, self.y,
|
||||||
|
self.progress_width, self.height,
|
||||||
|
self.corner_radius, self.corner_radius)
|
||||||
|
.addClass('bar-progress')
|
||||||
|
.appendTo(self.bar_group);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw_label() {
|
||||||
|
gt.canvas.text(self.x + self.width / 2,
|
||||||
|
self.y + self.height / 2,
|
||||||
|
self.task.name)
|
||||||
|
.addClass('bar-label')
|
||||||
|
.appendTo(self.bar_group);
|
||||||
|
update_label_position();
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw_resize_handles() {
|
||||||
|
if (self.invalid) return;
|
||||||
|
|
||||||
|
const bar = self.$bar,
|
||||||
|
bar_progress = self.$bar_progress,
|
||||||
|
handle_width = 8;
|
||||||
|
|
||||||
|
gt.canvas.rect(bar.getX() + bar.getWidth() - 9, bar.getY() + 1,
|
||||||
|
handle_width, self.height - 2, self.corner_radius, self.corner_radius)
|
||||||
|
.addClass('handle right')
|
||||||
|
.appendTo(self.handle_group);
|
||||||
|
gt.canvas.rect(bar.getX() + 1, bar.getY() + 1,
|
||||||
|
handle_width, self.height - 2, self.corner_radius, self.corner_radius)
|
||||||
|
.addClass('handle left')
|
||||||
|
.appendTo(self.handle_group);
|
||||||
|
|
||||||
|
if (self.task.progress && self.task.progress < 100) {
|
||||||
|
gt.canvas.polygon(
|
||||||
|
bar_progress.getEndX() - 5, bar_progress.getY() + bar_progress.getHeight(),
|
||||||
|
bar_progress.getEndX() + 5, bar_progress.getY() + bar_progress.getHeight(),
|
||||||
|
bar_progress.getEndX(), bar_progress.getY() + bar_progress.getHeight() - 8.66
|
||||||
|
)
|
||||||
|
.addClass('handle progress')
|
||||||
|
.appendTo(self.handle_group);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// function draw_invalid_bar() {
|
||||||
|
// const x = moment().startOf('day').diff(gt.gantt_start, 'hours') /
|
||||||
|
// gt.config.step * gt.config.column_width;
|
||||||
|
|
||||||
|
// gt.canvas.rect(x, self.y,
|
||||||
|
// gt.config.column_width * 2, self.height,
|
||||||
|
// self.corner_radius, self.corner_radius)
|
||||||
|
// .addClass('bar-invalid')
|
||||||
|
// .appendTo(self.bar_group);
|
||||||
|
|
||||||
|
// gt.canvas.text(
|
||||||
|
// x + gt.config.column_width,
|
||||||
|
// self.y + self.height / 2,
|
||||||
|
// 'Dates not set')
|
||||||
|
// .addClass('bar-label big')
|
||||||
|
// .appendTo(self.bar_group);
|
||||||
|
// }
|
||||||
|
|
||||||
|
function bind() {
|
||||||
|
if (self.invalid) return;
|
||||||
|
show_details();
|
||||||
|
bind_resize();
|
||||||
|
bind_drag();
|
||||||
|
bind_resize_progress();
|
||||||
|
}
|
||||||
|
|
||||||
|
function show_details() {
|
||||||
|
const popover_group = gt.element_groups.details;
|
||||||
|
let details_box = popover_group.select('.details-wrapper');
|
||||||
|
|
||||||
|
if (!details_box) {
|
||||||
|
details_box = gt.canvas.group()
|
||||||
|
.addClass('details-wrapper')
|
||||||
|
.appendTo(popover_group);
|
||||||
|
gt.canvas.rect(0, 0, 0, 110, 2, 2)
|
||||||
|
.addClass('details-container')
|
||||||
|
.appendTo(details_box);
|
||||||
|
gt.canvas.text(0, 0, '')
|
||||||
|
.attr({ dx: 10, dy: 30 })
|
||||||
|
.addClass('details-heading')
|
||||||
|
.appendTo(details_box);
|
||||||
|
gt.canvas.text(0, 0, '')
|
||||||
|
.attr({ dx: 10, dy: 65 })
|
||||||
|
.addClass('details-body')
|
||||||
|
.appendTo(details_box);
|
||||||
|
gt.canvas.text(0, 0, '')
|
||||||
|
.attr({ dx: 10, dy: 90 })
|
||||||
|
.addClass('details-body')
|
||||||
|
.appendTo(details_box);
|
||||||
|
}
|
||||||
|
|
||||||
|
self.group.mouseover((e, x, y) => {
|
||||||
|
popover_group.removeClass('hide');
|
||||||
|
|
||||||
|
const pos = get_details_position();
|
||||||
|
details_box.transform(`t${pos.x},${pos.y}`);
|
||||||
|
|
||||||
|
const start_date = self.task._start.format('MMM D'),
|
||||||
|
end_date = self.task._end.format('MMM D'),
|
||||||
|
heading = `${self.task.name}: ${start_date} - ${end_date}`;
|
||||||
|
|
||||||
|
const $heading = popover_group
|
||||||
|
.select('.details-heading')
|
||||||
|
.attr('text', heading);
|
||||||
|
|
||||||
|
const bbox = $heading.getBBox();
|
||||||
|
details_box.select('.details-container')
|
||||||
|
.attr({ width: bbox.width + 20 });
|
||||||
|
|
||||||
|
const duration = self.task._end.diff(self.task._start, 'days'),
|
||||||
|
body1 = `Duration: ${duration} days`,
|
||||||
|
body2 = self.task.progress ?
|
||||||
|
`Progress: ${self.task.progress}` : '';
|
||||||
|
|
||||||
|
const $body = popover_group.selectAll('.details-body');
|
||||||
|
$body[0].attr('text', body1);
|
||||||
|
$body[1].attr('text', body2);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.group.mouseout(() => {
|
||||||
|
setTimeout(() => popover_group.addClass('hide'), 500);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_details_position() {
|
||||||
|
return {
|
||||||
|
x: self.$bar.getEndX() + 2,
|
||||||
|
y: self.$bar.getY() - 10
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function bind_resize() {
|
||||||
|
const { left, right } = get_handles();
|
||||||
|
|
||||||
|
left.drag(onmove_left, onstart, onstop_left);
|
||||||
|
right.drag(onmove_right, onstart, onstop_right);
|
||||||
|
|
||||||
|
function onstart() {
|
||||||
|
onstart();
|
||||||
|
this.ox = this.getX();
|
||||||
|
this.oy = this.getY();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onmove_right(dx, dy) {
|
||||||
|
onmove_handle_right(dx, dy);
|
||||||
|
}
|
||||||
|
function onstop_right() {
|
||||||
|
onstop_handle_right();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onmove_left(dx, dy) {
|
||||||
|
onmove_handle_left(dx, dy);
|
||||||
|
}
|
||||||
|
function onstop_left() {
|
||||||
|
onstop_handle_left();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_handles() {
|
||||||
|
return {
|
||||||
|
left: self.handle_group.select('.handle.left'),
|
||||||
|
right: self.handle_group.select('.handle.right')
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function bind_drag() {
|
||||||
|
self.bar_group.drag(onmove, onstart, onstop);
|
||||||
|
|
||||||
|
function onmove(dx, dy) {
|
||||||
|
onmove(dx, dy);
|
||||||
|
}
|
||||||
|
function onstop() {
|
||||||
|
onstop();
|
||||||
|
}
|
||||||
|
function onstart() {
|
||||||
|
onstart();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function bind_resize_progress() {
|
||||||
|
const bar = self.$bar,
|
||||||
|
bar_progress = self.$bar_progress,
|
||||||
|
handle = self.group.select('.handle.progress');
|
||||||
|
handle && handle.drag(onmove, onstart, onstop);
|
||||||
|
|
||||||
|
function onmove(dx, dy) {
|
||||||
|
if (dx > bar_progress.max_dx) {
|
||||||
|
dx = bar_progress.max_dx;
|
||||||
|
}
|
||||||
|
if (dx < bar_progress.min_dx) {
|
||||||
|
dx = bar_progress.min_dx;
|
||||||
|
}
|
||||||
|
|
||||||
|
bar_progress.attr('width', bar_progress.owidth + dx);
|
||||||
|
handle.transform(`t{dx},0`);
|
||||||
|
bar_progress.finaldx = dx;
|
||||||
|
}
|
||||||
|
function onstop() {
|
||||||
|
if (!bar_progress.finaldx) return;
|
||||||
|
progress_changed();
|
||||||
|
set_action_completed();
|
||||||
|
}
|
||||||
|
function onstart() {
|
||||||
|
bar_progress.finaldx = 0;
|
||||||
|
bar_progress.owidth = bar_progress.getWidth();
|
||||||
|
bar_progress.min_dx = -bar_progress.getWidth();
|
||||||
|
bar_progress.max_dx = bar.getWidth() - bar_progress.getWidth();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onstart() {
|
||||||
|
const bar = self.$bar;
|
||||||
|
bar.ox = bar.getX();
|
||||||
|
bar.oy = bar.getY();
|
||||||
|
bar.owidth = bar.getWidth();
|
||||||
|
bar.finaldx = 0;
|
||||||
|
run_method_for_dependencies('onstart');
|
||||||
|
}
|
||||||
|
self.onstart = onstart;
|
||||||
|
|
||||||
|
function onmove(dx, dy) {
|
||||||
|
const bar = self.$bar;
|
||||||
|
bar.finaldx = get_snap_position(dx);
|
||||||
|
update_bar_position(bar.ox + bar.finaldx);
|
||||||
|
run_method_for_dependencies('onmove', [dx, dy]);
|
||||||
|
}
|
||||||
|
self.onmove = onmove;
|
||||||
|
|
||||||
|
function onstop() {
|
||||||
|
const bar = self.$bar;
|
||||||
|
if (!bar.finaldx) return;
|
||||||
|
date_changed();
|
||||||
|
set_action_completed();
|
||||||
|
run_method_for_dependencies('onstop');
|
||||||
|
}
|
||||||
|
self.onstop = onstop;
|
||||||
|
|
||||||
|
function onmove_handle_left(dx, dy) {
|
||||||
|
const bar = self.$bar;
|
||||||
|
bar.finaldx = get_snap_position(dx);
|
||||||
|
update_bar_position(bar.ox + bar.finaldx, bar.owidth - bar.finaldx);
|
||||||
|
run_method_for_dependencies('onmove_handle_left', [dx, dy]);
|
||||||
|
}
|
||||||
|
self.onmove_handle_left = onmove_handle_left;
|
||||||
|
|
||||||
|
function onstop_handle_left() {
|
||||||
|
const bar = self.$bar;
|
||||||
|
if (bar.finaldx) date_changed();
|
||||||
|
set_action_completed();
|
||||||
|
run_method_for_dependencies('onstop_handle_left');
|
||||||
|
}
|
||||||
|
self.onstop_handle_left = onstop_handle_left;
|
||||||
|
|
||||||
|
function run_method_for_dependencies(fn, args) {
|
||||||
|
const dm = gt.dependency_map;
|
||||||
|
if (dm[self.task.id]) {
|
||||||
|
for (let deptask of dm[self.task.id]) {
|
||||||
|
const dt = gt.get_bar(deptask);
|
||||||
|
dt[fn].apply(dt, args);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onmove_handle_right(dx, dy) {
|
||||||
|
const bar = self.$bar;
|
||||||
|
bar.finaldx = get_snap_position(dx);
|
||||||
|
update_bar_position(null, bar.owidth + bar.finaldx);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onstop_handle_right() {
|
||||||
|
const bar = self.$bar;
|
||||||
|
if (bar.finaldx) date_changed();
|
||||||
|
set_action_completed();
|
||||||
|
}
|
||||||
|
|
||||||
|
function update_bar_position(x, width) {
|
||||||
|
const bar = self.$bar;
|
||||||
|
if (x) update_attr(bar, 'x', x);
|
||||||
|
if (width) update_attr(bar, 'width', width);
|
||||||
|
update_label_position();
|
||||||
|
update_handle_position();
|
||||||
|
update_progressbar_position();
|
||||||
|
update_arrow_position();
|
||||||
|
update_details_position();
|
||||||
|
}
|
||||||
|
|
||||||
|
// function click(callback) {
|
||||||
|
// self.group.click(function () {
|
||||||
|
// if (self.action_completed) {
|
||||||
|
// // just finished a move action, wait for a few seconds
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// if (self.group.hasClass('active')) {
|
||||||
|
// callback(self.task);
|
||||||
|
// }
|
||||||
|
// unselect_all();
|
||||||
|
// self.group.toggleClass('active');
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
function date_changed() {
|
||||||
|
self.events.on_date_change &&
|
||||||
|
self.events.on_date_change(
|
||||||
|
self.task,
|
||||||
|
compute_start_date(),
|
||||||
|
compute_end_date()
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function progress_changed() {
|
||||||
|
self.events.on_progress_change &&
|
||||||
|
self.events.on_progress_change(
|
||||||
|
self.task,
|
||||||
|
compute_progress()
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_action_completed() {
|
||||||
|
self.action_completed = true;
|
||||||
|
setTimeout(() => self.action_completed = false, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// function compute_date(x) {
|
||||||
|
// const shift = (x - compute_x()) / gt.config.column_width;
|
||||||
|
// const date = self.task._start.clone().add(gt.config.step * shift, 'hours');
|
||||||
|
// return date;
|
||||||
|
// }
|
||||||
|
|
||||||
|
function compute_start_date() {
|
||||||
|
const bar = self.$bar,
|
||||||
|
shift = (bar.getX() - compute_x()) / gt.config.column_width,
|
||||||
|
new_start_date = self.task._start.clone().add(gt.config.step * shift, 'hours');
|
||||||
|
return new_start_date;
|
||||||
|
}
|
||||||
|
|
||||||
|
function compute_end_date() {
|
||||||
|
const bar = self.$bar,
|
||||||
|
og_x = compute_x() + self.duration * gt.config.column_width,
|
||||||
|
final_x = bar.getEndX(),
|
||||||
|
shift = (final_x - og_x) / gt.config.column_width,
|
||||||
|
new_end_date = self.task._end.clone().add(gt.config.step * shift, 'hours');
|
||||||
|
return new_end_date;
|
||||||
|
}
|
||||||
|
|
||||||
|
function compute_progress() {
|
||||||
|
return self.$bar_progress.getWidth() / self.$bar.getWidth() * 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
function compute_x() {
|
||||||
|
let x = self.task._start.diff(gt.gantt_start, 'hours') /
|
||||||
|
gt.config.step * gt.config.column_width;
|
||||||
|
|
||||||
|
if (gt.view_is('Month')) {
|
||||||
|
x = self.task._start.diff(gt.config.start, 'days') *
|
||||||
|
gt.config.column_width / 30;
|
||||||
|
}
|
||||||
|
return x;
|
||||||
|
}
|
||||||
|
|
||||||
|
function compute_y() {
|
||||||
|
return gt.config.header_height + gt.config.padding +
|
||||||
|
self.task._index * (self.height + gt.config.padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_snap_position(dx) {
|
||||||
|
let odx = dx, rem, position;
|
||||||
|
|
||||||
|
if (gt.view_is('Week')) {
|
||||||
|
rem = dx % (gt.config.column_width / 7);
|
||||||
|
position = odx - rem +
|
||||||
|
((rem < gt.config.column_width / 14) ? 0 : gt.config.column_width / 7);
|
||||||
|
} else if (gt.view_is('Month')) {
|
||||||
|
rem = dx % (gt.config.column_width / 30);
|
||||||
|
position = odx - rem +
|
||||||
|
((rem < gt.config.column_width / 60) ? 0 : gt.config.column_width / 30);
|
||||||
|
} else {
|
||||||
|
rem = dx % gt.config.column_width;
|
||||||
|
position = odx - rem +
|
||||||
|
((rem < gt.config.column_width / 2) ? 0 : gt.config.column_width);
|
||||||
|
}
|
||||||
|
return position;
|
||||||
|
}
|
||||||
|
|
||||||
|
function update_attr(element, attr, value) {
|
||||||
|
value = +value;
|
||||||
|
if (!isNaN(value)) {
|
||||||
|
element.attr(attr, value);
|
||||||
|
}
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
function update_progressbar_position() {
|
||||||
|
self.$bar_progress.attr('x', self.$bar.getX());
|
||||||
|
self.$bar_progress.attr('width', self.$bar.getWidth() * (self.task.progress / 100));
|
||||||
|
}
|
||||||
|
|
||||||
|
function update_label_position() {
|
||||||
|
const bar = self.$bar,
|
||||||
|
label = self.group.select('.bar-label');
|
||||||
|
if (label.getBBox().width > bar.getWidth()) {
|
||||||
|
label.addClass('big').attr('x', bar.getX() + bar.getWidth() + 5);
|
||||||
|
} else {
|
||||||
|
label.removeClass('big').attr('x', bar.getX() + bar.getWidth() / 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function update_handle_position() {
|
||||||
|
const bar = self.$bar;
|
||||||
|
self.handle_group.select('.handle.left').attr({
|
||||||
|
'x': bar.getX() + 1
|
||||||
|
});
|
||||||
|
self.handle_group.select('.handle.right').attr({
|
||||||
|
'x': bar.getEndX() - 9
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function update_arrow_position() {
|
||||||
|
for (let arrow of self.arrows) {
|
||||||
|
arrow.update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function update_details_position() {
|
||||||
|
const details_box = gt.element_groups.details.select('.details-wrapper');
|
||||||
|
const pos = get_details_position();
|
||||||
|
details_box && details_box.transform(`t${pos.x},${pos.y}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// function unselect_all() {
|
||||||
|
// gt.canvas.selectAll('.bar-wrapper').forEach(function (el) {
|
||||||
|
// el.removeClass('active');
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
init();
|
||||||
|
|
||||||
|
return self;
|
||||||
|
}
|
||||||
516
src/Gantt.js
Normal file
516
src/Gantt.js
Normal file
@ -0,0 +1,516 @@
|
|||||||
|
/* global moment, Snap */
|
||||||
|
/**
|
||||||
|
* Gantt:
|
||||||
|
* element: querySelector string, required
|
||||||
|
* tasks: array of tasks, required
|
||||||
|
* task: { id, name, start, end, progress, dependencies }
|
||||||
|
* config: configuration options, optional
|
||||||
|
*/
|
||||||
|
import './gantt.scss';
|
||||||
|
|
||||||
|
import Bar from './Bar';
|
||||||
|
import Arrow from './Arrow';
|
||||||
|
|
||||||
|
export default function Gantt(element, tasks, config) {
|
||||||
|
|
||||||
|
const self = {};
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
set_defaults();
|
||||||
|
// initialize with default view mode
|
||||||
|
change_view_mode(self.config.view_mode);
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_defaults() {
|
||||||
|
|
||||||
|
const defaults = {
|
||||||
|
header_height: 50,
|
||||||
|
column_width: 30,
|
||||||
|
step: 24,
|
||||||
|
view_modes: [
|
||||||
|
'Quarter Day',
|
||||||
|
'Half Day',
|
||||||
|
'Day',
|
||||||
|
'Week',
|
||||||
|
'Month'
|
||||||
|
],
|
||||||
|
bar: {
|
||||||
|
height: 20
|
||||||
|
},
|
||||||
|
arrow: {
|
||||||
|
curve: 5
|
||||||
|
},
|
||||||
|
padding: 18,
|
||||||
|
view_mode: 'Day',
|
||||||
|
date_format: 'YYYY-MM-DD'
|
||||||
|
};
|
||||||
|
|
||||||
|
self.element = element;
|
||||||
|
self._tasks = tasks;
|
||||||
|
self.config = Object.assign({}, defaults, config);
|
||||||
|
|
||||||
|
self._bars = [];
|
||||||
|
self._arrows = [];
|
||||||
|
self.element_groups = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
function change_view_mode(mode) {
|
||||||
|
set_scale(mode);
|
||||||
|
prepare();
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepare() {
|
||||||
|
prepare_tasks();
|
||||||
|
prepare_dependencies();
|
||||||
|
prepare_dates();
|
||||||
|
prepare_canvas();
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepare_tasks() {
|
||||||
|
|
||||||
|
// prepare tasks
|
||||||
|
self.tasks = self._tasks.map((task, i) => {
|
||||||
|
|
||||||
|
// momentify
|
||||||
|
task._start = moment(task.start, self.config.date_format);
|
||||||
|
task._end = moment(task.end, self.config.date_format);
|
||||||
|
|
||||||
|
// cache index
|
||||||
|
task._index = i;
|
||||||
|
|
||||||
|
// invalid dates
|
||||||
|
if(!task.start && !task.end) {
|
||||||
|
task._start = moment().startOf('day');
|
||||||
|
task._end = moment().startOf('day').add(2, 'days');
|
||||||
|
} else if(!task.start) {
|
||||||
|
task._start = task._end.clone().add(-2, 'days');
|
||||||
|
} else {
|
||||||
|
task._end = task._start.clone().add(2, 'days');
|
||||||
|
}
|
||||||
|
|
||||||
|
// invalid flag
|
||||||
|
if(!task.start || !task.end) {
|
||||||
|
task.invalid = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// dependencies
|
||||||
|
let deps;
|
||||||
|
|
||||||
|
if(task.dependencies) {
|
||||||
|
deps = task.dependencies
|
||||||
|
.split(',')
|
||||||
|
.map(d => d.trim())
|
||||||
|
.filter((d) => d);
|
||||||
|
} else {
|
||||||
|
deps = [];
|
||||||
|
}
|
||||||
|
task.dependencies = deps;
|
||||||
|
|
||||||
|
return task;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function prepare_dependencies() {
|
||||||
|
|
||||||
|
self.dependency_map = {};
|
||||||
|
for(let t of self.tasks) {
|
||||||
|
for(let d of t.dependencies) {
|
||||||
|
self.dependency_map[d] = self.dependency_map[d] || [];
|
||||||
|
self.dependency_map[d].push(t.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepare_dates() {
|
||||||
|
|
||||||
|
for(let task of self.tasks) {
|
||||||
|
// set global start and end date
|
||||||
|
if(!self.gantt_start || task._start < self.gantt_start) {
|
||||||
|
self.gantt_start = task._start;
|
||||||
|
}
|
||||||
|
if(!self.gantt_end || task._end > self.gantt_end) {
|
||||||
|
self.gantt_end = task._end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
set_gantt_dates();
|
||||||
|
setup_dates();
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepare_canvas() {
|
||||||
|
self.canvas = Snap(self.element).addClass('gantt');
|
||||||
|
}
|
||||||
|
|
||||||
|
function render() {
|
||||||
|
clear();
|
||||||
|
setup_groups();
|
||||||
|
make_grid();
|
||||||
|
make_dates();
|
||||||
|
make_bars();
|
||||||
|
make_arrows();
|
||||||
|
map_arrows_on_bars();
|
||||||
|
setup_events();
|
||||||
|
set_width();
|
||||||
|
set_scroll_position();
|
||||||
|
bind_grid_click();
|
||||||
|
}
|
||||||
|
|
||||||
|
function clear() {
|
||||||
|
self.canvas.clear();
|
||||||
|
self._bars = [];
|
||||||
|
self._arrows = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_gantt_dates() {
|
||||||
|
|
||||||
|
if(view_is(['Quarter Day', 'Half Day'])) {
|
||||||
|
self.gantt_start = self.gantt_start.clone().subtract(7, 'day');
|
||||||
|
self.gantt_end = self.gantt_end.clone().add(7, 'day');
|
||||||
|
} else if(view_is('Month')) {
|
||||||
|
self.gantt_start = self.gantt_start.clone().startOf('year');
|
||||||
|
self.gantt_end = self.gantt_end.clone().endOf('month').add(1, 'year');
|
||||||
|
} else {
|
||||||
|
self.gantt_start = self.gantt_start.clone().startOf('month').subtract(1, 'month');
|
||||||
|
self.gantt_end = self.gantt_end.clone().endOf('month').add(1, 'month');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setup_dates() {
|
||||||
|
|
||||||
|
self.dates = [];
|
||||||
|
let cur_date = null;
|
||||||
|
|
||||||
|
while(cur_date === null || cur_date < self.gantt_end) {
|
||||||
|
if(!cur_date) {
|
||||||
|
cur_date = self.gantt_start.clone();
|
||||||
|
} else {
|
||||||
|
cur_date = view_is('Month') ?
|
||||||
|
cur_date.clone().add(1, 'month') :
|
||||||
|
cur_date.clone().add(self.config.step, 'hours');
|
||||||
|
}
|
||||||
|
self.dates.push(cur_date);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setup_groups() {
|
||||||
|
|
||||||
|
const groups = ['grid', 'date', 'arrow', 'progress', 'bar', 'details'];
|
||||||
|
// make group layers
|
||||||
|
for(let group of groups) {
|
||||||
|
self.element_groups[group] = self.canvas.group().attr({'id': group});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_scale(scale) {
|
||||||
|
self.config.view_mode = scale;
|
||||||
|
|
||||||
|
// fire viewmode_change event
|
||||||
|
// self.events.on_viewmode_change(scale);
|
||||||
|
// trigger("view_mode_change");
|
||||||
|
|
||||||
|
if(scale === 'Day') {
|
||||||
|
self.config.step = 24;
|
||||||
|
self.config.column_width = 38;
|
||||||
|
} else if(scale === 'Half Day') {
|
||||||
|
self.config.step = 24 / 2;
|
||||||
|
self.config.column_width = 38;
|
||||||
|
} else if(scale === 'Quarter Day') {
|
||||||
|
self.config.step = 24 / 4;
|
||||||
|
self.config.column_width = 38;
|
||||||
|
} else if(scale === 'Week') {
|
||||||
|
self.config.step = 24 * 7;
|
||||||
|
self.config.column_width = 140;
|
||||||
|
} else if(scale === 'Month') {
|
||||||
|
self.config.step = 24 * 30;
|
||||||
|
self.config.column_width = 120;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_width() {
|
||||||
|
const cur_width = self.canvas.node.getBoundingClientRect().width;
|
||||||
|
const actual_width = self.canvas.getBBox().width;
|
||||||
|
if(cur_width < actual_width) {
|
||||||
|
self.canvas.attr('width', actual_width);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_scroll_position() {
|
||||||
|
const parent_element = document.querySelector(self.element).parentElement;
|
||||||
|
if(!parent_element) return;
|
||||||
|
|
||||||
|
const scroll_pos = get_min_date().diff(self.gantt_start, 'hours') /
|
||||||
|
self.config.step * self.config.column_width;
|
||||||
|
parent_element.scrollLeft = scroll_pos;
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_min_date() {
|
||||||
|
const task = self.tasks.reduce((acc, curr) => {
|
||||||
|
return curr._start.isSameOrBefore(acc._start) ? curr : acc;
|
||||||
|
});
|
||||||
|
return task._start;
|
||||||
|
}
|
||||||
|
|
||||||
|
function make_grid() {
|
||||||
|
make_grid_background();
|
||||||
|
make_grid_rows();
|
||||||
|
make_grid_header();
|
||||||
|
make_grid_ticks();
|
||||||
|
make_grid_highlights();
|
||||||
|
}
|
||||||
|
|
||||||
|
function make_grid_background() {
|
||||||
|
|
||||||
|
const grid_width = self.dates.length * self.config.column_width,
|
||||||
|
grid_height = self.config.header_height + self.config.padding +
|
||||||
|
(self.config.bar.height + self.config.padding) * self.tasks.length;
|
||||||
|
|
||||||
|
self.canvas.rect(0, 0, grid_width, grid_height)
|
||||||
|
.addClass('grid-background')
|
||||||
|
.appendTo(self.element_groups.grid);
|
||||||
|
|
||||||
|
self.canvas.attr({
|
||||||
|
height: grid_height + self.config.padding,
|
||||||
|
width: '100%'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function make_grid_header() {
|
||||||
|
const header_width = self.dates.length * self.config.column_width,
|
||||||
|
header_height = self.config.header_height + 10;
|
||||||
|
self.canvas.rect(0, 0, header_width, header_height)
|
||||||
|
.addClass('grid-header')
|
||||||
|
.appendTo(self.element_groups.grid);
|
||||||
|
}
|
||||||
|
|
||||||
|
function make_grid_rows() {
|
||||||
|
|
||||||
|
const rows = self.canvas.group().appendTo(self.element_groups.grid),
|
||||||
|
lines = self.canvas.group().appendTo(self.element_groups.grid),
|
||||||
|
row_width = self.dates.length * self.config.column_width,
|
||||||
|
row_height = self.config.bar.height + self.config.padding;
|
||||||
|
|
||||||
|
let row_y = self.config.header_height + self.config.padding / 2;
|
||||||
|
|
||||||
|
for(let task of self.tasks) { // eslint-disable-line
|
||||||
|
self.canvas.rect(0, row_y, row_width, row_height)
|
||||||
|
.addClass('grid-row')
|
||||||
|
.appendTo(rows);
|
||||||
|
|
||||||
|
self.canvas.line(0, row_y + row_height, row_width, row_y + row_height)
|
||||||
|
.addClass('row-line')
|
||||||
|
.appendTo(lines);
|
||||||
|
|
||||||
|
row_y += self.config.bar.height + self.config.padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function make_grid_ticks() {
|
||||||
|
let tick_x = 0,
|
||||||
|
tick_y = self.config.header_height + self.config.padding / 2,
|
||||||
|
tick_height = (self.config.bar.height + self.config.padding) * self.tasks.length;
|
||||||
|
|
||||||
|
for(let date of self.dates) {
|
||||||
|
let tick_class = 'tick';
|
||||||
|
// thick tick for monday
|
||||||
|
if(view_is('Day') && date.day() === 1) {
|
||||||
|
tick_class += ' thick';
|
||||||
|
}
|
||||||
|
// thick tick for first week
|
||||||
|
if(view_is('Week') && date.date() >= 1 && date.date() < 8) {
|
||||||
|
tick_class += ' thick';
|
||||||
|
}
|
||||||
|
// thick ticks for quarters
|
||||||
|
if(view_is('Month') && date.month() % 3 === 0) {
|
||||||
|
tick_class += ' thick';
|
||||||
|
}
|
||||||
|
|
||||||
|
self.canvas.path(Snap.format('M {x} {y} v {height}', {
|
||||||
|
x: tick_x,
|
||||||
|
y: tick_y,
|
||||||
|
height: tick_height
|
||||||
|
}))
|
||||||
|
.addClass(tick_class)
|
||||||
|
.appendTo(self.element_groups.grid);
|
||||||
|
|
||||||
|
if(view_is('Month')) {
|
||||||
|
tick_x += date.daysInMonth() * self.config.column_width / 30;
|
||||||
|
} else {
|
||||||
|
tick_x += self.config.column_width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function make_grid_highlights() {
|
||||||
|
|
||||||
|
// highlight today's date
|
||||||
|
if(view_is('Day')) {
|
||||||
|
const x = moment().startOf('day').diff(self.gantt_start, 'hours') /
|
||||||
|
self.config.step * self.config.column_width;
|
||||||
|
const y = 0;
|
||||||
|
const width = self.config.column_width;
|
||||||
|
const height = (self.config.bar.height + self.config.padding) * self.tasks.length +
|
||||||
|
self.config.header_height + self.config.padding / 2;
|
||||||
|
|
||||||
|
self.canvas.rect(x, y, width, height)
|
||||||
|
.addClass('today-highlight')
|
||||||
|
.appendTo(self.element_groups.grid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function make_dates() {
|
||||||
|
|
||||||
|
for(let date of get_dates_to_draw()) {
|
||||||
|
self.canvas.text(date.lower_x, date.lower_y, date.lower_text)
|
||||||
|
.addClass('lower-text')
|
||||||
|
.appendTo(self.element_groups.date);
|
||||||
|
|
||||||
|
if(date.upper_text) {
|
||||||
|
const $upper_text = self.canvas.text(date.upper_x, date.upper_y, date.upper_text)
|
||||||
|
.addClass('upper-text')
|
||||||
|
.appendTo(self.element_groups.date);
|
||||||
|
|
||||||
|
// remove out-of-bound dates
|
||||||
|
if($upper_text.getBBox().x2 > self.element_groups.grid.getBBox().width) {
|
||||||
|
$upper_text.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_dates_to_draw() {
|
||||||
|
let last_date = null;
|
||||||
|
const dates = self.dates.map((date, i) => {
|
||||||
|
const d = get_date_info(date, last_date, i);
|
||||||
|
last_date = date;
|
||||||
|
return d;
|
||||||
|
});
|
||||||
|
return dates;
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_date_info(date, last_date, i) {
|
||||||
|
if(!last_date) {
|
||||||
|
last_date = date.clone().add(1, 'year');
|
||||||
|
}
|
||||||
|
const date_text = {
|
||||||
|
'Quarter Day_lower': date.format('HH'),
|
||||||
|
'Half Day_lower': date.format('HH'),
|
||||||
|
'Day_lower': date.date() !== last_date.date() ? date.format('D') : '',
|
||||||
|
'Week_lower': 'Week ' + date.format('W'),
|
||||||
|
'Month_lower': date.format('MMMM'),
|
||||||
|
'Quarter Day_upper': date.date() !== last_date.date() ? date.format('D MMM') : '',
|
||||||
|
'Half Day_upper': date.date() !== last_date.date() ? date.format('D MMM') : '',
|
||||||
|
'Day_upper': date.month() !== last_date.month() ? date.format('MMMM') : '',
|
||||||
|
'Week_upper': date.month() !== last_date.month() ? date.format('MMMM') : '',
|
||||||
|
'Month_upper': date.year() !== last_date.year() ? date.format('YYYY') : ''
|
||||||
|
};
|
||||||
|
|
||||||
|
const base_pos = {
|
||||||
|
x: i * self.config.column_width,
|
||||||
|
lower_y: self.config.header_height,
|
||||||
|
upper_y: self.config.header_height - 25
|
||||||
|
};
|
||||||
|
|
||||||
|
const x_pos = {
|
||||||
|
'Quarter Day_lower': (self.config.column_width * 4) / 2,
|
||||||
|
'Quarter Day_upper': 0,
|
||||||
|
'Half Day_lower': (self.config.column_width * 2) / 2,
|
||||||
|
'Half Day_upper': 0,
|
||||||
|
'Day_lower': self.config.column_width / 2,
|
||||||
|
'Day_upper': (self.config.column_width * 30) / 2,
|
||||||
|
'Week_lower': self.config.column_width / 2,
|
||||||
|
'Week_upper': (self.config.column_width * 4) / 2,
|
||||||
|
'Month_lower': (date.daysInMonth() * self.config.column_width / 30) / 2,
|
||||||
|
'Month_upper': (self.config.column_width * 12) / 2
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
upper_text: date_text[`${self.config.view_mode}_upper`],
|
||||||
|
lower_text: date_text[`${self.config.view_mode}_lower`],
|
||||||
|
upper_x: base_pos.x + x_pos[`${self.config.view_mode}_upper`],
|
||||||
|
upper_y: base_pos.upper_y,
|
||||||
|
lower_x: base_pos.x + x_pos[`${self.config.view_mode}_lower`],
|
||||||
|
lower_y: base_pos.lower_y
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function make_arrows() {
|
||||||
|
|
||||||
|
for(let task of self.tasks) {
|
||||||
|
self._arrows = task.dependencies.map(dep => {
|
||||||
|
const dependency = get_task(dep);
|
||||||
|
if(!dependency) return;
|
||||||
|
|
||||||
|
const arrow = Arrow(
|
||||||
|
self, // gt
|
||||||
|
self._bars[dependency._index], // from_task
|
||||||
|
self._bars[task._index] // to_task
|
||||||
|
);
|
||||||
|
self.element_groups.arrow.add(arrow.element);
|
||||||
|
return arrow; // eslint-disable-line
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function make_bars() {
|
||||||
|
|
||||||
|
self._bars = self.tasks.map((task) => {
|
||||||
|
const bar = Bar(self, task);
|
||||||
|
self.element_groups.bar.add(bar.group);
|
||||||
|
return bar;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function map_arrows_on_bars() {
|
||||||
|
|
||||||
|
for(let bar of self._bars) {
|
||||||
|
bar.arrows = self._arrows.filter(arrow => {
|
||||||
|
return arrow.from_task.task.id === bar.task.id ||
|
||||||
|
arrow.to_task.task.id === bar.task.id;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setup_events() {
|
||||||
|
// this._bars.forEach(function(bar) {
|
||||||
|
// bar.events.on_date_change = me.events.bar_on_date_change;
|
||||||
|
// bar.events.on_progress_change = me.events.bar_on_progress_change;
|
||||||
|
// bar.click(me.events.bar_on_click);
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
function bind_grid_click() {
|
||||||
|
self.element_groups.grid.click(() => {
|
||||||
|
self.canvas.selectAll('.bar-wrapper').forEach(el => {
|
||||||
|
el.removeClass('active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function view_is(modes) {
|
||||||
|
if (typeof modes === 'string') {
|
||||||
|
return self.config.view_mode === modes;
|
||||||
|
} else if(Array.isArray(modes)) {
|
||||||
|
for (let mode of modes) {
|
||||||
|
if(self.config.view_mode === mode) return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
self.view_is = view_is;
|
||||||
|
|
||||||
|
function get_task(id) {
|
||||||
|
self.tasks.find((task) => {
|
||||||
|
return task.id === id;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_bar(id) {
|
||||||
|
self._bars.find((bar) => {
|
||||||
|
return bar.task.id === id;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
self.get_bar = get_bar; // required in Bar
|
||||||
|
|
||||||
|
init();
|
||||||
|
|
||||||
|
return self;
|
||||||
|
}
|
||||||
144
src/gantt.scss
Normal file
144
src/gantt.scss
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
$bar-color: #b8c2cc;
|
||||||
|
$bar-stroke: #8D99A6;
|
||||||
|
$border-color: #e0e0e0;
|
||||||
|
$light-bg: #f5f5f5;
|
||||||
|
$light-border-color: #ebeff2;
|
||||||
|
$light-yellow: #fcf8e3;
|
||||||
|
$text-muted: #666;
|
||||||
|
$text-light: #555;
|
||||||
|
$text-color: #333;
|
||||||
|
$blue: #a3a3ff;
|
||||||
|
$handle-color: #ddd;
|
||||||
|
|
||||||
|
.gantt {
|
||||||
|
#grid {
|
||||||
|
.grid-background {
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
.grid-header {
|
||||||
|
fill: #ffffff;
|
||||||
|
stroke: $border-color;
|
||||||
|
stroke-width: 1.4;
|
||||||
|
}
|
||||||
|
.grid-row {
|
||||||
|
fill: #ffffff;
|
||||||
|
}
|
||||||
|
.grid-row:nth-child(even) {
|
||||||
|
fill: $light-bg;
|
||||||
|
}
|
||||||
|
.row-line {
|
||||||
|
stroke: $light-border-color;
|
||||||
|
}
|
||||||
|
.tick {
|
||||||
|
stroke: $border-color;
|
||||||
|
stroke-width: 0.2;
|
||||||
|
&.thick {
|
||||||
|
stroke-width: 0.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.today-highlight {
|
||||||
|
fill: $light-yellow;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#arrow {
|
||||||
|
fill: none;
|
||||||
|
stroke: $text-muted;
|
||||||
|
stroke-width: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
fill: $bar-color;
|
||||||
|
stroke: $bar-stroke;
|
||||||
|
stroke-width: 0;
|
||||||
|
transition: stroke-width .3s ease;
|
||||||
|
}
|
||||||
|
.bar-progress {
|
||||||
|
fill: $blue;
|
||||||
|
}
|
||||||
|
.bar-invalid {
|
||||||
|
fill: transparent;
|
||||||
|
stroke: $bar-stroke;
|
||||||
|
stroke-width: 1;
|
||||||
|
stroke-dasharray: 5;
|
||||||
|
|
||||||
|
&~.bar-label {
|
||||||
|
fill: $text-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bar-label {
|
||||||
|
fill: #fff;
|
||||||
|
dominant-baseline: central;
|
||||||
|
text-anchor: middle;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: lighter;
|
||||||
|
letter-spacing: 0.8px;
|
||||||
|
|
||||||
|
&.big {
|
||||||
|
fill: $text-light;
|
||||||
|
text-anchor: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle {
|
||||||
|
fill: $handle-color;
|
||||||
|
cursor: ew-resize;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity .3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-wrapper {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.bar {
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.bar {
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-text, .secondary-text {
|
||||||
|
font-size: 12px;
|
||||||
|
text-anchor: middle;
|
||||||
|
}
|
||||||
|
.primary-text {
|
||||||
|
fill: $text-light;
|
||||||
|
}
|
||||||
|
.secondary-text {
|
||||||
|
fill: $text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
#details {
|
||||||
|
font-size: 14;
|
||||||
|
|
||||||
|
.details-container {
|
||||||
|
stroke: $border-color;
|
||||||
|
stroke-width: 1.1;
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
.details-heading {
|
||||||
|
fill: $text-color;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.details-body {
|
||||||
|
fill: $text-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
19
test/library.spec.js
Executable file
19
test/library.spec.js
Executable file
@ -0,0 +1,19 @@
|
|||||||
|
import chai from 'chai';
|
||||||
|
import Library from '../lib/library.js';
|
||||||
|
|
||||||
|
chai.expect();
|
||||||
|
|
||||||
|
const expect = chai.expect;
|
||||||
|
|
||||||
|
let lib;
|
||||||
|
|
||||||
|
describe('Given an instance of my library', function () {
|
||||||
|
before(function () {
|
||||||
|
lib = new Library();
|
||||||
|
});
|
||||||
|
describe('when I need the name', function () {
|
||||||
|
it('should return the name', () => {
|
||||||
|
expect(lib.name).to.be.equal('Library');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
52
webpack.config.js
Executable file
52
webpack.config.js
Executable file
@ -0,0 +1,52 @@
|
|||||||
|
var webpack = require('webpack');
|
||||||
|
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
|
||||||
|
var path = require('path');
|
||||||
|
var env = require('yargs').argv.mode;
|
||||||
|
|
||||||
|
var libraryName = 'gantt';
|
||||||
|
|
||||||
|
var plugins = [], outputFile;
|
||||||
|
|
||||||
|
if (env === 'build') {
|
||||||
|
plugins.push(new UglifyJsPlugin({ minimize: true }));
|
||||||
|
outputFile = libraryName + '.min.js';
|
||||||
|
} else {
|
||||||
|
outputFile = libraryName + '.js';
|
||||||
|
}
|
||||||
|
|
||||||
|
let config = {
|
||||||
|
entry: __dirname + '/src/Gantt.js',
|
||||||
|
devtool: 'source-map',
|
||||||
|
output: {
|
||||||
|
path: __dirname + '/lib',
|
||||||
|
filename: outputFile,
|
||||||
|
library: libraryName,
|
||||||
|
libraryTarget: 'umd',
|
||||||
|
umdNamedDefine: true
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
loaders: [
|
||||||
|
{
|
||||||
|
test: /(\.jsx|\.js)$/,
|
||||||
|
loader: 'babel',
|
||||||
|
exclude: /(node_modules|bower_components)/
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /(\.jsx|\.js)$/,
|
||||||
|
loader: 'eslint-loader',
|
||||||
|
exclude: /node_modules/
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.scss$/,
|
||||||
|
loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
root: path.resolve('./src'),
|
||||||
|
extensions: ['', '.js']
|
||||||
|
},
|
||||||
|
plugins: plugins
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = config;
|
||||||
Loading…
x
Reference in New Issue
Block a user