Skip to content
This repository has been archived by the owner on Dec 23, 2017. It is now read-only.

Use DataTables for contribution size table. #422

Merged
merged 3 commits into from
Aug 5, 2015
Merged

Use DataTables for contribution size table. #422

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3423958
Use DataTables for contribution size table.
jmcarp Aug 5, 2015
73a82ab
Merge branch 'develop' of github.com:18f/openFEC-web-app into feature…
jmcarp Aug 5, 2015
e4178b7
Move receipts link to totals column.
jmcarp Aug 5, 2015
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
131 changes: 87 additions & 44 deletions static/js/pages/committee-single.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,55 @@ var helpers = require('../modules/helpers');

var singlePageTableDOM = 't<"results-info results-info--bottom meta-box"frip>';

var tableOpts = {
dom: singlePageTableDOM,
pagingType: 'simple',
lengthChange: false,
pageLength: 10,
useHideNull: false
};

var sizeInfo = {
0: {limits: [0, 199.99], label: 'Under $200'},
200: {limits: [200, 499.99], label: '$200 - $499'},
500: {limits: [500, 999.99], label: '$500 - $999'},
1000: {limits: [1000, 1999.99], label: '$1000 - $1999'},
2000: {limits: [2000, null], label: 'Over $2000'},
};
var sizeColumns = [
{
data: 'size',
width: '50%',
className: 'all',
render: function(data, type, row, meta) {
var info = sizeInfo[data];
var anchor = document.createElement('a');
anchor.textContent = info.label;
var uri = URI('/receipts')
.query({
committee_id: row.committee_id,
min_amount: info.limits[0],
max_amount: info.limits[1]
});
anchor.setAttribute('href', tables.buildAggregateUrl(uri, row.cycle));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't specify this before, but this should be on the total column, not the size column, to keep it consistent with the others tables.

anchor.setAttribute('title', 'View individual transactions');
return anchor.outerHTML;
}
},
{
data: 'total',
width: '50%',
className: 'all',
render: function(data, type, row, meta) {
var span = document.createElement('div');
span.textContent = helpers.currency(data);
span.setAttribute('data-value', data);
span.setAttribute('data-row', meta.row);
return span.outerHTML;
}
},
];

var committeeColumns = [
{
data: 'contributor_name',
Expand Down Expand Up @@ -198,22 +247,41 @@ $(document).ready(function() {
useHideNull: false
});
break;
case 'receipts-by-state':
path = ['committee', committeeId, 'schedules', 'schedule_a', 'by_state'].join('/');
query = {cycle: parseInt(cycle), per_page: 99, hide_null: true};
tables.initTable($table, null, path, query, stateColumns,
case 'contribution-size':
path = ['committee', committeeId, 'schedules', 'schedule_a', 'by_size'].join('/');
query = {cycle: cycle};
tables.initTable($table, null, path, query, sizeColumns,
_.extend({
afterRender: tables.barsAfterRender.bind(undefined, undefined)
}, tables.offsetCallbacks), {
dom: 't',
dom: singlePageTableDOM,
order: [[1, 'desc']],
paging: false,
pagingType: 'simple',
lengthChange: false,
pageLength: 10,
useHideNull: false,
scrollY: 400,
scrollCollapse: true
useHideNull: false
});
break;
case 'receipts-by-state':
path = ['committee', committeeId, 'schedules', 'schedule_a', 'by_state'].join('/');
query = {cycle: parseInt(cycle), per_page: 99, hide_null: true};
tables.initTable($table, null, path, query, stateColumns,
_.extend(
{afterRender: tables.barsAfterRender.bind(undefined, undefined)},
tables.offsetCallbacks
),
_.extend(
{},
tableOpts,
{
dom: 't',
order: [[1, 'desc']],
paging: false,
scrollY: 400,
scrollCollapse: true
}
)
);
events.on('state.map', function(params) {
var $scrollBody = $table.closest('.dataTables_scrollBody');
var $row = $scrollBody.find('span[data-state="' + params.state + '"]');
Expand All @@ -230,26 +298,16 @@ $(document).ready(function() {
case 'receipts-by-employer':
path = ['committee', committeeId, 'schedules', 'schedule_a', 'by_employer'].join('/');
query = {cycle: parseInt(cycle)};
tables.initTable($table, null, path, query, employerColumns, tables.offsetCallbacks, {
dom: singlePageTableDOM,
tables.initTable($table, null, path, query, employerColumns, tables.offsetCallbacks, _.extend({}, tableOpts, {
order: [[1, 'desc']],
pagingType: 'simple',
lengthChange: false,
pageLength: 10,
useHideNull: false
});
}));
break;
case 'receipts-by-occupation':
path = ['committee', committeeId, 'schedules', 'schedule_a', 'by_occupation'].join('/');
query = {cycle: parseInt(cycle)};
tables.initTable($table, null, path, query, occupationColumns, tables.offsetCallbacks, {
dom: singlePageTableDOM,
tables.initTable($table, null, path, query, occupationColumns, tables.offsetCallbacks, _.extend({}, tableOpts, {
order: [[1, 'desc']],
pagingType: 'simple',
lengthChange: false,
pageLength: 10,
useHideNull: false
});
}));
break;
case 'filing':
var $form = $('#category-filters');
Expand All @@ -262,38 +320,23 @@ $(document).ready(function() {
case 'disbursements-by-purpose':
path = ['committee', committeeId, 'schedules', 'schedule_b', 'by_purpose'].join('/');
query = {cycle: parseInt(cycle)};
tables.initTable($table, null, path, query, disbursementPurposeColumns, tables.offsetCallbacks, {
dom: singlePageTableDOM,
tables.initTable($table, null, path, query, disbursementPurposeColumns, tables.offsetCallbacks, _.extend({}, tableOpts, {
order: [[1, 'desc']],
pagingType: 'simple',
lengthChange: false,
pageLength: 10,
useHideNull: false
});
}));
break;
case 'disbursements-by-recipient':
path = ['committee', committeeId, 'schedules', 'schedule_b', 'by_recipient'].join('/');
query = {cycle: parseInt(cycle)};
tables.initTable($table, null, path, query, disbursementRecipientColumns, tables.offsetCallbacks, {
dom: singlePageTableDOM,
tables.initTable($table, null, path, query, disbursementRecipientColumns, tables.offsetCallbacks, _.extend({}, tableOpts, {
order: [[1, 'desc']],
pagingType: 'simple',
lengthChange: false,
pageLength: 10,
useHideNull: false
});
}));
break;
case 'disbursements-by-recipient-id':
path = ['committee', committeeId, 'schedules', 'schedule_b', 'by_recipient_id'].join('/');
query = {cycle: parseInt(cycle)};
tables.initTable($table, null, path, query, disbursementRecipientIDColumns, tables.offsetCallbacks, {
dom: singlePageTableDOM,
tables.initTable($table, null, path, query, disbursementRecipientIDColumns, tables.offsetCallbacks, _.extend({}, tableOpts, {
order: [[1, 'desc']],
pagingType: 'simple',
lengthChange: false,
pageLength: 10,
useHideNull: false
});
}));
break;
}
});
Expand Down
51 changes: 12 additions & 39 deletions templates/partials/receipts-tab.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,6 @@

<section class="page-section" id="section-2" role="tabpanel" aria-hidden="true" aria-labelledby="section-2-heading">
<div class="container">
{% set table_data = [
(aggregates.size.0, (0, 199.99), 'Under $200'),
(aggregates.size.200, (200, 499.99), '$200 - $499'),
(aggregates.size.500, (500, 999.99), '$500 - $999'),
(aggregates.size.1000, (1000, 1999.99), '$1000 - $1999'),
(aggregates.size.2000, (2000, None), 'Over $2000'),
] %}
<div class="page-section__intro">
<h2 class="section-heading" id="section-2-heading">Analyze Receipts {% include 'partials/cycle-select.html' %} </h2>
<div class="toggles section__intro__left">
Expand Down Expand Up @@ -70,38 +63,18 @@ <h2 class="section-heading" id="section-2-heading">Analyze Receipts {% include '
</div>
</div>
<div id="by-contribution-size" class="panel-toggle-element">
<figure class="table--simple totals-table totals-table--charts">
<div class="table__row table__row--header">
<div class="table__cell">
<h5>Contribution Size</h5>
</div>
<div class="table__cell">
<h5>Contribution Size</h5>
</div>
</div>
<div class="table js-chart-series chart-series--horizontal">
{% for value, limits, label in table_data %}
<div class="table__row">
<div class="table__cell">
<a
href="{{ url_for(
'receipts',
committee_id=committee.committee_id,
min_amount=limits[0],
max_amount=limits[1],
min_date=cycle_start(cycle).strftime('%m/%d/%Y'),
max_date=cycle_end(cycle).strftime('%m/%d/%Y'),
) }}"
>{{ label }}</a>
</div>
<div class="table__cell">{{ null.null(value | currency) }}</div>
<div class="table__cell table__cell--bar">
{{ charts.chart_bar(value | default(0), label, tooltip=None) }}
</div>
</div>
{% endfor %}
</div>
</figure>
<div id="by-size" class="panel-toggle-element">
<table
class="data-table"
data-type="contribution-size"
data-committee="{{ committee.committee_id }}"
data-cycle="{{ cycle }}">
<thead>
<th scope="col">Contribution Size</th>
<th scope="col">Total Contributed</th>
</thead>
</table>
</div>
</div>
<div class="row">
<div id="by-committee" class="panel-toggle-element">
Expand Down