mirror of
https://github.com/oceanprotocol/status-frontend.git
synced 2024-06-25 19:06:33 +02:00
72 lines
1.4 KiB
TypeScript
72 lines
1.4 KiB
TypeScript
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>
|
|
)
|
|
}
|