import React from "react" ; import numeral from "numeral" ; import slugify from "slugify" ; import { Box , Center } from "components/core" ; import { StarIcon } from "./icons" ; type Props = { value : number ; } ; export const DownloadCount = ( { value } ) => { if ( value === undefined ) { return < div className = "star-delta text-secondary text-small" > N / A < /div>; } return < span > { numeral ( value ) . format ( "a" ) } < /span>; } ; const getSign = ( value ) => { if ( value === 0 ) return "" ; return value > 0 ? "+" : "-" ; } ; export const StarDelta = ( { average , ... props } ) => average ? < StarDeltaAverage { ... props } / > : < StarDeltaNormal { ... props } / > ; const StarDeltaNormal = ( { value , ... props } ) => { const sign = getSign ( value ) ; return ( < Center > { value === 0 ? ( "=" ) : ( < > < Box as = "span" mr = "2px" > { sign } < /Box> < span > { formatBigNumber ( Math . abs ( value ) ) } < /span> < StarIcon fontSize = "20px" { ... props } /> < />)} < /Center>); } ; export const StarDeltaAverage = ( { value } ) => { const integerPart = Math . abs ( Math . trunc ( value ) ) ; const decimalPart = ( Math . abs ( value - integerPart ) * 10 ) . toFixed ( ) . slice ( 0 , 1 ) ; const sign = getSign ( value ) ; if ( value === undefined ) return < div className = "star-delta text-secondary text-small" > N / A < /div>; return ( < Center > < span > { sign } < /span> < span > { integerPart } < /span> < span className = "text-secondary" > . { decimalPart } < /span> < StarIcon fontSize = "20px" / > < span > /day</span > < /Center>); } ; export const StarTotal = ( { value } ) => { return ( < Box display = "inline-flex" > < span > { formatBigNumber ( value ) } < /span> < StarIcon fontSize = "20px" / > < /Box>); } ; function formatBigNumber ( value ) { const digits = value > 1000 && value < 10000 ? "0.0" : "0" ; return numeral ( value ) . format ( digits + " a" ) ; } export function getProjectId ( project ) { return slugify ( project . name , { lower : true , remove : /[.'/]/g } ) ; } export const getDeltaByDay = ( period ) => ( { trends } ) => { const periods = { daily : 1 , weekly : 7 , monthly : 30 , quarterly : 90 , yearly : 365 , } ; const delta = trends [ period ] ; const numberOfDays = periods [ period ] ; return average ( delta , numberOfDays ) ; } ; function average ( delta , numberOfDays ) { if ( delta === undefined ) return undefined ; return round ( delta / numberOfDays ) ; } function round ( number , decimals = 1 ) { const i = Math . pow ( 10 , decimals ) ; return Math . round ( number * i ) / i ; }