From bb0ac56d4f604516ee126a181e8fe0d9f8a8b25e Mon Sep 17 00:00:00 2001
From: iamjohnnymac <33052970+iamjohnnymac@users.noreply.github.com>
Date: Tue, 19 May 2026 07:55:41 +0800
Subject: [PATCH] fix: readable loss-budget gauge on FibreLink detail (v0.3.3)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prior gauge inlined the numeric readout INSIDE the SVG at font-size
5.5 viewBox units with a near-black fill (#1a1a1a). On NetBox's dark
theme the text was essentially invisible.

Fixed: numbers move out of the SVG into bold HTML text + a coloured
Bootstrap badge for the percent (text-bg-success/warning/danger
matching the band). SVG is now a pure visual bar — full container
width, 18px tall, no embedded text. Short legend underneath.

Long-standing UX bug spotted during the v0.3.x Chrome walkthrough.
---
 CHANGELOG.md                                  | 19 +++++++-
 netbox_osp/__init__.py                        |  2 +-
 .../templates/netbox_osp/fibrelink.html       | 43 +++++++++++--------
 pyproject.toml                                |  2 +-
 4 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 13bc74f..1b72230 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -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
@@ -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
diff --git a/netbox_osp/__init__.py b/netbox_osp/__init__.py
index 31e0de3..11b824a 100644
--- a/netbox_osp/__init__.py
+++ b/netbox_osp/__init__.py
@@ -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"
diff --git a/netbox_osp/templates/netbox_osp/fibrelink.html b/netbox_osp/templates/netbox_osp/fibrelink.html
index 50a71cb..2199b2e 100644
--- a/netbox_osp/templates/netbox_osp/fibrelink.html
+++ b/netbox_osp/templates/netbox_osp/fibrelink.html
@@ -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>
diff --git a/pyproject.toml b/pyproject.toml
index ae9c306..b26bb6e 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -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" }]