MISP/SkillAegis
MISP/SkillAegis
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

44
dist/assets/index-DYjX_zK2.js → dist/assets/index-D2WYd2RY.js vendored
View file

File diff suppressed because one or more lines are too long

1
dist/assets/index-XAPeN3Gs.css vendored
View file

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>

5
exercise.py
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

135
src/components/LiveLogsUserActivityGraph.vue
View file

@ -9,7 +9,7 @@
const bufferSize = computed(() => userActivityConfig.value.activity_buffer_size) const bufferSize = computed(() => userActivityConfig.value.activity_buffer_size)
const bufferSizeMin = computed(() => userActivityConfig.value.timestamp_min) const bufferSizeMin = computed(() => userActivityConfig.value.timestamp_min)
const chartInitSeries = computed(() => Array.from(Array(bufferSize.value)).map(() => 0)) const chartInitSeries = computed(() => Array.from(Array(bufferSize.value)).map(() => 0))
const hasActivity = computed(() => userActivity.value.length != 0) const hasActivity = computed(() => userActivity.value.length != 0)
const chartSeries = computed(() => { const chartSeries = computed(() => {
return !hasActivity.value ? chartInitSeries.value : activitySeries.value return !hasActivity.value ? chartInitSeries.value : activitySeries.value
@ -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>

1
src/socket.js
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 {

5
tailwind.config.js
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: {