From 13625d722a421441c1edc6eb1256b7e20f20544d Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Sun, 26 Nov 2023 02:36:07 -0800 Subject: use SSR for rendering graph + transition demo to PhaseConnect - I like Phase Connect --- .gitignore | 1 + backend/data/exclude_channel.txt | 119 ++--------------- backend/data/last_refresh.txt | 2 +- backend/graph.py | 2 +- backend/index.html | 14 ++ backend/sql_table_config.json | 2 +- package.json | 1 + pnpm-lock.yaml | 146 +++++++++++++++++++++ src/app/globals.css | 1 + src/app/layout.tsx | 2 +- src/app/page.tsx | 2 +- src/components/DataChart/DataChart.tsx | 64 +++------ src/components/Footer/Footer.tsx | 10 +- src/components/SubscriberTable/SubscriberTable.tsx | 2 +- src/components/TitleBar/TitleBar.tsx | 26 ++-- src/components/TitleBar/TitleBarStyle.css | 1 + src/pages/stats/[slug].tsx | 77 +++++++---- 17 files changed, 268 insertions(+), 204 deletions(-) create mode 100644 backend/index.html create mode 100644 src/components/TitleBar/TitleBarStyle.css diff --git a/.gitignore b/.gitignore index fd3dbb5..61221a0 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,4 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts +.idea \ No newline at end of file diff --git a/backend/data/exclude_channel.txt b/backend/data/exclude_channel.txt index 314b524..760a480 100644 --- a/backend/data/exclude_channel.txt +++ b/backend/data/exclude_channel.txt @@ -1,111 +1,8 @@ -UCX7YkU9nEeaoZbkVLVajcMg -UCwi4P78SVunSYAGrvC9aKcw -UCNRh9kkByBTYLo0IJupnAug -C4Jyg9gFStHO8r5n4ya7XCQ -UCStzBFfjwFYb0qSYHnzFZvw -UCrhf6HYKnV6bxyaB6ooJzbw -UCfki3lMEF6SGBFiFfo9kvUA -UCtHFXfrn52juTqGBN4WbMVw -UCbLgcjfsUaCUgJh9SVit8kw -UC_D2DNy-KUNQJ_NGMppgmyg -UCxWcO9CLti4uouUIS5IIF-Q -UC4Jyg9gFStHO8r5n4ya7XCQ -UCz6vnIbgiqFT9xUcD6Bp65Q -UC-JSeFfovhNsEhftt1WHMvg -UC0PwyIlUefx1LGWjFI0QjMg -UCRzHROJUp7Wg900p_fXtJtQ -UC2NtHPaDUA5htYsjVrO8Gng -UCLSzgV37Dt24T8p3-TNiSLg -UC8vZcu6W-EJ6UYEy_C31c-A -UCh00mQw8BCrTbchYWGz4JTQ -UCWwwXXd_RPzj3LAyEfBslsg -UCINqoksO3CQPCt8a-mRe-Ew -UCF1JdALrXgub24weQpqDy9Q -UCvQIBipkXlXXVdGga9sn8dw -UCKQi12nOGZsJ5nOuCTHErmA -UCSUZugdxy9Wcrkp781cFt1w -UCTi_rzf5QIkXjhJjkbcAdTg -UCpfjQCCavrO-rnKaAaIF9dg -UCX7YkU9nEeaoZbkVLVajcMg -UCwi4P78SVunSYAGrvC9aKcw -UCNRh9kkByBTYLo0IJupnAug -C4Jyg9gFStHO8r5n4ya7XCQ -UCStzBFfjwFYb0qSYHnzFZvw -UCrhf6HYKnV6bxyaB6ooJzbw -UCfki3lMEF6SGBFiFfo9kvUA -UCtHFXfrn52juTqGBN4WbMVw -UCbLgcjfsUaCUgJh9SVit8kw -UC_D2DNy-KUNQJ_NGMppgmyg -UCxWcO9CLti4uouUIS5IIF-Q -UC4Jyg9gFStHO8r5n4ya7XCQ -UCz6vnIbgiqFT9xUcD6Bp65Q -UC-JSeFfovhNsEhftt1WHMvg -UC0PwyIlUefx1LGWjFI0QjMg -UCRzHROJUp7Wg900p_fXtJtQ -UC2NtHPaDUA5htYsjVrO8Gng -UCLSzgV37Dt24T8p3-TNiSLg -UC8vZcu6W-EJ6UYEy_C31c-A -UCh00mQw8BCrTbchYWGz4JTQ -UCWwwXXd_RPzj3LAyEfBslsg -UCINqoksO3CQPCt8a-mRe-Ew -UCF1JdALrXgub24weQpqDy9Q -UCvQIBipkXlXXVdGga9sn8dw -UCKQi12nOGZsJ5nOuCTHErmA -UCSUZugdxy9Wcrkp781cFt1w -UCTi_rzf5QIkXjhJjkbcAdTg -UCpfjQCCavrO-rnKaAaIF9dg -UC0lik9pHju6ONgkBh7N5wHw -UC1ZV7KBscK0EMoJKFu1DnDg -UC69URn8iP4u8D_zUp-IJ1sg -UC6oW4FXETgEGOFTxWmI2h5Q -UC6WU2SrnG019ucm_bdY6qxQ -UC8oPnditPSp5lZu45fnXWCA -UC9oudjCTHL2BfwxfDwI18eg -UC_a1ZYZ8ZTXpjg9xUY9sj8w -UC_aB_-PHLFHiP61djM0oOiQ -UCb5JxV6vKlYVknoJB8TnyYg -UCbLgcjfsUaCUgJh9SVit8kw -UCCJcCWrbQzz6eDhX4M1CUwg -UCCVwhI5trmaSxfcze_Ovzfw -UCF1JdALrXgub24weQpqDy9Q -UCFaDvgez8USXHiKidt0NtZg -UCfki3lMEF6SGBFiFfo9kvUA -UCfM_A7lE6LkGrzx6_mOtI4g -UCi6nV5Z2dzFuXBzLG3P9zqQ -UCIairB9UMDvqSKfMdv1jmjg -UCIJ9zP6gIkT8BB4Lz4UYPhA -UCJ6LH4jMNy0JN9RSThz1mMQ -UCjGE11ZnF0JSR8egVAwh-3A -UCks41vQN-hN-1KHmpZyPY3A -UCLpYMk5h1bq8_GAFVBgXhPQ -UCLSzgV37Dt24T8p3-TNiSLg -UCmWqYB6y8gSfPONWGspuOWQ -UCNUgrFCo2Hr_VXc9bEwjcHQ -UCOmjciHZ8Au3iKMElKXCF_g -UCP2o-o6u4uX3uq1hXspl0rg -UCqEp6RdtsMbUNrCdCswr6pA -UCqQV8xEBWd5SVZBLlYrS_5Q -UCRzHROJUp7Wg900p_fXtJtQ -UCSc_KzY_9WYAx9LghggjVRA -UCSlv7Z-4q7_7NRkzJB10A5Q -UCStzBFfjwFYb0qSYHnzFZvw -UCufQu4q65z63IgE4cfKs1BQ -UCuz0vzQgC8LRdS6lVV0UkUg -UCveZ9Ic1VtcXbsyaBgxPMvg -UCwcyyxn6h9ex4sMXGtpQE_g -UCwQ9Uv-m8xkE5PzRc7Bqx3Q -UCyqzU2nq7eGNi4kN0uHx7TA -UCZgRRTDMYwHpQ7sCl0aCp2Q -UCzMAP-oh5-pC8j6RlCPf26w -UC5qSx7KzdRwbsO1QmJc4d-w -UC5yckZliCkuaEFbqzLBD7hQ -UCA3WE2WRSpoIvtnoVGq4VAw -UCe_p3YEuYJb8Np0Ip9dk-FQ -UCeShTCVgZyq2lsBW9QwIJcw -UCIBj1-d71vKjRftiauF50pg -UCIM92Ok_spNKLVB5TsgwseQ -UCk5r533QVMgJUdWwqegH2TA -UCkieJGn3pgJikVW8gmMXE2w -UCoWH3sDpeXG1aXmOxveX4KA -UCrR7JxkbeLY82e8gsj_I0pQ -UCZ5dNZsqBjBzbBl0l_IdmXg +UCRW3qJuYP8aODl7_5TXn_nw +UCx7aPMHI_kK1CP6zSvilHSA +UCL0_lYZwyhbcNX-feoyCcJw +UCkDfBt3R64R2rRIrAQwldeQ +UCa_EIfw5I5uDlwsK6sc-83Q +UC3-Rfh_Ek-s6EUWS4fT5VPw +UCUC1EIq0MtF-kctHPtQzIjQ +UCvmSVAwFc5MJwQowsDvCTuw diff --git a/backend/data/last_refresh.txt b/backend/data/last_refresh.txt index 07602c3..0f7ae5c 100644 --- a/backend/data/last_refresh.txt +++ b/backend/data/last_refresh.txt @@ -1 +1 @@ -2023-11-18 \ No newline at end of file +2023-11-26 \ No newline at end of file diff --git a/backend/graph.py b/backend/graph.py index 16c6f6e..815c1ea 100644 --- a/backend/graph.py +++ b/backend/graph.py @@ -5,7 +5,7 @@ import math from datetime import datetime, timedelta import numpy as np -def plot_subscriber_count_over_time(server, table_name, gtitle = "Subscriber Count Over Time for Nijisanji Members", +def plot_subscriber_count_over_time(server, table_name, gtitle = "Subscriber Count Over Time for Phase Connect Members", overrideQuery = None, markers = "lines", exclude_channels = []): warnings.filterwarnings('ignore') # Ignore pandas warning regarding pyodbc query = f"SELECT name, subscriber_count, timestamp, channel_id FROM {table_name} ORDER by timestamp DESC" if overrideQuery is None else overrideQuery diff --git a/backend/index.html b/backend/index.html new file mode 100644 index 0000000..3d7fe4c --- /dev/null +++ b/backend/index.html @@ -0,0 +1,14 @@ + + + +
+
+ + \ No newline at end of file diff --git a/backend/sql_table_config.json b/backend/sql_table_config.json index e77ff10..0a2ebc3 100644 --- a/backend/sql_table_config.json +++ b/backend/sql_table_config.json @@ -5,5 +5,5 @@ "DAILY_HEADER": "channel_id, sub_diff", "HISTORICAL_COLUMNS": "id INT PRIMARY KEY AUTO_INCREMENT, channel_id VARCHAR(255), profile_pic VARCHAR(255), name VARCHAR(255), subscriber_count INT, timestamp DATETIME", "HISTORICAL_HEADER": "channel_id, profile_pic, name, subscriber_count, timestamp", - "HOLODEX_ORGS": "Nijisanji" + "HOLODEX_ORGS": "Phase%20Connect" } diff --git a/package.json b/package.json index 4213d6c..1e09f7a 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "react": "^18", "react-bootstrap": "^2.9.1", "react-chartjs-2": "^5.2.0", + "react-charts": "3.0.0-beta.57", "react-dom": "^18", "tailwind-merge": "^2.0.0", "tailwindcss-animate": "^1.0.7" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a721549..41d2159 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -50,6 +50,9 @@ dependencies: react-chartjs-2: specifier: ^5.2.0 version: 5.2.0(chart.js@4.4.0)(react@18.2.0) + react-charts: + specifier: 3.0.0-beta.57 + version: 3.0.0-beta.57(react-dom@18.2.0)(react@18.2.0) react-dom: specifier: ^18 version: 18.2.0(react@18.2.0) @@ -499,6 +502,30 @@ packages: tslib: 2.6.2 dev: false + /@types/d3-array@3.2.1: + resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==} + dev: false + + /@types/d3-path@3.0.2: + resolution: {integrity: sha512-WAIEVlOCdd/NKRYTsqCpOMHQHemKBEINf8YXMYOtXH0GA7SY0dqMB78P3Uhgfy+4X+/Mlw2wDtlETkN6kQUCMA==} + dev: false + + /@types/d3-scale@4.0.8: + resolution: {integrity: sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==} + dependencies: + '@types/d3-time': 3.0.3 + dev: false + + /@types/d3-shape@3.1.6: + resolution: {integrity: sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==} + dependencies: + '@types/d3-path': 3.0.2 + dev: false + + /@types/d3-time@3.0.3: + resolution: {integrity: sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==} + dev: false + /@types/json5@0.0.29: resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} dev: true @@ -512,6 +539,16 @@ packages: /@types/prop-types@15.7.10: resolution: {integrity: sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A==} + /@types/raf@3.4.3: + resolution: {integrity: sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==} + dev: false + + /@types/react-dom@17.0.25: + resolution: {integrity: sha512-urx7A7UxkZQmThYA4So0NelOVjx3V4rNFVJwp0WZlbIK5eM4rNJDiN3R/E9ix0MBh6kAEojk/9YL+Te6D9zHNA==} + dependencies: + '@types/react': 17.0.71 + dev: false + /@types/react-dom@18.2.15: resolution: {integrity: sha512-HWMdW+7r7MR5+PZqJF6YFNSCtjz1T0dsvo/f1BV6HkV+6erD/nA7wd9NM00KVG83zf2nJ7uATPO9ttdIPvi3gg==} dependencies: @@ -523,6 +560,14 @@ packages: '@types/react': 18.2.37 dev: false + /@types/react@17.0.71: + resolution: {integrity: sha512-lfqOu9mp16nmaGRrS8deS2Taqhd5Ih0o92Te5Ws6I1py4ytHBcXLqh0YIqVsViqwVI5f+haiFM6hju814BzcmA==} + dependencies: + '@types/prop-types': 15.7.10 + '@types/scheduler': 0.16.6 + csstype: 3.1.2 + dev: false + /@types/react@18.2.37: resolution: {integrity: sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==} dependencies: @@ -942,6 +987,71 @@ packages: /csstype@3.1.2: resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} + /d3-array@2.12.1: + resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==} + dependencies: + internmap: 1.0.1 + dev: false + + /d3-color@2.0.0: + resolution: {integrity: sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==} + dev: false + + /d3-delaunay@5.3.0: + resolution: {integrity: sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==} + dependencies: + delaunator: 4.0.1 + dev: false + + /d3-format@2.0.0: + resolution: {integrity: sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==} + dev: false + + /d3-interpolate@2.0.1: + resolution: {integrity: sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==} + dependencies: + d3-color: 2.0.0 + dev: false + + /d3-path@2.0.0: + resolution: {integrity: sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA==} + dev: false + + /d3-scale@3.3.0: + resolution: {integrity: sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==} + dependencies: + d3-array: 2.12.1 + d3-format: 2.0.0 + d3-interpolate: 2.0.1 + d3-time: 2.1.1 + d3-time-format: 3.0.0 + dev: false + + /d3-shape@2.1.0: + resolution: {integrity: sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==} + dependencies: + d3-path: 2.0.0 + dev: false + + /d3-time-format@3.0.0: + resolution: {integrity: sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==} + dependencies: + d3-time: 2.1.1 + dev: false + + /d3-time-format@4.1.0: + resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==} + engines: {node: '>=12'} + dependencies: + d3-time: 2.1.1 + dev: false + + /d3-time@2.1.1: + resolution: {integrity: sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==} + dependencies: + d3-array: 2.12.1 + dev: false + /damerau-levenshtein@1.0.8: resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==} dev: true @@ -991,6 +1101,10 @@ packages: object-keys: 1.1.1 dev: true + /delaunator@4.0.1: + resolution: {integrity: sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==} + dev: false + /delayed-stream@1.0.0: resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} engines: {node: '>=0.4.0'} @@ -1724,6 +1838,10 @@ packages: side-channel: 1.0.4 dev: true + /internmap@1.0.1: + resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==} + dev: false + /invariant@2.2.4: resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==} dependencies: @@ -2398,6 +2516,30 @@ packages: react: 18.2.0 dev: false + /react-charts@3.0.0-beta.57(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-vqas7IQhsnDGcMxreGaWXvSIL3poEMoUBNltJrslz/+m0pI3QejBCszL1QrLNYQfOWXrbZADfedi/a+yWOQ7Hw==} + peerDependencies: + react: '>=16' + react-dom: '>=16' + dependencies: + '@babel/runtime': 7.23.2 + '@types/d3-array': 3.2.1 + '@types/d3-scale': 4.0.8 + '@types/d3-shape': 3.1.6 + '@types/raf': 3.4.3 + '@types/react': 17.0.71 + '@types/react-dom': 17.0.25 + d3-array: 2.12.1 + d3-delaunay: 5.3.0 + d3-scale: 3.3.0 + d3-shape: 2.1.0 + d3-time: 2.1.1 + d3-time-format: 4.1.0 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + ts-toolbelt: 9.6.0 + dev: false + /react-dom@18.2.0(react@18.2.0): resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: @@ -2782,6 +2924,10 @@ packages: /ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} + /ts-toolbelt@9.6.0: + resolution: {integrity: sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w==} + dev: false + /tsconfig-paths@3.14.2: resolution: {integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==} dependencies: diff --git a/src/app/globals.css b/src/app/globals.css index b5c61c9..e6d1700 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,3 +1,4 @@ @tailwind base; @tailwind components; @tailwind utilities; +@import url('https://fonts.googleapis.com/css2?family=Quantico:wght@400;700&display=swap'); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3fdc727..a8df895 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -7,7 +7,7 @@ const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'Nijitracker - Nijisanji Subscriber Tracker', - description: 'Nijitracker, historical subscriber data for members of Nijisanji', + description: 'Nijitracker, historical subscriber data for members of Phase Connect', } export default function RootLayout({ diff --git a/src/app/page.tsx b/src/app/page.tsx index 6016d89..ed29653 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -6,7 +6,7 @@ async function Home(){ const data: SubscriberDataTableProp = await getData(); return( <> - +
diff --git a/src/components/DataChart/DataChart.tsx b/src/components/DataChart/DataChart.tsx index a82fa26..9fbc5fe 100644 --- a/src/components/DataChart/DataChart.tsx +++ b/src/components/DataChart/DataChart.tsx @@ -1,5 +1,4 @@ -"use client"; -import React, {useEffect, useState} from 'react'; +import React from 'react'; import { Chart as ChartJS, CategoryScale, @@ -24,55 +23,13 @@ ChartJS.register( ); - - - -interface Dataset { - label: string; - data: number[]; - borderColor: string; - backgroundColor: string; -} - -interface DataChartResponseProps { - labels: string[]; - datasets: Dataset[]; -} - interface DataChartProps { - channel_name: string; - requestUrl?: string; + channel_name?: string; + chartData?: any; graphTitle?: string; } -const DataChart: React.FC = ({ channel_name, requestUrl, graphTitle }) => { - const [data, setData] = useState(); - const apiUrl = process.env.NEXT_PUBLIC_API_URL - - useEffect(() => { - const fetchData = async () => { - try { - const response = await fetch(requestUrl || `${apiUrl}/api/subscribers/${channel_name}`); - const json = await response.json(); - setData({ - labels: json.labels, - datasets: [ - { - label: 'Subscriber Count', - data: json.datasets, - borderColor: 'rgb(255, 99, 132)', - backgroundColor: 'rgba(255, 99, 132, 0.5)', - }, - ], - }); - } catch (error) { - console.error('Error fetching data:', error); - } - }; - - fetchData(); - }, [apiUrl, channel_name, requestUrl]); - +const DataChart: React.FC = ({ channel_name, chartData, graphTitle }) => { const options = { responsive: true, plugins: { @@ -97,10 +54,19 @@ const DataChart: React.FC = ({ channel_name, requestUrl, graphTi } }; - if (!data) { - return
Loading...
; + const data = { + labels: chartData.labels, + datasets: [ + { + label: 'Subscriber Count', + data: chartData.datasets, + borderColor: 'rgb(255, 99, 132)', + backgroundColor: 'rgba(255, 99, 132, 0.5)', + }, + ], } + return ; }; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 6585e52..7fb8303 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -4,16 +4,16 @@ import React from 'react'; const Footer = () => { return (