by moovel lab and moovel dev team
#teamchatviz enables you to explore how your Slack team works:
Client app is built with React and JSPM. Visualisations leverage react-vis and d3. Server is written in ES6+ using Koa 2 and Babel. PostgreSQL is used a database with the help of pg-promise.
Nota bene: #teamchatviz is not created by, affiliated with, or supported by Slack Technologies, Inc. Please comply with your applicable data protection and labour law regulations when using our tool.
See the project page moovel.github.io/teamchatviz for more infos, screenshots and a screenrecording.
Online demo app under teamchatviz-demo.moovel.com (with fake Slack team data, generated with Faker.js).
Currently supported browsers: latest Chrome/Chromium, Firefox or Safari.
App Credentials
tab of the newly created app to get client id and client secret. Specify the following Redirect URI for your Slack App: http://<hostname of your server>/api/auth/slack/callback
Deploy to Heroku
button below. Specify the choosen hostname, client id and client secret during the creation of the Heroku instance.http://<hostname of your server>
and press Add to Slack
button. Grant all required permissions to the Slack app that you created on step #1. Never heard of Heroku? Here's how to install it: https://youtu.be/8lzdCWoiDbY
See docker image by Xqua
You need a recent Node JS version (4+) installed and JSPM 0.17 Beta (npm install jspm@beta -g
).
git clone git@github.com:moovel/teamchatviz.git
and cd teamchatviz
.
npm install
- install server npm dependencies.
cd client && npm install && jspm install
- install client dependencies.
cd ..
.
Create .env
file with the following content:
PORT=3333
SLACK_CLIENT_ID="<client id of your slack app>"
SLACK_CLIENT_SECRET="<slack app secret>"
DATABASE_URL="<postgresql database URL e.g. postgres://teamchatviz:teamchatviz@localhost/teamchatviz>"
PUBLIC="false"
ANONYMIZE="false"
SESSION_SECRET="secret"
If PUBLIC === true the data loaded into the system will be public and will not require authentication via Slack. If ANONYMIZE === true the data loaded into the system will be replaced with the fake data using Faker.js
. Anonymization will happen only on the initial data loading and before the data reaches the database.
If PUBLIC === true, Add to Slack
button on the Main page is hidden and login is disabled. If you change the PUBLIC setting for an existing instance, the changes will apply only after a restart of the server.
Create database as described in the next section and apply database migration by running npm run up
.
npm start
- start the server.
Open http://localhost:$PORT
in your browser.
In order to create a database in PostgreSQL you need to start psql
client. On Linux systems you can run sudo -u postgres psql
for this. On OS X you can start it via the UI of Postgres.app.
Then you may run the following commands to create a user called teamchatviz
with the password teamchatviz
and a database called teamchatviz
:
CREATE DATABASE teamchatviz;
CREATE ROLE teamchatviz WITH LOGIN CREATEDB PASSWORD 'teamchatviz';
ALTER USER teamchatviz VALID UNTIL 'infinity';
ALTER DATABASE teamchatviz OWNER TO teamchatviz;
GRANT ALL ON DATABASE teamchatviz TO teamchatviz;
\c teamchatviz
ALTER SCHEMA public OWNER TO teamchatviz;
npm test
See the full list of dependencies in the client's package.json and server's package.json.