111 lines
3.6 KiB
HTML
111 lines
3.6 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
<div class="columns is-multiline">
|
|
<div class="column is-12">
|
|
<nav class="breadcrumb is-small" aria-label="breadcrumbs">
|
|
<ul>
|
|
<li><a href="{{ workspace_url }}">AI Workspace</a></li>
|
|
<li><a href="{{ graphs_url }}">Insight Graphs</a></li>
|
|
<li class="is-active"><a aria-current="page">{{ metric.title }}</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div class="column is-12">
|
|
<h1 class="title is-4" style="margin-bottom: 0.35rem;">{{ metric.title }}: {{ person.name }}</h1>
|
|
<p class="is-size-7 has-text-grey">Conversation {{ workspace_conversation.id }}</p>
|
|
</div>
|
|
<div class="column is-5">
|
|
<div class="box">
|
|
<p class="heading">{{ metric_group.title }}</p>
|
|
<p class="title is-5" style="margin-bottom: 0.5rem;">{{ metric.title }}</p>
|
|
<p><strong>Current Value:</strong> {{ metric_value|default:"-" }}</p>
|
|
<p style="margin-top: 0.65rem;"><strong>How It Is Calculated</strong></p>
|
|
<p>{{ metric.calculation }}</p>
|
|
<p style="margin-top: 0.65rem;"><strong>Psychological Interpretation</strong></p>
|
|
<p>{{ metric.psychology }}</p>
|
|
{% if metric_psychology_hint %}
|
|
<article class="message is-info is-light" style="margin-top: 0.75rem;">
|
|
<div class="message-body">
|
|
{{ metric_psychology_hint }}
|
|
</div>
|
|
</article>
|
|
{% endif %}
|
|
</div>
|
|
<div class="buttons">
|
|
<a class="button is-light" href="{{ graphs_url }}">
|
|
<span class="icon is-small"><i class="fa-solid fa-chart-line"></i></span>
|
|
<span>All Graphs</span>
|
|
</a>
|
|
<a class="button is-light" href="{{ help_url }}">
|
|
<span class="icon is-small"><i class="fa-solid fa-circle-question"></i></span>
|
|
<span>Scoring Help</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="column is-7">
|
|
<div class="box">
|
|
<p class="heading">History</p>
|
|
<div style="height: 360px;">
|
|
<canvas id="metric-detail-chart"></canvas>
|
|
</div>
|
|
{% if not graph_points %}
|
|
<p class="is-size-7 has-text-grey" style="margin-top: 0.65rem;">
|
|
No historical points yet for this metric.
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{ graph_points|json_script:"metric-detail-points" }}
|
|
<script src="{% static 'js/chart.js' %}"></script>
|
|
<script>
|
|
(function() {
|
|
var node = document.getElementById("metric-detail-points");
|
|
if (!node) {
|
|
return;
|
|
}
|
|
var points = JSON.parse(node.textContent || "[]");
|
|
var labels = points.map(function(row) {
|
|
var dt = new Date(row.x);
|
|
return dt.toLocaleString();
|
|
});
|
|
var values = points.map(function(row) {
|
|
return row.y;
|
|
});
|
|
var ctx = document.getElementById("metric-detail-chart");
|
|
if (!ctx) {
|
|
return;
|
|
}
|
|
new Chart(ctx.getContext("2d"), {
|
|
type: "line",
|
|
data: {
|
|
labels: labels,
|
|
datasets: [
|
|
{
|
|
label: "{{ metric.title|escapejs }}",
|
|
data: values,
|
|
borderColor: "#3273dc",
|
|
backgroundColor: "rgba(50,115,220,0.12)",
|
|
borderWidth: 2,
|
|
pointRadius: 2,
|
|
tension: 0.28,
|
|
spanGaps: true
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
{% endblock %}
|