The Profile Page

You need to tell Wazimap what data to show on a place’s profile page, and how to show it.

The Profile Builder Function

When Wazimap builds the profile page for a place, it calls the function defined the profile_builder configuration setting. This function must return a specially-formatted dict-like structure that contains all the information that will be shown on the profile page.

Create a profiles.py file in your project folder and add a function get_profile like in the example below. Remember to set the profile_builder setting in your settings.py to the dotted path to this function, for example:

WAZIMAP['profile_builder'] = 'wazimap_ex.profiles.get_profile'

Here’s a simple example of a profile builder:

from wazimap.data.utils import get_session, get_stat_data

def get_profile(geo, profile_name, request):
    # get a SQLAlchemy database session
    session = get_session()
    data = {}

    try:
        data['demographics'] = get_demographics_profile(geo, session)
        # ... load other sections here

        return data
    finally:
        # tidy up the session
        session.close()

def get_demographics_profile(geo, session)
    # get the number of people for each sex
    sex_dist_data, total_pop = get_stat_data('sex', geo, session)
    return {
        'sex_distribution': sex_dist_data,
    }

In get_profile we simply get a database session and then call get_demographics_profile to do the heavy lifting.

In get_demographics_profile we use the get_stat_data function to get data on the place’s population for the field sex from a relevant Field Table. It does all the work of formatting the results correctly, and we return it under the key sex_distribution.

All that data is then passed into the Profile Page template where you choose how to show the data.

Get Stat Data for Field Tables

The get_stat_data function is powerful and flexible. It finds the appropriate Field Table for the fields you want, fetches data, remaps fields if you need it, calculates percentages if necessary, and adds the metadata required by the profile page.

Get Stat Data for Simple Tables

If you’re working with Simple Tables, you’ll want to use get_datatable and SimpleTable.get_stat_data.

The Profile Page Template

You need to tell Wazimap how to display your stats on a place’s profile page.

The file you want to override is templates/profile/profile_detail.html, you can see what it looks like in the repo. You generally only need to change the profile_detail block.

Create a new file in your project called templates/profile/profile_detail.html that extends the existing template and provides your new content for the profile_detail block:

{% extends 'profile/profile_detail.html' %}

{% block profile_detail %}
... your stats go here ...
{% endblock %}

If you reload your site you’ll see the homepage has your new content. Django uses this template instead of Wazimap’s version, relying on Wazimap for the blocks you don’t override. There are lots of other blocks you can change, take a look at the original file for more ideas.

See also

There’s more information on changing Wazimap templates in Customising Wazimap.

You must still provide the content that goes into each stats block. The easiest right now is to see how other countries do it, such as South Africa’s default census profile.

Profile Page Charts

The Django template for the profile page creates empty slots for each chart, which are filled by Javascript when the page loads. These placeholders look something like this:

<div class="column-half" id="chart-histogram-demographics-age-distribution" data-stat-type="scaled-percentage" data-chart-title="Population by age range"></div>

The column-* class isn’t really important here; that’s just a structural setting that gives the block an appropriate amount of width that can be governed with media queries. What we really care about are the id and data-* attribute values. The id value tells the constructor what type of chart to draw and which data to use.The data attributes allow you to optionally make changes to how the chart is drawn.

Chart ID

The id tells Wazimap everything it needs to know to create this chart from the profile data. The id is broken into a few parts:

chart-<chartType>-<chartData>

The chartType, in our example case histogram, tells Wazimap the type of chart to draw. Wazimap supports:

  • pie
  • column
  • grouped_column
  • histogram
  • bar
  • grouped_bar

The chartData provides the path to the data that should fill this chart. Wazimap starts at the top, in this case demographics, and then drills down based on the rest of the keys: demographics > age > distribution. That’s where Wazimap expects to find the data to draw the chart.

Data Attributes

You can use optional data attributes to change how the chart is shown.

Use data-chart-title to specify a title to place above the chart.

Use data-initial-sort to change how pie charts are sorted. Determines which category to highlight when the chart is drawn. Using data-initial-sort="-value" will display the highest data value in the chart first. Otherwise the first value in the chart data will be used.

Use data-qualifier to add a trailing line below the chart, prepended with an “*” character. This is useful when charts require a little extra context.

Use data-stat-type to provide formatting hints for the chart’s language and display. Standard chart behavior may be overriden with these values:

  • percentage: Adds a “%” character after figures in the chart. Sets chart domain to 0-100. Uses “rate” in comparison sentences.
  • scaled-percentage: Does the same things as “percentage,” but also scales the chart so that the highest category value takes up the full vertical space available.
  • dollar: Adds a “$” character before figures in the chart. Uses “amount” in comparison sentences.