diff --git a/dist/p8-panels.js b/dist/p8-panels.js index 699b8dd..c7b6da2 100644 --- a/dist/p8-panels.js +++ b/dist/p8-panels.js @@ -3293,7 +3293,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 */ P8PChart: () => (/* binding */ P8PChart),\n/* harmony export */ P8P_CHART_TYPE: () => (/* binding */ P8P_CHART_TYPE)\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_2__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var chart_js_auto__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! chart.js/auto */ \"./node_modules/chart.js/auto/auto.js\");\n/*\r\n Парус 8 - Панели мониторинга\r\n Компонент: График\r\n*/\n\n//---------------------\n//Подключение библиотек\n//---------------------\n\n //Классы React\n //Контроль свойств компонента\n //Диаграммы и графики\n\n//---------\n//Константы\n//---------\n\n//Виды графиков\nconst P8P_CHART_TYPE = {\n BAR: \"bar\",\n LINE: \"line\",\n PIE: \"pie\",\n DOUGHNUT: \"doughnut\"\n};\n\n//Структура элемента набора данных\nconst P8P_CHART_DATASET_SHAPE = prop_types__WEBPACK_IMPORTED_MODULE_2___default().shape({\n label: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string).isRequired,\n borderColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_2___default().string), prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_2___default().string))]),\n backgroundColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_2___default().string), prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_2___default().string))]),\n data: prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_2___default().number)).isRequired,\n items: prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_2___default().object)).isRequired\n});\n\n//-----------\n//Тело модуля\n//-----------\n\n//График\nconst P8PChart = ({\n type,\n title,\n legendPosition,\n options,\n labels,\n datasets,\n onClick,\n style\n}) => {\n //Ссылки на DOM\n const chartCanvasRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n const chartRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n\n //Обработка нажатия на элемент графика\n const handleClick = e => {\n const bar = chartRef.current.getElementsAtEventForMode(e, \"nearest\", {\n intersect: true\n }, true)[0];\n if (onClick && bar) onClick({\n datasetIndex: bar.datasetIndex,\n itemIndex: bar.index,\n item: chartRef.current.data.datasets[bar.datasetIndex].items ? chartRef.current.data.datasets[bar.datasetIndex].items[bar.index] : null\n });\n };\n\n //При подключении к старнице\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (!chartRef.current) {\n const ctx = chartCanvasRef.current.getContext(\"2d\");\n chartRef.current = new chart_js_auto__WEBPACK_IMPORTED_MODULE_1__[\"default\"](ctx, {\n type,\n data: {\n labels: [...labels],\n datasets: [...datasets]\n },\n options: {\n ...options,\n ...{\n responsive: true,\n plugins: {\n legend: {\n display: legendPosition ? true : false,\n position: legendPosition\n },\n title: {\n display: title ? true : false,\n text: title\n }\n }\n },\n onClick: handleClick\n }\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n //При обновлении данных\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (chartRef.current) {\n chartRef.current.data.labels = [...labels];\n chartRef.current.data.datasets = [...datasets];\n chartRef.current.update();\n }\n }, [datasets, labels]);\n\n //Генерация содержимого\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: {\n ...style\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"canvas\", {\n ref: chartCanvasRef\n }));\n};\n\n//Контроль свойств - График\nP8PChart.propTypes = {\n type: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string).isRequired,\n title: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),\n legendPosition: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),\n options: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().object),\n labels: prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_2___default().string)).isRequired,\n datasets: prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf(P8P_CHART_DATASET_SHAPE),\n onClick: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().func),\n style: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().object)\n};\n\n//----------------\n//Интерфейс модуля\n//----------------\n\n\n\n//# sourceURL=webpack://parus_8_panels_plugin/./app/components/p8p_chart.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ P8PChart: () => (/* binding */ P8PChart),\n/* harmony export */ P8P_CHART_TYPE: () => (/* binding */ P8P_CHART_TYPE)\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_2__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var chart_js_auto__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! chart.js/auto */ \"./node_modules/chart.js/auto/auto.js\");\n/*\r\n Парус 8 - Панели мониторинга\r\n Компонент: График\r\n*/\n\n//---------------------\n//Подключение библиотек\n//---------------------\n\n //Классы React\n //Контроль свойств компонента\n //Диаграммы и графики\n\n//---------\n//Константы\n//---------\n\n//Виды графиков\nconst P8P_CHART_TYPE = {\n BAR: \"bar\",\n LINE: \"line\",\n PIE: \"pie\",\n DOUGHNUT: \"doughnut\"\n};\n\n//Структура элемента набора данных\nconst P8P_CHART_DATASET_SHAPE = prop_types__WEBPACK_IMPORTED_MODULE_2___default().shape({\n label: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string).isRequired,\n borderColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_2___default().string), prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_2___default().string))]),\n backgroundColor: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_2___default().string), prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_2___default().string))]),\n data: prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_2___default().number)),\n items: prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_2___default().object))\n});\n\n//-----------\n//Тело модуля\n//-----------\n\n//График\nconst P8PChart = ({\n type,\n title,\n legendPosition,\n options,\n labels,\n datasets,\n onClick,\n style\n}) => {\n //Ссылки на DOM\n const chartCanvasRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n const chartRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n\n //Обработка нажатия на элемент графика\n const handleClick = e => {\n const bar = chartRef.current.getElementsAtEventForMode(e, \"nearest\", {\n intersect: true\n }, true)[0];\n if (onClick && bar) onClick({\n datasetIndex: bar.datasetIndex,\n itemIndex: bar.index,\n item: chartRef.current.data.datasets[bar.datasetIndex].items ? chartRef.current.data.datasets[bar.datasetIndex].items[bar.index] : null\n });\n };\n\n //При подключении к старнице\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (!chartRef.current) {\n const ctx = chartCanvasRef.current.getContext(\"2d\");\n chartRef.current = new chart_js_auto__WEBPACK_IMPORTED_MODULE_1__[\"default\"](ctx, {\n type,\n data: {\n labels: [...labels],\n datasets: [...datasets]\n },\n options: {\n ...options,\n ...{\n responsive: true,\n plugins: {\n legend: {\n display: legendPosition ? true : false,\n position: legendPosition\n },\n title: {\n display: title ? true : false,\n text: title\n }\n }\n },\n onClick: handleClick\n }\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n //При обновлении данных\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (chartRef.current) {\n chartRef.current.data.labels = [...labels];\n chartRef.current.data.datasets = [...datasets];\n chartRef.current.update();\n }\n }, [datasets, labels]);\n\n //Генерация содержимого\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: {\n ...style\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"canvas\", {\n ref: chartCanvasRef\n }));\n};\n\n//Контроль свойств - График\nP8PChart.propTypes = {\n type: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string).isRequired,\n title: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),\n legendPosition: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),\n options: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().object),\n labels: prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_2___default().string)).isRequired,\n datasets: prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf(P8P_CHART_DATASET_SHAPE),\n onClick: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().func),\n style: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().object)\n};\n\n//----------------\n//Интерфейс модуля\n//----------------\n\n\n\n//# sourceURL=webpack://parus_8_panels_plugin/./app/components/p8p_chart.js?"); /***/ }),