Merge pull request #14 from frappe/hustcc-master
Custom class for tasks (hustcc pr enhancement)
This commit is contained in:
commit
d07c38b769
@ -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
|
||||
},
|
||||
...
|
||||
]
|
||||
|
||||
4
dist/frappe-gantt.js
vendored
4
dist/frappe-gantt.js
vendored
@ -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);
|
||||
}
|
||||
|
||||
2
dist/frappe-gantt.js.map
vendored
2
dist/frappe-gantt.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-gantt.min.js
vendored
2
dist/frappe-gantt.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-gantt.min.js.map
vendored
2
dist/frappe-gantt.min.js.map
vendored
File diff suppressed because one or more lines are too long
43
index.html
43
index.html
@ -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>
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -14,7 +14,7 @@ if (env === 'build') {
|
||||
outputFile = libraryName + '.js';
|
||||
}
|
||||
|
||||
let config = {
|
||||
var config = {
|
||||
entry: __dirname + '/src/Gantt.js',
|
||||
devtool: 'source-map',
|
||||
output: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user