IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Canvas: Fix duplicated option editors functionality (#53184)

Browse Source 
Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
This commit is contained in:
Adela Almasan 2022-08-03 14:49:35 -05:00 committed by GitHub
parent 4c02d072e3
commit d54e55ea9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
public/app/features/dimensions/editors/BackgroundSizeEditor.tsx Normal file
View File

@ -0,0 +1,34 @@
import React, { FC, useCallback } from 'react';
import { SelectableValue, StandardEditorProps } from '@grafana/data';
import { InlineField, InlineFieldRow, RadioButtonGroup } from '@grafana/ui/src';
import { BackgroundImageSize } from 'app/features/canvas';
const options: Array<SelectableValue<BackgroundImageSize>> = [
{ value: BackgroundImageSize.Original, label: 'Original' },
{ value: BackgroundImageSize.Contain, label: 'Contain' },
{ value: BackgroundImageSize.Cover, label: 'Cover' },
{ value: BackgroundImageSize.Fill, label: 'Fill' },
{ value: BackgroundImageSize.Tile, label: 'Tile' },
];
export const BackgroundSizeEditor: FC<StandardEditorProps<string, undefined, undefined>> = (props) => {
const { value, onChange } = props;
const imageSize = value ?? BackgroundImageSize.Cover;
const onImageSizeChange = useCallback(
(size) => {
onChange(size);
},
[onChange]
);
return (
<InlineFieldRow>
<InlineField grow={true}>
<RadioButtonGroup value={imageSize} options={options} onChange={onImageSizeChange} fullWidth />
</InlineField>
</InlineFieldRow>
);
};

27
public/app/plugins/panel/canvas/editor/options.ts
View File

@ -1,15 +1,23 @@
import { PanelOptionsSupplier } from '@grafana/data/src/panel/PanelPlugin';
import { BackgroundImageSize, CanvasElementOptions } from 'app/features/canvas';
import { CanvasElementOptions } from 'app/features/canvas';
import { ColorDimensionEditor, ResourceDimensionEditor } from 'app/features/dimensions/editors';
import { BackgroundSizeEditor } from 'app/features/dimensions/editors/BackgroundSizeEditor';
interface OptionSuppliers {
addBackground: PanelOptionsSupplier<CanvasElementOptions>;
addBorder: PanelOptionsSupplier<CanvasElementOptions>;
}
const getCategoryName = (str: string, type: string | undefined) => {
if (type !== 'frame' && type !== undefined) {
return [str + ` (${type})`];
}
return [str];
};
export const optionBuilder: OptionSuppliers = {
addBackground: (builder, context) => {
const category = ['Background'];
const category = getCategoryName('Background', context.options?.type);
builder
.addCustomEditor({
category,
@ -33,25 +41,20 @@ export const optionBuilder: OptionSuppliers = {
resourceType: 'image',
},
})
.addRadio({
.addCustomEditor({
category,
id: 'background.size',
path: 'background.size',
name: 'Image size',
editor: BackgroundSizeEditor,
settings: {
options: [
{ value: BackgroundImageSize.Original, label: 'Original' },
{ value: BackgroundImageSize.Contain, label: 'Contain' },
{ value: BackgroundImageSize.Cover, label: 'Cover' },
{ value: BackgroundImageSize.Fill, label: 'Fill' },
{ value: BackgroundImageSize.Tile, label: 'Tile' },
],
resourceType: 'image',
},
defaultValue: BackgroundImageSize.Cover,
});
},
addBorder: (builder, context) => {
const category = ['Border'];
const category = getCategoryName('Border', context.options?.type);
builder.addSliderInput({
category,
path: 'border.width',