From aba84bd7150a4688a4b1243625232bb0394244e1 Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Thu, 28 Apr 2022 10:14:39 +0530 Subject: [PATCH] style: prettier formatting --- src/arrow.js | 2 +- src/bar.js | 50 ++++++++------- src/date_utils.js | 38 ++++++------ src/index.js | 131 +++++++++++++++++++-------------------- src/svg_utils.js | 10 +-- tests/date_utils.test.js | 2 - 6 files changed, 117 insertions(+), 116 deletions(-) diff --git a/src/arrow.js b/src/arrow.js index ca64a74..f1c6ad6 100644 --- a/src/arrow.js +++ b/src/arrow.js @@ -85,7 +85,7 @@ export default class Arrow { this.element = createSVG('path', { d: this.path, 'data-from': this.from_task.task.id, - 'data-to': this.to_task.task.id + 'data-to': this.to_task.task.id, }); } diff --git a/src/bar.js b/src/bar.js index c9240df..ee7ffda 100644 --- a/src/bar.js +++ b/src/bar.js @@ -36,32 +36,32 @@ export default class Bar { (this.task.progress / 100) || 0; this.group = createSVG('g', { class: 'bar-wrapper ' + (this.task.custom_class || ''), - 'data-id': this.task.id + 'data-id': this.task.id, }); this.bar_group = createSVG('g', { class: 'bar-group', - append_to: this.group + append_to: this.group, }); this.handle_group = createSVG('g', { class: 'handle-group', - append_to: this.group + append_to: this.group, }); } prepare_helpers() { - SVGElement.prototype.getX = function() { + SVGElement.prototype.getX = function () { return +this.getAttribute('x'); }; - SVGElement.prototype.getY = function() { + SVGElement.prototype.getY = function () { return +this.getAttribute('y'); }; - SVGElement.prototype.getWidth = function() { + SVGElement.prototype.getWidth = function () { return +this.getAttribute('width'); }; - SVGElement.prototype.getHeight = function() { + SVGElement.prototype.getHeight = function () { return +this.getAttribute('height'); }; - SVGElement.prototype.getEndX = function() { + SVGElement.prototype.getEndX = function () { return this.getX() + this.getWidth(); }; } @@ -82,7 +82,7 @@ export default class Bar { rx: this.corner_radius, ry: this.corner_radius, class: 'bar', - append_to: this.bar_group + append_to: this.bar_group, }); animateSVG(this.$bar, 'width', 0, this.width); @@ -102,7 +102,7 @@ export default class Bar { rx: this.corner_radius, ry: this.corner_radius, class: 'bar-progress', - append_to: this.bar_group + append_to: this.bar_group, }); animateSVG(this.$bar_progress, 'width', 0, this.progress_width); @@ -114,7 +114,7 @@ export default class Bar { y: this.y + this.height / 2, innerHTML: this.task.name, class: 'bar-label', - append_to: this.bar_group + append_to: this.bar_group, }); // labels get BBox in the next tick requestAnimationFrame(() => this.update_label_position()); @@ -134,7 +134,7 @@ export default class Bar { rx: this.corner_radius, ry: this.corner_radius, class: 'handle right', - append_to: this.handle_group + append_to: this.handle_group, }); createSVG('rect', { @@ -145,14 +145,14 @@ export default class Bar { rx: this.corner_radius, ry: this.corner_radius, class: 'handle left', - append_to: this.handle_group + append_to: this.handle_group, }); if (this.task.progress && this.task.progress < 100) { this.$handle_progress = createSVG('polygon', { points: this.get_progress_polygon_points().join(','), class: 'handle progress', - append_to: this.handle_group + append_to: this.handle_group, }); } } @@ -165,7 +165,7 @@ export default class Bar { bar_progress.getEndX() + 5, bar_progress.getY() + bar_progress.getHeight(), bar_progress.getEndX(), - bar_progress.getY() + bar_progress.getHeight() - 8.66 + bar_progress.getY() + bar_progress.getHeight() - 8.66, ]; } @@ -175,7 +175,7 @@ export default class Bar { } setup_click_event() { - $.on(this.group, 'focus ' + this.gantt.options.popup_trigger, e => { + $.on(this.group, 'focus ' + this.gantt.options.popup_trigger, (e) => { if (this.action_completed) { // just finished a move action, wait for a few seconds return; @@ -186,7 +186,7 @@ export default class Bar { this.group.classList.add('active'); }); - $.on(this.group, 'dblclick', e => { + $.on(this.group, 'dblclick', (e) => { if (this.action_completed) { // just finished a move action, wait for a few seconds return; @@ -199,7 +199,11 @@ export default class Bar { show_popup() { if (this.gantt.bar_being_dragged) return; - const start_date = date_utils.format(this.task._start, 'MMM D', this.gantt.options.language); + const start_date = date_utils.format( + this.task._start, + 'MMM D', + this.gantt.options.language + ); const end_date = date_utils.format( date_utils.add(this.task._end, -1, 'second'), 'MMM D', @@ -219,7 +223,7 @@ export default class Bar { const bar = this.$bar; if (x) { // get all x values of parent task - const xs = this.task.dependencies.map(dep => { + const xs = this.task.dependencies.map((dep) => { return this.gantt.get_bar(dep).$bar.getX(); }); // child task must not go before parent @@ -260,7 +264,7 @@ export default class Bar { this.gantt.trigger_event('date_change', [ this.task, new_start_date, - date_utils.add(new_end_date, -1, 'second') + date_utils.add(new_end_date, -1, 'second'), ]); } @@ -295,7 +299,7 @@ export default class Bar { compute_progress() { const progress = - this.$bar_progress.getWidth() / this.$bar.getWidth() * 100; + (this.$bar_progress.getWidth() / this.$bar.getWidth()) * 100; return parseInt(progress, 10); } @@ -305,11 +309,11 @@ export default class Bar { const gantt_start = this.gantt.gantt_start; const diff = date_utils.diff(task_start, gantt_start, 'hour'); - let x = diff / step * column_width; + let x = (diff / step) * column_width; if (this.gantt.view_is('Month')) { const diff = date_utils.diff(task_start, gantt_start, 'day'); - x = diff * column_width / 30; + x = (diff * column_width) / 30; } return x; } diff --git a/src/date_utils.js b/src/date_utils.js index a51feca..f7d95b2 100644 --- a/src/date_utils.js +++ b/src/date_utils.js @@ -19,7 +19,7 @@ const month_names = { 'September', 'October', 'November', - 'December' + 'December', ], es: [ 'Enero', @@ -33,7 +33,7 @@ const month_names = { 'Septiembre', 'Octubre', 'Noviembre', - 'Diciembre' + 'Diciembre', ], ru: [ 'Январь', @@ -47,7 +47,7 @@ const month_names = { 'Сентябрь', 'Октябрь', 'Ноябрь', - 'Декабрь' + 'Декабрь', ], ptBr: [ 'Janeiro', @@ -61,7 +61,7 @@ const month_names = { 'Setembro', 'Outubro', 'Novembro', - 'Dezembro' + 'Dezembro', ], fr: [ 'Janvier', @@ -75,7 +75,7 @@ const month_names = { 'Septembre', 'Octobre', 'Novembre', - 'Décembre' + 'Décembre', ], tr: [ 'Ocak', @@ -89,7 +89,7 @@ const month_names = { 'Eylül', 'Ekim', 'Kasım', - 'Aralık' + 'Aralık', ], zh: [ '一月', @@ -103,8 +103,8 @@ const month_names = { '九月', '十月', '十一月', - '十二月' - ] + '十二月', + ], }; export default { @@ -118,7 +118,7 @@ export default { date_parts = parts[0] .split(date_separator) - .map(val => parseInt(val, 10)); + .map((val) => parseInt(val, 10)); time_parts = parts[1] && parts[1].split(time_separator); // month is 0 indexed @@ -161,7 +161,7 @@ export default { }, format(date, format_string = 'YYYY-MM-DD HH:mm:ss.SSS', lang = 'en') { - const values = this.get_date_values(date).map(d => padStart(d, 2, 0)); + const values = this.get_date_values(date).map((d) => padStart(d, 2, 0)); const format_map = { YYYY: values[0], MM: padStart(+values[1] + 1, 2, 0), @@ -169,10 +169,10 @@ export default { HH: values[3], mm: values[4], ss: values[5], - SSS:values[6], + SSS: values[6], D: values[2], MMMM: month_names[lang][+values[1]], - MMM: month_names[lang][+values[1]] + MMM: month_names[lang][+values[1]], }; let str = format_string; @@ -180,7 +180,7 @@ export default { Object.keys(format_map) .sort((a, b) => b.length - a.length) // big string first - .forEach(key => { + .forEach((key) => { if (str.includes(key)) { str = str.replace(key, `$${formatted_values.length}`); formatted_values.push(format_map[key]); @@ -217,7 +217,7 @@ export default { hours, days, months, - years + years, }[scale] ); }, @@ -240,7 +240,7 @@ export default { date.getHours() + (scale === HOUR ? qty : 0), date.getMinutes() + (scale === MINUTE ? qty : 0), date.getSeconds() + (scale === SECOND ? qty : 0), - date.getMilliseconds() + (scale === MILLISECOND ? qty : 0) + date.getMilliseconds() + (scale === MILLISECOND ? qty : 0), ]; return new Date(...vals); }, @@ -253,7 +253,7 @@ export default { [HOUR]: 3, [MINUTE]: 2, [SECOND]: 1, - [MILLISECOND]: 0 + [MILLISECOND]: 0, }; function should_reset(_scale) { @@ -268,7 +268,7 @@ export default { should_reset(DAY) ? 0 : date.getHours(), should_reset(HOUR) ? 0 : date.getMinutes(), should_reset(MINUTE) ? 0 : date.getSeconds(), - should_reset(SECOND) ? 0 : date.getMilliseconds() + should_reset(SECOND) ? 0 : date.getMilliseconds(), ]; return new Date(...vals); @@ -286,7 +286,7 @@ export default { date.getHours(), date.getMinutes(), date.getSeconds(), - date.getMilliseconds() + date.getMilliseconds(), ]; }, @@ -305,7 +305,7 @@ export default { return 29; } return 28; - } + }, }; // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart diff --git a/src/index.js b/src/index.js index 68b6af1..6d005af 100644 --- a/src/index.js +++ b/src/index.js @@ -12,7 +12,7 @@ const VIEW_MODE = { DAY: 'Day', WEEK: 'Week', MONTH: 'Month', - YEAR: 'Year' + YEAR: 'Year', }; export default class Gantt { @@ -51,7 +51,7 @@ export default class Gantt { // create it this.$svg = createSVG('svg', { append_to: wrapper_element, - class: 'gantt' + class: 'gantt', }); } else { this.$svg = svg_element; @@ -86,7 +86,7 @@ export default class Gantt { date_format: 'YYYY-MM-DD', popup_trigger: 'click', custom_popup_html: null, - language: 'en' + language: 'en', }; this.options = Object.assign({}, default_options, options); } @@ -124,7 +124,7 @@ export default class Gantt { // if hours is not set, assume the last day is full day // e.g: 2018-09-09 becomes 2018-09-09 23:59:59 const task_end_values = date_utils.get_date_values(task._end); - if (task_end_values.slice(3).every(d => d === 0)) { + if (task_end_values.slice(3).every((d) => d === 0)) { task._end = date_utils.add(task._end, 24, 'hour'); } @@ -139,8 +139,8 @@ export default class Gantt { if (task.dependencies) { deps = task.dependencies .split(',') - .map(d => d.trim()) - .filter(d => d); + .map((d) => d.trim()) + .filter((d) => d); } task.dependencies = deps; } @@ -288,7 +288,7 @@ export default class Gantt { for (let layer of layers) { this.layers[layer] = createSVG('g', { class: layer, - append_to: this.$svg + append_to: this.$svg, }); } } @@ -315,12 +315,12 @@ export default class Gantt { width: grid_width, height: grid_height, class: 'grid-background', - append_to: this.layers.grid + append_to: this.layers.grid, }); $.attr(this.$svg, { height: grid_height + this.options.padding + 100, - width: '100%' + width: '100%', }); } @@ -340,7 +340,7 @@ export default class Gantt { width: row_width, height: row_height, class: 'grid-row', - append_to: rows_layer + append_to: rows_layer, }); createSVG('line', { @@ -349,7 +349,7 @@ export default class Gantt { x2: row_width, y2: row_y + row_height, class: 'row-line', - append_to: lines_layer + append_to: lines_layer, }); row_y += this.options.bar_height + this.options.padding; @@ -365,7 +365,7 @@ export default class Gantt { width: header_width, height: header_height, class: 'grid-header', - append_to: this.layers.grid + append_to: this.layers.grid, }); } @@ -391,20 +391,23 @@ export default class Gantt { tick_class += ' thick'; } // thick ticks for quarters - if (this.view_is(VIEW_MODE.MONTH) && (date.getMonth() + 1) % 3 === 0) { + if ( + this.view_is(VIEW_MODE.MONTH) && + (date.getMonth() + 1) % 3 === 0 + ) { tick_class += ' thick'; } createSVG('path', { d: `M ${tick_x} ${tick_y} v ${tick_height}`, class: tick_class, - append_to: this.layers.grid + append_to: this.layers.grid, }); if (this.view_is(VIEW_MODE.MONTH)) { tick_x += - date_utils.get_days_in_month(date) * - this.options.column_width / + (date_utils.get_days_in_month(date) * + this.options.column_width) / 30; } else { tick_x += this.options.column_width; @@ -416,8 +419,8 @@ export default class Gantt { // 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 * + (date_utils.diff(date_utils.today(), this.gantt_start, 'hour') / + this.options.step) * this.options.column_width; const y = 0; @@ -434,7 +437,7 @@ export default class Gantt { width, height, class: 'today-highlight', - append_to: this.layers.grid + append_to: this.layers.grid, }); } } @@ -446,7 +449,7 @@ export default class Gantt { y: date.lower_y, innerHTML: date.lower_text, class: 'lower-text', - append_to: this.layers.date + append_to: this.layers.date, }); if (date.upper_text) { @@ -455,7 +458,7 @@ export default class Gantt { y: date.upper_y, innerHTML: date.upper_text, class: 'upper-text', - append_to: this.layers.date + append_to: this.layers.date, }); // remove out-of-bound dates @@ -510,8 +513,12 @@ export default class Gantt { 'Half Day_upper': date.getDate() !== last_date.getDate() ? date.getMonth() !== last_date.getMonth() - ? date_utils.format(date, 'D MMM', this.options.language) - : date_utils.format(date, 'D', this.options.language) + ? date_utils.format( + date, + 'D MMM', + this.options.language + ) + : date_utils.format(date, 'D', this.options.language) : '', Day_upper: date.getMonth() !== last_date.getMonth() @@ -528,28 +535,28 @@ export default class Gantt { Year_upper: date.getFullYear() !== last_date.getFullYear() ? date_utils.format(date, 'YYYY', this.options.language) - : '' + : '', }; const base_pos = { x: i * this.options.column_width, lower_y: this.options.header_height, - upper_y: this.options.header_height - 25 + upper_y: this.options.header_height - 25, }; const x_pos = { - 'Quarter Day_lower': this.options.column_width * 4 / 2, + 'Quarter Day_lower': (this.options.column_width * 4) / 2, 'Quarter Day_upper': 0, - 'Half Day_lower': this.options.column_width * 2 / 2, + 'Half Day_lower': (this.options.column_width * 2) / 2, 'Half Day_upper': 0, Day_lower: this.options.column_width / 2, - Day_upper: this.options.column_width * 30 / 2, + Day_upper: (this.options.column_width * 30) / 2, Week_lower: 0, - Week_upper: this.options.column_width * 4 / 2, + Week_upper: (this.options.column_width * 4) / 2, Month_lower: this.options.column_width / 2, - Month_upper: this.options.column_width * 12 / 2, + Month_upper: (this.options.column_width * 12) / 2, Year_lower: this.options.column_width / 2, - Year_upper: this.options.column_width * 30 / 2 + Year_upper: (this.options.column_width * 30) / 2, }; return { @@ -558,12 +565,12 @@ export default class Gantt { upper_x: base_pos.x + x_pos[`${this.options.view_mode}_upper`], upper_y: base_pos.upper_y, lower_x: base_pos.x + x_pos[`${this.options.view_mode}_lower`], - lower_y: base_pos.lower_y + lower_y: base_pos.lower_y, }; } make_bars() { - this.bars = this.tasks.map(task => { + this.bars = this.tasks.map((task) => { const bar = new Bar(this, task); this.layers.bar.appendChild(bar.group); return bar; @@ -575,7 +582,7 @@ export default class Gantt { for (let task of this.tasks) { let arrows = []; arrows = task.dependencies - .map(task_id => { + .map((task_id) => { const dependency = this.get_task(task_id); if (!dependency) return; const arrow = new Arrow( @@ -593,7 +600,7 @@ export default class Gantt { map_arrows_on_bars() { for (let bar of this.bars) { - bar.arrows = this.arrows.filter(arrow => { + bar.arrows = this.arrows.filter((arrow) => { return ( arrow.from_task.task.id === bar.task.id || arrow.to_task.task.id === bar.task.id @@ -623,8 +630,7 @@ export default class Gantt { ); const scroll_pos = - hours_before_first_task / - this.options.step * + (hours_before_first_task / this.options.step) * this.options.column_width - this.options.column_width; @@ -676,13 +682,13 @@ export default class Gantt { parent_bar_id = bar_wrapper.getAttribute('data-id'); const ids = [ parent_bar_id, - ...this.get_all_dependent_tasks(parent_bar_id) + ...this.get_all_dependent_tasks(parent_bar_id), ]; - bars = ids.map(id => this.get_bar(id)); + bars = ids.map((id) => this.get_bar(id)); this.bar_being_dragged = parent_bar_id; - bars.forEach(bar => { + bars.forEach((bar) => { const $bar = bar.$bar; $bar.ox = $bar.getX(); $bar.oy = $bar.getY(); @@ -691,12 +697,12 @@ export default class Gantt { }); }); - $.on(this.$svg, 'mousemove', e => { + $.on(this.$svg, 'mousemove', (e) => { if (!action_in_progress()) return; const dx = e.offsetX - x_on_start; const dy = e.offsetY - y_on_start; - bars.forEach(bar => { + bars.forEach((bar) => { const $bar = bar.$bar; $bar.finaldx = this.get_snap_position(dx); this.hide_popup(); @@ -704,17 +710,17 @@ export default class Gantt { if (parent_bar_id === bar.task.id) { bar.update_bar_position({ x: $bar.ox + $bar.finaldx, - width: $bar.owidth - $bar.finaldx + width: $bar.owidth - $bar.finaldx, }); } else { bar.update_bar_position({ - x: $bar.ox + $bar.finaldx + x: $bar.ox + $bar.finaldx, }); } } else if (is_resizing_right) { if (parent_bar_id === bar.task.id) { bar.update_bar_position({ - width: $bar.owidth + $bar.finaldx + width: $bar.owidth + $bar.finaldx, }); } } else if (is_dragging) { @@ -723,9 +729,9 @@ export default class Gantt { }); }); - document.addEventListener('mouseup', e => { + document.addEventListener('mouseup', (e) => { if (is_dragging || is_resizing_left || is_resizing_right) { - bars.forEach(bar => bar.group.classList.remove('active')); + bars.forEach((bar) => bar.group.classList.remove('active')); } is_dragging = false; @@ -733,9 +739,9 @@ export default class Gantt { is_resizing_right = false; }); - $.on(this.$svg, 'mouseup', e => { + $.on(this.$svg, 'mouseup', (e) => { this.bar_being_dragged = null; - bars.forEach(bar => { + bars.forEach((bar) => { const $bar = bar.$bar; if (!$bar.finaldx) return; bar.date_changed(); @@ -772,7 +778,7 @@ export default class Gantt { $bar_progress.max_dx = $bar.getWidth() - $bar_progress.getWidth(); }); - $.on(this.$svg, 'mousemove', e => { + $.on(this.$svg, 'mousemove', (e) => { if (!is_resizing) return; let dx = e.offsetX - x_on_start; let dy = e.offsetY - y_on_start; @@ -808,7 +814,7 @@ export default class Gantt { }, []); out = out.concat(deps); - to_process = deps.filter(d => !to_process.includes(d)); + to_process = deps.filter((d) => !to_process.includes(d)); } return out.filter(Boolean); @@ -848,7 +854,7 @@ export default class Gantt { } unselect_all() { - [...this.$svg.querySelectorAll('.bar-wrapper')].forEach(el => { + [...this.$svg.querySelectorAll('.bar-wrapper')].forEach((el) => { el.classList.remove('active'); }); } @@ -859,20 +865,20 @@ export default class Gantt { } if (Array.isArray(modes)) { - return modes.some(mode => this.options.view_mode === mode); + return modes.some((mode) => this.options.view_mode === mode); } return false; } get_task(id) { - return this.tasks.find(task => { + return this.tasks.find((task) => { return task.id === id; }); } get_bar(id) { - return this.bars.find(bar => { + return this.bars.find((bar) => { return bar.task.id === id; }); } @@ -905,10 +911,9 @@ export default class Gantt { */ get_oldest_starting_date() { return this.tasks - .map(task => task._start) - .reduce( - (prev_date, cur_date) => - cur_date <= prev_date ? cur_date : prev_date + .map((task) => task._start) + .reduce((prev_date, cur_date) => + cur_date <= prev_date ? cur_date : prev_date ); } @@ -925,11 +930,5 @@ export default class Gantt { Gantt.VIEW_MODE = VIEW_MODE; function generate_id(task) { - return ( - task.name + - '_' + - Math.random() - .toString(36) - .slice(2, 12) - ); + return task.name + '_' + Math.random().toString(36).slice(2, 12); } diff --git a/src/svg_utils.js b/src/svg_utils.js index 44add70..f58c319 100644 --- a/src/svg_utils.js +++ b/src/svg_utils.js @@ -47,7 +47,7 @@ function getAnimationElement( from, to, dur, - begin: 'click + ' + begin // artificial click + begin: 'click + ' + begin, // artificial click }); return svgElement; } @@ -61,7 +61,7 @@ function getAnimationElement( calcMode: 'spline', values: from + ';' + to, keyTimes: '0; 1', - keySplines: cubic_bezier('ease-out') + keySplines: cubic_bezier('ease-out'), }); svgElement.appendChild(animateElement); @@ -74,7 +74,7 @@ function cubic_bezier(name) { linear: '0 0 1 1', 'ease-in': '.42 0 1 1', 'ease-out': '0 0 .58 1', - 'ease-in-out': '.42 0 .58 1' + 'ease-in-out': '.42 0 .58 1', }[name]; } @@ -92,13 +92,13 @@ $.off = (element, event, handler) => { }; $.bind = (element, event, callback) => { - event.split(/\s+/).forEach(function(event) { + event.split(/\s+/).forEach(function (event) { element.addEventListener(event, callback); }); }; $.delegate = (element, event, selector, callback) => { - element.addEventListener(event, function(e) { + element.addEventListener(event, function (e) { const delegatedTarget = e.target.closest(selector); if (delegatedTarget) { e.delegatedTarget = delegatedTarget; diff --git a/tests/date_utils.test.js b/tests/date_utils.test.js index a29768e..93033bf 100644 --- a/tests/date_utils.test.js +++ b/tests/date_utils.test.js @@ -122,5 +122,3 @@ test('format', () => { const date = date_utils.parse('2016-02-29 16:08:34.3'); expect(date_utils.format(date)).toBe('2016-02-29 16:08:34.300'); }); - -