feat: public chart

AstraProtocol · Jan 13, 2023 · 85d470e · 85d470e
1 parent 7862f98
commit 85d470e
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 32 deletions.
diff --git a/components/Navbar/MobileNavigation.tsx b/components/Navbar/MobileNavigation.tsx
@@ -31,13 +31,13 @@ const LinkMenuItem = ({
 	prefix?: React.ReactNode
 }) => (
 	<div
-		className={clsx('radius-base', 'padding-sm', styles.subItem, {
+		className={clsx('radius-base', classes, styles.subItem, {
 			[styles.subActive]: pathname === link
 		})}
 	>
-		<span className="block-center">
+		<span className="flex width-100 flex-column">
 			{!!prefix && prefix}
-			<Typography.LinkText href={link} classes={clsx('text text-lg', styles.link, classes)}>
+			<Typography.LinkText href={link} classes={clsx('text text-lg  padding-sm ', styles.link)}>
 				{label}
 			</Typography.LinkText>
 		</span>

diff --git a/components/Navbar/index.tsx b/components/Navbar/index.tsx
@@ -68,17 +68,17 @@ export const items: MenuItem[] = [
 			}
 		]
 	},
-	// {
-	// 	id: '4',
-	// 	label: 'Resources',
-	// 	submenus: [
-	// 		{
-	// 			id: '4.1',
-	// 			label: 'Charts and Stats',
-	// 			link: '/charts'
-	// 		}
-	// 	]
-	// },
+	{
+		id: '4',
+		label: 'Resources',
+		submenus: [
+			{
+				id: '4.1',
+				label: 'Stats',
+				link: '/charts'
+			}
+		]
+	},
 	// {
 	// 	id: '4',
 	// 	label: 'APIs',

diff --git a/views/charts/Address.tsx b/views/charts/Address.tsx
@@ -13,9 +13,9 @@ function convertActiveAddressToDataSet(history: ActiveAddressItem[]): [string[],
 
 function convertAddressGrowthToDataSet(history: AddressGrowthItem[]): [string[], number[], number[]] {
 	const notActiveAddressData = history.map(({ notActive }) => notActive)
-	const totalAddressData = history.map(({ total }) => total)
+	const activeAddressData = history.map(({ active }) => active)
 	const labels = history.map(({ date }) => date)
-	return [labels, notActiveAddressData, totalAddressData]
+	return [labels, notActiveAddressData, activeAddressData]
 }
 
 export default function Address() {
@@ -30,8 +30,7 @@ export default function Address() {
 	const [activeAddressLabels, activeAddressdata] = convertActiveAddressToDataSet(activeAddress)
 
 	const addressGrowth = addressGrowthRes?.result?.totalAddressesGrowth || []
-	const [labels, notActiveAddressData, totalAddressData] = convertAddressGrowthToDataSet(addressGrowth)
-	console.log({ labels, notActiveAddressData, totalAddressData })
+	const [labels, notActiveAddressData, activeAddressData] = convertAddressGrowthToDataSet(addressGrowth)
 	return (
 		<Col>
 			<ChartHeader text="Address" />
@@ -48,9 +47,9 @@ export default function Address() {
 					leftTitle="Total Addresses Growth | Daily"
 					rightTitle={{ title: 'Total Addresses', value: addressGrowthRes?.result?.totalAddresses }}
 					line1Data={notActiveAddressData}
-					line2Data={totalAddressData}
+					line2Data={activeAddressData}
 					labels={labels}
-					line2Label={'Total'}
+					line2Label={'Active'}
 					line1Label={'Not Active'}
 				/>
 			</Row>

diff --git a/views/charts/Gas.tsx b/views/charts/Gas.tsx
@@ -35,6 +35,9 @@ export default function Gas() {
 					data={gasDailyData}
 					labels={gasDailyLabels}
 					label="Address"
+					stepSize={history =>
+						history ? (history.length > 4 /*months*/ * 30 ? 30 : history.length > 15 ? 15 : 3) : 1
+					}
 				/>
 				<div style={{ width: '10px', height: '10px' }}></div>
 				<BarChart

diff --git a/views/charts/components/AreaChart.tsx b/views/charts/components/AreaChart.tsx
@@ -46,25 +46,28 @@ const AreaChart = ({ leftTitle, rightTitle, labels, line1Data, line2Data, line1L
 	const router = useRouter()
 	const { locale } = router
 
+	console.log({ line1Data, line2Data })
+
 	const data: ChartData<'line'> = {
 		labels,
 		datasets: [
 			{
 				label: line1Label,
 				data: line1Data,
 				yAxisID: 'active',
-				borderColor: '#5E5CE6',
+
+				backgroundColor: 'rgb(255 193 7 / 20%)',
 				fill: true,
-				backgroundColor: 'rgb(94 92 230 / 20%)',
+				borderColor: '#ffc107',
 				cubicInterpolationMode: 'monotone',
 				pointRadius: 0
 			},
 			{
 				label: line2Label,
 				data: line2Data,
-				backgroundColor: 'rgb(255 193 7 / 20%)',
+				backgroundColor: 'rgb(31 233 64 / 20%)',
 				fill: true,
-				borderColor: '#ffc107',
+				borderColor: '#1fe940',
 				cubicInterpolationMode: 'monotone',
 				pointRadius: 0
 			}
@@ -125,9 +128,9 @@ const AreaChart = ({ leftTitle, rightTitle, labels, line1Data, line2Data, line1L
 						// }
 						return `${label}: ${formattedValue}`
 					},
-
 					footer: context => {
-						const total = context[0].parsed.y
+						const total = context[1].parsed.y + context[0].parsed.y
+						debugger
 						return `Total: ${numeral(total).format('0,0[.]000')}`
 					}
 				}
@@ -144,7 +147,10 @@ const AreaChart = ({ leftTitle, rightTitle, labels, line1Data, line2Data, line1L
 				}
 			},
 			active: {
-				display: false
+				type: 'linear' as const,
+				display: true,
+				position: 'left' as const,
+				grid
 			}
 		}
 	}

diff --git a/views/charts/components/BarChart.tsx b/views/charts/components/BarChart.tsx
@@ -110,9 +110,8 @@ const BarChart = ({ leftTitle, rightTitle, label, data, labels }: LineChartProps
 				grid,
 				type: 'time',
 				time: {
-					unit: 'day',
-					tooltipFormat: 'MMM DD, YYYY',
-					stepSize: history.length > 20 ? 5 : 1
+					unit: 'month',
+					tooltipFormat: 'MMM DD, YYYY'
 				}
 			},
 			y: {

diff --git a/views/charts/components/LineChart.tsx b/views/charts/components/LineChart.tsx
@@ -36,9 +36,10 @@ type LineChartProps = {
 		title: string
 		value: number
 	}
+	stepSize?: (history: History) => number
 }
 
-const LineChart = ({ leftTitle, rightTitle, labels, label, data }: LineChartProps) => {
+const LineChart = ({ leftTitle, rightTitle, labels, label, data, stepSize }: LineChartProps) => {
 	const { isMobile } = useMobileLayout('small')
 	const router = useRouter()
 	const { locale } = router
@@ -116,7 +117,7 @@ const LineChart = ({ leftTitle, rightTitle, labels, label, data }: LineChartProp
 				time: {
 					unit: 'day',
 					tooltipFormat: 'MMM DD, YYYY',
-					stepSize: history.length > 20 ? 5 : 1
+					stepSize: stepSize ? stepSize(history) : history.length > 30 ? 10 : 1
 				}
 			},
 			y: {