mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2024-12-26 21:39:06 +01:00
Add pie color legend to Top-Tables
This commit is contained in:
parent
e91cdf6b79
commit
32420fb531
@ -2,11 +2,11 @@
|
|||||||
import { init, convert2uplot } from './utils.js'
|
import { init, convert2uplot } from './utils.js'
|
||||||
import { getContext, onMount } from 'svelte'
|
import { getContext, onMount } from 'svelte'
|
||||||
import { queryStore, gql, getContextClient } from '@urql/svelte'
|
import { queryStore, gql, getContextClient } from '@urql/svelte'
|
||||||
import { Row, Col, Spinner, Card, Table } from 'sveltestrap'
|
import { Row, Col, Spinner, Card, Table, Icon } from 'sveltestrap'
|
||||||
import Filters from './filters/Filters.svelte'
|
import Filters from './filters/Filters.svelte'
|
||||||
import PlotSelection from './PlotSelection.svelte'
|
import PlotSelection from './PlotSelection.svelte'
|
||||||
import Histogramuplot from './plots/Histogramuplot.svelte'
|
import Histogramuplot from './plots/Histogramuplot.svelte'
|
||||||
import Pie from './plots/Pie.svelte'
|
import Pie, { colors } from './plots/Pie.svelte'
|
||||||
import { binsFromFootprint } from './plots/Histogram.svelte'
|
import { binsFromFootprint } from './plots/Histogram.svelte'
|
||||||
import ScatterPlot from './plots/Scatter.svelte'
|
import ScatterPlot from './plots/Scatter.svelte'
|
||||||
import PlotTable from './PlotTable.svelte'
|
import PlotTable from './PlotTable.svelte'
|
||||||
@ -172,9 +172,10 @@
|
|||||||
</Col>
|
</Col>
|
||||||
<Col>
|
<Col>
|
||||||
<Table>
|
<Table>
|
||||||
<tr class="mb-2"><th>User Name</th><th>Node Hours</th></tr>
|
<tr class="mb-2"><th>Legend</th><th>User Name</th><th>Node Hours</th></tr>
|
||||||
{#each $statsQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }}
|
{#each $statsQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }, i}
|
||||||
<tr>
|
<tr>
|
||||||
|
<td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
|
||||||
<th scope="col"><a href="/monitoring/user/{name}?cluster={cluster.name}">{name}</a></th>
|
<th scope="col"><a href="/monitoring/user/{name}?cluster={cluster.name}">{name}</a></th>
|
||||||
<td>{count}</td>
|
<td>{count}</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import Refresher from './joblist/Refresher.svelte'
|
import Refresher from './joblist/Refresher.svelte'
|
||||||
import Roofline, { transformPerNodeData } from './plots/Roofline.svelte'
|
import Roofline, { transformPerNodeData } from './plots/Roofline.svelte'
|
||||||
import Pie from './plots/Pie.svelte'
|
import Pie, { colors } from './plots/Pie.svelte'
|
||||||
import Histogramuplot from './plots/Histogramuplot.svelte'
|
import Histogramuplot from './plots/Histogramuplot.svelte'
|
||||||
import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
|
import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
|
||||||
import { init, convert2uplot } from './utils.js'
|
import { init, convert2uplot } from './utils.js'
|
||||||
@ -174,9 +174,10 @@
|
|||||||
</Col>
|
</Col>
|
||||||
<Col class="px-4 py-2">
|
<Col class="px-4 py-2">
|
||||||
<Table>
|
<Table>
|
||||||
<tr class="mb-2"><th>User Name</th><th>Number of Nodes</th></tr>
|
<tr class="mb-2"><th>Legend</th><th>User Name</th><th>Number of Nodes</th></tr>
|
||||||
{#each $mainQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }}
|
{#each $mainQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }, i}
|
||||||
<tr>
|
<tr>
|
||||||
|
<td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
|
||||||
<th scope="col"><a href="/monitoring/user/{name}?cluster={cluster}&state=running">{name}</a></th>
|
<th scope="col"><a href="/monitoring/user/{name}?cluster={cluster}&state=running">{name}</a></th>
|
||||||
<td>{count}</td>
|
<td>{count}</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -196,9 +197,10 @@
|
|||||||
</Col>
|
</Col>
|
||||||
<Col class="px-4 py-2">
|
<Col class="px-4 py-2">
|
||||||
<Table>
|
<Table>
|
||||||
<tr class="mb-2"><th>Project Code</th><th>Number of Nodes</th></tr>
|
<tr class="mb-2"><th>Legend</th><th>Project Code</th><th>Number of Nodes</th></tr>
|
||||||
{#each $mainQuery.data.topProjects.sort((a, b) => b.count - a.count) as { name, count }}
|
{#each $mainQuery.data.topProjects.sort((a, b) => b.count - a.count) as { name, count }, i}
|
||||||
<tr>
|
<tr>
|
||||||
|
<td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
|
||||||
<th scope="col"><a href="/monitoring/jobs/?cluster={cluster}&state=running&project={name}&projectMatch=eq">{name}</a></th>
|
<th scope="col"><a href="/monitoring/jobs/?cluster={cluster}&state=running&project={name}&projectMatch=eq">{name}</a></th>
|
||||||
<td>{count}</td>
|
<td>{count}</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -236,3 +238,15 @@
|
|||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.colorBoxWrapper {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorBox {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, .2);
|
||||||
|
}
|
||||||
|
</style>
|
@ -1,5 +1,22 @@
|
|||||||
|
<script context="module">
|
||||||
|
// http://tsitsul.in/blog/coloropt/ : 12 colors normal
|
||||||
|
export const colors = [
|
||||||
|
'rgb(235,172,35)',
|
||||||
|
'rgb(184,0,88)',
|
||||||
|
'rgb(0,140,249)',
|
||||||
|
'rgb(0,110,0)',
|
||||||
|
'rgb(0,187,173)',
|
||||||
|
'rgb(209,99,230)',
|
||||||
|
'rgb(178,69,2)',
|
||||||
|
'rgb(255,146,135)',
|
||||||
|
'rgb(89,84,214)',
|
||||||
|
'rgb(0,198,248)',
|
||||||
|
'rgb(135,133,0)',
|
||||||
|
'rgb(0,167,108)',
|
||||||
|
'rgb(189,189,189)'
|
||||||
|
]
|
||||||
|
</script>
|
||||||
<script>
|
<script>
|
||||||
// import { getContext } from 'svelte'
|
|
||||||
import { Pie } from 'svelte-chartjs';
|
import { Pie } from 'svelte-chartjs';
|
||||||
import {
|
import {
|
||||||
Chart as ChartJS,
|
Chart as ChartJS,
|
||||||
@ -24,23 +41,6 @@
|
|||||||
export let entities
|
export let entities
|
||||||
export let displayLegend = false
|
export let displayLegend = false
|
||||||
|
|
||||||
// http://tsitsul.in/blog/coloropt/ : 12 colors normal
|
|
||||||
const colors = [
|
|
||||||
'rgb(235,172,35)',
|
|
||||||
'rgb(184,0,88)',
|
|
||||||
'rgb(0,140,249)',
|
|
||||||
'rgb(0,110,0)',
|
|
||||||
'rgb(0,187,173)',
|
|
||||||
'rgb(209,99,230)',
|
|
||||||
'rgb(178,69,2)',
|
|
||||||
'rgb(255,146,135)',
|
|
||||||
'rgb(89,84,214)',
|
|
||||||
'rgb(0,198,248)',
|
|
||||||
'rgb(135,133,0)',
|
|
||||||
'rgb(0,167,108)',
|
|
||||||
'rgb(189,189,189)'
|
|
||||||
]
|
|
||||||
|
|
||||||
const data = {
|
const data = {
|
||||||
labels: entities,
|
labels: entities,
|
||||||
datasets: [
|
datasets: [
|
||||||
|
Loading…
Reference in New Issue
Block a user