4396ee5166
* Enable theme fields * Start adding more default themes * WIP add theme selector interface * Restructure, add rules-to-vars util * Render used vars in local overrides * Use local theme vars in theme preview * Render theme option full-width * Add more test colors * Only override used variables * Fix rendering bugs in preview * Remove test theme * Add small border to preview * Add organic theme * Add changeset * Don't crash color interface on complex input bg * Use themable color for disabled input * Use nav-sidebar theme in v-drawer * Use border width from the theme in panels * Use theme border width for panel borders * Use page background for panel edit buttons * Fix Active state forselected panel * Don't use primary for logout hover state * Fix background color of item duplication fields * Use form border/background in v-list block * Use theme border width in hardcoded 2px sections * fix chip padding * Rename background-page to background, rename background to background-normal * Fix search input styling * Tweak search input themability * update icons * Add border on sidebar section content * Add color match, start on minimal * Organize import * Adjust spacing * Ignore stylesheet files * Ignore svg as well --------- Co-authored-by: Ben Haynes <ben@rngr.org> Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
14 KiB
description, readTime, pageClass
| description | readTime | pageClass |
|---|---|---|
| REST and GraphQL API documentation on the Dashboards collection in Directus. | 5 min read | page-reference |
Dashboards
Dashboards within the Insights module organize different Panels into an at-a-glance view. They can be used to group data based on department, objective, business process or anything you choose. Learn more about Dashboards.
The Dashboard Object
id uuid
Primary key of the dashboard.
name string
Name of the dashboard.
icon string
Material icon for dashboard.
note string
Descriptive text about the dashboard.
date_created Date
When the dashboard was created
user_created many-to-one
User that created the dashboard. Many-to-one to users.
color string
Accent color for the dashboard.
panels one-to-many
Panels that are in this dashboard. One-to-may to panels.
{
"id": "a79bd1b2-beb2-49fc-8a26-0b3eec0e2697",
"name": "My Dashboard",
"icon": "space_dashboard",
"note": "Test",
"date_created": "2023-01-05T19:03:15.051Z",
"user_created": "fd066644-c8e5-499d-947b-fe6c6e1a1473",
"color": "#6644FF",
"panels": ["22640672-eef0-4ee9-ab04-591f3afb2883"]
}
List Dashboards
List all dashboards that exist in Directus.
Request
GET /dashboards
SEARCH /dashboards
If using SEARCH you can provide a query object as the body of your request.
POST /graphql/system
type Query {
dashboards: [directus_dashboards]
}
import { createDirectus, rest, readDashboards } from '@directus/sdk';
const client = createDirectus('directus_project_url').with(rest());
const result = await client.request(readDashboards(query_object));
Query Parameters
Supports all global query parameters.
Response
An array of up to limit dashboard objects. If no items are available, data will be an empty array.
Example
GET /dashboards
SEARCH /dashboards
POST /graphql/system
query {
dashboards {
id
name
}
}
import { createDirectus, rest, readDashboards } from '@directus/sdk';
const client = createDirectus('https://directus.example.com').with(rest());
const result = await client.request(
readDashboards({
fields: ['*'],
})
);
Retrieve a Dashboard
List an existing dashboard by primary key.
Request
GET /dashboards/:id
POST /graphql/system
type Query {
dashboards_by_id(id: ID!): directus_dashboards
}
import { createDirectus, rest, readDashboard } from '@directus/sdk';
const client = createDirectus('directus_project_url').with(rest());
const result = await client.request(readDashboard(dashboard_id, query_object));
Query Parameters
Supports all global query parameters.
Response
Returns the requested dashboard object.
Example
GET /dashboards/2fc325fb-299b-4d20-a9e7-a34349dee8b2
query {
dashboards_by_id(id: "2fc325fb-299b-4d20-a9e7-a34349dee8b2") {
id
name
}
}
import { createDirectus, rest, readDashboard } from '@directus/sdk';
const client = createDirectus('https://directus.example.com').with(rest());
const result = await client.request(
readDashboard('751a81de-9e00-4ffe-a2c1-6e04619b859f', {
fields: ['*'],
})
);
Create a Dashboard
Create a new dashboard.
Request
POST /dashboards
Provide a dashboard object as the body of your request.
POST /graphql/system
type Mutation {
create_dashboards_item(data: create_directus_dashboards_input!): directus_dashboards
}
import { createDirectus, rest, createDashboard } from '@directus/sdk';
const client = createDirectus('directus_project_url').with(rest());
const result = await client.request(createDashboard(dashboard_object));
Query Parameters
Supports all global query parameters.
Request Body
A partial dashboard object.
Response
Returns the dashboard object for the created dashboard.
Example
POST /dashboards
{
"name": "My Dashboard",
"icon": "space_dashboard"
}
POST /graphql/system
mutation {
create_dashboards_item(data: { name: "My Dashboard", icon: "dashboards" }) {
id
name
}
}
import { createDirectus, rest, createDashboard } from '@directus/sdk';
const client = createDirectus('https://directus.example.com').with(rest());
const result = await client.request(
createDashboard({
name: 'User Retention',
note: 'Some insights on our users activity',
})
);
Create Multiple Dashboards
Create multiple new dashboards.
Request
POST /dashboards
Provide an array of dashboard objects as the body of your request.
POST /graphql/system
type Mutation {
create_dashboards_items(data: [create_directus_dashboards_input!]!): [directus_dashboards]
}
import { createDirectus, rest, createDashboards } from '@directus/sdk';
const client = createDirectus('directus_project_url').with(rest());
const result = await client.request(createDashboards(dashboard_object_array));
Query Parameters
Supports all global query parameters.
Request Body
An array of partial dashboard objects.
Response
Returns the dashboard object for the created dashboard.
Example
POST /dashboards
[
{
"name": "My Dashboard",
"icon": "space_dashboard"
},
{
"name": "Another Dashboard",
"icon": "person"
}
]
POST /graphql/system
mutation {
create_dashboards_items(
data: [{ name: "My Dashboard", icon: "dashboard" }, { name: "Another Dashboard", icon: "person" }]
) {
id
name
}
}
import { createDirectus, rest, createDashboards } from '@directus/sdk';
const client = createDirectus('https://directus.example.com').with(rest());
const result = await client.request(
createDashboards([
{
name: 'User Retention',
note: 'Some insights on our users activity',
},
{
name: 'Publishing report',
note: 'Some charts to track our outputs',
},
])
);
Update a Dashboard
Update an existing dashboard.
Request
PATCH /dashboards/:id
Provide a partial dashboard object as the body of your request.
POST /graphql/system
type Mutation {
update_dashboards_item(id: ID!, data: update_directus_dashboards_input): directus_dashboards
}
import { createDirectus, rest, updateDashboard } from '@directus/sdk';
const client = createDirectus('directus_project_url').with(rest());
const result = await client.request(updateDashboard(dashboard_id, partial_dashboard_object));
Query Parameters
Supports all global query parameters.
Request Body
A partial dashboard object.
Response
Returns the dashboard object for the updated dashboard.
Example
PATCH /dashboards/2fc325fb-299b-4d20-a9e7-a34349dee8b2
{
"name": "My Updated Dashboard"
}
POST /graphql/system
mutation {
update_dashboards_item(id: "2fc325fb-299b-4d20-a9e7-a34349dee8b2", data: { name: "My Updated Dashboard" }) {
id
name
}
}
import { createDirectus, rest, updateDashboard } from '@directus/sdk';
const client = createDirectus('https://directus.example.com').with(rest());
const result = await client.request(
updateDashboard('cfcc3702-33bd-4616-865c-99b59dc1cdc9', {
color: '#6644FF',
})
);
Update Multiple Dashboards
Update multiple existing dashboards.
Request
PATCH /dashboards
{
"keys": dashboard_id_array,
"data": partial_dashboard_object
}
POST /graphql/system
type Mutation {
update_dashboards_items(ids: [ID!]!, data: update_directus_dashboards_input): [directus_dashboards]
}
import { createDirectus, rest, updateDashboards } from '@directus/sdk';
const client = createDirectus('directus_project_url').with(rest());
const result = await client.request(updateDashboards(dashboard_id_array, partial_dashboard_object));
Query Parameters
Supports all global query parameters.
Request Body
keys Required
Array of primary keys of the dashboards you'd like to update.
data Required
Any of the dashboard's properties.
Response
Returns the dashboard objects for the updated dashboards.
Example
PATCH /dashboards
{
"keys": ["3f2facab-7f05-4ee8-a7a3-d8b9c634a1fc", "7259bfa8-3786-45c6-8c08-cc688e7ba229"],
"data": {
"color": "#6644FF"
}
}
POST /graphql/system
mutation {
update_dashboards_items(
ids: ["3f2facab-7f05-4ee8-a7a3-d8b9c634a1fc", "7259bfa8-3786-45c6-8c08-cc688e7ba229"]
data: { color: "#6644FF" }
) {
id
name
}
}
import { createDirectus, rest, updateDashboards } from '@directus/sdk';
const client = createDirectus('https://directus.example.com').with(rest());
const result = await client.request(
updateDashboards(['cfcc3702-33bd-4616-865c-99b59dc1cdc9', '782c80a0-ad61-488d-b9e2-7d688f029421'], {
color: '#81D4FA',
})
);
Delete a Dashboard
Delete an existing dashboard.
Request
DELETE /dashboards/:id
POST /graphql/system
type Mutation {
delete_dashboards_item(id: ID!): delete_one
}
import { createDirectus, rest, deleteDashboard } from '@directus/sdk';
const client = createDirectus('directus_project_url').with(rest());
const result = await client.request(deleteDashboard(dashboard_id));
Response
Empty body.
Example
DELETE /dashboards/12204ee2-2c82-4d9a-b044-2f4842a11dba
POST /graphql/system
mutation {
delete_dashboards_item(id: "12204ee2-2c82-4d9a-b044-2f4842a11dba") {
id
}
}
import { createDirectus, rest, deleteDashboard } from '@directus/sdk';
const client = createDirectus('https://directus.example.com').with(rest());
const result = await client.request(deleteDashboard('cfcc3702-33bd-4616-865c-99b59dc1cdc9'));
Delete Multiple Dashboards
Delete multiple existing dashboards.
Request
DELETE /dashboards
Provide an array of dashboard IDs as the body of your request.
POST /graphql/system
type Mutation {
delete_dashboards_items(ids: [ID!]!): delete_many
}
import { createDirectus, rest, deleteDashboards } from '@directus/sdk';
const client = createDirectus('directus_project_url').with(rest());
const result = await client.request(deleteDashboards(dashboard_id_array));
Request Body
An array of dashboards primary keys
Response
Empty body.
Example
DELETE /dashboards
["25821236-8c2a-4f89-8fdc-c7d01f35877d", "02b9486e-4273-4fd5-b94b-e18fd923d1ed", "7d62f1e9-a83f-407b-84f8-1c184f014501"]
POST /graphql/system
mutation {
delete_dashboards_items(
ids: [
"25821236-8c2a-4f89-8fdc-c7d01f35877d"
"02b9486e-4273-4fd5-b94b-e18fd923d1ed"
"7d62f1e9-a83f-407b-84f8-1c184f014501"
]
) {
ids
}
}
import { createDirectus, rest, deleteDashboards } from '@directus/sdk';
const client = createDirectus('https://directus.example.com').with(rest());
const result = await client.request(
deleteDashboards(['751a81de-9e00-4ffe-a2c1-6e04619b859f', '782c80a0-ad61-488d-b9e2-7d688f029421'])
);