chg: [app:user-activity] Replaced ApexChart heatmap by homemade heatmap

This commit is contained in:
Sami Mokaddem 2024-07-10 12:15:23 +02:00
parent 2cd4820f1c
commit d64a6b5652
8 changed files with 69 additions and 127 deletions

1
dist/assets/index-CrX71Als.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View file

@ -5,8 +5,8 @@
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<script type="module" crossorigin src="/assets/index-DYjX_zK2.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-XAPeN3Gs.css">
<script type="module" crossorigin src="/assets/index-D2WYd2RY.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CrX71Als.css">
</head>
<body>
<div id="app"></div>

View file

@ -278,8 +278,9 @@ def get_completion_for_users():
for user_id in completion_per_user.keys():
completion_per_user[int(user_id)][exercise_status['uuid']][task['uuid']] = False
for entry in task['completed_by_user']:
user_id = entry['user_id']
completion_per_user[int(user_id)][exercise_status['uuid']][task['uuid']] = entry
user_id = int(entry['user_id'])
if user_id in completion_per_user: # Ensure the user_id is known in USER_ID_TO_EMAIL_MAPPING
completion_per_user[user_id][exercise_status['uuid']][task['uuid']] = entry
return completion_per_user

View file

@ -9,7 +9,7 @@
const bufferSize = computed(() => userActivityConfig.value.activity_buffer_size)
const bufferSizeMin = computed(() => userActivityConfig.value.timestamp_min)
const chartInitSeries = computed(() => Array.from(Array(bufferSize.value)).map(() => 0))
const hasActivity = computed(() => userActivity.value.length != 0)
const chartSeries = computed(() => {
return !hasActivity.value ? chartInitSeries.value : activitySeries.value
@ -17,114 +17,51 @@
const activitySeries = computed(() => {
const data = userActivity.value[props.user_id] === undefined ? chartInitSeries.value : userActivity.value[props.user_id]
return [{data: Array.from(data)}]
return data
})
const colorRanges = [1, 2, 3, 4, 5, 1000]
const colorRanges = [0, 1, 2, 3, 4, 5, 1000]
const palleteColor = 'blue'
const colorPalleteIndexDark = [
'950',
'900',
'700',
'600',
'500',
'400',
'300',
]
const colorPalleteIndexLight = [
'50',
'100',
'300',
'400',
'500',
'600',
'700',
]
const chartOptions = computed(() => {
return {
chart: {
height: 12,
width: 224,
type: 'heatmap',
sparkline: {
enabled: true
},
animations: {
enabled: false,
easing: 'easeinout',
speed: 200,
},
},
dataLabels: {
enabled: false,
style: {
fontSize: '10px',
fontWeight: '400',
}
},
plotOptions: {
heatmap: {
radius: 2,
enableShades: false,
shadeIntensity: 0.5,
reverseNegativeShade: true,
distributed: false,
useFillColorAsStroke: false,
colorScale: {
ranges: [
{
from: 0,
to: colorRanges[0],
color: darkModeEnabled.value ? '#1e3a8a' : '#bfdbfe',
},
{
from: colorRanges[0] + 1,
to: colorRanges[1],
color: darkModeEnabled.value ? '#1d4ed8' : '#93c5fd',
},
{
from: colorRanges[1] + 1,
to: colorRanges[2],
color: darkModeEnabled.value ? '#2563eb' : '#60a5fa',
},
{
from: colorRanges[2] + 1,
to: colorRanges[3],
color: darkModeEnabled.value ? '#3b82f6' : '#3b82f6',
},
{
from: colorRanges[3] + 1,
to: colorRanges[4],
color: darkModeEnabled.value ? '#60a5fa' : '#2563eb',
},
{
from: colorRanges[4] + 1,
to: colorRanges[5],
color: darkModeEnabled.value ? '#93c5fd' : '#1d4ed8',
},
],
// inverse: false,
min: 0,
max: 1000
},
},
},
states: {
hover: {
filter: {
type: 'none',
}
},
active: {
filter: {
type: 'none',
}
},
},
grid: {
show: false,
},
legend: {
show: true,
},
stroke: {
width: 0,
},
tooltip: {
enabled: false,
},
function getPalleteIndexFromValue(value) {
for (let palleteIndex = 0; palleteIndex < colorRanges.length; palleteIndex++) {
const colorRangeValue = colorRanges[palleteIndex];
if (value <= colorRangeValue) {
return darkModeEnabled.value ? colorPalleteIndexDark[palleteIndex] : colorPalleteIndexLight[palleteIndex]
}
}
})
}
</script>
<template>
<span
class="h-3 w-52"
class="h-3 w-56"
:title="`Activity over ${bufferSizeMin}min`"
>
<apexchart type="heatmap" height="12" width="224" :options="chartOptions" :series="chartSeries"></apexchart>
<span
v-for="(value, i) in chartSeries"
:key="i"
:class="[`inline-block h-3 rounded-[1px] mr-px`, `bg-${palleteColor}-${getPalleteIndexFromValue(value)}`]"
:style="`width: ${parseInt((224 - chartSeries.length) / chartSeries.length)}px`"
></span>
</span>
</template>

View file

@ -98,7 +98,6 @@ export function toggleApiQueryMode(enabled) {
export function remediateSetting(setting) {
sendRemediateSetting(setting, (result) => {
console.log(result);
if (result.success) {
state.diagnostic['settings'][setting].value = state.diagnostic['settings'][setting].expected_value
} else {

View file

@ -4,6 +4,11 @@ export default {
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
safelist: [
{
pattern: /bg-+/, // Includes bg of all colors and shades
},
],
theme: {
extend: {
transitionProperty: {