120 lines
4.0 KiB
HTML
120 lines
4.0 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 class="is-active"><a aria-current="page">Insight Graphs</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div class="column is-12">
|
|
<h1 class="title is-4" style="margin-bottom: 0.35rem;">Insight Graphs: {{ person.name }}</h1>
|
|
<p class="is-size-7 has-text-grey">
|
|
Historical metrics for workspace {{ workspace_conversation.id }}
|
|
</p>
|
|
<div class="buttons are-small" style="margin-top: 0.6rem;">
|
|
<a class="button is-light" href="{{ information_url }}">
|
|
<span class="icon is-small"><i class="fa-solid fa-circle-info"></i></span>
|
|
<span>Information</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>
|
|
|
|
{% for graph in graph_cards %}
|
|
<div class="column is-6">
|
|
<div class="box">
|
|
<div class="is-flex is-justify-content-space-between is-align-items-center" style="margin-bottom: 0.45rem;">
|
|
<div>
|
|
<p class="heading">{{ graph.group_title }}</p>
|
|
<p class="title is-6" style="margin-bottom: 0.2rem;">{{ graph.title }}</p>
|
|
<p class="is-size-7 has-text-grey">{{ graph.count }} point{{ graph.count|pluralize }}</p>
|
|
</div>
|
|
<div class="buttons are-small" style="margin: 0;">
|
|
<a class="button is-light" href="{% url 'ai_workspace_insight_detail' type='page' person_id=person.id metric=graph.slug %}">
|
|
Detail
|
|
</a>
|
|
<a class="button is-light" href="{{ help_url }}#group-{{ graph.group }}">
|
|
How It Works
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div style="height: 250px;">
|
|
<canvas id="graph-{{ graph.slug }}"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{{ graph_cards|json_script:"insight-graph-cards" }}
|
|
<script src="{% static 'js/chart.js' %}"></script>
|
|
<script>
|
|
(function() {
|
|
var node = document.getElementById("insight-graph-cards");
|
|
if (!node) {
|
|
return;
|
|
}
|
|
var graphs = JSON.parse(node.textContent || "[]");
|
|
var palette = ["#3273dc", "#23d160", "#ffdd57", "#ff3860", "#7957d5", "#00d1b2"];
|
|
|
|
graphs.forEach(function(graph, idx) {
|
|
var canvas = document.getElementById("graph-" + graph.slug);
|
|
if (!canvas) {
|
|
return;
|
|
}
|
|
var labels = (graph.points || []).map(function(row) {
|
|
return new Date(row.x).toLocaleString();
|
|
});
|
|
var values = (graph.points || []).map(function(row) {
|
|
return row.y;
|
|
});
|
|
var color = palette[idx % palette.length];
|
|
var yScale = {};
|
|
if (graph.y_min !== null && graph.y_min !== undefined) {
|
|
yScale.min = graph.y_min;
|
|
}
|
|
if (graph.y_max !== null && graph.y_max !== undefined) {
|
|
yScale.max = graph.y_max;
|
|
}
|
|
new Chart(canvas.getContext("2d"), {
|
|
type: "line",
|
|
data: {
|
|
labels: labels,
|
|
datasets: [
|
|
{
|
|
label: graph.title,
|
|
data: values,
|
|
borderColor: color,
|
|
backgroundColor: color + "33",
|
|
borderWidth: 2,
|
|
pointRadius: 2,
|
|
tension: 0.24,
|
|
spanGaps: true
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: yScale
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
{% endblock %}
|