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:
nikki-kiga 2021-10-14 08:30:24 -07:00 committed by GitHub
parent 51a48e1869
commit 86e89d9dc3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 34 deletions

View File

@ -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;
`,
});

View File

@ -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);

View File

@ -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({