Adding individual page for each chart

This commit is contained in:
Jamie Hewitt 2023-05-15 12:03:07 +03:00
parent f5bc3bc89f
commit 27c879b83f
2 changed files with 69 additions and 5 deletions

View File

@ -1,27 +1,52 @@
[
{ "title": "NFTs Published", "path": "/stats/core/publishedNFT" },
{ "title": "Unique Consumers", "path": "/stats/core/uniqueConsumers" },
{
"name": "publishedNFT",
"title": "NFTs Published",
"path": "/stats/core/publishedNFT"
},
{
"name": "uniqueConsumers",
"title": "Unique Consumers",
"path": "/stats/core/uniqueConsumers"
},
{
"name": "weeklyUniquePublishMarkets",
"title": "Weekly Unique Publish Markets",
"path": "/stats/core/weeklyUniquePublishMarkets"
},
{
"name": "montlyUniquePublishMarkets",
"title": "Montly Unique Publish Markets",
"path": "/stats/core/montlyUniquePublishMarkets"
},
{
"name": "yearlyUniquePublishMarkets",
"title": "Yearly Unique Publish Markets",
"path": "/stats/core/yearlyUniquePublishMarkets"
},
{
"name": "totalUniquePublishMarkets",
"title": "Total Unique Publish Markets",
"path": "/stats/core/totalUniquePublishMarkets"
},
{
"name": "uniqueConsumeMarkets",
"title": "Unique Consume Markets",
"path": "/stats/core/uniqueConsumeMarkets"
},
{ "title": "Free Consumes", "path": "/stats/core/freeConsumes" },
{ "title": "Paid Consumes", "path": "/stats/core/paidConsumes" },
{ "title": "Ocean Consumes", "path": "/stats/core/oceanConsumes" }
{
"name": "freeConsumes",
"title": "Free Consumes",
"path": "/stats/core/freeConsumes"
},
{
"name": "paidConsumes",
"title": "Paid Consumes",
"path": "/stats/core/paidConsumes"
},
{
"name": "oceanConsumes",
"title": "Ocean Consumes",
"path": "/stats/core/oceanConsumes"
}
]

View File

@ -0,0 +1,39 @@
import React from 'react'
import Head from 'next/head'
import styles from '../../styles/Home.module.css'
import LogoAsset from '../../images/logo.svg'
import Chart from '../../components/Chart'
import stats from '../../config/coreStats.json'
import { useRouter } from 'next/router'
export default function Stats() {
const router = useRouter()
const chartName = router.query.chartName
const chart = stats.find((chart) => chart.name === chartName)
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} />
<h1 className={styles.title}>Ocean Protocol Stats</h1>
<p className={styles.description}>
Core stats for usage of Ocean Protocol.
</p>
</header>{' '}
<main>
<div className={styles.chartGrid}>
{!chart && <div className={styles.description}>Chart not found</div>}
{chart && <Chart path={chart.path} title={chart.title} />}
</div>
</main>
</div>
)
}