Percents + visualization #139

haaavk · 2021-05-16T19:28:27Z

I managed to do visualization similar to what is in Plausible.

I'm not very happy about style attributes. I could use some help with that.

CasperVerswijvelt · 2021-05-24T14:06:59Z

I would put this style on the 'bar' element to make it look a little spacier/better:

    top: 4px;
    left: 4px;
    height: calc(100% - 8px);

Maybe the width should also be based on the maximum amount of sessions for an element:
so in your screenshot, 100% would be 44 in the browsers category

And then maybe add those bars for country and operating system tables

CasperVerswijvelt · 2021-05-24T14:10:17Z

Seems like I checked out an outdated version where not all tables had the bars yet, my bad

CasperVerswijvelt · 2021-05-24T14:14:11Z

I do think a width relative to the element with most sessions would be nice, so the differences in bar lenghts are more clear at first glance

CasperVerswijvelt · 2021-05-24T14:28:09Z

shynet/dashboard/templates/dashboard/pages/service.html

+                            style="width: {{location.count|percent:stats.hit_count}}; top: 8px; left: 8px; background-color: var(--color-urge-200-fallback)"
+                        >
+                        </div>
+                        <div class="absolute" style="top: 8px; left: 8px">


replace class="absolute" style="top: 8px; left: 8px" with class="relative" for same effect

Same thing for the other tables

CasperVerswijvelt · 2021-05-24T14:43:33Z

I made my suggested changes in my repo on the percent-visualization-changes branch if you want to use them.

About the relative maximum: Plausible also visualizes the top element as a bar with width 100%, what do you think @milesmcc ?

milesmcc · 2021-05-24T15:28:11Z

Yeah I do think it would be good to scale the bars so that the first/highest element has full width. Makes it easier to distinguish the relative sizes.

haaavk · 2021-05-24T17:52:12Z

I think showing actual percent feels more natural. It's easier to understand and shows more information.
With absolute max it is possible to compare date between cards.
Relative max make it easier to compare date in one card and it's notable advantage.
On the other hand it may confuse some users and makes it impossible to compare data from different cards.
In my opinion there are more arguments for absolute max.
Plausible is popular but it doesn't mean they are right about everything.

CasperVerswijvelt · 2021-05-25T19:06:01Z

shynet/dashboard/templates/dashboard/pages/service.html

+                            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">


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

CasperVerswijvelt · 2021-05-25T19:06:18Z

shynet/dashboard/templates/dashboard/pages/service.html

+                            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">


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

CasperVerswijvelt · 2021-05-25T19:07:48Z

shynet/dashboard/templates/dashboard/pages/service.html

+                    <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)"


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

CasperVerswijvelt · 2021-05-25T19:16:06Z

shynet/dashboard/templates/dashboard/pages/service.html

+                    <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)"


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

CasperVerswijvelt · 2021-05-25T21:04:29Z

I do think, for example in this case, that making the bars as big as possible would improve the clarity of the differences between bar widths a lot.

I understand that you would then no longer be able to compare the bars between tables, but that is not something I do anyway. Can't speak for others though.

I just think there is a lot of unused whitespace that could be used to make the differences between the bars clearer.

haaavk · 2021-05-26T06:43:25Z

We just want to achieve different things with this visualization. Maybe it should be customizable in settings?

CasperVerswijvelt · 2021-05-26T06:45:54Z

We just want to achieve different things with this visualization. Maybe it should be customizable in settings?

That sounds good to me :)

CasperVerswijvelt · 2021-05-26T17:20:49Z

TEMPLATE.env

@@ -96,3 +96,6 @@ LOCATION_URL=https://www.openstreetmap.org/?mlat=$LATITUDE&mlon=$LONGITUDE
 # How many services should be displayed on dashboard page?
 # Set to big number if you don't want pagination at all.
 DASHBOARD_PAGE_SIZE=5
+
+# Should background bars be scaled to full width?
+USE_RELATIVE_MAX_IN_BAR_VISUALIZATION = True


Code style, remove spaces around =

CasperVerswijvelt · 2021-05-26T17:25:13Z

shynet/shynet/settings.py


 # How many services should be displayed on dashboard page?
 DASHBOARD_PAGE_SIZE = int(os.getenv("DASHBOARD_PAGE_SIZE", "5"))
+
+# Should background bars be scaled to full width?
+USE_RELATIVE_MAX_IN_BAR_VISUALIZATION = True


USE_RELATIVE_MAX_IN_BAR_VISUALIZATION = os.getenv("USE_RELATIVE_MAX_IN_BAR_VISUALIZATION", "True") == "True"

CasperVerswijvelt · 2021-05-26T17:48:18Z

shynet/dashboard/templates/dashboard/includes/bar.html

+        style="width: {{count|percent:total}}; top: 6px; left: 0px; height: calc(100% - 12px); background-color: var(--color-urge-200-fallback)"
+    >
+    </div>
+{% endif %}


simplify to

<div class="absolute h-6" style="width: {% if use_relative_max %}{{count|percent:max}}{% else %}{{count|percent:total}}{% endif %}; top: 6px; left: 0px; height: calc(100% - 12px); background-color: var(--color-urge-200-fallback)" ></div>

?

I know it probably should be done this way. This line just looks so ugly.

I know :p
It's ugly code vs duplicate code

CasperVerswijvelt · 2021-05-26T17:51:57Z

shynet/dashboard/templates/dashboard/pages/service.html

-                        </div>
-                        <div class="relative">
+                        {% include 'dashboard/includes/bar.html' with count=country.count max=stats.countries.0.count total=stats.session_count %}
+                        <div class="relative flex items-center">
                            <span class="{{country.country|flag_class}}"></span> {{country.country|country_name}}


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

flex-none needs to be on the

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

line, not the one above

milesmcc · 2021-06-13T18:11:35Z

This is fantastic. Merged. Will be in the next release! :)

haaavk added 5 commits May 16, 2021 18:06

Black autoformat

e4b265a

Add percent and divide filters

86fef58

Remove divide filter

934a25a

Add percents in brackets and visualization

fcbe072

Apply percents and visualization to all data

86c1cce

haaavk mentioned this pull request May 24, 2021

Add hits to chart data #141

Merged

CasperVerswijvelt reviewed May 24, 2021

View reviewed changes

haaavk added 2 commits May 25, 2021 20:27

Switch absolute to relative

8f0c8c6

Increase percent bar height

fc6e950

CasperVerswijvelt suggested changes May 25, 2021

View reviewed changes

haaavk added 4 commits May 26, 2021 09:51

Move bar to separated file

beae3cf

Add USE_RELATIVE_MAX_IN_BAR_VISUALIZATION to settings

82b15fc

Add flex items-center

5d0d6a3

Move bar to left

1363c50

CasperVerswijvelt reviewed May 26, 2021

View reviewed changes

haaavk added 6 commits May 26, 2021 21:56

Remove spaces

475f792

Fix USE_RELATIVE_MAX_IN_BAR_VISUALIZATION

fc65097

Remove unnecessary True

d5296f5

Add bar_width tag

c2b1add

Add flex-none to make flag not get squished

d0291e9

Fix flex-none

84c6f55

milesmcc merged commit fcea6d3 into milesmcc:master Jun 13, 2021

haaavk deleted the percent-visualization branch February 4, 2022 08:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Percents + visualization #139

Percents + visualization #139

haaavk commented May 16, 2021

CasperVerswijvelt commented May 24, 2021

CasperVerswijvelt commented May 24, 2021

CasperVerswijvelt commented May 24, 2021

CasperVerswijvelt May 24, 2021

CasperVerswijvelt commented May 24, 2021

milesmcc commented May 24, 2021

haaavk commented May 24, 2021 •

edited

CasperVerswijvelt May 25, 2021

CasperVerswijvelt May 25, 2021

CasperVerswijvelt May 25, 2021

CasperVerswijvelt May 25, 2021

CasperVerswijvelt commented May 25, 2021

haaavk commented May 26, 2021

CasperVerswijvelt commented May 26, 2021

CasperVerswijvelt May 26, 2021

CasperVerswijvelt May 26, 2021

CasperVerswijvelt May 26, 2021

haaavk May 26, 2021

CasperVerswijvelt May 26, 2021

CasperVerswijvelt May 26, 2021

CasperVerswijvelt May 31, 2021

milesmcc commented Jun 13, 2021

Percents + visualization #139

Percents + visualization #139

Conversation

haaavk commented May 16, 2021

CasperVerswijvelt commented May 24, 2021

CasperVerswijvelt commented May 24, 2021

CasperVerswijvelt commented May 24, 2021

Choose a reason for hiding this comment

CasperVerswijvelt commented May 24, 2021

milesmcc commented May 24, 2021

haaavk commented May 24, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CasperVerswijvelt commented May 25, 2021

haaavk commented May 26, 2021

CasperVerswijvelt commented May 26, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

milesmcc commented Jun 13, 2021

haaavk commented May 24, 2021 •

edited