All files / app/components PercentBar.tsx

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35                1x       1x             1x       1x 1x                 1x  
import React from 'react';
import { style } from 'app/styles';
 
export interface PercentBarProps {
  numerator: number;
  denominator: number;
}
 
const defaultNumeratorBarStyle = {
  backgroundColor: 'blue',
  height: 10,
};
const defaultDenominatorBarStyle = {
  backgroundColor: 'grey',
  height: 10,
  marginBottom: 5,
};
 
// numbers for humans have commas
export const PercentBar = ({
  numerator,
  denominator,
}: PercentBarProps): JSX.Element => {
  const percentWidth = (numerator / denominator) * 100;
  return (
    <div style={style(defaultDenominatorBarStyle, { width: '100%' })}>
      <div
        style={style(defaultNumeratorBarStyle, { width: `${percentWidth}%` })}
      />
    </div>
  );
};
 
PercentBar.displayName = 'PercentBar';