{"ast":null,"code":"import _slicedToArray from \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\n\nvar _this = this,\n _jsxFileName = \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/ChartDemo.js\";\n\nimport React, { useEffect, useState } from 'react';\nimport { Chart } from 'primereact/chart';\nvar lineData = {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [{\n label: 'First Dataset',\n data: [65, 59, 80, 81, 56, 55, 40],\n fill: false,\n backgroundColor: '#2f4860',\n borderColor: '#2f4860',\n tension: .4\n }, {\n label: 'Second Dataset',\n data: [28, 48, 40, 19, 86, 27, 90],\n fill: false,\n backgroundColor: '#00bb7e',\n borderColor: '#00bb7e',\n tension: .4\n }]\n};\nvar pieData = {\n labels: ['A', 'B', 'C'],\n datasets: [{\n data: [300, 50, 100],\n backgroundColor: [\"#FF6384\", \"#36A2EB\", \"#FFCE56\"],\n hoverBackgroundColor: [\"#FF6384\", \"#36A2EB\", \"#FFCE56\"]\n }]\n};\nvar polarData = {\n datasets: [{\n data: [11, 16, 7, 3, 14],\n backgroundColor: [\"#FF6384\", \"#4BC0C0\", \"#FFCE56\", \"#E7E9ED\", \"#36A2EB\"],\n label: 'My dataset'\n }],\n labels: [\"Red\", \"Green\", \"Yellow\", \"Grey\", \"Blue\"]\n};\nvar barData = {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [{\n label: 'My First dataset',\n backgroundColor: '#2f4860',\n data: [65, 59, 80, 81, 56, 55, 40]\n }, {\n label: 'My Second dataset',\n backgroundColor: '#00bb7e',\n data: [28, 48, 40, 19, 86, 27, 90]\n }]\n};\nvar doughnutData = {\n labels: ['A', 'B', 'C'],\n datasets: [{\n data: [300, 50, 100],\n backgroundColor: [\"#FF6384\", \"#36A2EB\", \"#FFCE56\"],\n hoverBackgroundColor: [\"#FF6384\", \"#36A2EB\", \"#FFCE56\"]\n }]\n};\nvar radarData = {\n labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],\n datasets: [{\n label: 'My First dataset',\n backgroundColor: 'rgba(179,181,198,0.2)',\n borderColor: 'rgba(179,181,198,1)',\n pointBackgroundColor: 'rgba(179,181,198,1)',\n pointBorderColor: '#fff',\n pointHoverBackgroundColor: '#fff',\n pointHoverBorderColor: 'rgba(179,181,198,1)',\n data: [65, 59, 90, 81, 56, 55, 40]\n }, {\n label: 'My Second dataset',\n backgroundColor: 'rgba(255,99,132,0.2)',\n borderColor: 'rgba(255,99,132,1)',\n pointBackgroundColor: 'rgba(255,99,132,1)',\n pointBorderColor: '#fff',\n pointHoverBackgroundColor: '#fff',\n pointHoverBorderColor: 'rgba(255,99,132,1)',\n data: [28, 48, 40, 19, 96, 27, 100]\n }]\n};\n\nvar ChartDemo = function ChartDemo(props) {\n var _useState = useState(null),\n _useState2 = _slicedToArray(_useState, 2),\n lineOptions = _useState2[0],\n setLineOptions = _useState2[1];\n\n var _useState3 = useState(null),\n _useState4 = _slicedToArray(_useState3, 2),\n barOptions = _useState4[0],\n setBarOptions = _useState4[1];\n\n var _useState5 = useState(null),\n _useState6 = _slicedToArray(_useState5, 2),\n pieOptions = _useState6[0],\n setPieOptions = _useState6[1];\n\n var _useState7 = useState(null),\n _useState8 = _slicedToArray(_useState7, 2),\n polarOptions = _useState8[0],\n setPolarOptions = _useState8[1];\n\n var _useState9 = useState(null),\n _useState10 = _slicedToArray(_useState9, 2),\n radarOptions = _useState10[0],\n setRadarOptions = _useState10[1];\n\n var applyLightTheme = function applyLightTheme() {\n var lineOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#495057'\n }\n }\n },\n scales: {\n x: {\n ticks: {\n color: '#495057'\n },\n grid: {\n color: '#ebedef'\n }\n },\n y: {\n ticks: {\n color: '#495057'\n },\n grid: {\n color: '#ebedef'\n }\n }\n }\n };\n var barOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#495057'\n }\n }\n },\n scales: {\n x: {\n ticks: {\n color: '#495057'\n },\n grid: {\n color: '#ebedef'\n }\n },\n y: {\n ticks: {\n color: '#495057'\n },\n grid: {\n color: '#ebedef'\n }\n }\n }\n };\n var pieOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#495057'\n }\n }\n }\n };\n var polarOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#495057'\n }\n }\n },\n scales: {\n r: {\n grid: {\n color: '#ebedef'\n }\n }\n }\n };\n var radarOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#495057'\n }\n }\n },\n scales: {\n r: {\n grid: {\n color: '#ebedef'\n }\n }\n }\n };\n setLineOptions(lineOptions);\n setBarOptions(barOptions);\n setPieOptions(pieOptions);\n setPolarOptions(polarOptions);\n setRadarOptions(radarOptions);\n };\n\n var applyDarkTheme = function applyDarkTheme() {\n var lineOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#ebedef'\n }\n }\n },\n scales: {\n x: {\n ticks: {\n color: '#ebedef'\n },\n grid: {\n color: 'rgba(160, 167, 181, .3)'\n }\n },\n y: {\n ticks: {\n color: '#ebedef'\n },\n grid: {\n color: 'rgba(160, 167, 181, .3)'\n }\n }\n }\n };\n var barOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#ebedef'\n }\n }\n },\n scales: {\n x: {\n ticks: {\n color: '#ebedef'\n },\n grid: {\n color: 'rgba(160, 167, 181, .3)'\n }\n },\n y: {\n ticks: {\n color: '#ebedef'\n },\n grid: {\n color: 'rgba(160, 167, 181, .3)'\n }\n }\n }\n };\n var pieOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#ebedef'\n }\n }\n }\n };\n var polarOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#ebedef'\n }\n }\n },\n scales: {\n r: {\n grid: {\n color: 'rgba(160, 167, 181, .3)'\n }\n }\n }\n };\n var radarOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#ebedef'\n }\n }\n },\n scales: {\n r: {\n grid: {\n color: 'rgba(160, 167, 181, .3)'\n }\n }\n }\n };\n setLineOptions(lineOptions);\n setBarOptions(barOptions);\n setPieOptions(pieOptions);\n setPolarOptions(polarOptions);\n setRadarOptions(radarOptions);\n };\n\n useEffect(function () {\n if (props.colorMode === 'light') {\n applyLightTheme();\n } else {\n applyDarkTheme();\n }\n }, [props.colorMode]);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid p-fluid\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 366,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 lg:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 367,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 368,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 369,\n columnNumber: 21\n }\n }, \"Linear Chart\"), /*#__PURE__*/React.createElement(Chart, {\n type: \"line\",\n data: lineData,\n options: lineOptions,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 370,\n columnNumber: 21\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"card flex flex-column align-items-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 373,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 374,\n columnNumber: 21\n }\n }, \"Pie Chart\"), /*#__PURE__*/React.createElement(Chart, {\n type: \"pie\",\n data: pieData,\n options: pieOptions,\n style: {\n width: '50%'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 375,\n columnNumber: 21\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"card flex flex-column align-items-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 378,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 379,\n columnNumber: 21\n }\n }, \"Polar Area Chart\"), /*#__PURE__*/React.createElement(Chart, {\n type: \"polarArea\",\n data: polarData,\n options: polarOptions,\n style: {\n width: '50%'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 380,\n columnNumber: 21\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12 lg:col-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 383,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 384,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 385,\n columnNumber: 21\n }\n }, \"Bar Chart\"), /*#__PURE__*/React.createElement(Chart, {\n type: \"bar\",\n data: barData,\n options: barOptions,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 386,\n columnNumber: 21\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"card flex flex-column align-items-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 389,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 390,\n columnNumber: 21\n }\n }, \"Doughnut Chart\"), /*#__PURE__*/React.createElement(Chart, {\n type: \"doughnut\",\n data: doughnutData,\n options: pieOptions,\n style: {\n width: '50%'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 391,\n columnNumber: 21\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"card flex flex-column align-items-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 394,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 395,\n columnNumber: 21\n }\n }, \"Radar Chart\"), /*#__PURE__*/React.createElement(Chart, {\n type: \"radar\",\n data: radarData,\n options: radarOptions,\n style: {\n width: '50%'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 396,\n columnNumber: 21\n }\n }))));\n};\n\nvar comparisonFn = function comparisonFn(prevProps, nextProps) {\n return prevProps.location.pathname === nextProps.location.pathname && prevProps.colorMode === nextProps.colorMode;\n};\n\nexport default React.memo(ChartDemo, comparisonFn);","map":{"version":3,"names":["React","useEffect","useState","Chart","lineData","labels","datasets","label","data","fill","backgroundColor","borderColor","tension","pieData","hoverBackgroundColor","polarData","barData","doughnutData","radarData","pointBackgroundColor","pointBorderColor","pointHoverBackgroundColor","pointHoverBorderColor","ChartDemo","props","lineOptions","setLineOptions","barOptions","setBarOptions","pieOptions","setPieOptions","polarOptions","setPolarOptions","radarOptions","setRadarOptions","applyLightTheme","plugins","legend","color","scales","x","ticks","grid","y","r","applyDarkTheme","colorMode","width","comparisonFn","prevProps","nextProps","location","pathname","memo"],"sources":["/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/ChartDemo.js"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Chart } from 'primereact/chart';\n\nconst lineData = {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [\n {\n label: 'First Dataset',\n data: [65, 59, 80, 81, 56, 55, 40],\n fill: false,\n backgroundColor: '#2f4860',\n borderColor: '#2f4860',\n tension: .4\n },\n {\n label: 'Second Dataset',\n data: [28, 48, 40, 19, 86, 27, 90],\n fill: false,\n backgroundColor: '#00bb7e',\n borderColor: '#00bb7e',\n tension: .4\n }\n ]\n};\n\nconst pieData = {\n labels: ['A', 'B', 'C'],\n datasets: [\n {\n data: [300, 50, 100],\n backgroundColor: [\n \"#FF6384\",\n \"#36A2EB\",\n \"#FFCE56\"\n ],\n hoverBackgroundColor: [\n \"#FF6384\",\n \"#36A2EB\",\n \"#FFCE56\"\n ]\n }\n ]\n};\n\nconst polarData = {\n datasets: [{\n data: [\n 11,\n 16,\n 7,\n 3,\n 14\n ],\n backgroundColor: [\n \"#FF6384\",\n \"#4BC0C0\",\n \"#FFCE56\",\n \"#E7E9ED\",\n \"#36A2EB\"\n ],\n label: 'My dataset'\n }],\n labels: [\n \"Red\",\n \"Green\",\n \"Yellow\",\n \"Grey\",\n \"Blue\"\n ]\n};\n\nconst barData = {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [\n {\n label: 'My First dataset',\n backgroundColor: '#2f4860',\n data: [65, 59, 80, 81, 56, 55, 40]\n },\n {\n label: 'My Second dataset',\n backgroundColor: '#00bb7e',\n data: [28, 48, 40, 19, 86, 27, 90]\n }\n ]\n};\n\nconst doughnutData = {\n labels: ['A', 'B', 'C'],\n datasets: [\n {\n data: [300, 50, 100],\n backgroundColor: [\n \"#FF6384\",\n \"#36A2EB\",\n \"#FFCE56\"\n ],\n hoverBackgroundColor: [\n \"#FF6384\",\n \"#36A2EB\",\n \"#FFCE56\"\n ]\n }\n ]\n};\n\nconst radarData = {\n labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],\n datasets: [\n {\n label: 'My First dataset',\n backgroundColor: 'rgba(179,181,198,0.2)',\n borderColor: 'rgba(179,181,198,1)',\n pointBackgroundColor: 'rgba(179,181,198,1)',\n pointBorderColor: '#fff',\n pointHoverBackgroundColor: '#fff',\n pointHoverBorderColor: 'rgba(179,181,198,1)',\n data: [65, 59, 90, 81, 56, 55, 40]\n },\n {\n label: 'My Second dataset',\n backgroundColor: 'rgba(255,99,132,0.2)',\n borderColor: 'rgba(255,99,132,1)',\n pointBackgroundColor: 'rgba(255,99,132,1)',\n pointBorderColor: '#fff',\n pointHoverBackgroundColor: '#fff',\n pointHoverBorderColor: 'rgba(255,99,132,1)',\n data: [28, 48, 40, 19, 96, 27, 100]\n }\n ]\n};\n\nconst ChartDemo = (props) => {\n const [lineOptions, setLineOptions] = useState(null)\n const [barOptions, setBarOptions] = useState(null)\n const [pieOptions, setPieOptions] = useState(null)\n const [polarOptions, setPolarOptions] = useState(null)\n const [radarOptions, setRadarOptions] = useState(null)\n\n const applyLightTheme = () => {\n const lineOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#495057'\n }\n }\n },\n scales: {\n x: {\n ticks: {\n color: '#495057'\n },\n grid: {\n color: '#ebedef',\n }\n },\n y: {\n ticks: {\n color: '#495057'\n },\n grid: {\n color: '#ebedef',\n }\n },\n }\n };\n\n const barOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#495057'\n }\n }\n },\n scales: {\n x: {\n ticks: {\n color: '#495057'\n },\n grid: {\n color: '#ebedef',\n }\n },\n y: {\n ticks: {\n color: '#495057'\n },\n grid: {\n color: '#ebedef',\n }\n },\n }\n };\n\n const pieOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#495057'\n }\n }\n }\n };\n\n const polarOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#495057'\n }\n }\n },\n scales: {\n r: {\n grid: {\n color: '#ebedef'\n }\n }\n }\n };\n\n const radarOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#495057'\n }\n }\n },\n scales: {\n r: {\n grid: {\n color: '#ebedef'\n }\n }\n }\n };\n\n setLineOptions(lineOptions)\n setBarOptions(barOptions)\n setPieOptions(pieOptions)\n setPolarOptions(polarOptions)\n setRadarOptions(radarOptions)\n\n }\n\n const applyDarkTheme = () => {\n const lineOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#ebedef'\n }\n }\n },\n scales: {\n x: {\n ticks: {\n color: '#ebedef'\n },\n grid: {\n color: 'rgba(160, 167, 181, .3)',\n }\n },\n y: {\n ticks: {\n color: '#ebedef'\n },\n grid: {\n color: 'rgba(160, 167, 181, .3)',\n }\n },\n }\n };\n\n const barOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#ebedef'\n }\n }\n },\n scales: {\n x: {\n ticks: {\n color: '#ebedef'\n },\n grid: {\n color: 'rgba(160, 167, 181, .3)',\n }\n },\n y: {\n ticks: {\n color: '#ebedef'\n },\n grid: {\n color: 'rgba(160, 167, 181, .3)',\n }\n },\n }\n };\n\n const pieOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#ebedef'\n }\n }\n }\n };\n\n const polarOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#ebedef'\n }\n }\n },\n scales: {\n r: {\n grid: {\n color: 'rgba(160, 167, 181, .3)'\n }\n }\n }\n };\n\n const radarOptions = {\n plugins: {\n legend: {\n labels: {\n color: '#ebedef'\n }\n }\n },\n scales: {\n r: {\n grid: {\n color: 'rgba(160, 167, 181, .3)'\n }\n }\n }\n };\n\n setLineOptions(lineOptions)\n setBarOptions(barOptions)\n setPieOptions(pieOptions)\n setPolarOptions(polarOptions)\n setRadarOptions(radarOptions)\n }\n\n useEffect(() => {\n if (props.colorMode === 'light') {\n applyLightTheme();\n } else {\n applyDarkTheme();\n }\n }, [props.colorMode]);\n\n return (\n