oceanprotocol
/
status-frontend
mirror of https://github.com/oceanprotocol/status-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adding date selector

This commit is contained in:
Jamie Hewitt 2023-05-15 12:59:25 +03:00
parent b1a219d7e4
commit 6e33e9ed98
5 changed files with 222 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
package-lock.json generated
View File

@ -15,9 +15,11 @@
"axios": "^1.1.3",
"chart.js": "^4.3.0",
"dotenv": "^16.0.3",
"moment": "^2.29.4",
"next": "13.0.5",
"react": "18.2.0",
"react-chartjs-2": "^5.2.0",
"react-datepicker": "^4.11.0",
"react-dom": "18.2.0",
"swr": "^1.3.0",
"tiny-relative-date": "^1.3.0"
@ -1734,10 +1736,11 @@
"integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
},
"node_modules/@babel/runtime": {
"version": "7.19.0",
"license": "MIT",
"version": "7.21.5",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
"integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
"dependencies": {
"regenerator-runtime": "^0.13.4"
"regenerator-runtime": "^0.13.11"
},
"engines": {
"node": ">=6.9.0"
@ -2884,6 +2887,15 @@
"resolved": "https://registry.npmjs.org/@oceanprotocol/typographies/-/typographies-0.1.0.tgz",
"integrity": "sha512-kMsZsqvzpz9KzVbVZzllwhPoIC3zbqsdRrClagZL/C2PHzgLrKGC1kYn3gPt0RMIFg9ZjrwieKaxlgIK9i9zzg=="
},
"node_modules/@popperjs/core": {
"version": "2.11.7",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
"integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@rushstack/eslint-patch": {
"version": "1.2.0",
"dev": true,
@ -3698,6 +3710,11 @@
"pnpm": ">=7"
}
},
"node_modules/classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
"node_modules/client-only": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@ -3878,6 +3895,21 @@
"dev": true,
"license": "BSD-2-Clause"
},
"node_modules/date-fns": {
"version": "2.30.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
"dependencies": {
"@babel/runtime": "^7.21.0"
},
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/debug": {
"version": "4.3.4",
"license": "MIT",
@ -5494,6 +5526,14 @@
"dev": true,
"license": "MIT"
},
"node_modules/moment": {
"version": "2.29.4",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
"engines": {
"node": "*"
}
},
"node_modules/mri": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@ -5632,7 +5672,6 @@
},
"node_modules/object-assign": {
"version": "4.1.1",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@ -6017,7 +6056,6 @@
},
"node_modules/prop-types": {
"version": "15.8.1",
"dev": true,
"license": "MIT",
"dependencies": {
"loose-envify": "^1.4.0",
@ -6087,6 +6125,23 @@
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-datepicker": {
"version": "4.11.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.11.0.tgz",
"integrity": "sha512-50n93o7mQwBEhg05tbopjFKgs8qgi8VBCAOMC4VqrKut72eAjESc/wXS/k5hRtnP0oe2FCGw7MJuIwh37wuXOw==",
"dependencies": {
"@popperjs/core": "^2.9.2",
"classnames": "^2.2.6",
"date-fns": "^2.24.0",
"prop-types": "^15.7.2",
"react-onclickoutside": "^6.12.2",
"react-popper": "^2.3.0"
},
"peerDependencies": {
"react": "^16.9.0 || ^17 || ^18",
"react-dom": "^16.9.0 || ^17 || ^18"
}
},
"node_modules/react-dom": {
"version": "18.2.0",
"license": "MIT",
@ -6098,11 +6153,42 @@
"react": "^18.2.0"
}
},
"node_modules/react-fast-compare": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.1.tgz",
"integrity": "sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg=="
},
"node_modules/react-is": {
"version": "16.13.1",
"dev": true,
"license": "MIT"
},
"node_modules/react-onclickoutside": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
"integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
"funding": {
"type": "individual",
"url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
},
"peerDependencies": {
"react": "^15.5.x || ^16.x || ^17.x || ^18.x",
"react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
}
},
"node_modules/react-popper": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
"integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
"dependencies": {
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
},
"peerDependencies": {
"@popperjs/core": "^2.0.0",
"react": "^16.8.0 || ^17 || ^18",
"react-dom": "^16.8.0 || ^17 || ^18"
}
},
"node_modules/regenerate": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@ -6120,8 +6206,9 @@
}
},
"node_modules/regenerator-runtime": {
"version": "0.13.9",
"license": "MIT"
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
},
"node_modules/regenerator-transform": {
"version": "0.15.1",
@ -6711,6 +6798,14 @@
"node": ">=6.14.2"
}
},
"node_modules/warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"dependencies": {
"loose-envify": "^1.0.0"
}
},
"node_modules/which": {
"version": "2.0.2",
"dev": true,
@ -7941,9 +8036,11 @@
"integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
},
"@babel/runtime": {
"version": "7.19.0",
"version": "7.21.5",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
"integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
"requires": {
"regenerator-runtime": "^0.13.4"
"regenerator-runtime": "^0.13.11"
}
},
"@babel/runtime-corejs3": {
@ -8610,6 +8707,11 @@
"resolved": "https://registry.npmjs.org/@oceanprotocol/typographies/-/typographies-0.1.0.tgz",
"integrity": "sha512-kMsZsqvzpz9KzVbVZzllwhPoIC3zbqsdRrClagZL/C2PHzgLrKGC1kYn3gPt0RMIFg9ZjrwieKaxlgIK9i9zzg=="
},
"@popperjs/core": {
"version": "2.11.7",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
"integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
},
"@rushstack/eslint-patch": {
"version": "1.2.0",
"dev": true
@ -9105,6 +9207,11 @@
"@kurkle/color": "^0.3.0"
}
},
"classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
"client-only": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@ -9233,6 +9340,14 @@
"version": "1.0.8",
"dev": true
},
"date-fns": {
"version": "2.30.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
"requires": {
"@babel/runtime": "^7.21.0"
}
},
"debug": {
"version": "4.3.4",
"requires": {
@ -10319,6 +10434,11 @@
"version": "1.2.6",
"dev": true
},
"moment": {
"version": "2.29.4",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
},
"mri": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@ -10404,8 +10524,7 @@
}
},
"object-assign": {
"version": "4.1.1",
"dev": true
"version": "4.1.1"
},
"object-inspect": {
"version": "1.12.2",
@ -10634,7 +10753,6 @@
},
"prop-types": {
"version": "15.8.1",
"dev": true,
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
@ -10678,6 +10796,19 @@
"integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==",
"requires": {}
},
"react-datepicker": {
"version": "4.11.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.11.0.tgz",
"integrity": "sha512-50n93o7mQwBEhg05tbopjFKgs8qgi8VBCAOMC4VqrKut72eAjESc/wXS/k5hRtnP0oe2FCGw7MJuIwh37wuXOw==",
"requires": {
"@popperjs/core": "^2.9.2",
"classnames": "^2.2.6",
"date-fns": "^2.24.0",
"prop-types": "^15.7.2",
"react-onclickoutside": "^6.12.2",
"react-popper": "^2.3.0"
}
},
"react-dom": {
"version": "18.2.0",
"requires": {
@ -10685,9 +10816,28 @@
"scheduler": "^0.23.0"
}
},
"react-fast-compare": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.1.tgz",
"integrity": "sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg=="
},
"react-is": {
"version": "16.13.1",
"dev": true
"version": "16.13.1"
},
"react-onclickoutside": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
"integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
"requires": {}
},
"react-popper": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
"integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
"requires": {
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
}
},
"regenerate": {
"version": "1.4.2",
@ -10703,7 +10853,9 @@
}
},
"regenerator-runtime": {
"version": "0.13.9"
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
},
"regenerator-transform": {
"version": "0.15.1",
@ -11066,6 +11218,14 @@
"node-gyp-build": "^4.3.0"
}
},
"warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"requires": {
"loose-envify": "^1.0.0"
}
},
"which": {
"version": "2.0.2",
"dev": true,

2
package.json
View File

@ -18,9 +18,11 @@
"axios": "^1.1.3",
"chart.js": "^4.3.0",
"dotenv": "^16.0.3",
"moment": "^2.29.4",
"next": "13.0.5",
"react": "18.2.0",
"react-chartjs-2": "^5.2.0",
"react-datepicker": "^4.11.0",
"react-dom": "18.2.0",
"swr": "^1.3.0",
"tiny-relative-date": "^1.3.0"

12
src/components/Chart.tsx
View File

@ -15,12 +15,18 @@ ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
export default function Chart({
path,
title
title,
from,
to
}: {
path: string
title: string
from: number
to: number
}): ReactElement {
const [chartData, setChartData] = useState(null)
console.log('from: ', from)
console.log('to: ', to)
const options = {
responsive: true,
@ -37,7 +43,9 @@ export default function Chart({
useEffect(() => {
async function fetchData() {
const res = await fetch(`http://localhost:8000${path}`)
const res = await fetch(
`http://localhost:8000${path}?since=${from}&limit=${to}`
)
const data = await res.json()
console.log(data)

4
src/components/Menu.module.css
View File

@ -40,6 +40,10 @@
display: none;
}
.dateSelection {
display: inline;
}
.navigation li {
display: inline-block;
vertical-align: middle;

33
src/pages/stats.tsx
View File

@ -1,12 +1,20 @@
import React from 'react'
import React, { useState } from 'react'
import Head from 'next/head'
import Link from 'next/link'
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 DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
export default function Stats() {
const now = new Date()
const sixMonthsAgo = new Date()
sixMonthsAgo.setMonth(now.getMonth() - 6)
const [from, setFrom] = useState(sixMonthsAgo)
const [to, setTo] = useState(now)
return (
<div className={styles.app}>
<Head>
@ -19,17 +27,36 @@ export default function Stats() {
</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>
<div className={styles.dateSelection}>
From:{' '}
<DatePicker
selected={from}
dateFormat="do LLL y"
onChange={(date) => setFrom(date)}
/>
To:{' '}
<DatePicker
selected={to}
dateFormat="do LLL y"
onChange={(date) => setTo(date)}
/>
</div>
</header>{' '}
<main>
<div className={styles.chartGrid}>
{stats.map((chart) => (
<Link href={`/stats/${chart.name}`} key={chart.title}>
<Chart key={chart.title} path={chart.path} title={chart.title} />
<Chart
key={chart.title}
path={chart.path}
title={chart.title}
from={from}
to={to}
/>
</Link>
))}
</div>