Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Percents + visualization #139

Merged
merged 17 commits into from
Jun 13, 2021
Merged

Percents + visualization #139

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e4b265a
Black autoformat
haaavk May 16, 2021
86fef58
Add percent and divide filters
haaavk May 16, 2021
934a25a
Remove divide filter
haaavk May 16, 2021
fcbe072
Add percents in brackets and visualization
haaavk May 16, 2021
86c1cce
Apply percents and visualization to all data
haaavk May 20, 2021
8f0c8c6
Switch absolute to relative
haaavk May 25, 2021
fc6e950
Increase percent bar height
haaavk May 25, 2021
beae3cf
Move bar to separated file
haaavk May 26, 2021
82b15fc
Add USE_RELATIVE_MAX_IN_BAR_VISUALIZATION to settings
haaavk May 26, 2021
5d0d6a3
Add flex items-center
haaavk May 26, 2021
1363c50
Move bar to left
haaavk May 26, 2021
475f792
Remove spaces
haaavk May 26, 2021
fc65097
Fix USE_RELATIVE_MAX_IN_BAR_VISUALIZATION
haaavk May 26, 2021
d5296f5
Remove unnecessary True
haaavk May 27, 2021
c2b1add
Add bar_width tag
haaavk May 27, 2021
d0291e9
Add flex-none to make flag not get squished
haaavk May 27, 2021
84c6f55
Fix flex-none
haaavk Jun 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 107 additions & 16 deletions shynet/dashboard/templates/dashboard/pages/service.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,24 @@
<tbody>
{% for location in stats.locations %}
<tr>
<td class="truncate w-full max-w-0">{{location.location|default:"Unknown"|urldisplay}}</td>
<td class="rf">{{location.count|intcomma}}</td>
<td class="truncate w-full max-w-0 relative">
<div
class="absolute h-6"
style="width: {{location.count|percent:stats.hit_count}}; top: 6px; left: 6px; height: calc(100% - 12px); background-color: var(--color-urge-200-fallback)"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe move style attributes to css file to minimize duplicate code like in this commit

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

left: 0; to align bar with the table header/body seperator line and make it not get cut off by the td tag when bar is full or close to full width

>
</div>
<div class="relative">
{{location.location|default:"Unknown"|urldisplay}}
</div>
</td>
<td>
<div class="flex justify-end items-center">
{{location.count|intcomma}}
<span class="text-xs rf" style="min-width: 48px">
({{location.count|percent:stats.hit_count}})
</span>
</div>
</td>
</tr>
{% empty %}
<tr>
Expand All @@ -131,8 +147,24 @@
<tbody>
{% for referrer in stats.referrers %}
<tr>
<td class="truncate w-full max-w-0">{{referrer.referrer|default:"Direct"|urldisplay}}</td>
<td class="rf">{{referrer.count|intcomma}}</td>
<td class="truncate w-full max-w-0 relative">
<div
class="absolute h-6"
style="width: {{referrer.count|percent:stats.session_count}}; top: 6px; left: 6px; height: calc(100% - 12px); background-color: var(--color-urge-200-fallback)"
>
</div>
<div class="relative">
{{referrer.referrer|default:"Direct"|urldisplay}}
</div>
</td>
<td>
<div class="flex justify-end items-center">
{{referrer.count|intcomma}}
<span class="text-xs rf" style="min-width: 48px">
({{referrer.count|percent:stats.session_count}})
</span>
</div>
</td>
</tr>
{% empty %}
<tr>
Expand All @@ -153,10 +185,24 @@
<tbody>
{% for country in stats.countries %}
<tr>
<td class="truncate w-full max-w-0" title="{{country.country|country_name}}">
<span class="{{country.country|flag_class}}"></span> {{country.country|country_name}}
<td class="truncate w-full max-w-0 relative" title="{{country.country|country_name}}">
<div
class="absolute h-6"
style="width: {{country.count|percent:stats.session_count}}; top: 6px; left: 6px; height: calc(100% - 12px); background-color: var(--color-urge-200-fallback)"
>
</div>
<div class="relative">
<span class="{{country.country|flag_class}}"></span> {{country.country|country_name}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add flex-none class here to make flag not get squished

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

flex-none needs to be on the

<span class="{{country.country|flag_class}}"></span> {{country.country|country_name}}

line, not the one above

</div>
</td>
<td>
<div class="flex justify-end items-center">
{{country.count|intcomma}}
<span class="text-xs rf" style="min-width: 48px">
({{country.count|percent:stats.session_count}})
</span>
</div>
</td>
<td class="rf">{{country.count|intcomma}}</td>
</tr>
{% empty %}
<tr>
Expand All @@ -177,10 +223,24 @@
<tbody>
{% for os in stats.operating_systems %}
<tr>
<td class="flex items-center truncate w-full max-w-0" title="{{os.os|default:'Unknown'}}">
{{os.os|iconify}}<span>{{os.os|default:"Unknown"}}</span>
<td class="flex items-center truncate w-full max-w-0 relative" title="{{os.os|default:'Unknown'}}">
<div
class="absolute h-6"
style="width: {{os.count|percent:stats.session_count}}; top: 6px; left: 6px; height: calc(100% - 12px); background-color: var(--color-urge-200-fallback)"
>
</div>
<div class="relative">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add back flex items-center classes to correctly align icon and text better

{{os.os|iconify}}<span>{{os.os|default:"Unknown"}}</span>
</div>
</td>
<td>
<div class="flex justify-end items-center">
{{os.count|intcomma}}
<span class="text-xs rf" style="min-width: 48px">
({{os.count|percent:stats.session_count}})
</span>
</div>
</td>
<td class="rf">{{os.count|intcomma}}</td>
</tr>
{% empty %}
<tr>
Expand All @@ -201,9 +261,24 @@
<tbody>
{% for browser in stats.browsers %}
<tr>
<td class="flex items-center truncate w-full max-w-0" title="{{browser.browser|default:'Unknown'}}">
{{browser.browser|iconify}}<span>{{browser.browser|default:"Unknown"}}</span></td>
<td class="rf">{{browser.count|intcomma}}</td>
<td class="flex items-center truncate w-full max-w-0 relative" title="{{browser.browser|default:'Unknown'}}">
<div
class="absolute h-6"
style="width: {{browser.count|percent:stats.session_count}}; top: 6px; left: 6px; height: calc(100% - 12px); background-color: var(--color-urge-200-fallback)"
>
</div>
<div class="relative">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add back flex items-center classes to correctly align icon and text better

{{browser.browser|iconify}}<span>{{browser.browser|default:"Unknown"}}</span>
</div>
</td>
<td>
<div class="flex justify-end items-center">
{{browser.count|intcomma}}
<span class="text-xs rf" style="min-width: 48px">
({{browser.count|percent:stats.session_count}})
</span>
</div>
</td>
</tr>
{% empty %}
<tr>
Expand All @@ -224,8 +299,24 @@
<tbody>
{% for device_type in stats.device_types %}
<tr>
<td class="truncate w-full max-w-0">{{device_type.device_type|default:"Unknown"|title}}</td>
<td class="rf">{{device_type.count|intcomma}}</td>
<td class="truncate w-full max-w-0 relative">
<div
class="absolute h-6"
style="width: {{device_type.count|percent:stats.session_count}}; top: 6px; left: 6px; height: calc(100% - 12px); background-color: var(--color-urge-200-fallback)"
>
</div>
<div class="relative">
{{device_type.device_type|default:"Unknown"|title}}
</div>
</td>
<td>
<div class="flex justify-end items-center">
{{device_type.count|intcomma}}
<span class="text-xs rf" style="min-width: 48px">
({{device_type.count|percent:stats.session_count}})
</span>
</div>
</td>
</tr>
{% empty %}
<tr>
Expand All @@ -243,4 +334,4 @@
sessions
&rarr;</a>
</div>
{% endblock %}
{% endblock %}
31 changes: 26 additions & 5 deletions shynet/dashboard/templatetags/helpers.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,7 @@ def urldisplay(url):
else:
return url


class ContextualURLNode(template.Node):
"""Extension of the Django URLNode to support including contextual parameters in URL outputs. In other words, URLs generated will keep the start and end date parameters."""

Expand All @@ -205,9 +206,13 @@ def render(self, context):
url_parts = list(urlparse(url))
query = dict(urllib.parse.parse_qsl(url_parts[4]))

query.update({
param: context.request.GET.get(param) for param in self.CONTEXT_PARAMS if param in context.request.GET and param not in query
})
query.update(
{
param: context.request.GET.get(param)
for param in self.CONTEXT_PARAMS
if param in context.request.GET and param not in query
}
)

url_parts[4] = urllib.parse.urlencode(query)

Expand All @@ -224,7 +229,23 @@ def render(self, context):
def contextual_url(*args, **kwargs):
urlnode = url_tag(*args, **kwargs)
return ContextualURLNode(urlnode)



@register.filter
def location_url(session):
return settings.LOCATION_URL.replace("$LATITUDE", str(session.latitude)).replace("$LONGITUDE", str(session.longitude))
return settings.LOCATION_URL.replace("$LATITUDE", str(session.latitude)).replace(
"$LONGITUDE", str(session.longitude)
)


@register.filter
def percent(value, total):
if total == 0:
return "N/A"

percent = value / total

if percent < 0.001:
return "<0.1%"

return f'{percent:.1%}'