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

Commit dbd65f8

Browse files
edueliaseduelias
authored
Merge acc041a into 7ba46ec 
2 parents 7ba46ec + acc041a commit dbd65f8

7 files changed

Lines changed: 101 additions & 95 deletions

File tree

‎src/dataPoint.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export interface DataPoint {
2+
colorValue: number,
3+
key: string,
4+
locationName: string,
5+
locationLatitude: number,
6+
locationLongitude: number,
7+
value: number,
8+
valueFormatted: string,
9+
valueRounded: number
10+
}

‎src/data_formatter.ts‎

Lines changed: 2 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import * as _ from 'lodash';
22
import decodeGeoHash from './geohash';
33
import kbn from 'grafana/app/core/utils/kbn';
4+
import { DataPoint } from 'dataPoint';
45

56
export default class DataFormatter {
67
constructor(private ctrl) {}
78

89
setValues(data) {
910
if (this.ctrl.series && this.ctrl.series.length > 0) {
10-
let highestValue = 0;
11-
let lowestValue = Number.MAX_VALUE;
12-
1311
this.ctrl.series.forEach(serie => {
1412
const lastPoint = _.last(serie.datapoints);
1513
const lastValue = _.isArray(lastPoint) ? lastPoint[0] : null;
@@ -33,27 +31,14 @@ export default class DataFormatter {
3331
valueFormatted: lastValue,
3432
valueRounded: 0,
3533
};
36-
37-
if (dataValue.value > highestValue) {
38-
highestValue = dataValue.value;
39-
}
40-
41-
if (dataValue.value < lowestValue) {
42-
lowestValue = dataValue.value;
43-
}
44-
4534
dataValue.valueRounded = kbn.roundValue(dataValue.value, parseInt(this.ctrl.panel.decimals, 10) || 0);
4635
data.push(dataValue);
4736
}
4837
});
49-
50-
data.highestValue = highestValue;
51-
data.lowestValue = lowestValue;
52-
data.valueRange = highestValue - lowestValue;
5338
}
5439
}
5540

56-
createDataValue(encodedGeohash, decodedGeohash, locationName, value, colorValue) {
41+
createDataValue(encodedGeohash, decodedGeohash, locationName, value, colorValue) : DataPoint {
5742
const dataValue = {
5843
colorValue: colorValue,
5944
key: encodedGeohash,
@@ -76,9 +61,6 @@ export default class DataFormatter {
7661
}
7762

7863
if (dataList && dataList.length > 0) {
79-
let highestValue = 0;
80-
let lowestValue = Number.MAX_VALUE;
81-
8264
dataList.forEach(result => {
8365
if (result.type === 'table') {
8466
const columnNames = {};
@@ -96,20 +78,8 @@ export default class DataFormatter {
9678
const value = row[columnNames[this.ctrl.panel.esMetric]];
9779
const colorValue = row[columnNames[this.ctrl.panel.colorMetric]];
9880
const dataValue = this.createDataValue(encodedGeohash, decodedGeohash, locationName, value, colorValue);
99-
if (dataValue.value > highestValue) {
100-
highestValue = dataValue.value;
101-
}
102-
103-
if (dataValue.value < lowestValue) {
104-
lowestValue = dataValue.value;
105-
}
106-
10781
data.push(dataValue);
10882
});
109-
110-
data.highestValue = highestValue;
111-
data.lowestValue = lowestValue;
112-
data.valueRange = highestValue - lowestValue;
11383
} else {
11484
result.datapoints.forEach(datapoint => {
11585
const encodedGeohash = datapoint[this.ctrl.panel.esGeoPoint];
@@ -120,18 +90,8 @@ export default class DataFormatter {
12090
const value = datapoint[this.ctrl.panel.esMetric];
12191
const colorValue = datapoint[this.ctrl.panel.colorMetric];
12292
const dataValue = this.createDataValue(encodedGeohash, decodedGeohash, locationName, value, colorValue);
123-
if (dataValue.value > highestValue) {
124-
highestValue = dataValue.value;
125-
}
126-
if (dataValue.value < lowestValue) {
127-
lowestValue = dataValue.value;
128-
}
12993
data.push(dataValue);
13094
});
131-
132-
data.highestValue = highestValue;
133-
data.lowestValue = lowestValue;
134-
data.valueRange = highestValue - lowestValue;
13595
}
13696
});
13797
}
@@ -164,9 +124,6 @@ export default class DataFormatter {
164124

165125
setTableValues(tableData, data) {
166126
if (tableData && tableData.length > 0) {
167-
let highestValue = 0;
168-
let lowestValue = Number.MAX_VALUE;
169-
170127
tableData[0].forEach(datapoint => {
171128
let key;
172129
let longitude;
@@ -194,30 +151,14 @@ export default class DataFormatter {
194151
valueFormatted: datapoint[this.ctrl.panel.tableQueryOptions.metricField],
195152
valueRounded: 0,
196153
};
197-
198-
if (dataValue.value > highestValue) {
199-
highestValue = dataValue.value;
200-
}
201-
202-
if (dataValue.value < lowestValue) {
203-
lowestValue = dataValue.value;
204-
}
205-
206154
dataValue.valueRounded = kbn.roundValue(dataValue.value, this.ctrl.panel.decimals || 0);
207155
data.push(dataValue);
208156
});
209-
210-
data.highestValue = highestValue;
211-
data.lowestValue = lowestValue;
212-
data.valueRange = highestValue - lowestValue;
213157
}
214158
}
215159

216160
setJsonValues(data) {
217161
if (this.ctrl.series && this.ctrl.series.length > 0) {
218-
let highestValue = 0;
219-
let lowestValue = Number.MAX_VALUE;
220-
221162
this.ctrl.series.forEach(point => {
222163
const dataValue = {
223164
key: point.key,
@@ -227,18 +168,9 @@ export default class DataFormatter {
227168
value: point.value !== undefined ? point.value : 1,
228169
valueRounded: 0,
229170
};
230-
if (dataValue.value > highestValue) {
231-
highestValue = dataValue.value;
232-
}
233-
if (dataValue.value < lowestValue) {
234-
lowestValue = dataValue.value;
235-
}
236171
dataValue.valueRounded = Math.round(dataValue.value);
237172
data.push(dataValue);
238173
});
239-
data.highestValue = highestValue;
240-
data.lowestValue = lowestValue;
241-
data.valueRange = highestValue - lowestValue;
242174
}
243175
}
244176
}

‎src/partials/editor.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ <h6 ng-show="ctrl.panel.locationData === 'table' || ctrl.panel.locationData ===
171171
<input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.tableQueryOptions.longitudeField" ng-change="ctrl.refresh()"
172172
ng-model-onblur />
173173
</div>
174-
<gf-form-switch class="gf-form" ng-show="ctrl.panel.locationData === 'geohash'" label="Hide Location Name" label-class="width-10" checked="ctrl.panel.hideLocationName" ng-model="ctrl.panel.hideLocationName" on-change="ctrl.render()"></gf-form-switch>
174+
<gf-form-switch class="gf-form" ng-show="ctrl.panel.locationData === 'geohash'" label="Hide Location Name" label-class="width-12" checked="ctrl.panel.hideLocationName" ng-model="ctrl.panel.hideLocationName" on-change="ctrl.render()"></gf-form-switch>
175175
<div class="gf-form" ng-show="ctrl.panel.locationData === 'geohash'">
176176
<label class="gf-form-label width-12">Location Name Field</label>
177177
<input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.esLocationName" ng-change="ctrl.refresh()"
@@ -187,6 +187,9 @@ <h6 ng-show="ctrl.panel.locationData === 'table' || ctrl.panel.locationData ===
187187
<input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.esMetric" ng-change="ctrl.refresh()" ng-model-onblur
188188
/>
189189
</div>
190+
<div class="gf-form" ng-show="ctrl.panel.locationData === 'geohash'">
191+
<gf-form-switch class="gf-form" ng-show="ctrl.panel.locationData === 'geohash'" label="Apply log Scale" label-class="width-12" checked="ctrl.panel.isLogScale" ng-model="ctrl.panel.isLogScale" on-change="ctrl.render()"></gf-form-switch>
192+
</div>
190193
</div>
191194

192195
<div class="section gf-form-group">
@@ -230,6 +233,11 @@ <h5 class="section-heading">Hide series</h5>
230233
<input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.minValue" ng-change="ctrl.render()"
231234
placeholder="10" ng-model-onblur />
232235
</div>
236+
<div class="gf-form">
237+
<label class="gf-form-label width-10">With values over </label>
238+
<input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.maxValue" ng-change="ctrl.render()"
239+
placeholder="10000" ng-model-onblur />
240+
</div>
233241
<gf-form-switch class="gf-form" label="With only nulls" label-class="width-10" checked="ctrl.panel.hideEmpty" on-change="ctrl.render()">
234242
</gf-form-switch>
235243
<gf-form-switch class="gf-form" label="With only zeros" label-class="width-10" checked="ctrl.panel.hideZero" on-change="ctrl.render()">

‎src/worldmap.test.ts‎

Lines changed: 47 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ describe('Worldmap', () => {
2020
beforeEach(() => {
2121
ctrl.data = new DataBuilder()
2222
.withCountryAndValue('SE', 1)
23-
.withDataRange(1, 1, 0)
2423
.build();
2524
ctrl.panel.circleMaxSize = '10';
2625
worldMap.drawCircles();
@@ -46,7 +45,6 @@ describe('Worldmap', () => {
4645
ctrl.data = new DataBuilder()
4746
.withCountryAndValue('SE', 1)
4847
.withCountryAndValue('IE', 2)
49-
.withDataRange(1, 2, 1)
5048
.build();
5149
ctrl.panel.circleMinSize = '2';
5250
ctrl.panel.circleMaxSize = '10';
@@ -76,7 +74,6 @@ describe('Worldmap', () => {
7674
ctrl.data = new DataBuilder()
7775
.withCountryAndValue('SE', 1)
7876
.withCountryAndValue('IE', 2)
79-
.withDataRange(1, 2, 1)
8077
.build();
8178
ctrl.panel.circleMinSize = '2';
8279
ctrl.panel.circleMaxSize = '10';
@@ -100,7 +97,6 @@ describe('Worldmap', () => {
10097
.withCountryAndValue('SE', 1)
10198
.withCountryAndValue('IE', 2)
10299
.withCountryAndValue('US', 3)
103-
.withDataRange(1, 3, 2)
104100
.withThresholdValues([2])
105101
.build();
106102
ctrl.panel.circleMinSize = '2';
@@ -146,7 +142,6 @@ describe('Worldmap', () => {
146142
.withCountryAndValue('SE', 1)
147143
.withCountryAndValue('IE', 2)
148144
.withCountryAndValue('US', null)
149-
.withDataRange(1, 3, 2)
150145
.withThresholdValues([2])
151146
.build();
152147
ctrl.panel.hideEmpty = true;
@@ -164,7 +159,6 @@ describe('Worldmap', () => {
164159
.withCountryAndValue('SE', 1)
165160
.withCountryAndValue('IE', 2)
166161
.withCountryAndValue('US', 0)
167-
.withDataRange(1, 3, 2)
168162
.withThresholdValues([2])
169163
.build();
170164
ctrl.panel.hideZero = true;
@@ -185,7 +179,6 @@ describe('Worldmap', () => {
185179
.withCountryAndValue('SE', 1)
186180
.withCountryAndValue('IE', 2)
187181
.withCountryAndValue('US', 3)
188-
.withDataRange(1, 3, 2)
189182
.withThresholdValues([2])
190183
.build();
191184

@@ -195,7 +188,6 @@ describe('Worldmap', () => {
195188
.withCountryAndValue('SE', 3)
196189
.withCountryAndValue('IE', 2)
197190
.withCountryAndValue('US', 1)
198-
.withDataRange(1, 3, 2)
199191
.withThresholdValues([2])
200192
.build();
201193

@@ -227,15 +219,13 @@ describe('Worldmap', () => {
227219
.withCountryAndValue('SE', 1)
228220
.withCountryAndValue('IE', 2)
229221
.withCountryAndValue('US', 3)
230-
.withDataRange(1, 3, 2)
231222
.withThresholdValues([2])
232223
.build();
233224

234225
worldMap.drawCircles();
235226

236227
ctrl.data = new DataBuilder()
237228
.withCountryAndValue('SE', 2)
238-
.withDataRange(1, 1, 0)
239229
.withThresholdValues([2])
240230
.build();
241231

@@ -322,7 +312,6 @@ describe('Worldmap', () => {
322312
.withCountryAndValue('SE', 1, highVal)
323313
.withCountryAndValue('IE', 2, avgVal)
324314
.withCountryAndValue('US', 1, lowVal)
325-
.withDataRange(0, 100, 50)
326315
.withThresholdValues([33,66])
327316
.build();
328317
worldMap.drawCircles();
@@ -387,4 +376,51 @@ describe('Worldmap', () => {
387376
worldMap = new WorldMap(ctrl, document.getElementsByClassName('mapcontainer')[0]);
388377
worldMap.createMap();
389378
}
379+
380+
describe('when apply log is set', () => {
381+
const LOW = 1;
382+
const HIGH = 300000;
383+
const MID = 100;
384+
385+
const minCircleSize = 1;
386+
const maxCircleSize = 11;
387+
const midCircleSize = 4.651553264913736;
388+
389+
390+
beforeEach(() => {
391+
ctrl.data = new DataBuilder()
392+
.withCountryAndValue('SE', LOW)
393+
.withCountryAndValue('IE', MID)
394+
.withCountryAndValue('US', HIGH)
395+
.withThresholdValues([2])
396+
.build();
397+
ctrl.panel.circleMinSize = minCircleSize;
398+
ctrl.panel.circleMaxSize = maxCircleSize;
399+
ctrl.panel.isLogScale = true;
400+
worldMap.drawCircles();
401+
});
402+
403+
it('should draw three circles on the map', () => {
404+
expect(worldMap.circles.length).toBe(3);
405+
});
406+
407+
it('should create a circle with min circle size for smallest value size', () => {
408+
expect(worldMap.circles[0].options.radius).toBe(minCircleSize);
409+
});
410+
411+
// log is used to highlight the smaller parts when there's a big deviant
412+
it('should create a circle with intermediary circle size for mid value size', () => {
413+
expect(worldMap.circles[1].options.radius).toBe(midCircleSize);
414+
});
415+
416+
it('should create a circle with max circle size for largest value size', () => {
417+
expect(worldMap.circles[2].options.radius).toBe(maxCircleSize);
418+
});
419+
420+
it('should create circle popups with the second metrics there', () => {
421+
expect(worldMap.circles[0]._popup._content).toBe(`Sweden: ${LOW}`);
422+
expect(worldMap.circles[1]._popup._content).toBe(`Ireland: ${MID}`);
423+
expect(worldMap.circles[2]._popup._content).toBe(`United States: ${HIGH}`);
424+
});
425+
});
390426
});

0 commit comments

Comments
 (0)