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">
|
<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>
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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: {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue