chg: [app:user-activity] Replaced ApexChart heatmap by homemade heatmap
This commit is contained in:
Sami Mokaddem
parent
2cd4820f1c
commit
d64a6b5652
8 changed files with 69 additions and 127 deletions
1
dist/assets/index-CrX71Als.css
vendored
Normal file
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
1
dist/assets/index-XAPeN3Gs.css
vendored
1
dist/assets/index-XAPeN3Gs.css
vendored
File diff suppressed because one or more lines are too long
4
dist/index.html
vendored
4
dist/index.html
vendored
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue