Merge pull request #381 from fedspendingtransparency/staging

midnight
fedspendingtransparency · Aug 25, 2017 · 197163f · 197163f
2 parents 604dd5b + acdc5e9
commit 197163f
Show file tree

Hide file tree

Showing 58 changed files with 1,501 additions and 349 deletions.
diff --git a/src/_scss/custom.scss b/src/_scss/custom.scss
@@ -14,5 +14,6 @@
 @import './layouts/article/aboutArticle';
 @import './pages/testStyle/testStyle';
 @import './pages/agencyLanding/agencyLandingPage';
+@import './pages/errorPage/errorPage';
 // ***** MODALS
 @import './pages/modals/all';
diff --git a/src/_scss/pages/agency/_section.scss b/src/_scss/pages/agency/_section.scss
@@ -7,7 +7,7 @@
         @include justify-content(center);
         width: 100%;
         position: relative;
-        margin: rem(100) 0 rem(60);
+        margin: rem(60) 0 rem(60);
         padding: 0 rem(63);
         color: $color-base;
         font-family: $font-sans;
@@ -23,11 +23,19 @@
             line-height: rem(47);
             margin: rem(5) 0;
         }
+	    em {
+		    font-size: rem(12);
+	    }
     }
 
     .agency-section-content {
         @import "pages/homepage/treemapSection";
 
+	    .agency-viz-description {
+		    margin-top: rem(20);
+		    font-size: rem(12);
+	    }
+
         .usa-da-treemap-section {
             background: white;
             padding-top: rem(50);
@@ -69,6 +77,20 @@
             font-size: rem(12);
             line-height: $base-line-height;
 
+	        .info-icon-circle {
+		        @include align-self(center);
+		        display: inline-block;
+		        fill: $color-gray;
+		        height: rem(17);
+		        left: rem(5);
+		        position: relative;
+		        top: rem(3);
+		        width: rem(15);
+	        }
+	        span {
+		        margin-left: rem(10);
+	        }
+
             .back {
                 color: $color-gray;
                 cursor: pointer;

diff --git a/src/_scss/pages/agency/visualizations/_obligated.scss b/src/_scss/pages/agency/visualizations/_obligated.scss
@@ -1,14 +1,4 @@
-.agency-obligated-wrapper {
-    margin-top: rem(15);
-
-    .agency-obligated-title {
-        h4 {
-            font-size: rem(38);
-            line-height: rem(47);
-            margin: rem(5) 0;
-        }
-    }
-
+.agency-section-wrapper {
     .agency-obligated-content {
         text-align: center;
         .fy-text {

diff --git a/src/_scss/pages/agency/visualizations/federalAccount/federalAccount.scss b/src/_scss/pages/agency/visualizations/federalAccount/federalAccount.scss
@@ -16,5 +16,17 @@
         .visualization-tooltip {
             @import "components/visualizations/tooltip/_tooltip";
         }
+
+	    .horizontal-bar {
+		    height: rem(15);
+		    .legend-container {
+			    color: $color-gray-medium;
+			    .key-label {
+				    font-size: rem(12);
+			    }
+		    }
+	    }
+
+
     }
 }
diff --git a/src/_scss/pages/agency/visualizations/recipient/recipient.scss b/src/_scss/pages/agency/visualizations/recipient/recipient.scss
@@ -18,6 +18,16 @@
             @import "components/visualizations/tooltip/_tooltip";
         }
 
+	    .horizontal-bar {
+		    height: rem(15);
+		    .legend-container {
+			    color: $color-gray-medium;
+			    .key-label {
+				    font-size: rem(12);
+			    }
+		    }
+	    }
+
         @import "pages/search/results/visualizations/rank/_pager";
         .visualization-pager-container {
             @include display(flex);

diff --git a/src/_scss/pages/award/_recipientInfo.scss b/src/_scss/pages/award/_recipientInfo.scss
@@ -26,9 +26,9 @@
                 @include span-columns(16);
             }
             @include media($medium-screen) {
-                @include span-columns(3.7);
+                @include span-columns(5.1);
                 &:first-child {
-                    @include span-columns(6);
+                    @include span-columns(4.6);
                 }
                 &:nth-of-type(2),
                 &:nth-of-type(3) {
@@ -42,13 +42,29 @@
             }
             .item-value {
                 @include setText($small-font-size);
+	            ul {
+		            display: initial;
+		            list-style-type: none;
+		            padding: 0;
+		            li {
+			            display: list-item;
+			            width: 100%;
+			            margin: 0 0 rem(5) 0;
+			            line-height: rem(18);
+		            }
+	            }
             }
         }
         &.single {
             li {
                 @include span-columns(16);
             }
         }
+	    @import './_moreButton';
+	    button.see-more {
+		    display: block;
+		    margin-left: 0;
+	    }
     }
     @include media($tablet-screen) {
         @include span-columns(9);

diff --git a/src/_scss/pages/errorPage/errorPage.scss b/src/_scss/pages/errorPage/errorPage.scss
@@ -0,0 +1,63 @@
+.usa-da-error-page {
+    @import "mixins/fullSectionWrap";
+    @import "layouts/default/default";
+
+    .error-content {
+        @include display(flex);
+        @include justify-content(center);
+        @include align-items(center);
+        position: relative;
+
+        padding: rem(25);
+
+        @include media($tablet-screen) {
+            height: calc(100vh - 300px);
+        }
+
+        .error-box {
+            @include flex(1 1 auto);
+            box-shadow: $box-shadow;
+            background-color: $color-white;
+            padding: rem(25);
+
+            height: 100%;
+
+            .error-header {
+                @include display(flex);
+                @include justify-content(center);
+                @include align-items(center);
+                position: relative;
+
+                .error-icon {
+                    @include flex(0 0 auto);
+                    width: rem(35);
+                    height: rem(35);
+
+                    svg {
+                        width: rem(35);
+                        height: rem(35);
+                        fill: $color-primary-darker;
+                    }
+                }
+
+                .error-title {
+                    @include flex(1 1 auto);
+                    margin-left: rem(15);
+                    h1 {
+                        margin: 0;
+                        padding: 0;
+                        font-size: $h3-font-size;
+                    }
+                }
+            }
+
+            .error-body {
+                a {
+                    color: $color-link;
+                }
+            }
+
+
+        }
+    }
+}
diff --git a/src/_scss/pages/search/results/visualizations/rank/chart/_item.scss b/src/_scss/pages/search/results/visualizations/rank/chart/_item.scss
@@ -11,7 +11,7 @@
         fill: $color-base;
     }
     .group-label-link {
-        text-decoration: underline;
+	    fill: $color-link;
     }
 }
 

diff --git a/src/_scss/pages/search/searchPage.scss b/src/_scss/pages/search/searchPage.scss
@@ -23,5 +23,13 @@
         margin-bottom: rem(60);
         @import "./results/searchResults";
         @import "./topFilterBar/topFilterBar";
+
+        .last-update {
+            font-size: rem(12);
+            margin-bottom: rem(5);
+            strong {
+                font-weight: $font-bold;
+            }
+        }
     }
 }
diff --git a/src/js/components/agency/AgencyContent.jsx b/src/js/components/agency/AgencyContent.jsx
@@ -7,6 +7,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { find, throttle } from 'lodash';
 import { scrollToY } from 'helpers/scrollToHelper';
+import moment from 'moment';
+import { convertQuarterToDate } from 'helpers/fiscalYearHelper';
 
 import ObjectClassContainer from 'containers/agency/visualizations/ObjectClassContainer';
 import RecipientContainer from 'containers/agency/visualizations/RecipientContainer';
@@ -41,7 +43,8 @@ const agencySections = [
 ];
 
 const propTypes = {
-    agency: PropTypes.object
+    agency: PropTypes.object,
+    lastUpdate: PropTypes.string
 };
 
 export default class AgencyContent extends React.Component {
@@ -213,6 +216,10 @@ export default class AgencyContent extends React.Component {
     }
 
     render() {
+        const qtr = parseFloat(this.props.agency.overview.activeFQ);
+        const endOfQuarter = convertQuarterToDate(qtr, this.props.agency.overview.activeFY);
+        const asOfDate = moment(endOfQuarter, "YYYY-MM-DD").format("MMMM D, YYYY");
+
         return (
             <div className="agency-content-wrapper">
                 <div className="agency-sidebar">
@@ -229,17 +236,22 @@ export default class AgencyContent extends React.Component {
                         <ObligatedContainer
                             agencyName={this.props.agency.overview.name}
                             activeFY={this.props.agency.overview.activeFY}
-                            id={this.props.agency.id} />
+                            activeQuarter={this.props.agency.overview.activeFQ}
+                            id={this.props.agency.id}
+                            asOfDate={asOfDate} />
                         <ObjectClassContainer
                             id={this.props.agency.id}
-                            activeFY={this.props.agency.overview.activeFY} />
+                            activeFY={this.props.agency.overview.activeFY}
+                            asOfDate={asOfDate} />
                         <FederalAccountContainer
                             id={this.props.agency.id}
                             activeFY={this.props.agency.overview.activeFY}
-                            obligatedAmount={this.props.agency.overview.obligatedAmount} />
+                            obligatedAmount={this.props.agency.overview.obligatedAmount}
+                            asOfDate={asOfDate} />
                         <RecipientContainer
                             id={this.props.agency.id}
-                            activeFY={this.props.agency.overview.activeFY} />
+                            activeFY={this.props.agency.overview.activeFY}
+                            lastUpdate={this.props.lastUpdate} />
                     </div>
                     <AgencyFooterContainer id={this.props.agency.id} />
                 </div>

diff --git a/src/js/components/agency/AgencyPage.jsx b/src/js/components/agency/AgencyPage.jsx
@@ -23,7 +23,8 @@ const propTypes = {
     loading: PropTypes.bool,
     error: PropTypes.bool,
     id: PropTypes.string,
-    agency: PropTypes.object
+    agency: PropTypes.object,
+    lastUpdate: PropTypes.string
 };
 
 export default class AgencyPage extends React.Component {

diff --git a/src/js/components/agency/visualizations/federalAccount/FederalAccountChart.jsx b/src/js/components/agency/visualizations/federalAccount/FederalAccountChart.jsx
@@ -7,6 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import HorizontalChart from 'components/search/visualizations/rank/chart/HorizontalChart';
+import BarChartLegend from 'components/search/visualizations/time/chart/BarChartLegend';
 
 import FederalAccountTooltip from './FederalAccountTooltip';
 
@@ -67,7 +68,16 @@ export default class FederalAccountChart extends React.Component {
             isLoading = 'loading-visualization';
         }
 
+        const legend = [
+            {
+                color: '#597785',
+                label: 'Obligated Amount',
+                offset: 0
+            }
+        ];
+
         return (
+
             <div className={isLoading}>
                 <HorizontalChart
                     labelSeries={this.props.labelSeries}
@@ -81,6 +91,11 @@ export default class FederalAccountChart extends React.Component {
                     selectItem={this.showTooltip}
                     deselectItem={this.hideTooltip}
                     urlRoot="#/federal_account/" />
+                <svg className="horizontal-bar">
+                    <g className="legend-container">
+                        <BarChartLegend legend={legend} />
+                    </g>
+                </svg>
 
                 <div className={`tooltip-wrapper ${hideTooltip}`}>
                     <FederalAccountTooltip

diff --git a/src/js/components/agency/visualizations/federalAccount/FederalAccountVisualization.jsx b/src/js/components/agency/visualizations/federalAccount/FederalAccountVisualization.jsx
@@ -16,7 +16,8 @@ const propTypes = {
     linkSeries: PropTypes.array,
     labelSeries: PropTypes.array,
     dataSeries: PropTypes.array,
-    descriptions: PropTypes.array
+    descriptions: PropTypes.array,
+    asOfDate: PropTypes.string
 };
 
 export default class FederalAccountVisualization extends React.Component {
@@ -68,6 +69,7 @@ export default class FederalAccountVisualization extends React.Component {
                 </div>
                 <div className="agency-section-title">
                     <h4>Federal Accounts</h4>
+                    <em>Data as of {this.props.asOfDate}</em>
                     <hr
                         className="results-divider"
                         ref={(hr) => {