Timezone Visualisation

[merefield]

Hey, I created a little javascript widget to visualise each of our working days against eachother.

UPDATE This is now a plugin:

paviliondev/discourse-team-timezones

I can add more people, but have included a few examples.

Just wondering where to put this? Ideas? Hate it?:

NB It sorts, with people sent to the top who are closest to their midday.

White is local midday, black is out of hours. The red marks current time.

The numbers are based on GMT. These could just as easily be hidden as are meaningless for most.

It’s very approximate and uses a sine wave raised to the power to create the ‘heat map’.

It’s pure javascript (w/ HTML and CSS) at the moment with hard coding and not integrated with Groups and Users, but could be, e.g. fixed banner widget that shows all users in Group x.

[pacharanero]

That’s cool @merefield nice work! There’s a discourse-international-team-collab-plugin in there somewhere!

Weird that time difference is so hard to perceive without aids though isn’t it? Especially when more than one time zone in play - we have 4 (so far!) and it’s pretty difficult to find a time that is remotely civilised for everyone.

What’s even weirder is the hours some of us keep… so actually even though the clock says ‘out of hours’, that is often the best coding time, nobody ‘local’ bothers you and there’s less cortisol flying about… Maybe a graph of that would bring some insights too

[merefield]

Yeah, I was gonna say, we both just broke the widget

[pacharanero]

Just wondering where to put this? Ideas?

It’s definitely one for Ideas. This has huge potential. Like Doodle but for timezones, integrated into Discourse.

[tobiaseigen]

Whoa! I love this… hmm… have you seen that mailchimp has a tool to help scheduling mailers, and sends them at the optimal time for each recipient? They must have some clever way to calculate that based on when people are opening their mailings historically.

Maybe a similar thing could be figured out here - it may be a bit invasive, but why not have a visualization of when during the day people tend to be active, based on historical data, alongside when they say they are active? Perhaps this can be a complement to the who’s online plugin and provide some public facing interfaces e.g. on user cards and user profile pages.

Participating in either could be toggled via a personal setting. And with visibility perhaps limitable to groups?

[pacharanero]

I was really impressed with the OP and was thinking of the next simple step, eg how useful it would be to be able to ‘Show My Local Time’ on my user card or something. Just something that makes it easy for people to see what time zone I am in and if it’s the middle of the night for me locally.

Admittedly we all work at weird hours so a plugin that looks at historical activity averages might be more useful, but harder and more invasive to implement. Whereas ‘Show my local time on my user card’ isn’t all that invasive and is quite a lot easier to do.

[merefield]

have you seen that mailchimp has a tool to help scheduling mailers, and sends them at the optimal time for each recipient?

Wow, that’s cool

how useful it would be to be able to ‘Show My Local Time’ on my user card or something.

Good idea. That could easily be bundled as the same Component.

[merefield]

My goodness, what a co-incidence!:

Discourse-group-timezones

btw, I’ve added the codepen to the OP.

[pacharanero]

Will we be installing this on thePavilion.io?

[merefield]

I’m not sure where though? What do you think? It needs a connector …

I’ve updated the OP with the Codepen so you can run it any time and I’ve updated @Eli’s timezone

[merefield]

So I’ve developed this further so it can better match the Theme here and it’s now a plugin:

Next to turn those names into avatars …

[merefield]

@angus (from Mattermost convo) it’s this i’m working on as side project:

Q: how to connect the data from an AfterModel hook to a component connected via a connector?
specifically the connector is on the discovery route and I want to use it at the top of a defined category page.

Things I’ve tried:

so i’m using discover-list-container-topand trying to pass results of an ajax call through the connector to a component

at this point I believe I’ve worked out that you can only pass through ‘args’

but I can’t seem to attach the bespoke data successfully to anything which carries through

i’ve attempted to do:

api.modifyClass('route:discovery-categories', { afterModel(model) {

but this doesn’t seem to be firing

and also found this code:

initialize(container) {
    const categoryRoutes = [
      'category',
      'parentCategory',
      'categoryNone'
    ];

    categoryRoutes.forEach(function(route){
      var route = container.lookup(`route:discovery.${route}`);
      route.reopen({
      afterModel(model) {

This fires once (which is odd in itself) but also doesn’t appear to shoehorn the data into what is passed to through the connector?

In each case I’m doing something similar to

return ajax('/teamtimezones').then((teamtimezones) => {
          this.setProperties({
            teamtimezones: teamtimezones
          });
          model.set('teamtimezones',teamtimezones);
}

obviously a workaround is loading the data within the component, but that is not best practice as discussed

So how to load the data onto the model (or other) so that it’s included in the data passed through the connector?

Any ideas?

UPDATE:

This seems to cause a failure in application.js after it has exited the afterModel block.

The mere act of re-opening this route seems to do this:

TypeError: err.jqXHR is undefined[application.js:169:22](http://blah/assets/application.js?1576828491.4024224 line 2071 > eval)
error discourse/routes/build-category-route:169
_triggerEvent Ember
_triggerEvent self-hosted:875
Ember 17
run self-hosted:873
success discourse/lib/ajax:112
jQuery 4
fire
fireWith
done
callback

[angus]

Code from discussion

Initializer

      api.modifyClass('route:discovery', {
        afterModel(model) {
          return Ember.RSVP.all([
            this._super(model),
            this.getUserData(model),
          ]); 
        },
        
        getUserData(model) {
          return ajax('/teamtime').then(result => {
            model.set('usertimezones', result.users);
          });
        }
      });

Component

import { getOwner } from 'discourse-common/lib/get-owner';
import { default as computed } from 'discourse-common/utils/decorators';

export default Ember.Component.extend({
  computed()
  model() {
    const controller = getOwner(this).lookup('controller:discovery');
    return controller.get('model');
  }
});

[merefield]

@fzngagan @pacharanero so this is a useful hack to get bespoke server data to any Ember Component but retain the pull within the model instantiation phase.

I’ll share my final code which will include those concepts.

Thanks for your time @angus

[merefield]

This is now a working plugin:

paviliondev/discourse-team-timezones

@angus I don’t appear to have access to thepavilion.io to add this.

@Eli how’s the cold, mind adding this plugin to the site if you have a moment?

PS I won’t add it immediately as currently it breaks the site for anonymous users
(Fixed)

[merefield]

FYI I ended up with this code for injecting the data:

export default {
  name: 'team-timezones-route-edits',
  initialize(container) {
    withPluginApi('0.8.12', (api) => {
      api.modifyClass('route:discovery', {
        afterModel() {
          return Ember.RSVP.all([
            this._super(),
            this.getUserData()
          ]); 
        },

        getUserData() {
          return ajax('/teamtimezones').then(result => {
            this.controllerFor("discovery/topics").set("teamtimezones", result);
          });
        }
      });
    })
  }
}

[tobiaseigen]

This is really cool, @merefield! Very nice work. I installed this to try it out and enabled it for the moderators category - see screenshot below.

Most of my colleagues did not have their timezone set, so I had to manually go in and add their timezone. Not sure why, but there are some timezone issues… in that list, Madrid, Lagos and Nairobi appear to share a time zone with New York. Manila shares a time zone with Los Angeles. Only calcutta (nikhilas) is different. I can’t quite tell if the times are accurate.

The red circled time, 18, seems like it should be the current time but its not clear to me what time zone it represents. It’s not my own time which is about 0900 at the time of the screenshot.

Some random suggestions follow. My reference is the world clock meeting planner website which I use all the time for organizing meetings across time zones… I realize the data being visualized here is a bit different but it might still inspire you to take a look. This link is my bookmark with the time zones I need regularly - see screenshots below.

• plugin github link is incorrect. also plugin cannot be disabled via the UI.
• I’d suggest putting the current user at the top of the list, maybe highlighted in some way.
• would love to see “who’s online” plugin support, to see who is online.
• Would be helpful to be able to sort the list alphabetically as well as by local time. At the same time, it would be nice to see the actual local time for each person. So maybe you could add a local time column containing eg “Sun 1:00 pm” and make name and local time sortable.
• Is the time across the top UTC? If so, indicating that somewhere would be handy.
• it seems to default to Los Angeles - I don’t know if there is a way to indicate “n/a” for those users where time zone is not known. Also, a nudge for those users to update their time zone when they log in would be helpful.
• wouldn’t it be neat if clicking the time column copied the “insert date/time” markdown to the clipboard, with all the time zones indicated?

Generally, I wonder if the category is the right place to display this. Would be nice to see it within the “insert date/time” interface, if enabled, and maybe in the user list, or in the groups directory. Or even as a separate interface similar to cakeday. I think it would be massively useful to be able to see the time zones for any group on the site, not just one group, and it’s also something worth going to when setting up a meeting instead of seeing it all the time.

[merefield]

• plugin github link is incorrect. also plugin cannot be disabled via the UI.

Fixed both see:

FIX: add ability to disable plugin with UI, fixed the url link to repo

• I’d suggest putting the current user at the top of the list, maybe highlighted in some way.
• Would be helpful to be able to sort the list alphabetically as well as by local time. At the same time, it would be nice to see the actual local time for each person. So maybe you could add a local time column containing eg “Sun 1:00 pm” and make name and local time sortable.

The list is always sorted as to who is closer to their midday who are put nearer to the top, but maybe later can add other kinds of sort. This was intended to be super simple out of the gate and also only intended for small lists so its pretty easy to find people.

However, your screenshot above suggests there’s a bug of some kind as the order seems correct for the first half but not the latter half … hmmm.

• would love to see “who’s online” plugin support, to see who is online.

Love this idea.

• Is the time across the top UTC? If so, indicating that somewhere would be handy.

Yep, UTC, sure could put a label. Initially left out as much as possible.

• it seems to default to Los Angeles - I don’t know if there is a way to indicate “n/a” for those users where time zone is not known. Also, a nudge for those users to update their time zone when they log in would be helpful.

A nudge for showing ‘x users were left out as they didn’t have timezones set’? Nice idea.

• wouldn’t it be neat if clicking the time column copied the “insert date/time” markdown to the clipboard, with all the time zones indicated?

Like it. I also thought maybe supporting the event plugin and clicking would cause a new Topic to be created with an even at that hour? @fzngagan not sure how straightfoward that is?

Very useful feedback, thank you!

[merefield]

@tobiaseigen thanks for this testing, I’ve fixed that awful offset bug (introduced when converting to plugin) and added a secondary sort by alphabetic order of username. It’s much more sensible now!

To reiterate: those closest to their midday (modified by the global offset setting in settings) will appear at the top, those furthest away (nearer sleep) will be at the bottom.

To check, you should see an increasingly ‘filled’ box within the red column the nearer you get to top and conversely a lighter box, the closer you get to the bottom.

Given this is not about the reader, it’s more about checking other people, it’s not intended to highlight your situation, though perhaps I could somehow highlight one’s row if it exists, if not changing it’s order … hmmmmm, However, if it’s late in the evening, you should already know about it, so it’s not crucial information imho.

FIX: hours offset calculation, secondary sort by username

As far as location of the dashboard is concerned, it may make sense to give it an optional place elsewhere too, e.g. alongside the User Map:

However, the reason I prioritised Category was that I felt it might be nice to have it on the Members category at the top. This would highlight the list of Members as well as give a feel for where they were and if they might be online. In other words the use case was very much biased towards its use on Pavilion as opposed to a general use case.

It’s probably not unreasonable to support both sometime in the near future.

PS Blimey you have a lot of moderators!!

[tobiaseigen]

Cool! Thanks for quick action. Like the direction and appreciate the bug fixes, and agree with your responses above. time zones looks correct now, with me at the top because it’s the middle of my day. The “secondary sort” seems to be in reverse order, though? Like the idea.

PS Blimey you have a lot of moderators!!

Many of these people just have access because of their role, but are not really doing anything on the forum. We like to be able to whisper to folks, e.g. on the comms team to let them know about a topic worth featuring on social media.

Maybe if it remains on the category view, which I support, you could make the list expandable for more than say 5 people, or have a toggle to open/close it like a banner? It will be a distraction if it’s always present unless we just use it for a category to plan meetings in which case it makes sense to always see it.

Like it. I also thought maybe supporting the event plugin and clicking would cause a new Topic to be created with an even at that hour? @fzngagan not sure how straightfoward that is?

This would be great too!

Another idea would be to display this time zones chart on the post menu somehow, perhaps within the event and ‘insert date/time’ modal. That way we’d see it at the moment we need it.