feature: fancy statistics (without extra dependencies) by Jocho-Smith · Pull Request #394 · redimp/otterwiki

Jocho-Smith · 2026-02-21T14:54:49Z

The Idea is to have a dashboard in the settings to review the number of commits made by users.

Here is how it looks like now:

On my machine, it passes all the tests.

Note:

I'm unhappy of the location of the js in dashboard.html. Like I say in the commit message, such a script is likely better located in wiki.html, however I can't estimate the implications this would have on the entire otterwiki. Do I oversee an obvious way to improve on this?
Since otterwiki handels Mermaid in Markdown differently then what I do here, the dark mode gets ignored and the colors are always optimized for light mode.

Happy to hear any feedback :)

This reverts commit 9057f8e.

add admin_dashboard() that 1. builds Mermaid pie chart 2. renders the markdown to html add item *dashboard* to settings side bar add dashboard.html NOTE: Mermaid did not render by itself outside of .md files, so I hat 2 choices: either in dashboard.html or in wiki.html. Doing it in dashboard.html is ugly, but that way I ensured I understand its implications to the rest of otterwiki. adding it to wiki.html would conceptually fit better, but I doubt other system pages (user management, about, ...) will benefit from global Mermaid rendering

Jocho-Smith · 2026-02-22T19:18:27Z

An ideas I just had: I noticed that after ~12 users/entries the pie chart starts to look a bit messy. I could modify the function to only show the top 10 users and concatenate the remainder users into on entry.

redimp

Hey @Jocho-Smith, thank you for this PR. An Otter Wiki lacks anything even roughly in the direction of fancy statistics. This PR might lead to a nice enhancement.

The current state of the PR is more a draft. Please read the review carefully and implement the required changes.

I'm thinking about what else might be nice to see when looking at statistics/graphs of a wiki:

a code frequency graph with additions and deletions
an activity heat map, showing when changes happened

I was thinking about dynamically loading the graphs, but since all of these could be computed from the same log query this can be done quickly enough.

redimp · 2026-02-22T21:56:03Z

otterwiki/templates/admin/dashboard.html

+
+{% block title %}
+  <title>Contribution Dashboard</title>
+<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>


General Note: We want to keep An Otter Wiki free of external dependencies. It should always be possible to run it in an air-gapped environment, so using any external source is not possible.

Mermaid (11.6.0) is distributed with An Otter Wiki, there is no need to load it from a cdn.

redimp · 2026-02-22T21:58:46Z

otterwiki/templates/admin/dashboard.html

+{% block title %}
+  <title>Contribution Dashboard</title>
+<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+<script>


Please do not place scripts in the {% block title %} there is a {% block js %}.

An example how to load mermaid can be found in otterwiki/templates/syntax.html:

otterwiki/otterwiki/templates/syntax.html

Lines 12 to 17 in e951fed

{% block js %}

{{ super() }}

{# force load libraries in syntax documentation #}

{% set force_load_libraries = true %}

{% include 'snippets/renderer_js.html' %}

{% endblock %}

Not sure how I overlooked this.. This way it also behaves properly with dark and light mode <3

redimp · 2026-02-22T22:01:01Z

otterwiki/templates/settings.html

+    <span class="sidebar-icon" style="min-width: 3rem;">
+        <i class="fas fa-chart-pie"></i>
+    </span>
+    Dashboard


This feature seems to mostly target statistics, please rename the sidebar entry to 'Statistics'.

redimp · 2026-02-22T22:03:03Z

otterwiki/views.py

+
+    def mermaid_commit_block(title: str, git_args: list) -> str:
+        """Run git log, count commits per author, return a Mermaid pie chart as markdown."""
+        result = subprocess.run(


Please use the otterwiki.gitstorage module for fetching the log file. No need to reinvent the wheel.

redimp · 2026-02-22T22:04:44Z

otterwiki/views.py

        return otterwiki.preferences.handle_mail_preferences(request.form)


+@app.route("/-/admin/dashboard")


We want to prevent to have any complex logic in the otterwiki.views Module. Please move the logic into e.g. otterwiki.statistics.

redimp · 2026-02-22T22:08:09Z

otterwiki/views.py

+    markdown_content = "\n\n".join([all_commits_block, last_3_months_block])
+
+    # Render Markdown
+    htmlcontent, _, library_requirements = render.markdown(markdown_content)


I'm torn here ... It is a nice idea to use the renderer for displaying internal statistics module. On the other hand, just adding the mermaid plain to the template skips the need for using the renderer here.

I removed the renderer now.

Jocho-Smith · 2026-02-23T10:38:01Z

Thank you for this extensive feedback! I'll put in some time to implement the required changes.

I'm thinking about what else might be nice to see when looking at statistics/graphs of a wiki:

a code frequency graph with additions and deletions

I don't understand what exactly you mean by that. Can you share a picture of it?

an activity heat map, showing when changes happened

Actually I implemented this some time ago, however I don't see how to do that with Mermaid. What package would you be fine to distribute it within otterwiki for this Statistics feature? I've seen Flask+Plotly some times.

Here is how I did it with seaborn:

…s block

…of the markdown renderer entirely

…ith many users

Jocho-Smith · 2026-02-23T15:45:51Z

I implemented all suggested changes now. Thanks again for exactly pinpointing what needed to be done.

I also implemented the above mentioned cap at 10 users (which can be changed later, potentially with the settings.cfg)

Also the 30 days is just a value I picked now it can also be changed to other values, like I did here:

Jocho-Smith · 2026-02-23T15:50:39Z

So what do you think how should we continue from here?

Do you want to take this simple mermaid statistics feature as it is - maybe as an "experimental feature" (as in 'Repository Management') - or should we dive into more sophisticated packages (like Plotly)?

redimp · 2026-02-28T11:59:38Z

This looks much better thanks for the effort.

Are Pie Charts the best option?

I checked how these charts look like for different projects and came to the conclusion that Pie Charts are not the best way for displaying this. In most projects the number of commits is very unbalanced a lot of people only have a small number of commits. I think a bar chart would be better suited, like github does it, see https://github.com/redimp/otterwiki/pulse:

I gave it a try and this looks readable to me:

Code:

```mermaid
---
config:
  xyChart:
    showDataLabel: true
    width: 500
    height: 400
  themeVariables:
    plotColorPalette: '#1890ff'
---
xychart
title "February 21, 2026 – February 28, 2026"
y-axis "Commits"
x-axis ["redimp", "deseven", "ryanwhowe", "Prodeguerriero","gokomer"]
bar [9,3,2,2,1]
```

Note: I updated mermaid to 11.12.3 to make this work.

What do you think?

Other options for diagrams

For now I don't want to add more dependencies if not really necessary. Adding e.g. plotly opens a special can of worms. But I'm open for suggestions/PRs with working examples (layout, theme, light/dark mode).

More diagrams to display:

Heapmap: Yes what you created with seaborn is exactly what I had in mind. This needs no library, you can build this with a html table ;)

Layout

Another thing to optimize is the layout of the diagrams, the two diagrams shouuld be displayed side by side if the screen size allows it (so everything wider than mobile screens).

Jocho-Smith · 2026-02-28T12:14:03Z

Hey @redimp

Note: I updated mermaid to 11.12.3 to make this work.

What do you think?

I love it! This was actually my initial plan, I just accepted the current mermaid version and went with what is available. Obviously one can just update mermaid xD

This needs no library, you can build this with a html table ;)

Cool idea, I'll work on that.

Another thing to optimize is the layout of the diagrams, the two diagrams shouuld be displayed side by side if the screen size allows it (so everything wider than mobile screens).

This could probably also be done with just html/css - I think flexbox does the job. I'll try that out.

plan for this PR

So what would you suggest is the objective of this PR? xychart + html heatmap + flexbox = merge? Or should we discus this more?

Sorry btw. for crashing in with a PR, without opening an Issue for discussion first.

redimp · 2026-02-28T13:01:44Z

So what would you suggest is the objective of this PR? xychart + html heatmap + flexbox = merge? Or should we discus this more?

In general I merge PRs when I have nothing to ask for anymore ;)

I'm way more picky for completely new features: In this case, when this statistics page looks nice and I think users of An Otter Wiki can get something useful from it, I will merge it.

Jocho-Smith · 2026-02-28T13:06:42Z

Ok. Then I guess we will see where this goes.

For now I'll work on the things you suggested ✌️

Jocho-Smith and others added 3 commits February 21, 2026 13:51

Update title to 'An Otter Wiki test'

9057f8e

Revert "Update title to 'An Otter Wiki test'"

1706427

This reverts commit 9057f8e.

redimp requested changes Feb 22, 2026

View reviewed changes

Jocho-Smith changed the title ~~feature: Dashboard for number of commits~~ feature: fancy Statistics Feb 23, 2026

Johannes Schmidt added 3 commits February 23, 2026 11:42

renamed sidebar entry from Dashboard to Statistics

561a3a3

fix: remove mermaid CDN and use bundled version

a9e2d3e

fixup: proper mermaid load via 'set force_load_libraries = true' in j…

274f482

…s block

Jocho-Smith changed the title ~~feature: fancy Statistics~~ feature: fancy statistics Feb 23, 2026

Johannes Schmidt added 3 commits February 23, 2026 12:47

fix: replaced subproces git command with otterwiki.gitstorage + datetime

36d19ce

renamed all 'dashboard' occurrences as 'statistics'

0e1cbad

fix: moved statistics logic from views.py to statistics.py + got rid …

0db90e2

…of the markdown renderer entirely

Jocho-Smith changed the title ~~feature: fancy statistics~~ feature: fancy statistics (without extra dependencies) Feb 23, 2026

feature: cap the listed users at 10, so the pie chart looks cleaner w…

3ca9ebc

…ith many users

	{% block js %}
	{{ super() }}
	{# force load libraries in syntax documentation #}
	{% set force_load_libraries = true %}
	{% include 'snippets/renderer_js.html' %}
	{% endblock %}

		return otterwiki.preferences.handle_mail_preferences(request.form)


		@app.route("/-/admin/dashboard")

Conversation

Jocho-Smith commented Feb 21, 2026

Uh oh!

Jocho-Smith commented Feb 22, 2026

Uh oh!

redimp left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jocho-Smith commented Feb 23, 2026

Uh oh!

Jocho-Smith commented Feb 23, 2026

Uh oh!

Jocho-Smith commented Feb 23, 2026

Uh oh!

redimp commented Feb 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Are Pie Charts the best option?

Other options for diagrams

More diagrams to display:

Layout

Uh oh!

Jocho-Smith commented Feb 28, 2026

plan for this PR

Uh oh!

redimp commented Feb 28, 2026

Uh oh!

Jocho-Smith commented Feb 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

redimp commented Feb 28, 2026 •

edited

Loading