[Idea] Enhanced UX for rankings

[ksarise]

Description

Feature request for implementation of a new statistical indicator by changing an existing widget and/or creating a new one with a progress chart.

Problem

It is impossible to find out the student's current position from the home page. On the home page in the Your Stats card there is no information about the rating, only points. Using them you cannot find out your place in the standings of our special Olympiad :3.

The additional action of going to the overall rating tab is required. But this still does not make it clear that the rating has up or down if the user did not remember the previous result. There is no ranking history, which complicates the student’s self-assessment and does not provide a clear understanding of progress and fulfillment of the condition (70% of the best student).

Objectives

• Improved User Experience: more visual control
• Accent on milestone: measurable and simple indicators to support motivation
• Progress history: where we were and where we are

Detailed Description

My ideas for enhancing the interface consist of several points:

1. On the Home page, add a position metric to the “Your Stats” ant-card same as in the Dashboard.

2. On the Dashboard in the “Your stats”'s ant-card add an indicator of changes in position in the overall rating hereinafter referred to as “delta”.

   1. Delta has a numerical expression for more precise measurement.

   2. Delta can be a different color (gray/green/red) depending on the sign of the number.

   3. [Optional] Delta can be supplemented with an icon that visually displays the sign of the number.

      • It would be more logical to use Ant-design icons:
        • MinusOutlined for zero delta
        • CaretUpFilled for positive delta
        • CaretDownFilled for negative delta

   But I've already found other free icons and I love them, whatever.

3. On the Dashboard create an additional “statistics” widget , which is a container for a graph of position history

   1. The graph (Line plot) is implemented by already used library @antv/g2plot.
   2. The graph displays the exact position of the student(Oy) at a specific time measure(Ox).
      • I suggest course week number as a time measure because it gives sufficient information and optimizes the number of items stored in the database.
   3. [Optional] Displaying amount of points in a specific week when selecting a graph point
   4. [Optional] Annotations: line showing the 70% limit relative to the best student's performance each week. Along with informative annotations: text
   5. [Optional] Applying an annotations: regional filter when a graph intersects a border line.

Possible Implementation

Using the original design i tried to show a potential implementation of delta and progress graph In my mind it might look something like this:

And Deploy

Build

Project source

I used @opd/g2plot-react instead of @antv/g2plot because I had problems with deployment on pages. But the API is common, so there is not much difference.

Also, after deployment idkw appeared some unexpected bugs:

• the endless loop stopped working
• all types of annotations are not displayed
• very strange line shadow
• series field crashes everything.

But I'm just getting to know React and my paws are so little.

Bonus idea

Add achievements for outstanding promotion in the ranking, or vice versa, persistent presence within high positions. For example:

• For promotion to more than 1000 ranks (excluding first month) - badge "High-Rise Climbing"
• Stayed in the top 100 for the entire stage - badge "Hard-Boiled"
  and etc.