Question.js

Question.js

import React from 'react';
import { Card, CardActions, CardHeader, CardText } from 'material-ui/Card';
import { SmileUp, SmileDown } from '../shared/svgIcons/icons';
import { PieChart, Pie, Sector, Cell } from 'recharts';
import Loading from './Loading'
import './QuestionContainer.css'

const data = [{ name: 'Group A', value: 400 }, { name: 'Group B', value: 800 }];
const COLORS = ['#F44336', '#0088FE'];

const RADIAN = Math.PI / 180;

const Question = (props) => {
  return (
    <div>
      { props.data && !props.loading ?
        props.data.questions.map((question, i) => {
          return(
            <div key={i} style={{ padding: '8px' }}>
            <Card style={style.mainCard} >
              <CardHeader
                title={question.title}
                subtitle={question.subtitle}
              />
              <CardText className='QuestionContainer firstrow'>
                <Card style={{ width: "70%", boxShadow: 'none', borderRadius: '0' }} >
                  <CardText style={style.card}>
                    <SmileUp color='grey' style={style.icons} />
                    <div style={style.flexColumn}>
                      <span>{props.percentage[i].yes}% <span style={{ fontWeight: '100' }}>Sim</span></span>
                      <span style={{ fontSize: '15px' }}>2243 clientes</span>
                    </div>
                  </CardText>
                  <div style={{ backgroundColor: 'rgb(139, 195, 74)', ...style.voteBar }}></div>
                </Card>
                <Card style={{ width: '30%', boxShadow: 'none', borderRadius: '0' }}>
                  <CardText style={style.card}>
                    <SmileDown color='grey' style={style.icons} />
                    <div style={style.flexColumn}>
                      <span>{props.percentage[i].yes}% <span style={{ fontWeight: '100' }}>Não</span></span>
                      <span style={{ fontSize: '15px' }}>430 clientes</span>
                    </div>
                  </CardText>
                  <div style={{ backgroundColor: '#F44336', ...style.voteBar }}></div>
                </Card>
              </CardText>
            </Card>
            {/* <div className='QuestionContainer maincard'>
              <Card style={style.mainCard}>
                <CardHeader
                  title="Consumidores em que beblue foi decisivo?"
                  subtitle="Consumidores que foram ao estabelecimento apenas por que o estabelecimento aceita Beblue"
                />
                <CardText style={style.cardtext}>
                  <Card style={{ boxShadow: 'none', borderRadius: '0', ...style.cardtext }} >
                    <CardText style={style.card}>
                      <SmileUp color='grey' style={style.icons} />
                      <div style={style.flexColumn}>
                        <span>70% <span style={{ fontWeight: '100' }}>Sim</span></span>
                        <span style={{ fontSize: '15px' }}>2243 clientes</span>
                      </div>
                    </CardText>
                    <CardText style={style.card}>
                      <SmileDown color='grey' style={style.icons} />
                      <div style={style.flexColumn}>
                        <span>30% <span style={{ fontWeight: '100' }}>Não</span></span>
                        <span style={{ fontSize: '15px' }}>430 clientes</span>
                      </div>
                    </CardText>
                  </Card>
                  <PieChart width={150} height={150}>
                    <Pie
                      data={data}
                      cx='50%'
                      cy='50%'
                      labelLine={false}
                      innerRadius={47}
                      outerRadius={70}
                      fill="#ededed"
                      textAnchor='end'
                    >
                      {
                        data.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]} />)
                      }
                    </Pie>
                  </PieChart>
                </CardText>
              </Card>
            </div> */}
          </div>
          )
        }) 
        :
        null
      }
        
    </div>
  )
}

const style = {
  cardtext: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center'
  },
  mainCard: {
    marginBottom: '30px'
  },
  card: {
    fontSize: '27px',
    color: 'grey',
    fontWeight: 'bold',
    boxShadow: 'none',
    display: 'flex',
    alignItems: 'center'

  },
  flexCenter: {
    display: 'flex',
    alignItems: 'center'
  },
  flexColumn: {
    display: 'flex',
    flexDirection: 'column'
  },
  icons: {
    width: '45px',
    height: '45px',
    marginRight: '10px'
  },
  voteBar: {
    width: '100%', height: '50px'
  }
}

export default Question