Commit bd3bbbb0 authored by Edu Trevisan's avatar Edu Trevisan

Updade Eixo4

parent 74c763a0
......@@ -22,30 +22,40 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
import React, { Component } from 'react';
import { ResponsiveContainer, Bar, BarChart,
XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
XAxis, YAxis, CartesianGrid, Tooltip, Legend, LabelList
} from 'recharts';
const getPercent = (value, total) => {
const ratio = total > 0 ? value / total : 0;
return toPercent(ratio, 2);
};
const toPercent = (decimal, fixed = 0) => {
return `${(decimal * 100).toFixed(fixed)}%`;
};
const COLORS = ["#0E3959", "#0B7B6B", "#EA7C27", "#B66526", "#CA3828", "#363B1B", "#78752E", "#081A24", "#211517","#763618", "#722417", "#C93829", "#363B1BU"];
const renderTooltipContent = (o) => {
const { payload, label } = o;
const total = payload.reduce((result, entry) => (result + entry.value), 0);
return (
<div className={"z-depth-3"} style={{backgroundColor: "white"}}>
<div className="customized-tooltip-content" style={{margin: 25}}>
<div className="total">
<div className={"tooltipCenter"}><b>{`${label}`}</b></div>
</div>
<div className={"z-depth-3"} style={{ backgroundColor: "white" }}>
<div className="customized-tooltip-content" style={{ margin: 25 }}>
<div className="total">
<div className={"tooltipCenter"}><b>{`${label}`}</b></div>
</div>
<ul className="list">
{
payload.map((entry, index) => (
<li key={`item-${index}`} style={{color: entry.color}}>
{`${entry.name}: ${entry.value}`}
</li>
))
payload.reverse().map((entry, index) => (
<li key={`item-${index}`} style={{ color: entry.color }}>
{`${entry.name}: ${entry.value} (${getPercent(entry.value, total)})`}
</li>
))
}
<li id={"totalText"}><b>Total: </b>{total}</li>
</ul>
<div style={{paddingBottom:15}}></div>
</div>
</div>
</div>
);
};
......@@ -80,44 +90,73 @@ const renderTooltipContent = (o) => {
render() {
if(this.state.data && this.state.data.length > 0) {
var newData = this.state.data;
newData = newData.map(function(element) {
return this.renameKeys(element, this.props.customKeys);
var newData = this.state.data;
const dataKey = this.props.dataKey;
const label = this.props.label;
const customKeys = this.props.customKeys;
// Change chart height if it was specified
var cardHeight = this.props.height;
var interval = this.props.interval;
if (!cardHeight) cardHeight = 300;
if (!interval) interval = 0;
if (newData && newData.length > 0 && customKeys !== undefined) {
newData = newData.map(function (element) {
return this.renameKeys(element, customKeys);
}, this);
var dataKey = this.props.dataKey;
}
if (newData !== null && newData !== undefined && newData.length > 0)
return (
<ResponsiveContainer minHeight={360} minWidth={100} id={this.props.id}>
<BarChart width={600} height={300} data={newData}
minHeight={360} minWidth={100}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis dataKey={dataKey}/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip content={renderTooltipContent}/>
<ResponsiveContainer height={cardHeight}>
<BarChart width={600} height={cardHeight} data={newData}
margin={{ top: 20, right: 0, left: 0, bottom: 5 }}>
<XAxis dataKey={dataKey} interval={interval} />
<YAxis />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip content={renderTooltipContent} />
<Legend />
{
Object.values(this.props.customKeys).map(function(bar, index) {
if(bar !== dataKey)
return <Bar key={Math.random()} isAnimationActive={false} dataKey={bar} fill={COLORS[index]} />
return null;
})
{Object.keys(newData[0]).map(function (bar, index) {
if (bar !== dataKey && bar !== 'Sem informações') {
if (label === undefined) {
return <Bar isAnimationActive={false} key={Math.random()} dataKey={bar} fill={COLORS[index]} />
}
else if (bar !== label) {
return (
<Bar isAnimationActive={false} key={Math.random()} dataKey={bar} fill={COLORS[index]}>
{index === Object.keys(newData[0]).length - 1 ?
<LabelList dataKey={label} position="top" /> : null}
</Bar>
)
}
}
return null;
})
}
</BarChart>
</ResponsiveContainer>
);}
);
else
return (<div> </div>);
}
renameKeys(obj, newKeys) {
const keyValues = Object.keys(obj).map(key => {
const newKey = newKeys[key] || key;
return { [newKey]: obj[key] };
});
return Object.assign({}, ...keyValues);
var recurrentKeys = [];
var returnObj = {};
var newKey;
for (let key in obj) {
newKey = newKeys[key] || key;
if (recurrentKeys.indexOf(newKey) === -1) {
recurrentKeys.push(newKey);
Object.assign(returnObj, { [newKey]: obj[key] });
} else {
returnObj[newKey] = returnObj[newKey] + obj[key];
}
}
return returnObj;
}
filterArrayByPercent(data, percent) {
......
......@@ -152,13 +152,21 @@ class BuildStackedBar extends Component {
return arrayFiltered;
}
renameKeys(obj, newKeys) {
const keyValues = Object.keys(obj).map(key => {
const newKey = newKeys[key] || key;
return { [newKey]: obj[key] };
});
return Object.assign({}, ...keyValues);
}
renameKeys(obj, newKeys) {
var recurrentKeys = [];
var returnObj = {};
var newKey;
for (let key in obj) {
newKey = newKeys[key] || key;
if (recurrentKeys.indexOf(newKey) === -1) {
recurrentKeys.push(newKey);
Object.assign(returnObj, { [newKey] : obj[key] });
} else {
returnObj[newKey] = returnObj[newKey] + obj[key];
}
}
return returnObj;
}
}
......
......@@ -52,8 +52,8 @@ const homeLighting ={
'4': 'Óleo, querosene ou gás',
'5': 'Vela',
'6': 'Outra forma',
'null': 'Indefinido',
'NA': 'Não informado',
'null': 'Sem informações',
'NA': 'Sem informações',
}
const trashDestiny = {
'1': 'Coletado diretamente',
......@@ -62,16 +62,16 @@ const trashDestiny = {
'4': 'Jogado em terreno baldio ou logradouro',
'5': 'Jogado em rio ou mar',
'6': 'Outro destino',
'null': 'Indefinido',
'NA': 'Não informado',
'null': 'Sem informações',
'NA': 'Sem informações',
}
const watterSuply = {
'1': 'Rede geral de distribuição',
'2': 'Poço ou nascente',
'3': 'Cisterna',
'4': 'Outra',
'null': 'Indefinido',
'NA': 'Não informado',
'null': 'Sem informações',
'NA': 'Sem informações',
}
const sanitaryDump = {
'1': 'Rede coletora de esgoto ou pluvial',
......@@ -80,8 +80,8 @@ const sanitaryDump = {
'4': 'Vala a céu aberto',
'5': 'Direto para um rio,lago ou mar',
'6': 'Outra forma',
'null': 'Indefinido',
'NA': 'Não informado',
'null': 'Sem informações',
'NA': 'Sem informações',
}
/**
......
......@@ -30,6 +30,7 @@ import { Store } from '../Store';
import coins from './icons/coins.png';
import BuildStackedBar from '../Charts/BuildStackedBar';
import BuildBar from '../Charts/BuildBar';
import Loading from '../Components/Loading';
import {
getStateExtendedName,
......@@ -47,13 +48,13 @@ const type = "eixo_3";
const extrativismo = {
'1': 'sim',
'2': 'não',
'null': 'indefinido',
'NA': 'Não informado',
'null': 'Sem informações',
'NA': 'Sem informações',
}
const pbf = {
'0': 'não',
'1': 'sim',
'null': 'indefinido',
'null': 'Sem informações',
}
const totalrenda = {
'average': 'Renda Média (R$)',
......@@ -61,8 +62,8 @@ const totalrenda = {
const homeTypelocation = {
'1': 'Urbano',
'2': 'Rural',
'null': 'Indefinido',
'NA': 'Não informado'
'null': 'Sem informações',
'NA': 'Sem informações',
}
......@@ -153,7 +154,7 @@ class Eixo3 extends Component {
<Card id="e3pannel-3" className={`${contrastString}pannel hoverable`} title="Bolsa Família">
<GrayBar text="Percentual de famílias que recebem Bolsa Família" />
<div id={'Bolsa Família' + type}>
<BuildStackedBar
<BuildBar
dataKey='Ano'
data={c[1]}
customKeys={pbf}
......@@ -166,7 +167,7 @@ class Eixo3 extends Component {
<Card id="e3pannel-5" className={`${contrastString}pannel hoverable`} title="Extrativismo">
<GrayBar text="Percentual de famílias que sobrevivem do extrativismo" />
<div id={'Extrativismo' + type}>
<BuildStackedBar
<BuildBar
dataKey='Ano'
data={c[2]}
customKeys={extrativismo}
......@@ -179,7 +180,7 @@ class Eixo3 extends Component {
<Card id="e3pannel-6" className={`${contrastString}pannel hoverable`} title="Área Rural">
<GrayBar text="Percentual de Domicílios Rurais no CadÚnico" />
<div id={'Tipo de domicílio' + type}>
<BuildStackedBar
<BuildBar
dataKey='Ano'
data={c[3]}
customKeys={homeTypelocation}
......
This diff is collapsed.
......@@ -55,7 +55,7 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
grid-template-columns: auto;
grid-template-rows: repeat(5,auto);
grid-gap: 1rem;
grid-row-gap: 1rem;
padding: 1rem;
grid-template-areas: "pan1"
"pan2"
"pan3"
......@@ -68,7 +68,7 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
grid-template-columns:3fr 1fr 1fr 1fr 3fr;
grid-template-rows: auto auto auto auto ;
grid-gap: 1rem;
grid-row-gap: 1rem;
padding: 1rem;
grid-template-areas:"pan1 pan3 pan3 pan3 pan3"
"pan1 pan3 pan3 pan3 pan3"
"pan2 pan2 pan2 pan4 pan4"
......
......@@ -63,17 +63,29 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
"p7";
}
@media only screen and (min-width: 950px) {
@media only screen and (min-width: 900px) {
.e2pannels{
display:grid;
grid-template-columns:3fr 1fr 1fr 1fr 3fr;
grid-template-rows: auto auto auto auto ;
grid-template-columns:6fr 6fr;
grid-template-rows: auto auto ;
grid-gap: 1rem;
padding: 1rem;
grid-template-areas:"p1 p2 p2 p2 p3"
"p1 p2 p2 p2 p3"
"p4 p2 p2 p2 p3"
"p4 p5 p5 p5 p6";
grid-template-areas:"p1 p1"
"p3 p2";
}
}
@media only screen and (min-width: 1200px) {
.e2pannels{
display:grid;
grid-template-columns:3fr 3fr 3fr;
grid-template-rows: auto auto auto ;
grid-gap: 1rem;
padding: 1rem;
grid-template-areas:"p1 p2 p3"
"p1 p2 p3"
"p4 p2 p3"
"p4 p5 p6";
}
}
......
......@@ -63,7 +63,22 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
"p6";
}
@media only screen and (min-width: 950px) {
@media only screen and (min-width: 900px) {
.e3pannels{
display:grid;
grid-template-columns:6fr 6fr;
grid-template-rows: auto auto ;
grid-gap: 1rem;
padding: 1rem;
grid-template-areas:"p1 p2"
"p1 p3"
"p5 p3"
"p5 p6"
"blank p6";
}
}
@media only screen and (min-width: 1200px) {
.e3pannels{
display:grid;
grid-template-columns:3fr 3fr 3fr;
......@@ -72,7 +87,6 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
padding: 1rem;
grid-template-areas:"p1 p2 p3"
"p1 p5 p6"
"p4 p5 p6"
"p4 p5 p6";
}
}
......
......@@ -54,15 +54,15 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
grid-template-columns: 1fr;
grid-template-rows: repeat(8,auto);
grid-gap: 1rem;
grid-row-gap: 1rem;
grid-template-areas: "pan1"
"pan2"
"pan3"
"pan4"
"pan5"
"pan6"
"pan7"
"pan8";
padding: 1rem;
grid-template-areas: "p1"
"p2"
"p3"
"p4"
"p5"
"p6"
"p7"
"p8";
}
@media only screen and (min-width: 900px) {
......@@ -71,75 +71,69 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(4, auto);
grid-gap: 1rem;
grid-row-gap: 1rem;
grid-template-areas: "pan1 pan2"
"pan3 pan4"
"pan5 pan6"
"pan7 pan8";
padding: 1rem;
grid-template-areas: "p1 p2"
"p3 p4"
"p5 p6"
"p7 p8";
}
}
@media only screen and (min-width: 1300px) {
@media only screen and (min-width: 1200px) {
.e4pannels{
display:grid;
grid-template-columns: 3fr 1fr 1fr 1fr 1fr 2fr;
grid-template-columns: 3fr 3fr 3fr;
grid-template-rows: auto auto auto auto;
grid-gap: 1rem;
grid-row-gap: 1rem;
grid-template-areas:"pan1 pan2 pan2 pan2 pan2 pan2"
"pan1 pan2 pan2 pan2 pan2 pan2"
"pan4 pan5 pan5 pan5 pan3 pan3"
"pan6 pan7 pan7 pan7 pan8 pan8";
padding: 1rem;
grid-template-areas:"p1 p2 p2"
"p1 p3 p4";
}
}
/*#################*/
/*ELEMENTOS DO GRID*/
#e4pannel-1{
background-color: #FFF;
grid-area: pan1;
grid-area: p1;
}
#e4pannel-2{
background-color: #FFF;
grid-area: pan2;
grid-area: p2;
}
#e4pannel-3{
background-color: #FFF;
grid-area: pan3;
grid-area: p3;
}
#e4pannel-4{
background-color: #FFF;
grid-area: pan4;
grid-area: p4;
}
#e4pannel-5{
background-color: #FFF;
grid-area: pan5;
grid-area: p5;
}
#e4pannel-6{
background-color: #FFF;
grid-area: pan6;
grid-area: p6;
}
#e4pannel-7{
background-color: #FFF;
grid-area: pan7;
grid-area: p7;
}
#e4pannel-8{
background-color: #FFF;
grid-area: pan8;
grid-area: p8;
}
.card{
margin: 0;
}
.pannel{
background-color: #FFF;
}
/* Contrast Colors */
.ContrasteixoHeaderQ{
......@@ -149,4 +143,14 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
.ContrasteixoSubHeader{
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
......@@ -25,7 +25,7 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
grid-template-columns: 1fr;
grid-template-rows: repeat(8,1fr);
grid-gap: 1rem;
grid-row-gap: 1rem;
padding: 1rem;
grid-template-areas: "ga1"
"ga2"
"ga3"
......@@ -43,7 +43,7 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(4,1fr);
grid-gap: 1rem;
grid-row-gap: 1rem;
padding: 1rem;
grid-template-areas: " ga1 ga2 "
" ga3 ga4 "
" ga5 ga6 "
......
......@@ -121,10 +121,13 @@ export function filterJson(data, filters) {
* TODO: Add undefined data support Ex:(NA, Undefined..)
*/
export function createIntervals(data, intervalKey, intervalRange, yearKey=undefined, limit=undefined){
if (!data) return;
var dataLen = data.length;
var years = [];
var workData;
// Create an array organized by year
if(yearKey){
for(let i = 0; i < dataLen; i++){
......
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