From 46eac518d3152551d2850acc32aad4f4703bdaa6 Mon Sep 17 00:00:00 2001 From: Ryan McKinley Date: Tue, 20 Jul 2021 15:52:12 -0700 Subject: [PATCH] Geomap: set value default on init (#36960) --- packages/grafana-data/src/geo/layer.ts | 2 +- .../plugins/panel/geomap/dims/scale.test.ts | 6 ++-- public/app/plugins/panel/geomap/dims/scale.ts | 15 ++++++---- .../panel/geomap/editor/LayerEditor.tsx | 9 +++++- .../panel/geomap/layers/data/markersLayer.tsx | 28 +++++++++++++------ public/app/plugins/panel/geomap/module.tsx | 14 ++-------- 6 files changed, 44 insertions(+), 30 deletions(-) diff --git a/packages/grafana-data/src/geo/layer.ts b/packages/grafana-data/src/geo/layer.ts index 215c8bcd6e2..51d645859fd 100644 --- a/packages/grafana-data/src/geo/layer.ts +++ b/packages/grafana-data/src/geo/layer.ts @@ -34,7 +34,7 @@ export interface FrameGeometrySource { lookup?: string; // Path to a mappings file - lookupSrc: string; + lookupSrc?: string; } /** diff --git a/public/app/plugins/panel/geomap/dims/scale.test.ts b/public/app/plugins/panel/geomap/dims/scale.test.ts index dece6bab39c..7325a5c2ce2 100644 --- a/public/app/plugins/panel/geomap/dims/scale.test.ts +++ b/public/app/plugins/panel/geomap/dims/scale.test.ts @@ -8,9 +8,9 @@ describe('scale dimensions', () => { }); expect(out).toMatchInlineSnapshot(` Object { - "fixed": 2.5, + "fixed": 7.5, "max": 10, - "min": 2.5, + "min": 5, } `); }); @@ -29,7 +29,7 @@ describe('scale dimensions', () => { ); expect(out).toMatchInlineSnapshot(` Object { - "fixed": 7, + "fixed": 10, "max": 7, "min": 5, } diff --git a/public/app/plugins/panel/geomap/dims/scale.ts b/public/app/plugins/panel/geomap/dims/scale.ts index 9b2357adec1..a91545184e5 100644 --- a/public/app/plugins/panel/geomap/dims/scale.ts +++ b/public/app/plugins/panel/geomap/dims/scale.ts @@ -81,13 +81,18 @@ export function validateScaleConfig(copy: ScaleDimensionConfig, options: ScaleDi if (copy.max > max) { copy.max = max; } + if (copy.fixed == null) { - copy.fixed = copy.min = (copy.max - copy.min) / 2.0; + copy.fixed = copy.min + (copy.max - copy.min) / 2.0; } - if (copy.fixed > copy.max) { - copy.fixed = copy.max; - } else if (copy.fixed < copy.min) { - copy.fixed = copy.min; + + // Make sure the field value is within the absolute range + if (!copy.field) { + if (copy.fixed > max) { + copy.fixed = max; + } else if (copy.fixed < min) { + copy.fixed = min; + } } return copy; } diff --git a/public/app/plugins/panel/geomap/editor/LayerEditor.tsx b/public/app/plugins/panel/geomap/editor/LayerEditor.tsx index aca90ac5be6..af0b2cac32e 100644 --- a/public/app/plugins/panel/geomap/editor/LayerEditor.tsx +++ b/public/app/plugins/panel/geomap/editor/LayerEditor.tsx @@ -40,6 +40,7 @@ export const LayerEditor: FC = ({ options, onChange, data, fil if (!layer || !(layer.registerOptionsUI || layer.showLocation || layer.showOpacity)) { return null; } + const builder = new PanelOptionsEditorBuilder(); if (layer.showLocation) { builder @@ -112,7 +113,13 @@ export const LayerEditor: FC = ({ options, onChange, data, fil options: options, }; - const currentOptions = { ...options, config: { ...layer.defaultOptions, ...options?.config } }; + const currentOptions = { ...options, type: layer.id, config: { ...layer.defaultOptions, ...options?.config } }; + + // Update the panel options if not set + if (!options || (layer.defaultOptions && !options.config)) { + onChange(currentOptions as any); + } + const reg = optionsEditorBuilder.getRegistry(); // Load the options into categories diff --git a/public/app/plugins/panel/geomap/layers/data/markersLayer.tsx b/public/app/plugins/panel/geomap/layers/data/markersLayer.tsx index 1ef93c7ac5a..48ed396d413 100644 --- a/public/app/plugins/panel/geomap/layers/data/markersLayer.tsx +++ b/public/app/plugins/panel/geomap/layers/data/markersLayer.tsx @@ -1,4 +1,4 @@ -import { MapLayerRegistryItem, MapLayerOptions, MapLayerHandler, PanelData, GrafanaTheme2 } from '@grafana/data'; +import { MapLayerRegistryItem, MapLayerOptions, MapLayerHandler, PanelData, GrafanaTheme2, FrameGeometrySourceMode } from '@grafana/data'; import Map from 'ol/Map'; import Feature from 'ol/Feature'; import * as layer from 'ol/layer'; @@ -23,8 +23,8 @@ export interface MarkersConfig { const defaultOptions: MarkersConfig = { size: { fixed: 5, - min: 5, - max: 10, + min: 2, + max: 15, }, color: { fixed: '#f00', @@ -34,6 +34,15 @@ const defaultOptions: MarkersConfig = { export const MARKERS_LAYER_ID = "markers"; +// Used by default when nothing is configured +export const defaultMarkersConfig:MapLayerOptions = { + type: MARKERS_LAYER_ID, + config: defaultOptions, + location: { + mode: FrameGeometrySourceMode.Auto, + } +} + /** * Map layer configuration for circle overlay */ @@ -51,13 +60,18 @@ export const markersLayer: MapLayerRegistryItem = { create: (map: Map, options: MapLayerOptions, theme: GrafanaTheme2): MapLayerHandler => { const matchers = getLocationMatchers(options.location); const vectorLayer = new layer.Vector({}); + // Assert default values + const config = { + ...defaultOptions, + ...options?.config, + }; + return { init: () => vectorLayer, update: (data: PanelData) => { if(!data.series?.length) { return; // ignore empty } - const frame = data.series[0]; const info = dataFrameToPoints(frame, matchers); if(info.warning) { @@ -65,11 +79,6 @@ export const markersLayer: MapLayerRegistryItem = { return; // ??? } - // Assert default values - const config = { - ...defaultOptions, - ...options?.config, - }; const colorDim = getColorDimension(frame, config.color, theme); const sizeDim = getScaledDimension(frame, config.size); const opacity = options.config?.fillOpacity ?? defaultOptions.fillOpacity; @@ -152,6 +161,7 @@ export const markersLayer: MapLayerRegistryItem = { }, }); }, + // fill in the default values defaultOptions, }; diff --git a/public/app/plugins/panel/geomap/module.tsx b/public/app/plugins/panel/geomap/module.tsx index 39952dfe99f..d10f4dc4f59 100644 --- a/public/app/plugins/panel/geomap/module.tsx +++ b/public/app/plugins/panel/geomap/module.tsx @@ -1,4 +1,4 @@ -import { FrameGeometrySourceMode, PanelPlugin } from '@grafana/data'; +import { PanelPlugin } from '@grafana/data'; import { BaseLayerEditor } from './editor/BaseLayerEditor'; import { DataLayersEditor } from './editor/DataLayersEditor'; import { GeomapPanel } from './GeomapPanel'; @@ -6,7 +6,7 @@ import { MapViewEditor } from './editor/MapViewEditor'; import { defaultView, GeomapPanelOptions } from './types'; import { mapPanelChangedHandler } from './migrations'; import { defaultGrafanaThemedMap } from './layers/basemaps'; -import { MARKERS_LAYER_ID } from './layers/data/markersLayer'; +import { defaultMarkersConfig } from './layers/data/markersLayer'; export const plugin = new PanelPlugin(GeomapPanel) .setNoPadding() @@ -51,15 +51,7 @@ export const plugin = new PanelPlugin(GeomapPanel) path: 'layers', name: 'Data Layer', editor: DataLayersEditor, - defaultValue: [ - { - type: MARKERS_LAYER_ID, - config: {}, - location: { - mode: FrameGeometrySourceMode.Auto, - }, - }, - ], + defaultValue: [defaultMarkersConfig], }); // The controls section