Merge pull request #2276 from fecgov/feature/update-line-chart

Update line-chart interactions

fec/data/templates/advanced.jinja

@@ -6,7 +6,8 @@
 {% endblock %}
 
 {% block css %}
-<link rel="stylesheet" type="text/css" href="{{ asset_for_css('common.css') }}" />
+  <link rel="stylesheet" type="text/css" href="{{ asset_for_css('common.css') }}" />
+  <link rel="stylesheet" type="text/css" href="{{ asset_for_css('data-landing.css') }}" />
 {% endblock %}
 
 {% block body %}
@@ -179,4 +180,6 @@
 {% endblock %}
 
 {% block scripts %}
+  <script src="{{ asset_for_js('dataviz-common.js') }}"></script>
+  <script src="{{ asset_for_js('data-advanced.js') }}"></script>
 {% endblock %}

fec/data/templates/landing.jinja

@@ -1,6 +1,7 @@
 {% extends 'layouts/main.jinja' %}
 {% import 'macros/cycle-select.jinja' as select %}
 {% import 'macros/overviews.jinja' as overviews %}
+{% import 'macros/reaction-box.jinja' as reaction %}
 
 {% block title %}{{ title }}{% endblock %}
 
@@ -83,7 +84,7 @@
 
   </section>
 
-  <section class="content__section content__section--ruled">
+  <section class="content__section">
     <h2>Browse full advanced data sets</h2>
     <div class="grid grid--4-wide">
       <div class="grid__item">
@@ -186,9 +187,147 @@
       </div>
     </div>
   </section>
+  <div class="content__section--extra">
+    <h2 class="t-ruled--bottom">Get started with campaign finance data</h2>
+    <section class="content__section" id="raising">
+      <h3 class="u-no-margin">Raising</h3>
+      <p>This graph shows how much <span class="term" data-term="candidate">candidates</span>, <span class="term" data-term="party committee">party committees</span> and <span class="term" data-term="political action committee (PAC)">political action committees</span> (PACs) have reported raising, up to specific points in time. Although the graph displays these numbers month-by-month, different committee types have different reporting schedules.</p>
+      <div class="content__section">
+        <div class="heading--section heading--with-action">
+          <h4 class="heading__left t-upper">Cumulative amount raised by committees</h4>
+          <div class="heading__right">
+            <ul class="list--buttons">
+              <li><a class="button button--standard button--table" href="/data/receipts">Explore data</a></li>
+              <li><button class="button button--standard js-ga-event"  data-a11y-dialog-show="raised-modal" data-ga-event="Raised methodology modal clicked" aria-controls="raised-modal">
+              Methodology</button></li>
+            </ul>
+          </div>
+        </div>
+        {{ overviews.overview('raised', 'landing')}}
+         <div class="breakdown-link is-disabled">More raising charts &raquo;</div>
+         <ul class="grid grid--4-wide t-sans">
+           <li class="grid__item is-disabled">
+             <div class="icon-heading--graph-circle">
+               <div class="icon-heading__text"><span>Who's raising the most</span></div>
+             </div>
+           </li>
+           <li class="grid__item is-disabled">
+             <div class="icon-heading--map-circle" title="Coming soon">
+               <div class="icon-heading__text"><span>Where contributions come from</span></div>
+             </div>
+           </li>
+           <li class="grid__item is-disabled">
+             <div class="icon-heading--graph-unordered-circle" title="Coming soon">
+               <div class="icon-heading__text"><span>The size of contributions</span></div>
+             </div>
+           </li>
+         </ul>
+      </div>
+      {{ reaction.reaction_box('raised', 'landing') }}
+    </section>
+    <section class="content__section" id="spending">
+      <h3 class="u-no-margin">Spending</h3>
+      <p>This graph shows how much <span class="term" data-term="candidate">candidates</span>, <span class="term" data-term="party committee">party committees</span> and <span class="term" data-term="political action committee (PAC)">political action committees</span> (PACs) have reported spending, up to specific points in time. Although the graph displays these numbers month-by-month, different committee types have different reporting schedules.</p>
+      <div class="content__section">
+        <div class="heading--section heading--with-action">
+          <h4 class="heading__left t-upper">Cumulative amount spent by committees</h4>
+          <div class="heading__right">
+            <ul class="list--buttons">
+              <li><a class="button button--standard button--table" href="/data/disbursements">Explore data</a></li>
+              <li><button class="button button--standard js-ga-event"  data-a11y-dialog-show="spending-modal" data-ga-event="Spending methodology modal clicked" aria-controls="spending-modal">Methodology</button></li>
+            </ul>
+          </div>
+        </div>
+        {{ overviews.overview('spent', 'landing') }}
+        <div class="breakdown-link is-disabled">More spending charts &raquo;</div>
+        <ul class="grid grid--4-wide t-sans">
+          <li class="grid__item is-disabled">
+            <div class="icon-heading--graph-circle">
+              <div class="icon-heading__text"><span>Who's spending the most</span></div>
+            </div>
+          </li>
+          <li class="grid__item is-disabled">
+            <div class="icon-heading--graph-unordered-circle" title="Coming soon">
+              <div class="icon-heading__text"><span>What's spent on day-to-day activities</span></div>
+            </div>
+          </li>
+          <li class="grid__item is-disabled">
+            <div class="icon-heading--map-circle" title="Coming soon">
+              <div class="icon-heading__text"><span>Where money is spent to support and oppose candidates</span></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      {{ reaction.reaction_box('spent', 'landing') }}
+    </section>
+  </div>
+</div>
+{% endblock %}
+
+{% block modals %}
+<div class="js-modal modal" id="raised-modal" aria-hidden="true">
+  <div tabindex="-1" class="modal__overlay" data-a11y-dialog-hide></div>
+  <div role="dialog" class="modal__content" aria-labelledby="raised-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 id="raised-modal-title" tabindex="0">Methodology</h2>
+      <p>This data includes Forms 3, 3P, and 3X.</p>
+      <h3>Methodology overview</h3>
+      <p><strong>Money raised</strong> includes each of the following:</p>
+      <ul class="list--bulleted">
+        <li><em>Adjusted receipts</em> for PACs, parties, congressional filers and presidential filers</li>
+      </ul>
+      <p><em>Adjusted receipts</em> are the total receipts minus the following:</p>
+      <ul class="list--bulleted">
+        <li>Contribution refunds</li>
+        <li>Contributions from political party committees and other political committees</li>
+        <li>Loan repayments</li>
+        <li>Offsets to operating expenditures</li>
+        <li>Transfers from nonfederal accounts for allocated activities</li>
+      </ul>
+      <p><span>The form-by-form breakdown for adjusted receipts is:</span></p>
+      <ul class="list--bulleted">
+        <li><strong>Form 3:</strong> <em>line 16</em> - (<em>line 11(b)</em> + <em>line 11(c)</em> + <em>line 14</em> + <em>line 19(c)</em> + <em>line 20(d))</em></li>
+        <li><strong>Form 3P:</strong> <em>line 22</em> - (<em>line 17(b)</em> + <em>line 17(c)</em> + <em>line 20(d)</em> + <em>line 27(c)</em> + <em>line 28(d)</em>)</li>
+        <li><strong>Form 3X:</strong> <em>line 19</em> - (<em>line 11(b)</em> + <em>line 11(c)</em> + <em>line 15</em> + <em>line 16</em> + <em>line 18(a)</em> + <em>line 26</em> + <em>line 28(d)</em>)</li>
+      </ul>
+    </div>
+  </div>
+</div>
+<div class="js-modal modal" id="spending-modal" aria-hidden="true">
+  <div tabindex="-1" class="modal__overlay" data-a11y-dialog-hide></div>
+  <div role="dialog" class="modal__content" aria-labelledby="spending-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 id="spending-modal-title">Methodology</h2>
+      <p>This data includes Forms 3, 3P, and 3X.</p>
+      <h5>Methodology overview</h5>
+      <p><strong>Money spent</strong> includes each of the following:</p>
+      <ul class="list--bulleted">
+        <li><em>Adjusted disbursements</em> for PACs, parties, congressional filers and presidential filers</li>
+      </ul>
+      <p><em>Adjusted disbursements</em> are total disbursements minus the following:</p>
+      <ul class="list--bulleted">
+        <li>Contribution refunds</li>
+        <li>Contributions to candidates and other political committees</li>
+        <li>Loan repayments</li>
+        <li>Nonfederal share of allocated disbursements</li>
+        <li>Offsets to expenditures</li>
+        <li>Other disbursements</li>
+        <li>Transfers to other authorized committees and affiliated committees</li>
+      </ul>
+      <p>The form-by-form breakdown for adjusted disbursements is:</p>
+      <ul class="list--bulleted">
+        <li><strong>Form 3:</strong> <em>line 22</em> - (<em>line 18</em> + <em>line 19(c)</em> + <em>line 20(d)</em> + <em>line 21</em>)</li>
+        <li><strong>Form 3P:</strong> <em>line 30</em> - (<em>line 20(d)</em> + <em>line 24</em> + <em>line 27(c)</em> + <em>line 28(d)</em> + <em>line 29</em>)</li>
+        <li><strong>Form 3X:</strong> <em>line 31</em> - (<em>line 21(a)(ii)</em> + <em>line 22</em> + <em>line 23</em> + <em>line 26</em> + <em>line 28(d)</em> + <em>line 29</em>)</li>
+      </ul>
+    </div>
+  </div>
 </div>
 {% endblock %}
+
 {% block scripts %}
-<script src="{{ asset_for_js('dataviz-common.js') }}"></script>
-<script src="{{ asset_for_js('data-landing.js') }}"></script>
+  <script src="{{ asset_for_js('dataviz-common.js') }}"></script>
+  <script src="{{ asset_for_js('data-landing.js') }}"></script>
 {% endblock %}

fec/data/templates/layouts/main.jinja

@@ -124,8 +124,8 @@
 {% csrf_token %}
 
 {% block modals %}{% endblock %}
-<script src="{{ asset_for_js('vendor.js') }}"></script>
-<script src="{{ asset_for_js('data-init.js') }}"></script>
+  <script src="{{ asset_for_js('vendor.js') }}"></script>
+  <script src="{{ asset_for_js('data-init.js') }}"></script>
 {% block scripts %}{% endblock %}
 
 {% if FEC_CMS_ENVIRONMENT == 'PRODUCTION' %}

fec/data/templates/macros/chart-committee-overviews.jinja

@@ -0,0 +1,70 @@
+{% macro plot(total_type) %}
+  <div class="overview js-{{total_type}}-overview js-{{total_type}}-snapshot">
+    <div>
+      <div class="grid--flex" style="align-items: center">
+        <div class="overview__chart-subtitle">
+          <p class="heading__subtitle">How much money has been {{total_type}} between:</p>
+        </div>
+        <div class="overview__chart-controls">
+          <div class="snapshot__line-controls">
+            <button class="button button--standard button--previous js-snapshot-prev"><span class="u-visually-hidden">Previous month</span></button>
+            <h5><span class="js-min-date"></span> &ndash; <span class="js-max-date"></span></h5>
+            <button class="button button--standard button--next js-snapshot-next"><span class="u-visually-hidden">next month</span></button>
+          </div>
+        </div>
+      </div>
+    <div>
+    <div class="overview__chart-section">
+      <div class="overview__chart-line js-chart"></div>
+    </div>
+    <div class="overview__snapshot-section">
+      <div class="js-snapshot">
+        <div class="snapshot__line-item">
+          <div class="snapshot__line-item-title">
+            <span class="swatch candidates"></span>Candidates
+          </div>
+          <div class="snapshot__line-item-number">
+            <div class="snapshot__point-padding">
+              <div class="point-padding"></div>
+            </div>
+            <span data-total-for="candidate"></span>
+          </div>
+        </div>
+        <div class="snapshot__line-item">
+          <div class="snapshot__line-item-title">
+            <span class="swatch pacs"></span>PACs
+          </div>
+          <div class="snapshot__line-item-number">
+            <div class="snapshot__point-padding">
+              <div class="point-padding"></div>
+            </div>
+            <span data-total-for="pac"></span>
+          </div>
+        </div>
+        <div class="snapshot__line-item">
+          <div class="snapshot__line-item-title">
+            <span class="swatch parties"></span>Party committees
+          </div>
+          <div class="snapshot__line-item-number">
+            <div class="snapshot__point-padding">
+              <div class="point-padding"></div>
+            </div>
+            <span data-total-for="party"></span>
+          </div>
+        </div>
+        <div class="snapshot__line-item">
+          <div class="snapshot__line-item-title">
+            <span class="swatch"></span>
+            All committees
+          </div>
+          <div class="snapshot__line-item-number">
+            <div class="snapshot__point-padding">
+              <div class="point-padding"></div>
+            </div>
+            <span data-total-for="all"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endmacro %}

fec/data/templates/macros/overviews.jinja

@@ -10,41 +10,47 @@
       </div>
       <div class="snapshot__item">
         <div class="snapshot__item-title">
-          All committees
+          <span class="swatch candidates"></span>Candidates
         </div>
-        <div class="snapshot__item-number">
+        <span class="snapshot__item-number">
           <span class="snapshot__item-number">
             <span class="figure__decimals" aria-hidden="true"></span>
-            <span data-total-for="all"></span>
+            <span data-total-for="candidate"></span>
           </span>
-        </div>
+        </span>
       </div>
       <div class="snapshot__item">
         <div class="snapshot__item-title">
-          <span class="swatch candidates"></span>Candidates
+          <span class="swatch pacs"></span>PACs
         </div>
         <span class="snapshot__item-number">
-          <span class="figure__decimals" aria-hidden="true"></span>
-          <span data-total-for="candidate"></span>
+          <span class="snapshot__item-number">
+            <span class="figure__decimals" aria-hidden="true"></span>
+            <span data-total-for="pac"></span>
+          </span>
         </span>
       </div>
       <div class="snapshot__item">
         <div class="snapshot__item-title">
-          <span class="swatch pacs"></span>PACs
+          <span class="swatch parties"></span>Party committees
         </div>
         <span class="snapshot__item-number">
-          <span class="figure__decimals" aria-hidden="true"></span>
-          <span data-total-for="pac"></span>
+          <span class="snapshot__item-number">
+            <span class="figure__decimals" aria-hidden="true"></span>
+            <span data-total-for="party"></span>
+          </span>
         </span>
       </div>
       <div class="snapshot__item">
         <div class="snapshot__item-title">
-          <span class="swatch parties"></span>Party committees
+          All committees
+        </div>
+        <div class="snapshot__item-number">
+          <span class="snapshot__item-number">
+            <span class="figure__decimals" aria-hidden="true"></span>
+            <span data-total-for="all"></span>
+          </span>
         </div>
-        <span class="snapshot__item-number">
-          <span class="figure__decimals" aria-hidden="true"></span>
-          <span data-total-for="party"></span>
-        </span>
       </div>
     </div>
   </div>

fec/data/templates/partials/advanced/raising.jinja

@@ -1,7 +1,10 @@
+{% import 'macros/chart-committee-overviews.jinja' as chart %}
+{% import 'macros/reaction-box.jinja' as reaction %}
+
 <section class="row" id="raising" aria-hidden="false" role="tabpanel">
   <h2>Raising</h2>
   <h3>Search or browse data</h3>
-  <div class="content__section--ruled t-sans">
+  <div class="content__section--ruled-responsive t-sans">
     <ul>
       <li>
         <i class="icon i-magnifying-glass icon--absolute--left"></i>
@@ -36,6 +39,57 @@
           </div>
         </div>
       </li>
+      <li>
+        <section class="content__section" style="padding-top: 3rem;">
+          <div class="heading--section heading--with-action" style="border: none;padding: 0">
+            <h3 class="heading__left">Cumulative amount raised by committees</h3>
+            <div class="heading__right">
+              <ul class="list--buttons">
+                <button disabled="true" class="button button--cta button--go"  data-a11y-dialog-show="spending-modal" data-ga-event="Spending methodology modal clicked" aria-controls="spending-modal">More raising charts</button>
+              </ul>
+            </div>
+          </div>
+          <div class="content__section--ruled-responsive t-sans">
+            {{ chart.plot('raised')}}
+          </div>
+        </section>
+      </li>
+      <li>
+        <div class="content__section--indent-left">
+          <div class="js-accordion accordion--neutral" data-content-prefix="methodology_raising">
+            <button type="button" class="js-accordion-trigger accordion__button">Methodology</button>
+            <div class="accordion__content">
+              <div role="document">
+                <h6 class="t-no-rules">Methodology Overview</h4>
+                <p class="t-note">This data includes Forms 3, 3P, and 3X.</p>
+                <p><strong>Money raised</strong> includes each of the following:</p>
+                <ul class="list--bulleted">
+                  <li><em>Adjusted receipts</em> for PACs, parties, congressional filers and presidential filers</li>
+                </ul>
+                <p><em>Adjusted receipts</em> are the total receipts minus the following:</p>
+                <ul class="list--bulleted">
+                  <li>Contribution refunds</li>
+                  <li>Contributions from political party committees and other political committees</li>
+                  <li>Loan repayments</li>
+                  <li>Offsets to operating expenditures</li>
+                  <li>Transfers from nonfederal accounts for allocated activities</li>
+                </ul>
+                <p><span>The form-by-form breakdown for adjusted receipts is:</span></p>
+                <ul class="list--bulleted">
+                  <li><strong>Form 3:</strong> <em>line 16</em> - (<em>line 11(b)</em> + <em>line 11(c)</em> + <em>line 14</em> + <em>line 19(c)</em> + <em>line 20(d))</em></li>
+                  <li><strong>Form 3P:</strong> <em>line 22</em> - (<em>line 17(b)</em> + <em>line 17(c)</em> + <em>line 20(d)</em> + <em>line 27(c)</em> + <em>line 28(d)</em>)</li>
+                  <li><strong>Form 3X:</strong> <em>line 19</em> - (<em>line 11(b)</em> + <em>line 11(c)</em> + <em>line 15</em> + <em>line 16</em> + <em>line 18(a)</em> + <em>line 26</em> + <em>line 28(d)</em>)</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+      <li>
+        <section class="content__section">
+          {{ reaction.reaction_box('raised', 'advanced') }}
+        </section>
+      </li>
     </ul>
   </div>
 </section>