From 9cafb025091e6a0f6083d7a1e4cfe4e0811a9172 Mon Sep 17 00:00:00 2001 From: Onno Visser <23527729+onnovisser@users.noreply.github.com> Date: Thu, 15 Jun 2023 16:35:29 +0200 Subject: [PATCH] fix call --- .../components/PodIndexerReports/index.tsx | 184 ++++++++++++++++++ .../src/components/PortfolioSection.tsx | 153 --------------- .../src/pages/Pool/Overview/index.tsx | 4 +- centrifuge-js/src/modules/pod.ts | 2 +- 4 files changed, 187 insertions(+), 156 deletions(-) create mode 100644 centrifuge-app/src/components/PodIndexerReports/index.tsx delete mode 100644 centrifuge-app/src/components/PortfolioSection.tsx diff --git a/centrifuge-app/src/components/PodIndexerReports/index.tsx b/centrifuge-app/src/components/PodIndexerReports/index.tsx new file mode 100644 index 0000000000..28749c63e2 --- /dev/null +++ b/centrifuge-app/src/components/PodIndexerReports/index.tsx @@ -0,0 +1,184 @@ +import { PoolMetadata } from '@centrifuge/centrifuge-js' +import { useCentrifuge } from '@centrifuge/centrifuge-react' +import { Shelf, Text } from '@centrifuge/fabric' +import Chart from 'chart.js/auto' +import * as React from 'react' +import { useQuery } from 'react-query' +import { usePool, usePoolMetadata } from '../../utils/usePools' + +type Props = { + page: keyof Exclude + poolId: string +} + +// const POOL_CONFIG_REPORTS: { reports: { [name: string]: { sections: ReportSection[] } } } = { +// reports: { +// poolOverview: { +// sections: [ +// { +// name: 'Exposure by US state', +// aggregate: 'sumOfNormalizedDebtPerState', +// view: 'chart', +// viewData: { type: 'bar' }, +// }, +// { +// name: 'Average FICO score (weighted by outstanding debt) over time', +// aggregate: 'ficoScoreWeightedByNormalizedDebtOverTime', +// view: 'chart', +// viewData: { +// type: 'line', +// options: { +// plugins: { +// legend: { +// labels: { +// font: { +// family: 'Inter', +// size: 20, +// }, +// }, +// }, +// }, +// scales: { +// y: [ +// { +// min: 500, +// max: 700, +// }, +// ], +// }, +// }, +// }, +// }, +// ], +// }, +// }, +// } + +const MOCK_DATA = { + sumOfNormalizedDebtPerState: [ + { + key1: 'CA', + value1: 200314, + }, + { + key1: 'TX', + value1: 120123, + }, + { + key1: 'NY', + value1: 581202, + }, + ], + ficoWeightedByNormalizedDebt: [ + { + key1: '2023-05-20', + value1: 608, + }, + { + key1: '2023-05-21', + value1: 605, + }, + { + key1: '2023-05-22', + value1: 610, + }, + { + key1: '2023-05-23', + value1: 610, + }, + { + key1: '2023-05-24', + value1: 610, + }, + { + key1: '2023-05-25', + value1: 605, + }, + { + key1: '2023-05-26', + value1: 601, + }, + ], +} + +export function PodIndexerReports({ page, poolId }: Props) { + const pool = usePool(poolId) + const { data: metadata } = usePoolMetadata(pool) + const centrifuge = useCentrifuge() + const { data } = useQuery( + ['podIndexerReports', page], + () => { + const realData = centrifuge.pod.getReports([metadata!.pod!.indexer!, metadata as any, page]) + console.log('realData', realData) + return MOCK_DATA + }, + { + enabled: !!metadata?.reports, + } + ) + + const sectionsWithData = + data && metadata?.reports?.[page].sections.map((s) => ({ ...s, data: (data as any)[s.aggregate] })) + + return sectionsWithData ? : null +} + +type ReportSectionWithData = Required['reports']['poolOverview']['sections'][0] & { data: any } + +type ChartData = { key1: any; value1: any }[] + +function displayChart(reportSection: ReportSectionWithData, data: ChartData, node: HTMLCanvasElement) { + return new Chart(node, { + ...reportSection.viewData, + data: { + labels: data.map((row) => row.key1), + datasets: [ + { + data: data.map((row) => row.value1), + backgroundColor: '#2762ff', + }, + ], + }, + options: { + plugins: { + legend: { + display: false, + }, + }, + }, + }) +} + +function ReportSections({ sections }: { sections: ReportSectionWithData[] }) { + return ( + + {sections.map((section) => ( + + ))} + + ) +} + +Chart.defaults.borderColor = '#eee' +Chart.defaults.color = 'rgb(97, 97, 97)' + +function ReportSection({ section }: { section: ReportSectionWithData }) { + const ref = React.useRef(null) + + React.useEffect(() => { + const chart = displayChart(section, section.data, ref.current!) + return () => { + chart.destroy() + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) + + return ( +
+ + {section.name} + + +
+ ) +} diff --git a/centrifuge-app/src/components/PortfolioSection.tsx b/centrifuge-app/src/components/PortfolioSection.tsx deleted file mode 100644 index 4d066da5f2..0000000000 --- a/centrifuge-app/src/components/PortfolioSection.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import { Shelf, Text } from '@centrifuge/fabric' -import Chart from 'chart.js/auto' -import * as React from 'react' - -const POOL_CONFIG_REPORTS: { reports: { [name: string]: { sections: ReportSection[] } } } = { - reports: { - poolOverview: { - sections: [ - { - name: 'Exposure by US state', - aggregate: 'sumOfNormalizedDebtPerState', - view: 'chart', - viewData: { type: 'bar' }, - }, - { - name: 'Average FICO score (weighted by outstanding debt) over time', - aggregate: 'ficoScoreWeightedByNormalizedDebtOverTime', - view: 'chart', - viewData: { - type: 'line', - options: { - plugins: { - legend: { - labels: { - font: { - family: 'Inter', - size: 20, - }, - }, - }, - }, - scales: { - y: [ - { - min: 500, - max: 700, - }, - ], - }, - }, - }, - }, - ], - }, - }, -} - -const POD_INDEXER_DATA: { data: { [id: string]: ChartData } } = { - data: { - sumOfNormalizedDebtPerState: [ - { - key1: 'CA', - value1: 200314, - }, - { - key1: 'TX', - value1: 120123, - }, - { - key1: 'NY', - value1: 581202, - }, - ], - ficoScoreWeightedByNormalizedDebtOverTime: [ - { - key1: '2023-05-20', - value1: 608, - }, - { - key1: '2023-05-21', - value1: 605, - }, - { - key1: '2023-05-22', - value1: 610, - }, - { - key1: '2023-05-23', - value1: 610, - }, - { - key1: '2023-05-24', - value1: 610, - }, - { - key1: '2023-05-25', - value1: 605, - }, - { - key1: '2023-05-26', - value1: 601, - }, - ], - }, -} - -interface ReportSection { - name: string - aggregate: string - view: 'chart' | 'counter' - viewData: any // TODO -} - -type ChartData = { key1: any; value1: any }[] - -const displayChart = async (reportSection: ReportSection, data: ChartData) => { - new Chart(document.getElementById(`chart_${reportSection.aggregate}`), { - ...reportSection.viewData, - data: { - labels: data.map((row) => row.key1), - datasets: [ - { - data: data.map((row) => row.value1), - backgroundColor: '#2762ff', - }, - ], - }, - options: { - plugins: { - legend: { - display: false, - }, - }, - }, - }) -} - -const PortfolioSection: React.VFC = () => { - React.useEffect(() => { - Chart.defaults.borderColor = '#eee' - Chart.defaults.color = 'rgb(97, 97, 97)' - ;(async function () { - POOL_CONFIG_REPORTS['reports']['poolOverview']['sections'].forEach((reportSection) => { - displayChart(reportSection, POD_INDEXER_DATA['data'][reportSection.aggregate]) - }) - })() - }, []) - - return ( - - {POOL_CONFIG_REPORTS['reports']['poolOverview']['sections'].map((reportSection) => ( -
- - {reportSection.name} - - -
- ))} - - ) -} - -export default PortfolioSection diff --git a/centrifuge-app/src/pages/Pool/Overview/index.tsx b/centrifuge-app/src/pages/Pool/Overview/index.tsx index 06c30e2b45..6222aca88a 100644 --- a/centrifuge-app/src/pages/Pool/Overview/index.tsx +++ b/centrifuge-app/src/pages/Pool/Overview/index.tsx @@ -10,8 +10,8 @@ import { LoadBoundary } from '../../../components/LoadBoundary' import { PageSection } from '../../../components/PageSection' import { PageSummary } from '../../../components/PageSummary' import { PageWithSideBar } from '../../../components/PageWithSideBar' +import { PodIndexerReports } from '../../../components/PodIndexerReports' import { PoolToken } from '../../../components/PoolToken' -import PortfolioSection from '../../../components/PortfolioSection' import { Spinner } from '../../../components/Spinner' import { Tooltips } from '../../../components/Tooltips' import { ethConfig } from '../../../config' @@ -223,7 +223,7 @@ export function PoolDetailOverview({ - + ) diff --git a/centrifuge-js/src/modules/pod.ts b/centrifuge-js/src/modules/pod.ts index 5cfcb4680e..5f7635652a 100644 --- a/centrifuge-js/src/modules/pod.ts +++ b/centrifuge-js/src/modules/pod.ts @@ -151,7 +151,7 @@ export function getPodModule() { }`, {} ) - return res.query.aggregations + return res.aggregations } async function getJob(args: [podUrl: string, token: string, jobId: string]) {