mirror of https://github.com/grafana/grafana
Geomap: Combine Text layer with Markers Layer and add text options (#41768)
* add text to markers * add textConfig * remove separate text layer * update test * Update public/app/plugins/panel/geomap/style/markers.ts Co-authored-by: Ryan McKinley <ryantxu@gmail.com> * Update public/app/plugins/panel/geomap/style/markers.ts Co-authored-by: Ryan McKinley <ryantxu@gmail.com> * update textConfig naming Co-authored-by: Ryan McKinley <ryantxu@gmail.com>pull/37758/head^2
nikki-kiga
4 years ago
committed by
GitHub
parent
88aec85e3d
commit
306f0785e1
@ -1,146 +0,0 @@ |
||||
import { GrafanaTheme2, MapLayerOptions, MapLayerRegistryItem, PanelData, PluginState } from '@grafana/data'; |
||||
import Map from 'ol/Map'; |
||||
import * as layer from 'ol/layer'; |
||||
import * as source from 'ol/source'; |
||||
import { dataFrameToPoints, getLocationMatchers } from '../../utils/location'; |
||||
import { |
||||
getColorDimension, |
||||
getScaledDimension, |
||||
getTextDimension, |
||||
TextDimensionMode, |
||||
} from 'app/features/dimensions'; |
||||
import { ColorDimensionEditor, ScaleDimensionEditor, TextDimensionEditor } from 'app/features/dimensions/editors'; |
||||
import { FeaturesStylesBuilderConfig, getFeatures } from '../../utils/getFeatures'; |
||||
import { Feature } from 'ol'; |
||||
import { Point } from 'ol/geom'; |
||||
import { textMarkerMaker } from '../../style/text'; |
||||
import { MarkersConfig } from './markersLayer'; |
||||
|
||||
|
||||
export const TEXT_LABELS_LAYER = 'text-labels'; |
||||
|
||||
// Same configuration
|
||||
type TextLabelsConfig = MarkersConfig; |
||||
|
||||
const defaultOptions = { |
||||
style: { |
||||
text: { |
||||
fixed: '', |
||||
mode: TextDimensionMode.Field, |
||||
}, |
||||
color: { |
||||
fixed: 'dark-blue', |
||||
}, |
||||
opacity: 1, |
||||
size: { |
||||
fixed: 10, |
||||
min: 5, |
||||
max: 100, |
||||
}, |
||||
}, |
||||
showLegend: false, |
||||
}; |
||||
|
||||
export const textLabelsLayer: MapLayerRegistryItem<TextLabelsConfig> = { |
||||
id: TEXT_LABELS_LAYER, |
||||
name: 'Text labels', |
||||
description: 'render text labels', |
||||
isBaseMap: false, |
||||
state: PluginState.alpha, |
||||
showLocation: true, |
||||
|
||||
create: async (map: Map, options: MapLayerOptions<TextLabelsConfig>, theme: GrafanaTheme2) => { |
||||
const matchers = await getLocationMatchers(options.location); |
||||
const vectorLayer = new layer.Vector({}); |
||||
|
||||
const config = { |
||||
...defaultOptions, |
||||
...options?.config, |
||||
}; |
||||
|
||||
return { |
||||
init: () => vectorLayer, |
||||
update: (data: PanelData) => { |
||||
if (!data.series?.length) { |
||||
return; |
||||
} |
||||
|
||||
const features: Feature<Point>[] = []; |
||||
|
||||
|
||||
const style = config.style ?? defaultOptions.style; |
||||
|
||||
for (const frame of data.series) { |
||||
const info = dataFrameToPoints(frame, matchers); |
||||
if (info.warning) { |
||||
console.log('Could not find locations', info.warning); |
||||
return; |
||||
} |
||||
|
||||
const colorDim = getColorDimension(frame, style.color ?? defaultOptions.style.color, theme); |
||||
const sizeDim = getScaledDimension(frame, style.size ?? defaultOptions.style.size); |
||||
const opacity = style?.opacity ?? defaultOptions.style.opacity; |
||||
const textDim = getTextDimension(frame, style.text ?? defaultOptions.style.text ); |
||||
|
||||
const featureDimensionConfig: FeaturesStylesBuilderConfig = { |
||||
colorDim: colorDim, |
||||
sizeDim: sizeDim, |
||||
textDim: textDim, |
||||
opacity: opacity, |
||||
styleMaker: textMarkerMaker, |
||||
}; |
||||
|
||||
const frameFeatures = getFeatures(frame, info, featureDimensionConfig); |
||||
|
||||
if (frameFeatures) { |
||||
features.push(...frameFeatures); |
||||
} |
||||
} |
||||
|
||||
// Source reads the data and provides a set of features to visualize
|
||||
const vectorSource = new source.Vector({ features }); |
||||
vectorLayer.setSource(vectorSource); |
||||
}, |
||||
registerOptionsUI: (builder) => { |
||||
builder |
||||
.addCustomEditor({ |
||||
id: 'config.style.text', |
||||
path: 'config.style.text', |
||||
name: 'Text label', |
||||
editor: TextDimensionEditor, |
||||
defaultValue: defaultOptions.style.text, |
||||
}) |
||||
.addCustomEditor({ |
||||
id: 'config.style.color', |
||||
path: 'config.style.color', |
||||
name: 'Text color', |
||||
editor: ColorDimensionEditor, |
||||
defaultValue: defaultOptions.style.color, |
||||
settings: {}, |
||||
}) |
||||
.addSliderInput({ |
||||
path: 'config.style.opacity', |
||||
name: 'Text opacity', |
||||
defaultValue: defaultOptions.style.opacity, |
||||
settings: { |
||||
min: 0, |
||||
max: 1, |
||||
step: 0.1, |
||||
}, |
||||
}) |
||||
.addCustomEditor({ |
||||
id: 'config.style.size', |
||||
path: 'config.style.size', |
||||
name: 'Text size', |
||||
editor: ScaleDimensionEditor, |
||||
defaultValue: defaultOptions.style.size, |
||||
settings: { |
||||
min: 2, |
||||
max: 50, |
||||
}, |
||||
}); |
||||
}, |
||||
}; |
||||
}, |
||||
defaultOptions, |
||||
}; |
||||
@ -1,16 +0,0 @@ |
||||
import { Style, Text } from 'ol/style'; |
||||
import { config } from '@grafana/runtime'; |
||||
import { StyleConfigValues, StyleMaker } from './types'; |
||||
import { getFillColor } from './markers'; |
||||
|
||||
export const textMarkerMaker: StyleMaker = (cfg: StyleConfigValues) => { |
||||
const fontFamily = config.theme2.typography.fontFamily; |
||||
const fontSize = cfg.size ?? 12; |
||||
return new Style({ |
||||
text: new Text({ |
||||
text: cfg.text ?? '?', |
||||
fill: getFillColor(cfg), |
||||
font: `normal ${fontSize}px ${fontFamily}`, |
||||
}), |
||||
}); |
||||
}; |
||||
Loading…
Reference in new issue