Application Widgets

Elements Object

This object is used to display an indicator with different labels, icons and values.

You can create your own indicator inheriting from StartsElement or BoxTileElement class, then you must implement all methods.

class MemberStats(StatsElement):
    def get_top_icon(self):
        return "fa fa-user"
    def get_top_text(self):
        return " Total Males"
    def get_count(self):
        return "2,500"

    def get_count_color(self):
        return 'green'

    def get_bottom_color(self):
        return "red"

    def get_bottom_text(self):
        return "From last Week"

    def get_bottom_icon(self):
        return "fa fa-sort-asc"

    def get_bottom_icon_text(self):
        return "20%"
../_images/member-stats-element.png
class ClockTime(StatsElement):

    def get_top_icon(self):
        return "fa fa-clock-o"

    def get_top_text(self):
        return "Average Time"

    def get_count(self):
        return "123.50"

    def get_bottom_icon_text(self):
        return "2%"

    def get_bottom_color(self):
        return "green"

    def get_bottom_text(self):
        return "From last Week"

    def get_bottom_icon(self):
        return "fa fa-sort-asc"
../_images/clock-time-element.png
class SignupsBox(BoxTileElement):
    def get_icon(self):
        return "fa fa-caret-square-o-right"
    def get_number(self):
        return "179"
    def get_title(self):
        return "New Sign ups"
    def get_subtitle(self):
        return "Lorem ipsum psdea itgum rixt."
../_images/signups-box.png

Exist a StatsCountList class used to display StartsElement in a row, and many elements as we want

class StatsCountListExample(StatsCountList):
    stats_views = [ClockTime, MemberStats, ClockTime, ClockTime]
../_images/stats-count-list-example.png

Exist a BoxStatsCountList class for the same purpose but to display BoxTileElement

class BoxTileElementExample(BoxStatsCountList):
    stats_views = [SignupsBox, SignupsBox, SignupsBox,SignupsBox ]
../_images/box-tile-element-example.png

Chart Widget

You can register automatically chart widgets api creating a gtcharts.py in your app, djgentelella look for charts view for all apps in INSTALLED_APP.

This app use Chartjs for build chart, you need to provide the right structure in the dataset, for examples see here

from djgentelella.groute import register_lookups

@register_lookups(prefix="verticalbar", basename="verticalbar")
class VerticalBarChartExample(BaseChart, VerticalBarChart):

       def get_labels(self):
            return [...]
       def get_def get_datasets(self):
            return ...
       def get_title(self):
            return {'display': True,
                    'text': 'Chart.js Example'
                    }

You can use @register_lookups in any part of your code, but remember to import it on url.py, and set your app before ‘djgentelella’. Also prefix and basename needs to be unique.

To show in templates you can use this snippet:

<div class="row">
    <div class="col-md-4">
    {% include 'gentelella/widgets/chartjs.html' with graph_url=context_url_variable %}
    </div>
</div>

To build url you can use

from django.urls import reverse
context_url_variable = reverse(verticalbar-list)

Note

To build the url you need to append list to basename like <basename>-list

Available Charts

  • VerticalBarChart

  • HorizontalBarChart

  • StackedBarChart

  • LineChart

  • PieChart

  • DoughnutChart

  • ScatterChart

Note

Pie and Doughnut have different way to build datasets, see chartjs documentation for more.

Chart Options

You can build your own options overwritting this methods.

  • get_responsive

  • get_legend

  • get_title

  • get_tooltips

  • get_hover

  • get_scales

  • get_elements

  • get_animation

You can overwrite JS callbacks adding your function on document.chartcallbacks with a name,and register that name on server side as callback field now only options.tooltips.callbacks.beforeLabel and options.tooltips.callbacks.label callbacks are supported.

../_images/charts.png

Pallete widget

It is a kind of helper, that is located at the bottom left-hand side corner, with a mail icon. This widget is used to add a description for each input field in the different displayed forms of the views. When we hit the mail icon the helper modal is displayed.

The help button appears at the left side of the label for each input field as a question mark, when we hit the show button in the helper modal.

We can see, add, modify, and delete descriptions for each field.

../_images/pallete.gif

How to add this widget ??

You must create MenuItem as follow:

Note: the only place in which this widget can be place is in the sidebar footer.

item = MenuItem.objects.create(
    parent = None,
    title = '',
    url_name ='djgentelella.menu_widgets.palette.PalleteWidget', #path to the widget file
    category = 'sidebarfooter', # the only place in which this widget can be place
    is_reversed = False,
    reversed_kwargs = None,
    reversed_args = None,
    is_widget = True, # must be set to true as exist other kind of element
    icon = 'fa fa-envelope-o', # you can use fontawesome icons
    only_icon = True # this flag must be True
)

Notifications app

How to install it ??

After add ‘djgentelella’ to INSTALLED_APPS variable in the settings file, you will be able to use this app.

Then to use notification you must use create_notification function.

from djgentelella.notification import create_notification

Create a notification for provided user, and send email notification if it’s set

There is two default setting you can configurate on django settings

  • NOTIFICATION_DEFAULT_SUBJECT

  • NOTIFICATION_DEFAULT_TEMPLATE

All settings have a default value provided by django-gentelella-widgets, but you can overwrite it.

param description:

description to show

param user:

user to be notified

param message_type:

type of message available options (info, default, success, warning, danger) there is no priority here yet

param category:

used for group notifications (not required)

param link:

complete url or reverse name (see django reverse)

param link_prop:

when is set, the link is take as reverse name, you need to provide dict of args and kwargs

param request:

it’s django request used on email and for make a complete uri on reverse

param send_email:

True/False specify you want to send a email notification

param email_subject:

alternative subject message

param email_template:

alternative email template

param email_context:

extra context for email template

return:

notification object

You can also add a widget to handle notifications from navbar.

class djgentelella.notification.widgets.NotificationMenu(context)

This widget help to create a notification on menú, was tested only on top nav

MenuItem.objects.create(
    parent = None,
    title = 'top_navigation',
    url_name ='djgentelella.notification.widgets.NotificationMenu',
    category = 'main',
    is_reversed = False,
    reversed_kwargs = None,
    reversed_args = reverse('notifications'),
    is_widget = True,
    icon = 'fa fa-envelope',
    only_icon = False
)

The follow arguments has a special behaivior

  • reversed_args: allow you to set custom URL for notification management API

  • reversed_kwargs: allow you to set custom URL for notification list

You can set both as None to use default values.