Dashboard Panels

Panels are customizable components within :product-link{product="insights"} dashboards.

Panels are the building blocks of analytics dashboards, enabling rapid, no-code creation of data visualizations with data from a Directus project. Panels can also contain interactive elements, making them suitable for building custom internal applications within dashboards.

:partial{content="extensions-app"}

Panel Entrypoint

The index.js or index.ts file exports an object that is read by Directus. It contains properties that control how a panel is displayed within menus, it’s minimum width and height on the dashboard grid, what configurable options will be available to users, and the actual Vue component that will be loaded.

Entrypoint Example

import { defineInterface } from '@directus/extensions-sdk'
import PanelComponent from './panel.vue';

export default defineInterface({
	id: 'custom',
	name: 'Custom',
	icon: 'box',
	description: 'This is my custom panel!',
	component: PanelComponent,
	minWidth: 12,
	minHeight: 8,
	options: [
		{
			field: 'text',
			name: 'Text',
			type: 'string',
			meta: {
				interface: 'input',
				width: 'full',
			},
		},
	],
});

Properties

:partial{content="extensions-uid"}

:partial{content="extensions-theme"}

Panel Component

The panel component is a Vue component that will be rendered in the Data Studio within a dashboard. Data from the entrypoint are passed in as props.

Component Example

This example assumes there is an item in the entrypoint’s options array with a field value of text.

<template>
	<div class="text" :class="{ 'has-header': showHeader }">
		{{ text }}
	</div>
</template>

<script setup>
defineProps(['showHeader', 'text']);
</script>

<style scoped>
.text {
	padding: 12px;
}

.text.has-header {
	padding: 0 12px;
}
</style>

Props

The panel component will be passed all user configuration options from the entrypoint file. It will also receive the following props:

:partial{content="extensions-app-internals"}