mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-21 21:33:18 +01:00
Code Issues Projects Releases Wiki Activity

feat: adds bar charts back to dashboard table (#2331)

Browse Source
This commit is contained in:
Amir Raminfar
2023-08-02 11:29:50 -07:00
committed by GitHub
parent 1c74a46f3f
commit ac886b0e9a
2 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
assets/components/BarChart.vue
View File

@@ -15,10 +15,17 @@ const minValue = computed(() => Math.min(value, 1));
<style scoped> <style scoped>
.bar { .bar {
height: 100%; height: 1.5em;
background-color: var(--primary-color); background-color: var(--primary-color);
transform-origin: left; transform-origin: left;
transform: scaleX(v-bind(minValue)); transform: scaleX(v-bind(minValue));
transition: transform 0.2s ease-out; transition: transform 0.2s ease-out;
border-top-right-radius: 0.2em;
border-bottom-right-radius: 0.2em;
}
.is-overlay {
font-size: 0.9em;
padding: 0 0.5em;
} }
</style> </style>

8
assets/components/ContainerTable.vue
View File

@@ -33,10 +33,14 @@
<distance-time :date="container.created" strict :suffix="false"></distance-time> <distance-time :date="container.created" strict :suffix="false"></distance-time>
</td> </td>
<td v-if="isVisible('cpu')"> <td v-if="isVisible('cpu')">
{{ (container.movingAverage.cpu / 100).toLocaleString(undefined, { style: "percent" }) }} <bar-chart :value="container.movingAverage.cpu / 100">
{{ (container.movingAverage.cpu / 100).toLocaleString(undefined, { style: "percent" }) }}
</bar-chart>
</td> </td>
<td v-if="isVisible('mem')"> <td v-if="isVisible('mem')">
{{ (container.movingAverage.memory / 100).toLocaleString(undefined, { style: "percent" }) }} <bar-chart :value="container.movingAverage.memory / 100">
{{ (container.movingAverage.memory / 100).toLocaleString(undefined, { style: "percent" }) }}
</bar-chart>
</td> </td>
</tr> </tr>
</tbody> </tbody>