|
| 1 | +<template lang="pug"> |
| 2 | +div |
| 3 | + div(style="text-align: center") |
| 4 | + | Your total score today is: |
| 5 | + div(:style="'font-size: 2em; color: ' + (score >= 0 ? '#0A0' : '#F00')") |
| 6 | + | {{score >= 0 ? '+' : ''}}{{ (Math.round(score * 10) / 10).toFixed(1) }} |
| 7 | + div.small.text-muted |
| 8 | + | ({{score_productive_percent.toFixed(1)}}% productive) |
| 9 | + hr |
| 10 | + div |
| 11 | + b Top productive: |
| 12 | + div.mt-2(v-for="cat in top_productive") |
| 13 | + div.d-flex |
| 14 | + div |
| 15 | + div |
| 16 | + | {{cat.data.$category.slice(-1)[0]}} |
| 17 | + div(style="font-size: 0.7em; color: #666;") |
| 18 | + | {{cat.data.$category.slice(0, -1).join(" > ")}} |
| 19 | + div.ml-auto |
| 20 | + span(style="font-size: 1.2em; color: #0A0") |
| 21 | + | +{{ (Math.round(cat.data.$total_score * 10) / 10).toFixed(1) }} |
| 22 | + hr |
| 23 | + div |
| 24 | + b Top distracting: |
| 25 | + div.mt-2(v-for="cat in top_distracting") |
| 26 | + div.d-flex |
| 27 | + div |
| 28 | + div |
| 29 | + | {{cat.data.$category.slice(-1)[0]}} |
| 30 | + div(style="font-size: 0.7em; color: #666;") |
| 31 | + | {{cat.data.$category.slice(0, -1).join(" > ")}} |
| 32 | + div.ml-auto |
| 33 | + span(style="font-size: 1.2em; color: #F00") |
| 34 | + | {{ (Math.round(cat.data.$total_score * 10) / 10).toFixed(1) }} |
| 35 | +</template> |
| 36 | + |
| 37 | +<script> |
| 38 | +import _ from 'lodash'; |
| 39 | +import { useActivityStore } from '~/stores/activity'; |
| 40 | +
|
| 41 | +// TODO: Maybe add a "Category Tree"-style visualization? |
| 42 | +
|
| 43 | +export default { |
| 44 | + name: 'aw-score', |
| 45 | + props: { |
| 46 | + fields: Array, |
| 47 | + }, |
| 48 | + computed: { |
| 49 | + categories_with_score: function () { |
| 50 | + // FIXME: Does this get all category time? Or just top ones? |
| 51 | + const top_categories = useActivityStore().category.top; |
| 52 | + return _.map(top_categories, cat => { |
| 53 | + cat.data.$total_score = (cat.duration / (60 * 60)) * cat.data.$score; |
| 54 | + return cat; |
| 55 | + }); |
| 56 | + }, |
| 57 | + score: function () { |
| 58 | + return _.sum(_.map(this.categories_with_score, cat => cat.data.$total_score)); |
| 59 | + }, |
| 60 | + score_productive_percent() { |
| 61 | + // Compute the percentage of time spent on productive activities (score > 0) |
| 62 | + const total_time = _.sumBy(this.categories_with_score, cat => cat.duration); |
| 63 | + const productive_time = _.sumBy( |
| 64 | + _.filter(this.categories_with_score, cat => cat.data.$total_score > 0), |
| 65 | + cat => cat.duration |
| 66 | + ); |
| 67 | + return (productive_time / total_time) * 100; |
| 68 | + }, |
| 69 | + top_productive: function () { |
| 70 | + return _.sortBy( |
| 71 | + _.filter(this.categories_with_score, cat => cat.data.$total_score > 0.1), |
| 72 | + c => -c.data.$total_score |
| 73 | + ); |
| 74 | + }, |
| 75 | + top_distracting: function () { |
| 76 | + return _.sortBy( |
| 77 | + _.filter(this.categories_with_score, cat => cat.data.$total_score < -0.1), |
| 78 | + c => c.data.$total_score |
| 79 | + ); |
| 80 | + }, |
| 81 | + }, |
| 82 | +}; |
| 83 | +</script> |
0 commit comments