Commit 1301b21f authored by Edu Trevisan's avatar Edu Trevisan

Update youth layout

parent f3aa1747
......@@ -33,11 +33,11 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
grid-template-columns: 1fr;
grid-template-rows: repeat(4,auto);
grid-gap: 1rem;
grid-row-gap: 1rem;
grid-template-areas: "pan1"
"pan2"
"pan3"
"pan4";
padding: 1rem;
grid-template-areas: "p1"
"p2"
"p3"
"p4";
}
@media only screen and (min-width: 900px) {
......@@ -46,10 +46,10 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, auto);
grid-gap: 1rem;
grid-row-gap: 1rem;
grid-template-areas: "pan1 pan2"
"pan3 pan3"
"pan4 pan4";
padding: 1rem;
grid-template-areas: "p1 p2"
"p3 p3"
"p4 p4";
}
}
......@@ -60,37 +60,36 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto;
grid-gap: 1rem;
grid-row-gap: 1rem;
grid-template-areas:"pan1 pan2 pan3"
"pan1 pan2 pan4"
"b pan2 pan4";
padding: 1rem;
grid-template-areas:"p1 p3 p3"
"p1 p2 p4"
"b p2 p4";
}
}
#jv3pannel-1{
background-color: #FFF;
grid-area: pan1;
grid-area: p1;
}
#jv3pannel-2{
background-color: #FFF;
grid-area: pan2;
grid-area: p2;
}
#jv3pannel-3{
background-color: #FFF;
grid-area: pan3;
grid-area: p3;
}
#jv3pannel-4{
background-color: #FFF;
grid-area: pan4;
grid-area: p4;
}
.card{
margin: 0;
}
.pannel{
background-color: #FFF;
}
/* Contrast Colors */
......@@ -103,3 +102,14 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
color: white;
font-style: italic;
}
.Contrastpannel{
color: yellow;
background-color: black;
border: 1px solid white;
}
.Contrastpannel > .card-content > .card-title{
color: yellow !important;
}
\ No newline at end of file
......@@ -148,77 +148,67 @@ class YouthJob extends Component {
dados somente daquele estado. Clique em limpar mapa para voltar aos dados do Brasil. </p>
</Col>
</Row>
<Row>
<Col s={12} m={6} l={4}>
<Row>
<Card id="jv3pannel-1" title="Renda Média dos Jovens Negros (R$)">
<GrayBar text="Pretos e pardos, entre 15 e 29 anos, por UF"/>
<Map getMapClick={this.getMapClick}
clicked={this.state.clickedInMap}
/>
<Button className="clearmapbtn" onClick={this.clearMap}> Limpar Mapa </Button>
<UfBar ufname={getStateExtendedName(this.state.clickedInMap).currentState}/>
<Table body={this.vetoriza(this.state.charts['Renda Media'])} header={['Renda Média']} />
<CardFooter data={serverURL+earningsData+'&format=csv'} source="Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)"/>
</Card>
</Row>
</Col>
<Col s={12} m={6} l={4}>
<Row>
<Card id="jv3pannel-2" title="Trabalhou na Semana de Referência">
<GrayBar text="Pretos e Pardos, entre 15 e 29 anos"/>
<BuildStackedBar
dataKey='Ano'
data={this.state.charts['Trabalhou Referencia Preto Pardo']}
customKeys={TrabPP}
/>
<p>Proporção de jovens negros que trabalharam ou estavam afastados do trabalho na semana de referência da pesquisa com relação aos que não trabalharam nem estavam afastados.</p>
<GrayBar text="Brancos, entre 15 e 29 anos"/>
<BuildStackedBar
dataKey='Ano'
data={this.state.charts['Trabalhou Referencia Branco']}
customKeys={TrabPP}
/>
<p>Proporção de jovens brancos que trabalharam ou estavam afastados do trabalho na semana de referência da pesquisa com relação aos que não trabalharam nem estavam afastados.</p>
<CardFooter data={serverURL+'youth_jobs?dims=year,cor_raca,trabalhou,uf&format=csv'} source="Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)"/>
</Card>
</Row>
</Col>
<Col s={12} m={6} l={4}>
<Row>
<Card id="jv3pannel-2" title="Trabalhadores Jovens Negros segundo vinculo">
<GrayBar text="Pretos e Pardos, 15 a 29 anos"/>
<BuildStackedBar
dataKey='Ano'
data={this.state.charts['Trabalhador Vinculo']}
customKeys={TrabVin}
/>
<p>Tipo de contratação do jovem negro no trabalho exercido durante a semana de referência da pesquisa.</p>
<CardFooter data={serverURL+'youth_jobs?dims=year,cor_raca,vinculo,uf&format=csv'} source="Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)"/>
</Card>
</Row>
<Row>
<Card id="jv3pannel-2" title="Distribuição nas Faixas Salariais">
<GrayBar text="Pretos e Pardos, 15 a 29 anos"/>
<BuildStackedBar
dataKey='Ano'
data={this.state.charts['Faixa Salario']}
customKeys={FaixaSal}
/>
<GrayBar text="Brancos, 15 a 29 anos"/>
<BuildStackedBar
dataKey='Ano'
data={this.state.charts['Faixa Salario Brancos']}
customKeys={FaixaSal}
/>
<p>1SM é 1 Salário Minimo</p>
<CardFooter data={serverURL+'youth_jobs?dims=year,cor_raca,rendimento_faixa,uf&format=csv'} source="Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)"/>
</Card>
</Row>
</Col>
</Row>
<div className="jv3pannels">
<Card id="jv3pannel-1" className={`${contrastString}pannel hoverable`} title="Renda Média dos Jovens Negros (R$)">
<GrayBar text="Pretos e pardos, entre 15 e 29 anos, por UF" />
<Map getMapClick={this.getMapClick}
clicked={this.state.clickedInMap}
/>
<Button className="clearmapbtn" onClick={this.clearMap}> Limpar Mapa </Button>
<UfBar ufname={getStateExtendedName(this.state.clickedInMap).currentState} />
<Table body={this.vetoriza(this.state.charts['Renda Media'])} header={['Renda Média']} />
<CardFooter data={serverURL + earningsData + '&format=csv'} source=" Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)" />
</Card>
<Card id="jv3pannel-2" className={`${contrastString}pannel hoverable`} title="Trabalhou na Semana de Referência">
<GrayBar text="Pretos e Pardos, entre 15 e 29 anos" />
<BuildStackedBar
dataKey='Ano'
data={this.state.charts['Trabalhou Referencia Preto Pardo']}
customKeys={TrabPP}
/>
<p>Proporção de jovens negros que trabalharam ou estavam afastados do trabalho na semana de referência da pesquisa com relação aos que não trabalharam nem estavam afastados.</p>
<GrayBar text="Brancos, entre 15 e 29 anos" />
<BuildStackedBar
dataKey='Ano'
data={this.state.charts['Trabalhou Referencia Branco']}
customKeys={TrabPP}
/>
<p>Proporção de jovens brancos que trabalharam ou estavam afastados do trabalho na semana de referência da pesquisa com relação aos que não trabalharam nem estavam afastados.</p>
<CardFooter data={serverURL + 'youth_jobs?dims=year,cor_raca,trabalhou,uf&format=csv'} source=" Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)" />
</Card>
<Card id="jv3pannel-3" className={`${contrastString}pannel hoverable`} title="Trabalhadores Jovens Negros segundo vinculo">
<GrayBar text="Pretos e Pardos, 15 a 29 anos" />
<BuildStackedBar
dataKey='Ano'
data={this.state.charts['Trabalhador Vinculo']}
customKeys={TrabVin}
/>
<p>Tipo de contratação do jovem negro no trabalho exercido durante a semana de referência da pesquisa.</p>
<CardFooter data={serverURL + 'youth_jobs?dims=year,cor_raca,vinculo,uf&format=csv'} source=" Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)" />
</Card>
<Card id="jv3pannel-4" className={`${contrastString}pannel hoverable`} title="Distribuição nas Faixas Salariais">
<GrayBar text="Pretos e Pardos, 15 a 29 anos" />
<BuildStackedBar
dataKey='Ano'
data={this.state.charts['Faixa Salario']}
customKeys={FaixaSal}
height={400}
/>
<GrayBar text="Brancos, 15 a 29 anos" />
<BuildStackedBar
dataKey='Ano'
data={this.state.charts['Faixa Salario Brancos']}
customKeys={FaixaSal}
height={400}
/>
<p>1SM é 1 Salário Minimo</p>
<CardFooter data={serverURL + 'youth_jobs?dims=year,cor_raca,rendimento_faixa,uf&format=csv'} source=" Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)" />
</Card>
</div>
</div>
);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment