Skip to content

Commit db36133

Browse files
authored
docs: detailed cohort description + component class (#1192)
1 parent 5af868e commit db36133

File tree

5 files changed

+30
-13
lines changed

5 files changed

+30
-13
lines changed

docs/components/cohort.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
---
22
title: Component - Cohort
33
order: 2
4-
description: Cohort component in Unfold theme
4+
description: A powerful visualization component for cohort analysis that displays user behavior patterns over time in a structured table format, perfect for tracking retention and engagement metrics in Django Unfold admin.
55
---
66

77
# Cohort component
88

9-
The cohort component allows you to display cohort analysis data in a table format. It's useful for analyzing user behavior and retention over time. Unfold provides a default implementation of the cohort component. The only important parameter is the `data` parameter, which is a dictionary that contains a more complex data structure.
9+
The cohort component is a powerful visualization tool that presents cohort analysis data in a structured table format. It enables you to track and analyze how groups of users (cohorts) behave over specific time periods, making it particularly valuable for measuring retention, engagement patterns, and user lifecycle metrics. Unfold provides a ready-to-use implementation of this component that requires minimal setup. To use it, you only need to provide the `data` parameter - a dictionary containing the cohort information with a specific structure that defines headers, rows, and cell values for the analysis table.
1010

1111

1212
## Default cohort component implementation in template
1313

14-
In template you can use the default implementation of the cohort component by using the following code below. The `component_class` parameter is the name of the component class that you will create in the next section and it will prepare the data for the cohort component.
14+
You can use the default implementation of the cohort component in your template with the following code. The `component_class` parameter refers to the name of the component class that will prepare the data for the cohort component, which we'll create in the next section.
1515

1616
```html
1717
{% load unfold %}
@@ -20,7 +20,7 @@ In template you can use the default implementation of the cohort component by us
2020
{% endcomponent %}
2121
```
2222

23-
If you don't want to use `component_class` parameter, you can prepare `data` in the dashboard callback function and use it like this:
23+
Alternatively, if you prefer not to use the `component_class` parameter, you can prepare the `data` directly in your dashboard callback function and pass it to the component like this:
2424

2525
```html
2626
{% load unfold %}
@@ -31,13 +31,14 @@ If you don't want to use `component_class` parameter, you can prepare `data` in
3131

3232
## Custom cohort data preparation in component class
3333

34-
Below you can see an example of a component class that prepares the data for the cohort component. The component in template will receive the `data` parameter that is passed to the `get_context_data` method.
34+
Here's an example of a component class that prepares data for the cohort component. When used in a template, the component will receive the `data` parameter that has been processed and returned by the `get_context_data` method.
3535

3636
```python
3737
# admin.py
3838

39-
from unfold.components import BaseComponent
39+
from unfold.components import BaseComponent, register_component
4040

41+
@register_component
4142
class MyCohortComponent(BaseComponent):
4243
def get_context_data(self, **kwargs):
4344
context = super().get_context_data(**kwargs)

docs/components/component_class.md

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
11
---
22
title: Component class
33
order: 1
4-
description: Component class for custom component preprocessing
4+
description: Create and register custom component classes in Django Unfold to preprocess data before rendering, separating business logic from presentation templates for cleaner, more maintainable code.
55
---
66

77
# Component class
88

9-
Each component in Unfold theme has a component class that is responsible for preparing the data for the component. The component class is optional and if you don't want to use it, you can pass the data directly to the component in the template.
9+
Unfold's component system features specialized component classes designed to preprocess and prepare data for rendering. These component classes are completely optional - you have the flexibility to either leverage them for handling data preparation logic or bypass them entirely by passing data directly to components in your templates. The choice depends on your specific needs and preferences for each use case.
10+
11+
## Component registration
12+
13+
For Unfold to recognize and utilize your custom component classes, each class must be registered within the system using the `register_component` decorator. This registration process is essential as it makes your component discoverable by Unfold's component rendering system, allowing it to be referenced by name in templates.
14+
15+
The registration mechanism creates a mapping between the component class name and its implementation, enabling the template engine to instantiate the correct class when the component is invoked. Without proper registration, Unfold would be unable to locate your component class when referenced in template files.
1016

1117
```python
1218
# admin.py
1319

14-
from unfold.components import BaseComponent
20+
from unfold.components import BaseComponent, register_component
1521

22+
23+
@register_component
1624
class MyComponent(BaseComponent):
1725
def get_context_data(self, **kwargs):
1826
context = super().get_context_data(**kwargs)
@@ -22,7 +30,11 @@ class MyComponent(BaseComponent):
2230
return context
2331
```
2432

25-
You can then use the component class in your template like this:
33+
## Using component classes in templates
34+
35+
After registering your component class, you can reference it in your templates by its class name. This is done using the `component_class` parameter when invoking a component. When the template is rendered, Unfold will automatically instantiate the specified component class, execute its `get_context_data` method, and pass the resulting context to the component template.
36+
37+
This approach allows you to separate your data preparation logic from your presentation templates, promoting cleaner code organization and reusability. The component class handles all the data processing, while the template focuses solely on rendering the prepared data.
2638

2739
```html
2840
{% load unfold %}

docs/components/tracker.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,10 @@ Below you can see an example of a component class that prepares the data for the
3737
```python
3838
# admin.py
3939

40-
from unfold.components import BaseComponent
40+
from unfold.components import BaseComponent, register_component
4141

42+
43+
@register_component
4244
class MyTrackerComponent(BaseComponent):
4345
def get_context_data(self, **kwargs):
4446
context = super().get_context_data(**kwargs)

src/unfold/contrib/filters/admin/__init__.py

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
DropdownFilter,
2121
MultipleChoicesDropdownFilter,
2222
MultipleDropdownFilter,
23+
MultipleRelatedDropdownFilter,
2324
RelatedDropdownFilter,
2425
)
2526
from unfold.contrib.filters.admin.numeric_filters import (
@@ -43,6 +44,7 @@
4344
"DropdownFilter",
4445
"RelatedDropdownFilter",
4546
"MultipleDropdownFilter",
47+
"MultipleRelatedDropdownFilter",
4648
"RelatedCheckboxFilter",
4749
"FieldTextFilter",
4850
"TextFilter",

src/unfold/templates/unfold/components/chart/cohort.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<th></th>
66

77
{% for header in data.headers %}
8-
<th class="font-normal px-3 pb-2.5 text-left ">
8+
<th class="font-normal px-3 pb-2.5 text-left">
99
<div class="font-semibold text-font-important-light truncate dark:text-font-important-dark">
1010
{{ header.title }}
1111
</div>
@@ -25,7 +25,7 @@
2525
<tr class="h-full">
2626
<td>
2727
<div class="pr-3 py-2.5">
28-
<div class="font-semibold text-font-important-light dark:text-font-important-dark">
28+
<div class="font-semibold text-font-important-light truncate dark:text-font-important-dark">
2929
{{ row.header.title }}
3030
</div>
3131

0 commit comments

Comments
 (0)