import { CoinDenom , NetworkDefinition } from "@anthem/utils" ; import { Colors } from "@blueprintjs/core" ; import { COLORS } from "constants/colors" ; import { CURRENCY_SETTING , FiatCurrency } from "constants/fiat" ; import { ALL_POSSIBLE_CHART_TABS } from "./client-utils" ; import { formatCurrencyAmount } from "./currency-utils" ; import { fromDateKey , getDateInFuture , toDateKey } from "./date-utils" ; import { tFnString } from "./i18n-utils" ; /** ===========================================================================
 * Types & Config
 * ============================================================================
 */ export interface ChartSeries { [ key ] : number ; } export interface ChartData { type : ALL_POSSIBLE_CHART_TABS ; data : ChartSeries ; withdrawalEventDates : WithdrawalEventDates ; withdrawalsMap : { [ key ] : string ; } ; } export interface WithdrawalEventDates { [ key ] : number ; } export interface FiatPriceMap { [ key ] : number ; } /** ===========================================================================
 * Highcharts Utils
 * ============================================================================
 */ interface ChartOptionsArgs { network : NetworkDefinition ; denom : CoinDenom ; fiatCurrency : FiatCurrency ; currencySetting : CURRENCY_SETTING ; isDarkTheme : boolean ; chartData : ChartData ; tString : tFnString ; fullSize : boolean ; } export const getHighchartsChartOptions = ( optionsArgs ) : Highcharts . Options => { const { denom , tString , network , fullSize , chartData , isDarkTheme , fiatCurrency , currencySetting , } = optionsArgs ; const { data , withdrawalEventDates } = chartData ; const xAxisValues = Object . keys ( data ) ; const yAxisValues = Object . values ( data ) ; const themedColor = isDarkTheme ? Colors . LIGHT_GRAY5 : Colors . DARK_GRAY1 ; const themedAxisColor = isDarkTheme ? Colors . DARK_GRAY5 : Colors . LIGHT_GRAY1 ; const fontStyles = { color : themedColor , fontSize : "12px" , fontFamily : "ColfaxWebNormal, Helvetica, sans-serif" , } ; const options = { title : { text : undefined , } , chart : { marginLeft : 76 , backgroundColor : "transparent" , height : fullSize ? window . innerHeight - 250 : 225 , zoomType : "x" , } , credits : { enabled : false , } , legend : { enabled : false , } , plotOptions : { area : { fillColor : { linearGradient : { x1 : 0 , y1 : 0 , x2 : 0 , y2 : 1 } , stops : [ [ 0 , COLORS . CHART_GRADIENT_STOP ] , [ 1 , COLORS . CHART_GRADIENT_START ] , ] , } , } , } , tooltip : { borderWidth : 1 , borderColor : COLORS . BALANCE_SHADE_THREE , formatter ( ) { return formatTooltipLabel ( { tString , denom , network , x : this . x , y : this . y , fiatCurrency , currencySetting , chartType : chartData . type , xIndexPosition : this . point . x , withdrawalDateSet : withdrawalEventDates , } ) ; } , } , series : [ { lineColor : COLORS . CHART_LINE , type : "area" , data : yAxisValues , marker : { enabled : false , states : { hover : { fillColor : COLORS . CHART_FOCUS , } , } , } , } , ] , yAxis : { endOnTick : false , gridLineColor : themedAxisColor , labels : { style : fontStyles , } , title : { style : { color : themedColor , } , text : currencySetting === "fiat" ? fiatCurrency . symbol : denom . name , } , } , xAxis : { lineColor : themedAxisColor , type : "datetime" , tickInterval : 30 , categories : xAxisValues , crosshair : { color : COLORS . CHART_CROSSHAIR , } , labels : { style : fontStyles , formatter ( ) { const date = fromDateKey ( String ( this . value ) ) ; return date . format ( "MMM DD" ) ; } , } , plotLines : withdrawalEventDates ? Object . keys ( withdrawalEventDates ) . map ( xValue => { return { width : 1 , value : Number ( xValue ) , dashStyle : "LongDashDotDot" , color : COLORS . CHART_PLOT_LINE , } ; } ) : undefined , } , } ; return options ; } ; interface TooltipArguments { x : number ; y : number ; denom : CoinDenom ; network : NetworkDefinition ; xIndexPosition : number ; currencySetting : CURRENCY_SETTING ; fiatCurrency : FiatCurrency ; chartType : ALL_POSSIBLE_CHART_TABS ; tString : tFnString ; withdrawalDateSet ? : WithdrawalEventDates ; } const formatTooltipLabel = ( { x , y , denom , tString , network , chartType , fiatCurrency , xIndexPosition , currencySetting , withdrawalDateSet , } ) : string => { const date = toDateKey ( x ) ; const yValue = formatCurrencyAmount ( String ( y ) ) ; const { symbol } = fiatCurrency ; const { name } = network ; let currency = currencySetting === "fiat" ? `${ symbol }` : denom . name ; const IS_CUSD = chartType === "CUSD" ; const IS_CELO_COMMISSIONS = chartType === "COMMISSIONS" && name === "CELO" ; /**
     * Override the currency setting if viewing the commissions or cUSD chart
     * for Celo:
     */ if ( IS_CUSD || IS_CELO_COMMISSIONS ) { currency = "cUSD" ; } let optionalWithdrawalMessage = "" ; if ( withdrawalDateSet ) { const withdrawalValue = withdrawalDateSet [ xIndexPosition ] ; let withdrawalAmount = "" ; if ( withdrawalValue ) { withdrawalAmount = formatCurrencyAmount ( String ( withdrawalValue ) ) ; } const unbondingDateFormatted = getDateInFuture ( new Date ( x ) , 21 ) ; const actionVerb = chartType === "STAKING" ? tString ( "Unbonded" ) : tString ( "Withdrew" ) ; const optionalUnbondingMsg = chartType === "STAKING" ? `<br>Available on ${ unbondingDateFormatted }` : "" ; const isWithdrawalPoint = xIndexPosition in withdrawalDateSet ; optionalWithdrawalMessage = isWithdrawalPoint ? `<br><b>${ actionVerb } ${ withdrawalAmount } ${ currency } ${ optionalUnbondingMsg }</b>` : "" ; } const label = `${ date }<br><b>${ yValue } ${ currency }</b>${ optionalWithdrawalMessage }` ; return label ; } ;