341 lines
12 KiB
TypeScript
341 lines
12 KiB
TypeScript
// Timeline view: wraps vis-timeline (groups = boards, range items = bookings).
|
||
import { Timeline, DataSet } from 'vis-timeline/standalone';
|
||
import type { TimelineOptions } from 'vis-timeline/standalone';
|
||
import { escapeHtml } from './util';
|
||
import { computeCollisions } from './collisions';
|
||
import { colorForStatus } from './appearance';
|
||
import type { Appearance } from './appearance';
|
||
import type { Board, Booking } from './types';
|
||
|
||
export interface RenderFlags {
|
||
withBrand: boolean;
|
||
withCompany: boolean;
|
||
withCollisions: boolean;
|
||
}
|
||
|
||
export interface TimelineElements {
|
||
timelineEl: HTMLElement;
|
||
chartWrap: HTMLElement;
|
||
tooltip: HTMLElement;
|
||
empty: HTMLElement;
|
||
colResizer: HTMLElement;
|
||
}
|
||
|
||
// Clicking a bar opens the corresponding Planfix task.
|
||
const PLANFIX_TASK_URL = 'https://green-media.planfix.ru/task/';
|
||
|
||
export const zoomSteps: ReadonlyArray<{ days: number; label: string }> = [
|
||
{ days: 91, label: '3 месяца' },
|
||
{ days: 183, label: '6 месяцев' },
|
||
{ days: 274, label: '9 месяцев' },
|
||
{ days: 365, label: '12 месяцев' },
|
||
{ days: 457, label: '15 месяцев' },
|
||
{ days: 548, label: '18 месяцев' },
|
||
{ days: 639, label: '21 месяц' },
|
||
{ days: 731, label: '24 месяца' },
|
||
{ days: 822, label: '27 месяцев' },
|
||
{ days: 913, label: '30 месяцев' },
|
||
];
|
||
|
||
const MONTH_BG_ID = '__month_hover_bg';
|
||
const MIN_LABEL_W = 140;
|
||
const MAX_LABEL_W = 760;
|
||
|
||
export interface TimelineView {
|
||
render(boards: Board[], bookings: Booking[], fit: boolean, flags: RenderFlags): void;
|
||
/** Re-run the last render (e.g. after colours changed). */
|
||
refresh(): void;
|
||
/** Re-apply row height / centring from appearance and redraw. */
|
||
applyLayout(): void;
|
||
setScale(days: number): void;
|
||
}
|
||
|
||
export function createTimelineView(el: TimelineElements, appearance: Appearance): TimelineView {
|
||
const groupsDS = new DataSet<any>();
|
||
const itemsDS = new DataSet<any>();
|
||
let lastBoards: Board[] = [];
|
||
let lastBookings: Booking[] = [];
|
||
let lastFlags: RenderFlags = { withBrand: true, withCompany: false, withCollisions: true };
|
||
|
||
const options: TimelineOptions = {
|
||
editable: false,
|
||
selectable: false,
|
||
stack: true,
|
||
zoomable: false,
|
||
moveable: true,
|
||
verticalScroll: true,
|
||
zoomMin: zoomSteps[0]!.days * 86400000,
|
||
zoomMax: zoomSteps[zoomSteps.length - 1]!.days * 86400000,
|
||
groupHeightMode: 'auto',
|
||
margin: { item: { horizontal: 2, vertical: 0 } },
|
||
orientation: { axis: 'top' },
|
||
tooltip: { followMouse: false, delay: 0 },
|
||
locale: 'ru',
|
||
xss: { disabled: true },
|
||
};
|
||
|
||
const timeline = new Timeline(el.timelineEl, itemsDS, groupsDS, options);
|
||
|
||
// ---- dynamic height / scroll fix ----
|
||
let lastSetHeightPx: number | null = null;
|
||
function fitTimelineHeight(): void {
|
||
const available = el.chartWrap.clientHeight;
|
||
if (!available) return;
|
||
const labelSet = el.timelineEl.querySelector<HTMLElement>('.vis-labelset');
|
||
const axisEl = el.timelineEl.querySelector<HTMLElement>('.vis-panel.vis-top');
|
||
const groupCount = groupsDS.length;
|
||
const axisHeight = axisEl ? axisEl.offsetHeight : 0;
|
||
const contentHeight = labelSet ? axisHeight + labelSet.scrollHeight : 0;
|
||
if (!labelSet && groupCount > 0) return;
|
||
const target = groupCount === 0 ? available : Math.min(contentHeight || available, available);
|
||
const px = Math.max(1, Math.round(target));
|
||
if (px === lastSetHeightPx) return;
|
||
lastSetHeightPx = px;
|
||
timeline.setOptions({ height: px + 'px' });
|
||
}
|
||
|
||
let heightFitQueued = false;
|
||
function scheduleHeightFit(): void {
|
||
if (heightFitQueued) return;
|
||
heightFitQueued = true;
|
||
requestAnimationFrame(() => {
|
||
heightFitQueued = false;
|
||
fitTimelineHeight();
|
||
});
|
||
}
|
||
|
||
timeline.on('changed', scheduleHeightFit);
|
||
window.addEventListener('resize', scheduleHeightFit);
|
||
scheduleHeightFit();
|
||
|
||
// ---- clickable bars -> Planfix task ----
|
||
timeline.on('click', (props: any) => {
|
||
if (!props.item) return;
|
||
const item = itemsDS.get(props.item) as any;
|
||
if (item && item.taskId) {
|
||
window.open(PLANFIX_TASK_URL + encodeURIComponent(item.taskId), '_blank', 'noopener');
|
||
}
|
||
});
|
||
|
||
// ---- draggable label-column width ----
|
||
function currentLabelW(): number {
|
||
const v = getComputedStyle(document.documentElement).getPropertyValue('--label-w');
|
||
return parseInt(v, 10) || 340;
|
||
}
|
||
function positionResizer(): void {
|
||
const leftPanel = el.timelineEl.querySelector<HTMLElement>('.vis-panel.vis-left');
|
||
if (!leftPanel || el.timelineEl.style.display === 'none') {
|
||
el.colResizer.style.display = 'none';
|
||
return;
|
||
}
|
||
const wrapRect = el.chartWrap.getBoundingClientRect();
|
||
const panelRect = leftPanel.getBoundingClientRect();
|
||
el.colResizer.style.left = panelRect.right - wrapRect.left + 'px';
|
||
el.colResizer.style.display = 'block';
|
||
}
|
||
timeline.on('changed', positionResizer);
|
||
window.addEventListener('resize', positionResizer);
|
||
|
||
let colDragging = false;
|
||
let colDragStartX = 0;
|
||
let colDragStartW = 0;
|
||
let colDragLastX = 0;
|
||
let colDragRafPending = false;
|
||
function applyColDrag(): void {
|
||
colDragRafPending = false;
|
||
let w = colDragStartW + (colDragLastX - colDragStartX);
|
||
w = Math.max(MIN_LABEL_W, Math.min(MAX_LABEL_W, w));
|
||
document.documentElement.style.setProperty('--label-w', w + 'px');
|
||
timeline.redraw();
|
||
positionResizer();
|
||
}
|
||
el.colResizer.addEventListener('mousedown', (e) => {
|
||
colDragging = true;
|
||
colDragStartX = e.clientX;
|
||
colDragStartW = currentLabelW();
|
||
el.colResizer.classList.add('dragging');
|
||
document.body.style.userSelect = 'none';
|
||
document.body.style.cursor = 'col-resize';
|
||
e.preventDefault();
|
||
});
|
||
window.addEventListener('mousemove', (e) => {
|
||
if (!colDragging) return;
|
||
colDragLastX = e.clientX;
|
||
if (colDragRafPending) return;
|
||
colDragRafPending = true;
|
||
requestAnimationFrame(applyColDrag);
|
||
});
|
||
window.addEventListener('mouseup', () => {
|
||
if (!colDragging) return;
|
||
colDragging = false;
|
||
el.colResizer.classList.remove('dragging');
|
||
document.body.style.userSelect = '';
|
||
document.body.style.cursor = '';
|
||
scheduleHeightFit();
|
||
});
|
||
|
||
// ---- tooltip ----
|
||
let hoveredItemId: string | number | null = null;
|
||
timeline.on('itemover', (props: any) => {
|
||
hoveredItemId = props.item;
|
||
const item = itemsDS.get(props.item) as any;
|
||
if (item) {
|
||
el.tooltip.textContent = item.tooltipText;
|
||
el.tooltip.style.display = 'block';
|
||
}
|
||
});
|
||
timeline.on('itemout', () => {
|
||
hoveredItemId = null;
|
||
el.tooltip.style.display = 'none';
|
||
});
|
||
document.addEventListener('mousemove', (e) => {
|
||
if (hoveredItemId !== null) {
|
||
el.tooltip.style.left = e.clientX + 12 + 'px';
|
||
el.tooltip.style.top = e.clientY + 12 + 'px';
|
||
}
|
||
});
|
||
|
||
// ---- row hover highlight ----
|
||
let hoveredRowIdx = -1;
|
||
function setRowHover(idx: number): void {
|
||
if (idx === hoveredRowIdx) return;
|
||
const labels = document.querySelectorAll<HTMLElement>('#timeline .vis-label');
|
||
const rows = document.querySelectorAll<HTMLElement>('#timeline .vis-group');
|
||
if (hoveredRowIdx >= 0) {
|
||
labels[hoveredRowIdx]?.classList.remove('row-hover');
|
||
rows[hoveredRowIdx]?.classList.remove('row-hover');
|
||
}
|
||
if (idx >= 0) {
|
||
labels[idx]?.classList.add('row-hover');
|
||
rows[idx]?.classList.add('row-hover');
|
||
}
|
||
hoveredRowIdx = idx;
|
||
}
|
||
|
||
// ---- hovered-month column highlight ----
|
||
let lastMonthKey: string | null = null;
|
||
timeline.on('mouseMove', (props: any) => {
|
||
if (props.time) {
|
||
const t: Date = props.time;
|
||
const y = t.getUTCFullYear();
|
||
const m = t.getUTCMonth();
|
||
const key = y + '-' + m;
|
||
if (key !== lastMonthKey) {
|
||
lastMonthKey = key;
|
||
const monthStart = new Date(Date.UTC(y, m, 1));
|
||
const monthEnd = new Date(Date.UTC(y, m + 1, 1));
|
||
itemsDS.update([
|
||
{ id: MONTH_BG_ID, type: 'background', start: monthStart, end: monthEnd, className: 'month-hover-bg' },
|
||
]);
|
||
}
|
||
}
|
||
if (props.group !== null && props.group !== undefined) {
|
||
const idx = lastBoards.findIndex((b) => b.board_id === props.group);
|
||
setRowHover(idx);
|
||
} else {
|
||
setRowHover(-1);
|
||
}
|
||
});
|
||
el.timelineEl.addEventListener('mouseleave', () => {
|
||
lastMonthKey = null;
|
||
itemsDS.remove(MONTH_BG_ID);
|
||
setRowHover(-1);
|
||
});
|
||
|
||
function render(boards: Board[], bookings: Booking[], fit: boolean, flags: RenderFlags): void {
|
||
lastBoards = boards;
|
||
lastBookings = bookings;
|
||
lastFlags = flags;
|
||
if (boards.length === 0) {
|
||
groupsDS.clear();
|
||
itemsDS.clear();
|
||
el.timelineEl.style.display = 'none';
|
||
el.empty.style.display = 'block';
|
||
return;
|
||
}
|
||
el.timelineEl.style.display = '';
|
||
el.empty.style.display = 'none';
|
||
|
||
const collisionPartners = flags.withCollisions ? computeCollisions(bookings) : new Map<number, number[]>();
|
||
|
||
const groups = boards.map((b, idx) => ({
|
||
id: b.board_id,
|
||
content: escapeHtml(b.board_address) + ' (' + escapeHtml(b.board_id) + ')',
|
||
order: idx,
|
||
className: idx % 2 === 0 ? 'row-even' : 'row-odd',
|
||
}));
|
||
|
||
const items = bookings.map((bk, idx) => {
|
||
const end = new Date(bk.end_date + 'T00:00:00Z');
|
||
end.setUTCDate(end.getUTCDate() + 1);
|
||
const brand = bk.brand || '';
|
||
const company = bk.company_name || '';
|
||
|
||
const barParts: string[] = [];
|
||
if (flags.withBrand && brand) barParts.push(escapeHtml(brand));
|
||
if (flags.withCompany && company) barParts.push(escapeHtml(company));
|
||
const barContent = barParts.join(' | ');
|
||
|
||
const tooltipLines: string[] = [];
|
||
if (bk.task_id) tooltipLines.push(bk.task_id);
|
||
if (brand) tooltipLines.push(brand);
|
||
if (company) tooltipLines.push(company);
|
||
tooltipLines.push(bk.start_date + ' — ' + bk.end_date);
|
||
if (bk.task_status) tooltipLines.push(bk.task_status);
|
||
|
||
const partnerIdxs = collisionPartners.get(idx);
|
||
const isCollision = !!(partnerIdxs && partnerIdxs.length);
|
||
if (isCollision) {
|
||
tooltipLines.push('⚠ Коллизия с:');
|
||
for (const pIdx of partnerIdxs!) {
|
||
const p = bookings[pIdx]!;
|
||
const pLabel = p.brand || p.company_name || 'Без названия';
|
||
tooltipLines.push(' ' + pLabel + ' ' + p.start_date + ' — ' + p.end_date);
|
||
}
|
||
}
|
||
|
||
// Colour: collision colour overrides the per-status colour.
|
||
const color = isCollision ? appearance.collisionColor : colorForStatus(appearance, bk.task_status);
|
||
|
||
return {
|
||
id: bk.board_id + '__' + idx,
|
||
group: bk.board_id,
|
||
start: bk.start_date,
|
||
end: end.toISOString().slice(0, 10),
|
||
content: `<div class="bar-inner" style="background-color:${color};">${barContent}</div>`,
|
||
type: 'range',
|
||
tooltipText: tooltipLines.join('\n'),
|
||
taskId: bk.task_id,
|
||
};
|
||
});
|
||
|
||
groupsDS.clear();
|
||
groupsDS.add(groups);
|
||
itemsDS.clear();
|
||
itemsDS.add(items);
|
||
lastMonthKey = null;
|
||
|
||
if (fit) timeline.fit({ animation: false });
|
||
scheduleHeightFit();
|
||
}
|
||
|
||
function refresh(): void {
|
||
if (lastBoards.length) render(lastBoards, lastBookings, false, lastFlags);
|
||
}
|
||
|
||
function applyLayout(): void {
|
||
timeline.setOptions({ margin: { item: { horizontal: 2, vertical: 0 } } });
|
||
timeline.redraw();
|
||
scheduleHeightFit();
|
||
}
|
||
|
||
function setScale(days: number): void {
|
||
const range = timeline.getWindow();
|
||
const center = (range.start.getTime() + range.end.getTime()) / 2;
|
||
const half = (days * 86400000) / 2;
|
||
timeline.setWindow(new Date(center - half), new Date(center + half));
|
||
}
|
||
|
||
return { render, refresh, applyLayout, setScale };
|
||
}
|