web-activity-time-tracker/src/components/ByDaysChart.vue at v2.0.19 · Mu-L/web-activity-time-tracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<template>
  <div class="chart">
    <Bar :data="data" :options="options" />
  </div>
</template>

<script lang="ts">
export default {
  name: 'BarChart',
};
</script>

<script lang="ts" setup>
import { Bar } from 'vue-chartjs';
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
} from 'chart.js';
import { convertSummaryTimeToString } from '../utils/converter';
import { TabListByDays } from '../dto/tabListSummary';
import { ref, watch } from 'vue';
import { log } from '../utils/logger';

const props = defineProps<{
  data: TabListByDays;
}>();

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

const labelsForChart = ref<string[]>();
const dataForChart = ref<number[]>();
const data = ref<any>();
const options = ref<any>();

watch(
  () => props.data,
  () => {
    refreshChart();
  },
);

refreshChart();

function refreshChart() {
  labelsForChart.value = props.data.days.map(x => x.day);
  dataForChart.value = props.data.days.map(x => x.time);
  const tickStep = Math.round(dataForChart.value[0] / 5 / 600) * 600;

  data.value = {
    labels: labelsForChart.value,
    datasets: [
      {
        backgroundColor: ['#5668e2'],
        data: dataForChart.value,
      },
    ],
  };

  options.value = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: 'none',
      },
      legendDistance: {
        padding: 50,
      },
      tooltip: {
        callbacks: {
          label: function (context: any) {
            return convertSummaryTimeToString(context.raw);
          },
        },
      },
    },
    scales: {
      y: {
        ticks: {
          stepSize: tickStep,
          callback: function (value: any, index: number, ticks: number) {
            return convertSummaryTimeToString(value);
          },
        },
      },
    },
  };
}
</script>

<style scoped>
.chart {
  height: 100%;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>