From d3b4a2fa065677bdce17cb30c4845f1d36772023 Mon Sep 17 00:00:00 2001 From: safwansamsudeen Date: Thu, 28 Nov 2024 17:23:48 +0530 Subject: [PATCH] chore: format --- dist/frappe-gantt.es.js | 78 +++++++++++++--- src/index.js | 194 ++++++++++++++++++++++++++-------------- 2 files changed, 195 insertions(+), 77 deletions(-) diff --git a/dist/frappe-gantt.es.js b/dist/frappe-gantt.es.js index 9ec6068e..f0344cc2 100644 --- a/dist/frappe-gantt.es.js +++ b/dist/frappe-gantt.es.js @@ -716,9 +716,13 @@ class F { } setup_options(t) { this.options = { ...B, ...t }; - const e = this.options.custom_view_modes ? this.options.custom_view_modes.find((s) => s.name === this.options.view_mode) : null; + const e = this.options.custom_view_modes ? this.options.custom_view_modes.find( + (s) => s.name === this.options.view_mode + ) : null; e && (this.options = { ...this.options, custom_mode: e }), this.options.view_mode_padding || (this.options.view_mode_padding = {}); - for (let [s, i] of Object.entries(this.options.view_mode_padding)) + for (let [s, i] of Object.entries( + this.options.view_mode_padding + )) typeof i == "string" && (this.options.view_mode_padding[s] = [i, i]); this.options.view_mode_padding = { ...R, @@ -772,9 +776,15 @@ class F { let t, e; this.gantt_start ? t = h.start_of(this.gantt_start, "day") : t = /* @__PURE__ */ new Date(), this.gantt_end ? e = h.start_of(this.gantt_end, "day") : e = /* @__PURE__ */ new Date(); const s = this.options.custom_mode; - let [i, o] = [{ duration: 1, scale: "day" }, { duration: 1, scale: "day" }]; + let [i, o] = [ + { duration: 1, scale: "day" }, + { duration: 1, scale: "day" } + ]; if (s) - [i, o] = [s.padding, s.padding].map(h.parse_duration); + [i, o] = [ + s.padding, + s.padding + ].map(h.parse_duration); else { let a; for (let [p, d] of Object.entries(_)) @@ -1033,10 +1043,30 @@ class F { if (o) { let d, l; const g = o ? o.unit.toLowerCase() : "day"; - g === "hour" ? (d = h.format(t, "HH", this.options.language), l = t.getDate() !== s.getDate() ? h.format(t, "D MMMM", this.options.language) : "") : g === "day" ? (d = t.getDate() !== s.getDate() ? h.format(t, "D", this.options.language) : "", l = t.getMonth() !== s.getMonth() || !e ? h.format(t, "MMMM", this.options.language) : "") : g === "month" ? (d = h.format(t, "MMMM", this.options.language), l = t.getFullYear() !== s.getFullYear() ? h.format(t, "YYYY", this.options.language) : "") : (d = h.format(t, "YYYY", this.options.language), l = ""), i[`${o.name}_upper`] = l, i[`${o.name}_lower`] = d; + g === "hour" ? (d = h.format( + t, + "HH", + this.options.language + ), l = t.getDate() !== s.getDate() ? h.format( + t, + "D MMMM", + this.options.language + ) : "") : g === "day" ? (d = t.getDate() !== s.getDate() ? h.format(t, "D", this.options.language) : "", l = t.getMonth() !== s.getMonth() || !e ? h.format(t, "MMMM", this.options.language) : "") : g === "month" ? (d = h.format( + t, + "MMMM", + this.options.language + ), l = t.getFullYear() !== s.getFullYear() ? h.format(t, "YYYY", this.options.language) : "") : (d = h.format( + t, + "YYYY", + this.options.language + ), l = ""), i[`${o.name}_upper`] = l, i[`${o.name}_lower`] = d; } else i = { - Hour_lower: h.format(t, "HH", this.options.language), + Hour_lower: h.format( + t, + "HH", + this.options.language + ), "Quarter Day_lower": h.format( t, "HH", @@ -1048,16 +1078,40 @@ class F { this.options.language ), Day_lower: t.getDate() !== s.getDate() ? h.format(t, "D", this.options.language) : "", - Week_lower: t.getMonth() !== s.getMonth() ? h.format(t, "D MMM", this.options.language) : h.format(t, "D", this.options.language), - Month_lower: h.format(t, "MMMM", this.options.language), - Year_lower: h.format(t, "YYYY", this.options.language), - Hour_upper: t.getDate() !== s.getDate() ? h.format(t, "D MMMM", this.options.language) : "", - "Quarter Day_upper": t.getDate() !== s.getDate() ? h.format(t, "D MMM", this.options.language) : "", + Week_lower: t.getMonth() !== s.getMonth() ? h.format( + t, + "D MMM", + this.options.language + ) : h.format(t, "D", this.options.language), + Month_lower: h.format( + t, + "MMMM", + this.options.language + ), + Year_lower: h.format( + t, + "YYYY", + this.options.language + ), + Hour_upper: t.getDate() !== s.getDate() ? h.format( + t, + "D MMMM", + this.options.language + ) : "", + "Quarter Day_upper": t.getDate() !== s.getDate() ? h.format( + t, + "D MMM", + this.options.language + ) : "", "Half Day_upper": t.getDate() !== s.getDate() ? t.getMonth() !== s.getMonth() ? h.format( t, "D MMM", this.options.language - ) : h.format(t, "D", this.options.language) : "", + ) : h.format( + t, + "D", + this.options.language + ) : "", Day_upper: t.getMonth() !== s.getMonth() || !e ? h.format(t, "MMMM", this.options.language) : "", Week_upper: t.getMonth() !== s.getMonth() ? h.format(t, "MMMM", this.options.language) : "", Month_upper: t.getFullYear() !== s.getFullYear() ? h.format(t, "YYYY", this.options.language) : "", diff --git a/src/index.js b/src/index.js index cf8844d4..e262fe8e 100644 --- a/src/index.js +++ b/src/index.js @@ -111,10 +111,17 @@ export default class Gantt { setup_options(options) { this.options = { ...DEFAULT_OPTIONS, ...options }; - const custom_mode = this.options.custom_view_modes ? this.options.custom_view_modes.find(m => m.name === this.options.view_mode) : null; - if (custom_mode) this.options = {...this.options, custom_mode} - if (!this.options.view_mode_padding) this.options.view_mode_padding = {}; - for (let [key, value] of Object.entries(this.options.view_mode_padding)) { + const custom_mode = this.options.custom_view_modes + ? this.options.custom_view_modes.find( + (m) => m.name === this.options.view_mode, + ) + : null; + if (custom_mode) this.options = { ...this.options, custom_mode }; + if (!this.options.view_mode_padding) + this.options.view_mode_padding = {}; + for (let [key, value] of Object.entries( + this.options.view_mode_padding, + )) { if (typeof value === 'string') { // Configure for single value given this.options.view_mode_padding[key] = [value, value]; @@ -125,7 +132,6 @@ export default class Gantt { ...VIEW_MODE_PADDING, ...options.view_mode_padding, }; - } setup_tasks(tasks) { @@ -237,19 +243,19 @@ export default class Gantt { update_view_scale(view_mode) { this.options.view_mode = view_mode; - const custom_mode = this.options.custom_mode - if (custom_mode) {//configure step and column width for custom view case - if (custom_mode.unit === "hour") { + const custom_mode = this.options.custom_mode; + if (custom_mode) { + //configure step and column width for custom view case + if (custom_mode.unit === 'hour') { this.options.step = custom_mode.step; this.options.column_width = 38; - } else if (custom_mode.unit === "day") { - this.options.step = custom_mode.step * 24; + } else if (custom_mode.unit === 'day') { + this.options.step = custom_mode.step * 24; this.options.column_width = 38; - } else if (custom_mode.unit === "month") { + } else if (custom_mode.unit === 'month') { this.options.step = custom_mode.step * 24 * 30; this.options.column_width = 120; - } - else { + } else { this.options.step = 24; this.options.column_width = 38; } @@ -301,12 +307,17 @@ export default class Gantt { if (!this.gantt_end) gantt_end = new Date(); else gantt_end = date_utils.start_of(this.gantt_end, 'day'); - const custom_mode = this.options.custom_mode - let [padding_start, padding_end] = [{duration: 1, scale: 'day'},{duration: 1, scale: 'day'}] + const custom_mode = this.options.custom_mode; + let [padding_start, padding_end] = [ + { duration: 1, scale: 'day' }, + { duration: 1, scale: 'day' }, + ]; if (custom_mode) { - [padding_start, padding_end] = [custom_mode.padding, custom_mode.padding].map(date_utils.parse_duration) - } - else { + [padding_start, padding_end] = [ + custom_mode.padding, + custom_mode.padding, + ].map(date_utils.parse_duration); + } else { let viewKey; for (let [key, value] of Object.entries(VIEW_MODE)) { if (value === this.options.view_mode) { @@ -350,16 +361,15 @@ export default class Gantt { while (cur_date === null || cur_date < this.gantt_end) { if (this.options.custom_mode) { - const step = this.options.custom_mode.step || 1; - const unit = this.options.custom_mode.unit || 'day'; - + const step = this.options.custom_mode.step || 1; + const unit = this.options.custom_mode.unit || 'day'; + if (!cur_date) { cur_date = date_utils.clone(this.gantt_start); } else { cur_date = date_utils.add(cur_date, step, unit); } - } - else { + } else { if (!cur_date) { cur_date = date_utils.clone(this.gantt_start); } else { @@ -447,7 +457,7 @@ export default class Gantt { make_grid_rows() { const rows_layer = createSVG('g', { append_to: this.layers.grid }); - + const row_width = this.dates.length * this.options.column_width; const row_height = this.options.bar_height + this.options.padding; @@ -484,7 +494,7 @@ export default class Gantt { $upper_header.classList.add('upper-header'); this.$upper_header = $upper_header; this.$header.appendChild($upper_header); - + let $lower_header = document.createElement('div'); $lower_header.classList.add('lower-header'); this.$lower_header = $lower_header; @@ -779,7 +789,7 @@ export default class Gantt { classes: 'lower-text', append_to: this.$lower_header, }); - + $lower_text.innerText = date.lower_text; $lower_text.style.left = +$lower_text.style.left.slice(0, -2) + 'px'; @@ -812,42 +822,64 @@ export default class Gantt { } get_date_info(date, last_date_info) { - let last_date = last_date_info ? last_date_info.date : date_utils.add(date, 1, 'day'); - let date_text = {} - const custom_mode = this.options.custom_mode + let date_text = {}; + const custom_mode = this.options.custom_mode; if (custom_mode) { - let lower_text,upper_text + let lower_text, upper_text; const unit = custom_mode ? custom_mode.unit.toLowerCase() : 'day'; if (unit === 'hour') { - lower_text = date_utils.format(date, 'HH', this.options.language); - upper_text = date.getDate() !== last_date.getDate() - ? date_utils.format(date, 'D MMMM', this.options.language) - : ''; + lower_text = date_utils.format( + date, + 'HH', + this.options.language, + ); + upper_text = + date.getDate() !== last_date.getDate() + ? date_utils.format( + date, + 'D MMMM', + this.options.language, + ) + : ''; } else if (unit === 'day') { - lower_text = date.getDate() !== last_date.getDate() - ? date_utils.format(date, 'D', this.options.language) - : ''; - upper_text = date.getMonth() !== last_date.getMonth() || !last_date_info - ? date_utils.format(date, 'MMMM', this.options.language) - : ''; + lower_text = + date.getDate() !== last_date.getDate() + ? date_utils.format(date, 'D', this.options.language) + : ''; + upper_text = + date.getMonth() !== last_date.getMonth() || !last_date_info + ? date_utils.format(date, 'MMMM', this.options.language) + : ''; } else if (unit === 'month') { - lower_text = date_utils.format(date, 'MMMM', this.options.language); - upper_text = date.getFullYear() !== last_date.getFullYear() - ? date_utils.format(date, 'YYYY', this.options.language) - : ''; + lower_text = date_utils.format( + date, + 'MMMM', + this.options.language, + ); + upper_text = + date.getFullYear() !== last_date.getFullYear() + ? date_utils.format(date, 'YYYY', this.options.language) + : ''; } else { - lower_text = date_utils.format(date, 'YYYY', this.options.language); + lower_text = date_utils.format( + date, + 'YYYY', + this.options.language, + ); upper_text = ''; // Default to no upper text for very large units } - date_text[`${custom_mode.name}_upper`] = upper_text - date_text[`${custom_mode.name}_lower`] = lower_text - } - else { + date_text[`${custom_mode.name}_upper`] = upper_text; + date_text[`${custom_mode.name}_lower`] = lower_text; + } else { date_text = { - Hour_lower: date_utils.format(date, 'HH', this.options.language), + Hour_lower: date_utils.format( + date, + 'HH', + this.options.language, + ), 'Quarter Day_lower': date_utils.format( date, 'HH', @@ -864,17 +896,37 @@ export default class Gantt { : '', Week_lower: date.getMonth() !== last_date.getMonth() - ? date_utils.format(date, 'D MMM', this.options.language) + ? date_utils.format( + date, + 'D MMM', + this.options.language, + ) : date_utils.format(date, 'D', this.options.language), - Month_lower: date_utils.format(date, 'MMMM', this.options.language), - Year_lower: date_utils.format(date, 'YYYY', this.options.language), + Month_lower: date_utils.format( + date, + 'MMMM', + this.options.language, + ), + Year_lower: date_utils.format( + date, + 'YYYY', + this.options.language, + ), Hour_upper: date.getDate() !== last_date.getDate() - ? date_utils.format(date, 'D MMMM', this.options.language) + ? date_utils.format( + date, + 'D MMMM', + this.options.language, + ) : '', 'Quarter Day_upper': date.getDate() !== last_date.getDate() - ? date_utils.format(date, 'D MMM', this.options.language) + ? date_utils.format( + date, + 'D MMM', + this.options.language, + ) : '', 'Half Day_upper': date.getDate() !== last_date.getDate() @@ -884,7 +936,11 @@ export default class Gantt { 'D MMM', this.options.language, ) - : date_utils.format(date, 'D', this.options.language) + : date_utils.format( + date, + 'D', + this.options.language, + ) : '', Day_upper: date.getMonth() !== last_date.getMonth() || !last_date_info @@ -904,11 +960,17 @@ export default class Gantt { : '', }; } - - let column_width = custom_mode && custom_mode.lower_text && custom_mode.lower_text.column_width ? custom_mode.lower_text.column_width * (custom_mode.step ?? 1) : this.view_is(VIEW_MODE.MONTH) - ? (date_utils.get_days_in_month(date) * this.options.column_width) / - 30 - : this.options.column_width; + + let column_width = + custom_mode && + custom_mode.lower_text && + custom_mode.lower_text.column_width + ? custom_mode.lower_text.column_width * (custom_mode.step ?? 1) + : this.view_is(VIEW_MODE.MONTH) + ? (date_utils.get_days_in_month(date) * + this.options.column_width) / + 30 + : this.options.column_width; const base_pos = { x: last_date_info @@ -933,10 +995,12 @@ export default class Gantt { Year_lower: column_width / 2, Year_upper: (column_width * 30) / 2, }; - if (custom_mode){ - x_pos[`${custom_mode.name}_upper`] = column_width / 2 - x_pos[`${custom_mode.name}_lower`] = column_width / (custom_mode.unit.toLowerCase() === 'day' ? 1 : 2) - } + if (custom_mode) { + x_pos[`${custom_mode.name}_upper`] = column_width / 2; + x_pos[`${custom_mode.name}_lower`] = + column_width / + (custom_mode.unit.toLowerCase() === 'day' ? 1 : 2); + } return { date, formatted_date: date_utils.format(date).replaceAll(' ', '_'),