jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

Merge branch 'master' into master

Browse Source
This commit is contained in:
Rushabh Mehta 2024-03-27 14:24:18 +05:30 committed by GitHub
commit ce43bb9b66
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 200 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
dist/frappe-gantt.css vendored
View File

@ -107,7 +107,10 @@
user-select: none;
}
.gantt .bar-progress {
fill: #a3a3ff;
fill: #acacfa;
}
.gantt .bar-expected-progress {
fill: #c4c4e9;
}
.gantt .bar-invalid {
fill: transparent;
@ -144,7 +147,7 @@
fill: #a9b5c1;
}
.gantt .bar-wrapper:hover .bar-progress {
fill: #8a8aff;
fill: #9494f9;
}
.gantt .bar-wrapper:hover .handle {
visibility: visible;
@ -154,7 +157,7 @@
fill: #a9b5c1;
}
.gantt .bar-wrapper.active .bar-progress {
fill: #8a8aff;
fill: #9494f9;
}
.gantt .lower-text, .gantt .upper-text {
font-size: 12px;
@ -185,7 +188,7 @@
border-radius: 3px;
}
.gantt-container .popup-wrapper .title {
border-bottom: 3px solid #a3a3ff;
border-bottom: 3px solid #acacfa;
padding: 10px;
}
.gantt-container .popup-wrapper .subtitle {

65
dist/frappe-gantt.js vendored
View File

@ -389,12 +389,10 @@ var Gantt = (function () {
prepare_values() {
this.invalid = this.task.invalid;
this.height = this.gantt.options.bar_height;
this.x = this.compute_x();
this.y = this.compute_y();
this.compute_x();
this.compute_y();
this.compute_duration();
this.corner_radius = this.gantt.options.bar_corner_radius;
this.duration =
date_utils.diff(this.task._end, this.task._start, 'hour') /
this.gantt.options.step;
this.width = this.gantt.options.column_width * this.duration;
this.progress_width =
this.gantt.options.column_width *
@ -432,8 +430,20 @@ var Gantt = (function () {
};
}
prepare_expected_progress_values() {
this.compute_expected_progress();
this.expected_progress_width =
this.gantt.options.column_width *
this.duration *
(this.expected_progress / 100) || 0;
}
draw() {
this.draw_bar();
if (this.gantt.options.show_expected_progress) {
this.prepare_expected_progress_values();
this.draw_expected_progress_bar();
}
this.draw_progress_bar();
this.draw_label();
this.draw_resize_handles();
@ -458,6 +468,22 @@ var Gantt = (function () {
}
}
draw_expected_progress_bar() {
if (this.invalid) return;
this.$expected_bar_progress = createSVG('rect', {
x: this.x,
y: this.y,
width: this.expected_progress_width,
height: this.height,
rx: this.corner_radius,
ry: this.corner_radius,
class: 'bar-expected-progress',
append_to: this.bar_group,
});
animateSVG(this.$expected_bar_progress, 'width', 0, this.expected_progress_width);
}
draw_progress_bar() {
if (this.invalid) return;
this.$bar_progress = createSVG('rect', {
@ -607,6 +633,11 @@ var Gantt = (function () {
}
this.update_label_position();
this.update_handle_position();
if (this.gantt.options.show_expected_progress){
this.date_changed();
this.compute_duration();
this.update_expected_progressbar_position();
}
this.update_progressbar_position();
this.update_arrow_position();
}
@ -669,6 +700,11 @@ var Gantt = (function () {
return parseInt(progress, 10);
}
compute_expected_progress() {
this.expected_progress = date_utils.diff(date_utils.today(), this.task._start, 'hour') / this.gantt.options.step;
this.expected_progress = ((this.expected_progress < this.duration) ? this.expected_progress : this.duration) * 100 / this.duration;
}
compute_x() {
const { step, column_width } = this.gantt.options;
const task_start = this.task._start;
@ -681,17 +717,22 @@ var Gantt = (function () {
const diff = date_utils.diff(task_start, gantt_start, 'day');
x = (diff * column_width) / 30;
}
return x;
this.x = x;
}
compute_y() {
return (
this.y = (
this.gantt.options.header_height +
this.gantt.options.padding +
this.task._index * (this.height + this.gantt.options.padding)
);
}
compute_duration() {
this.duration = date_utils.diff(this.task._end, this.task._start, 'hour') /
this.gantt.options.step;
}
get_snap_position(dx) {
let odx = dx,
rem,
@ -733,6 +774,16 @@ var Gantt = (function () {
return element;
}
update_expected_progressbar_position() {
if (this.invalid) return;
this.$expected_bar_progress.setAttribute('x', this.$bar.getX());
this.compute_expected_progress();
this.$expected_bar_progress.setAttribute(
'width',
this.gantt.options.column_width * this.duration * (this.expected_progress / 100) || 0
);
}
update_progressbar_position() {
if (this.invalid) return;
this.$bar_progress.setAttribute('x', this.$bar.getX());

2
dist/frappe-gantt.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-gantt.min.js vendored
View File

File diff suppressed because one or more lines are too long

65
src/bar.js
View File

@ -23,12 +23,10 @@ export default class Bar {
prepare_values() {
this.invalid = this.task.invalid;
this.height = this.gantt.options.bar_height;
this.x = this.compute_x();
this.y = this.compute_y();
this.compute_x();
this.compute_y();
this.compute_duration();
this.corner_radius = this.gantt.options.bar_corner_radius;
this.duration =
date_utils.diff(this.task._end, this.task._start, 'hour') /
this.gantt.options.step;
this.width = this.gantt.options.column_width * this.duration;
this.progress_width =
this.gantt.options.column_width *
@ -66,8 +64,20 @@ export default class Bar {
};
}
prepare_expected_progress_values() {
this.compute_expected_progress();
this.expected_progress_width =
this.gantt.options.column_width *
this.duration *
(this.expected_progress / 100) || 0;
}
draw() {
this.draw_bar();
if (this.gantt.options.show_expected_progress) {
this.prepare_expected_progress_values();
this.draw_expected_progress_bar();
}
this.draw_progress_bar();
this.draw_label();
this.draw_resize_handles();
@ -92,6 +102,22 @@ export default class Bar {
}
}
draw_expected_progress_bar() {
if (this.invalid) return;
this.$expected_bar_progress = createSVG('rect', {
x: this.x,
y: this.y,
width: this.expected_progress_width,
height: this.height,
rx: this.corner_radius,
ry: this.corner_radius,
class: 'bar-expected-progress',
append_to: this.bar_group,
});
animateSVG(this.$expected_bar_progress, 'width', 0, this.expected_progress_width);
}
draw_progress_bar() {
if (this.invalid) return;
this.$bar_progress = createSVG('rect', {
@ -241,6 +267,11 @@ export default class Bar {
}
this.update_label_position();
this.update_handle_position();
if (this.gantt.options.show_expected_progress){
this.date_changed();
this.compute_duration();
this.update_expected_progressbar_position();
}
this.update_progressbar_position();
this.update_arrow_position();
}
@ -303,6 +334,11 @@ export default class Bar {
return parseInt(progress, 10);
}
compute_expected_progress() {
this.expected_progress = date_utils.diff(date_utils.today(), this.task._start, 'hour') / this.gantt.options.step;
this.expected_progress = ((this.expected_progress < this.duration) ? this.expected_progress : this.duration) * 100 / this.duration;
}
compute_x() {
const { step, column_width } = this.gantt.options;
const task_start = this.task._start;
@ -315,17 +351,22 @@ export default class Bar {
const diff = date_utils.diff(task_start, gantt_start, 'day');
x = (diff * column_width) / 30;
}
return x;
this.x = x;
}
compute_y() {
return (
this.y = (
this.gantt.options.header_height +
this.gantt.options.padding +
this.task._index * (this.height + this.gantt.options.padding)
);
}
compute_duration() {
this.duration = date_utils.diff(this.task._end, this.task._start, 'hour') /
this.gantt.options.step;
}
get_snap_position(dx) {
let odx = dx,
rem,
@ -367,6 +408,16 @@ export default class Bar {
return element;
}
update_expected_progressbar_position() {
if (this.invalid) return;
this.$expected_bar_progress.setAttribute('x', this.$bar.getX());
this.compute_expected_progress();
this.$expected_bar_progress.setAttribute(
'width',
this.gantt.options.column_width * this.duration * (this.expected_progress / 100) || 0
);
}
update_progressbar_position() {
if (this.invalid) return;
this.$bar_progress.setAttribute('x', this.$bar.getX());

21
src/gantt.scss
View File

@ -9,8 +9,9 @@ $light-yellow: #fcf8e3 !default;
$text-muted: #666 !default;
$text-light: #555 !default;
$text-color: #333 !default;
$blue: #a3a3ff !default;
$blue: #acacfa !default;
$handle-color: #ddd !default;
$light-blue: #c4c4e9 !default;
.gantt {
.grid-background {
@ -42,6 +43,21 @@ $handle-color: #ddd !default;
opacity: 0.5;
}
.week-highlight {
fill: $light-yellow;
opacity: 0.5;
}
.month-highlight {
fill: $light-yellow;
opacity: 0.5;
}
.year-highlight {
fill: $light-yellow;
opacity: 0.5;
}
.arrow {
fill: none;
stroke: $text-muted;
@ -58,6 +74,9 @@ $handle-color: #ddd !default;
.bar-progress {
fill: $blue;
}
.bar-expected-progress {
fill: $light-blue;
}
.bar-invalid {
fill: transparent;
stroke: $bar-stroke;

64
src/index.js
View File

@ -412,15 +412,46 @@ export default class Gantt {
}
}
make_grid_highlights() {
// highlight today's date
if (this.view_is(VIEW_MODE.DAY)) {
const x =
(date_utils.diff(date_utils.today(), this.gantt_start, 'hour') /
this.options.step) *
this.options.column_width;
const y = 0;
//compute the horizontal x distance
computeGridHighlightDimensions(view_mode) {
let xDist = 0;
if (this.view_is(VIEW_MODE.DAY)) {
return (date_utils.diff(date_utils.today(), this.gantt_start, 'hour') /
this.options.step) *
this.options.column_width;
}
for (let date of this.dates) {
const todayDate = new Date();
const startDate = new Date(date);
const endDate = new Date(date);
switch (view_mode) {
case VIEW_MODE.WEEK:
endDate.setDate(date.getDate() + 7);
break;
case VIEW_MODE.MONTH:
endDate.setMonth(date.getMonth() + 1);
break;
case VIEW_MODE.YEAR:
endDate.setFullYear(date.getFullYear() + 1);
break;
}
if (todayDate >= startDate && todayDate <= endDate) {
break;
} else {
xDist += this.options.column_width;
}
}
return xDist;
}
make_grid_highlights() {
// highlight today's | week's | month's | year's
if (this.view_is(VIEW_MODE.DAY) || this.view_is(VIEW_MODE.WEEK) || this.view_is(VIEW_MODE.MONTH) || this.view_is(VIEW_MODE.YEAR)) {
const x = this.computeGridHighlightDimensions(this.options.view_mode);
const y = 0;
const width = this.options.column_width;
const height =
(this.options.bar_height + this.options.padding) *
@ -428,12 +459,27 @@ export default class Gantt {
this.options.header_height +
this.options.padding / 2;
let className = '';
switch (this.options.view_mode) {
case VIEW_MODE.DAY:
className = 'today-highlight'
break;
case VIEW_MODE.WEEK:
className = 'week-highlight'
break;
case VIEW_MODE.MONTH:
className = 'month-highlight'
break;
case VIEW_MODE.YEAR:
className = 'year-highlight'
break;
}
createSVG('rect', {
x,
y,
width,
height,
class: 'today-highlight',
class: className,
append_to: this.layers.grid,
});
}