Skip to content

Commit fc7488d

Browse files
phazonoverloadphazonoverload
authored
Merge pull request #41 from directus/writeup/insights
Write up insights section
2 parents 24174cb + 7ce666f commit fc7488d

File tree

2 files changed

+286
-2
lines changed

2 files changed

+286
-2
lines changed

‎content/9.insights/1.overview.md‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,27 @@
11
---
22
title: Overview
3-
description:
3+
description: Insights is a module in Directus that allows rapid, no-code build-out of analytics dashboards.
44
---
55

66
# Insights Overview
7+
8+
Insights is a module in Directus that allows rapid, no-code build-out of analytics dashboards. It can be used for a variety of use-cases, such as business intelligence, user progress tracking, web traffic conversions, and more.
9+
10+
<!-- TODO: <video autoplay playsinline muted loop controls>
11+
<source src="https://cdn.directus.io/docs/v9/app-guide/insights/insights-20220216A/insights-dashboards-20220216A.mp4" type="video/mp4" />
12+
</video> -->
13+
14+
15+
## Dashboards
16+
17+
<!-- ![Dashboard Grid Area](https://cdn.directus.io/docs/v9/app-guide/insights/insights-20220216A/dashboards-overview-20220216A.webp) -->
18+
19+
The insights module is made up of one or more dashboards, which provide a drag-and-drop canvas where you can create and arrange different [panels](/insights/panels) to easily build out customized analytics. The dashboard area automatically expands as you create additional panels.
20+
21+
::callout{type="info" title="Auto Refresh"}
22+
23+
The auto refresh menu in the sidebar lets you select an interval to refresh dashboard data.
24+
25+
::
26+
27+
You can create a dashboard by clicking on :icon{name="material-symbols:add-circle-rounded"}, then giving it a name, icon and color.

‎content/9.insights/2.panels.md‎

Lines changed: 264 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,268 @@
11
---
2-
description:
2+
description: Panels are the building-blocks you can add onto insights dashboards to create, save and display data analytics.
33
---
44

55
# Panels
6+
7+
<!-- TODO: ![Directus Dashboard Panels](https://cdn.directus.io/docs/v9/app-guide/insights/insights-20220216A/panels-overview-20220216A.webp) -->
8+
9+
Panels are the building-blocks you can add onto insights dashboards to create, save and display data analytics.
10+
11+
## Panel Header Options
12+
13+
<!-- TODO: ![Panel Header Options](https://cdn.directus.io/docs/v9/app-guide/insights/insights-20220216A/panel-header-options-20220216A.webp) -->
14+
15+
All panel types let you set custom text to provide quick and clear context about what a panel represents. Panel header
16+
options are exactly the same for all four panel types. Headers are also totally optional and can be hidden.
17+
18+
- **Visible** – Determines if the header is visible or not.
19+
- **Name** – Sets a name in the header area.
20+
- **Icon** – Sets a small icon by the name.
21+
- **Color** – Sets a color for the icon.
22+
- **Note** – Sets a short description of the icon.
23+
24+
## Labels
25+
26+
<!-- TODO: ![Label Panel Options](https://cdn.directus.io/docs/v9/app-guide/insights/insights-20220216A/label-panel-options-20220216A.webp) -->
27+
28+
This panel allows you to label a group of other panels. Labels do not provide analytics.
29+
Labels essentially help visually group the other panels and give context to your dashboard.
30+
31+
- **Label** – Sets the label text.
32+
- **Color** – Sets the label text color.
33+
34+
## Lists
35+
36+
<!-- TODO: ![List Panel Options](https://cdn.directus.io/docs/v9/app-guide/insights/insights-20220216A/list-panel-options-20220216A.webp) -->
37+
38+
List panels display some number of items from a collection. These items displayed can be filtered by other
39+
criteria as well.
40+
41+
- **Collection** – Selects the collection to rank.
42+
- **Limit** – Limits the number of items that will appear in the dashboard.
43+
- **Sort Field** – Sets the collection field you wish to order results by.
44+
- **Sort Direction** – Sets items to display in ascending or descending order.
45+
- **Display Template** – Defines how list items will be represented. Allows use of field item values as well as custom
46+
text.
47+
- **Filter** – Sets filters to only consider and rank Items that meet some criteria.
48+
49+
## Metrics
50+
51+
<!-- TODO: ![Metrics Panel Options](https://cdn.directus.io/docs/v9/app-guide/insights/insights-20220216A/metric-panel-options-20220216A.webp) -->
52+
53+
Metrics panels allow you to aggregate all items in a field down to a single value.
54+
55+
- **Collection** – Selects the collection.
56+
- **Field** – Selects the field to run aggregate function on.
57+
- **Aggregate Function** – Selects the type of aggregate to perform.
58+
- **Sort Field** – Sets the collection field you wish to order results by.
59+
- **Filter** – Sets filters to only run metrics on items that meet some criteria.
60+
61+
### More on Aggregate Functions
62+
63+
Aggregate functions take a list of values and returns one single value.
64+
65+
- **Count** – Counts the number of items in a field.
66+
- **Count (Distinct)** – Counts the number of unique items in a field.
67+
- **Average** – Averages values of all items in a field.
68+
- **Average (Distinct)** – Averages values of all unique items in a field.
69+
- **Sum** – Sums the values of all items in a field.
70+
- **Sum (Distinct)** – Sums the values of all unique items in a field.
71+
- **Minimum** – Selects the lowest valued item in a field.
72+
- **Maximum** – Selects the highest valued item in a field.
73+
- **First** – Selects the first item out of all items in a field.
74+
- **Last** – Selects the last item out of all items in a field.
75+
76+
::callout{type="info" name="First, Last, Minimum and Maximum"}
77+
78+
First, last, minimum and maximum are not aggregates in the purely mathematical sense of the word. However, they are
79+
placed in this panel option because they return one single item.
80+
81+
::
82+
83+
::callout{type="info" name="Why are some Fields grayed out?"}
84+
85+
Certain fields cannot be used with certain aggregate functions. For example, you cannot use the average function on
86+
fields that store text, because text cannot be averaged. When there is a conflict between panel options, fields will be
87+
grayed out and unselectable in the `field dropdown list`.
88+
89+
::
90+
91+
### Style and Format Options
92+
93+
- **Abbreviate Value** – Abbreviates large numbers with a letter _(e.g. 2,000 = 2K)_.
94+
- **Decimals** – Changes the number of decimals displayed.
95+
- **Prefix** – Adds text before the aggregate metric.
96+
- **Suffix** – Adds text after the aggregate metric.
97+
- **Conditional Styles** – Changes color of number displayed if it is `>`, `>=`, `<`, `<=`, `==`, or `!=` to some
98+
defined value.
99+
100+
## Time Series
101+
102+
<!-- TODO: ![Time Series Panel Options](https://cdn.directus.io/docs/v9/app-guide/insights/insights-20220216A/time-series-panel-options-20220216A.webp) -->
103+
104+
The time series panel allows you to build graphs and see how data changes over time.
105+
106+
- **Collection** – Selects the collection you want to analyze.
107+
- **Color** – Sets color of your graph curve.
108+
- **Group Aggregation** – Selects the type of aggregation to perform.
109+
- **Group Precision** – Sets the time interval to aggregate by (days, weeks, months, etc.).
110+
- **Date Field** – Selects the datetime field used along the x-axis.
111+
- **Date Range** – Sets the time range from which data should be displayed, can be customized.
112+
- **Value Field** – Sets the field you wish to aggregate.
113+
- **Value Decimals** – Changes the number of decimals displayed on the y-axis.
114+
- **Min Value** – Sets minimum value displayed on y-axis.
115+
- **Max Value** – Sets maximum value displayed on y-axis.
116+
- **Curve Type** – Sets curve to be shown as smooth, straight or stepline.
117+
- **Fill Type** – Sets fill type under curve to gradient, solid, or none.
118+
- **Filter** – Allows filtering of Items considered for analysis based on logical conditions.
119+
- **Show X-axis** – Toggles display of time along X-axis.
120+
- **Show Y-axis** – Toggles display of numeric values along Y-axis.
121+
122+
::callout{type="warning" name="Time-oriented metrics only"}
123+
124+
In order to use this panel, your collection will need a datetime field.
125+
126+
::
127+
128+
::callout{type="info" name="Custom Date Range"}
129+
130+
Note that `Past` is not prefixed to a custom range as it is on the default ranges. When selecting "Other",
131+
type in `3 years`, `1 month`, `2 weeks`, `5 days`, etc.
132+
133+
::
134+
135+
## Global Variable
136+
137+
<!-- ![Global Variables](https://cdn.directus.io/docs/v9/app-guide/insights/insights-220624A/global-variable-220624A.webp) -->
138+
139+
- **Variable Key** — Sets your variable. Use this key to access the variable in other insights panels.
140+
- **Type** — Sets the data type of your variable.
141+
- **Default Value** — Sets a default value for the global variable.
142+
- **Interface** — Selects the interface to be used.
143+
- **Options** — Sets the interface Options.
144+
145+
This panel allows you to create a variable which is globally accessible across other panels. You can use this to do
146+
things like create a string or number to prefix other insights panel titles or pass it as a value into a filter to query
147+
results.
148+
149+
To assign a global variable, wrap the variable key in double-moustache syntax to access and assign it throughout other Insights
150+
Panels:
151+
152+
```
153+
{{ your_variable_key }}
154+
```
155+
156+
You will notice that the global variable panel is an interface in the Dashboard, allowing you to modify the value of
157+
this variable. If you change its value, all panels referencing the variable will update automatically.
158+
159+
::callout{type="warning" name="Must be Valid Data Type"}
160+
161+
Your variable's data type will need to be a valid match to wherever you are using it. For example, do not apply a string
162+
or JSON variable in a place that requires datetime data.
163+
164+
::
165+
166+
## Global Relational Variable
167+
168+
- **Variable Key** — Sets your variable. Use this key to access the variable in other insights panels.
169+
- **Collection** — The collection to get the item IDs from.
170+
- **Multiple** — Allow selection of multiple items when enabled.
171+
- **Limit** — Limits the number of items that can be selected.
172+
- **Display Template** — Defines how the items will be represented. Allows use of field item values as well as custom
173+
text.
174+
- **Filter** — Sets filters to allow selection of items that meet some criteria.
175+
176+
This panel allows you to create a variable which is globally accessible across other panels. You can use this to do
177+
things like select single or multiple items and pass their IDs as a value into a filter to query results.
178+
179+
To assign a global relational variable, wrap the variable key in double-moustache syntax to access and assign it throughout
180+
other insights panels:
181+
182+
```
183+
{{ your_variable_key }}
184+
```
185+
186+
You will notice that the global relational variable panel is an interface in the Dashboard, allowing you to modify the
187+
value of this variable. If you change its value, all panels referencing the variable will update automatically.
188+
189+
::callout{type="warning" name="Must be Valid Data Type"}
190+
191+
Your variable's data type will need to be a valid match to wherever you are using it. For example, do not apply a string
192+
or JSON variable in a place that requires datetime data.
193+
194+
::
195+
196+
## Bar Chart
197+
198+
<!-- TODO: ![Dashboard edit page with a bar chart options panel visible.](https://cdn.directus.io/docs/v9/app-guide/insights/20220223/panels-bar-options-230223A.webp) -->
199+
200+
The bar chart panel allows you to build vertical and horizontal bar charts from data held in collections.
201+
202+
- **Collection** – Selects the collection you want to analyze.
203+
- **Horizontal** - If enabled, the bars will be horizontal (originating from the y-axis).
204+
- **X-Axis** - The field presented on the x-axis.
205+
- **Y-Axis** - The field presented on the y-axis.
206+
- **Value Decimals** – Changes the number of decimals displayed on both axes.
207+
- **Color** – Sets the default color of your bars.
208+
- **Filter** – Allows filtering of items considered for analysis based on logical conditions.
209+
- **Conditional Styles** – Changes color of bar if its value is `>`, `>=`, `<`, `<=`, `==`, or `!=` to some defined
210+
value.
211+
212+
## Line Chart
213+
214+
<!-- TODO: ![Dashboard edit page with a line chart options panel visible.](https://cdn.directus.io/docs/v9/app-guide/insights/20220223/panels-line-options-230223A.webp) -->
215+
216+
The line chart panel allows you to build line charts from data held in collections, and are often used for time-series
217+
data.
218+
219+
- **Collection** – Selects the collection you want to analyze.
220+
- **X-Axis** - The field presented on the x-axis.
221+
- **Y-Axis** - The field presented on the y-axis.
222+
- **Group Aggregation** – Selects the type of aggregation to perform. If you may only select a field to be presented on
223+
the x-axis.
224+
- **Function** – Selects the type of aggregate to perform.
225+
- **Filter** – Allows filtering of items considered for analysis based on logical conditions.
226+
- **Value Decimals** – Changes the number of decimals displayed on both axes.
227+
- **Color** – Sets the default color of your line.
228+
- **Show Axis Labels** - Selects if and on which axis labels are shown.
229+
- **Show Tooltip Marker** - If enabled, shows data when a data point is hovered over.
230+
- **Curve Type** - Selects the style of the curve - smooth, straight, or stepped.
231+
- **Conditional Styles** – Changes color of line if its value is `>`, `>=`, `<`, `<=`, `==`, or `!=` to some defined
232+
value.
233+
234+
## Meter
235+
236+
<!-- TODO: ![Dashboard edit page with a meter options panel visible.](https://cdn.directus.io/docs/v9/app-guide/insights/20220223/panels-meter-options-230223A.webp) -->
237+
238+
The meter panel takes a maximum value and allows you to show a completion percentage given a second value.
239+
240+
- **Collection** – Selects the collection you want to analyze.
241+
- **Field** – Selects the field to run aggregate function on.
242+
- **Function** – Selects the type of aggregate to perform.
243+
- **Maximum** - Sets the maximum value (100% of the meter).
244+
- **Filter** – Allows filtering of items considered for analysis based on logical conditions.
245+
- **Size** - Sets dial to be a full circle or a half circle.
246+
- **Stroke Width** - Sets thickness of the meter dial line.
247+
- **Color** – Sets the default color of your dial.
248+
- **Rounded Stroke** - If enabled, changes the cap style to rounded.
249+
- **Conditional Styles** – Changes color of meter if its value is `>`, `>=`, `<`, `<=`, `==`, or `!=` to some defined
250+
value.
251+
252+
## Pie or Donut Chart
253+
254+
<!-- TODO: ![Dashboard edit page with a pie or donut options panel visible.](https://cdn.directus.io/docs/v9/app-guide/insights/20220223/panels-pie-donut-options-230223A.webp) -->
255+
256+
The pie and donut charts allow you to create segmented charts based on your data.
257+
258+
- **Collection** – Selects the collection you want to analyze.
259+
- **Field** – Selects the field to run aggregate function on.
260+
- **Function** – Selects the type of aggregate to perform.
261+
- **Donut** - If enabled, a circle is cut out of the center of the chart.
262+
- **Show Labels** - If enabled, the percentage value is shown in each segment.
263+
- **Show Legend** - Selects if and where the legend is shown - none, right, or bottom.
264+
- **Filter** – Allows filtering of items considered for analysis based on logical conditions.
265+
- **Value Decimals** – Changes the number of decimals displayed in the chart segments.
266+
- **Color** – Sets the default base color of your first segment. Other segments will be variations of this default.
267+
- **Conditional Styles** – Changes color of segment if its value is `>`, `>=`, `<`, `<=`, `==`, or `!=` to some defined
268+
value.

0 commit comments

Comments
 (0)