72 lines
2.9 KiB
HTML
72 lines
2.9 KiB
HTML
<article class="card gia-behavior-graph-card">
|
|
<header class="card-header">
|
|
<div class="card-header-title is-flex is-justify-content-space-between is-align-items-flex-start">
|
|
<div>
|
|
<p class="is-size-7 has-text-weight-semibold has-text-grey mb-1">
|
|
{{ graph.state_label }} · {{ graph.group|upper }}
|
|
</p>
|
|
<p class="mb-0">
|
|
<span class="icon is-small mr-1"><i class="{{ graph.icon }}"></i></span>
|
|
<span>{{ graph.title }}</span>
|
|
</p>
|
|
</div>
|
|
<span class="tag is-light gia-badge">{{ graph.current_value_label }}</span>
|
|
</div>
|
|
</header>
|
|
<div class="card-content">
|
|
<p class="is-size-7 has-text-grey mb-2">
|
|
{{ graph.raw_count }} sample{{ graph.raw_count|pluralize }} in this range{% if graph.delta_label %} · {{ graph.delta_label }}{% endif %}
|
|
</p>
|
|
{% if graph.has_data %}
|
|
<div class="gia-behavior-chart-shell">
|
|
<svg
|
|
class="gia-behavior-chart"
|
|
viewBox="0 0 100 48"
|
|
preserveAspectRatio="none"
|
|
role="img"
|
|
aria-label="{{ graph.title }} graph">
|
|
{% if graph.area_path %}
|
|
<path class="gia-behavior-chart-area" d="{{ graph.area_path }}"></path>
|
|
{% endif %}
|
|
{% if graph.polyline %}
|
|
<polyline class="gia-behavior-chart-line" points="{{ graph.polyline }}"></polyline>
|
|
{% endif %}
|
|
{% for marker in graph.markers|slice:"-1:" %}
|
|
<circle class="gia-behavior-chart-point" cx="{{ marker.x }}" cy="{{ marker.y }}" r="1.8"></circle>
|
|
{% endfor %}
|
|
</svg>
|
|
<div class="is-flex is-justify-content-space-between is-size-7 has-text-grey mt-1">
|
|
<span>{{ graph.y_min_label }}</span>
|
|
<span>{{ graph.latest_bucket_label }}</span>
|
|
<span>{{ graph.y_max_label }}</span>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<article class="message is-light">
|
|
<div class="message-body is-size-7">
|
|
No samples for this metric in the selected range.
|
|
</div>
|
|
</article>
|
|
{% endif %}
|
|
<p class="is-size-7 mt-3">{{ graph.psychology }}</p>
|
|
<div class="buttons are-small mt-3 mb-0">
|
|
<a
|
|
class="button is-light"
|
|
href="{% url 'ai_workspace_insight_detail' type='page' person_id=person.id metric=graph.slug %}?range={{ range_key }}">
|
|
Page
|
|
</a>
|
|
{% if behavioral_show_widget_actions %}
|
|
<button
|
|
type="button"
|
|
class="button is-light js-widget-spawn-trigger"
|
|
data-widget-url="{% url 'ai_workspace_insight_detail' type='widget' person_id=person.id metric=graph.slug %}?range={{ range_key }}"
|
|
hx-get="{% url 'ai_workspace_insight_detail' type='widget' person_id=person.id metric=graph.slug %}?range={{ range_key }}"
|
|
hx-target="#widgets-here"
|
|
hx-swap="beforeend">
|
|
Widget
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</article>
|