Gatsby explore data page

[master12]

Fixes #2988

😎 PREVIEW

Changes proposed in this pull request:

• Added new disbursements feature

• please note that I will make updates to the build script but wanted to start the review process.

[mcharg]

@master12 Can you also make the font larger? The wireframe has 15pt.

[mcharg]

Also, I think it makes more sense for the LWCF and HPF links to go to their sections on the Disbursements Downloads page than to the How It Works page. https://revenuedata.doi.gov/downloads/disbursements/

[master12]

@mcharg @brentryanjohnson @jennmalcolm Ok hopefully this is the final build for this PR. Give it a check.

[brentryanjohnson]

@master12 It looks like we might need a media query for this. The bar and numbers get cropped in a mobile viewport.

It might make sense to display the recipient and amount as stacked blocks below a certain viewport width.

iPhone 8 viewport

iPhone 8 viewport overflow

[brentryanjohnson]

@master12 Also, the year transitions are awesome. 👍

[brentryanjohnson]

It looks like there is an extra space around the comma after the year:

In 2017 , ONRR disbursed a total of $7,111,809,625

, ONRR disbursed a total of

[brentryanjohnson]

@master12 It looks like the 8(g) glossary entry is empty. I'll open a branch and add it to the terms (assuming this version of the site is reading off the same terms.yml file).

[mcharg]

@master12 @brentryanjohnson The wireframes show what should happen to the design at different viewport sizes.

You can use the viewport picker icon in the top left to switch view:

From the notes on the table:
Columns should be equal widths. Changes to one column view when the columns get below 300 px each.

The header row is not sticky on scroll because that would end up with 3 sticky headers on mobile, which would take up too much of the viewport and the header isn't very useful once you get to the one column view.

[jennmalcolm]

I'm not looking in mobile, but the explore data page and the disbursements feature are looking very good to me. I also really like the year transitions. I checked all of the disbursements data to the spreadsheet totals, and it looks good.

One issue I'm still seeing is that when I try to go to the about page, it flashes for a second and then just goes back to the explore data page.

[master12]

@brentryanjohnson Gatsby uses different data files in the gatsby site. Specifically the terms.yml is a different structure. Look in here:
\doi-extractives-data\gatsby-site\src\data-graphql

@mcharg @brentryanjohnson Not sure what you want mobile too look like. Need mockup. Also think this shoud be a new ticket since the current table uses the current media query. This should be an enhancement and scheduled for future sprint, so we dont delay this any longer and it sounds like @jennmalcolm is ok with that.

@jennmalcolm I see that about page flash. I know why its doing this. It wont do it in prod but let me see if I can do a quick fix anyway.

[mcharg]

I added a new issue #3145 for making tables mobile friendly.

[jennmalcolm]

Yes, I think that's reasonable to create a new issue for the mobile design so we can settle on all of the details that @master12 needs to build.

Also, if the about page flash won't be a problem in prod, don't worry much about it now.

[master12]

@jennmalcolm fixed the about page issue