|
| 1 | +<template> |
| 2 | + <div class="settings-item"> |
| 3 | + <label class="setting-header"> {{ t('timeChart.message') }} </label> |
| 4 | + <p class="description">{{ t('timeChartDescription.message') }}</p> |
| 5 | + </div> |
| 6 | + <div class="chart"> |
| 7 | + <Bar :data="data" :options="options" v-if="isLoaded" /> |
| 8 | + </div> |
| 9 | +</template> |
| 10 | + |
| 11 | +<script lang="ts"> |
| 12 | +export default { |
| 13 | + name: 'TimeIntervalChart', |
| 14 | +}; |
| 15 | +</script> |
| 16 | + |
| 17 | +<script lang="ts" setup> |
| 18 | +import { Bar } from 'vue-chartjs'; |
| 19 | +import { useI18n } from 'vue-i18n'; |
| 20 | +import { |
| 21 | + Chart as ChartJS, |
| 22 | + Title, |
| 23 | + Tooltip, |
| 24 | + Legend, |
| 25 | + BarElement, |
| 26 | + LinearScale, |
| 27 | + CategoryScale, |
| 28 | +} from 'chart.js'; |
| 29 | +import { onMounted, ref } from 'vue'; |
| 30 | +import { injecStorage } from '../storage/inject-storage'; |
| 31 | +import { StorageDeserializeParam } from '../storage/storage-params'; |
| 32 | +import { TimeInterval } from '../entity/time-interval'; |
| 33 | +import { todayLocalDate } from '../utils/date'; |
| 34 | +import { convertHoursToTime, convertStringTimeIntervalToSeconds } from '../utils/converter'; |
| 35 | +
|
| 36 | +const { t } = useI18n(); |
| 37 | +
|
| 38 | +type DataForChart = { |
| 39 | + summary: number; |
| 40 | + hour: number; |
| 41 | + domains: DomainsInterval[]; |
| 42 | +}; |
| 43 | +
|
| 44 | +type DomainsInterval = { |
| 45 | + hour: number; |
| 46 | + summary: number; |
| 47 | + domain: string; |
| 48 | +}; |
| 49 | +
|
| 50 | +const storage = injecStorage(); |
| 51 | +
|
| 52 | +ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend); |
| 53 | +
|
| 54 | +const options = ref<any>(); |
| 55 | +const data = ref<any>(); |
| 56 | +const isLoaded = ref<boolean>(); |
| 57 | +
|
| 58 | +const objects: DataForChart[] = []; |
| 59 | +const hours: number[] = []; |
| 60 | +
|
| 61 | +isLoaded.value = false; |
| 62 | +
|
| 63 | +function convertTimIntervalToObject(timeInterval: string, domain: string): DomainsInterval | null { |
| 64 | + const array = timeInterval.split('-'); |
| 65 | + const time1 = array[0].split(':'); |
| 66 | + const time2 = array[1].split(':'); |
| 67 | + //добавить подсчет, если в разных часах интервал |
| 68 | + if (time1[0] == time2[0]) { |
| 69 | + return { |
| 70 | + hour: Number(time1[0]), |
| 71 | + summary: |
| 72 | + convertStringTimeIntervalToSeconds(array[1]) - convertStringTimeIntervalToSeconds(array[0]), |
| 73 | + domain: domain, |
| 74 | + }; |
| 75 | + } |
| 76 | + return null; |
| 77 | +} |
| 78 | +
|
| 79 | +function fillData(timeIntervalList: TimeInterval[]) { |
| 80 | + const items = timeIntervalList?.filter(x => x.day == todayLocalDate()); |
| 81 | + const domains = items.map(x => x.domain); |
| 82 | + const result: any[] = []; |
| 83 | + const intervalsObj: DomainsInterval[] = []; |
| 84 | + domains.forEach(domain => { |
| 85 | + const intervals = items.filter(x => x.domain == domain); |
| 86 | + intervals.forEach(array => { |
| 87 | + const i = array.intervals; |
| 88 | + i.forEach(time => { |
| 89 | + const obj = convertTimIntervalToObject(time, domain); |
| 90 | + if (obj != null) { |
| 91 | + const existDomain = intervalsObj.find(x => x.domain == domain && x.hour == obj.hour); |
| 92 | + if (existDomain != undefined) { |
| 93 | + existDomain.summary += obj.summary; |
| 94 | + } else intervalsObj.push(obj); |
| 95 | + } |
| 96 | + }); |
| 97 | + }); |
| 98 | + }); |
| 99 | +
|
| 100 | + const tempArray: number[] = []; |
| 101 | + for (let index = 0; index < 24; index++) { |
| 102 | + const obj = objects.find(x => x.hour == index); |
| 103 | + const intervalObj = intervalsObj.filter(x => x.hour == index); |
| 104 | + const summary = |
| 105 | + intervalObj.length == 0 ? 0 : intervalObj.map(x => x.summary).reduce((a, b) => a + b); |
| 106 | + if (obj == undefined) { |
| 107 | + const newObj = { |
| 108 | + summary: summary, |
| 109 | + hour: index, |
| 110 | + domains: intervalObj, |
| 111 | + }; |
| 112 | + objects.push(newObj); |
| 113 | + } else { |
| 114 | + obj.summary += summary; |
| 115 | + intervalObj.forEach(element => { |
| 116 | + obj.domains.push(element); |
| 117 | + }); |
| 118 | + } |
| 119 | +
|
| 120 | + tempArray.push(0); |
| 121 | + } |
| 122 | +
|
| 123 | + objects.forEach(obj => { |
| 124 | + const emptyArray: number[] = Object.assign([], tempArray); |
| 125 | + emptyArray[obj.hour] = Number((obj.summary / 60).toFixed(4)); |
| 126 | + result.push({ |
| 127 | + backgroundColor: ['#5668e2'], |
| 128 | + data: emptyArray, |
| 129 | + }); |
| 130 | + }); |
| 131 | +
|
| 132 | + return result; |
| 133 | +} |
| 134 | +
|
| 135 | +async function buildChart() { |
| 136 | + const timeIntervalList = (await storage.getDeserializeList( |
| 137 | + StorageDeserializeParam.TIMEINTERVAL_LIST, |
| 138 | + )) as TimeInterval[]; |
| 139 | + for (let index = 0; index <= 23; index++) { |
| 140 | + hours.push(index); |
| 141 | + } |
| 142 | + let minutes: number[] = []; |
| 143 | + for (let index = 1; index < 60; index++) { |
| 144 | + minutes.push(index); |
| 145 | + } |
| 146 | +
|
| 147 | + const dataForChart = fillData(timeIntervalList); |
| 148 | + data.value = { |
| 149 | + labels: hours, |
| 150 | + datasets: dataForChart, |
| 151 | + }; |
| 152 | +
|
| 153 | + options.value = { |
| 154 | + responsive: true, |
| 155 | + maintainAspectRatio: false, |
| 156 | + plugins: { |
| 157 | + legend: { |
| 158 | + position: 'none', |
| 159 | + }, |
| 160 | + tooltip: { |
| 161 | + callbacks: { |
| 162 | + label: function (context: any) { |
| 163 | + return `${context.label}:00-${Number(context.label) + 1}:00 ${convertHoursToTime( |
| 164 | + context.raw, |
| 165 | + )}`; |
| 166 | + }, |
| 167 | + }, |
| 168 | + }, |
| 169 | + }, |
| 170 | + scales: { |
| 171 | + y: { |
| 172 | + min: 0, |
| 173 | + max: 60, |
| 174 | + ticks: { |
| 175 | + stepSize: 5, |
| 176 | + }, |
| 177 | + }, |
| 178 | + x: { |
| 179 | + stacked: true, |
| 180 | + min: 0, |
| 181 | + max: 23, |
| 182 | + }, |
| 183 | + }, |
| 184 | + }; |
| 185 | + isLoaded.value = true; |
| 186 | +} |
| 187 | +
|
| 188 | +onMounted(async () => await buildChart()); |
| 189 | +</script> |
| 190 | + |
| 191 | +<style scoped> |
| 192 | +.chart { |
| 193 | + height: 350px; |
| 194 | + margin: auto; |
| 195 | + width: 80%; |
| 196 | + margin: 20px; |
| 197 | +} |
| 198 | +</style> |
0 commit comments