Function AverageDisplay

demo/components/region-controls.js:5–37

({ band, data: { value } })

import { XCircle } from '@carbonplan/icons'

const AverageDisplay = ({ band, data: { value } }) => {
  if (!value || !value.climate) {
    return 'loading...'
  }

  let result
  const filteredData = value.climate.filter((d) => d !== 9.969209968386869e36)
  if (filteredData.length === 0) {
    result = 'no data in region'
  } else {
    const average =
      filteredData.reduce((a, b) => a + b, 0) / filteredData.length
    if (band === 'prec') {
      result = `Average: ${average.toFixed(2)}`
    } else {
      result = `Average: ${average.toFixed(2)}ºC`
    }
  }

  return (
    <Box
      sx={{
        ml: [2],
        mt: ['-1px'],
        fontFamily: 'mono',
        letterSpacing: 'mono',
        textTransform: 'uppercase',
      }}
    >
      {result}
    </Box>
  )
}

const RegionControls = ({
  band,