From 85d470ed25635560abf9610fdc73461a60bbd659 Mon Sep 17 00:00:00 2001 From: "vien.nguyen2-tiki" Date: Fri, 13 Jan 2023 13:25:45 +0700 Subject: [PATCH] feat: public chart --- components/Navbar/MobileNavigation.tsx | 6 +++--- components/Navbar/index.tsx | 22 +++++++++++----------- views/charts/Address.tsx | 11 +++++------ views/charts/Gas.tsx | 3 +++ views/charts/components/AreaChart.tsx | 20 +++++++++++++------- views/charts/components/BarChart.tsx | 5 ++--- views/charts/components/LineChart.tsx | 5 +++-- 7 files changed, 40 insertions(+), 32 deletions(-) diff --git a/components/Navbar/MobileNavigation.tsx b/components/Navbar/MobileNavigation.tsx index 5d570d68..e201888f 100644 --- a/components/Navbar/MobileNavigation.tsx +++ b/components/Navbar/MobileNavigation.tsx @@ -31,13 +31,13 @@ const LinkMenuItem = ({ prefix?: React.ReactNode }) => (
- + {!!prefix && prefix} - + {label} diff --git a/components/Navbar/index.tsx b/components/Navbar/index.tsx index 6092b1c7..7fd09e80 100644 --- 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 index a4689658..ac462ff1 100644 --- 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 ( @@ -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'} /> diff --git a/views/charts/Gas.tsx b/views/charts/Gas.tsx index bad79b60..3db22b90 100644 --- 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 + } />
= { labels, datasets: [ @@ -53,18 +55,19 @@ const AreaChart = ({ leftTitle, rightTitle, labels, line1Data, line2Data, line1L 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 index 61748720..1c146bd0 100644 --- 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 index ec0364bd..329f041f 100644 --- 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: {