mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Geomap: Add icon to ResourceDimensionEditor and fix marker color (#40418)
* add resourcedimension icon and fix marker color * update to input prefix and markerShapePath * update to svg from icon
This commit is contained in:
parent
51a48e1869
commit
86e89d9dc3
@ -1,11 +1,17 @@
|
||||
import React, { FC, useCallback, useState } from 'react';
|
||||
import { FieldNamePickerConfigSettings, StandardEditorProps, StandardEditorsRegistryItem } from '@grafana/data';
|
||||
import {
|
||||
FieldNamePickerConfigSettings,
|
||||
GrafanaTheme2,
|
||||
StandardEditorProps,
|
||||
StandardEditorsRegistryItem,
|
||||
} from '@grafana/data';
|
||||
import { ResourceDimensionConfig, ResourceDimensionMode, ResourceDimensionOptions } from '../types';
|
||||
import { InlineField, InlineFieldRow, RadioButtonGroup, Button, Modal, Input } from '@grafana/ui';
|
||||
import { InlineField, InlineFieldRow, RadioButtonGroup, Button, Modal, Input, useStyles2 } from '@grafana/ui';
|
||||
import { FieldNamePicker } from '../../../../../packages/grafana-ui/src/components/MatchersUI/FieldNamePicker';
|
||||
import { ResourcePicker } from './ResourcePicker';
|
||||
import { ResourceFolderName } from '..';
|
||||
|
||||
import { getPublicOrAbsoluteUrl, ResourceFolderName } from '..';
|
||||
import SVG from 'react-inlinesvg';
|
||||
import { css } from '@emotion/css';
|
||||
const resourceOptions = [
|
||||
{ label: 'Fixed', value: ResourceDimensionMode.Fixed, description: 'Fixed value' },
|
||||
{ label: 'Field', value: ResourceDimensionMode.Field, description: 'Use a string field result' },
|
||||
@ -22,6 +28,7 @@ export const ResourceDimensionEditor: FC<
|
||||
const { value, context, onChange, item } = props;
|
||||
const labelWidth = 9;
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
const onModeChange = useCallback(
|
||||
(mode) => {
|
||||
@ -62,6 +69,7 @@ export const ResourceDimensionEditor: FC<
|
||||
const showSourceRadio = item.settings?.showSourceRadio ?? true;
|
||||
const mediaType = item.settings?.resourceType ?? 'icon';
|
||||
const folderName = item.settings?.folderName ?? ResourceFolderName.Icon;
|
||||
const srcPath = mediaType === 'icon' && value ? getPublicOrAbsoluteUrl(value?.fixed) : '';
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -92,7 +100,13 @@ export const ResourceDimensionEditor: FC<
|
||||
{mode === ResourceDimensionMode.Fixed && (
|
||||
<InlineFieldRow>
|
||||
<InlineField label={null} grow>
|
||||
<Input value={value?.fixed} placeholder="Resource URL" readOnly={true} onClick={openModal} />
|
||||
<Input
|
||||
value={value?.fixed}
|
||||
placeholder="Resource URL"
|
||||
readOnly={true}
|
||||
onClick={openModal}
|
||||
prefix={srcPath && <SVG src={srcPath} className={styles.icon} />}
|
||||
/>
|
||||
</InlineField>
|
||||
<Button icon="folder-open" variant="secondary" onClick={openModal} />
|
||||
</InlineFieldRow>
|
||||
@ -107,3 +121,11 @@ export const ResourceDimensionEditor: FC<
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
icon: css`
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
fill: currentColor;
|
||||
`,
|
||||
});
|
||||
|
@ -28,7 +28,7 @@ import {
|
||||
import { ScaleDimensionEditor, ColorDimensionEditor, ResourceDimensionEditor } from 'app/features/dimensions/editors';
|
||||
import { ObservablePropsWrapper } from '../../components/ObservablePropsWrapper';
|
||||
import { MarkersLegend, MarkersLegendProps } from './MarkersLegend';
|
||||
import { StyleMaker, getMarkerFromPath, MarkerShapePath } from '../../utils/regularShapes';
|
||||
import { StyleMaker, getMarkerFromPath } from '../../utils/regularShapes';
|
||||
import { ReplaySubject } from 'rxjs';
|
||||
|
||||
// Configuration options for Circle overlays
|
||||
@ -55,7 +55,7 @@ const defaultOptions: MarkersConfig = {
|
||||
showLegend: true,
|
||||
markerSymbol: {
|
||||
mode: ResourceDimensionMode.Fixed,
|
||||
fixed: MarkerShapePath.Circle,
|
||||
fixed: 'img/icons/marker/circle.svg',
|
||||
},
|
||||
};
|
||||
|
||||
@ -108,7 +108,7 @@ export const markersLayer: MapLayerRegistryItem<MarkersConfig> = {
|
||||
}
|
||||
|
||||
const markerPath =
|
||||
getPublicOrAbsoluteUrl(config.markerSymbol?.fixed) ?? getPublicOrAbsoluteUrl(MarkerShapePath.Circle);
|
||||
getPublicOrAbsoluteUrl(config.markerSymbol?.fixed) ?? getPublicOrAbsoluteUrl('img/icons/marker/circle.svg');
|
||||
|
||||
const marker = getMarkerFromPath(config.markerSymbol?.fixed);
|
||||
|
||||
|
@ -11,28 +11,28 @@ export interface MarkerMaker extends RegistryItem {
|
||||
}
|
||||
|
||||
export enum RegularShapeId {
|
||||
Circle = 'circle',
|
||||
Square = 'square',
|
||||
Triangle = 'triangle',
|
||||
Star = 'star',
|
||||
Cross = 'cross',
|
||||
X = 'x',
|
||||
circle = 'circle',
|
||||
square = 'square',
|
||||
triangle = 'triangle',
|
||||
star = 'star',
|
||||
cross = 'cross',
|
||||
x = 'x',
|
||||
}
|
||||
|
||||
export enum MarkerShapePath {
|
||||
Circle = 'img/icons/marker/circle.svg',
|
||||
Square = 'img/icons/marker/square.svg',
|
||||
Triangle = 'img/icons/marker/triangle.svg',
|
||||
Star = 'img/icons/marker/star.svg',
|
||||
Cross = 'img/icons/marker/cross.svg',
|
||||
X = 'img/icons/marker/x-mark.svg',
|
||||
}
|
||||
const MarkerShapePath = {
|
||||
circle: 'img/icons/marker/circle.svg',
|
||||
square: 'img/icons/marker/square.svg',
|
||||
triangle: 'img/icons/marker/triangle.svg',
|
||||
star: 'img/icons/marker/star.svg',
|
||||
cross: 'img/icons/marker/cross.svg',
|
||||
x: 'img/icons/marker/x-mark.svg',
|
||||
};
|
||||
|
||||
export const circleMarker: MarkerMaker = {
|
||||
id: RegularShapeId.Circle,
|
||||
id: RegularShapeId.circle,
|
||||
name: 'Circle',
|
||||
hasFill: true,
|
||||
aliasIds: [MarkerShapePath.Circle],
|
||||
aliasIds: [MarkerShapePath.circle],
|
||||
make: (color: string, fillColor: string, radius: number) => {
|
||||
return new Style({
|
||||
image: new Circle({
|
||||
@ -47,10 +47,10 @@ export const circleMarker: MarkerMaker = {
|
||||
const makers: MarkerMaker[] = [
|
||||
circleMarker,
|
||||
{
|
||||
id: RegularShapeId.Square,
|
||||
id: RegularShapeId.square,
|
||||
name: 'Square',
|
||||
hasFill: true,
|
||||
aliasIds: [MarkerShapePath.Square],
|
||||
aliasIds: [MarkerShapePath.square],
|
||||
make: (color: string, fillColor: string, radius: number) => {
|
||||
return new Style({
|
||||
image: new RegularShape({
|
||||
@ -64,10 +64,10 @@ const makers: MarkerMaker[] = [
|
||||
},
|
||||
},
|
||||
{
|
||||
id: RegularShapeId.Triangle,
|
||||
id: RegularShapeId.triangle,
|
||||
name: 'Triangle',
|
||||
hasFill: true,
|
||||
aliasIds: [MarkerShapePath.Triangle],
|
||||
aliasIds: [MarkerShapePath.triangle],
|
||||
make: (color: string, fillColor: string, radius: number) => {
|
||||
return new Style({
|
||||
image: new RegularShape({
|
||||
@ -82,10 +82,10 @@ const makers: MarkerMaker[] = [
|
||||
},
|
||||
},
|
||||
{
|
||||
id: RegularShapeId.Star,
|
||||
id: RegularShapeId.star,
|
||||
name: 'Star',
|
||||
hasFill: true,
|
||||
aliasIds: [MarkerShapePath.Star],
|
||||
aliasIds: [MarkerShapePath.star],
|
||||
make: (color: string, fillColor: string, radius: number) => {
|
||||
return new Style({
|
||||
image: new RegularShape({
|
||||
@ -100,10 +100,10 @@ const makers: MarkerMaker[] = [
|
||||
},
|
||||
},
|
||||
{
|
||||
id: RegularShapeId.Cross,
|
||||
id: RegularShapeId.cross,
|
||||
name: 'Cross',
|
||||
hasFill: false,
|
||||
aliasIds: [MarkerShapePath.Cross],
|
||||
aliasIds: [MarkerShapePath.cross],
|
||||
make: (color: string, fillColor: string, radius: number) => {
|
||||
return new Style({
|
||||
image: new RegularShape({
|
||||
@ -118,10 +118,10 @@ const makers: MarkerMaker[] = [
|
||||
},
|
||||
},
|
||||
{
|
||||
id: RegularShapeId.X,
|
||||
id: RegularShapeId.x,
|
||||
name: 'X',
|
||||
hasFill: false,
|
||||
aliasIds: [MarkerShapePath.X],
|
||||
aliasIds: [MarkerShapePath.x],
|
||||
make: (color: string, fillColor: string, radius: number) => {
|
||||
return new Style({
|
||||
image: new RegularShape({
|
||||
|
Loading…
Reference in New Issue
Block a user