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

View file

@ -278,8 +278,9 @@ def get_completion_for_users():
for user_id in completion_per_user.keys(): for user_id in completion_per_user.keys():
completion_per_user[int(user_id)][exercise_status['uuid']][task['uuid']] = False completion_per_user[int(user_id)][exercise_status['uuid']][task['uuid']] = False
for entry in task['completed_by_user']: for entry in task['completed_by_user']:
user_id = entry['user_id'] user_id = int(entry['user_id'])
completion_per_user[int(user_id)][exercise_status['uuid']][task['uuid']] = entry 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 return completion_per_user

View file

@ -17,114 +17,51 @@
const activitySeries = computed(() => { const activitySeries = computed(() => {
const data = userActivity.value[props.user_id] === undefined ? chartInitSeries.value : userActivity.value[props.user_id] 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(() => { function getPalleteIndexFromValue(value) {
return { for (let palleteIndex = 0; palleteIndex < colorRanges.length; palleteIndex++) {
chart: { const colorRangeValue = colorRanges[palleteIndex];
height: 12, if (value <= colorRangeValue) {
width: 224, return darkModeEnabled.value ? colorPalleteIndexDark[palleteIndex] : colorPalleteIndexLight[palleteIndex]
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,
},
} }
}) }
</script> </script>
<template> <template>
<span <span
class="h-3 w-52" class="h-3 w-56"
:title="`Activity over ${bufferSizeMin}min`" :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> </span>
</template> </template>

View file

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

View file

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