IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Geomap: Fix route layer crosshair share (#76702)

Browse Source 
* Geomap: Fix route layer crosshair share

* Update crosshair styling

* Consolidate horizontal and vertical lines

* Consolidate clear out

* Create const for crosshair color

---------

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
This commit is contained in:
Drew Slobodnjak 2023-10-24 08:15:31 -07:00 committed by GitHub
parent f7445777c7
commit 97be80d1f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 55 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -7207,6 +7207,9 @@ exports[`better eslint`] = {
"public/app/plugins/panel/geomap/layers/data/geojsonDynamic.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/plugins/panel/geomap/layers/data/routeLayer.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/plugins/panel/geomap/layers/registry.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]

60
public/app/plugins/panel/geomap/layers/data/routeLayer.tsx
View File

@ -19,7 +19,7 @@ import {
DataHoverEvent,
DataHoverClearEvent,
DataFrame,
TIME_SERIES_TIME_FIELD_NAME,
FieldType,
} from '@grafana/data';
import { alpha } from '@grafana/data/src/themes/colorManipulator';
import { MapLayerOptions, FrameGeometrySourceMode } from '@grafana/schema';
@ -60,6 +60,15 @@ export const defaultRouteConfig: MapLayerOptions<RouteConfig> = {
tooltip: false,
};
enum mapIndex {
x1 = 0,
y1 = 1,
x2 = 2,
y2 = 3,
}
const crosshairColor = '#607D8B';
/**
* Map layer configuration for circle overlay
*/
@ -190,15 +199,26 @@ export const routeLayer: MapLayerRegistryItem<RouteConfig> = {
// Crosshair layer
const crosshairFeature = new Feature({});
const crosshairRadius = (style.base.lineWidth || 6) + 2;
const hLineFeature = new Feature({});
const vLineFeature = new Feature({});
const lineFeatures = [hLineFeature, vLineFeature];
const crosshairRadius = (style.base.lineWidth || 6) + 3;
const crosshairStyle = new Style({
image: new Circle({
radius: crosshairRadius,
stroke: new Stroke({
color: alpha(style.base.color, 0.4),
width: crosshairRadius + 2,
color: alpha(crosshairColor, 1),
width: 1,
}),
fill: new Fill({ color: style.base.color }),
fill: new Fill({ color: alpha(crosshairColor, 0.4) }),
}),
});
const lineStyle = new Style({
stroke: new Stroke({
color: crosshairColor,
width: 1,
lineDash: [3, 3],
lineCap: 'square',
}),
});
@ -209,8 +229,15 @@ export const routeLayer: MapLayerRegistryItem<RouteConfig> = {
style: crosshairStyle,
});
const linesLayer = new VectorLayer({
source: new VectorSource({
features: lineFeatures,
}),
style: lineStyle,
});
const layer = new LayerGroup({
layers: [vectorLayer, crosshairLayer],
layers: [vectorLayer, crosshairLayer, linesLayer],
});
// Crosshair sharing subscriptions
@ -222,19 +249,35 @@ export const routeLayer: MapLayerRegistryItem<RouteConfig> = {
.pipe(throttleTime(8))
.subscribe({
next: (event) => {
const mapExtents = map.getView().calculateExtent(map.getSize());
const feature = source.getFeatures()[0];
const frame: DataFrame = feature?.get('frame');
const time: number = event.payload?.point?.time;
if (frame && time) {
const timeField = frame.fields.find((f) => f.name === TIME_SERIES_TIME_FIELD_NAME);
const timeField = frame.fields.find((f) => f.type === FieldType.time);
if (timeField) {
const timestamps: number[] = timeField.values;
const pointIdx = findNearestTimeIndex(timestamps, time);
if (pointIdx !== null) {
const out = getGeometryField(frame, location);
if (out.field) {
crosshairFeature.setGeometry(out.field.values[pointIdx]);
const crosshairPoint: Point = out.field.values[pointIdx] as Point;
const crosshairPointCoords = crosshairPoint.getCoordinates();
crosshairFeature.setGeometry(crosshairPoint);
crosshairFeature.setStyle(crosshairStyle);
hLineFeature.setGeometry(
new LineString([
[mapExtents[mapIndex.x1], crosshairPointCoords[mapIndex.y1]],
[mapExtents[mapIndex.x2], crosshairPointCoords[mapIndex.y1]],
])
);
vLineFeature.setGeometry(
new LineString([
[crosshairPointCoords[mapIndex.x1], mapExtents[mapIndex.y1]],
[crosshairPointCoords[mapIndex.x1], mapExtents[mapIndex.y2]],
])
);
lineFeatures.forEach((feature) => feature.setStyle(lineStyle));
}
}
}
@ -246,6 +289,7 @@ export const routeLayer: MapLayerRegistryItem<RouteConfig> = {
subscriptions.add(
eventBus.subscribe(DataHoverClearEvent, (event) => {
crosshairFeature.setStyle(new Style({}));
lineFeatures.forEach((feature) => feature.setStyle(new Style({})));
})
);