Skip to content

Commit

Permalink
WIP: add event to selection for chart
Browse files Browse the repository at this point in the history 
Signed-off-by: Jonas Remmert <jremmert@gmx.net>
  • Loading branch information
@jonas-rem
jonas-rem committed Sep 22, 2024
1 parent 54267c3 commit 980ceab
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 48 deletions.
31 changes: 24 additions & 7 deletions server/django/sensordata/templates/device_dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ <h3>Endpoint Details</h3>
<th>Battery Voltage</th>
<td>
{% if selected_endpoint.battery_voltage %}
{{ selected_endpoint.battery_voltage }} V
{{ selected_endpoint.battery_voltage }} %
{% else %}
N/A
{% endif %}
Expand All @@ -93,6 +93,20 @@ <h3>Endpoint Details</h3>
</div>
</div>

<div class="row mt-4">
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="event_type">Select Event for Visualization:</label>
<select class="form-control" id="event_type" name="event_type">
<option value="">-- Select an Event --</option>
{% for event_type in event_types %}
<option value="{{ event_type }}"> {{ event_type }} </option>
{% endfor %}
</select>
</div>
</div>
</div>

<div class="row mt-4">
<div class="col-sm-12 col-md-6">
<div class="form-group">
Expand All @@ -116,7 +130,7 @@ <h3>Endpoint Details</h3>

<div class="row mt-4">
<div class="col-sm-12">
<h3 id="chartTitle">Resource Data</h3>
<h3 id="chartTitle">Chart</h3>
<div style="height: 400px; width: 100%;">
<canvas id="resourceChart"></canvas>
</div>
Expand Down Expand Up @@ -185,6 +199,7 @@ <h3 id="chartTitle">Resource Data</h3>
options: {
responsive: true,
maintainAspectRatio: false,
animation: false,
plugins: {
legend: {
display: true,
Expand Down Expand Up @@ -256,10 +271,11 @@ <h3 id="chartTitle">Resource Data</h3>
}
});

document.getElementById('chartTitle').textContent = 'Resource Data for ' + data.resource_name;
document.getElementById('chartTitle').textContent = 'Chart for ' + data.resource_name;
}

var resourceTypeElement = document.getElementById('resource_type');
var eventTypeElement = document.getElementById('event_type');
var lowerLimitInput = document.getElementById('lower_limit');
var upperLimitInput = document.getElementById('upper_limit');
var maxYValueInput = document.getElementById('max_y_value');
Expand All @@ -268,9 +284,10 @@ <h3 id="chartTitle">Resource Data</h3>
function fetchData(lowerLimit, upperLimit, maxYValue) {
var endpoint = '{{ selected_endpoint.endpoint }}';
var resourceType = resourceTypeElement ? resourceTypeElement.value : '';
var eventType = eventTypeElement ? eventTypeElement.value : '';

if (endpoint && resourceType) {
fetch(`?endpoint=${endpoint}&resource_type=${resourceType}`, {
fetch(`?endpoint=${endpoint}&resource_type=${resourceType}&event_type=${eventType}`, {
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
Expand Down Expand Up @@ -305,13 +322,13 @@ <h3 id="chartTitle">Resource Data</h3>
var upperLimit = parseFloat(upperLimitInput.value) || 100;
var maxYValue = parseFloat(maxYValueInput.value) || null;
fetchData(lowerLimit, upperLimit, maxYValue);
}, 5000); // 5 seconds interval
}, 1000); // 1 second interval

{% if graph_data %}
updateChart({
values: {{ graph_data.values | safe }},
resource_name: '{{ selected_resource_type.name }}'
}, {{ percentile_25 }}, {{ percentile_75 }}, null);
}, null);
{% endif %}
});

Expand Down Expand Up @@ -340,4 +357,4 @@ <h3 id="chartTitle">Resource Data</h3>
</div>
{% endif %}
</div>
{% endblock %}
{% endblock %}
73 changes: 32 additions & 41 deletions server/django/sensordata/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,8 +301,8 @@ def device_dashboard_view(request):
selected_resource_type = None
graph_data = None

percentile_25 = None
percentile_75 = None
timestamps = []
values = []

# Handle endpoint selection
if 'endpoint' in request.GET:
Expand Down Expand Up @@ -339,13 +339,33 @@ def device_dashboard_view(request):
selected_endpoint.battery_voltage = battery_voltage.int_value if battery_voltage else None

if 'resource_type' in request.GET:
selected_resource_type = get_object_or_404(ResourceType, id=request.GET['resource_type'])
last_seven_days = timezone.now() - timedelta(days=30)
resources = Resource.objects.filter(
endpoint=selected_endpoint,
resource_type=selected_resource_type,
timestamp_created__gte=last_seven_days
).order_by('timestamp_created')
if 'event_type' in request.GET and request.GET['event_type'] is not '':
selected_resource_type = get_object_or_404(ResourceType,
id=request.GET['resource_type'])
logger.info(request.GET)
last_event = Event.objects.filter(
endpoint=selected_endpoint,
event_type=request.GET['event_type']
).order_by('-time').first()

evt_resources = EventResource.objects.filter(
event=last_event
).order_by('resource__timestamp_created')

resources = []
for evt_resource in evt_resources:
if evt_resource.resource.resource_type == selected_resource_type:
resources.append(evt_resource.resource)

else:
selected_resource_type = get_object_or_404(ResourceType,
id=request.GET['resource_type'])
last_seven_days = timezone.now() - timedelta(days=30)
resources = Resource.objects.filter(
endpoint=selected_endpoint,
resource_type=selected_resource_type,
timestamp_created__gte=last_seven_days
).order_by('timestamp_created')

timestamps = [resource.timestamp_created.strftime('%Y-%m-%d %H:%M:%S') for resource in resources]
values = [
Expand All @@ -354,57 +374,28 @@ def device_dashboard_view(request):
else resource.int_value if selected_resource_type.data_type == 'TIME'
else None for resource in resources
]

if values:
percentile_25 = np.percentile(values, 25)
percentile_75 = np.percentile(values, 75)

graph_data = {
'timestamps': timestamps,
'values': values
}


resource_types = ResourceType.objects.filter(data_type__in=['INTEGER', 'FLOAT', 'TIME'])
event_types = Event.objects.values_list('event_type', flat=True).distinct()

if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
if 'endpoint' in request.GET and 'resource_type' in request.GET:
selected_endpoint = get_object_or_404(Endpoint, endpoint=request.GET['endpoint'])
selected_resource_type = get_object_or_404(ResourceType, id=request.GET['resource_type'])
last_thirty_days = timezone.now() - timedelta(days=30)
resources = Resource.objects.filter(
endpoint=selected_endpoint,
resource_type=selected_resource_type,
timestamp_created__gte=last_thirty_days
).order_by('timestamp_created')
timestamps = [resource.timestamp_created.strftime('%Y-%m-%d %H:%M:%S') for resource in resources]
values = [
resource.int_value if selected_resource_type.data_type == 'INTEGER'
else resource.float_value if selected_resource_type.data_type == 'FLOAT'
else resource.int_value if selected_resource_type.data_type == 'TIME'
else None for resource in resources
]

if values:
percentile_25 = np.percentile(values, 25)
percentile_75 = np.percentile(values, 75)

return JsonResponse({
return JsonResponse({
'timestamps': timestamps,
'values': values,
'resource_name': selected_resource_type.name,
'percentile_25': percentile_25,
'percentile_75': percentile_75
})

context = {
'endpoints': endpoints,
'selected_endpoint': selected_endpoint,
'resource_types': resource_types,
'event_types': event_types,
'selected_resource_type': selected_resource_type,
'graph_data': graph_data,
'percentile_25': percentile_25,
'percentile_75': percentile_75,
}

return render(request, 'device_dashboard.html', context)
Expand Down

0 comments on commit 980ceab

Please sign in to comment.