P8-Panels/app/panels/samples/indicator.js

/*
    Парус 8 - Панели мониторинга - Примеры для разработчиков
    Пример: Индикатор "P8PIndicator"
*/

//---------------------
//Подключение библиотек
//---------------------

import React, { useContext } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Typography, Stack, Divider } from "@mui/material"; //Интерфейсные элементы
import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений
import { P8P_INDICATOR_VARIANT, P8P_INDICATOR_STATE, P8PIndicator } from "../../components/p8p_indicator"; //Индикатор

//---------
//Константы
//---------

//Стили
const STYLES = {
    CONTAINER: { textAlign: "center", paddingTop: "20px" },
    TITLE: { paddingBottom: "15px" },
    DIVIDER: { margin: "15px" }
};

//-----------
//Тело модуля
//-----------

//Пример: Индикатор "P8PIndicator"
const Indicator = ({ title }) => {
    //Подключение к контексту сообщений
    const { showMsgInfo } = useContext(MessagingСtx);

    //Генерация содержимого
    return (
        <div style={STYLES.CONTAINER}>
            <Typography sx={STYLES.TITLE} variant={"h6"}>
                {title}
            </Typography>
            <Divider>Иконка</Divider>
            <Stack direction={"row"} spacing={2} p={5}>
                {/* Индикатор (без иконки) */}
                <P8PIndicator caption={"Без иконки"} value={10} />
                {/* Индикатор (с иконкой 1) */}
                <P8PIndicator caption={"С иконкой - Back Hand"} value={20} icon={"back_hand"} />
                {/* Индикатор (с иконкой 2) */}
                <P8PIndicator caption={"С иконкой - Scoreboard"} value={30} icon={"scoreboard"} />
            </Stack>
            <Divider>Состояние</Divider>
            <Stack direction={"row"} spacing={2} p={5}>
                {/* Индикатор (нейтральный) */}
                <P8PIndicator caption={"Нейтральное состояние"} value={10} icon={"sentiment_neutral"} />
                {/* Индикатор (позитивный) */}
                <P8PIndicator caption={"Позитивное состояние"} value={20} state={P8P_INDICATOR_STATE.OK} icon={"check_circle"} />
                {/* Индикатор (пограничный) */}
                <P8PIndicator caption={"Пограничное состояние"} value={30} state={P8P_INDICATOR_STATE.WARN} icon={"warning"} />
                {/* Индикатор (негативный) */}
                <P8PIndicator caption={"Негативное состояния"} value={40} state={P8P_INDICATOR_STATE.ERR} icon={"dangerous"} />
            </Stack>
            <Divider>Скругление</Divider>
            <Stack direction={"row"} spacing={2} p={5}>
                {/* Индикатор (скругленный) */}
                <P8PIndicator caption={"Скругленный"} />
                {/* Индикатор (квадратный) */}
                <P8PIndicator caption={"Квадрадтный"} square={true} />
            </Stack>
            <Divider>Парение</Divider>
            <Stack direction={"row"} spacing={2} p={5}>
                {/* Индикатор (парение - 0) */}
                <P8PIndicator caption={"Парение"} value={0} state={P8P_INDICATOR_STATE.OK} elevation={0} />
                {/* Индикатор (парение - 3) */}
                <P8PIndicator caption={"Парение (по умолчанию)"} value={3} state={P8P_INDICATOR_STATE.WARN} elevation={3} />
                {/* Индикатор (парение - 6) */}
                <P8PIndicator caption={"Парение"} value={6} state={P8P_INDICATOR_STATE.OK} elevation={6} />
                {/* Индикатор (парение - 12) */}
                <P8PIndicator caption={"Парение"} value={12} state={P8P_INDICATOR_STATE.OK} elevation={12} />
                {/* Индикатор (парение - 18) */}
                <P8PIndicator caption={"Парение"} value={18} state={P8P_INDICATOR_STATE.OK} elevation={18} />
            </Stack>
            <Divider>Исполнение</Divider>
            <Stack direction={"row"} spacing={2} p={5}>
                {/* Индикатор (парение) */}
                <P8PIndicator caption={"Парящий (по умолчанию)"} value={123} />
                {/* Индикатор (рамка) */}
                <P8PIndicator caption={"Рамка"} value={321} variant={P8P_INDICATOR_VARIANT.OUTLINED} />
            </Stack>
            <Divider>Подсказка</Divider>
            <Stack direction={"row"} spacing={2} p={5}>
                {/* Индикатор (подсказка без форматирования) */}
                <P8PIndicator
                    caption={"Подсказка (без форматирования)"}
                    value={42}
                    icon={"desktop_windows"}
                    hint={"Ответ на главный вопрос жизни, вселенной и всего такого..."}
                />
                {/* Индикатор (подсказка с форматирование) */}
                <P8PIndicator
                    caption={"Подсказка (с форматированием)"}
                    value={3.14}
                    icon={"radio_button_unchecked"}
                    hint={`Математическая <b>постоянная</b>, равная <b style='color:red'>отношению</b> <b style='color:green'>длины окружности</b> 
                         к её <b style='color:blue'>диаметру</b>: 
                         <p style='text-align: center'>&#960; = <span style='color:green'>L</span>/<span style='color:blue'>d</span></p>`}
                />
            </Stack>
            <Divider>Активность</Divider>
            <Stack direction={"row"} spacing={2} p={5}>
                {[P8P_INDICATOR_STATE.UNDEFINED, P8P_INDICATOR_STATE.OK, P8P_INDICATOR_STATE.WARN, P8P_INDICATOR_STATE.ERR].map(
                    (indicatorState, i) => (
                        <P8PIndicator
                            key={i}
                            caption={`Нажми на меня #${i + 1}`}
                            value={i + 1}
                            state={indicatorState}
                            icon={"chat"}
                            onClick={() => showMsgInfo(`Нажатие на индикатор #${i + 1}`)}
                            hint={`Подсказка индикатора #${i + 1}`}
                        />
                    )
                )}
            </Stack>
            <Divider>Пользовательские цвета</Divider>
            <Stack direction={"row"} spacing={2} p={5}>
                {[
                    ["yellow", "black"],
                    ["darkred", "yellow"],
                    ["orange", "darkblue"],
                    ["magenta", "darkmagenta"]
                ].map((userColor, i) => (
                    <P8PIndicator
                        key={i}
                        caption={`Текст: ${userColor[0]}, Заливка: ${userColor[1]}`}
                        value={i + 1}
                        state={P8P_INDICATOR_STATE.WARN}
                        icon={"palette"}
                        color={userColor[0]}
                        backgroundColor={userColor[1]}
                    />
                ))}
            </Stack>
        </div>
    );
};

//Контроль свойств - Пример: Индикатор "P8PIndicator"
Indicator.propTypes = {
    title: PropTypes.string.isRequired
};

//----------------
//Интерфейс модуля
//----------------

export { Indicator };