102 lines
4.2 KiB
JavaScript
102 lines
4.2 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга - Редактор панелей
|
|
Компоненты: График (представление)
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import React from "react"; //Классы React
|
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
|
import { Paper } from "@mui/material"; //Интерфейсные элементы
|
|
import { P8PChart } from "../../../../components/p8p_chart"; //График
|
|
import { useDataSource, useComponentHandlers } from "../../../../components/editors/p8p_data_source_hooks"; //Хуки для данных
|
|
import { P8P_DATA_SOURCE_SHAPE } from "../../../../components/editors/p8p_data_source_common"; //Общие ресурсы источника данных
|
|
import {
|
|
P8P_COMPONENT_INLINE_MESSAGE_TYPE,
|
|
P8P_COMPONENT_INLINE_MESSAGE,
|
|
P8PComponentInlineMessage
|
|
} from "../../../../components/editors/p8p_component_inline_message"; //Информационное сообщение внутри компонента
|
|
import { P8P_COMPONENT_SETTINGS_RESP_ARGS } from "../../../../components/editors/p8p_component_settings"; //Дополнительный функционал источников данных
|
|
import { P8P_CA_SHAPE } from "../../../../components/editors/p8p_component_action/common"; //Общие ресурсы действий
|
|
import { getChartCustomTypeValue, getChartHandlers } from "./action"; //Общие ресурсы действий графика
|
|
|
|
//---------
|
|
//Константы
|
|
//---------
|
|
|
|
//Иконка компонента
|
|
const COMPONENT_ICON = "bar_chart";
|
|
|
|
//Наименование компонента
|
|
const COMPONENT_NAME = "График";
|
|
|
|
//Стили
|
|
const STYLES = {
|
|
CHART: { width: "100%", height: "100%", alignItems: "center", justifyContent: "center", display: "flex" },
|
|
CONTAINER: clickable => ({
|
|
...(clickable
|
|
? {
|
|
cursor: "pointer"
|
|
}
|
|
: {})
|
|
})
|
|
};
|
|
|
|
//-----------
|
|
//Тело модуля
|
|
//-----------
|
|
|
|
//График (представление)
|
|
const Chart = ({ dataSource = null, values = {}, actions = [], onValuesChange = null } = {}) => {
|
|
//Собственное состояние - данные
|
|
const [chart, error, haveConfing, haveData] = useDataSource({ dataSource, values, componentRespArg: P8P_COMPONENT_SETTINGS_RESP_ARGS.CHART });
|
|
|
|
//Собственное состояние - обработчики компонента
|
|
const [handlers] = useComponentHandlers({ actions, onValuesChange, getCustomTypeValue: getChartCustomTypeValue });
|
|
|
|
//Обработчики областей
|
|
const { onComponentClick, onChartItemClick } = getChartHandlers(handlers);
|
|
|
|
//Формирование представления
|
|
return (
|
|
<Paper
|
|
sx={STYLES.CONTAINER(onComponentClick)}
|
|
className={"component-view__container component-view__container__empty"}
|
|
elevation={6}
|
|
onClick={event => onComponentClick && onComponentClick({ event, values })}
|
|
>
|
|
{haveConfing && haveData ? (
|
|
<P8PChart
|
|
style={STYLES.CHART}
|
|
{...chart}
|
|
options={{ responsive: true, maintainAspectRatio: false }}
|
|
onClick={prms => onChartItemClick && onChartItemClick({ values, prms })}
|
|
/>
|
|
) : (
|
|
<P8PComponentInlineMessage
|
|
icon={COMPONENT_ICON}
|
|
name={COMPONENT_NAME}
|
|
message={!haveConfing ? P8P_COMPONENT_INLINE_MESSAGE.NO_SETTINGS : error ? error : P8P_COMPONENT_INLINE_MESSAGE.NO_DATA_FOUND}
|
|
type={error ? P8P_COMPONENT_INLINE_MESSAGE_TYPE.ERROR : P8P_COMPONENT_INLINE_MESSAGE_TYPE.COMMON}
|
|
/>
|
|
)}
|
|
</Paper>
|
|
);
|
|
};
|
|
|
|
//Контроль свойств компонента - График (представление)
|
|
Chart.propTypes = {
|
|
dataSource: P8P_DATA_SOURCE_SHAPE,
|
|
values: PropTypes.object,
|
|
actions: PropTypes.arrayOf(P8P_CA_SHAPE),
|
|
onValuesChange: PropTypes.func
|
|
};
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
export default Chart;
|