Skip to content

Commit 6b84a3c

Browse files
greensomesgreensomes
committed
4031: Makes adjustments based on latest prototype
1 parent 81c7eaf commit 6b84a3c

10 files changed

Lines changed: 223 additions & 191 deletions

File tree

‎src/components/sections/FYAtAGlance/FYAtAGlance.js‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎src/components/sections/FYAtAGlance/index.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/components/sections/FYDisbursementsSummary/FYDisbursementsSummary.js‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Box, Typography, Grid } from '@material-ui/core';
2+
import { Box, Typography, Grid, Link } from '@material-ui/core';
33
import { makeStyles } from '@material-ui/core/styles'
44
import millify from 'millify'
55
import PercentDifference from '../../utils/PercentDifference';
@@ -35,27 +35,30 @@ export default function FYDisbursementsSummary({ disbursementsData, fyPeriodData
3535
const prevRevenue = disbursementsData.find((r) => r.fy === 'previous').disbursement;
3636

3737
return (
38-
<Box bgcolor="primary.main" mb={2} pt={0.5} pb={2} pl={3} pr={3} borderRadius={10}>
39-
<Typography variant="h3" className={classes.h3}>
40-
Disbursements
41-
</Typography>
42-
<Typography variant='inherit' className={classes.fyProgress} >
43-
{ fyProgressText }
44-
</Typography>
45-
<Grid container spacing={1}>
46-
<Grid item xs={12}>
47-
<Typography component="strong" variant='inherit' className={classes.center}>
48-
${ millify(currRevenue, { precision: 1 }).replace('B', ' billion')}
49-
</Typography>
38+
<Box mb={2} borderRadius={10} border={'1px solid #3C3D3E'}>
39+
<Box height={'1rem'} bgcolor={'#1A227E'} borderRadius={'10px 10px 0 0'}></Box>
40+
<Box pt={0.5} pb={2} pl={3} pr={3}>
41+
<Typography variant="h3" className={classes.h3}>
42+
<Link href='/downloads/disbursements-by-month/'>Disbursements</Link>
43+
</Typography>
44+
<Typography variant='inherit' className={classes.fyProgress} >
45+
{ fyProgressText }
46+
</Typography>
47+
<Grid container spacing={1}>
48+
<Grid item xs={12}>
49+
<Typography component="strong" variant='inherit' className={classes.center}>
50+
${ millify(currRevenue, { precision: 1 }).replace('B', ' billion')}
51+
</Typography>
52+
</Grid>
53+
<Grid item xs={12}>
54+
<Typography variant='inherit' className={classes.center}>
55+
<PercentDifference
56+
currentAmount={currRevenue}
57+
previousAmount={prevRevenue} /> from FY{ (getFiscalYear() - 1) % 100 }
58+
</Typography>
59+
</Grid>
5060
</Grid>
51-
<Grid item xs={12}>
52-
<Typography variant='inherit' className={classes.center}>
53-
<PercentDifference
54-
currentAmount={currRevenue}
55-
previousAmount={prevRevenue} /> from FY{ (getFiscalYear() - 1) % 100 }
56-
</Typography>
57-
</Grid>
58-
</Grid>
61+
</Box>
5962
</Box>
6063
)
6164
}

‎src/components/sections/FYProductionSummary/FYProductionSummary.js‎

Lines changed: 59 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Box, Typography, Grid } from '@material-ui/core';
2+
import { Box, Typography, Grid, Link } from '@material-ui/core';
33
import { makeStyles } from '@material-ui/core/styles'
44
import millify from 'millify'
55
import oilIconUrl from '../../../images/icons/icon-oil.svg';
@@ -39,64 +39,67 @@ export default function FYProductionSummary({ currentFYData, prevFYData, fyPerio
3939
}
4040

4141
return (
42-
<Box bgcolor="primary.main" mb={2} pt={0.5} pb={2} pl={3} pr={3} borderRadius={10}>
43-
<Typography variant="h3" className={classes.h3}>
44-
Production
45-
</Typography>
46-
<Typography variant='inherit' className={classes.fyProgress} >
47-
{ fyProgressText }
48-
</Typography>
49-
<Grid container spacing={1}>
50-
<Grid item>
51-
<img src={oilIconUrl} alt="Logo" width={30}/>
42+
<Box mb={2} borderRadius={10} border={'1px solid #3C3D3E'}>
43+
<Box height={'1rem'} bgcolor={'#1A227E'} borderRadius={'10px 10px 0 0'}></Box>
44+
<Box pt={0.5} pb={2} pl={3} pr={3}>
45+
<Typography variant="h3" className={classes.h3}>
46+
<Link href='/downloads/production-by-month/'>Production</Link>
47+
</Typography>
48+
<Typography variant='inherit' className={classes.fyProgress} >
49+
{ fyProgressText }
50+
</Typography>
51+
<Grid container spacing={1}>
52+
<Grid item>
53+
<img src={oilIconUrl} alt="Logo" width={30}/>
54+
</Grid>
55+
<Grid item>
56+
<Typography component="strong" variant='inherit'>
57+
Oil: { millify(currentOil.volume, { precision: 1 }).replace('M', ' million')} { currentOil.unit_abbr }
58+
</Typography>
59+
</Grid>
60+
<Grid item style={{ marginLeft: "auto" }}>
61+
<Typography variant='inherit'>
62+
<PercentDifference
63+
currentAmount={currentOil.volume}
64+
previousAmount={previousOil.volume} /> from FY{ (getFiscalYear() - 1) % 100 }
65+
</Typography>
66+
</Grid>
5267
</Grid>
53-
<Grid item>
54-
<Typography component="strong" variant='inherit'>
55-
Oil: { millify(currentOil.volume, { precision: 1 }).replace('M', ' million')} { currentOil.unit_abbr }
56-
</Typography>
68+
<Grid container spacing={1}>
69+
<Grid item>
70+
<img src={gasIconUrl} alt="Logo" width={30}/>
71+
</Grid>
72+
<Grid item>
73+
<Typography component="strong" variant='inherit'>
74+
Gas: { millify(currentGas.volume, { precision: 1 }).replace('B', ' billion')} { currentGas.unit_abbr }
75+
</Typography>
76+
</Grid>
77+
<Grid item style={{ marginLeft: "auto" }}>
78+
<Typography variant='inherit'>
79+
<PercentDifference
80+
currentAmount={currentGas.volume}
81+
previousAmount={previousGas.volume} /> from FY{ (getFiscalYear() - 1) % 100 }
82+
</Typography>
83+
</Grid>
5784
</Grid>
58-
<Grid item style={{ marginLeft: "auto" }}>
59-
<Typography variant='inherit'>
60-
<PercentDifference
61-
currentAmount={currentOil.volume}
62-
previousAmount={previousOil.volume} /> from FY{ (getFiscalYear() - 1) % 100 }
63-
</Typography>
85+
<Grid container spacing={1}>
86+
<Grid item>
87+
<img src={coalIconUrl} alt="Logo" width={30}/>
88+
</Grid>
89+
<Grid item>
90+
<Typography component="strong" variant='inherit'>
91+
Coal: { millify(currentCoal.volume, { precision: 1 }).replace('M', ' million')} { currentCoal.unit_abbr }
92+
</Typography>
93+
</Grid>
94+
<Grid item style={{ marginLeft: "auto" }}>
95+
<Typography variant='inherit'>
96+
<PercentDifference
97+
currentAmount={currentCoal.volume}
98+
previousAmount={previousCoal.volume} /> from FY{ (getFiscalYear() - 1) % 100 }
99+
</Typography>
100+
</Grid>
64101
</Grid>
65-
</Grid>
66-
<Grid container spacing={1}>
67-
<Grid item>
68-
<img src={gasIconUrl} alt="Logo" width={30}/>
69-
</Grid>
70-
<Grid item>
71-
<Typography component="strong" variant='inherit'>
72-
Gas: { millify(currentGas.volume, { precision: 1 }).replace('B', ' billion')} { currentGas.unit_abbr }
73-
</Typography>
74-
</Grid>
75-
<Grid item style={{ marginLeft: "auto" }}>
76-
<Typography variant='inherit'>
77-
<PercentDifference
78-
currentAmount={currentGas.volume}
79-
previousAmount={previousGas.volume} /> from FY{ (getFiscalYear() - 1) % 100 }
80-
</Typography>
81-
</Grid>
82-
</Grid>
83-
<Grid container spacing={1}>
84-
<Grid item>
85-
<img src={coalIconUrl} alt="Logo" width={30}/>
86-
</Grid>
87-
<Grid item>
88-
<Typography component="strong" variant='inherit'>
89-
Coal: { millify(currentCoal.volume, { precision: 1 }).replace('M', ' million')} { currentCoal.unit_abbr }
90-
</Typography>
91-
</Grid>
92-
<Grid item style={{ marginLeft: "auto" }}>
93-
<Typography variant='inherit'>
94-
<PercentDifference
95-
currentAmount={currentCoal.volume}
96-
previousAmount={previousCoal.volume} /> from FY{ (getFiscalYear() - 1) % 100 }
97-
</Typography>
98-
</Grid>
99-
</Grid>
102+
</Box>
100103
</Box>
101104
)
102105
}

‎src/components/sections/FYRevenueSummary/FYRevenueSummary.js‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Box, Typography, Grid } from '@material-ui/core';
2+
import { Box, Typography, Grid, Link } from '@material-ui/core';
33
import { makeStyles } from '@material-ui/core/styles'
44
import millify from 'millify'
55
import PercentDifference from '../../utils/PercentDifference';
@@ -35,27 +35,30 @@ export default function FYRevenueSummary({ revenueData, fyPeriodData }) {
3535
const prevRevenue = revenueData.find((r) => r.fy === 'previous').revenue;
3636

3737
return (
38-
<Box bgcolor="primary.main" mb={2} pt={0.5} pb={2} pl={3} pr={3} borderRadius={10}>
39-
<Typography variant="h3" className={classes.h3}>
40-
Revenue
41-
</Typography>
42-
<Typography variant='inherit' className={classes.fyProgress} >
43-
{ fyProgressText }
44-
</Typography>
45-
<Grid container spacing={1}>
46-
<Grid item xs={12}>
47-
<Typography component="strong" variant='inherit' className={classes.center}>
48-
${ millify(currRevenue, { precision: 1 }).replace('B', ' billion')}
49-
</Typography>
38+
<Box mb={2} borderRadius={10} border={'1px solid #3C3D3E'}>
39+
<Box height={'1rem'} bgcolor={'#1A227E'} borderRadius={'10px 10px 0 0'}></Box>
40+
<Box pt={0.5} pb={2} pl={3} pr={3}>
41+
<Typography variant="h3" className={classes.h3}>
42+
<Link href='/downloads/revenue/'>Revenue</Link>
43+
</Typography>
44+
<Typography variant='inherit' className={classes.fyProgress} >
45+
{ fyProgressText }
46+
</Typography>
47+
<Grid container spacing={1}>
48+
<Grid item xs={12}>
49+
<Typography component="strong" variant='inherit' className={classes.center}>
50+
${ millify(currRevenue, { precision: 1 }).replace('B', ' billion')}
51+
</Typography>
52+
</Grid>
53+
<Grid item xs={12}>
54+
<Typography variant='inherit' className={classes.center}>
55+
<PercentDifference
56+
currentAmount={currRevenue}
57+
previousAmount={prevRevenue} /> from FY{ (getFiscalYear() - 1) % 100 }
58+
</Typography>
59+
</Grid>
5060
</Grid>
51-
<Grid item xs={12}>
52-
<Typography variant='inherit' className={classes.center}>
53-
<PercentDifference
54-
currentAmount={currRevenue}
55-
previousAmount={prevRevenue} /> from FY{ (getFiscalYear() - 1) % 100 }
56-
</Typography>
57-
</Grid>
58-
</Grid>
61+
</Box>
5962
</Box>
6063
)
6164
}

‎src/components/sections/LPMonthlyFactsheet/LPMonthlyFactsheet.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ export default function LPMonthlyFactSheet() {
1313
const classes = useStyles();
1414

1515
return (
16-
<Box bgcolor="primary.main" mb={2} pt={0.5} pb={2} pl={3} pr={3} borderRadius={10}>
16+
<Box mb={2} pt={0.5} pb={2} pl={3} pr={3} borderRadius={10} border={'1px solid #3C3D3E'}>
1717
<Typography variant="h3" className={classes.h3}>
18-
Monthly Fact Sheet
18+
<Link href='/fact-sheet'>Monthly Fact Sheet</Link>
1919
</Typography>
2020
<Typography variant='inherit'>
21-
<Link href='/fact-sheet'>Fact sheet</Link> summarizing disbursements, revenue, and production data by month on federal and Native American lands.
21+
Fact sheet summarizing disbursements, revenue, and production data by month on federal and Native American lands.
2222
</Typography>
2323
</Box>
2424
)

‎src/components/sections/LandingPageSidebar/LandingPageSidebar.js‎

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import React from 'react';
2-
import FyAtAGlance from '../FYAtAGlance'
3-
import { FYProductionSummary } from '../FYProductionSummary';
4-
import { FYRevenueSummary } from '../FYRevenueSummary';
5-
import { FYDisbursementsSummary } from '../FYDisbursementsSummary'
62
import { LPMonthlyFactSheet } from '../LPMonthlyFactsheet'
73
import { WhatsNew } from '../WhatsNew';
84
import { gql, useQuery } from '@apollo/client';
9-
import { Grid } from '@material-ui/core';
5+
import { ReleaseDetails } from '../ReleaseDetails';
106

117
const atAGlanceQuery = gql`
128
query FYDataAtAGlance {
@@ -46,31 +42,16 @@ export default function LandingPageSidebar() {
4642
if (loading) return <p>Loading...</p>;
4743
if (error) return <p>Error: {error.message}</p>;
4844

45+
console.log(data);
4946
return(
5047
<>
51-
<FyAtAGlance />
48+
{ data != null &&
49+
<WhatsNew data={data} />
50+
}
5251

53-
<FYProductionSummary
54-
currentFYData={ data.productionCurrFy }
55-
prevFYData={ data.productionPrevFy }
56-
fyPeriodData={data.datasetPeriodInfo.find((p) => p.dataset === 'production')}/>
52+
<LPMonthlyFactSheet />
5753

58-
<Grid container spacing={2}>
59-
<Grid item xs={12} md={6}>
60-
<FYRevenueSummary
61-
revenueData={data.fyRevenue}
62-
fyPeriodData={data.datasetPeriodInfo.find((p) => p.dataset === 'revenue')}/>
63-
</Grid>
64-
<Grid item xs={12} md={6}>
65-
<FYDisbursementsSummary
66-
disbursementsData={data.fyDisbursements}
67-
fyPeriodData={data.datasetPeriodInfo.find((p) => p.dataset === 'disbursements')}/>
68-
</Grid>
69-
</Grid>
70-
71-
<LPMonthlyFactSheet />
72-
73-
<WhatsNew />
54+
<ReleaseDetails />
7455
</>
7556
)
7657
}

0 commit comments

Comments
 (0)