Skip to content

Commit

Permalink
Adds hubble-stats chart component to webb-ui-components and storybook (
Browse files Browse the repository at this point in the history
  • Loading branch information
devpavan04 authored Jul 19, 2023
1 parent 0dc96be commit 0bc2e32
Show file tree
Hide file tree
Showing 21 changed files with 691 additions and 8 deletions.
7 changes: 3 additions & 4 deletions apps/hubble-stats/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
'use client';

import { useEffect } from 'react';
import Head from 'next/head';
import {
WebbUIProvider,
useDarkMode,
Expand Down Expand Up @@ -97,8 +95,9 @@ export default function RootLayout({
logoLink={WEBB_MKT_URL}
footer={footer}
/>
<main className="flex-1 overflow-y-auto overflow-scroll">
<div className="max-w-[1000px] mx-auto">

<main className="flex-1 overflow-y-auto">
<div className="max-w-[1240px] mx-auto">
<Header />
{children}
<Footer isMinimal style={{ background: 'inherit' }} />
Expand Down
3 changes: 2 additions & 1 deletion apps/hubble-stats/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { Metadata } from 'next';

import {
KeyMetricsTableContainer,
ShieldedTablesContainer,
} from '../containers';
import { VolumeChartsContainer } from '../containers/VolumeChartsContainer';

export const metadata: Metadata = {
title: 'Hubble Stats',
Expand All @@ -13,6 +13,7 @@ export const metadata: Metadata = {
export default async function Index() {
return (
<div className="py-4 space-y-8">
<VolumeChartsContainer />
<KeyMetricsTableContainer />
<ShieldedTablesContainer />
</div>
Expand Down
58 changes: 58 additions & 0 deletions apps/hubble-stats/components/Areachart/Areachart.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { ResponsiveContainer, AreaChart, Area, Tooltip, XAxis } from 'recharts';
import { AreachartProps } from './types';

export const Areachart = (props: AreachartProps) => {
const {
data,
setDate,
setValue,
isDarkMode,
width = '100%',
height = 180,
} = props;

return (
<ResponsiveContainer width={width} height={height}>
<AreaChart
data={data}
onMouseLeave={() => {
setDate && setDate(null);
setValue && setValue(null);
}}
>
<XAxis
dataKey="date"
tickFormatter={(date) =>
new Date(date).toLocaleDateString('en-US', {
day: 'numeric',
})
}
strokeOpacity={0}
tick={{
fontSize: '16px',
fill: '#9CA0B0',
fontWeight: 400,
}}
tickMargin={16}
/>
<Tooltip
contentStyle={{ display: 'none' }}
content={({ active, payload }) => {
if (active && payload && payload.length) {
setValue && setValue(payload[0].payload['value']);
setDate && setDate(payload[0].payload['date']);
}

return null;
}}
/>
<Area
dataKey="value"
stroke={isDarkMode ? '#C6BBFA' : '#624FBE'}
fillOpacity={0}
strokeWidth={2}
/>
</AreaChart>
</ResponsiveContainer>
);
};
2 changes: 2 additions & 0 deletions apps/hubble-stats/components/Areachart/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './Areachart';
export * from './types';
8 changes: 8 additions & 0 deletions apps/hubble-stats/components/Areachart/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export type AreachartProps = {
data: any;
setValue: (value: number | null) => void;
setDate: (date: Date | null) => void;
isDarkMode: boolean;
width?: number | string;
height?: number | string;
};
53 changes: 53 additions & 0 deletions apps/hubble-stats/components/Barchart/Barchart.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { ResponsiveContainer, BarChart, XAxis, Tooltip, Bar } from 'recharts';
import { BarchartProps } from './types';

export const Barchart = (props: BarchartProps) => {
const {
data,
setValue,
setDate,
isDarkMode,
width = '100%',
height = 180,
} = props;

return (
<ResponsiveContainer width={width} height={height}>
<BarChart
data={data}
onMouseLeave={() => {
setValue && setValue(null);
setDate && setDate(null);
}}
>
<XAxis
dataKey="date"
tickFormatter={(date) =>
new Date(date).toLocaleDateString('en-US', {
day: 'numeric',
})
}
strokeOpacity={0}
tick={{
fontSize: '16px',
fill: '#9CA0B0',
fontWeight: 400,
}}
tickMargin={16}
/>
<Tooltip
contentStyle={{ display: 'none' }}
content={({ active, payload }) => {
if (active && payload && payload.length) {
setValue && setValue(payload[0].payload['value']);
setDate && setDate(payload[0].payload['date']);
}

return null;
}}
/>
<Bar dataKey="value" fill={isDarkMode ? '#81B3F6' : '#3D7BCE'} />
</BarChart>
</ResponsiveContainer>
);
};
2 changes: 2 additions & 0 deletions apps/hubble-stats/components/Barchart/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './Barchart';
export * from './types';
8 changes: 8 additions & 0 deletions apps/hubble-stats/components/Barchart/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export type BarchartProps = {
data: any;
setValue: (value: number | null) => void;
setDate: (date: Date | null) => void;
isDarkMode: boolean;
width?: number | string;
height?: number | string;
};
2 changes: 1 addition & 1 deletion apps/hubble-stats/components/Header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const Header = () => {
<div>
<Breadcrumbs>
<Link href="/">
<BreadcrumbsItem icon={<GridFillIcon />} isLast className="ml-0">
<BreadcrumbsItem icon={<GridFillIcon />} className="ml-0">
Hubble Overview
</BreadcrumbsItem>
</Link>
Expand Down
2 changes: 2 additions & 0 deletions apps/hubble-stats/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,5 @@ export * from './PoolMetadataTable';
export * from './PoolTransactionsTable';
export * from './ShieldedAssetsTable';
export * from './ShieldedPoolsTable';
export * from './Areachart';
export * from './Barchart';
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ const KeyMetricsTableContainer: FC = () => {
className={cx(
'w-full rounded-lg overflow-hidden',
'border-2 border-mono-0 dark:border-mono-160',
'bg-[linear-gradient(180deg,rgba(255,255,255,0.80)_0%,rgba(255,255,255,0.00)_100%)]',
'dark:bg-[linear-gradient(180deg,rgba(43,47,64,0.80)0%,rgba(43,47,64,0.00)_100%)]'
'backdrop-blur-xl'
)}
>
<div className="w-full table table-fixed border-collapse">
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
'use client';
import { useEffect, useMemo, useState } from 'react';
import { DaysFilterType, ChartContainer } from '@webb-tools/webb-ui-components';
import { Areachart, Barchart } from '../../components';

export const VolumeChartsContainer = () => {
// Current TVLVolume & Volume values (Default values)
const [currentTvlValue, setCurrentTvlValue] = useState<number>(13.6);
const [currentVolumeValue, setCurrentVolumeValue] = useState<number>(8.56);

// TVLVolume value & Set TVLVolume value (When user hover on chart - Tooltip response value)
const [tvlValue, setTvlValue] = useState<number | null>(null);
const [tvlDate, setTVLDate] = useState<Date | null>(null);

// 24 Hour Volume value & Set Volume value (When user hover on chart - Tooltip response value)
const [volumeDate, setVolumeDate] = useState<Date | null>(null);
const [volumeValue, setVolumeValue] = useState<number | null>(null);

// 24 Hour Volume data type (day, week, month) - Default value is Week
const [volumeDataType, setVolumeDataType] = useState<DaysFilterType>('week');

const [isDarkMode, setIsDarkMode] = useState<boolean>(false);

useEffect(() => {
const handleThemeChange = () => {
setIsDarkMode(localStorage.getItem('theme') === 'dark');
};

handleThemeChange();

window.addEventListener('storage', handleThemeChange);

return () => {
window.removeEventListener('storage', handleThemeChange);
};
}, []);

const tvlData = useMemo(() => {
const data = [];

for (let i = 0; i < 100; i++) {
data.push({
date: new Date(Date.now() + i * 24 * 60 * 60 * 1000),
value: Math.floor(Math.random() * 20) + 1,
});
}

return data;
}, []);

const volumeData = useMemo(() => {
const data = [];

for (let i = 0; i < 100; i++) {
data.push({
date: new Date(Date.now() + i * 24 * 60 * 60 * 1000),
value: Math.floor(Math.random() * 20) + 1,
});
}

return data;
}, []);

return (
<div className="grid grid-cols-2 gap-4">
{/* TVL Chart Container */}
<ChartContainer
heading="TVL"
currentValue={currentTvlValue}
value={tvlValue}
date={tvlDate}
>
<Areachart
data={tvlData}
setDate={setTVLDate}
setValue={setTvlValue}
isDarkMode={isDarkMode}
/>
</ChartContainer>

{/* 24 Hour Volume Chart Container */}
<ChartContainer
heading="Volume 24H"
currentValue={currentVolumeValue}
value={volumeValue}
date={volumeDate}
filterType="days"
daysFilterType={volumeDataType}
setDaysFilterType={setVolumeDataType}
>
<Barchart
data={volumeData}
setDate={setVolumeDate}
setValue={setVolumeValue}
isDarkMode={isDarkMode}
/>
</ChartContainer>
</div>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './VolumeChartsContainer';
Loading

0 comments on commit 0bc2e32

Please sign in to comment.