diff --git a/public/app/plugins/panel/geomap/editor/GeomapStyleRulesEditor.tsx b/public/app/plugins/panel/geomap/editor/GeomapStyleRulesEditor.tsx index d69daf2e95d..c3d1cf1f7f1 100644 --- a/public/app/plugins/panel/geomap/editor/GeomapStyleRulesEditor.tsx +++ b/public/app/plugins/panel/geomap/editor/GeomapStyleRulesEditor.tsx @@ -1,17 +1,27 @@ import React, { FC, useCallback } from 'react'; +import { Button, useTheme2 } from '@grafana/ui'; import { StandardEditorProps, StandardEditorsRegistryItem } from '@grafana/data'; + import { FeatureStyleConfig } from '../types'; -import { Button } from '@grafana/ui'; import { DEFAULT_STYLE_RULE } from '../layers/data/geojsonLayer'; import { StyleRuleEditor, StyleRuleEditorSettings } from './StyleRuleEditor'; +import { defaultStyleConfig } from '../style/types'; export const GeomapStyleRulesEditor: FC> = (props) => { const { value, onChange, context, item } = props; + const theme = useTheme2(); const settings = item.settings; const onAddRule = useCallback(() => { - onChange([...value, DEFAULT_STYLE_RULE]); - }, [onChange, value]); + const { palette } = theme.visualization; + const color = { + fixed: palette[Math.floor(Math.random() * palette.length)], + }; + + const newRule = [...value, { ...DEFAULT_STYLE_RULE, style: { ...defaultStyleConfig, color } }]; + + onChange(newRule); + }, [onChange, value, theme.visualization]); const onRuleChange = useCallback( (idx) => (style: FeatureStyleConfig | undefined) => { diff --git a/public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx b/public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx index 94a6fae3738..8f185ff22fe 100644 --- a/public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx +++ b/public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx @@ -12,7 +12,6 @@ import { getUniqueFeatureValues, LayerContentInfo } from '../utils/getFeatures'; import { FeatureLike } from 'ol/Feature'; import { getSelectionInfo } from '../utils/selection'; import { NumberInput } from 'app/features/dimensions/editors/NumberInput'; -import { isNumber } from 'lodash'; export interface StyleRuleEditorSettings { features: Observable; @@ -21,6 +20,7 @@ export interface StyleRuleEditorSettings { const comparators = [ { label: '==', value: ComparisonOperation.EQ }, + { label: '!=', value: ComparisonOperation.NEQ }, { label: '>', value: ComparisonOperation.GT }, { label: '>=', value: ComparisonOperation.GTE }, { label: '<', value: ComparisonOperation.LT }, @@ -40,7 +40,21 @@ export const StyleRuleEditor: FC { const key = value?.check?.property; if (key && feats && value.check?.operation === ComparisonOperation.EQ) { - return getUniqueFeatureValues(feats, key).map((v) => ({ value: v, label: v })); + return getUniqueFeatureValues(feats, key).map((v) => { + let newValue; + let isNewValueNumber = !isNaN(Number(v)); + + if (isNewValueNumber) { + newValue = { + value: Number(v), + label: v, + }; + } else { + newValue = { value: v, label: v }; + } + + return newValue; + }); } return []; }, [feats, value]); @@ -143,7 +157,7 @@ export const StyleRuleEditor: FC <> - {check.operation === ComparisonOperation.EQ && ( + {(check.operation === ComparisonOperation.EQ || check.operation === ComparisonOperation.NEQ) && (