-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adds hubble-stats chart component to webb-ui-components and storybook (…
- Loading branch information
1 parent
0dc96be
commit 0bc2e32
Showing
21 changed files
with
691 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export * from './Areachart'; | ||
export * from './types'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export * from './Barchart'; | ||
export * from './types'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100 changes: 100 additions & 0 deletions
100
apps/hubble-stats/containers/VolumeChartsContainer/VolumeChartsContainer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './VolumeChartsContainer'; |
Oops, something went wrong.