jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

remove VIEW_MODE usages, fix bugs

Browse Source
This commit is contained in:
safwansamsudeen 2024-12-02 12:51:34 +05:30
parent c13c0cde4d
commit fc71da6550
3 changed files with 66 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/date_utils.js
View File

@ -251,6 +251,10 @@ export default {
} }
return 28; return 28;
}, },
get_days_in_year(date) {
return date.getFullYear() % 4 ? 365 : 366;
},
}; };
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

4
src/defaults.js
View File

@ -38,6 +38,7 @@ const DEFAULT_VIEW_MODES = [
{ {
name: 'Day', name: 'Day',
padding: '14d', padding: '14d',
format_string: 'YYYY-MM-DD',
step: '1d', step: '1d',
lower_text: (d, ld, lang) => lower_text: (d, ld, lang) =>
d.getDate() !== ld.getDate() ? date_utils.format(d, 'D', lang) : '', d.getDate() !== ld.getDate() ? date_utils.format(d, 'D', lang) : '',
@ -45,6 +46,7 @@ const DEFAULT_VIEW_MODES = [
d.getMonth() !== ld.getMonth() d.getMonth() !== ld.getMonth()
? date_utils.format(d, 'MMMM', lang) ? date_utils.format(d, 'MMMM', lang)
: '', : '',
thick_line: (d) => d.getDay() === 1,
}, },
{ {
name: 'Week', name: 'Week',
@ -59,6 +61,7 @@ const DEFAULT_VIEW_MODES = [
d.getMonth() !== ld.getMonth() d.getMonth() !== ld.getMonth()
? date_utils.format(d, 'MMMM', lang) ? date_utils.format(d, 'MMMM', lang)
: '', : '',
thick_line: (d) => d.getDate() >= 1 && d.getDate() <= 7,
}, },
{ {
name: 'Month', name: 'Month',
@ -71,6 +74,7 @@ const DEFAULT_VIEW_MODES = [
d.getMonth() !== ld.getMonth() d.getMonth() !== ld.getMonth()
? date_utils.format(d, 'YYYY', lang) ? date_utils.format(d, 'YYYY', lang)
: '', : '',
thick_line: (d) => d.getMonth() % 3 === 0,
}, },
{ {
name: 'Year', name: 'Year',

158
src/index.js
View File

@ -9,16 +9,6 @@ import { DEFAULT_OPTIONS, DEFAULT_VIEW_MODES } from './defaults';
import './gantt.css'; import './gantt.css';
const VIEW_MODE = {
HOUR: DEFAULT_VIEW_MODES[0],
QUARTER_DAY: DEFAULT_VIEW_MODES[1],
HALF_DAY: DEFAULT_VIEW_MODES[2],
DAY: DEFAULT_VIEW_MODES[3],
WEEK: DEFAULT_VIEW_MODES[4],
MONTH: DEFAULT_VIEW_MODES[5],
YEAR: DEFAULT_VIEW_MODES[6],
};
export default class Gantt { export default class Gantt {
constructor(wrapper, tasks, options) { constructor(wrapper, tasks, options) {
this.setup_wrapper(wrapper); this.setup_wrapper(wrapper);
@ -398,10 +388,10 @@ export default class Gantt {
$el.textContent = 'Mode'; $el.textContent = 'Mode';
$select.appendChild($el); $select.appendChild($el);
for (const key in VIEW_MODE) { for (const mode of this.options.view_modes) {
const $option = document.createElement('option'); const $option = document.createElement('option');
$option.value = VIEW_MODE[key]; $option.value = mode.name;
$option.textContent = VIEW_MODE[key]; $option.textContent = mode.name;
$select.appendChild($option); $select.appendChild($option);
} }
@ -473,8 +463,7 @@ export default class Gantt {
} }
make_grid_ticks() { make_grid_ticks() {
if (!['both', 'vertical', 'horizontal'].includes(this.options.lines)) if (this.options.lines === 'none') return;
return;
let tick_x = 0; let tick_x = 0;
let tick_y = this.options.header_height + this.options.padding / 2; let tick_y = this.options.header_height + this.options.padding / 2;
let tick_height = let tick_height =
@ -504,34 +493,32 @@ export default class Gantt {
} }
} }
if (this.options.lines === 'horizontal') return; if (this.options.lines === 'horizontal') return;
for (let date of this.dates) { for (let date of this.dates) {
let tick_class = 'tick'; let tick_class = 'tick';
// thick tick for monday
if (this.view_is(VIEW_MODE.DAY) && date.getDate() === 1) {
tick_class += ' thick';
}
// thick tick for first week
if ( if (
this.view_is(VIEW_MODE.WEEK) && this.config.view_mode.thick_line &&
date.getDate() >= 1 && this.config.view_mode.thick_line(date)
date.getDate() < 8
) { ) {
tick_class += ' thick'; tick_class += ' thick';
} }
// thick ticks for quarters
if (this.view_is(VIEW_MODE.MONTH) && date.getMonth() % 3 === 0) {
tick_class += ' thick';
}
createSVG('path', { createSVG('path', {
d: `M ${tick_x} ${tick_y} v ${tick_height}`, d: `M ${tick_x} ${tick_y} v ${tick_height}`,
class: tick_class, class: tick_class,
append_to: this.layers.grid, append_to: this.layers.grid,
}); });
if (this.view_is(VIEW_MODE.MONTH)) {
if (this.view_is('month')) {
tick_x += tick_x +=
(date_utils.get_days_in_month(date) * (date_utils.get_days_in_month(date) *
this.config.column_width) / this.config.column_width) /
30; 30;
} else if (this.view_is('year')) {
tick_x +=
(date_utils.get_days_in_year(date) *
this.config.column_width) /
365;
} else { } else {
tick_x += this.config.column_width; tick_x += this.config.column_width;
} }
@ -539,6 +526,7 @@ export default class Gantt {
} }
highlightWeekends() { highlightWeekends() {
// FIX
if (!this.view_is('Day') && !this.view_is('Half Day')) return; if (!this.view_is('Day') && !this.view_is('Half Day')) return;
for ( for (
let d = new Date(this.gantt_start); let d = new Date(this.gantt_start);
@ -575,81 +563,41 @@ export default class Gantt {
computeGridHighlightDimensions(view_mode) { computeGridHighlightDimensions(view_mode) {
const today = new Date(); const today = new Date();
if (today < this.gantt_start || today > this.gantt_end) return null; if (today < this.gantt_start || today > this.gantt_end) return null;
if (this.view_is(VIEW_MODE.DAY)) { let diff_in_units = date_utils.diff(
let diff_in_units = date_utils.diff( today,
today, this.gantt_start,
this.gantt_start, this.config.unit,
this.config.unit, );
); return {
return { x: (diff_in_units / this.config.step) * this.config.column_width,
x: date: date_utils.format(today, this.config.view_mode.format_string),
(diff_in_units / this.config.step) * };
this.config.column_width,
date: today,
};
}
let x = 0;
for (let date of this.dates) {
const todayDate = new Date();
const startDate = new Date(date);
const endDate = new Date(date);
switch (view_mode.name) {
case VIEW_MODE.WEEK.name:
endDate.setDate(date.getDate() + 7);
break;
case VIEW_MODE.MONTH.name:
endDate.setMonth(date.getMonth() + 1);
break;
case VIEW_MODE.YEAR.name:
endDate.setFullYear(date.getFullYear() + 1);
break;
}
if (todayDate >= startDate && todayDate <= endDate) {
return { x, date: startDate };
} else {
x += this.config.column_width;
}
}
return { x };
} }
make_grid_highlights() { make_grid_highlights() {
if (this.options.highlight_weekend) this.highlightWeekends(); if (this.options.highlight_weekend) this.highlightWeekends();
// highlight today's | week's | month's | year's const highlightDimensions = this.computeGridHighlightDimensions(
if ( this.config.view_mode,
this.view_is(VIEW_MODE.DAY) || );
this.view_is(VIEW_MODE.WEEK) || if (!highlightDimensions) return;
this.view_is(VIEW_MODE.MONTH) || const { x: left, date } = highlightDimensions;
this.view_is(VIEW_MODE.YEAR)
) { const top = this.options.header_height + this.options.padding / 2;
// Used as we must find the _end_ of session if view is not Day const height =
const highlightDimensions = this.computeGridHighlightDimensions( (this.options.bar_height + this.options.padding) *
this.config.view_mode, this.tasks.length;
); this.$current_highlight = this.create_el({
if (!highlightDimensions) return; top,
const { x: left, date } = highlightDimensions; left,
const top = this.options.header_height + this.options.padding / 2; height,
const height = classes: 'current-highlight',
(this.options.bar_height + this.options.padding) * append_to: this.$container,
this.tasks.length; });
this.$current_highlight = this.create_el({ let $today = document.getElementById(date.replaceAll(' ', '_'));
top, if ($today) {
left, $today.classList.add('current-date-highlight');
height, $today.style.top = +$today.style.top.slice(0, -2) - 4 + 'px';
classes: 'current-highlight',
append_to: this.$container,
});
let $today = document.getElementById(
date_utils.format(date).replaceAll(' ', '_'),
);
if ($today) {
$today.classList.add('current-date-highlight');
$today.style.top = +$today.style.top.slice(0, -2) - 4 + 'px';
$today.style.left = +$today.style.left.slice(0, -2) - 8 + 'px';
}
} }
} }
@ -742,7 +690,9 @@ export default class Gantt {
return { return {
date, date,
formatted_date: date_utils.format(date).replaceAll(' ', '_'), formatted_date: date_utils
.format(date, this.config.view_mode.format_string)
.replaceAll(' ', '_'),
column_width: this.config.column_width, column_width: this.config.column_width,
base_pos_x: base_pos.x, base_pos_x: base_pos.x,
upper_text: upper_text:
@ -1198,7 +1148,15 @@ export default class Gantt {
} }
} }
Gantt.VIEW_MODE = VIEW_MODE; Gantt.VIEW_MODE = {
HOUR: DEFAULT_VIEW_MODES[0],
QUARTER_DAY: DEFAULT_VIEW_MODES[1],
HALF_DAY: DEFAULT_VIEW_MODES[2],
DAY: DEFAULT_VIEW_MODES[3],
WEEK: DEFAULT_VIEW_MODES[4],
MONTH: DEFAULT_VIEW_MODES[5],
YEAR: DEFAULT_VIEW_MODES[6],
};
function generate_id(task) { function generate_id(task) {
return task.name + '_' + Math.random().toString(36).slice(2, 12); return task.name + '_' + Math.random().toString(36).slice(2, 12);