oceanprotocol/status-frontend
1
0
Fork 0
mirror of https://github.com/oceanprotocol/status-frontend.git synced 2025-02-14 21:10:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Seperating chart component from the stats page

Browse Source
This commit is contained in:
Jamie Hewitt 2023-05-11 18:30:17 +03:00
parent 3df204150f
commit b04bf9f891
3 changed files with 107 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/chart.tsx Normal file
View File

@ -0,0 +1,71 @@
import React, { useEffect, useState, ReactElement } from 'react'
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
} from 'chart.js'
import styles from '../styles/Home.module.css'
import { Bar } from 'react-chartjs-2'
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
export default function Chart({
path,
title
}: {
path: string
title: string
}): ReactElement {
const [chartData, setChartData] = useState(null)
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const
},
title: {
display: true,
text: title
}
}
}
useEffect(() => {
async function fetchData() {
const res = await fetch(`http://localhost:8000${path}`)
const data = await res.json()
console.log(data)
// Assuming the response data is an object with keys as labels and values as data points
const labels = Object.keys(data)
const datasetData = Object.values(data)
setChartData({
labels: labels,
datasets: [
{
label: 'NFTS Published',
data: datasetData
}
]
})
}
fetchData()
}, [])
if (!chartData) {
return <div>Loading...</div>
}
return (
<div className={styles.card}>
<Bar options={options} data={chartData} className={styles.chart} />
</div>
)
}

83
src/pages/stats.tsx
View File

@ -1,60 +1,31 @@
import React, { useEffect, useState } from 'react' import React from 'react'
import { import Head from 'next/head'
Chart as ChartJS, import styles from '../styles/Home.module.css'
CategoryScale, import LogoAsset from '../images/logo.svg'
LinearScale, import Chart from '../components/chart'
BarElement,
Title,
Tooltip,
Legend
} from 'chart.js'
import { Bar } from 'react-chartjs-2'
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
export const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const
},
title: {
display: true,
text: 'Chart.js Bar Chart'
}
}
}
export default function Stats() { export default function Stats() {
const [chartData, setChartData] = useState(null) return (
<div className={styles.app}>
<Head>
<title>Ocean Protocol Stats</title>
<meta
name="description"
content="Status overview of all deployed components hosted by the Ocean Protocol Foundation."
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<header className={styles.header}>
<LogoAsset className={styles.logo} />
useEffect(() => { <h1 className={styles.title}>Ocean Protocol Stats</h1>
async function fetchData() { <p className={styles.description}>Stats for usage of Ocean Protocol.</p>
const res = await fetch('http://localhost:8000/stats/core/publishedNFT') </header>{' '}
const data = await res.json() <main>
console.log(data) <div className={styles.grid}>
<Chart path="/stats/core/publishedNFT" title="publishedNFT" />
// Assuming the response data is an object with keys as labels and values as data points </div>
const labels = Object.keys(data) </main>
const datasetData = Object.values(data) </div>
)
setChartData({
labels: labels,
datasets: [
{
label: 'NFTS Published',
data: datasetData
}
]
})
}
fetchData()
}, [])
if (!chartData) {
return <div>Loading...</div>
}
return <Bar options={options} data={chartData} />
} }

9
src/styles/Home.module.css
View File

@ -214,3 +214,12 @@
font-family: var(--font-family-base); font-family: var(--font-family-base);
font-weight: var(--font-weight-base); font-weight: var(--font-weight-base);
} }
.chart {
width: 100%;
height: 300px;
margin: 0 auto;
padding: 0;
border: 0;
display: block;
}