Improve the visual representation of the sales funnel in CRM Analytics

[DjangoCRM]

Currently, all sales stage (Stage) steps are displayed in one color and when you hover over them with your mouse, the text becomes unreadable.

The steps can have different colors. Well, you need to remember that the number of Stages for different companies can be different. Therefore, perhaps two interlaced colors will be enough.

template - 'admin/analytics/salesfunnel/sales_funnel_change_list.html'
ModelAdmin - analytics.site.salesfunnelsadmin.py

[Sohamactive]

i can contribute to this issue, but please can you count this under Hacktoberfest, so that i can get a pr then ! it would be very benefitial for me !! it would be very grateful of you.

[DjangoCRM]

@Sohamactive Hi, I think you will be counted under Hacktoberfest automatically using GitHub API.

[Sohamactive]

yes thankyou , i have clarified with the coordinators and they said that labelling the issue is not necessary if the repo is marked with the same topic.

So I’ve been looking into this issue and drafted a template change that adds alternating bar colors and improves tooltip readability.

Here’s the approach I took:

• Introduced two alternating bar colors (.bar-odd = green, .bar-even = blue).
• Improved tooltip styling with dark background, white text, and smooth fade-in on hover.
• Bars slightly brighten on hover for better visibility.
• Used {% if forloop.counter|divisibleby:2 %} to assign odd/even classes dynamically.

Here’s the draft template (I couldn’t test multiple stages locally since my setup data only has one stage, but the logic should work for any number of stages):

{% extends "admin/change_list.html" %}
{% load i18n %}
{% block content_title %}
    <h1>{% translate 'Sales funnel for last 365 days' %}</h1>
{% endblock %}
{% block result_list %}
<style>
    .bar-chart {
        justify-content: space-around;
        height: 100%;
        padding-top: 60px;
        overflow: hidden;
    }
    .bar-chart .bar {
        flex: 100%;
        align-self: flex-end;
        position: relative;
        height: 60px;
        margin: 2px auto;
        border-radius: 4px;
        transition: filter 0.2s;
    }

    /* alternating colors */
    .bar-odd  { background-color: #4CAF50; }   /* green */
    .bar-even { background-color: #2196F3; }   /* blue */

    .bar-chart .bar:hover {
        filter: brightness(115%);
    }

    .bar-chart .bar .bar-tooltip {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        font-weight: bold;
        opacity: 0;
        white-space: nowrap;
        background-color: rgba(0, 0, 0, 0.85);
        color: #fff;
        padding: 6px 12px;
        border-radius: 4px;
        pointer-events: none;
        z-index: 999;
        transition: opacity 0.2s;
    }
    .bar-chart .bar:hover .bar-tooltip {
        opacity: 1;
    }
</style>

<div class="results">
    <h2>{% translate 'Number of deals closed/lost at each stage.' %}</h2>
    <div class="results">
        <div class="bar-chart">
            {% for x in sales_funnel %}
                <div class="bar {% if forloop.counter|divisibleby:2 %}bar-even{% else %}bar-odd{% endif %}" style="width:{{x.pct}}%">
                    <div class="bar-tooltip">
                        {{x.stage__name}}: {{ x.total}}<br>
                        {% if not forloop.last %}{{ x.perc }}{% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}
{% block pagination %}{% endblock %}

Would you like me to open a PR with this after October 1st (so it counts towards Hacktoberfest), or should I go ahead sooner?

[DjangoCRM]

Thanks for your efforts!
PR after October 1st will be ok.

[Sohamactive]

can you assign this to me if you agree so that i can be assured that i will be working on this

[DjangoCRM]

Of course.
Here's what your funnel looks like.

As you can see, the stage names are missing.
They only appear when you hover over them.
This needs to be fixed.

[Sohamactive]

i see this and will fix this,thanks so much for the clarification

[Sohamactive]

Hi @DjangoCRM,

I've made some improvements to the sales funnel visualization template. Could you please review these changes?

{% extends "admin/change_list.html" %}
{% load i18n %}
{% block content_title %}
    <h1>{% translate 'Sales funnel for last 365 days' %}</h1>
{% endblock %}
{% block result_list %}
<style>
    .bar-chart {
        justify-content: space-around;
        height: 100%;
        padding-top: 60px;
        overflow: hidden;
    }
    .bar-chart .bar {
        flex: 100%;
        align-self: flex-end;
        position: relative;
        height: 60px;
        margin: 2px auto;
        border-radius: 4px;
        transition: filter 0.2s;
    }


    /* alternating colors */
    .bar-odd  { background-color:  #4CAF50; }   /* green */
    .bar-even { background-color:  #2196F3; }   /* blue */

    .bar-chart .bar:hover {
        filter: brightness(115%);
    }

    .bar-chart .bar .bar-tooltip {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        font-weight: bold;

        /* initially 0 */
        opacity: 1;
        white-space: nowrap;
        
        /* variable coulour for dark/light mode */
        color: var(--body-fg, #333333);
        padding: 6px 12px;
        border-radius: 4px;
        pointer-events: none;
        z-index: 999;
        transition: color 0.2s;
    }

    /* commented out hover effect */
    /*.bar-chart .bar:hover .bar-tooltip {
        opacity: 1;
    }*/
</style>

<div class="results">
    <h2>{% translate 'Number of deals closed/lost at each stage.' %}</h2>
    <div class="results">
        <div class="bar-chart">
            {% for x in sales_funnel %}
                <div class="bar {% if forloop.counter|divisibleby:2 %}bar-even{% else %}bar-odd{% endif %}" style="width:{{x.pct}}%">
                    <div class="bar-tooltip">
                        {{x.stage__name}}: {{ x.total}}<br>
                        {% if not forloop.last %}{{ x.perc }}{% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}
{% block pagination %}{% endblock %}

Changes made:

• Made tooltip text always visible (removed hover-only display)
• Improved theme compatibility by using CSS custom properties for text color
• Removed tooltip background for a cleaner, more minimalist appearance
• Enhanced accessibility by making information always available

Files modified:

• analytics/templates/admin/analytics/salesfunnel/sales_funnel_change_list.html

The main improvements focus on better user experience and theme integration. The tooltips now respect the admin interface's color scheme automatically.

Would you like me to submit this as a pull request on october 1 or are there any changes still needed to be rectified?