chuijs 4.0.2 → 4.0.3

package/framework/components/chui_gantt/gantt.js

@@ -1,5 +1,5 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Диаграмма Ганта: задачи полосами по шкале времени.
@@ -39,7 +39,7 @@ class Gantt {
     static SCALE = {
         DAY: "day",
         WEEK: "week",
-        MONTH: "month"
+        MONTH: "month",
     };
     static DEFAULT_ROW_HEIGHT = 30;
     static DEFAULT_BAR_HEIGHT = 18;
@@ -67,22 +67,24 @@ class Gantt {
     #on_task_click = undefined;
     #rows_layout = [];
 
-    constructor(options = {
-        id: String(),
-        tasks: [],
-        from: undefined,
-        to: undefined,
-        scale: String(),
-        firstDay: Number(),
-        rowHeight: Number(),
-        barHeight: Number(),
-        labelWidth: Number(),
-        height: String(),
-        showProgress: Boolean(),
-        showLinks: Boolean(),
-        label: String(),
-        onTaskClick: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            tasks: [],
+            from: undefined,
+            to: undefined,
+            scale: String(),
+            firstDay: Number(),
+            rowHeight: Number(),
+            barHeight: Number(),
+            labelWidth: Number(),
+            height: String(),
+            showProgress: Boolean(),
+            showLinks: Boolean(),
+            label: String(),
+            onTaskClick: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Gantt");
         Gantt.#counter += 1;
         this.#id = options.id === undefined ? `chui_gantt_${Gantt.#counter}` : options.id;
@@ -134,7 +136,7 @@ class Gantt {
     /** Показанный период (начало и конец диапазона) */
     getRange() {
         const range = this.#period();
-        return {from: range.from, to: range.to};
+        return { from: range.from, to: range.to };
     }
 
     /** Шкала: заданная или выбранная по длине периода */
@@ -271,13 +273,20 @@ class Gantt {
         const ends = this.#tasks.map((task) => Gantt.#taskEnd(task)).filter((date) => date !== undefined);
         let from = Gantt.#toDate(this.#from);
         let to = Gantt.#toDate(this.#to);
-        if (from === undefined) from = starts.length === 0 ? Gantt.#startOfDay(new Date()) : new Date(Math.min(...starts.map((date) => date.getTime())));
+        if (from === undefined)
+            from =
+                starts.length === 0
+                    ? Gantt.#startOfDay(new Date())
+                    : new Date(Math.min(...starts.map((date) => date.getTime())));
         if (to === undefined) {
-            const last = ends.length === 0 ? new Date(from.getTime() + 86400000) : new Date(Math.max(...ends.map((date) => date.getTime())));
+            const last =
+                ends.length === 0
+                    ? new Date(from.getTime() + 86400000)
+                    : new Date(Math.max(...ends.map((date) => date.getTime())));
             to = last;
         }
         if (to <= from) to = new Date(from.getTime() + 86400000);
-        return {from: Gantt.#startOfDay(from), to: Gantt.#startOfDay(to)};
+        return { from: Gantt.#startOfDay(from), to: Gantt.#startOfDay(to) };
     }
 
     /** Начало колонки шкалы, в которую попадает дата */
@@ -308,7 +317,7 @@ class Gantt {
         let cursor = new Date(start);
         while (cursor <= last && columns.length < 400) {
             const next = this.#nextColumnStart(cursor);
-            columns.push({from: new Date(cursor), to: next});
+            columns.push({ from: new Date(cursor), to: next });
             cursor = next;
         }
         return columns;
@@ -319,7 +328,7 @@ class Gantt {
         const columns = this.#columns();
         const first = columns[0];
         const last = columns[columns.length - 1];
-        return {from: first.from, to: last.to, columns: columns};
+        return { from: first.from, to: last.to, columns: columns };
     }
 
     /** Доля позиции даты в периоде (0…1) */
@@ -334,11 +343,11 @@ class Gantt {
         const scale = this.getScale();
         const bounds = this.#periodBounds();
         if (scale === Gantt.SCALE.MONTH) {
-            return `${bounds.from.toLocaleString(I18n.getLocale(), {month: "long", year: "numeric"})} – ${new Date(bounds.to.getTime() - 1).toLocaleString(I18n.getLocale(), {month: "long", year: "numeric"})}`;
+            return `${bounds.from.toLocaleString(I18n.getLocale(), { month: "long", year: "numeric" })} – ${new Date(bounds.to.getTime() - 1).toLocaleString(I18n.getLocale(), { month: "long", year: "numeric" })}`;
         }
         const last = new Date(bounds.to.getTime() - 1);
-        const until = last.toLocaleString(I18n.getLocale(), {day: "numeric", month: "long", year: "numeric"});
-        const from = bounds.from.toLocaleString(I18n.getLocale(), {day: "numeric", month: "long"});
+        const until = last.toLocaleString(I18n.getLocale(), { day: "numeric", month: "long", year: "numeric" });
+        const from = bounds.from.toLocaleString(I18n.getLocale(), { day: "numeric", month: "long" });
         return `${from} – ${until}`;
     }
 
@@ -360,15 +369,16 @@ class Gantt {
             const cell = document.createElement("gantt_scale_cell");
             const label = document.createElement("gantt_scale_label");
             if (scale === Gantt.SCALE.MONTH) {
-                label.innerText = column.from.toLocaleString(I18n.getLocale(), {month: "short"});
+                label.innerText = column.from.toLocaleString(I18n.getLocale(), { month: "short" });
             } else if (scale === Gantt.SCALE.WEEK) {
-                label.innerText = column.from.toLocaleString(I18n.getLocale(), {day: "numeric", month: "short"});
+                label.innerText = column.from.toLocaleString(I18n.getLocale(), { day: "numeric", month: "short" });
             } else {
                 label.innerText = `${column.from.getDate()}.${String(column.from.getMonth() + 1).padStart(2, "0")}`;
             }
             cell.appendChild(label);
             // Выходные подсвечиваем только на дневной шкале: на недельной и месячной колонка — не день
-            if (scale === Gantt.SCALE.DAY && (column.from.getDay() === 0 || column.from.getDay() === 6)) cell.classList.add("gantt_weekend");
+            if (scale === Gantt.SCALE.DAY && (column.from.getDay() === 0 || column.from.getDay() === 6))
+                cell.classList.add("gantt_weekend");
             if (today >= column.from && today < column.to) cell.classList.add("gantt_today_cell");
             this.#scale_row.appendChild(cell);
         }
@@ -411,14 +421,17 @@ class Gantt {
             row.appendChild(label);
             row.appendChild(track);
             this.#rows.appendChild(row);
-            this.#rows_layout.push({task: task, row: row});
+            this.#rows_layout.push({ task: task, row: row });
         }
         if (this.#tasks.length === 0) {
             const empty = document.createElement("gantt_empty");
             empty.innerText = I18n.t("gantt.empty");
             this.#rows.appendChild(empty);
         }
-        this.#rows.style.setProperty("--gantt_rows_height", `${Math.max(1, this.#rows_layout.length) * this.#row_height}px`);
+        this.#rows.style.setProperty(
+            "--gantt_rows_height",
+            `${Math.max(1, this.#rows_layout.length) * this.#row_height}px`
+        );
     }
 
     #createGroupRow(title = String()) {
@@ -434,7 +447,14 @@ class Gantt {
 
     // `task_index` — номер задачи в данных: по нему клик находит именно ту задачу, чья полоса
     // нажата (у задач без id и `data-id` пустой, и поиск по нему возвращал бы первую такую)
-    #createBar(task = Object(), start = new Date(), end = new Date(), left = Number(), width = Number(), task_index = Number()) {
+    #createBar(
+        task = Object(),
+        start = new Date(),
+        end = new Date(),
+        left = Number(),
+        width = Number(),
+        task_index = Number()
+    ) {
         const bar = document.createElement("button");
         bar.type = "button";
         bar.className = "gantt_bar";
@@ -463,10 +483,14 @@ class Gantt {
     }
 
     #barLabel(task = Object(), start = new Date(), end = new Date(), progress = undefined) {
-        const format = (date) => date.toLocaleString(I18n.getLocale(), {day: "numeric", month: "long"});
-        const parts = [task.title === undefined ? I18n.t("gantt.task") : String(task.title), `${format(start)} – ${format(end)}`];
-        if (progress !== undefined) parts.push(I18n.t("gantt.progress", {progress: progress}));
-        if (Array.isArray(task.dependencies) && task.dependencies.length > 0) parts.push(I18n.t("gantt.dependsOn", {tasks: task.dependencies.join(", ")}));
+        const format = (date) => date.toLocaleString(I18n.getLocale(), { day: "numeric", month: "long" });
+        const parts = [
+            task.title === undefined ? I18n.t("gantt.task") : String(task.title),
+            `${format(start)} – ${format(end)}`,
+        ];
+        if (progress !== undefined) parts.push(I18n.t("gantt.progress", { progress: progress }));
+        if (Array.isArray(task.dependencies) && task.dependencies.length > 0)
+            parts.push(I18n.t("gantt.dependsOn", { tasks: task.dependencies.join(", ") }));
         return parts.join(", ");
     }
 
@@ -491,7 +515,7 @@ class Gantt {
         const height = Math.max(1, this.#rows_layout.length) * this.#row_height;
         this.#links.setAttribute("viewBox", `0 0 100 ${height}`);
         this.#links.style.height = `${height}px`;
-        for (const {task} of this.#rows_layout) {
+        for (const { task } of this.#rows_layout) {
             const dependencies = Array.isArray(task.dependencies) ? task.dependencies : [];
             if (dependencies.length === 0) continue;
             const start = Gantt.#taskStart(task);
@@ -535,4 +559,4 @@ class Gantt {
     };
 }
 
-exports.Gantt = Gantt
+exports.Gantt = Gantt;