IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-29 12:14:08 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add option to display mini map

Browse Source
This commit is contained in:
drew08t 2023-11-01 17:48:28 -07:00
parent 5a8f1d2957
commit 36733deed6
7 changed files with 59 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
docs/sources/developers/kinds/composable/canvas/panelcfg/schema-reference.md
View File

@ -9,17 +9,17 @@ labels:
- oss
title: CanvasPanelCfg kind
---
> Both documentation generation and kinds schemas are in active development and subject to change without prior notice.
## CanvasPanelCfg
#### Maturity: [experimental](../../../maturity/#experimental)
#### Version: 0.0
| Property | Type | Required | Default | Description |
|-------------------------|----------------------------------|----------|---------|-----------------------------------------------------------------------|
| ----------------------- | -------------------------------- | -------- | ------- | --------------------------------------------------------------------- |
| `BackgroundConfig` | [object](#backgroundconfig) | **Yes** | | |
| `BackgroundImageSize` | string | **Yes** | | Possible values are: `original`, `contain`, `cover`, `fill`, `tile`. |
| `CanvasConnection` | [object](#canvasconnection) | **Yes** | | |
@ -37,7 +37,7 @@ title: CanvasPanelCfg kind
### BackgroundConfig
| Property | Type | Required | Default | Description |
|----------|-----------------------------------------------------|----------|---------|----------------------------------------------------------------------|
| -------- | --------------------------------------------------- | -------- | ------- | -------------------------------------------------------------------- |
| `color` | [ColorDimensionConfig](#colordimensionconfig) | No | | |
| `image` | [ResourceDimensionConfig](#resourcedimensionconfig) | No | | Links to a resource (image/svg path) |
| `size` | string | No | | Possible values are: `original`, `contain`, `cover`, `fill`, `tile`. |
@ -47,14 +47,14 @@ title: CanvasPanelCfg kind
It extends [BaseDimensionConfig](#basedimensionconfig).
| Property | Type | Required | Default | Description |
|----------|--------|----------|---------|--------------------------------------------------------------------------------------------------------------|
| `field` | string | No | | *(Inherited from [BaseDimensionConfig](#basedimensionconfig))*<br/>fixed: T -- will be added by each element |
| -------- | ------ | -------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `field` | string | No | | _(Inherited from [BaseDimensionConfig](#basedimensionconfig))_<br/>fixed: T -- will be added by each element |
| `fixed` | string | No | | |
### BaseDimensionConfig
| Property | Type | Required | Default | Description |
|----------|--------|----------|---------|-------------------------------------------|
| -------- | ------ | -------- | ------- | ----------------------------------------- |
| `field` | string | No | | fixed: T -- will be added by each element |
### ResourceDimensionConfig
@ -64,15 +64,15 @@ Links to a resource (image/svg path)
It extends [BaseDimensionConfig](#basedimensionconfig).
| Property | Type | Required | Default | Description |
|----------|--------|----------|---------|--------------------------------------------------------------------------------------------------------------|
| -------- | ------ | -------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `mode` | string | **Yes** | | Possible values are: `fixed`, `field`, `mapping`. |
| `field` | string | No | | *(Inherited from [BaseDimensionConfig](#basedimensionconfig))*<br/>fixed: T -- will be added by each element |
| `field` | string | No | | _(Inherited from [BaseDimensionConfig](#basedimensionconfig))_<br/>fixed: T -- will be added by each element |
| `fixed` | string | No | | |
### CanvasConnection
| Property | Type | Required | Default | Description |
|--------------|-------------------------------------------------|----------|---------|----------------------------------|
| ------------ | ----------------------------------------------- | -------- | ------- | -------------------------------- |
| `path` | string | **Yes** | | Possible values are: `straight`. |
| `source` | [ConnectionCoordinates](#connectioncoordinates) | **Yes** | | |
| `target` | [ConnectionCoordinates](#connectioncoordinates) | **Yes** | | |
@ -83,7 +83,7 @@ It extends [BaseDimensionConfig](#basedimensionconfig).
### ConnectionCoordinates
| Property | Type | Required | Default | Description |
|----------|--------|----------|---------|-------------|
| -------- | ------ | -------- | ------- | ----------- |
| `x` | number | **Yes** | | |
| `y` | number | **Yes** | | |
@ -92,17 +92,17 @@ It extends [BaseDimensionConfig](#basedimensionconfig).
It extends [BaseDimensionConfig](#basedimensionconfig).
| Property | Type | Required | Default | Description |
|----------|--------|----------|---------|--------------------------------------------------------------------------------------------------------------|
| -------- | ------ | -------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `max` | number | **Yes** | | |
| `min` | number | **Yes** | | |
| `field` | string | No | | *(Inherited from [BaseDimensionConfig](#basedimensionconfig))*<br/>fixed: T -- will be added by each element |
| `field` | string | No | | _(Inherited from [BaseDimensionConfig](#basedimensionconfig))_<br/>fixed: T -- will be added by each element |
| `fixed` | number | No | | |
| `mode` | string | No | | Possible values are: `linear`, `quad`. |
### CanvasElementOptions
| Property | Type | Required | Default | Description |
|---------------|-----------------------------------------|----------|---------|---------------------------------------------------------|
| ------------- | --------------------------------------- | -------- | ------- | ------------------------------------------------------- |
| `name` | string | **Yes** | | |
| `type` | string | **Yes** | | |
| `background` | [BackgroundConfig](#backgroundconfig) | No | | |
@ -115,21 +115,21 @@ It extends [BaseDimensionConfig](#basedimensionconfig).
### Constraint
| Property | Type | Required | Default | Description |
|--------------|--------|----------|---------|-----------------------------------------------------------------------|
| ------------ | ------ | -------- | ------- | --------------------------------------------------------------------- |
| `horizontal` | string | No | | Possible values are: `left`, `right`, `leftright`, `center`, `scale`. |
| `vertical` | string | No | | Possible values are: `top`, `bottom`, `topbottom`, `center`, `scale`. |
### LineConfig
| Property | Type | Required | Default | Description |
|----------|-----------------------------------------------|----------|---------|-------------|
| -------- | --------------------------------------------- | -------- | ------- | ----------- |
| `color` | [ColorDimensionConfig](#colordimensionconfig) | No | | |
| `width` | number | No | | |
### Placement
| Property | Type | Required | Default | Description |
|----------|--------|----------|---------|-------------|
| -------- | ------ | -------- | ------- | ----------- |
| `bottom` | number | No | | |
| `height` | number | No | | |
| `left` | number | No | | |
@ -140,7 +140,8 @@ It extends [BaseDimensionConfig](#basedimensionconfig).
### Options
| Property | Type | Required | Default | Description |
|---------------------|-----------------|----------|---------|--------------------------------------------------------------------------------------------------------------------------------------|
| ------------------- | --------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `displayMiniMap` | boolean | **Yes** | `true` | Display mini map during zoom |
| `inlineEditing` | boolean | **Yes** | `true` | Enable inline editing |
| `root` | [object](#root) | **Yes** | | The root element of canvas (frame), where all canvas elements are nested<br/>TODO: Figure out how to define a default value for this |
| `showAdvancedTypes` | boolean | **Yes** | `true` | Show all available element types |
@ -151,9 +152,7 @@ The root element of canvas (frame), where all canvas elements are nested
TODO: Figure out how to define a default value for this
| Property | Type | Required | Default | Description |
|------------|-------------------------------------------------|----------|---------|----------------------------------------------------------------|
| ---------- | ----------------------------------------------- | -------- | ------- | -------------------------------------------------------------- |
| `elements` | [CanvasElementOptions](#canvaselementoptions)[] | **Yes** | | The list of canvas elements attached to the root element |
| `name` | string | **Yes** | | Name of the root element |
| `type` | string | **Yes** | | Type of root element (frame)<br/>Possible values are: `frame`. |

7
packages/grafana-schema/src/raw/composable/canvas/panelcfg/x/CanvasPanelCfg_types.gen.ts
View File

@ -11,7 +11,7 @@
import * as ui from '@grafana/schema';
export const pluginVersion = "10.3.0-pre";
export const pluginVersion = '10.3.0-pre';
export enum HorizontalConstraint {
Center = 'center',
@ -105,6 +105,10 @@ export const defaultCanvasElementOptions: Partial<CanvasElementOptions> = {
};
export interface Options {
/**
* Display mini map during zoom
*/
displayMiniMap: boolean;
/**
* Enable inline editing
*/
@ -134,6 +138,7 @@ export interface Options {
}
export const defaultOptions: Partial<Options> = {
displayMiniMap: true,
inlineEditing: true,
showAdvancedTypes: true,
};

15
public/app/features/canvas/runtime/scene.tsx
View File

@ -68,6 +68,7 @@ export class Scene {
currentLayer?: FrameState;
isEditingEnabled?: boolean;
shouldShowAdvancedTypes?: boolean;
shouldDisplayMiniMap?: boolean;
skipNextSelectionBroadcast = false;
ignoreDataUpdate = false;
panel: CanvasPanel;
@ -104,10 +105,11 @@ export class Scene {
cfg: CanvasFrameOptions,
enableEditing: boolean,
showAdvancedTypes: boolean,
displayMiniMap: boolean,
public onSave: (cfg: CanvasFrameOptions) => void,
panel: CanvasPanel
) {
this.root = this.load(cfg, enableEditing, showAdvancedTypes);
this.root = this.load(cfg, enableEditing, showAdvancedTypes, displayMiniMap);
this.subscription = this.editModeEnabled.subscribe((open) => {
if (!this.moveable || !this.isEditingEnabled) {
@ -140,7 +142,7 @@ export class Scene {
return !this.byName.has(v);
};
load(cfg: CanvasFrameOptions, enableEditing: boolean, showAdvancedTypes: boolean) {
load(cfg: CanvasFrameOptions, enableEditing: boolean, showAdvancedTypes: boolean, displayMiniMap: boolean) {
this.root = new RootElement(
cfg ?? {
type: 'frame',
@ -152,6 +154,7 @@ export class Scene {
this.isEditingEnabled = enableEditing;
this.shouldShowAdvancedTypes = showAdvancedTypes;
this.shouldDisplayMiniMap = displayMiniMap;
setTimeout(() => {
if (this.div) {
@ -730,9 +733,11 @@ export class Scene {
right: '0px',
}}
>
<MiniMap width={200} borderColor={config.theme2.colors.border.weak}>
{element}
</MiniMap>
{this.shouldDisplayMiniMap && (
<MiniMap width={200} borderColor={config.theme2.colors.border.weak}>
{element}
</MiniMap>
)}
</div>
<TransformComponent>{element}</TransformComponent>
</TransformWrapper>

11
public/app/plugins/panel/canvas/CanvasPanel.tsx
View File

@ -67,6 +67,7 @@ export class CanvasPanel extends Component<Props, State> {
this.props.options.root,
this.props.options.inlineEditing,
this.props.options.showAdvancedTypes,
this.props.options.displayMiniMap,
this.onUpdateScene,
this
);
@ -227,14 +228,20 @@ export class CanvasPanel extends Component<Props, State> {
const inlineEditingSwitched = this.props.options.inlineEditing !== nextProps.options.inlineEditing;
const shouldShowAdvancedTypesSwitched =
this.props.options.showAdvancedTypes !== nextProps.options.showAdvancedTypes;
if (this.needsReload || inlineEditingSwitched || shouldShowAdvancedTypesSwitched) {
const displayMiniMapSwitched = this.props.options.displayMiniMap !== nextProps.options.displayMiniMap;
if (this.needsReload || inlineEditingSwitched || shouldShowAdvancedTypesSwitched || displayMiniMapSwitched) {
if (inlineEditingSwitched) {
// Replace scene div to prevent selecto instance leaks
this.scene.revId++;
}
this.needsReload = false;
this.scene.load(nextProps.options.root, nextProps.options.inlineEditing, nextProps.options.showAdvancedTypes);
this.scene.load(
nextProps.options.root,
nextProps.options.inlineEditing,
nextProps.options.showAdvancedTypes,
nextProps.options.displayMiniMap
);
this.scene.updateSize(nextProps.width, nextProps.height);
this.scene.updateData(nextProps.data);
changed = true;

7
public/app/plugins/panel/canvas/module.tsx
View File

@ -22,6 +22,13 @@ export const addStandardCanvasEditorOptions = (builder: PanelOptionsEditorBuilde
description: 'Enable selection of experimental element types',
defaultValue: true,
});
builder.addBooleanSwitch({
path: 'displayMiniMap',
name: 'Mini Map',
description: 'Display mini map during zoom',
defaultValue: true,
});
};
export const plugin = new PanelPlugin<Options>(CanvasPanel)

2
public/app/plugins/panel/canvas/panelcfg.cue
View File

@ -88,6 +88,8 @@ composableKinds: PanelCfg: {
inlineEditing: bool | *true
// Show all available element types
showAdvancedTypes: bool | *true
// Display mini map during zoom
displayMiniMap: bool | *true
// The root element of canvas (frame), where all canvas elements are nested
// TODO: Figure out how to define a default value for this
root: {

5
public/app/plugins/panel/canvas/panelcfg.gen.ts
View File

@ -102,6 +102,10 @@ export const defaultCanvasElementOptions: Partial<CanvasElementOptions> = {
};
export interface Options {
/**
* Display mini map during zoom
*/
displayMiniMap: boolean;
/**
* Enable inline editing
*/
@ -131,6 +135,7 @@ export interface Options {
}
export const defaultOptions: Partial<Options> = {
displayMiniMap: true,
inlineEditing: true,
showAdvancedTypes: true,
};