Skip to content

Commit

Permalink
Change styles for metrics
Browse files Browse the repository at this point in the history 
Match color wifi + ble + change color of sample count
  • Loading branch information
@stalehd
stalehd committed Apr 13, 2023
1 parent 154ccb4 commit 4ab0b95
Show file tree
Hide file tree
Showing 7 changed files with 44 additions and 33 deletions.
2 changes: 1 addition & 1 deletion frontend/dist/frontend/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@

<body>
<app-root></app-root>
<script src="runtime.1eef65174679b3b8.js" type="module"></script><script src="polyfills.52edb18b4bbd3f3f.js" type="module"></script><script src="main.fca0d96fcab99092.js" type="module"></script>
<script src="runtime.1eef65174679b3b8.js" type="module"></script><script src="polyfills.52edb18b4bbd3f3f.js" type="module"></script><script src="main.615bbb2299d4b394.js" type="module"></script>

</body></html>
1 change: 1 addition & 0 deletions frontend/dist/frontend/main.615bbb2299d4b394.js
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion frontend/dist/frontend/main.fca0d96fcab99092.js
View file

This file was deleted.

2 changes: 1 addition & 1 deletion frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 24 additions & 0 deletions frontend/src/app/device-view/device-view.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,28 @@
.chart {
padding: 1em;
width: 80vw;
}

.wifi-metric {
background-color: salmon;
}

.ble-metric {
background-color: darkblue;
}

.sample-metric {
background-color: #aaaaaa;
}

.density-high {
background-color: red;
}

.density-norm {
background-color: #aaaaaa;
}

.density-low {
background-color: green;
}
18 changes: 11 additions & 7 deletions frontend/src/app/device-view/device-view.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,25 @@ <h2>{{ device.name }}</h2>
Sist oppdatert {{ samples.lastDataUpdate |date:'YYYY-MM-dd HH:mm'}}
</div>
<div class="device-info">
<div class="metric">
<div class="metric ble-metric">
<div class="metric-value">{{ metricBLE }}</div>
<div class="metric-desc">Maks antall bluetooth-enheter</div>
</div>
<div class="metric">
<div class="metric wifi-metric">
<div class="metric-value">{{ metricWifi }}</div>
<div class="metric-desc">Maks antall WiFi-enheter</div>
</div>
<div class="metric">
<div class="metric-value">{{ metricSampleCount }}</div>
<div class="metric sample-metric">
<div class="metric-value ">{{ metricSampleCount }}</div>
<div class="metric-desc">Målinger i perioden</div>
</div>
<div class="metric">
<div class="metric-value">{{ metricDensity }}</div>
<div class="metric-desc">Folketetthet ({{ metricDensityPercent }}% av maks)</div>
<div class="metric" [ngClass]="{
'density-high': (metricDensityPercent > 70),
'density-norm': (metricDensityPercent <= 70 && metricDensityPercent >= 30),
'density-low': (metricDensityPercent < 30)
}">
<div class=" metric-value">{{ metricDensityPercent }}%</div>
<div class="metric-desc">Folketetthet av maks</div>
</div>
</div>
<div class="location">
Expand Down
29 changes: 6 additions & 23 deletions frontend/src/app/device-view/device-view.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ export class DeviceViewComponent implements OnInit, AfterViewInit, OnChanges {
@Input("device") device: V1Device = {};
@ViewChild("chart") chartRef?: ElementRef;

metricDensity: string = "";
metricDensityPercent: number = 0;
metricSampleCount: number = 0;
metricWifi: number = 0;
Expand Down Expand Up @@ -102,7 +101,7 @@ export class DeviceViewComponent implements OnInit, AfterViewInit, OnChanges {
Plot.dot(this.data, {
x: d => d.time,
y: "ble",
stroke: "blue",
stroke: "darkblue",
opacity: 0.2,
}),
Plot.line(
Expand All @@ -112,7 +111,7 @@ export class DeviceViewComponent implements OnInit, AfterViewInit, OnChanges {
{
x: "time",
y: "ble",
stroke: "blue",
stroke: "darkblue",
strokeWidth: 2,
opacity: 0.8,
}
Expand All @@ -121,7 +120,7 @@ export class DeviceViewComponent implements OnInit, AfterViewInit, OnChanges {
Plot.dot(this.data, {
x: "time",
y: "wifi",
stroke: "red",
stroke: "salmon",
opacity: 0.3,
}),
Plot.line(
Expand All @@ -131,7 +130,7 @@ export class DeviceViewComponent implements OnInit, AfterViewInit, OnChanges {
{
x: "time",
y: "wifi",
stroke: "red",
stroke: "salmon",
strokeWidth: 2,
opacity: 0.9,
}
Expand All @@ -141,8 +140,8 @@ export class DeviceViewComponent implements OnInit, AfterViewInit, OnChanges {
],
color: {
legend: false,
domain: ["wifi", "ble"],
range: ["red", "blue"]
domain: ["wifi", "salmon"],
range: ["red", "darkblue"]
},
style: {
fontFamily: 'sans-serif',
Expand All @@ -162,25 +161,9 @@ export class DeviceViewComponent implements OnInit, AfterViewInit, OnChanges {
let current = this.data[i].ble + this.data[i].wifi;
let percent: number = Math.round(current * 100 / (maxBle + maxWifi));

if (percent >= 80) {
busyIndicator = "Svært høy"
}
if (percent >= 60 && percent < 80) {
busyIndicator = "Høy";
}
if (percent >= 40 && percent < 60) {
busyIndicator = "Normal";
}
if (percent >= 25 && percent < 40) {
busyIndicator = "Lav";
}
if (percent < 25) {
busyIndicator = "Svært Lav";
}
this.metricBLE = maxBle;
this.metricWifi = maxWifi;
this.metricSampleCount = this.data.length;
this.metricDensity = busyIndicator;
this.metricDensityPercent = percent;
}
}

0 comments on commit 4ab0b95

Please sign in to comment.