Where to find the timeline barchart code?

thf · May 31, 2022, 2:49pm

I would like to find the code that makes the timeline barchart, as seen on the activities screen, so I can adapt it for personal use.

Apologies if this is a dumb question but its my first time trying to work with an open source project of this scale, and so-far I haven’t been able to find it.

For context:
I am looking to track my time, preferably by category for personal automatic analysis. The timeline bar chart hold effectiveley all the data I want (categories, filtered by afk, resolution of an hour)
So I figured if i can find that code, I can copy what works rather than having to reinvent the wheel by recreating a categories filter.

johan-bjareholt · June 1, 2022, 9:15pm

The visualization can be found here:

github.com

ActivityWatch/aw-webui/blob/master/src/visualizations/TimelineBarChart.vue

<script lang="ts">
import _ from 'lodash';
import { ChartOptions } from 'chart.js';
import { Bar } from 'vue-chartjs';
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { get_hour_offset } from '~/util/time';

function hourToTick(hours: number): string {
  if (hours > 1) {
    return `${hours}h`;
  } else {
    if (hours == 1) {
      return '1h';
    } else if (hours == 0) {
      return '0';
    } else {
      return Math.round(hours * 60) + 'm';
    }
  }
}

This file has been truncated. show original

The actual data it uses however, is shared between multiple visualizations and is a bit complex:

github.com

ActivityWatch/aw-webui/blob/360a1dc4b6432b03374210637b5a9df1545c6268/src/queries.ts#L47

    
      
          }
          
          
function isDesktopParams(object: any): object is DesktopQueryParams {
            return 'bid_window' in object;
          }
          
          
function isAndroidParams(object: any): object is AndroidQueryParams {
            return 'bid_android' in object;
          }
          
          
// Constructs a query that returns a fully-detailed list of events from the merging of several sources (window, afk, web).
          // Performs:
          //  - AFK filtering (if filter_afk is true)
          //  - Categorization (if classes specified)
          //  - Filters by category (if filter_classes set)
          // Puts it's results in `events` and `not_afk` (if not_afk available for platform).
          export function canonicalEvents(params: DesktopQueryParams | AndroidQueryParams): string {
            // Needs escaping for regex patterns like '\w' to work (JSON.stringify adds extra unecessary escaping)
            const classes_str = JSON.stringify(params.classes).replace(/\\\\/g, '\\');
            const cat_filter_str = JSON.stringify(params.filter_classes);