diff --git a/app/panels/samples/chart.js b/app/panels/samples/chart.js index 79218f0..8c5ef52 100644 --- a/app/panels/samples/chart.js +++ b/app/panels/samples/chart.js @@ -22,7 +22,7 @@ import { ApplicationСtx } from "../../context/application"; //Контекст const STYLES = { CONTAINER: { textAlign: "center", paddingTop: "20px" }, TITLE: { paddingBottom: "15px" }, - CHART: { minWidth: "80vw", maxHeight: "80vw", display: "flex", justifyContent: "center" }, + CHART: { minWidth: "65vw", maxHeight: "65vw", display: "flex", justifyContent: "center" }, CHART_PAPER: { padding: "25px" } }; diff --git a/dist/p8-panels.js b/dist/p8-panels.js index e8914c3..7425e4e 100644 --- a/dist/p8-panels.js +++ b/dist/p8-panels.js @@ -3447,7 +3447,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Chart: () => (/* binding */ Chart)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_7__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Grid/Grid.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Paper/Paper.js\");\n/* harmony import */ var _components_p8p_chart__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../components/p8p_chart */ \"./app/components/p8p_chart.js\");\n/* harmony import */ var _context_backend__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../context/backend */ \"./app/context/backend.js\");\n/* harmony import */ var _context_application__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../context/application */ \"./app/context/application.js\");\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n/*\r\n Парус 8 - Панели мониторинга - Примеры для разработчиков\r\n Пример: Графики \"P8PChart\"\r\n*/\n\n//---------------------\n//Подключение библиотек\n//---------------------\n\n //Классы React\n //Контроль свойств компонента\n //Интерфейсные элементы\n //График\n //Контекст взаимодействия с сервером\n //Контекст приложения\n\n//---------\n//Константы\n//---------\n\n//Стили\nconst STYLES = {\n CONTAINER: {\n textAlign: \"center\",\n paddingTop: \"20px\"\n },\n TITLE: {\n paddingBottom: \"15px\"\n },\n CHART: {\n minWidth: \"80vw\",\n maxHeight: \"80vw\",\n display: \"flex\",\n justifyContent: \"center\"\n },\n CHART_PAPER: {\n padding: \"25px\"\n }\n};\n\n//-----------\n//Тело модуля\n//-----------\n\n//Пример: Графики \"P8PChart\"\nconst Chart = ({\n title\n}) => {\n //Собственное состояние - график\n const [chart, setChart] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({\n loaded: false,\n labels: [],\n datasets: []\n });\n\n //Подключение к контексту взаимодействия с сервером\n const {\n executeStored\n } = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_context_backend__WEBPACK_IMPORTED_MODULE_2__[\"BackEndСtx\"]);\n\n //Подключение к контексту приложения\n const {\n pOnlineShowUnit\n } = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_context_application__WEBPACK_IMPORTED_MODULE_3__[\"ApplicationСtx\"]);\n\n //Загрузка данных графика с сервера\n const loadChart = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(async () => {\n const chart = await executeStored({\n stored: \"PKG_P8PANELS_SAMPLES.CHART\",\n respArg: \"COUT\"\n });\n setChart(pv => ({\n ...pv,\n loaded: true,\n ...chart.XCHART\n }));\n }, [executeStored]);\n\n //Отработка нажатия на график\n const handleChartClick = ({\n item\n }) => {\n pOnlineShowUnit({\n unitCode: \"Contracts\",\n inputParameters: [{\n name: item.SCOND,\n value: item.SCOND_VALUE\n }]\n });\n };\n\n //При подключении к странице\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n loadChart();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n //Генерация содержимого\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: STYLES.CONTAINER\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n sx: STYLES.TITLE,\n variant: \"h6\"\n }, title), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n container: true,\n spacing: 0,\n pt: 5,\n direction: \"column\",\n alignItems: \"center\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n item: true,\n xs: 12\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n elevation: 6,\n sx: STYLES.CHART_PAPER\n }, chart.loaded ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_p8p_chart__WEBPACK_IMPORTED_MODULE_1__.P8PChart, _extends({}, chart, {\n onClick: handleChartClick,\n style: STYLES.CHART\n })) : null))));\n};\n\n//Контроль свойств - Пример: Графики \"P8PChart\"\nChart.propTypes = {\n title: (prop_types__WEBPACK_IMPORTED_MODULE_7___default().string).isRequired\n};\n\n//----------------\n//Интерфейс модуля\n//----------------\n\n\n\n//# sourceURL=webpack://parus_8_panels_plugin/./app/panels/samples/chart.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Chart: () => (/* binding */ Chart)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_7__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Grid/Grid.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Paper/Paper.js\");\n/* harmony import */ var _components_p8p_chart__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../components/p8p_chart */ \"./app/components/p8p_chart.js\");\n/* harmony import */ var _context_backend__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../context/backend */ \"./app/context/backend.js\");\n/* harmony import */ var _context_application__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../context/application */ \"./app/context/application.js\");\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n/*\r\n Парус 8 - Панели мониторинга - Примеры для разработчиков\r\n Пример: Графики \"P8PChart\"\r\n*/\n\n//---------------------\n//Подключение библиотек\n//---------------------\n\n //Классы React\n //Контроль свойств компонента\n //Интерфейсные элементы\n //График\n //Контекст взаимодействия с сервером\n //Контекст приложения\n\n//---------\n//Константы\n//---------\n\n//Стили\nconst STYLES = {\n CONTAINER: {\n textAlign: \"center\",\n paddingTop: \"20px\"\n },\n TITLE: {\n paddingBottom: \"15px\"\n },\n CHART: {\n minWidth: \"65vw\",\n maxHeight: \"65vw\",\n display: \"flex\",\n justifyContent: \"center\"\n },\n CHART_PAPER: {\n padding: \"25px\"\n }\n};\n\n//-----------\n//Тело модуля\n//-----------\n\n//Пример: Графики \"P8PChart\"\nconst Chart = ({\n title\n}) => {\n //Собственное состояние - график\n const [chart, setChart] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({\n loaded: false,\n labels: [],\n datasets: []\n });\n\n //Подключение к контексту взаимодействия с сервером\n const {\n executeStored\n } = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_context_backend__WEBPACK_IMPORTED_MODULE_2__[\"BackEndСtx\"]);\n\n //Подключение к контексту приложения\n const {\n pOnlineShowUnit\n } = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_context_application__WEBPACK_IMPORTED_MODULE_3__[\"ApplicationСtx\"]);\n\n //Загрузка данных графика с сервера\n const loadChart = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(async () => {\n const chart = await executeStored({\n stored: \"PKG_P8PANELS_SAMPLES.CHART\",\n respArg: \"COUT\"\n });\n setChart(pv => ({\n ...pv,\n loaded: true,\n ...chart.XCHART\n }));\n }, [executeStored]);\n\n //Отработка нажатия на график\n const handleChartClick = ({\n item\n }) => {\n pOnlineShowUnit({\n unitCode: \"Contracts\",\n inputParameters: [{\n name: item.SCOND,\n value: item.SCOND_VALUE\n }]\n });\n };\n\n //При подключении к странице\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n loadChart();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n //Генерация содержимого\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: STYLES.CONTAINER\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n sx: STYLES.TITLE,\n variant: \"h6\"\n }, title), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n container: true,\n spacing: 0,\n pt: 5,\n direction: \"column\",\n alignItems: \"center\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n item: true,\n xs: 12\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n elevation: 6,\n sx: STYLES.CHART_PAPER\n }, chart.loaded ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_p8p_chart__WEBPACK_IMPORTED_MODULE_1__.P8PChart, _extends({}, chart, {\n onClick: handleChartClick,\n style: STYLES.CHART\n })) : null))));\n};\n\n//Контроль свойств - Пример: Графики \"P8PChart\"\nChart.propTypes = {\n title: (prop_types__WEBPACK_IMPORTED_MODULE_7___default().string).isRequired\n};\n\n//----------------\n//Интерфейс модуля\n//----------------\n\n\n\n//# sourceURL=webpack://parus_8_panels_plugin/./app/panels/samples/chart.js?"); /***/ }),