Dashboard 중간저장
parent
2bbd80d40b
commit
7936704abd
|
|
@ -22,6 +22,7 @@
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"qs": "^6.11.0",
|
"qs": "^6.11.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
|
"react-apexcharts": "^1.4.0",
|
||||||
"react-bootstrap": "^2.9.0",
|
"react-bootstrap": "^2.9.0",
|
||||||
"react-copy-to-clipboard": "^5.1.0",
|
"react-copy-to-clipboard": "^5.1.0",
|
||||||
"react-csv": "^2.2.2",
|
"react-csv": "^2.2.2",
|
||||||
|
|
@ -5416,6 +5417,12 @@
|
||||||
"resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
|
||||||
"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
|
"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
|
||||||
},
|
},
|
||||||
|
"node_modules/@yr/monotone-cubic-spline": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
"node_modules/abab": {
|
"node_modules/abab": {
|
||||||
"version": "2.0.6",
|
"version": "2.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
|
||||||
|
|
@ -5659,6 +5666,21 @@
|
||||||
"node": ">= 8"
|
"node": ">= 8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/apexcharts": {
|
||||||
|
"version": "3.45.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.45.2.tgz",
|
||||||
|
"integrity": "sha512-PpuM4sJWy70sUh5U1IFn1m1p45MdHSChLUNnqEoUUUHSU2IHZugFrsVNhov1S8Q0cvfdrCRCvdBtHGSs6PSAWQ==",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@yr/monotone-cubic-spline": "^1.0.3",
|
||||||
|
"svg.draggable.js": "^2.2.2",
|
||||||
|
"svg.easing.js": "^2.0.0",
|
||||||
|
"svg.filter.js": "^2.0.2",
|
||||||
|
"svg.pathmorphing.js": "^0.1.3",
|
||||||
|
"svg.resize.js": "^1.4.3",
|
||||||
|
"svg.select.js": "^3.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/arg": {
|
"node_modules/arg": {
|
||||||
"version": "5.0.2",
|
"version": "5.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
|
||||||
|
|
@ -15479,6 +15501,18 @@
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-apexcharts": {
|
||||||
|
"version": "1.4.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.1.tgz",
|
||||||
|
"integrity": "sha512-G14nVaD64Bnbgy8tYxkjuXEUp/7h30Q0U33xc3AwtGFijJB9nHqOt1a6eG0WBn055RgRg+NwqbKGtqPxy15d0Q==",
|
||||||
|
"dependencies": {
|
||||||
|
"prop-types": "^15.8.1"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"apexcharts": "^3.41.0",
|
||||||
|
"react": ">=0.13"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-app-polyfill": {
|
"node_modules/react-app-polyfill": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
|
||||||
|
|
@ -17242,6 +17276,97 @@
|
||||||
"resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
|
||||||
"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
|
"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
|
||||||
},
|
},
|
||||||
|
"node_modules/svg.draggable.js": {
|
||||||
|
"version": "2.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
|
||||||
|
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.0.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.easing.js": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": ">=2.3.x"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.filter.js": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.2.5"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.js": {
|
||||||
|
"version": "2.7.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
|
||||||
|
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"node_modules/svg.pathmorphing.js": {
|
||||||
|
"version": "0.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
|
||||||
|
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.4.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.resize.js": {
|
||||||
|
"version": "1.4.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
|
||||||
|
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.6.5",
|
||||||
|
"svg.select.js": "^2.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.resize.js/node_modules/svg.select.js": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
|
||||||
|
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.2.5"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.select.js": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.6.5"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/svgo": {
|
"node_modules/svgo": {
|
||||||
"version": "1.3.2",
|
"version": "1.3.2",
|
||||||
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
|
||||||
|
|
@ -22742,6 +22867,12 @@
|
||||||
"resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
|
||||||
"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
|
"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
|
||||||
},
|
},
|
||||||
|
"@yr/monotone-cubic-spline": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
"abab": {
|
"abab": {
|
||||||
"version": "2.0.6",
|
"version": "2.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
|
||||||
|
|
@ -22911,6 +23042,21 @@
|
||||||
"picomatch": "^2.0.4"
|
"picomatch": "^2.0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"apexcharts": {
|
||||||
|
"version": "3.45.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.45.2.tgz",
|
||||||
|
"integrity": "sha512-PpuM4sJWy70sUh5U1IFn1m1p45MdHSChLUNnqEoUUUHSU2IHZugFrsVNhov1S8Q0cvfdrCRCvdBtHGSs6PSAWQ==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"@yr/monotone-cubic-spline": "^1.0.3",
|
||||||
|
"svg.draggable.js": "^2.2.2",
|
||||||
|
"svg.easing.js": "^2.0.0",
|
||||||
|
"svg.filter.js": "^2.0.2",
|
||||||
|
"svg.pathmorphing.js": "^0.1.3",
|
||||||
|
"svg.resize.js": "^1.4.3",
|
||||||
|
"svg.select.js": "^3.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"arg": {
|
"arg": {
|
||||||
"version": "5.0.2",
|
"version": "5.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
|
||||||
|
|
@ -30026,6 +30172,14 @@
|
||||||
"loose-envify": "^1.1.0"
|
"loose-envify": "^1.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"react-apexcharts": {
|
||||||
|
"version": "1.4.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.1.tgz",
|
||||||
|
"integrity": "sha512-G14nVaD64Bnbgy8tYxkjuXEUp/7h30Q0U33xc3AwtGFijJB9nHqOt1a6eG0WBn055RgRg+NwqbKGtqPxy15d0Q==",
|
||||||
|
"requires": {
|
||||||
|
"prop-types": "^15.8.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"react-app-polyfill": {
|
"react-app-polyfill": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
|
||||||
|
|
@ -31328,6 +31482,78 @@
|
||||||
"resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
|
||||||
"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
|
"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
|
||||||
},
|
},
|
||||||
|
"svg.draggable.js": {
|
||||||
|
"version": "2.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
|
||||||
|
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"svg.easing.js": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"svg.js": ">=2.3.x"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"svg.filter.js": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.2.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"svg.js": {
|
||||||
|
"version": "2.7.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
|
||||||
|
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"svg.pathmorphing.js": {
|
||||||
|
"version": "0.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
|
||||||
|
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"svg.resize.js": {
|
||||||
|
"version": "1.4.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
|
||||||
|
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.6.5",
|
||||||
|
"svg.select.js": "^2.1.2"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"svg.select.js": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
|
||||||
|
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.2.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"svg.select.js": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"svg.js": "^2.6.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"svgo": {
|
"svgo": {
|
||||||
"version": "1.3.2",
|
"version": "1.3.2",
|
||||||
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,7 @@
|
||||||
"qs": "^6.11.0",
|
"qs": "^6.11.0",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
|
"react-apexcharts": "^1.4.0",
|
||||||
"react-bootstrap": "^2.9.0",
|
"react-bootstrap": "^2.9.0",
|
||||||
"react-csv": "^2.2.2",
|
"react-csv": "^2.2.2",
|
||||||
"react-copy-to-clipboard": "^5.1.0",
|
"react-copy-to-clipboard": "^5.1.0",
|
||||||
|
|
|
||||||
|
|
@ -1,227 +1,250 @@
|
||||||
import React, {useState, useEffect, useCallback, PureComponent} from 'react';
|
import React, {useState, useEffect, useCallback} from 'react'; // PureComponent
|
||||||
import {Link, useLocation} from 'react-router-dom';
|
import {Link} from 'react-router-dom'; //useLocation
|
||||||
|
|
||||||
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} from 'recharts';
|
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} from 'recharts';
|
||||||
|
|
||||||
import * as EgovNet from 'api/egovFetch';
|
import * as EgovNet from 'api/egovFetch';
|
||||||
import URL from 'constants/url';
|
import URL from 'constants/url';
|
||||||
import CODE from 'constants/code';
|
// import CODE from 'constants/code';
|
||||||
|
|
||||||
|
// material-ui
|
||||||
|
import {
|
||||||
|
Avatar,
|
||||||
|
AvatarGroup,
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Grid,
|
||||||
|
List,
|
||||||
|
ListItemAvatar,
|
||||||
|
ListItemButton,
|
||||||
|
ListItemSecondaryAction,
|
||||||
|
ListItemText,
|
||||||
|
MenuItem,
|
||||||
|
Stack,
|
||||||
|
TextField,
|
||||||
|
Typography
|
||||||
|
} from '@mui/material';
|
||||||
|
import MainCard from 'components/cards/MainCard';
|
||||||
|
import IncomeAreaChart from './IncomeAreaChart';
|
||||||
|
import MonthlyBarChart from './MonthlyBarChart';
|
||||||
|
import AnalyticEcommerce from 'components/cards/AnalyticEcommerce';
|
||||||
|
|
||||||
import {default as EgovLeftNav} from 'components/leftmenu/EgovLeftNavAdmin';
|
import {default as EgovLeftNav} from 'components/leftmenu/EgovLeftNavAdmin';
|
||||||
|
|
||||||
function EgovAdminScheduleList(props) {
|
function EgovAdminScheduleList(props) {
|
||||||
console.group("EgovAdminScheduleList");
|
// console.group("EgovAdminScheduleList");
|
||||||
console.log("[Start] EgovAdminScheduleList ------------------------------");
|
// console.log("[Start] EgovAdminScheduleList ------------------------------");
|
||||||
console.log("EgovAdminScheduleList [props] : ", props);
|
// console.log("EgovAdminScheduleList [props] : ", props);
|
||||||
|
|
||||||
const location = useLocation();
|
// const location = useLocation();
|
||||||
console.log("EgovAdminScheduleList [location] : ", location);
|
// console.log("EgovAdminScheduleList [location] : ", location);
|
||||||
|
|
||||||
const DATE = new Date();
|
// const DATE = new Date();
|
||||||
const TODAY = new Date(DATE.getFullYear(), DATE.getMonth(), DATE.getDate());
|
// const TODAY = new Date(DATE.getFullYear(), DATE.getMonth(), DATE.getDate());
|
||||||
|
//
|
||||||
|
// const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || {schdulSe: '', year: TODAY.getFullYear(), month: TODAY.getMonth(), date: TODAY.getDate()});
|
||||||
|
// const [calendarTag, setCalendarTag] = useState([]);
|
||||||
|
//
|
||||||
|
// const [scheduleList, setScheduleList] = useState([]);
|
||||||
|
|
||||||
const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || {schdulSe: '', year: TODAY.getFullYear(), month: TODAY.getMonth(), date: TODAY.getDate()});
|
// const innerConsole = (...args) => {
|
||||||
const [calendarTag, setCalendarTag] = useState([]);
|
// console.log(...args);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const getLastDateOfMonth = (year, month) => {
|
||||||
|
// const LAST_DATE_SUPPLMENT = 1;
|
||||||
|
// return new Date(year, month + LAST_DATE_SUPPLMENT, 0);
|
||||||
|
// }
|
||||||
|
// const getFirstDateOfMonth = (year, month) => {
|
||||||
|
// return new Date(year, month, 1);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const changeDate = (target, amount) => {
|
||||||
|
// let changedDate;
|
||||||
|
//
|
||||||
|
// if (target === CODE.DATE_YEAR) {
|
||||||
|
// changedDate = new Date(searchCondition.year + amount, searchCondition.month, searchCondition.date);
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// if (target === CODE.DATE_MONTH) {
|
||||||
|
// changedDate = new Date(searchCondition.year, searchCondition.month + amount, searchCondition.date);
|
||||||
|
// }
|
||||||
|
// setSearchCondition({...searchCondition, year: changedDate.getFullYear(), month: changedDate.getMonth(), date: changedDate.getDate()});
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const retrieveList = useCallback((srchcnd) => {
|
||||||
|
// console.groupCollapsed("EgovAdminScheduleList.retrieveList()");
|
||||||
|
//
|
||||||
|
// const retrieveListURL = '/schedule/month' + EgovNet.getQueryString(srchcnd);
|
||||||
|
//
|
||||||
|
// const requestOptions = {
|
||||||
|
// method: "GET",
|
||||||
|
// headers: {
|
||||||
|
// 'Content-type': 'application/json',
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// EgovNet.requestFetch(retrieveListURL,
|
||||||
|
// requestOptions,
|
||||||
|
// (resp) => {
|
||||||
|
// setScheduleList(resp.result.resultList);
|
||||||
|
// },
|
||||||
|
// function (resp) {
|
||||||
|
// console.log("err response : ", resp);
|
||||||
|
// }
|
||||||
|
// );
|
||||||
|
// console.groupEnd("EgovAdminScheduleList.retrieveList()");
|
||||||
|
// }, []);
|
||||||
|
|
||||||
|
// const drawCalendar = () => {
|
||||||
|
// console.groupCollapsed("EgovAdminScheduleList.drawCalendar()");
|
||||||
|
// const PREV_MONTH_ADDITION = -1;
|
||||||
|
//
|
||||||
|
// let lastOfLastMonth = getLastDateOfMonth(searchCondition.year, searchCondition.month + PREV_MONTH_ADDITION);
|
||||||
|
// let firstOfThisMonth = getFirstDateOfMonth(searchCondition.year, searchCondition.month);
|
||||||
|
// let lastOfThisMonth = getLastDateOfMonth(searchCondition.year, searchCondition.month);
|
||||||
|
//
|
||||||
|
// console.log("lastOfLastMonth : ", lastOfLastMonth, lastOfLastMonth.getDay());
|
||||||
|
// console.log("firstOfThisMonth :", firstOfThisMonth, firstOfThisMonth.getDay());
|
||||||
|
// console.log("lastOfThisMonth :", lastOfThisMonth, lastOfThisMonth.getDay());
|
||||||
|
// console.log("scheduleList : ", scheduleList);
|
||||||
|
//
|
||||||
|
// let firstDayOfThisMonth = firstOfThisMonth.getDay();
|
||||||
|
// let lastDateOfThisMonth = lastOfThisMonth.getDate();
|
||||||
|
// console.log("firstDayOfThisMonth", firstDayOfThisMonth, "lastDateOfThisMonth", lastDateOfThisMonth)
|
||||||
|
//
|
||||||
|
// let monthArr = [];
|
||||||
|
// let weekArr = [];
|
||||||
|
//
|
||||||
|
// // firstWeek Date Set START
|
||||||
|
// let firstWeekDateCount = 0;
|
||||||
|
// for (let day = 0; day < 7; day++) {
|
||||||
|
// if (day < firstDayOfThisMonth) { //
|
||||||
|
// weekArr.push(0);
|
||||||
|
// firstWeekDateCount = 0;
|
||||||
|
// } else {
|
||||||
|
// weekArr.push(++firstWeekDateCount);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// monthArr.push(weekArr);
|
||||||
|
// console.log("FirstWeek monthArr : ", monthArr);
|
||||||
|
// // firstWeek Date Set END
|
||||||
|
//
|
||||||
|
// // otherWeek Date Set START
|
||||||
|
// let dayCount = 0;
|
||||||
|
// weekArr = [];//초기화
|
||||||
|
// for (let day = firstWeekDateCount + 1; day <= lastDateOfThisMonth; day++) {
|
||||||
|
//
|
||||||
|
// if (dayCount % 7 !== 6) {
|
||||||
|
// weekArr.push(day);
|
||||||
|
// } else {
|
||||||
|
// weekArr.push(day);
|
||||||
|
// monthArr.push(weekArr);
|
||||||
|
// weekArr = [];
|
||||||
|
// dayCount = -1;
|
||||||
|
// }
|
||||||
|
// dayCount++;
|
||||||
|
// }
|
||||||
|
// // otherWeek Date Set END
|
||||||
|
//
|
||||||
|
// // lastWeek Date Set START
|
||||||
|
// if (weekArr.length > 0) {//남은 부분
|
||||||
|
// for (let day = weekArr.length; day < 7; day++) {
|
||||||
|
// weekArr.push(0);
|
||||||
|
// }
|
||||||
|
// monthArr.push(weekArr);
|
||||||
|
// }
|
||||||
|
// // lastWeek Date Set END
|
||||||
|
// console.log("OtherWeek monthArr : ", monthArr);
|
||||||
|
//
|
||||||
|
// let mutsUseYearMonth = searchCondition.year.toString() + ((searchCondition.month + 1).toString().length === 1 ? "0" + (searchCondition.month + 1).toString() : (searchCondition.month + 1).toString());
|
||||||
|
// console.log("mutsUseYearMonth : ", mutsUseYearMonth);
|
||||||
|
//
|
||||||
|
// let mutCalendarTagList = [];
|
||||||
|
// let keyIdx = 0;
|
||||||
|
//
|
||||||
|
// //draw Calendar
|
||||||
|
// monthArr.forEach((week, weekIdx) => {
|
||||||
|
// console.log();
|
||||||
|
// mutCalendarTagList.push(
|
||||||
|
// <tr key={keyIdx++}>{
|
||||||
|
// week.map((day, dayIdx) => {
|
||||||
|
// if (day !== 0) {//당월 일별 구현
|
||||||
|
// let sDate = day.toString().length === 1 ? "0" + day.toString() : day.toString();
|
||||||
|
// let iUseDate = Number(mutsUseYearMonth + sDate);
|
||||||
|
// if (scheduleList.length > 0) {//일정 있는 경우
|
||||||
|
// return (
|
||||||
|
// <td key={keyIdx++}>
|
||||||
|
// <Link to={{pathname: URL.ADMIN_SCHEDULE_CREATE}} state={{iUseDate: mutsUseYearMonth + sDate + "000000"}} className="day"
|
||||||
|
// key={keyIdx++}>{day}</Link><br/>
|
||||||
|
// {
|
||||||
|
// scheduleList.map((schedule, scheduleIdx) => {
|
||||||
|
// let iBeginDate = Number(schedule.schdulBgnde.substring(0, 8));
|
||||||
|
// let iEndDate = Number(schedule.schdulEndde.substring(0, 8));
|
||||||
|
// innerConsole("scheduleList ", day, scheduleIdx, iBeginDate, iUseDate, iEndDate, iUseDate >= iBeginDate && iUseDate <= iEndDate);
|
||||||
|
// innerConsole("schedule.schdulId ", schedule.schdulId);
|
||||||
|
// if (iUseDate >= iBeginDate && iUseDate <= iEndDate) {
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <Link to={{pathname: URL.ADMIN_SCHEDULE_DETAIL}}
|
||||||
|
// state={{schdulId: schedule.schdulId}}
|
||||||
|
// key={keyIdx++}>{schedule.schdulNm}
|
||||||
|
// </Link>
|
||||||
|
// <br/>
|
||||||
|
// </>
|
||||||
|
// );
|
||||||
|
// } else return <></>
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// </td>
|
||||||
|
// );
|
||||||
|
// } else {//일정 없는 경우
|
||||||
|
// return (
|
||||||
|
// <td key={keyIdx++}>
|
||||||
|
// <Link to={{pathname: URL.ADMIN_SCHEDULE_CREATE}} state={{iUseDate: mutsUseYearMonth + sDate + "000000"}} className="day"
|
||||||
|
// key={keyIdx++}>{day}</Link><br/>
|
||||||
|
// </td>);
|
||||||
|
// }
|
||||||
|
// } else if (day === 0) {// 이전달/다음달 구현
|
||||||
|
// return (<td key={keyIdx++}></td>);
|
||||||
|
// } else return <></>
|
||||||
|
// })
|
||||||
|
// }</tr>);
|
||||||
|
// })
|
||||||
|
// console.log("mutCalendarTagList : ", mutCalendarTagList);
|
||||||
|
// setCalendarTag(mutCalendarTagList);
|
||||||
|
// console.groupEnd("EgovAdminScheduleList.drawCalendar()");
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const Location = React.memo(function Location() {
|
||||||
|
// return (
|
||||||
|
// <div className="location">
|
||||||
|
// <ul>
|
||||||
|
// <li><Link to={URL.MAIN} className="home">Home</Link></li>
|
||||||
|
// <li><Link to={URL.ADMIN}>사이트관리</Link></li>
|
||||||
|
// <li>Dashboard</li>
|
||||||
|
// </ul>
|
||||||
|
// </div>
|
||||||
|
// )
|
||||||
|
// });
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// //retrieveList(searchCondition); disabled by thkim
|
||||||
|
// // eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
// }, [searchCondition]);
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// drawCalendar();
|
||||||
|
// // eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
// }, [scheduleList]);
|
||||||
|
|
||||||
const [scheduleList, setScheduleList] = useState([]);
|
|
||||||
const [dailyUserLogList, setDailyUserLogList] = useState([]);
|
const [dailyUserLogList, setDailyUserLogList] = useState([]);
|
||||||
|
const [isDailyChart, setIsDailyChart] = useState(true);
|
||||||
const innerConsole = (...args) => {
|
|
||||||
console.log(...args);
|
|
||||||
}
|
|
||||||
|
|
||||||
const getLastDateOfMonth = (year, month) => {
|
|
||||||
const LAST_DATE_SUPPLMENT = 1;
|
|
||||||
return new Date(year, month + LAST_DATE_SUPPLMENT, 0);
|
|
||||||
}
|
|
||||||
const getFirstDateOfMonth = (year, month) => {
|
|
||||||
return new Date(year, month, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
const changeDate = (target, amount) => {
|
|
||||||
let changedDate;
|
|
||||||
|
|
||||||
if (target === CODE.DATE_YEAR) {
|
|
||||||
changedDate = new Date(searchCondition.year + amount, searchCondition.month, searchCondition.date);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (target === CODE.DATE_MONTH) {
|
|
||||||
changedDate = new Date(searchCondition.year, searchCondition.month + amount, searchCondition.date);
|
|
||||||
}
|
|
||||||
setSearchCondition({...searchCondition, year: changedDate.getFullYear(), month: changedDate.getMonth(), date: changedDate.getDate()});
|
|
||||||
}
|
|
||||||
|
|
||||||
const retrieveList = useCallback((srchcnd) => {
|
|
||||||
console.groupCollapsed("EgovAdminScheduleList.retrieveList()");
|
|
||||||
|
|
||||||
const retrieveListURL = '/schedule/month' + EgovNet.getQueryString(srchcnd);
|
|
||||||
|
|
||||||
const requestOptions = {
|
|
||||||
method: "GET",
|
|
||||||
headers: {
|
|
||||||
'Content-type': 'application/json',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
EgovNet.requestFetch(retrieveListURL,
|
|
||||||
requestOptions,
|
|
||||||
(resp) => {
|
|
||||||
setScheduleList(resp.result.resultList);
|
|
||||||
},
|
|
||||||
function (resp) {
|
|
||||||
console.log("err response : ", resp);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
console.groupEnd("EgovAdminScheduleList.retrieveList()");
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const drawCalendar = () => {
|
|
||||||
console.groupCollapsed("EgovAdminScheduleList.drawCalendar()");
|
|
||||||
const PREV_MONTH_ADDITION = -1;
|
|
||||||
|
|
||||||
let lastOfLastMonth = getLastDateOfMonth(searchCondition.year, searchCondition.month + PREV_MONTH_ADDITION);
|
|
||||||
let firstOfThisMonth = getFirstDateOfMonth(searchCondition.year, searchCondition.month);
|
|
||||||
let lastOfThisMonth = getLastDateOfMonth(searchCondition.year, searchCondition.month);
|
|
||||||
|
|
||||||
console.log("lastOfLastMonth : ", lastOfLastMonth, lastOfLastMonth.getDay());
|
|
||||||
console.log("firstOfThisMonth :", firstOfThisMonth, firstOfThisMonth.getDay());
|
|
||||||
console.log("lastOfThisMonth :", lastOfThisMonth, lastOfThisMonth.getDay());
|
|
||||||
console.log("scheduleList : ", scheduleList);
|
|
||||||
|
|
||||||
let firstDayOfThisMonth = firstOfThisMonth.getDay();
|
|
||||||
let lastDateOfThisMonth = lastOfThisMonth.getDate();
|
|
||||||
console.log("firstDayOfThisMonth", firstDayOfThisMonth, "lastDateOfThisMonth", lastDateOfThisMonth)
|
|
||||||
|
|
||||||
let monthArr = [];
|
|
||||||
let weekArr = [];
|
|
||||||
|
|
||||||
// firstWeek Date Set START
|
|
||||||
let firstWeekDateCount = 0;
|
|
||||||
for (let day = 0; day < 7; day++) {
|
|
||||||
if (day < firstDayOfThisMonth) { //
|
|
||||||
weekArr.push(0);
|
|
||||||
firstWeekDateCount = 0;
|
|
||||||
} else {
|
|
||||||
weekArr.push(++firstWeekDateCount);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
monthArr.push(weekArr);
|
|
||||||
console.log("FirstWeek monthArr : ", monthArr);
|
|
||||||
// firstWeek Date Set END
|
|
||||||
|
|
||||||
// otherWeek Date Set START
|
|
||||||
let dayCount = 0;
|
|
||||||
weekArr = [];//초기화
|
|
||||||
for (let day = firstWeekDateCount + 1; day <= lastDateOfThisMonth; day++) {
|
|
||||||
|
|
||||||
if (dayCount % 7 !== 6) {
|
|
||||||
weekArr.push(day);
|
|
||||||
} else {
|
|
||||||
weekArr.push(day);
|
|
||||||
monthArr.push(weekArr);
|
|
||||||
weekArr = [];
|
|
||||||
dayCount = -1;
|
|
||||||
}
|
|
||||||
dayCount++;
|
|
||||||
}
|
|
||||||
// otherWeek Date Set END
|
|
||||||
|
|
||||||
// lastWeek Date Set START
|
|
||||||
if (weekArr.length > 0) {//남은 부분
|
|
||||||
for (let day = weekArr.length; day < 7; day++) {
|
|
||||||
weekArr.push(0);
|
|
||||||
}
|
|
||||||
monthArr.push(weekArr);
|
|
||||||
}
|
|
||||||
// lastWeek Date Set END
|
|
||||||
console.log("OtherWeek monthArr : ", monthArr);
|
|
||||||
|
|
||||||
let mutsUseYearMonth = searchCondition.year.toString() + ((searchCondition.month + 1).toString().length === 1 ? "0" + (searchCondition.month + 1).toString() : (searchCondition.month + 1).toString());
|
|
||||||
console.log("mutsUseYearMonth : ", mutsUseYearMonth);
|
|
||||||
|
|
||||||
let mutCalendarTagList = [];
|
|
||||||
let keyIdx = 0;
|
|
||||||
|
|
||||||
//draw Calendar
|
|
||||||
monthArr.forEach((week, weekIdx) => {
|
|
||||||
console.log();
|
|
||||||
mutCalendarTagList.push(
|
|
||||||
<tr key={keyIdx++}>{
|
|
||||||
week.map((day, dayIdx) => {
|
|
||||||
if (day !== 0) {//당월 일별 구현
|
|
||||||
let sDate = day.toString().length === 1 ? "0" + day.toString() : day.toString();
|
|
||||||
let iUseDate = Number(mutsUseYearMonth + sDate);
|
|
||||||
if (scheduleList.length > 0) {//일정 있는 경우
|
|
||||||
return (
|
|
||||||
<td key={keyIdx++}>
|
|
||||||
<Link to={{pathname: URL.ADMIN_SCHEDULE_CREATE}} state={{iUseDate: mutsUseYearMonth + sDate + "000000"}} className="day"
|
|
||||||
key={keyIdx++}>{day}</Link><br/>
|
|
||||||
{
|
|
||||||
scheduleList.map((schedule, scheduleIdx) => {
|
|
||||||
let iBeginDate = Number(schedule.schdulBgnde.substring(0, 8));
|
|
||||||
let iEndDate = Number(schedule.schdulEndde.substring(0, 8));
|
|
||||||
innerConsole("scheduleList ", day, scheduleIdx, iBeginDate, iUseDate, iEndDate, iUseDate >= iBeginDate && iUseDate <= iEndDate);
|
|
||||||
innerConsole("schedule.schdulId ", schedule.schdulId);
|
|
||||||
if (iUseDate >= iBeginDate && iUseDate <= iEndDate) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Link to={{pathname: URL.ADMIN_SCHEDULE_DETAIL}}
|
|
||||||
state={{schdulId: schedule.schdulId}}
|
|
||||||
key={keyIdx++}>{schedule.schdulNm}
|
|
||||||
</Link>
|
|
||||||
<br/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
} else return <></>
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</td>
|
|
||||||
);
|
|
||||||
} else {//일정 없는 경우
|
|
||||||
return (
|
|
||||||
<td key={keyIdx++}>
|
|
||||||
<Link to={{pathname: URL.ADMIN_SCHEDULE_CREATE}} state={{iUseDate: mutsUseYearMonth + sDate + "000000"}} className="day"
|
|
||||||
key={keyIdx++}>{day}</Link><br/>
|
|
||||||
</td>);
|
|
||||||
}
|
|
||||||
} else if (day === 0) {// 이전달/다음달 구현
|
|
||||||
return (<td key={keyIdx++}></td>);
|
|
||||||
} else return <></>
|
|
||||||
})
|
|
||||||
}</tr>);
|
|
||||||
})
|
|
||||||
console.log("mutCalendarTagList : ", mutCalendarTagList);
|
|
||||||
setCalendarTag(mutCalendarTagList);
|
|
||||||
console.groupEnd("EgovAdminScheduleList.drawCalendar()");
|
|
||||||
}
|
|
||||||
|
|
||||||
const Location = React.memo(function Location() {
|
|
||||||
return (
|
|
||||||
<div className="location">
|
|
||||||
<ul>
|
|
||||||
<li><Link to={URL.MAIN} className="home">Home</Link></li>
|
|
||||||
<li><Link to={URL.ADMIN}>사이트관리</Link></li>
|
|
||||||
<li>일정관리</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
//retrieveList(searchCondition); disabled by thkim
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [searchCondition]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
drawCalendar();
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [scheduleList]);
|
|
||||||
|
|
||||||
const [isDailyChart, setChart] = useState(true);
|
|
||||||
|
|
||||||
const getDailyUserLogList = useCallback(() => {
|
const getDailyUserLogList = useCallback(() => {
|
||||||
console.groupCollapsed("EgovAdminScheduleList.getDailyUserLogList()");
|
// console.groupCollapsed("EgovAdminScheduleList.getDailyUserLogList()");
|
||||||
|
//
|
||||||
console.log("@@@ isDailyChart : " + isDailyChart);
|
// console.log("@@@ isDailyChart : " + isDailyChart);
|
||||||
|
|
||||||
const dailyUserLogListURL = isDailyChart ? '/admin/dashboard/daily-user-log-list' : '/admin/dashboard/monthly-user-log-list';
|
const dailyUserLogListURL = isDailyChart ? '/admin/dashboard/daily-user-log-list' : '/admin/dashboard/monthly-user-log-list';
|
||||||
|
|
||||||
|
|
@ -236,13 +259,14 @@ function EgovAdminScheduleList(props) {
|
||||||
requestOptions,
|
requestOptions,
|
||||||
(resp) => {
|
(resp) => {
|
||||||
setDailyUserLogList(resp.result.dailyUserLogList);
|
setDailyUserLogList(resp.result.dailyUserLogList);
|
||||||
console.log("@@@ : " + dailyUserLogList);
|
// console.log("@@@ : " + dailyUserLogList);
|
||||||
},
|
},
|
||||||
function (resp) {
|
function (resp) {
|
||||||
console.log("err response : ", resp);
|
// console.log("err response : ", resp);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
console.groupEnd("EgovAdminScheduleList.getDailyUserLogList()");
|
// console.groupEnd("EgovAdminScheduleList.getDailyUserLogList()");
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [isDailyChart]);
|
}, [isDailyChart]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -251,7 +275,7 @@ function EgovAdminScheduleList(props) {
|
||||||
}, [isDailyChart]);
|
}, [isDailyChart]);
|
||||||
|
|
||||||
const handleChartToggle = () => {
|
const handleChartToggle = () => {
|
||||||
setChart(!isDailyChart);
|
setIsDailyChart(!isDailyChart);
|
||||||
};
|
};
|
||||||
|
|
||||||
const ChartToggle = ({onToggle}) => {
|
const ChartToggle = ({onToggle}) => {
|
||||||
|
|
@ -287,42 +311,49 @@ function EgovAdminScheduleList(props) {
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
class UserLogChart extends PureComponent {
|
// class UserLogChart extends PureComponent {
|
||||||
static demoUrl = 'https://codesandbox.io/s/tooltip-with-customized-content-lyxvs';
|
// render() {
|
||||||
|
// return (
|
||||||
|
// <ResponsiveContainer width="100%" height="100%">
|
||||||
|
// <BarChart
|
||||||
|
// width={500}
|
||||||
|
// height={300}
|
||||||
|
// data={data}
|
||||||
|
// margin={{
|
||||||
|
// top: 5,
|
||||||
|
// right: 30,
|
||||||
|
// left: 20,
|
||||||
|
// bottom: 5,
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <CartesianGrid strokeDasharray="3 3"/>
|
||||||
|
// <XAxis dataKey="logDt"/>
|
||||||
|
// <YAxis/>
|
||||||
|
// <Tooltip content={<CustomTooltip/>}/>
|
||||||
|
// <Legend/>
|
||||||
|
// <Bar dataKey="사용자 접속현황" barSize={20} fill="#87CEFA"/>
|
||||||
|
// </BarChart>
|
||||||
|
// </ResponsiveContainer>
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
render() {
|
// console.log("------------------------------EgovAdminScheduleList [End]");
|
||||||
return (
|
// console.groupEnd("EgovAdminScheduleList");
|
||||||
<ResponsiveContainer width="100%" height="100%">
|
const [value, setValue] = useState('today');
|
||||||
<BarChart
|
const [slot, setSlot] = useState('week');
|
||||||
width={500}
|
|
||||||
height={300}
|
|
||||||
data={data}
|
|
||||||
margin={{
|
|
||||||
top: 5,
|
|
||||||
right: 30,
|
|
||||||
left: 20,
|
|
||||||
bottom: 5,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CartesianGrid strokeDasharray="3 3"/>
|
|
||||||
<XAxis dataKey="logDt"/>
|
|
||||||
<YAxis/>
|
|
||||||
<Tooltip content={<CustomTooltip/>}/>
|
|
||||||
<Legend/>
|
|
||||||
<Bar dataKey="사용자 접속현황" barSize={20} fill="#87CEFA"/>
|
|
||||||
</BarChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log("------------------------------EgovAdminScheduleList [End]");
|
|
||||||
console.groupEnd("EgovAdminScheduleList");
|
|
||||||
return (
|
return (
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="c_wrap">
|
<div className="c_wrap">
|
||||||
{/* <!-- Location --> */}
|
{/* <!-- Location --> */}
|
||||||
<Location/>
|
<div className="location">
|
||||||
|
<ul>
|
||||||
|
<li><Link to={URL.MAIN} className="home">Home</Link></li>
|
||||||
|
<li><Link to={URL.ADMIN} >사이트관리</Link></li>
|
||||||
|
<li>Dashboard</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
{/* <!--// Location --> */}
|
{/* <!--// Location --> */}
|
||||||
|
|
||||||
<div className="layout">
|
<div className="layout">
|
||||||
|
|
@ -334,16 +365,299 @@ function EgovAdminScheduleList(props) {
|
||||||
{/* <!-- 본문 --> */}
|
{/* <!-- 본문 --> */}
|
||||||
|
|
||||||
<div className="top_tit">
|
<div className="top_tit">
|
||||||
<h1 className="tit_1">사이트관리</h1>
|
<h1 className="tit_1">Dashboard</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2 className="tit_2"></h2>
|
<Grid container rowSpacing={4.5} columnSpacing={2.75}>
|
||||||
|
{/* row 1 */}
|
||||||
|
{/*<Grid item xs={12} sx={{ mb: -2.25 }}>*/}
|
||||||
|
{/* <Typography variant="h5">Dashboard</Typography>*/}
|
||||||
|
{/*</Grid>*/}
|
||||||
|
<Grid item xs={12} sm={6} md={4} lg={3}>
|
||||||
|
<AnalyticEcommerce title="총접속자수" count="4,42,236" percentage={59.3} extra="35,000" />
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} sm={6} md={4} lg={3}>
|
||||||
|
<AnalyticEcommerce title="총 DB구축 건수" count="78,250" percentage={70.5} extra="8,900" />
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} sm={6} md={4} lg={3}>
|
||||||
|
<AnalyticEcommerce title="최근 1달 기준코드 등록건수" count="18,800" percentage={27.4} isLoss color="warning" extra="1,943" />
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} sm={6} md={4} lg={3}>
|
||||||
|
<AnalyticEcommerce title="미답변 민원건수" count="$35,078" percentage={27.4} isLoss color="warning" extra="$20,395" />
|
||||||
|
</Grid>
|
||||||
|
|
||||||
<ChartToggle isDailyChart={isDailyChart} onToggle={handleChartToggle}/>
|
<Grid item md={8} sx={{ display: { sm: 'none', md: 'block', lg: 'none' } }} />
|
||||||
|
|
||||||
<div style={{width: 1000, height: 300}}>
|
{/* row 2 */}
|
||||||
<UserLogChart/>
|
<Grid item xs={12} md={7} lg={8}>
|
||||||
</div>
|
<Grid container alignItems="center" justifyContent="space-between">
|
||||||
|
<Grid item>
|
||||||
|
<Typography variant="h5">Unique Visitor</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid item>
|
||||||
|
<Stack direction="row" alignItems="center" spacing={0}>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
onClick={() => setSlot('month')}
|
||||||
|
color={slot === 'month' ? 'primary' : 'secondary'}
|
||||||
|
variant={slot === 'month' ? 'outlined' : 'text'}
|
||||||
|
>
|
||||||
|
Month
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
onClick={() => setSlot('week')}
|
||||||
|
color={slot === 'week' ? 'primary' : 'secondary'}
|
||||||
|
variant={slot === 'week' ? 'outlined' : 'text'}
|
||||||
|
>
|
||||||
|
Week
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
<MainCard content={false} sx={{ mt: 1.5 }}>
|
||||||
|
<Box sx={{ pt: 1, pr: 2 }}>
|
||||||
|
<IncomeAreaChart slot={slot} />
|
||||||
|
</Box>
|
||||||
|
</MainCard>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} md={5} lg={4}>
|
||||||
|
<Grid container alignItems="center" justifyContent="space-between">
|
||||||
|
<Grid item>
|
||||||
|
<Typography variant="h5">Income Overview</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid item />
|
||||||
|
</Grid>
|
||||||
|
<MainCard sx={{ mt: 2 }} content={false}>
|
||||||
|
<Box sx={{ p: 3, pb: 0 }}>
|
||||||
|
<Stack spacing={2}>
|
||||||
|
<Typography variant="h6" color="textSecondary">
|
||||||
|
This Week Statistics
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="h3">$7,650</Typography>
|
||||||
|
</Stack>
|
||||||
|
</Box>
|
||||||
|
<MonthlyBarChart />
|
||||||
|
</MainCard>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/*/!* row 3 *!/*/}
|
||||||
|
{/*<Grid item xs={12} md={7} lg={8}>*/}
|
||||||
|
{/* <Grid container alignItems="center" justifyContent="space-between">*/}
|
||||||
|
{/* <Grid item>*/}
|
||||||
|
{/* <Typography variant="h5">Recent Orders</Typography>*/}
|
||||||
|
{/* </Grid>*/}
|
||||||
|
{/* <Grid item />*/}
|
||||||
|
{/* </Grid>*/}
|
||||||
|
{/* <MainCard sx={{ mt: 2 }} content={false}>*/}
|
||||||
|
{/* <OrdersTable />*/}
|
||||||
|
{/* </MainCard>*/}
|
||||||
|
{/*</Grid>*/}
|
||||||
|
{/*<Grid item xs={12} md={5} lg={4}>*/}
|
||||||
|
{/* <Grid container alignItems="center" justifyContent="space-between">*/}
|
||||||
|
{/* <Grid item>*/}
|
||||||
|
{/* <Typography variant="h5">Analytics Report</Typography>*/}
|
||||||
|
{/* </Grid>*/}
|
||||||
|
{/* <Grid item />*/}
|
||||||
|
{/* </Grid>*/}
|
||||||
|
{/* <MainCard sx={{ mt: 2 }} content={false}>*/}
|
||||||
|
{/* <List sx={{ p: 0, '& .MuiListItemButton-root': { py: 2 } }}>*/}
|
||||||
|
{/* <ListItemButton divider>*/}
|
||||||
|
{/* <ListItemText primary="Company Finance Growth" />*/}
|
||||||
|
{/* <Typography variant="h5">+45.14%</Typography>*/}
|
||||||
|
{/* </ListItemButton>*/}
|
||||||
|
{/* <ListItemButton divider>*/}
|
||||||
|
{/* <ListItemText primary="Company Expenses Ratio" />*/}
|
||||||
|
{/* <Typography variant="h5">0.58%</Typography>*/}
|
||||||
|
{/* </ListItemButton>*/}
|
||||||
|
{/* <ListItemButton>*/}
|
||||||
|
{/* <ListItemText primary="Business Risk Cases" />*/}
|
||||||
|
{/* <Typography variant="h5">Low</Typography>*/}
|
||||||
|
{/* </ListItemButton>*/}
|
||||||
|
{/* </List>*/}
|
||||||
|
{/* <ReportAreaChart />*/}
|
||||||
|
{/* </MainCard>*/}
|
||||||
|
{/*</Grid>*/}
|
||||||
|
|
||||||
|
{/*/!* row 4 *!/*/}
|
||||||
|
{/*<Grid item xs={12} md={7} lg={8}>*/}
|
||||||
|
{/* <Grid container alignItems="center" justifyContent="space-between">*/}
|
||||||
|
{/* <Grid item>*/}
|
||||||
|
{/* <Typography variant="h5">Sales Report</Typography>*/}
|
||||||
|
{/* </Grid>*/}
|
||||||
|
{/* <Grid item>*/}
|
||||||
|
{/* <TextField*/}
|
||||||
|
{/* id="standard-select-currency"*/}
|
||||||
|
{/* size="small"*/}
|
||||||
|
{/* select*/}
|
||||||
|
{/* value={value}*/}
|
||||||
|
{/* onChange={(e) => setValue(e.target.value)}*/}
|
||||||
|
{/* sx={{ '& .MuiInputBase-input': { py: 0.5, fontSize: '0.875rem' } }}*/}
|
||||||
|
{/* >*/}
|
||||||
|
{/* {status.map((option) => (*/}
|
||||||
|
{/* <MenuItem key={option.value} value={option.value}>*/}
|
||||||
|
{/* {option.label}*/}
|
||||||
|
{/* </MenuItem>*/}
|
||||||
|
{/* ))}*/}
|
||||||
|
{/* </TextField>*/}
|
||||||
|
{/* </Grid>*/}
|
||||||
|
{/* </Grid>*/}
|
||||||
|
{/* <MainCard sx={{ mt: 1.75 }}>*/}
|
||||||
|
{/* <Stack spacing={1.5} sx={{ mb: -12 }}>*/}
|
||||||
|
{/* <Typography variant="h6" color="secondary">*/}
|
||||||
|
{/* Net Profit*/}
|
||||||
|
{/* </Typography>*/}
|
||||||
|
{/* <Typography variant="h4">$1560</Typography>*/}
|
||||||
|
{/* </Stack>*/}
|
||||||
|
{/* <SalesColumnChart />*/}
|
||||||
|
{/* </MainCard>*/}
|
||||||
|
{/*</Grid>*/}
|
||||||
|
{/*<Grid item xs={12} md={5} lg={4}>*/}
|
||||||
|
{/* <Grid container alignItems="center" justifyContent="space-between">*/}
|
||||||
|
{/* <Grid item>*/}
|
||||||
|
{/* <Typography variant="h5">Transaction History</Typography>*/}
|
||||||
|
{/* </Grid>*/}
|
||||||
|
{/* <Grid item />*/}
|
||||||
|
{/* </Grid>*/}
|
||||||
|
{/* <MainCard sx={{ mt: 2 }} content={false}>*/}
|
||||||
|
{/* <List*/}
|
||||||
|
{/* component="nav"*/}
|
||||||
|
{/* sx={{*/}
|
||||||
|
{/* px: 0,*/}
|
||||||
|
{/* py: 0,*/}
|
||||||
|
{/* '& .MuiListItemButton-root': {*/}
|
||||||
|
{/* py: 1.5,*/}
|
||||||
|
{/* '& .MuiAvatar-root': avatarSX,*/}
|
||||||
|
{/* '& .MuiListItemSecondaryAction-root': { ...actionSX, position: 'relative' }*/}
|
||||||
|
{/* }*/}
|
||||||
|
{/* }}*/}
|
||||||
|
{/* >*/}
|
||||||
|
{/* <ListItemButton divider>*/}
|
||||||
|
{/* <ListItemAvatar>*/}
|
||||||
|
{/* <Avatar*/}
|
||||||
|
{/* sx={{*/}
|
||||||
|
{/* color: 'success.main',*/}
|
||||||
|
{/* bgcolor: 'success.lighter'*/}
|
||||||
|
{/* }}*/}
|
||||||
|
{/* >*/}
|
||||||
|
{/* <GiftOutlined />*/}
|
||||||
|
{/* </Avatar>*/}
|
||||||
|
{/* </ListItemAvatar>*/}
|
||||||
|
{/* <ListItemText primary={<Typography variant="subtitle1">Order #002434</Typography>} secondary="Today, 2:00 AM" />*/}
|
||||||
|
{/* <ListItemSecondaryAction>*/}
|
||||||
|
{/* <Stack alignItems="flex-end">*/}
|
||||||
|
{/* <Typography variant="subtitle1" noWrap>*/}
|
||||||
|
{/* + $1,430*/}
|
||||||
|
{/* </Typography>*/}
|
||||||
|
{/* <Typography variant="h6" color="secondary" noWrap>*/}
|
||||||
|
{/* 78%*/}
|
||||||
|
{/* </Typography>*/}
|
||||||
|
{/* </Stack>*/}
|
||||||
|
{/* </ListItemSecondaryAction>*/}
|
||||||
|
{/* </ListItemButton>*/}
|
||||||
|
{/* <ListItemButton divider>*/}
|
||||||
|
{/* <ListItemAvatar>*/}
|
||||||
|
{/* <Avatar*/}
|
||||||
|
{/* sx={{*/}
|
||||||
|
{/* color: 'primary.main',*/}
|
||||||
|
{/* bgcolor: 'primary.lighter'*/}
|
||||||
|
{/* }}*/}
|
||||||
|
{/* >*/}
|
||||||
|
{/* <MessageOutlined />*/}
|
||||||
|
{/* </Avatar>*/}
|
||||||
|
{/* </ListItemAvatar>*/}
|
||||||
|
{/* <ListItemText primary={<Typography variant="subtitle1">Order #984947</Typography>} secondary="5 August, 1:45 PM" />*/}
|
||||||
|
{/* <ListItemSecondaryAction>*/}
|
||||||
|
{/* <Stack alignItems="flex-end">*/}
|
||||||
|
{/* <Typography variant="subtitle1" noWrap>*/}
|
||||||
|
{/* + $302*/}
|
||||||
|
{/* </Typography>*/}
|
||||||
|
{/* <Typography variant="h6" color="secondary" noWrap>*/}
|
||||||
|
{/* 8%*/}
|
||||||
|
{/* </Typography>*/}
|
||||||
|
{/* </Stack>*/}
|
||||||
|
{/* </ListItemSecondaryAction>*/}
|
||||||
|
{/* </ListItemButton>*/}
|
||||||
|
{/* <ListItemButton>*/}
|
||||||
|
{/* <ListItemAvatar>*/}
|
||||||
|
{/* <Avatar*/}
|
||||||
|
{/* sx={{*/}
|
||||||
|
{/* color: 'error.main',*/}
|
||||||
|
{/* bgcolor: 'error.lighter'*/}
|
||||||
|
{/* }}*/}
|
||||||
|
{/* >*/}
|
||||||
|
{/* <SettingOutlined />*/}
|
||||||
|
{/* </Avatar>*/}
|
||||||
|
{/* </ListItemAvatar>*/}
|
||||||
|
{/* <ListItemText primary={<Typography variant="subtitle1">Order #988784</Typography>} secondary="7 hours ago" />*/}
|
||||||
|
{/* <ListItemSecondaryAction>*/}
|
||||||
|
{/* <Stack alignItems="flex-end">*/}
|
||||||
|
{/* <Typography variant="subtitle1" noWrap>*/}
|
||||||
|
{/* + $682*/}
|
||||||
|
{/* </Typography>*/}
|
||||||
|
{/* <Typography variant="h6" color="secondary" noWrap>*/}
|
||||||
|
{/* 16%*/}
|
||||||
|
{/* </Typography>*/}
|
||||||
|
{/* </Stack>*/}
|
||||||
|
{/* </ListItemSecondaryAction>*/}
|
||||||
|
{/* </ListItemButton>*/}
|
||||||
|
{/* </List>*/}
|
||||||
|
{/* </MainCard>*/}
|
||||||
|
{/* <MainCard sx={{ mt: 2 }}>*/}
|
||||||
|
{/* <Stack spacing={3}>*/}
|
||||||
|
{/* <Grid container justifyContent="space-between" alignItems="center">*/}
|
||||||
|
{/* <Grid item>*/}
|
||||||
|
{/* <Stack>*/}
|
||||||
|
{/* <Typography variant="h5" noWrap>*/}
|
||||||
|
{/* Help & Support Chat*/}
|
||||||
|
{/* </Typography>*/}
|
||||||
|
{/* <Typography variant="caption" color="secondary" noWrap>*/}
|
||||||
|
{/* Typical replay within 5 min*/}
|
||||||
|
{/* </Typography>*/}
|
||||||
|
{/* </Stack>*/}
|
||||||
|
{/* </Grid>*/}
|
||||||
|
{/* <Grid item>*/}
|
||||||
|
{/* <AvatarGroup sx={{ '& .MuiAvatar-root': { width: 32, height: 32 } }}>*/}
|
||||||
|
{/* <Avatar alt="Remy Sharp" src={avatar1} />*/}
|
||||||
|
{/* <Avatar alt="Travis Howard" src={avatar2} />*/}
|
||||||
|
{/* <Avatar alt="Cindy Baker" src={avatar3} />*/}
|
||||||
|
{/* <Avatar alt="Agnes Walker" src={avatar4} />*/}
|
||||||
|
{/* </AvatarGroup>*/}
|
||||||
|
{/* </Grid>*/}
|
||||||
|
{/* </Grid>*/}
|
||||||
|
{/* <Button size="small" variant="contained" sx={{ textTransform: 'capitalize' }}>*/}
|
||||||
|
{/* Need Help?*/}
|
||||||
|
{/* </Button>*/}
|
||||||
|
{/* </Stack>*/}
|
||||||
|
{/* </MainCard>*/}
|
||||||
|
{/*</Grid>*/}
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
|
||||||
|
{/*<ChartToggle isDailyChart={isDailyChart} onToggle={handleChartToggle}/>*/}
|
||||||
|
|
||||||
|
{/*<div style={{width: 1000, height: 300}}>*/}
|
||||||
|
{/* <ResponsiveContainer width="100%" height="100%">*/}
|
||||||
|
{/* <BarChart*/}
|
||||||
|
{/* width={500}*/}
|
||||||
|
{/* height={300}*/}
|
||||||
|
{/* data={data}*/}
|
||||||
|
{/* margin={{*/}
|
||||||
|
{/* top: 5,*/}
|
||||||
|
{/* right: 30,*/}
|
||||||
|
{/* left: 20,*/}
|
||||||
|
{/* bottom: 5,*/}
|
||||||
|
{/* }}*/}
|
||||||
|
{/* >*/}
|
||||||
|
{/* <CartesianGrid strokeDasharray="3 3"/>*/}
|
||||||
|
{/* <XAxis dataKey="logDt"/>*/}
|
||||||
|
{/* <YAxis/>*/}
|
||||||
|
{/* <Tooltip content={<CustomTooltip/>}/>*/}
|
||||||
|
{/* <Legend/>*/}
|
||||||
|
{/* <Bar dataKey="사용자 접속현황" barSize={20} fill="#87CEFA"/>*/}
|
||||||
|
{/* </BarChart>*/}
|
||||||
|
{/* </ResponsiveContainer>*/}
|
||||||
|
{/*</div>*/}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,121 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
// material-ui
|
||||||
|
import { useTheme } from '@mui/material/styles';
|
||||||
|
|
||||||
|
// third-party
|
||||||
|
import ReactApexChart from 'react-apexcharts';
|
||||||
|
|
||||||
|
// chart options
|
||||||
|
const areaChartOptions = {
|
||||||
|
chart: {
|
||||||
|
height: 450,
|
||||||
|
type: 'area',
|
||||||
|
toolbar: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
curve: 'smooth',
|
||||||
|
width: 2
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
strokeDashArray: 0
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ==============================|| INCOME AREA CHART ||============================== //
|
||||||
|
|
||||||
|
const IncomeAreaChart = ({ slot }) => {
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
|
const { primary, secondary } = theme.palette.text;
|
||||||
|
const line = theme.palette.divider;
|
||||||
|
|
||||||
|
const [options, setOptions] = useState(areaChartOptions);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setOptions((prevState) => ({
|
||||||
|
...prevState,
|
||||||
|
colors: [theme.palette.primary.main, theme.palette.primary[700]],
|
||||||
|
xaxis: {
|
||||||
|
categories:
|
||||||
|
slot === 'month'
|
||||||
|
? ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||||
|
: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: [
|
||||||
|
secondary,
|
||||||
|
secondary,
|
||||||
|
secondary,
|
||||||
|
secondary,
|
||||||
|
secondary,
|
||||||
|
secondary,
|
||||||
|
secondary,
|
||||||
|
secondary,
|
||||||
|
secondary,
|
||||||
|
secondary,
|
||||||
|
secondary,
|
||||||
|
secondary
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisBorder: {
|
||||||
|
show: true,
|
||||||
|
color: line
|
||||||
|
},
|
||||||
|
tickAmount: slot === 'month' ? 11 : 7
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: [secondary]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
borderColor: line
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
theme: 'light'
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
}, [primary, secondary, line, theme, slot]);
|
||||||
|
|
||||||
|
const [series, setSeries] = useState([
|
||||||
|
{
|
||||||
|
name: 'Page Views',
|
||||||
|
data: [0, 86, 28, 115, 48, 210, 136]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Sessions',
|
||||||
|
data: [0, 43, 14, 56, 24, 105, 68]
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setSeries([
|
||||||
|
{
|
||||||
|
name: 'Page Views',
|
||||||
|
data: slot === 'month' ? [76, 85, 101, 98, 87, 105, 91, 114, 94, 86, 115, 35] : [31, 40, 28, 51, 42, 109, 100]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Sessions',
|
||||||
|
data: slot === 'month' ? [110, 60, 150, 35, 60, 36, 26, 45, 65, 52, 53, 41] : [11, 32, 45, 32, 34, 52, 41]
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
}, [slot]);
|
||||||
|
|
||||||
|
return <ReactApexChart options={options} series={series} type="area" height={450} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
IncomeAreaChart.propTypes = {
|
||||||
|
slot: PropTypes.string
|
||||||
|
};
|
||||||
|
|
||||||
|
export default IncomeAreaChart;
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
// material-ui
|
||||||
|
import { useTheme } from '@mui/material/styles';
|
||||||
|
|
||||||
|
// third-party
|
||||||
|
import ReactApexChart from 'react-apexcharts';
|
||||||
|
|
||||||
|
// chart options
|
||||||
|
const barChartOptions = {
|
||||||
|
chart: {
|
||||||
|
type: 'bar',
|
||||||
|
height: 365,
|
||||||
|
toolbar: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
columnWidth: '45%',
|
||||||
|
borderRadius: 4
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
|
||||||
|
axisBorder: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTicks: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ==============================|| MONTHLY BAR CHART ||============================== //
|
||||||
|
|
||||||
|
const MonthlyBarChart = () => {
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
|
const { primary, secondary } = theme.palette.text;
|
||||||
|
const info = theme.palette.info.light;
|
||||||
|
|
||||||
|
const [series] = useState([
|
||||||
|
{
|
||||||
|
data: [80, 95, 70, 42, 65, 55, 78]
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [options, setOptions] = useState(barChartOptions);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setOptions((prevState) => ({
|
||||||
|
...prevState,
|
||||||
|
colors: [info],
|
||||||
|
xaxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: [secondary, secondary, secondary, secondary, secondary, secondary, secondary]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
theme: 'light'
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [primary, info, secondary]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id="chart">
|
||||||
|
<ReactApexChart options={options} series={series} type="bar" height={365} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MonthlyBarChart;
|
||||||
Loading…
Reference in New Issue