Comments (2)
I created you a small PoC that you can use as a basis.
Thats how it looks for me currently:
<table>
<thead>
<tr>
<th></th>
<template v-for="risk in ['negligible', 'low']">
<th class="capitalize">{{ risk }}</th>
</template>
</tr>
</thead>
<tbody>
<tr v-for="probability in ['frequent', 'probable']">
<th class="capitalize">{{ probability }}</th>
<td :class="'heatmap-negligible-' + probability">
<template v-for="finding in findings.filter(obj => obj.severity.value === 'low')">
{{ finding.title }}
</template>
</td>
<td :class="'heatmap-low-' + probability">
</td>
</tr>
</tbody>
</table>
You need to add your own classifications to the arrays (to risk in ['negligible', 'low']
and probability in ['frequent', 'probable']
).
You must expand the filtering logic (finding in findings.filter(obj => obj.severity.value === 'low')
) by your own attributes, e.g. to (finding in findings.filter(obj => obj.severity.value === 'low' && obj.probability.value === 'low' )
.
And you must define the background colors for your cells in CSS:
.heatmap-negligible-frequent {
background-color: #78b64e !important;
}
.heatmap-negligible-probable {
background-color: #477329 !important;
}
.heatmap-low-frequent {
background-color: #ebfb3d !important;
}
.heatmap-low-probable {
background-color: #78b64e !important;
}
...
Additionally the "capitalize" class I used:
.capitalize {
text-transform: capitalize;
}
from sysreptor.
Thanks for your time!
I managed to do what I wanted to do by using your example and adapting it a little.
from sysreptor.
Related Issues (20)
- Image button not consistently present in Markdown editor HOT 6
- Users page accessible without superuser mode HOT 1
- Cookies: stricter settings and conflicts with other apps HOT 4
- reportcreator_api.archive.crypto.base.CryptoError: Either a key or a multiple available keys must be given HOT 3
- reptor burp error not upload note or templet HOT 25
- Loading additional templates error HOT 2
- update.sh breaks execute right / crontab docu update HOT 3
- Expected behavior after export/import to a new Sysreptor instance? HOT 2
- Header Issues // Vue Utilization HOT 3
- "Could not establish WebSocket connection" HOT 1
- "Could not establish WebSocket connection" - improve update.sh script HOT 1
- Updated from 2024.15 to 2024.55, caused Design template to stop working HOT 5
- stuck at pid 26 HOT 2
- Languagetool installation fails because of missing slash in Dockerfile HOT 2
- Getting ERROR while publishing the report HOT 1
- Feature Request: Store Websocket Fallback Option
- Inconsistent spell checking HOT 1
- Link instructions how to set BACKUP_KEY
- Sorting Finding Templates causes the application to crash HOT 1
- failed to register layer: failed to Lchown "/dev/tty" HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sysreptor.