Closes #49: Add chart showing memberships over time to about page

[khdc-me]

Relevant Issue & Description

Closes #49: Add chart showing memberships over time to about page

[mattrasband]

I think we need to do two things here:

1. We can actually do this work in SQL (which would be much faster and require less logic)

In SQL (which I am not sure how to convert to the django ORM yet)

SELECT timestamp::date, member_count
FROM slack_membership
  WHERE timestamp::date IN (
    SELECT date_trunc('month', timestamp)::date AS month
    FROM slack_membership GROUP BY month
  )
ORDER BY timestamp;

which with real data gives us:

 timestamp  | member_count 
------------+--------------
 2017-08-01 |         7491
 2017-09-01 |         8350
 2017-10-01 |         9107
 2017-11-01 |         9712
 2017-12-01 |        10308
 2018-01-01 |        10842

2. Make this async (probably expose an api endpoint to get this data) - which I can do after this PR. I am planning to migrate the timezone stuff over too.

Secondly, the code should not manually convert this to JSON - that suggest the function knows how the result will be used (which really it shouldn't). Though I understand the reasoning for it

If we were going to pursue this way, I would suggest using the | tojson template tag we have in core/templatetags/tojson.py - but unfortunately that doesn't work for us since the JS is now separated from the templates more and goes through a build system (see the later comment).

[khdc-me]

1. Agreed. I wasn't sure how to do it w/ an ORM, TBH.
2. "I am planning to migrate the timezone stuff over too" - yeah, saw you record as an issue a couple hrs ago. Retrieving directly from API would be nice.

[khdc-me]

Just remembered something...
I wanted to pull dailies b/c (especially for first yr or 2), having a single number representing a whole month makes the graph jagged. With dailies, it looks a little more organic, but there's absolutely no need to place a date for each data pt.

[mattrasband]

We are now using yarn and webpack to build our frontend, so this should be made a dependency in the package.json with: yarn add chart.js (or whatever the library is named).

It's also kind of a bad practice to sprinkle script tags around html - generally it should either be at the beginning (and made async or deferred) or just before the body close.

[khdc-me]

Yeah. I tried splitting this up, following the how the map was implemented, but I think it boiled down to not understanding how to use webpack (or how to construct the json, frankly). Tried to follow what was already there but nothing would work. I'll give it another shot tomorrow.

[mattrasband]

Sounds good! I am on a branch trying to make the current example a (little) better - maybe this will help:

website/pyslackers_website/templates/slack/index.html

Lines 21 to 23 in f1b7c70

	<script id="slack_member_tz_count" type="application/json">
	{{ slack_member_tz_count | tojson }}
	</script>

Basically: set the JSON in a <script type="application/json" id="your_data_id">{{ thing | tojson }}</script> and retrieve it in the JS, like this:

website/client/slack/slack.js

Lines 11 to 12 in f1b7c70

	let data = JSON.parse($('#slack_member_tz_count').html());
	setupMemberMap(data);

To run the JS build see Item 7 under here

[mattrasband]

Since we are using a build system to build/minify our code we don't include scripts right in the template (instead it should be made a component in the existing client/slack/slack.js and triggered on the page being ready (currently done via jquery: $(() => { console.log('this code will not run until the page is ready!') }))

Note: please don't follow the example of how I am passing the data over, that was meant as a short-term stop gap and it will be fixed shortly.

[khdc-me]

Okay. Will give it another go tomorrow.
Thanks for the feedback.

[khdc-me]

Thanks @joesanford , I'll make those changes sometime today.

[mattrasband]

Closing for now after our discussion in slack about the linear-ness doesn't reflect quite what we had hoped. We sincerely appreciate the effort and time spent on this, so please don't take this as any discouragement!

[khdc-me]

Yeah, was somewhat expecting this to close after I saw that graph w/ the real data ><.

I think I found a way to represent this data effectively. I'll post some screenshots in Slack as soon as I have some time to put it together and get it running locally so you can tell me + or -.

Thanks