Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update line-chart interactions #2276

Merged
merged 9 commits into from
Sep 7, 2018
+1,113 −56
Merged

Update line-chart interactions #2276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2b7b294
Update line-chart interactions
apburnes Aug 10, 2018
a95b02e
Re-enable modals for graph methodology buttons
apburnes Aug 14, 2018
1d69e87
Add line charts to spending and raising pages under advanced data
apburnes Aug 28, 2018
2d79f07
Add reaction boxes for line charts on /data /data/advanced
apburnes Aug 31, 2018
32863fb
Updated line charts for raised and spent
apburnes Sep 4, 2018
718db3f
Update design tweeks from https://github.com/fecgov/fec-cms/pull/2276…
apburnes Sep 5, 2018
1e035db
Update /data chart date format and more semantic naming for data/adva…
apburnes Sep 6, 2018
7c27691
Fix line-chart test updated control date format
apburnes Sep 6, 2018
906a570
Merge with develop and run js format/lint
apburnes Sep 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion fec/data/templates/advanced.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down Expand Up @@ -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 %}
145 changes: 142 additions & 3 deletions fec/data/templates/landing.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}

Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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 %}
4 changes: 2 additions & 2 deletions fec/data/templates/layouts/main.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' %}
Expand Down
70 changes: 70 additions & 0 deletions fec/data/templates/macros/chart-committee-overviews.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}
36 changes: 21 additions & 15 deletions fec/data/templates/macros/overviews.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
56 changes: 55 additions & 1 deletion fec/data/templates/partials/advanced/raising.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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>
Loading