Skip to content

Commit 4c1dbf6

Browse files
cprussincprussin
authored
Merge pull request #2434 from pyth-network/cprussin/ui-81-add-live-metrics-to-kpis-on-overview-page
fix(insights): add live price feeds count to the end of kpi metrics
2 parents 202beeb + f6e7baf commit 4c1dbf6

File tree

1 file changed

+153
-140
lines changed
  • apps/insights/src/components/Overview

1 file changed

+153
-140
lines changed

‎apps/insights/src/components/Overview/index.tsx

Lines changed: 153 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import PriceFeedsLight from "./price-feeds-light.svg";
99
import PublishersDark from "./publishers-dark.svg";
1010
import PublishersLight from "./publishers-light.svg";
1111
import { TabList } from "./tab-list";
12+
import { Cluster, getFeeds } from "../../services/pyth";
1213
import {
1314
totalVolumeTraded,
1415
activeChains,
@@ -21,148 +22,160 @@ import { ChartCard } from "../ChartCard";
2122
import { FormattedDate } from "../FormattedDate";
2223
import { FormattedNumber } from "../FormattedNumber";
2324

24-
export const Overview = () => (
25-
<div className={styles.overview}>
26-
<h1 className={styles.header}>Overview</h1>
27-
<Cards>
28-
<ChartCard
29-
header="Total Volume Traded"
30-
variant="primary"
31-
data={totalVolumeTraded.map(({ date, volume }) => ({
32-
x: date,
33-
displayX: <FormattedDate value={date} />,
34-
y: volume,
35-
displayY: (
25+
export const Overview = async () => {
26+
const priceFeeds = await getFeeds(Cluster.Pythnet);
27+
const today = new Date();
28+
const feedCounts = [
29+
...activeFeeds.map(({ date, numFeeds }) => ({
30+
x: date,
31+
displayX: <FormattedDate value={date} />,
32+
y: numFeeds,
33+
})),
34+
{
35+
x: today,
36+
displayX: <FormattedDate value={today} />,
37+
y: priceFeeds.length,
38+
},
39+
];
40+
return (
41+
<div className={styles.overview}>
42+
<h1 className={styles.header}>Overview</h1>
43+
<Cards>
44+
<ChartCard
45+
header="Total Volume Traded"
46+
variant="primary"
47+
data={totalVolumeTraded.map(({ date, volume }) => ({
48+
x: date,
49+
displayX: <FormattedDate value={date} />,
50+
y: volume,
51+
displayY: (
52+
<FormattedNumber
53+
value={volume}
54+
currency="usd"
55+
style="currency"
56+
notation="compact"
57+
/>
58+
),
59+
}))}
60+
miniStat={
61+
<ChangePercent
62+
previousValue={totalVolumeTraded.at(-2)?.volume ?? 0}
63+
currentValue={totalVolumeTraded.at(-1)?.volume ?? 0}
64+
/>
65+
}
66+
stat={
3667
<FormattedNumber
37-
value={volume}
68+
value={totalVolumeTraded.at(-1)?.volume ?? 0}
3869
currency="usd"
3970
style="currency"
4071
notation="compact"
4172
/>
42-
),
43-
}))}
44-
miniStat={
45-
<ChangePercent
46-
previousValue={totalVolumeTraded.at(-2)?.volume ?? 0}
47-
currentValue={totalVolumeTraded.at(-1)?.volume ?? 0}
48-
/>
49-
}
50-
stat={
51-
<FormattedNumber
52-
value={totalVolumeTraded.at(-1)?.volume ?? 0}
53-
currency="usd"
54-
style="currency"
55-
notation="compact"
56-
/>
57-
}
58-
/>
59-
<ChartCard
60-
header="Publishers Onboarded"
61-
href="/publishers"
62-
chartClassName={styles.publishersChart}
63-
data={activePublishers.map(({ date, numPublishers }) => ({
64-
x: date,
65-
displayX: <FormattedDate value={date} />,
66-
y: numPublishers,
67-
}))}
68-
miniStat={
69-
<ChangePercent
70-
previousValue={activePublishers.at(-2)?.numPublishers ?? 0}
71-
currentValue={activePublishers.at(-1)?.numPublishers ?? 0}
72-
/>
73-
}
74-
stat={activePublishers.at(-1)?.numPublishers}
75-
/>
76-
<ChartCard
77-
header="Price Feeds (Active + Coming Soon)"
78-
href="/price-feeds"
79-
chartClassName={styles.priceFeedsChart}
80-
data={activeFeeds.map(({ date, numFeeds }) => ({
81-
x: date,
82-
displayX: <FormattedDate value={date} />,
83-
y: numFeeds,
84-
}))}
85-
miniStat={
86-
<ChangePercent
87-
previousValue={activeFeeds.at(-2)?.numFeeds ?? 0}
88-
currentValue={activeFeeds.at(-1)?.numFeeds ?? 0}
89-
/>
90-
}
91-
stat={activeFeeds.at(-1)?.numFeeds}
92-
/>
93-
<ChartCard
94-
header="Active Chains"
95-
data={activeChains.map(({ date, chains }) => ({
96-
x: date,
97-
displayX: <FormattedDate value={date} />,
98-
y: chains,
99-
}))}
100-
miniStat={
101-
<ChangePercent
102-
previousValue={activeChains.at(-2)?.chains ?? 0}
103-
currentValue={activeChains.at(-1)?.chains ?? 0}
104-
/>
105-
}
106-
stat={activeChains.at(-1)?.chains}
107-
/>
108-
</Cards>
109-
<Tabs orientation="vertical" className={styles.overviewMainContent ?? ""}>
110-
<section className={styles.intro}>
111-
<Badge>INSIGHTS</Badge>
112-
<p className={styles.headline}>Get the most from the Pyth Network</p>
113-
<p className={styles.message}>
114-
Insights Hub delivers transparency over the network status and
115-
performance, and maximizes productivity while integrating.
116-
</p>
117-
</section>
118-
<CrossfadeTabPanels
119-
items={[
120-
{
121-
id: "publishers",
122-
className: styles.imagePanel ?? "",
123-
children: (
124-
<>
125-
<PublishersDark className={styles.darkImage} />
126-
<PublishersLight className={styles.lightImage} />
127-
</>
128-
),
129-
},
130-
{
131-
id: "price feeds",
132-
className: styles.imagePanel ?? "",
133-
children: (
134-
<>
135-
<PriceFeedsDark className={styles.darkImage} />
136-
<PriceFeedsLight className={styles.lightImage} />
137-
</>
138-
),
139-
},
140-
]}
141-
/>
142-
<TabList
143-
label="test"
144-
className={styles.tabList ?? ""}
145-
items={[
146-
{
147-
id: "publishers",
148-
header: "Publishers",
149-
body: "Get insights about quality, ranking, and performance of each Publisher contributing to the network.",
150-
},
151-
{
152-
id: "price feeds",
153-
header: "Price Feeds",
154-
body: "See information about every price feed's price, performance, components, and technical aspects all in one place for a better integration experience.",
155-
},
156-
]}
157-
/>
158-
<div className={styles.buttons}>
159-
<Button href="/publishers" variant="solid" size="md">
160-
Publishers
161-
</Button>
162-
<Button href="/price-feeds" variant="outline" size="md">
163-
Price Feeds
164-
</Button>
165-
</div>
166-
</Tabs>
167-
</div>
168-
);
73+
}
74+
/>
75+
<ChartCard
76+
header="Publishers Onboarded"
77+
href="/publishers"
78+
chartClassName={styles.publishersChart}
79+
data={activePublishers.map(({ date, numPublishers }) => ({
80+
x: date,
81+
displayX: <FormattedDate value={date} />,
82+
y: numPublishers,
83+
}))}
84+
miniStat={
85+
<ChangePercent
86+
previousValue={activePublishers.at(-2)?.numPublishers ?? 0}
87+
currentValue={activePublishers.at(-1)?.numPublishers ?? 0}
88+
/>
89+
}
90+
stat={activePublishers.at(-1)?.numPublishers}
91+
/>
92+
<ChartCard
93+
header="Price Feeds (Active + Coming Soon)"
94+
href="/price-feeds"
95+
chartClassName={styles.priceFeedsChart}
96+
data={feedCounts}
97+
miniStat={
98+
<ChangePercent
99+
previousValue={feedCounts.at(-2)?.y ?? 0}
100+
currentValue={feedCounts.at(-1)?.y ?? 0}
101+
/>
102+
}
103+
stat={feedCounts.at(-1)?.y}
104+
/>
105+
<ChartCard
106+
header="Active Chains"
107+
data={activeChains.map(({ date, chains }) => ({
108+
x: date,
109+
displayX: <FormattedDate value={date} />,
110+
y: chains,
111+
}))}
112+
miniStat={
113+
<ChangePercent
114+
previousValue={activeChains.at(-2)?.chains ?? 0}
115+
currentValue={activeChains.at(-1)?.chains ?? 0}
116+
/>
117+
}
118+
stat={activeChains.at(-1)?.chains}
119+
/>
120+
</Cards>
121+
<Tabs orientation="vertical" className={styles.overviewMainContent ?? ""}>
122+
<section className={styles.intro}>
123+
<Badge>INSIGHTS</Badge>
124+
<p className={styles.headline}>Get the most from the Pyth Network</p>
125+
<p className={styles.message}>
126+
Insights Hub delivers transparency over the network status and
127+
performance, and maximizes productivity while integrating.
128+
</p>
129+
</section>
130+
<CrossfadeTabPanels
131+
items={[
132+
{
133+
id: "publishers",
134+
className: styles.imagePanel ?? "",
135+
children: (
136+
<>
137+
<PublishersDark className={styles.darkImage} />
138+
<PublishersLight className={styles.lightImage} />
139+
</>
140+
),
141+
},
142+
{
143+
id: "price feeds",
144+
className: styles.imagePanel ?? "",
145+
children: (
146+
<>
147+
<PriceFeedsDark className={styles.darkImage} />
148+
<PriceFeedsLight className={styles.lightImage} />
149+
</>
150+
),
151+
},
152+
]}
153+
/>
154+
<TabList
155+
label="test"
156+
className={styles.tabList ?? ""}
157+
items={[
158+
{
159+
id: "publishers",
160+
header: "Publishers",
161+
body: "Get insights about quality, ranking, and performance of each Publisher contributing to the network.",
162+
},
163+
{
164+
id: "price feeds",
165+
header: "Price Feeds",
166+
body: "See information about every price feed's price, performance, components, and technical aspects all in one place for a better integration experience.",
167+
},
168+
]}
169+
/>
170+
<div className={styles.buttons}>
171+
<Button href="/publishers" variant="solid" size="md">
172+
Publishers
173+
</Button>
174+
<Button href="/price-feeds" variant="outline" size="md">
175+
Price Feeds
176+
</Button>
177+
</div>
178+
</Tabs>
179+
</div>
180+
);
181+
};

0 commit comments

Comments
 (0)