add fix and feature
This commit is contained in:
joseCorte-exe
parent
1c1b820432
commit
aa9540c4e4
@ -13,7 +13,7 @@ export default function MapCard({ title, subtitle, statistic, imgSource }: MapCa
|
||||
const route = title==='R$/MWh'? '/consumption': `pld/${title.slice(0,2).toLocaleLowerCase()}-${title.slice(3,5).toLocaleLowerCase()}`
|
||||
|
||||
return (
|
||||
<MapCardView>
|
||||
<MapCardView statistic={statistic} >
|
||||
<Image src={imgSource} width={90} height={90}/>
|
||||
<div>
|
||||
<h4>{title}</h4>
|
||||
|
||||
@ -1,21 +1,33 @@
|
||||
import styled from 'styled-components'
|
||||
|
||||
export const MapCardView = styled.figure`
|
||||
interface MapCardViewInterface {
|
||||
statistic?: any
|
||||
}
|
||||
|
||||
export const MapCardView = styled.figure<MapCardViewInterface>`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: flex;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
margin-right: 2px;
|
||||
|
||||
h4 {
|
||||
margin-left: ${props => props.statistic? '0' : '10px'};
|
||||
}
|
||||
span {
|
||||
margin-left: ${props => props.statistic? '0' : '10px'};
|
||||
margin-bottom: ${props => props.statistic? '25px' : '0px'};
|
||||
margin-top: ${props => props.statistic? '0px' : '30px'};
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
div {
|
||||
@ -27,6 +39,7 @@ export const MapCardView = styled.figure`
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
/* margin-left: 20px; */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -83,6 +83,8 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
|
||||
width: 90%;
|
||||
height: 190px;
|
||||
|
||||
margin-bottom: 40px;
|
||||
|
||||
background: linear-gradient(155.54deg, #254F7F 15.63%, #9C9C9C 136.34%);
|
||||
border-radius: 26px;
|
||||
|
||||
|
||||
@ -61,8 +61,7 @@ function MyApp({ Component, pageProps }: AppProps) {
|
||||
null
|
||||
}
|
||||
</AppView>
|
||||
<Footer />
|
||||
|
||||
{/* <Footer /> */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -33,6 +33,20 @@ export default function region() {
|
||||
console.log(page)
|
||||
}, [page])
|
||||
|
||||
function handleGreen(minimo, mi, ma, maximo) {
|
||||
if (minimo - mi >= 100 && minimo - mi < 200) {
|
||||
return 'green'
|
||||
} else if ( mi*2 >= 200 && mi*2 <250 ) {
|
||||
return'dullGreen'
|
||||
} else if ( (ma-mi)/2 >=250 && (ma-mi)/2 < 300 ) {
|
||||
return 'white'
|
||||
} else if ( ma/2 >= 300 && ma/2 < 600 ) {
|
||||
return 'dullRed'
|
||||
} else if ( maximo-ma > 600 ) {
|
||||
return 'red'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main style={{
|
||||
width: '100%',
|
||||
@ -58,94 +72,94 @@ export default function region() {
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className='tg-gceh'>2101</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
<td className='tg-gceh dullRed'>xxxx</td>
|
||||
<td className='tg-gceh dullGreen'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-hq65'>2102</td>
|
||||
<td className='tg-0tzy'>xxxx</td>
|
||||
<td className='tg-hq65'>xxxx</td>
|
||||
<td className='tg-hq65'>xxxx</td>
|
||||
<td className='tg-0tzy'>xxxx</td>
|
||||
<td className='tg-0tzy dullGreen'>xxxx</td>
|
||||
<td className='tg-hq65 dullRed'>xxxx</td>
|
||||
<td className='tg-hq65 dullGreen'>xxxx</td>
|
||||
<td className='tg-0tzy dullGreen'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="tg-gceh">2103</td>
|
||||
<td className="tg-uulg">xxxx</td>
|
||||
<td className="tg-gceh">xxxx</td>
|
||||
<td className="tg-gceh">xxxx</td>
|
||||
<td className="tg-gceh">xxxx</td>
|
||||
<td className="tg-uulg red">xxxx</td>
|
||||
<td className="tg-gceh dullGreen">xxxx</td>
|
||||
<td className="tg-gceh dullRed">xxxx</td>
|
||||
<td className="tg-gceh dullGreen">xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-hq65'>2104</td>
|
||||
<td className='tg-0tzy'>xxxx</td>
|
||||
<td className='tg-hq65'>xxxx</td>
|
||||
<td className='tg-hq65'>xxxx</td>
|
||||
<td className='tg-0tzy'>xxxx</td>
|
||||
<td className='tg-0tzy dullGreen'>xxxx</td>
|
||||
<td className='tg-hq65 dullRed'>xxxx</td>
|
||||
<td className='tg-hq65 dullRed'>xxxx</td>
|
||||
<td className='tg-0tzy dullGreen'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-gceh'>2105</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
<td className='tg-gceh dullGreen'>xxxx</td>
|
||||
<td className='tg-gceh dullGreen'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-hq65'>2106</td>
|
||||
<td className='tg-0tzy'>xxxx</td>
|
||||
<td className='tg-hq65'>xxxx</td>
|
||||
<td className='tg-hq65'>xxxx</td>
|
||||
<td className='tg-0tzy'>xxxx</td>
|
||||
<td className='tg-0tzy dullGreen'>xxxx</td>
|
||||
<td className='tg-hq65 dullRed'>xxxx</td>
|
||||
<td className='tg-hq65 red'>xxxx</td>
|
||||
<td className='tg-0tzy green'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-gceh'>2107</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
<td className='tg-gceh green'>xxxx</td>
|
||||
<td className='tg-gceh dullRed'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-hq65'>2108</td>
|
||||
<td className='tg-0tzy'>xxxx</td>
|
||||
<td className='tg-hq65'>xxxx</td>
|
||||
<td className='tg-hq65'>xxxx</td>
|
||||
<td className='tg-0tzy'>xxxx</td>
|
||||
<td className='tg-0tzy dullGreen'>xxxx</td>
|
||||
<td className='tg-hq65 dullGreen'>xxxx</td>
|
||||
<td className='tg-hq65 green'>xxxx</td>
|
||||
<td className='tg-0tzy dullRed'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-gceh'>2109</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
<td className='tg-gceh green'>xxxx</td>
|
||||
<td className='tg-gceh dullRed'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-hq65'>2110</td>
|
||||
<td className='tg-0tzy'>xxxx</td>
|
||||
<td className='tg-hq65'>xxxx</td>
|
||||
<td className='tg-hq65'>xxxx</td>
|
||||
<td className='tg-0tzy'>xxxx</td>
|
||||
<td className='tg-0tzy red'>xxxx</td>
|
||||
<td className='tg-hq65 green'>xxxx</td>
|
||||
<td className='tg-hq65 red'>xxxx</td>
|
||||
<td className='tg-0tzy red'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-gceh'>2111</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
<td className='tg-gceh dullGreen'>xxxx</td>
|
||||
<td className='tg-gceh green'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-hq65'>2112</td>
|
||||
<td className='tg-0tzy'>xxxx</td>
|
||||
<td className='tg-hq65'>xxxx</td>
|
||||
<td className='tg-hq65'>xxxx</td>
|
||||
<td className='tg-0tzy'>xxxx</td>
|
||||
<td className='tg-0tzy green'>xxxx</td>
|
||||
<td className='tg-hq65 dullGreen'>xxxx</td>
|
||||
<td className='tg-hq65 dullRed'>xxxx</td>
|
||||
<td className='tg-0tzy dullGreen'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-gceh'>2021</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
<td className='tg-gceh dullRed'>xxxx</td>
|
||||
<td className='tg-gceh dullGreen'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-gceh'>Mín</td>
|
||||
|
||||
@ -39,27 +39,26 @@ export const NewsView = styled.main`
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}`;
|
||||
|
||||
export const Button = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
fieldset {
|
||||
border-top: 0.7px solid #E1E1E1;
|
||||
border-bottom: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
padding: 25px 4px;
|
||||
/* padding: 25px 4px; */
|
||||
color: #ABB3BB;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@ -82,6 +82,22 @@ export const PldTableView = styled.main`
|
||||
vertical-align:top
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #00A934!important;
|
||||
}
|
||||
|
||||
.dullGreen {
|
||||
background-color: #AED094!important;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #FF5429!important;
|
||||
}
|
||||
|
||||
.dullRed {
|
||||
background-color: #FFAA95!important;
|
||||
}
|
||||
|
||||
h3{
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user