Time Tracking Visualization

[bytrangle]

Another idea in the theme of "using what we already have".

You can't improve what you don't measure.

However, it is possible to measure a great deal, but you're unable to derive valuable insights because you can't visualize thousands of lines of time logs. Some ideas of visualize how one spends their time:

• timeline / Gant chart: span of time for each task
  

• calendar heatmap: the bolder the color, the more time tracked -> hardworking/lazy/workaholic -> maintain or curb it
  

• pie chart for seeing percentage of time spent on different task during a day.

If you like time visualization, please chime in! I can find time to work on them if this is expected in SP.

[johannesjo]

I very much like the suggestions! Especially the second one! Thank you!

In case anyone wants to tackle this: We are already using the chart.js lib:
https://www.chartjs.org/docs/latest/samples/other-charts/bubble.html

[bytrangle]

Hi again. Just want to update that I've started working on this feature. Another name for the heatmap is matrix chart, and it is not natively supported in chart.js. So I had to look for a plugin and this is the only plugin that does just that with active maintenance.

However, there's a catch: this plugin supports chart.js >= 3.0, while Super Productivity is also using an Angular directive for chart.js that supports version 2.0. Simply updating ng2-charts doesn't help, because the latest release support chart.js 4.0, which will require updating Angular core and all the related packages! So I had to look for newer versions of ng2-charts that supports just chart.js 3.0.

After installing, I had to rewrite some parts of the Metric component that uses ng2-charts because many properties or data types have changed.

Where in the UI of Super Productivity can I see the rendering of ng2-charts? I want to make sure all the charts are rendered as they should be.

It took forever, but now I finally got to work on matrix chart. And out of curiosity, will you ever consider d3.js?

[johannesjo]

I don't envy you. These migrations are nasty sometimes. :/ Thank you very much for this!

The metrics page should be the only place where charts are used at the moment.

[bytrangle]

So I've read the backup file for SP and it seems like the data format is not suited for displaying the number of hours worked every day?
For example, I'd like to visualize the number of hours tracked every day for the last 30 days. Here is the prototype:

Figma link

In order to display that, we need to know:

• start time each day: Out of all the tasks recorded for particular day, look for the earliest time the user clicks the Start button)
• end time each day: Same method, but look for the last time of the day when the user clicks Stop).

However, the only relevant info I can find in the backup file is task object but it only stores the total number of hours every day. It doesn't record when a task starts and ends so I think it will be impossible to do the chart above.

What do you think?

I like to do the chart above as it is good for motivation and short-term insight, but if it's not possible, I'll try doing the yearly heatmap as shown in the first post.

And there are two similar properties, task and taskArchive. How are they different?

[johannesjo]

What do you think?

You are are correct about this. The time tracking model only considers days, which allows to limit the amount of data that is stored, which in turn is important for syncing. This is unlikely to change.

And there are two similar properties, task and taskArchive. How are they different?

This is to separate the frequently accessed stuff from the vast amount of tasks that can accumulate. Both are stored in almost similar fashion into indexed db (and can be accessed via the persistence service from there), but only task is loaded into the store of the app.

Tasks are put into the archive when they are done when finishing the day.

The start and end times each day are saved on a project level as a simple timestamp.

[bytrangle]

It may be a stupid question, but have you considered using a separate database for time entries (not tasks)? They all have the same fields (start time, end time, task they belong to, project, tags).

[one3711]

The first one is gonna make it even better alternative for Tick Tick

[one3711]

Yes

[bytrangle]

How should the projects be displayed? I haven't used Ticktick in a long time.

[one3711]

Neither have I. But the main thing I like is that you can adjust the duration of the tasks.

[bytrangle]

I'm not sure if adjusting the duration of the task is going to be implemented. Tasks in Tick Tick appear to have only start date and end date. Dragging a task in the timeline simply affect these two properties.
Takss in SP, on the other hand, have another property timeSpentOnDay, which records the amount of time spent on the task for each day the task spans. If we're to change the duration of the tasks, what's going to happen to the timeSpentOnDay property? That's beyond the scope of the feature of "time tracking visualization".
For now, if I ever make a timeline chart from tasks, it's going to be for analytics only, similar to Toggl.

[one3711]

Ah, got it. When I switched from TickTick to SP this was the only feature I missed. It will still help for analysis.

[bytrangle]

@johannesjo Here is a dry run of a Gant chart from real Super Productivity data.

It opens up a few more challenges that I hadn't thought of:

• A Gant chart for a whole year will likely look like a hot mess. And Gant chart from last year is not that useful anyway. What is the ideal time range for a Gant chart?
• Should a Gant chart be used to display standalone tasks or tasks that belong to a project? Gant chart is most commonly used to track project timeline. And I understand that many users have a lot of chore tasks in SP. Chores are probably not that important in Gant charts.

[bytrangle]

To be honest, I've never clicked the three-dot icon of Today and never noticed the "Metrics" function. For me, there is something "off" when nesting "Metrics" inside a contextual menu:

• Context menu is only invoked when specified by users. Metrics is generally not an option commonly associated with "Today task". How do you order something if you don't know that they exist?
• Context menu usually only includes relevant, frequently used actions related to the current context. Metrics is advanced and it is its own component.
• Usually, commands in context menus are also available from the application's main menu to give users an additional way to use the actions. SP doesn't have a main menu, does it? Because the context menu is hidden by default, users may not know if it's available, or how to access it.

All of these may lead to utilization of "metrics", which is such a shame.

If you ever add submenus to contextual menus, I think it's quite important that the submenu actions should be to the point. For example, context menu in Excel has submenu "Paste special", which opens further actions: paste values only, paste formats only etc.

And submenus are easy to disappear if the cursor moves away from the primary list item (happens a lot to me, must be old age:)) or if the user clicks outside the context menu (also happens a lot to non-digital natives :)). So we may gain in minimalism, but we lose in usability and accessibility.

Off topic, but currently, is the "Metrics" button supposed to display something when clicked? I got nothing.

If metricService has no data, that message will be displayed. But why metricService has no data? There must be a config I missed.

If there is "Metric" option for "Today", then should there be "Metric" option for different projects? Because today is today and "metrics" for today should only display charts within the span of "today".

[bytrangle]

I don't see what can be the challenges of implementing a dedicated "View" button like this:

[johannesjo]

The metrics feature has its origin with the little questionaire at the end of the day, which can be evoked for each tag and project separately. This is why you can show metrics via the context menu, because they exist for each project/tag. Following this logic the natural place to put the other stuff was the context menu also for today since logically it acts as a tag. I agree this has some disadvantages, but it also has some advantages. UI wise I like to keep stuff focused on what the app should mainly do, which is to provide an efficient interface to plan and track your daily tasks. Analyzing metrics goes a bit beyond that.

There is currently also a technical limitation since some of the data is loaded on a project/tag level. Some metrics data is only available when changing the current tag or project. Hence this is a big subject on its own.

Would you be ok, if we'd move the design of the menus to a separate discussion?

[bytrangle]

Alright.

[johannesjo]

#3158

[Jagdfalke]

Well, a Gantt chart (yes, two 't's, named after Henry Laurence Gantt) is a project management tool. It is used to show project activities over time. Usually the chart is used on a larger scale. Activities are spread over days, weeks or months. In my opinion, it is not suitable for visualising tracked time in the past.

[bytrangle]

It's true that that's the nature of Gantt chart. However, if we don't call it Gantt chart and there is actual user demand for visualizing past actions in a timeline view, I don't see why not? Now I've realized there is a reason Notion simply calls the Kanban board and the Gantt chart "Board" and "Timeline". Let the users decide how they want to make use of their data. We just take the data out of a wordy Json file and make it a bit easier for them.

For me, a master procrastinator who often takes on too many tasks for my own good, being able to see how long a task/project has sat really motivates me to clean them up.

[cocoonkid]

Came here to ask about this :-) Happy it is already being thought about.

How's the current Progress ? Any updated on this ? Much love!

[cocoonkid]

Thanks for the update! highly appreciated!

[johannesjo]

Yes thank you very much. Most of all for the work and thought you put into it. Sorry to hear that you don't want to continue, though I can understand your decision.

[cocoonkid]

I'm learning typescript and might take over. Though I only need/want that calendar heatmap.

[bytrangle]

Though I only need/want that calendar heatmap.

That's what gets tricky. The heatmap is about displaying time spent each day using colors. However, the time tracking in SP is not conducive to this type of display. IIRC, it only saves the time spent on each task. The UI may display "Working today: 8h", but that information is not saved to the backup file.
So essentially, SP is more of a to-do app than a time tracking app like Toggl, Harvest etc. You'll probably have to do a lot of data wrangling to compute the total hours worked for a day.

[johannesjo]

There is https://echarts.apache.org/examples/en/index.html#chart-type-heatmap

But it is a hell of a big dependency to add. I'd rather avoid it. But maybe the code helps with implementing it.