Skip to content

Commit 6a0d462

Browse files
iezeriezer
authored
Merge pull request #29 from iezer/filter-api-by-month
Filter api by month
2 parents 1c108d9 + 81baad3 commit 6a0d462

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+546
-258
lines changed

‎app/components/artist-info.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import moment from 'moment';
66
export default Component.extend({
77
classNames: [ 'artist-info' ],
88
month: null,
9-
9+
showClearButton: true,
1010
// could be zero
1111
hasMonth: computed('month', function() {
1212
return this.get('month') !== null;
@@ -41,5 +41,11 @@ export default Component.extend({
4141

4242
bandMates = bandMates.uniq().removeObject(artist);
4343
return bandMates;
44-
})
44+
}),
45+
46+
actions: {
47+
clearArtist() {
48+
window.history.back();
49+
}
50+
}
4551
});

‎app/components/force-graph.js‎

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import Component from '@ember/component';
33
import d3 from 'd3';
44
import { inject as service } from '@ember/service';
5+
import { schedule } from '@ember/runloop';
56

67
export default Component.extend({
78
classNames: [ 'force-graph' ],
@@ -10,11 +11,34 @@ export default Component.extend({
1011
selectedArtist: null,
1112

1213
metrics: service(),
14+
router: service(),
15+
fastboot: service(),
16+
17+
hoverArtist: null,
18+
mouseMove(event) {
19+
if(event.target.tagName === 'circle') {
20+
let artistId = event.target.getAttribute('dd-artist');
21+
if (artistId === this.get('hoverArtist.id')) { return; }
22+
let artist = this.get('graph.nodes').findBy('id', artistId);
23+
this.set('hoverArtist', artist);
24+
} else {
25+
this.set('hoverArtist', null);
26+
}
27+
},
28+
29+
didReceiveAttrs() {
30+
if (this.get('fastboot.isFastBoot')) { return; }
31+
schedule('afterRender', () => this.doGraph());
32+
},
1333

14-
didRender() {
15-
var svg = d3.select("svg"),
16-
width = +svg.attr("width"),
17-
height = +svg.attr("height");
34+
doGraph() {
35+
let parent = document.querySelector('.index-container__column');
36+
let width = parent.offsetWidth;
37+
let height = parent.offsetHeight;
38+
this.setProperties({ height, width });
39+
40+
41+
let svg = d3.select("svg");
1842

1943
let strength = this.get('selectedArtist') ? -40 : -13;
2044
var simulation = d3.forceSimulation()
@@ -94,13 +118,18 @@ export default Component.extend({
94118
actions: {
95119
selectArtist(artist) {
96120
let value = artist ? artist.get('id') : 'clear';
121+
97122
this.get('metrics').trackEvent({
98123
category: 'ui-interaction',
99124
action: `select-artist-${value}`,
100125
label: 'force-graph'
101126
});
102127

103-
this.get('selectArtist')(artist);
128+
if (artist) {
129+
this.get('router').transitionTo('artist', value);
130+
} else {
131+
this.get('router').transitionTo('index');
132+
}
104133
}
105134
}
106135
});

‎app/controllers/application.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import Controller from '@ember/controller';
2+
import { inject as service } from '@ember/service';
3+
import { computed } from '@ember/object';
4+
5+
const YEARS = [
6+
2017,
7+
2018
8+
];
9+
10+
const MONTHS = [
11+
{ name: 'Jan' , value: 1},
12+
{ name: 'Feb', value: 2 },
13+
{ name: 'Mar', value: 3 },
14+
{ name: 'Apr', value: 4 },
15+
{ name: 'May', value: 5 },
16+
{ name: 'Jun', value: 6 },
17+
{ name: 'Jul', value: 7 },
18+
{ name: 'Aug', value: 8 },
19+
{ name: 'Sep', value: 9 },
20+
{ name: 'Oct', value: 10 },
21+
{ name: 'Nov', value: 11 },
22+
{ name: 'Dec', value: 12 }
23+
];
24+
25+
const CURRENT_DATE = new Date();
26+
const CURRENT_MONTH = CURRENT_DATE.getMonth() + 1;
27+
const CURRENT_YEAR = CURRENT_DATE.getFullYear();
28+
29+
export default Controller.extend({
30+
month: CURRENT_MONTH,
31+
year: CURRENT_YEAR,
32+
router: service(),
33+
years: YEARS,
34+
months: MONTHS,
35+
36+
selectedMonth: computed('month', 'months', function() {
37+
let months = this.get('months');
38+
let month = parseInt(this.get('month'));
39+
return months.findBy('value', month);
40+
}),
41+
42+
showCTA: computed({
43+
get() {
44+
if (this.get('fastboot.isFastBoot')) {
45+
return;
46+
}
47+
return !localStorage.getItem('seenCTA-2');
48+
},
49+
set(key, value) {
50+
localStorage.setItem('seenCTA-2', !value);
51+
return value;
52+
}
53+
}),
54+
55+
actions: {
56+
changeMonth({ value: month }) {
57+
let year = this.get('year');
58+
this.get('router').transitionTo('graph', year, month);
59+
},
60+
changeYear(year) {
61+
let month = this.get('month');
62+
this.get('router').transitionTo('graph', year, month);
63+
}
64+
}
65+
});

‎app/controllers/artist.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import Controller from '@ember/controller';
2+
import { alias, sort } from '@ember/object/computed';
3+
import { computed } from '@ember/object';
4+
import createGraph from 'cats-client/utils/create-graph';
5+
import { A as emberA } from '@ember/array';
6+
7+
export default Controller.extend({
8+
sortDef: Object.freeze(['startTime:desc']),
9+
artist: alias('model'),
10+
sortedEvents: sort('events', 'sortDef'),
11+
includeBandmates: true,
12+
13+
events: computed('artist', 'artist.events.[]', 'includeBandmates', function() {
14+
if (!this.get('includeBandmates')) {
15+
return this.get('artist.events');
16+
}
17+
18+
let events = emberA();
19+
let artist = this.get('artist');
20+
let artistEvents = this.get('artist.events');
21+
22+
let bandMates = emberA();
23+
artistEvents.forEach(event => {
24+
bandMates.pushObjects(event.get('artists').toArray());
25+
});
26+
27+
bandMates = bandMates.uniq();
28+
29+
bandMates.forEach(bandMate => events.pushObjects(bandMate.get('events').toArray()));
30+
31+
return events.uniq();
32+
}),
33+
34+
graph: computed('events.[]', function() {
35+
let events = this.get('events');
36+
return createGraph(events);
37+
})
38+
});

‎app/controllers/graph.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Controller from '@ember/controller';
2+
import { alias, sort } from '@ember/object/computed';
3+
import { computed } from '@ember/object';
4+
import createGraph from 'cats-client/utils/create-graph';
5+
6+
export default Controller.extend({
7+
sortDef: Object.freeze(['startTime:desc']),
8+
events: alias('model'),
9+
sortedEvents: sort('events', 'sortDef'),
10+
11+
graph: computed('events.[]', function() {
12+
let events = this.get('events');
13+
let graph = createGraph(events);
14+
15+
return graph;
16+
})
17+
});

‎app/controllers/index.js‎

Lines changed: 0 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,3 @@
11
import Controller from '@ember/controller';
2-
import {computed} from '@ember/object';
3-
import createGraph from 'cats-client/utils/create-graph';
4-
import { A as emberA } from '@ember/array';
5-
import { inject as service } from '@ember/service';
6-
7-
export const ALL_MONTHS = 0;
8-
92
export default Controller.extend({
10-
store: service(),
11-
fastboot: service(),
12-
13-
allMonths: ALL_MONTHS,
14-
15-
showCTA: computed({
16-
get() {
17-
if (this.get('fastboot.isFastBoot')) {
18-
return;
19-
}
20-
return !localStorage.getItem('seenCTA');
21-
},
22-
set(key, value) {
23-
localStorage.setItem('seenCTA', !value);
24-
return value;
25-
}
26-
}),
27-
28-
selectedArtist: computed('artist', {
29-
get() {
30-
let artist = this.get('artist');
31-
if (artist) {
32-
return this.get('store').peekRecord('artist', artist);
33-
}
34-
35-
return null;
36-
},
37-
set(key, value) {
38-
this.set('showCTA', false);
39-
this.set('artist', value && value.get('id'));
40-
return value;
41-
}
42-
}),
43-
44-
sortDef: Object.freeze(['startTime:desc']),
45-
sortedEvents: computed.sort('events', 'sortDef'),
46-
47-
includeBandmates: true,
48-
month: ALL_MONTHS,
49-
50-
artist: null,
51-
52-
queryParams: Object.freeze([ 'month', 'includeBandmates', 'artist' ]),
53-
54-
// converter query-string month input "1"-"12"
55-
// do 0 based int 0-11 so that getMonth() works.
56-
monthInt: computed('month', function() {
57-
let month = this.get('month');
58-
if (month === ALL_MONTHS || month === null) {
59-
return null;
60-
}
61-
62-
return parseInt(month, 10) - 1;
63-
}),
64-
65-
// Filter on month and/or selectedArtist
66-
events: computed('monthInt', 'selectedArtist', 'includeBandmates', function() {
67-
let month = this.get('monthInt');
68-
let events;
69-
70-
let selectedArtist = this.get('selectedArtist');
71-
if (selectedArtist) {
72-
events = emberA();
73-
74-
let pushEvents = function(artist) {
75-
events.pushObjects(artist.get('events').filter(event => {
76-
if (month === null) {
77-
return true;
78-
}
79-
80-
return event.get('startTime').getMonth() === month;
81-
}));
82-
};
83-
84-
pushEvents(selectedArtist);
85-
86-
if (this.get('includeBandmates')) {
87-
let bandMates = emberA();
88-
events.forEach(event => {
89-
bandMates.pushObjects(event.get('artists').toArray());
90-
});
91-
92-
bandMates = bandMates.uniq().removeObject(selectedArtist);
93-
94-
bandMates.forEach(bandMate => pushEvents(bandMate));
95-
}
96-
97-
return events.uniq();
98-
}
99-
100-
if (month !== null) {
101-
return this.get('model').filter(event => {
102-
return event.get('startTime').getMonth() === month;
103-
});
104-
}
105-
106-
return this.get('model');
107-
}),
108-
109-
graph: computed('events.[]', function() {
110-
let events = this.get('events');
111-
return createGraph(events);
112-
})
1133
});

‎app/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@
99

1010
{{content-for "head"}}
1111

12-
<link rel="stylesheet" href="assets/vendor.css">
13-
<link rel="stylesheet" href="assets/cats-client.css">
12+
<link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
13+
<link rel="stylesheet" href="{{rootURL}}assets/cats-client.css">
1414
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700' rel='stylesheet' type='text/css'>
1515

1616
{{content-for "head-footer"}}
1717
</head>
1818
<body>
1919
{{content-for "body"}}
2020

21-
<script src="assets/vendor.js"></script>
22-
<script src="assets/cats-client.js"></script>
21+
<script src="{{rootURL}}assets/vendor.js"></script>
22+
<script src="{{rootURL}}assets/cats-client.js"></script>
2323

2424
{{content-for "body-footer"}}
2525
</body>

‎app/models/artist.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ import { A as emberA } from '@ember/array';
77
export default Model.extend({
88
name: attr('string'),
99
instrument: attr('string'),
10-
events: hasMany('event', { inverse: 'artists' }),
10+
events: hasMany('event', { inverse: 'artists', async: false }),
1111
image: attr('string'),
12+
url: attr('string'),
1213

1314
bandMates: computed('events.@each.artists', function() {
1415
let bandMates = emberA();

‎app/models/event.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import attr from 'ember-data/attr';
33
import { hasMany } from 'ember-data/relationships';
44

55
export default Model.extend({
6-
name: attr('string'),
7-
artists: hasMany('artist', { inverse: 'events', async: false }),
6+
title: attr('string'),
7+
artists: hasMany('artist', { inverse: 'events' }),
88
startTime: attr('date'),
99
endTime: attr('date')
1010
});

‎app/router.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ const Router = EmberRouter.extend({
2727
Router.map(function() {
2828
this.route('stats');
2929
this.route('about');
30+
this.route('graph', { path: 'graph/:year/:month'});
31+
this.route('artist', { path: 'artist/:id'});
3032
});
3133

3234
export default Router;

0 commit comments

Comments
 (0)