Skip to content
This repository was archived by the owner on Jan 23, 2025. It is now read-only.

Commit 5aa8c3b

Browse files
danielleedaniellee
committed
tweak for incorrect height on render
which occurs more frequently in Grafana 6.0
1 parent a7027a4 commit 5aa8c3b

File tree

3 files changed

+95
-69
lines changed

3 files changed

+95
-69
lines changed

‎dist/module.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/module.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/worldmap_ctrl.ts‎

Lines changed: 93 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,58 @@
1-
import { MetricsPanelCtrl } from 'grafana/app/plugins/sdk';
2-
import TimeSeries from 'grafana/app/core/time_series2';
1+
import { MetricsPanelCtrl } from "grafana/app/plugins/sdk";
2+
import TimeSeries from "grafana/app/core/time_series2";
33

4-
import * as _ from 'lodash';
5-
import DataFormatter from './data_formatter';
6-
import './css/worldmap-panel.css';
7-
import $ from 'jquery';
8-
import './css/leaflet.css';
9-
import WorldMap from './worldmap';
4+
import * as _ from "lodash";
5+
import DataFormatter from "./data_formatter";
6+
import "./css/worldmap-panel.css";
7+
import $ from "jquery";
8+
import "./css/leaflet.css";
9+
import WorldMap from "./worldmap";
1010

1111
const panelDefaults = {
1212
maxDataPoints: 1,
13-
mapCenter: '(0°, 0°)',
13+
mapCenter: "(0°, 0°)",
1414
mapCenterLatitude: 0,
1515
mapCenterLongitude: 0,
1616
initialZoom: 1,
17-
valueName: 'total',
17+
valueName: "total",
1818
circleMinSize: 2,
1919
circleMaxSize: 30,
20-
locationData: 'countries',
21-
thresholds: '0,10',
22-
colors: ['rgba(245, 54, 54, 0.9)', 'rgba(237, 129, 40, 0.89)', 'rgba(50, 172, 45, 0.97)'],
23-
unitSingle: '',
24-
unitPlural: '',
20+
locationData: "countries",
21+
thresholds: "0,10",
22+
colors: [
23+
"rgba(245, 54, 54, 0.9)",
24+
"rgba(237, 129, 40, 0.89)",
25+
"rgba(50, 172, 45, 0.97)"
26+
],
27+
unitSingle: "",
28+
unitPlural: "",
2529
showLegend: true,
2630
mouseWheelZoom: false,
27-
esMetric: 'Count',
31+
esMetric: "Count",
2832
decimals: 0,
2933
hideEmpty: false,
3034
hideZero: false,
3135
stickyLabels: false,
3236
tableQueryOptions: {
33-
queryType: 'geohash',
34-
geohashField: 'geohash',
35-
latitudeField: 'latitude',
36-
longitudeField: 'longitude',
37-
metricField: 'metric',
38-
},
37+
queryType: "geohash",
38+
geohashField: "geohash",
39+
latitudeField: "latitude",
40+
longitudeField: "longitude",
41+
metricField: "metric"
42+
}
3943
};
4044

4145
const mapCenters = {
42-
'(0°, 0°)': { mapCenterLatitude: 0, mapCenterLongitude: 0 },
43-
'North America': { mapCenterLatitude: 40, mapCenterLongitude: -100 },
46+
"(0°, 0°)": { mapCenterLatitude: 0, mapCenterLongitude: 0 },
47+
"North America": { mapCenterLatitude: 40, mapCenterLongitude: -100 },
4448
Europe: { mapCenterLatitude: 46, mapCenterLongitude: 14 },
45-
'West Asia': { mapCenterLatitude: 26, mapCenterLongitude: 53 },
46-
'SE Asia': { mapCenterLatitude: 10, mapCenterLongitude: 106 },
47-
'Last GeoHash': { mapCenterLatitude: 0, mapCenterLongitude: 0 },
49+
"West Asia": { mapCenterLatitude: 26, mapCenterLongitude: 53 },
50+
"SE Asia": { mapCenterLatitude: 10, mapCenterLongitude: 106 },
51+
"Last GeoHash": { mapCenterLatitude: 0, mapCenterLongitude: 0 }
4852
};
4953

5054
export default class WorldmapCtrl extends MetricsPanelCtrl {
51-
static templateUrl = 'partials/module.html';
55+
static templateUrl = "partials/module.html";
5256

5357
dataFormatter: DataFormatter;
5458
locations: any;
@@ -68,24 +72,26 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
6872

6973
this.dataFormatter = new DataFormatter(this);
7074

71-
this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
72-
this.events.on('data-received', this.onDataReceived.bind(this));
73-
this.events.on('panel-teardown', this.onPanelTeardown.bind(this));
74-
this.events.on('data-snapshot-load', this.onDataSnapshotLoad.bind(this));
75+
this.events.on("init-edit-mode", this.onInitEditMode.bind(this));
76+
this.events.on("data-received", this.onDataReceived.bind(this));
77+
this.events.on("panel-teardown", this.onPanelTeardown.bind(this));
78+
this.events.on("data-snapshot-load", this.onDataSnapshotLoad.bind(this));
7579

7680
this.loadLocationDataFromFile();
7781
}
7882

7983
setMapProvider(contextSrv) {
80-
this.tileServer = contextSrv.user.lightTheme ? 'CartoDB Positron' : 'CartoDB Dark';
84+
this.tileServer = contextSrv.user.lightTheme
85+
? "CartoDB Positron"
86+
: "CartoDB Dark";
8187
this.setMapSaturationClass();
8288
}
8389

8490
setMapSaturationClass() {
85-
if (this.tileServer === 'CartoDB Dark') {
86-
this.saturationClass = 'map-darken';
91+
if (this.tileServer === "CartoDB Dark") {
92+
this.saturationClass = "map-darken";
8793
} else {
88-
this.saturationClass = '';
94+
this.saturationClass = "";
8995
}
9096
}
9197

@@ -99,23 +105,23 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
99105
return;
100106
}
101107

102-
if (this.panel.locationData === 'jsonp endpoint') {
108+
if (this.panel.locationData === "jsonp endpoint") {
103109
if (!this.panel.jsonpUrl || !this.panel.jsonpCallback) {
104110
return;
105111
}
106112

107113
$.ajax({
108-
type: 'GET',
109-
url: this.panel.jsonpUrl + '?callback=?',
110-
contentType: 'application/json',
114+
type: "GET",
115+
url: this.panel.jsonpUrl + "?callback=?",
116+
contentType: "application/json",
111117
jsonpCallback: this.panel.jsonpCallback,
112-
dataType: 'jsonp',
118+
dataType: "jsonp",
113119
success: res => {
114120
this.locations = res;
115121
this.render();
116-
},
122+
}
117123
});
118-
} else if (this.panel.locationData === 'json endpoint') {
124+
} else if (this.panel.locationData === "json endpoint") {
119125
if (!this.panel.jsonUrl) {
120126
return;
121127
}
@@ -124,12 +130,17 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
124130
this.locations = res;
125131
this.render();
126132
});
127-
} else if (this.panel.locationData === 'table') {
133+
} else if (this.panel.locationData === "table") {
128134
// .. Do nothing
129-
} else if (this.panel.locationData !== 'geohash' && this.panel.locationData !== 'json result') {
130-
$.getJSON('public/plugins/grafana-worldmap-panel/data/' + this.panel.locationData + '.json').then(
131-
this.reloadLocations.bind(this)
132-
);
135+
} else if (
136+
this.panel.locationData !== "geohash" &&
137+
this.panel.locationData !== "json result"
138+
) {
139+
$.getJSON(
140+
"public/plugins/grafana-worldmap-panel/data/" +
141+
this.panel.locationData +
142+
".json"
143+
).then(this.reloadLocations.bind(this));
133144
}
134145
}
135146

@@ -139,11 +150,17 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
139150
}
140151

141152
showTableGeohashOptions() {
142-
return this.panel.locationData === 'table' && this.panel.tableQueryOptions.queryType === 'geohash';
153+
return (
154+
this.panel.locationData === "table" &&
155+
this.panel.tableQueryOptions.queryType === "geohash"
156+
);
143157
}
144158

145159
showTableCoordinateOptions() {
146-
return this.panel.locationData === 'table' && this.panel.tableQueryOptions.queryType === 'coordinates';
160+
return (
161+
this.panel.locationData === "table" &&
162+
this.panel.tableQueryOptions.queryType === "coordinates"
163+
);
147164
}
148165

149166
onPanelTeardown() {
@@ -153,7 +170,11 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
153170
}
154171

155172
onInitEditMode() {
156-
this.addEditorTab('Worldmap', 'public/plugins/grafana-worldmap-panel/partials/editor.html', 2);
173+
this.addEditorTab(
174+
"Worldmap",
175+
"public/plugins/grafana-worldmap-panel/partials/editor.html",
176+
2
177+
);
157178
}
158179

159180
onDataReceived(dataList) {
@@ -167,12 +188,12 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
167188

168189
const data = [];
169190

170-
if (this.panel.locationData === 'geohash') {
191+
if (this.panel.locationData === "geohash") {
171192
this.dataFormatter.setGeohashValues(dataList, data);
172-
} else if (this.panel.locationData === 'table') {
193+
} else if (this.panel.locationData === "table") {
173194
const tableData = dataList.map(DataFormatter.tableHandler.bind(this));
174195
this.dataFormatter.setTableValues(tableData, data);
175-
} else if (this.panel.locationData === 'json result') {
196+
} else if (this.panel.locationData === "json result") {
176197
this.series = dataList;
177198
this.dataFormatter.setJsonValues(data);
178199
} else {
@@ -183,7 +204,7 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
183204

184205
this.updateThresholdData();
185206

186-
if (this.data.length && this.panel.mapCenter === 'Last GeoHash') {
207+
if (this.data.length && this.panel.mapCenter === "Last GeoHash") {
187208
this.centerOnLastGeoHash();
188209
} else {
189210
this.render();
@@ -193,7 +214,8 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
193214
centerOnLastGeoHash() {
194215
const last: any = _.last(this.data);
195216
mapCenters[this.panel.mapCenter].mapCenterLatitude = last.locationLatitude;
196-
mapCenters[this.panel.mapCenter].mapCenterLongitude = last.locationLongitude;
217+
mapCenters[this.panel.mapCenter].mapCenterLongitude =
218+
last.locationLongitude;
197219
this.setNewMapCenter();
198220
}
199221

@@ -204,17 +226,19 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
204226
seriesHandler(seriesData) {
205227
const series = new TimeSeries({
206228
datapoints: seriesData.datapoints,
207-
alias: seriesData.target,
229+
alias: seriesData.target
208230
});
209231

210232
series.flotpairs = series.getFlotPairs(this.panel.nullPointMode);
211233
return series;
212234
}
213235

214236
setNewMapCenter() {
215-
if (this.panel.mapCenter !== 'custom') {
216-
this.panel.mapCenterLatitude = mapCenters[this.panel.mapCenter].mapCenterLatitude;
217-
this.panel.mapCenterLongitude = mapCenters[this.panel.mapCenter].mapCenterLongitude;
237+
if (this.panel.mapCenter !== "custom") {
238+
this.panel.mapCenterLatitude =
239+
mapCenters[this.panel.mapCenter].mapCenterLatitude;
240+
this.panel.mapCenterLongitude =
241+
mapCenters[this.panel.mapCenter].mapCenterLongitude;
218242
}
219243
this.mapCenterMoved = true;
220244
this.render();
@@ -248,7 +272,7 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
248272
}
249273

250274
updateThresholdData() {
251-
this.data.thresholds = this.panel.thresholds.split(',').map(strValue => {
275+
this.data.thresholds = this.panel.thresholds.split(",").map(strValue => {
252276
return Number(strValue.trim());
253277
});
254278
while (_.size(this.panel.colors) > _.size(this.data.thresholds) + 1) {
@@ -257,21 +281,21 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
257281
}
258282
while (_.size(this.panel.colors) < _.size(this.data.thresholds) + 1) {
259283
// not enough colors. add one.
260-
const newColor = 'rgba(50, 172, 45, 0.97)';
284+
const newColor = "rgba(50, 172, 45, 0.97)";
261285
this.panel.colors.push(newColor);
262286
}
263287
}
264288

265289
changeLocationData() {
266290
this.loadLocationDataFromFile(true);
267291

268-
if (this.panel.locationData === 'geohash') {
292+
if (this.panel.locationData === "geohash") {
269293
this.render();
270294
}
271295
}
272296

273297
link(scope, elem, attrs, ctrl) {
274-
ctrl.events.on('render', () => {
298+
ctrl.events.on("render", () => {
275299
render();
276300
ctrl.renderingCompleted();
277301
});
@@ -281,9 +305,9 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
281305
return;
282306
}
283307

284-
const mapContainer = elem.find('.mapcontainer');
308+
const mapContainer = elem.find(".mapcontainer");
285309

286-
if (mapContainer[0].id.indexOf('{{') > -1) {
310+
if (mapContainer[0].id.indexOf("{{") > -1) {
287311
return;
288312
}
289313

@@ -293,7 +317,9 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
293317
ctrl.map = map;
294318
}
295319

296-
ctrl.map.resize();
320+
setTimeout(() => {
321+
ctrl.map.resize();
322+
}, 1);
297323

298324
if (ctrl.mapCenterMoved) {
299325
ctrl.map.panToMapCenter();

0 commit comments

Comments
 (0)