chore: format
This commit is contained in:
parent
dd01835864
commit
d3b4a2fa06
78
dist/frappe-gantt.es.js
vendored
78
dist/frappe-gantt.es.js
vendored
@ -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) : "",
|
||||
|
||||
194
src/index.js
194
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(' ', '_'),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user