P8-Panels/app/components/p8p_cyclogram/p8p_cyclogram_grid.js

50 lines
2.0 KiB
JavaScript

/*
Парус 8 - Панели мониторинга - Циклограмма
Компонент: Фон таблицы
*/
//---------------------
//Подключение библиотек
//---------------------
import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { P8PCyclogramRowsGrid } from "./p8p_cyclogram_rows_grid"; //Фон строк таблицы
import { P8PCyclogramRowsLines } from "./p8p_cyclogram_row_lines"; //Линии строк таблицы
import { P8PCyclogramColumnsLines } from "./p8p_cyclogram_column_lines"; //Линии колонок таблицы
import { NDEFAULT_HEADER_HEIGHT } from "./p8p_cyclogram_constants"; //Константы циклограммы
//-----------
//Тело модуля
//-----------
//Фон таблицы
const P8PCyclogramGrid = ({ tasks, columns, shift, maxWidth, maxHeight, lineHeight }) => {
//Формируем массив строк исходя из максимального значения строки задачи
const rows = Array.from(Array(Math.max(...tasks.map(o => o.lineNumb)) + 1).keys());
return (
<g className="grid">
<rect x="0" y="0" width={maxWidth} height={maxHeight}></rect>
<P8PCyclogramRowsGrid rows={rows} maxWidth={maxWidth} lineHeight={lineHeight} />
<P8PCyclogramRowsLines rows={rows} maxWidth={maxWidth} lineHeight={lineHeight} />
<P8PCyclogramColumnsLines columns={columns} shift={shift} y1={NDEFAULT_HEADER_HEIGHT} y2={maxHeight} />
</g>
);
};
//Контроль свойств - Фон таблицы
P8PCyclogramGrid.propTypes = {
tasks: PropTypes.array.isRequired,
columns: PropTypes.array.isRequired,
shift: PropTypes.number.isRequired,
maxWidth: PropTypes.number.isRequired,
maxHeight: PropTypes.number.isRequired,
lineHeight: PropTypes.number.isRequired
};
//----------------
//Интерфейс модуля
//----------------
export { P8PCyclogramGrid };