Merge pull request #14 from frappe/hustcc-master

Custom class for tasks (hustcc pr enhancement)
This commit is contained in:
Faris Ansari 2017-03-21 10:35:54 +05:30 committed by GitHub
commit d07c38b769
10 changed files with 36 additions and 30 deletions

View File

@ -17,7 +17,7 @@ Include it in your html:
```
And start hacking:
```
```js
var tasks = [
{
id: 'Task 1',
@ -25,7 +25,8 @@ var tasks = [
start: '2016-12-28',
end: '2016-12-31',
progress: 20,
dependencies: 'Task 2, Task 3'
dependencies: 'Task 2, Task 3',
custom_class: 'bar-milestone' // optional
},
...
]

View File

@ -804,7 +804,7 @@ return /******/ (function(modules) { // webpackBootstrap
* Gantt:
* element: querySelector string, required
* tasks: array of tasks, required
* task: { id, name, start, end, progress, dependencies }
* task: { id, name, start, end, progress, dependencies, custom_class }
* config: configuration options, optional
*/
module.exports = exports['default'];
@ -1206,7 +1206,7 @@ return /******/ (function(modules) { // webpackBootstrap
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.group = gt.canvas.group().addClass('bar-wrapper').addClass(self.task.custom_class || '');
self.bar_group = gt.canvas.group().addClass('bar-group').appendTo(self.group);
self.handle_group = gt.canvas.group().addClass('handle-group').appendTo(self.group);
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Gantt</title>
<style>
<meta charset="UTF-8">
<title>Simple Gantt</title>
<style>
body {
font-family: sans-serif;
background: #ccc;
@ -15,13 +15,17 @@
.gantt-container {
overflow: scroll;
}
/* custom class */
.gantt .bar-milestone .bar-progress {
fill: tomato;
}
</style>
<script src="node_modules/moment/min/moment.min.js"></script>
<script src="node_modules/moment/min/moment.min.js"></script>
<script src="node_modules/snapsvg/dist/snap.svg-min.js"></script>
<script src="dist/frappe-gantt.js"></script>
<script src="dist/frappe-gantt.js"></script>
</head>
<body>
<div class="container">
<div class="container">
<h2>Interactive Gantt Chart entirely made in SVG!</h2>
<div class="gantt-container">
<svg id="gantt" width="400" height="600"></svg>
@ -56,21 +60,22 @@
tasks[2].dependencies = "Task 1"
tasks[3].dependencies = "Task 2"
tasks[5].dependencies = "Task 4"
tasks[5].custom_class = "bar-milestone";
var gantt_chart = Gantt("#gantt", tasks, {
on_click: function (task) {
console.log(task);
},
on_date_change: function(task, start, end) {
console.log(task, start, end);
},
on_progress_change: function(task, progress) {
console.log(task, progress);
},
on_view_change: function(mode) {
console.log(mode);
}
});
on_click: function (task) {
console.log(task);
},
on_date_change: function(task, start, end) {
console.log(task, start, end);
},
on_progress_change: function(task, progress) {
console.log(task, progress);
},
on_view_change: function(mode) {
console.log(mode);
}
});
console.log(gantt_chart);
</script>
</body>

View File

@ -1,6 +1,6 @@
{
"name": "frappe-gantt",
"version": "0.0.4",
"version": "0.0.5",
"description": "A simple, modern, interactive gantt library for the web",
"main": "dist/frappe-gantt.js",
"scripts": {

View File

@ -37,7 +37,7 @@ export default function Bar(gt, task) {
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.group = gt.canvas.group().addClass('bar-wrapper').addClass(self.task.custom_class || '');
self.bar_group = gt.canvas.group().addClass('bar-group').appendTo(self.group);
self.handle_group = gt.canvas.group().addClass('handle-group').appendTo(self.group);
}

View File

@ -3,7 +3,7 @@
* Gantt:
* element: querySelector string, required
* tasks: array of tasks, required
* task: { id, name, start, end, progress, dependencies }
* task: { id, name, start, end, progress, dependencies, custom_class }
* config: configuration options, optional
*/
import './gantt.scss';

View File

@ -14,7 +14,7 @@ if (env === 'build') {
outputFile = libraryName + '.js';
}
let config = {
var config = {
entry: __dirname + '/src/Gantt.js',
devtool: 'source-map',
output: {