Made withDirectusClip

Learn How to Create No-Code Dashboards for Your Database using Directus Insights

D

Directus

Creator on the Directus channel

Watch on YouTube ↗

15K viewsJan 20, 202313:22 runtime

Learn how to create powerful, no-code dashboards for your team or clients directly on top of your database using Directus Insights. This guide demonstrates how to bypass complex BI tools and data pipelines by building intuitive dashboards in minutes. Discover how to create…

Chapters

#directus#clip#cmscrm

The Power of Directus Insights

Directus Insights enables any user, technical or not, to build powerful, data-rich dashboards directly from a project's database without writing any code. It replaces the need for complex external BI tools, data export/import workflows, and manual SQL queries.

Essential Panel Types

Dashboards are built by arranging and configuring various types of panels.

Label Panel

Purpose: Displays static text. Ideal for dashboard titles or adding contextual notes for users.

List Panel

Purpose: Shows a list of items from a collection.
Key Configurations:
- Collection: The data collection to pull from (e.g., projects).
- Sort Field: The field to order the list by (e.g., end_date).
- Display Template: Controls how each item is displayed in the list (e.g., {{project_name}} ({{company_name}})).

Metric Panel

Purpose: Displays a single, aggregated value from a collection.
Key Configurations:
- Aggregation: The function to run (e.g., Count, Sum, Average).
- Filter: Rules to include only specific data in the calculation (e.g., status is completed).

Tip
Duplicate Panels to quickly create similar widgets. You can duplicate a panel and then slightly modify its title, color, and filter to show a related metric, saving significant time.

Time Series Panel

Purpose: Renders a line chart to show how data changes over time.
Key Configurations:
- Aggregation: The function to run on the value field (e.g., Count).
- Precision: The time interval for grouping data (e.g., Weekly, Daily).
- Date Field: The timestamp field to plot on the x-axis.

Making Dashboards Interactive with Variables

Global variables allow users to control the data displayed across multiple panels without editing panel configurations.

Global Date Variables

Create Variables: Set up two panels with the Variable type to capture a start date (date_from) and an end date (date_to).
Apply to Panels: In a panel's filter settings, use Mustache syntax ({{variable_name}}) to reference the global variables. For example, filter a time series where the due_on date is Between {{date_from}} and {{date_to}}.

Important
When using dynamic date variables for a Time Series panel, ensure the panel's own Date Range setting is set to Automatic. A fixed range (e.g., "Past 5 Months") will override your variable filters and can lead to confusing chart behavior.

Global Relational Variable

Create Variable: Add a Global Relational panel, which creates a dropdown to select an item from a collection. Define a Variable Key like project_id.
Apply to Panels: Update another panel's filter to use the selected ID. In the filter's raw value editor, use the Mustache syntax, remembering to wrap it in quotes if it's a string: "{{project_id}}".

Dashboard Display Options

Fullscreen: Ideal for displaying dashboards on large screens or monitors in a public space.
Fit to Screen: Maximizes screen real estate by removing unused whitespace, making the dashboard compact.

The Problem with Traditional Dashboards

Hi, Bryant here for Directus. In this video, we're going to cover how to create no-code dashboards for your team or clients with Directus Insights.

When you're crafting your digital projects, dashboards are helpful tools that enable users to see the bigger picture and make better business decisions. Usually when you want to create a great looking dashboard for your users, you're forced into using separate BI tools or Excel or Google Sheets. You're exporting and importing your data from three or four different systems, trying not to mess up the headers or the column order. Sweating over the setup of a complicated data pipeline and secret connections to your database, spending hours and hours crafting SQL queries for every new little metric that the team decides to track. That translates into more overhead, more apps to maintain, and overall just more headache that you don't really need with Directus Insights.

You and any member of your team, technical or non-technical, can create easy-to-read dashboards in minutes without writing a single line of code or select statement. So let's dive in.

Creating Your First Dashboard

I'm in a demo Directus project here, just a simple internal CRM / project tracker. We've got all the standard stuff you would expect to find: deals, companies, contacts, tasks, and projects. Let's take a look at how we're doing performance-wise by creating a dashboard using the insights module.

So over on the left hand side, I'll look for my insights module and I've got a completely blank slate here. So let's create our first dashboard. I'll just click Create dashboard. We'll give this a name, I'll call it projects. I like to make everything nice and organized by using an appropriate icon and choosing a... I can even add a note for reference. And once I save this, boom, we've got our first dashboard.

Adding a Label Panel

Now let's go to the top right and look for the edit panels button so we can start creating some panels and add some widgets to our dashboard. So I will click create panel on the top right, and let's just add our first panel. A simple label, nothing crazy. We just want to give the user some added context. Let's label it "projects dashboard", give it a color, and then we'll go through our panel header options.

I'm going to go ahead and show this header. We'll add a quick name for it, add an icon and just experiment a little bit just to see what this is gonna look like. So we're getting there, but I'm gonna drag this out, adjust the size a bit and disable the header because I don't think it's necessary for this specific panel. This is pretty good. Let's move on to our next panel.

Displaying Data with the List Panel

The list panel. This is simply going to show a list of items from a certain collection, so that's what we'll pick here. Let's show a list of our projects. For our sort field, how do we want to set the order of these? I will do by the end date. Um, so descending by end date. And then for the display template, this is just gonna be how the rows show in the list. So let's do the project name and the company name. I'm just gonna choose allow inline editing, which will open those items in a slide out window. And we'll go ahead and enable the panel header for this one and give it a nice name just to describe this list so that the user, again, has that context.

Now let's save this panel and take a look. I'm gonna do some rearranging here to make sure everything looks nice. But as a recovering designer, I can't help but call out our team's attention to detail. Whenever you stack one panel beside another, the borders collapse and the radius is automatically calculated so that your dashboards look perfect. Now I've got my list of projects that are due soon, and if I want to drill into the details, I just click and the details open in a slide over panel. So I'll save this, we'll move on to the next panel type.

Counting Data with Metric Panels

Which is going to be the metric panel, which is basically going to show us a single value inside a nice little panel. So for our collection here, I'm gonna choose projects. For the field, I'm gonna choose ID, and this is the field within the item that we're gonna run our aggregation function on. Uh, and for the function here, I'm just gonna count. So basically I'm gonna do a count of the IDs, but I'm going to mix this up a little bit and add a filter.

So we only want to show the open tasks, so I will go in and add a filter for the status is equal to new. I'll add an or group so that we can filter based on two separate statuses: status equals new or status equals in progress. I'll make sure that's properly nested so we're getting the right data back from the Directus API. When you start building your own dashboards, I encourage you to experiment with all these styling options. For now, I'm going to add a suffix to this specific panel, we'll just add "projects". So that's going to come after the value. Prefix is obviously going to come before the value. You can add conditional styles as well. Uh, and finally, we will add a header, just call it Open Projects, and again, give it an icon and a color.

Let's save our panel. Do a little rearranging to make everything look nice. Now, one of my favorite features of insights is the ability to duplicate panels. Super easy to do and it makes building dashboards with similar widgets quick and easy. Let's use this second metric panel to show our completed projects. We'll adjust the filter for this one so that we are only pulling items where the status is completed. We'll adjust the header, change the color a bit, and choose a new icon, then we'll save. Our dashboard is looking great.

Visualizing Data with a Time Series Panel

Let's take a moment, save our dashboard and look at the display options. Directus has two additional display options here. One where I can show this in a full screen, which would work great on an external display or panel in your conference room, or you can use fit to screen, which removes any unused white space and maximizes your screen real estate.

Our dashboard is looking a little lonely without a chart or graph. So let's create a new panel, and this time we will use the time series panel type. Uh, so this will just render a line chart based on some values over time. For our collection, let's use tasks. We'll give this a nice color, so what color do we want to render the actual line? And for our aggregation here, I'm gonna do a count. For the precision, I want to do this on a weekly basis, and then we will pick our date field. So in this case, let's just do the due on date. For our value field, this is gonna be the value that we're running our aggregation function on, so I'm just gonna count the IDs. And you've got multiple display options, like curve type or field type that you can adjust.

Now, let's show the header. We'll just say, task completed, give it an icon and set a color for this as well. Let's save our time series panel and move it into place. I'm sure you could see it, our dates are just a little bit off here, so let's go back into our date range, and I'm gonna set this to automatic based on the data. So now we see the full range of dates within our data and the appropriate values plotted on the line chart. You can set the date range for a time series to be whatever you like. Uh, you could use the presets that Directus gives you like the past week, the past month, or you can simply key in a custom option using this syntax. Uh, five months, three weeks, two days, uh, any of those will be parsed automatically by Directus and bring back the data that you're looking for.

Making Panels Interactive with Date Variables

So we've got the basics of a great dashboard, but let's go deeper and make this interactive. Let's make it dynamic so that our users do not have to go in and edit the individual filters themselves or mess around with any of the widget settings to control the data. We'll do that with variables.

First, we'll configure two global variables, date_from where the type here is gonna be a date time, and the interface will be date. And we could show a header for this, we'll set it up to be from, and then we're just gonna duplicate this for the end date. After duplicating it, we'll edit this panel and change the variable key from date_from to date_to. Change the panel header name and save.

The next step would be updating our panels to use those global variables. So in our Task Completed time series panel, I'm gonna go into our filter section and add a filter based on the date. So if our due_on date is between... mustache syntax, date_from, and mustache syntax, date_to. So now we will look for any task where the due date is between the from and to dates as set by the individual user.

Let me just switch up the dates here and we'll see what effect that has on our time series panel. Now that looks kind of odd. Uh, it shouldn't be cutting off like that, so let's go back in and update our panel settings. Could be something wrong with the date range. So if I go back up to our date range, I've still got that five months value that I keyed in previously. Let's set it to automatically calculate based on the data and now that chart looks much, much nicer.

Dynamic Filtering with a Global Relational Panel

I'm gonna do a little cleanup in anticipation of our final panel that we're gonna add, the global relational. This panel allows you to select one or multiple items from a collection and use the IDs from those items in other panels. For my variable key, we want to filter based on projects, so I'm just gonna call this project_id. I'll select projects as my collection. For our display template, I'm gonna use the same format I used, just the project name and then the company information. So for the panel header, let's just call this "Choose Project," and that's what we'll display to the user.

I'll adjust the size of this and then save it and give it a test. So now we have a select box, but don't forget that we have to go in and adjust the filter for our other panel to use that new global variable. So here I'm gonna go in and select the project ID and I'm just gonna go in and edit the raw value here. I'll use the double mustache syntax wrapped in quotation marks, and I will use that key from our variable, just project_id. And voila! Now our time series panel will only plot the tasks that are assigned to that specific project that the user selects. And I can test a few of these out just to make sure that the data updates correctly.

Conclusion

And that brings us to the end of this video on Directus insights, where we covered how you and your team, technical or non-technical, can create no-code dashboards in mere minutes.

If you're ready to create your own no-code dashboards, check out the Directus website and create your free cloud account right now. And if you're ready for more how-to videos on all the tools within Directus, make sure that you hit like and subscribe in the corner and we'll see you on the next one. Thanks for watching.