5215 house and senate overview totals

fec/data/templates/house-senate-overview.jinja

@@ -8,31 +8,54 @@
 
 {% block css %}
   <link rel="stylesheet" type="text/css" href="{{ asset_for_css('elections.css') }}" />
+  <link rel="stylesheet" type="text/css" href="/static/css/widgets/party-money-bars.css" />
   <link rel="stylesheet" type="text/css" href="/static/css/widgets/house-senate-overview.css" />
 {% endblock %}
+
 {% block body %}
   {{ header.header(title, crumb) }}
   <div class="u-padding--left u-padding--right tab-interface">
     <header class="main">
       <div class="heading--section">
-        <h1 class="entity__name">
-          {{ office|title }} elections
-        </h1>
+        <h1>{{ office|title }} elections</h1>
       </div>
     </header>
     <div class="data-container__wrapper">
-      {% include 'partials/house-senate-overview/sidebar-nav.jinja' %}
-      {% include 'partials/house-senate-overview/election-data.jinja' %}
+      <nav class="sidebar side-nav-alt">
+        <ul class="tablist" role="tablist" data-name="tab">
+          <li role="presentation">
+            <a class="side-nav__link" role="tab" tabindex="0"
+            data-name="election-summary" href="#section-election-summary" aria-controls="panel1"
+            >{{ office | title }} election summary</a>
+          </li>
+          <li role="presentation">
+            <a class="side-nav__link" role="tab" tabindex="0"
+            data-name="election-data" href="#section-contribs-over-time" aria-controls="panel2"
+            >{{ office | title }} candidate contributions over time</a>
+          </li>
+          {% if FEATURES.house_senate_overview_totals %}  
+          <li role="presentation">
+            <a class="side-nav__link" role="tab" tabindex="0"
+            data-name="" href="#totals-for-all-elections" aria-controls=""
+            >Totals for all {{ office | title }} elections</a></li>
+          {% endif %}
+          </li>
+        </ul>
+      </nav>
       <div class="main__content--right-full">
-
+        {% include 'partials/house-senate-overview/tabpanel-summary.jinja' %}
+        {% include 'partials/house-senate-overview/tabpanel-contributions-across-time.jinja' %}
+        {% include 'partials/house-senate-overview/tabpanel-totals-for-all-elections.jinja' %}
       </div>
     </div>
   </div>
 {% endblock %}
+
 {% block scripts %}
 <script>
 var context = {{ context_vars | to_json | safe }};
 </script>
 <script src="{{ asset_for_js('dataviz-common.js') }}"></script>
-<script src="{{ asset_for_js('elections-overview.js') }}"></script>
+<script src="{{ asset_for_js('house-senate-overview-across-time.js') }}"></script>
+<script src="{{ asset_for_js('house-senate-overview-summary.js') }}"></script>
 {% endblock %}

fec/data/templates/partials/house-senate-overview/election-data.jinja → fec/data/templates/partials/house-senate-overview/tabpanel-contributions-across-time.jinja

@@ -1,36 +1,15 @@
+{# used inside fec/data/templates/house-senate-overview.jinja #}
 {% import 'macros/null.jinja' as null %}
 {% import 'macros/disclaimer.jinja' as disclaimer %}
 {% import 'macros/cycle-select.jinja' as select %}
 
+<section id="section-election-summary" role="tabpanel" aria-hidden="true" aria-labelledby="election-summary-heading">
+   <h2 id="election-summary-heading">{{ office | title }} election overview</h2>
+</section>
 
-<section id="section-1" role="tabpanel" aria-hidden="true" aria-labelledby="section-1-heading">
-   <h2 id="section-1-heading">{{ office | title }} election data</h2>
+<section id="section-contribs-over-time" role="tabpanel" aria-hidden="true" aria-labelledby="contribs-over-time-heading">
+   <h2 id="contribs-over-time-heading">{{ office | title }} election data</h2>
    <div class="slab slab--inline slab--neutral u-padding--left u-padding--right">
-      {# 
-      <div id="election-summary" class="entity__figure row">
-         <h2 class="heading__left">{{ office | title }} election summary</h2>
-         <p class="t-sans t-bold t-low-height">Comparing total money spent by party. Also comparing total money spent in <span class="term" data-term="independent expenditure" title="Click to define" tabindex="0">independent expenditures</span> by support and opposition.</p>
-         {{ select.two_year_select(cycles, cycle, id="cycle-4") }}
-         <div class="content__section--ruled-responsive t-serif">
-            <div class="heading--with-action t-small u-negative--top--margin t-serif">
-               <i class="data-disclaimer">Some kind of disclaimer text that clarifies something high-level that users need to know right away to put the data in context.</i>
-               <div class="heading__right">
-                  <a class="button button--alt js-ga-event" data-a11y-dialog-show="election-summary-modal" data-ga-event="Election summary methodology modal clicked" aria-controls="election-summary-modal">Methodology</a>
-               </div>
-            </div>
-            <div class="js-modal modal" id="election-summary-modal" aria-hidden="true">
-               <div tabindex="-1" class="modal__overlay" data-a11y-dialog-hide=""></div>
-               <div role="dialog" class="modal__content" aria-labelledby="election-summary-modal-title">
-                  <div role="document">
-                     <button type="button" class="modal__close button--close--primary" data-a11y-dialog-hide="" title="Close this dialog window"></button>
-                     <h2>Methodology Overview</h2>
-                     <p></p>
-                  </div>
-               </div>
-            </div>
-         </div>
-      </div>
-      #}
       <div id="contributions-over-time" class="entity__figure row">
          <h2 class="heading__left">{{ office | title }} candidate contributions over time</h2>
          <p class="t-sans t-low-height">Comparing individual contributions, other committee contributions and transfers from other authorized committees across multiple two-year periods.</p>
@@ -116,20 +95,20 @@
             </div>
          </div>
       {# 
-      <div id="money-raised-accross-elections" class="entity__figure row">
-         <h2 class="heading__left">Money raised accross {{ office | title }} elections</h2>
+      <div id="money-raised-across-elections" class="entity__figure row">
+         <h2 class="heading__left">Money raised across {{ office | title }} elections</h2>
          <p class="t-sans t-low-height">Comparing the money raised in all {{ office | title }} elections by state </p>
          {{ select.two_year_select(cycles, cycle, id="cycle-4") }}
          <div class="content__section--ruled-responsive t-serif">
             <div class="heading--with-action t-small u-negative--top--margin t-serif">
                <i class="data-disclaimer">Some kind of disclaimer text that clarifies something high-level that users need to know right away to put the data in context.</i>
                <div class="heading__right">
-                  <a class="button button--alt js-ga-event" data-a11y-dialog-show="money-raised-accross-elections-modal" data-ga-event="Money raised accross elections methodology modal clicked" aria-controls="money-raised-accross-elections-modal">Methodology</a>
+                  <a class="button button--alt js-ga-event" data-a11y-dialog-show="money-raised-across-elections-modal" data-ga-event="Money raised across elections methodology modal clicked" aria-controls="money-raised-across-elections-modal">Methodology</a>
                </div>
             </div>
-            <div class="js-modal modal" id="money-raised-accross-elections-modal" aria-hidden="true">
+            <div class="js-modal modal" id="money-raised-across-elections-modal" aria-hidden="true">
                <div tabindex="-1" class="modal__overlay" data-a11y-dialog-hide=""></div>
-               <div role="dialog" class="modal__content" aria-labelledby="money-raised-accross-elections-modal-title">
+               <div role="dialog" class="modal__content" aria-labelledby="money-raised-across-elections-modal-title">
                   <div role="document">
                      <button type="button" class="modal__close button--close--primary" data-a11y-dialog-hide="" title="Close this dialog window"></button>
                      <h2>Methodology Overview</h2>

fec/data/templates/partials/house-senate-overview/tabpanel-summary.jinja

@@ -0,0 +1,68 @@
+{# used inside fec/data/templates/house-senate-overview.jinja #}
+{% import 'macros/null.jinja' as null %}
+{% import 'macros/disclaimer.jinja' as disclaimer %}
+{% import 'macros/cycle-select.jinja' as select %}
+
+        <section id="section-election-summary" role="tabpanel" aria-hidden="true" aria-labelledby="election-summary-heading">
+            <h2 id="election-summary-heading">{{ office | title }} election summary</h2>
+            <div id="election-summary" class="entity__figure row">
+              {# <h2 class="heading__left">{{ office | title }} election summary</h2> #}
+              <p class="t-sans t-low-height">Comparing total money raised, spent and remaining cash on hand, by party.</p>
+              {{ select.two_year_select(cycles, cycle, id="cycle-summary") }}
+              <div class="grid--flex grid--3-wide">
+                <div class="grid__item">
+                  <figure class="js-party-money-bars" id="summary-total-raised" data-event-field-id="total_contributions">
+                    <div class="total-wrapper">
+                      <h1 class="value js-value-large">$1,234,567,890</h1>
+                      <h2 class="description js-value-large-desc">raised by {{ office | title }} candidates</h2>
+                    </div>
+                    <div class="visual-divider" role="presentation"></div>
+                    <div class="parties-wrapper"></div>
+                  </figure>
+                </div>
+                <div class="grid__item">
+                  <figure class="js-party-money-bars" id="summary-total-spent" data-event-field-id="total_disbursements">
+                    <div class="total-wrapper">
+                      <h1 class="value js-value-large">$1,234,567,890</h1>
+                      <h2 class="description js-value-large-desc">spent by {{ office | title }} candidates</h2>
+                    </div>
+                    <div class="visual-divider" role="presentation"></div>
+                    <div class="parties-wrapper"></div>
+                  </figure>
+                </div>
+                <div class="grid__item">
+                  <figure class="js-party-money-bars" id="summary-remaining-coh" data-event-field-id="total_cash_on_hand_end_period">
+                    <div class="total-wrapper">
+                      <h1 class="value js-value-large">$1,234,567,890</h1>
+                      <h2 class="description js-value-large-desc">remaining in cash on hand</h2>
+                    </div>
+                    <div class="visual-divider" role="presentation"></div>
+                    <div class="parties-wrapper"></div>
+                  </figure>
+                </div>
+              </div>
+
+
+
+
+              <div class="content__section--ruled-responsive t-serif">
+                <div class="heading--with-action t-small u-negative--top--margin t-serif">
+                  <i class="data-disclaimer">Newly filed summary data may not appear for up to 48 hours.</i>
+                  <div class="heading__right">
+                    <a class="button button--alt js-ga-event" data-a11y-dialog-show="election-summary-modal" data-ga-event="Election summary methodology modal clicked" aria-controls="election-summary-modal">Methodology</a>
+                  </div>
+                </div>
+                <div class="js-modal modal" id="election-summary-modal" aria-hidden="true">
+                  <div tabindex="-1" class="modal__overlay" data-a11y-dialog-hide=""></div>
+                  <div role="dialog" class="modal__content" aria-labelledby="election-summary-modal-title">
+                    <div role="document">
+                      <button type="button" class="modal__close button--close--primary" data-a11y-dialog-hide="" title="Close this dialog window"></button>
+                      <h2>Methodology Overview</h2>
+                      <p>All of the methodology information will go here.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>

fec/data/templates/partials/house-senate-overview/tabpanel-totals-for-all-elections.jinja

@@ -0,0 +1,64 @@
+{# used inside fec/data/templates/house-senate-overview.jinja #}
+{% import 'macros/null.jinja' as null %}
+{% import 'macros/disclaimer.jinja' as disclaimer %}
+{% import 'macros/cycle-select.jinja' as select %}
+
+<section id="section-election-summary" role="tabpanel" aria-hidden="true" aria-labelledby="election-summary-heading">
+  <h2 id="election-summary-heading">{{ office | title }} election overview</h2>
+</section>
+
+<section id="section-contribs-over-time" role="tabpanel" aria-hidden="true" aria-labelledby="contribs-over-time-heading">
+  <h2 id="contribs-over-time-heading">{{ office | title }} election data</h2>
+  <div class="slab slab--inline slab--neutral u-padding--left u-padding--right">
+
+  {% if FEATURES.house_senate_overview_totals %}     
+    <div id="totals-for-all-elections" class="entity__figure row">
+      <h2 class="heading__left">Totals for all {{ office | title }} elections</h2>
+      <p class="t-sans t-low-height">Comparing the money raised, spent, cash on hand and debts by {{ office | title }} election</p>
+      {{ select.two_year_select(cycles, cycle, id="all-elections-totals") }}
+      <table id="election-totals-results"
+        class="data-table data-table--heading-borders scrollX simple-table u-no-border"
+        data-type="totals-for-all-elections"
+        >
+        <thead>
+          <th role="col">State</th>
+          <th role="col">Receipts</th>
+          <th role="col">Disbursements</th>
+          <th role="col">Cash on hand</th>
+          <th role="col">Debts</th>
+        </thead>
+      </table>
+      <div class="content__section u-margin--top t-serif">
+      <div class="row">
+        <ul class="list--buttons u-float-right">
+          <li><a class="button button--alt js-ga-event" data-a11y-dialog-show="totals-for-all-elections-modal" data-ga-event="Totals for all elections methodology modal clicked" aria-controls="totals-for-all-elections-modal">Methodology</a></li>
+        </ul>
+        <p class="u-no-margin"><i class="data-disclaimer">Each two-year period includes financial activity from January 1 of the nonelection year through December 31 of the election year. Newly filed summary data may not appear for up to 48 hours.</i></p>
+      </div>
+      <div class="js-modal modal" id="totals-for-all-elections-modal" aria-hidden="true">
+        <div tabindex="-1" class="modal__overlay" data-a11y-dialog-hide=""></div>
+          <div role="dialog" class="modal__content" aria-labelledby="totals-for-all-elections-modal-title">
+            <div role="document">
+              <button type="button" class="modal__close button--close--primary" data-a11y-dialog-hide="" title="Close this dialog window"></button>
+              <h2>Methodology Overview</h2>
+              <p>The totals presented in the table are calculated using a two-step process. In step one, financial data reported within a two-year period are aggregated by candidate campaign committees creating totals by candidate by two-year period. In step two, 
+              candidates are grouped by state and two-year period creating totals by state and two-year period. Financial summary data are available from 1979 to present.</p>
+              <h3>Candidate campaign committee aggregation</h3>
+              <p>Candidate campaign committee totals are calculated from data submitted by principal campaign and authorized committees on <a href="https://www.fec.gov/resources/cms-content/documents/fecfrm3.pdf">Form 3</a> (Report of Receipts and Disbursements). These totals do not include data from Form 6 (48-Hour Notice of Contributions/Loans Received) or Form 3L (Report of Contributions Bundled by Lobbyists/Registrants and Lobbyist/Registrant PACs).</p>
+              <p>For each candidate during a two-year period, the candidate's totals are calculated as:</p>
+              <ul class="list--bulleted">
+                <li>Receipts: Sum of total receipts (Form 3, Line 16) of all reports filed by the committee of that two-year period.</li>
+                <li>Disbursements: Sum of total disbursements (Form 3, Line 22) of all reports filed by the committee of that two-year period.</li>
+                <li>Cash on hand: Ending cash on hand (Form 3, Line 8) reported on last filing decided by coverage end date for each two-year period.</li>
+                <li>Debt: Debt owed by committee (Form 3, Line 10) on last filing decided by coverage end date for each two-year period.</li>
+              </ul>
+              <h3>State aggregation</h3>
+              <p>State totals are calculated from the candidate campaign committee aggregations previously described. Candidates are grouped by two-year period and state, then the financial data are summed producing totals for receipts, disbursements, cash on hand and debt.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  {% endif %}
+</div>
+</section>

fec/fec/static/js/modules/helpers.js

@@ -91,13 +91,23 @@ function datetime(value, options) {
 
 Handlebars.registerHelper('datetime', datetime);
 
-var currencyFormatter = function(number) {
-  return numeral(number).format('$0,0.00');
+/**
+ * @param {number} number
+ * @param {boolean} roundToWhole - Any number to be converted to US Dollars
+ * @returns {string} String from the value and rounding argument
+ */
+var currencyFormatter = function(value, roundToWhole) {
+  return numeral(value).format(roundToWhole === true ? '$0,0' : '$0,0.00');
 };
 
-function currency(value) {
+/**
+ * @param {number} value - Any number to be converted to US Dollars
+ * @param {boolean} roundToWhole - Any number to be converted to US Dollars. Passed to currencyFormatter()
+ * @returns {string} String from the value else '--'
+ */
+function currency(value, roundToWhole) {
   if (!isNaN(parseInt(value))) {
-    return currencyFormatter(value);
+    return currencyFormatter(value, roundToWhole);
   } else {
     return '--';
   }