Skip to content

fix: readable FibreLink loss-budget gauge (v0.3.3) #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iamjohnnymac merged 1 commit into from
May 19, 2026
Merged

fix: readable FibreLink loss-budget gauge (v0.3.3) #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,22 @@ Per-release NetBox / Python compatibility lives in

## [Unreleased]

## [0.3.3] — 2026-05-19

### Fixed

- **FibreLink loss-budget gauge is now readable on dark theme.** The
prior gauge inlined the numeric readout inside the SVG at
`font-size: 5.5` viewBox units with a near-black fill
(`#1a1a1a`) — effectively invisible on NetBox's dark theme. The
numbers are now rendered as a bold `<strong>` outside the SVG,
the percent appears as a coloured Bootstrap badge
(`text-bg-success` / `warning` / `danger` matching the band),
and the SVG is now a pure visual bar (~18px tall, full container
width) with no text. A short legend underneath explains the
thresholds. Long-standing UX bug spotted during the v0.3.x
walkthrough.

## [0.3.2] — 2026-05-18

### Fixed
Expand Down Expand Up @@ -352,7 +368,8 @@ GPS markers.

- PyPI name-reservation placeholder. Not functional.

[Unreleased]: https://github.com/iamjohnnymac/netbox-osp/compare/v0.3.2...HEAD
[Unreleased]: https://github.com/iamjohnnymac/netbox-osp/compare/v0.3.3...HEAD
[0.3.3]: https://github.com/iamjohnnymac/netbox-osp/releases/tag/v0.3.3
[0.3.2]: https://github.com/iamjohnnymac/netbox-osp/releases/tag/v0.3.2
[0.3.1]: https://github.com/iamjohnnymac/netbox-osp/releases/tag/v0.3.1
[0.3.0]: https://github.com/iamjohnnymac/netbox-osp/releases/tag/v0.3.0
Expand Down
2 changes: 1 addition & 1 deletion netbox_osp/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ class NetBoxOspConfig(PluginConfig):
name = "netbox_osp"
verbose_name = "NetBox OSP"
description = "Outside-plant fibre management — cables, splice closures, fibre links with loss budgets, and an offline-capable Leaflet plant map."
version = "0.3.2"
version = "0.3.3"
author = "John McKean"
author_email = "33052970+iamjohnnymac@users.noreply.github.com"
base_url = "osp"
Expand Down
43 changes: 25 additions & 18 deletions netbox_osp/templates/netbox_osp/fibrelink.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,30 +37,37 @@ <h5 class="card-header">Loss budget</h5>
<td>
{% load l10n %}
{% with gauge=object.loss_budget_gauge %}
<svg viewBox="0 0 200 32" xmlns="http://www.w3.org/2000/svg"
<div class="d-flex align-items-center flex-wrap gap-2 mb-2">
<strong style="font-size: 1.05rem;">
{{ gauge.total_db|floatformat:2 }} / {{ gauge.target_db|floatformat:2 }} dB
</strong>
<span class="badge {% if gauge.band == 'ok' %}text-bg-success{% elif gauge.band == 'warn' %}text-bg-warning{% else %}text-bg-danger{% endif %}">
{{ gauge.pct|unlocalize }}%
</span>
{% if gauge.band == "fail" %}
<span class="badge text-bg-danger">OVER BUDGET</span>
{% endif %}
</div>
<svg viewBox="0 0 200 14" xmlns="http://www.w3.org/2000/svg"
class="osp-loss-gauge osp-loss-gauge--{{ gauge.band }}"
style="width: 100%; max-width: 360px; height: 18px;"
preserveAspectRatio="none"
role="img"
aria-label="{{ gauge.total_db|floatformat:3 }} dB of {{ gauge.target_db|floatformat:3 }} dB used ({{ gauge.pct|unlocalize }} percent)">
<!-- Background zones (consistent fill-opacity for visual balance) -->
<rect x="0" y="7" width="106.66" height="18" fill="#28a745" fill-opacity="0.22"/>
<rect x="106.66" y="7" width="26.67" height="18" fill="#ffc107" fill-opacity="0.22"/>
<rect x="133.33" y="7" width="66.67" height="18" fill="#dc3545" fill-opacity="0.22"/>
<!-- Background zones: green 0-80%, yellow 80-100%, red over budget -->
<rect x="0" y="0" width="106.66" height="14" fill="#28a745" fill-opacity="0.30"/>
<rect x="106.66" y="0" width="26.67" height="14" fill="#ffc107" fill-opacity="0.30"/>
<rect x="133.33" y="0" width="66.67" height="14" fill="#dc3545" fill-opacity="0.30"/>
<!-- Threshold ticks -->
<line x1="106.66" y1="3" x2="106.66" y2="29" stroke="#6c757d" stroke-width="0.4"/>
<line x1="133.33" y1="3" x2="133.33" y2="29" stroke="#6c757d" stroke-width="0.8"/>
<text x="106.66" y="5.5" text-anchor="middle" font-size="3.5" fill="#6c757d">80%</text>
<text x="133.33" y="5.5" text-anchor="middle" font-size="3.5" fill="#6c757d">budget</text>
<!-- Indicator bar -->
<rect x="0" y="11.5" width="{{ gauge.width_vb|unlocalize }}" height="10"
<line x1="106.66" y1="0" x2="106.66" y2="14" stroke="#888" stroke-width="0.5"/>
<line x1="133.33" y1="0" x2="133.33" y2="14" stroke="#888" stroke-width="0.8"/>
<!-- Indicator bar — full height for clarity -->
<rect x="0" y="2" width="{{ gauge.width_vb|unlocalize }}" height="10"
fill="{{ gauge.color }}"/>
<!-- Numeric label — paint-order halo for legibility on light + dark themes. -->
<text x="100" y="22" text-anchor="middle"
font-size="5.5" font-weight="bold" fill="#1a1a1a"
stroke="#ffffff" stroke-width="0.5" paint-order="stroke">
{{ gauge.total_db|floatformat:2 }} / {{ gauge.target_db|floatformat:2 }} dB
({{ gauge.pct|unlocalize }}%{% if gauge.band == "fail" %} &mdash; OVER BUDGET{% endif %})
</text>
</svg>
<div class="text-muted small mt-1">
green &lt; 80% &middot; yellow 80&ndash;100% &middot; red over budget
</div>
{% endwith %}
</td>
</tr>
Expand Down
2 changes: 1 addition & 1 deletion pyproject.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

[project]
name = "netbox-osp"
version = "0.3.2"
version = "0.3.3"
description = "Outside-plant fibre management for NetBox — cables, splice closures, fibre links with loss budgets, and an offline-capable Leaflet plant map."
authors = [{ name = "John McKean", email = "33052970+iamjohnnymac@users.noreply.github.com" }]
maintainers = [{ name = "John McKean", email = "33052970+iamjohnnymac@users.noreply.github.com" }]
Expand Down
Loading