Image Panel Configuration¶
The image panel type is used to display an image directly on your dashboard. This can be useful for branding, diagrams, or other visual elements.
A Poem for the Visual Storytellers¶
For those who know a picture is worth a thousand metrics:
When words and numbers just won't do,
A picture paints the broader view.
An SVG or PNG so fine
Can speak a thousand words in line.
Contain, cover, fill, or none—
Four ways to get the framing done.
Company logos, architecture maps,
System diagrams filling gaps.
From branding bold at dashboard's crown,
To network maps when things break down,
Your from_url pulls it through—
Background colors, alt text too.
So here's to images on the page,
Worth more than data can engage.
A visual anchor, tried and true,
That shows what numbers never knew.
Image Panel¶
Represents an Image panel configuration.
Image panels are used to display images.
Examples:
Minimal image panel:
dashboards:
- name: "Branded Dashboard"
panels:
- title: "Company Logo"
size: { w: 16, h: 3 }
image:
from_url: "https://example.com/path/to/your/logo.png"
Image panel with custom fit and background:
dashboards:
- name: "Dashboard with Diagram"
panels:
- title: "System Architecture Diagram"
size: { w: 48, h: 6 }
image:
from_url: "https://example.com/path/to/architecture.svg"
fit: "contain"
background_color: "#f0f0f0"
Attributes:
| Name | Type | Description |
|---|---|---|
image |
ImagePanelConfig
|
Image panel configuration. |
Show JSON schema:
{
"$defs": {
"DashboardDrilldown": {
"additionalProperties": false,
"description": "Dashboard-to-dashboard drilldown configuration.",
"properties": {
"id": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "Optional unique identifier for the drilldown. If not provided, one will be generated.",
"title": "Id"
},
"name": {
"description": "Display name for the drilldown.",
"title": "Name",
"type": "string"
},
"triggers": {
"description": "List of triggers that activate this drilldown. Defaults to ['click'].",
"items": {
"$ref": "#/$defs/DrilldownTrigger"
},
"title": "Triggers",
"type": "array"
},
"dashboard": {
"description": "Target dashboard ID or friendly identifier.",
"title": "Dashboard",
"type": "string"
},
"with_filters": {
"default": true,
"description": "Whether to carry over current filters to the target dashboard. Defaults to True.",
"title": "With Filters",
"type": "boolean"
},
"with_time": {
"default": true,
"description": "Whether to carry over current time range to the target dashboard. Defaults to True.",
"title": "With Time",
"type": "boolean"
}
},
"required": [
"name",
"dashboard"
],
"title": "DashboardDrilldown",
"type": "object"
},
"DrilldownTrigger": {
"description": "User-facing drilldown trigger types.",
"enum": [
"click",
"filter",
"range"
],
"title": "DrilldownTrigger",
"type": "string"
},
"DrilldownTypes": {
"anyOf": [
{
"$ref": "#/$defs/DashboardDrilldown"
},
{
"$ref": "#/$defs/UrlDrilldown"
}
]
},
"ImagePanelConfig": {
"additionalProperties": false,
"description": "Configuration specific to Image panels.",
"properties": {
"from_url": {
"description": "The URL of the image to be displayed in the panel. This is a required field.",
"title": "From Url",
"type": "string"
},
"fit": {
"anyOf": [
{
"enum": [
"contain",
"cover",
"fill",
"none"
],
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "Controls how the image is sized within the panel. Defaults to \"contain\".\n\n- **contain**: Scales to fit within the panel while maintaining aspect ratio. Entire image visible.\n- **cover**: Scales to fill the panel while maintaining aspect ratio. May be cropped.\n- **fill**: Stretches or compresses to fill the panel, potentially altering aspect ratio.\n- **none**: Displays at original size. Cropped if larger, unchanged if smaller than panel.",
"title": "Fit"
},
"description": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "Alternative text for the image, used for accessibility. Defaults to an empty string if not set.",
"title": "Description"
},
"background_color": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "Background color for the image panel. Defaults to an empty string if not set.",
"title": "Background Color"
}
},
"required": [
"from_url"
],
"title": "ImagePanelConfig",
"type": "object"
},
"Position": {
"additionalProperties": false,
"description": "Panel position configuration.\n\nDetermines the x/y coordinates of a panel on the dashboard grid.\nIf not specified, the panel will be auto-positioned.",
"properties": {
"x": {
"anyOf": [
{
"maximum": 48,
"minimum": 0,
"type": "integer"
},
{
"type": "null"
}
],
"default": null,
"description": "The horizontal starting position of the panel on the grid (0-based). If None, position will be auto-calculated.",
"title": "X"
},
"y": {
"anyOf": [
{
"minimum": 0,
"type": "integer"
},
{
"type": "null"
}
],
"default": null,
"description": "The vertical starting position of the panel on the grid (0-based). If None, position will be auto-calculated.",
"title": "Y"
}
},
"title": "Position",
"type": "object"
},
"Size": {
"additionalProperties": false,
"description": "Panel size configuration.\n\nDetermines the width and height of a panel on the dashboard grid.\nWidth accepts semantic values ('whole', 'half', etc.) or integers.",
"properties": {
"w": {
"anyOf": [
{
"type": "integer"
},
{
"enum": [
"whole",
"half",
"third",
"quarter",
"sixth",
"eighth"
],
"type": "string"
}
],
"default": 12,
"description": "The width of the panel in grid units.\n\nDefaults to 12 (quarter width). Accepts semantic values ('whole', 'half', 'third', 'quarter', 'sixth', 'eighth') or integers (1-48).",
"title": "W"
},
"h": {
"default": 8,
"description": "The height of the panel in grid units. Defaults to 8.",
"exclusiveMinimum": 0,
"title": "H",
"type": "integer"
}
},
"title": "Size",
"type": "object"
},
"UrlDrilldown": {
"additionalProperties": false,
"description": "URL drilldown configuration.",
"properties": {
"id": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "Optional unique identifier for the drilldown. If not provided, one will be generated.",
"title": "Id"
},
"name": {
"description": "Display name for the drilldown.",
"title": "Name",
"type": "string"
},
"triggers": {
"description": "List of triggers that activate this drilldown. Defaults to ['click'].",
"items": {
"$ref": "#/$defs/DrilldownTrigger"
},
"title": "Triggers",
"type": "array"
},
"url": {
"description": "Target URL template. Can include Kibana template variables.",
"title": "Url",
"type": "string"
},
"new_tab": {
"default": false,
"description": "Whether to open the URL in a new tab. Defaults to False.",
"title": "New Tab",
"type": "boolean"
},
"encode_url": {
"default": true,
"description": "Whether to URL-encode the template variables. Defaults to True.",
"title": "Encode Url",
"type": "boolean"
}
},
"required": [
"name",
"url"
],
"title": "UrlDrilldown",
"type": "object"
}
},
"additionalProperties": false,
"description": "Represents an Image panel configuration.\n\nImage panels are used to display images.\n\nExamples:\n Minimal image panel:\n ```yaml\n dashboards:\n - name: \"Branded Dashboard\"\n panels:\n - title: \"Company Logo\"\n size: { w: 16, h: 3 }\n image:\n from_url: \"https://example.com/path/to/your/logo.png\"\n ```\n\n Image panel with custom fit and background:\n ```yaml\n dashboards:\n - name: \"Dashboard with Diagram\"\n panels:\n - title: \"System Architecture Diagram\"\n size: { w: 48, h: 6 }\n image:\n from_url: \"https://example.com/path/to/architecture.svg\"\n fit: \"contain\"\n background_color: \"#f0f0f0\"\n ```",
"properties": {
"id": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "A unique identifier for the panel. If not provided, one may be generated during compilation.",
"title": "Id"
},
"title": {
"default": "",
"description": "The title displayed on the panel header. Can be an empty string.",
"title": "Title",
"type": "string"
},
"hide_title": {
"anyOf": [
{
"type": "boolean"
},
{
"type": "null"
}
],
"default": null,
"description": "If `true`, the panel title will be hidden. Defaults to `false` (title is shown).",
"title": "Hide Title"
},
"description": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "A brief description of the panel's content or purpose. Defaults to an empty string.",
"title": "Description"
},
"size": {
"$ref": "#/$defs/Size",
"description": "Defines the panel's size on the dashboard grid."
},
"position": {
"$ref": "#/$defs/Position",
"description": "Defines the panel's position on the dashboard grid. If not specified, position will be auto-calculated."
},
"drilldowns": {
"anyOf": [
{
"items": {
"$ref": "#/$defs/DrilldownTypes"
},
"type": "array"
},
{
"type": "null"
}
],
"default": null,
"description": "Optional list of drilldowns to attach to this panel.",
"title": "Drilldowns"
},
"image": {
"$ref": "#/$defs/ImagePanelConfig",
"description": "Image panel configuration."
}
},
"required": [
"image"
],
"title": "ImagePanel",
"type": "object"
}
Image Panel Configuration¶
Configuration specific to Image panels.
Attributes:
| Name | Type | Description |
|---|---|---|
from_url |
str
|
The URL of the image to be displayed in the panel. This is a required field. |
fit |
Literal['contain', 'cover', 'fill', 'none'] | None
|
Controls how the image is sized within the panel. Defaults to "contain".
|
description |
str | None
|
Alternative text for the image, used for accessibility. Defaults to an empty string if not set. |
background_color |
str | None
|
Background color for the image panel. Defaults to an empty string if not set. |
Show JSON schema:
{
"additionalProperties": false,
"description": "Configuration specific to Image panels.",
"properties": {
"from_url": {
"description": "The URL of the image to be displayed in the panel. This is a required field.",
"title": "From Url",
"type": "string"
},
"fit": {
"anyOf": [
{
"enum": [
"contain",
"cover",
"fill",
"none"
],
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "Controls how the image is sized within the panel. Defaults to \"contain\".\n\n- **contain**: Scales to fit within the panel while maintaining aspect ratio. Entire image visible.\n- **cover**: Scales to fill the panel while maintaining aspect ratio. May be cropped.\n- **fill**: Stretches or compresses to fill the panel, potentially altering aspect ratio.\n- **none**: Displays at original size. Cropped if larger, unchanged if smaller than panel.",
"title": "Fit"
},
"description": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "Alternative text for the image, used for accessibility. Defaults to an empty string if not set.",
"title": "Description"
},
"background_color": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "Background color for the image panel. Defaults to an empty string if not set.",
"title": "Background Color"
}
},
"required": [
"from_url"
],
"title": "ImagePanelConfig",
"type": "object"
}