import { useEffect , useCallback } from 'react' ; import { useHistory } from 'react-router' ; import { getStatisticAddressBalanceRank } from '../../../service/app/charts/activities' ; import { useAppState , useDispatch } from '../../../contexts/providers' ; import i18n , { currentLanguage } from '../../../utils/i18n' ; import { handleAxis } from '../../../utils/chart' ; import { isMobile } from '../../../utils/screen' ; import { shannonToCkb , shannonToCkbDecimal } from '../../../utils/util' ; import { localeNumberString } from '../../../utils/number' ; import { adaptPCEllipsis } from '../../../utils/string' ; import { ChartLoading , ReactChartCore , ChartPage , tooltipColor , tooltipWidth } from '../common' ; import { ChartColors } from '../../../constants/common' ; const gridThumbnail = { left : '4%' , right : '10%' , top : '8%' , bottom : '6%' , containLabel : true , } ; const grid = { left : '5%' , right : '3%' , top : isMobile ( ) ? '3%' : '8%' , bottom : '5%' , containLabel : true , } ; const getAddressWithRanking = ( statisticAddressBalanceRanks , ranking ) => { const addressBalanceRank = statisticAddressBalanceRanks . find ( rank => rank . ranking === ranking ) ; return addressBalanceRank ? addressBalanceRank . address : '' ; } ; const getOption = ( statisticAddressBalanceRanks , isThumbnail = false ) : echarts . EChartOption => ( { color : ChartColors , tooltip : ! isThumbnail ? { trigger : 'axis' , formatter : ( dataList ) => { const widthSpan = ( value ) => tooltipWidth ( value , currentLanguage ( ) === 'en' ? 60 : 35 ) ; let result = `<div>${ tooltipColor ( '#333333' ) }${ widthSpan ( i18n . t ( 'statistic.address' ) ) } ${ adaptPCEllipsis ( getAddressWithRanking ( statisticAddressBalanceRanks , dataList [ 0 ] . name ) , 6 , 60 ) }</div>` ; result += `<div>${ tooltipColor ( ChartColors [ 0 ] ) }${ widthSpan ( i18n . t ( 'statistic.balance' ) ) } ${ localeNumberString ( dataList [ 0 ] . data ) } ${ i18n . t ( 'common.ckb_unit' ) }</div>` ; result += `<div>${ tooltipColor ( ChartColors [ 0 ] ) }${ widthSpan ( i18n . t ( 'statistic.rank' ) ) } ${ dataList [ 0 ] . name }</div>` ; return result ; } , } : undefined , grid : isThumbnail ? gridThumbnail : grid , xAxis : [ { name : isMobile ( ) || isThumbnail ? '' : i18n . t ( 'statistic.rank' ) , nameLocation : 'middle' , nameGap : 30 , type : 'category' , boundaryGap : false , data : statisticAddressBalanceRanks . map ( data => data . ranking ) , } , ] , yAxis : [ { position : 'left' , name : isMobile ( ) || isThumbnail ? '' : `${ i18n . t ( 'statistic.balance_ranking' ) } ${ i18n . t ( 'statistic.log' ) }` , type : 'log' , logBase : 10 , scale : true , axisLine : { lineStyle : { color : ChartColors [ 0 ] , } , } , axisLabel : { formatter : ( value ) => `${ handleAxis ( value ) }B` , } , } , ] , series : [ { name : i18n . t ( 'statistic.balance_ranking' ) , type : 'bar' , yAxisIndex : 0 , barWidth : 8 , symbol : isThumbnail ? 'none' : 'circle' , symbolSize : 3 , data : statisticAddressBalanceRanks . map ( data => shannonToCkb ( data . balance ) ) , } , ] , } ) ; export const AddressBalanceRankChart = ( { clickEvent , isThumbnail = false , } ) => { const { statisticAddressBalanceRanks , statisticAddressBalanceRanksFetchEnd } = useAppState ( ) ; if ( ! statisticAddressBalanceRanksFetchEnd || statisticAddressBalanceRanks . length === 0 ) { return < ChartLoading show = { ! statisticAddressBalanceRanksFetchEnd } isThumbnail = { isThumbnail } / > ; } return ( < ReactChartCore option = { getOption ( statisticAddressBalanceRanks , isThumbnail ) } isThumbnail = { isThumbnail } clickEvent = { clickEvent } / > ) ; } ; const toCSV = ( statisticAddressBalanceRanks ) => statisticAddressBalanceRanks ? statisticAddressBalanceRanks . map ( data => [ data . ranking , shannonToCkbDecimal ( data . balance , 8 ) ] ) : [ ] ; export default ( ) => { const dispatch = useDispatch ( ) ; const history = useHistory ( ) ; const { statisticAddressBalanceRanks } = useAppState ( ) ; const clickEvent = useCallback ( ( param ) => { if ( param && param . name ) { history . push ( `/address/${ getAddressWithRanking ( statisticAddressBalanceRanks , param . name ) }` ) ; } } , [ statisticAddressBalanceRanks , history ] ) ; useEffect ( ( ) => { getStatisticAddressBalanceRank ( dispatch ) ; } , [ dispatch ] ) ; return ( < ChartPage title = { i18n . t ( 'statistic.balance_ranking' ) } description = { i18n . t ( 'statistic.balance_ranking_description' ) } data = { toCSV ( statisticAddressBalanceRanks ) } > < AddressBalanceRankChart clickEvent = { clickEvent } /> < /ChartPage>); } ;