51 lines
1.6 KiB
HTML
51 lines
1.6 KiB
HTML
{% load i18n %}
|
|
<style>
|
|
/* ... (CSS styles remain the same - omitted here for brevity) ... */
|
|
.gauge-container {
|
|
width: 250px;
|
|
height: 125px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin: 20px auto 10px;
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
.gauge-arc {
|
|
/* ... */
|
|
}
|
|
.gauge-color-fill {
|
|
/* Color sectors: Green (0-45), Yellow (45-67.5), Red (67.5-90)
|
|
Note: The degrees in conic-gradient correspond to the 90-degree
|
|
segmentation of the 180-degree gauge arc. */
|
|
background: conic-gradient(
|
|
var(--color-success) 0deg 90deg,
|
|
var(--color-warning) 90deg 135deg,
|
|
red 135deg 180deg,
|
|
#e9ecef 180deg 360deg
|
|
);
|
|
/* ... */
|
|
}
|
|
.gauge-needle {
|
|
/* ... */
|
|
transition: transform 1.5s ease-out;
|
|
}
|
|
/* ... (rest of CSS) ... */
|
|
</style>
|
|
|
|
{# Use variables directly from the context #}
|
|
<div class="gauge-value-display">
|
|
{{ avg_time_to_hire_days|default:0 }} {% trans "Days" %}
|
|
</div>
|
|
|
|
<div class="gauge-container">
|
|
<div class="gauge-color-fill"></div>
|
|
<div class="gauge-arc"></div>
|
|
|
|
{# Inject the final, calculated degrees directly into the style attribute #}
|
|
<div class="gauge-needle" style="transform: rotate({{ gauge_rotation_degrees }}deg);">
|
|
<div class="gauge-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-muted small mt-3">
|
|
{% trans "Target:" %} **{{ gauge_target_days }}** {% trans "Days" %} | {% trans "Max Scale:" %} {{ gauge_max_days }} {% trans "Days" %}
|
|
</div> |