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.

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

Make the pie charts run dynamically from the table data instead of the #20

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
18 changes: 10 additions & 8 deletions coffee/directives.coffee
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
lex_app.directive 'allfundschart', (Budget) ->
restrict: 'E'
replace: true
transclude: true
scope:
data: '='
{}
Copy link
Member

Choose a reason for hiding this comment

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

I think you can just omit the whole scope: section if you don't want anything in it.

Copy link
Author

Choose a reason for hiding this comment

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

Oh okay, cool. That's just what the example in the docs had :) I'll change that

template: '<div id="all-funds-pie" class="chart-wrapper"></div>'
link: (scope, element, attrs) ->
scope.$watch 'data.length', ->
return unless scope.data && scope.data.length > 0
grouped_data = Budget.group_data(scope.data, 'fund_name',
scope.$watch '$parent.table_data.length', ->
return unless scope.$parent.table_data && scope.$parent.table_data.length > 0
grouped_data = Budget.group_data(scope.$parent.table_data, 'fund_name',
'fy_2014_adopted')
color = d3.scale.category20()
chart = new PieChart(element[0], color, 'fy_2014_adopted')
Expand All @@ -19,13 +20,14 @@ lex_app.directive 'allfundschart', (Budget) ->
lex_app.directive 'generalserviceschart', (Budget) ->
restrict: 'E'
replace: true
transclude: true
scope:
data: '='
{}
template: '<div id="general-services-pie" class="chart-wrapper"></div>'
link: (scope, element, attrs) ->
scope.$watch 'data.length', ->
return unless scope.data && scope.data.length > 0
gen_serv_data = Budget.extract_fund_data(1101, scope.data)
scope.$watch '$parent.table_data.length', ->
return unless scope.$parent.table_data && scope.$parent.table_data.length > 0
gen_serv_data = Budget.extract_fund_data(1101, scope.$parent.table_data)
grouped_data = Budget.group_data(gen_serv_data, 'division_name',
'fy_2014_adopted')
color = d3.scale.category20()
Expand Down
4 changes: 2 additions & 2 deletions haml/home.haml
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@
%h3
All Funds
%i.fa.fa-spinner.fa-spin{ng: {show: 'loading.budget_data'}}
%allFundsChart{data: 'budget_data'}
%allFundsChart
Copy link
Member

Choose a reason for hiding this comment

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

Why remove the parameter and instead reference scope.$parent.table_data?

Copy link
Member

Choose a reason for hiding this comment

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

If this makes things faster, I'm all for it.

Copy link
Author

Choose a reason for hiding this comment

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

The table_data is what is being built by the filters, which is how the charts dynamically update

.col-md-6
%h3
General Services
%i.fa.fa-spinner.fa-spin{ng: {show: 'loading.budget_data'}}
%generalServicesChart{data: 'budget_data'}
%generalServicesChart
%hr
%table.table.table-striped{ng: {if: 'table_data.length > 0'}}
%thead
Expand Down
4 changes: 2 additions & 2 deletions public/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@ <h3>
All Funds
<i class='fa fa-spinner fa-spin' ng-show='loading.budget_data'></i>
</h3>
<allFundsChart data='budget_data'></allFundsChart>
<allFundsChart></allFundsChart>
</div>
<div class='col-md-6'>
<h3>
General Services
<i class='fa fa-spinner fa-spin' ng-show='loading.budget_data'></i>
</h3>
<generalServicesChart data='budget_data'></generalServicesChart>
<generalServicesChart></generalServicesChart>
</div>
</div>
</section>
Expand Down
22 changes: 10 additions & 12 deletions public/js/all.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.