Skip to content

Commit

Permalink
Merge acc041a into 7ba46ec
Browse files Browse the repository at this point in the history
  • Loading branch information
@eduelias
eduelias authored Sep 27, 2021
2 parents 7ba46ec + acc041a commit dbd65f8
Show file tree
Hide file tree
Showing 7 changed files with 101 additions and 95 deletions.
10 changes: 10 additions & 0 deletions src/dataPoint.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export interface DataPoint {
colorValue: number,
key: string,
locationName: string,
locationLatitude: number,
locationLongitude: number,
value: number,
valueFormatted: string,
valueRounded: number
}
72 changes: 2 additions & 70 deletions src/data_formatter.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import * as _ from 'lodash';
import decodeGeoHash from './geohash';
import kbn from 'grafana/app/core/utils/kbn';
import { DataPoint } from 'dataPoint';

export default class DataFormatter {
constructor(private ctrl) {}

setValues(data) {
if (this.ctrl.series && this.ctrl.series.length > 0) {
let highestValue = 0;
let lowestValue = Number.MAX_VALUE;

this.ctrl.series.forEach(serie => {
const lastPoint = _.last(serie.datapoints);
const lastValue = _.isArray(lastPoint) ? lastPoint[0] : null;
Expand All @@ -33,27 +31,14 @@ export default class DataFormatter {
valueFormatted: lastValue,
valueRounded: 0,
};

if (dataValue.value > highestValue) {
highestValue = dataValue.value;
}

if (dataValue.value < lowestValue) {
lowestValue = dataValue.value;
}

dataValue.valueRounded = kbn.roundValue(dataValue.value, parseInt(this.ctrl.panel.decimals, 10) || 0);
data.push(dataValue);
}
});

data.highestValue = highestValue;
data.lowestValue = lowestValue;
data.valueRange = highestValue - lowestValue;
}
}

createDataValue(encodedGeohash, decodedGeohash, locationName, value, colorValue) {
createDataValue(encodedGeohash, decodedGeohash, locationName, value, colorValue) : DataPoint {
const dataValue = {
colorValue: colorValue,
key: encodedGeohash,
Expand All @@ -76,9 +61,6 @@ export default class DataFormatter {
}

if (dataList && dataList.length > 0) {
let highestValue = 0;
let lowestValue = Number.MAX_VALUE;

dataList.forEach(result => {
if (result.type === 'table') {
const columnNames = {};
Expand All @@ -96,20 +78,8 @@ export default class DataFormatter {
const value = row[columnNames[this.ctrl.panel.esMetric]];
const colorValue = row[columnNames[this.ctrl.panel.colorMetric]];
const dataValue = this.createDataValue(encodedGeohash, decodedGeohash, locationName, value, colorValue);
if (dataValue.value > highestValue) {
highestValue = dataValue.value;
}

if (dataValue.value < lowestValue) {
lowestValue = dataValue.value;
}

data.push(dataValue);
});

data.highestValue = highestValue;
data.lowestValue = lowestValue;
data.valueRange = highestValue - lowestValue;
} else {
result.datapoints.forEach(datapoint => {
const encodedGeohash = datapoint[this.ctrl.panel.esGeoPoint];
Expand All @@ -120,18 +90,8 @@ export default class DataFormatter {
const value = datapoint[this.ctrl.panel.esMetric];
const colorValue = datapoint[this.ctrl.panel.colorMetric];
const dataValue = this.createDataValue(encodedGeohash, decodedGeohash, locationName, value, colorValue);
if (dataValue.value > highestValue) {
highestValue = dataValue.value;
}
if (dataValue.value < lowestValue) {
lowestValue = dataValue.value;
}
data.push(dataValue);
});

data.highestValue = highestValue;
data.lowestValue = lowestValue;
data.valueRange = highestValue - lowestValue;
}
});
}
Expand Down Expand Up @@ -164,9 +124,6 @@ export default class DataFormatter {

setTableValues(tableData, data) {
if (tableData && tableData.length > 0) {
let highestValue = 0;
let lowestValue = Number.MAX_VALUE;

tableData[0].forEach(datapoint => {
let key;
let longitude;
Expand Down Expand Up @@ -194,30 +151,14 @@ export default class DataFormatter {
valueFormatted: datapoint[this.ctrl.panel.tableQueryOptions.metricField],
valueRounded: 0,
};

if (dataValue.value > highestValue) {
highestValue = dataValue.value;
}

if (dataValue.value < lowestValue) {
lowestValue = dataValue.value;
}

dataValue.valueRounded = kbn.roundValue(dataValue.value, this.ctrl.panel.decimals || 0);
data.push(dataValue);
});

data.highestValue = highestValue;
data.lowestValue = lowestValue;
data.valueRange = highestValue - lowestValue;
}
}

setJsonValues(data) {
if (this.ctrl.series && this.ctrl.series.length > 0) {
let highestValue = 0;
let lowestValue = Number.MAX_VALUE;

this.ctrl.series.forEach(point => {
const dataValue = {
key: point.key,
Expand All @@ -227,18 +168,9 @@ export default class DataFormatter {
value: point.value !== undefined ? point.value : 1,
valueRounded: 0,
};
if (dataValue.value > highestValue) {
highestValue = dataValue.value;
}
if (dataValue.value < lowestValue) {
lowestValue = dataValue.value;
}
dataValue.valueRounded = Math.round(dataValue.value);
data.push(dataValue);
});
data.highestValue = highestValue;
data.lowestValue = lowestValue;
data.valueRange = highestValue - lowestValue;
}
}
}
10 changes: 9 additions & 1 deletion src/partials/editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ <h6 ng-show="ctrl.panel.locationData === 'table' || ctrl.panel.locationData ===
<input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.tableQueryOptions.longitudeField" ng-change="ctrl.refresh()"
ng-model-onblur />
</div>
<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>
<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>
<div class="gf-form" ng-show="ctrl.panel.locationData === 'geohash'">
<label class="gf-form-label width-12">Location Name Field</label>
<input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.esLocationName" ng-change="ctrl.refresh()"
Expand All @@ -187,6 +187,9 @@ <h6 ng-show="ctrl.panel.locationData === 'table' || ctrl.panel.locationData ===
<input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.esMetric" ng-change="ctrl.refresh()" ng-model-onblur
/>
</div>
<div class="gf-form" ng-show="ctrl.panel.locationData === 'geohash'">
<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>
</div>
</div>

<div class="section gf-form-group">
Expand Down Expand Up @@ -230,6 +233,11 @@ <h5 class="section-heading">Hide series</h5>
<input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.minValue" ng-change="ctrl.render()"
placeholder="10" ng-model-onblur />
</div>
<div class="gf-form">
<label class="gf-form-label width-10">With values over </label>
<input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.maxValue" ng-change="ctrl.render()"
placeholder="10000" ng-model-onblur />
</div>
<gf-form-switch class="gf-form" label="With only nulls" label-class="width-10" checked="ctrl.panel.hideEmpty" on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form" label="With only zeros" label-class="width-10" checked="ctrl.panel.hideZero" on-change="ctrl.render()">
Expand Down
58 changes: 47 additions & 11 deletions src/worldmap.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ describe('Worldmap', () => {
beforeEach(() => {
ctrl.data = new DataBuilder()
.withCountryAndValue('SE', 1)
.withDataRange(1, 1, 0)
.build();
ctrl.panel.circleMaxSize = '10';
worldMap.drawCircles();
Expand All @@ -46,7 +45,6 @@ describe('Worldmap', () => {
ctrl.data = new DataBuilder()
.withCountryAndValue('SE', 1)
.withCountryAndValue('IE', 2)
.withDataRange(1, 2, 1)
.build();
ctrl.panel.circleMinSize = '2';
ctrl.panel.circleMaxSize = '10';
Expand Down Expand Up @@ -76,7 +74,6 @@ describe('Worldmap', () => {
ctrl.data = new DataBuilder()
.withCountryAndValue('SE', 1)
.withCountryAndValue('IE', 2)
.withDataRange(1, 2, 1)
.build();
ctrl.panel.circleMinSize = '2';
ctrl.panel.circleMaxSize = '10';
Expand All @@ -100,7 +97,6 @@ describe('Worldmap', () => {
.withCountryAndValue('SE', 1)
.withCountryAndValue('IE', 2)
.withCountryAndValue('US', 3)
.withDataRange(1, 3, 2)
.withThresholdValues([2])
.build();
ctrl.panel.circleMinSize = '2';
Expand Down Expand Up @@ -146,7 +142,6 @@ describe('Worldmap', () => {
.withCountryAndValue('SE', 1)
.withCountryAndValue('IE', 2)
.withCountryAndValue('US', null)
.withDataRange(1, 3, 2)
.withThresholdValues([2])
.build();
ctrl.panel.hideEmpty = true;
Expand All @@ -164,7 +159,6 @@ describe('Worldmap', () => {
.withCountryAndValue('SE', 1)
.withCountryAndValue('IE', 2)
.withCountryAndValue('US', 0)
.withDataRange(1, 3, 2)
.withThresholdValues([2])
.build();
ctrl.panel.hideZero = true;
Expand All @@ -185,7 +179,6 @@ describe('Worldmap', () => {
.withCountryAndValue('SE', 1)
.withCountryAndValue('IE', 2)
.withCountryAndValue('US', 3)
.withDataRange(1, 3, 2)
.withThresholdValues([2])
.build();

Expand All @@ -195,7 +188,6 @@ describe('Worldmap', () => {
.withCountryAndValue('SE', 3)
.withCountryAndValue('IE', 2)
.withCountryAndValue('US', 1)
.withDataRange(1, 3, 2)
.withThresholdValues([2])
.build();

Expand Down Expand Up @@ -227,15 +219,13 @@ describe('Worldmap', () => {
.withCountryAndValue('SE', 1)
.withCountryAndValue('IE', 2)
.withCountryAndValue('US', 3)
.withDataRange(1, 3, 2)
.withThresholdValues([2])
.build();

worldMap.drawCircles();

ctrl.data = new DataBuilder()
.withCountryAndValue('SE', 2)
.withDataRange(1, 1, 0)
.withThresholdValues([2])
.build();

Expand Down Expand Up @@ -322,7 +312,6 @@ describe('Worldmap', () => {
.withCountryAndValue('SE', 1, highVal)
.withCountryAndValue('IE', 2, avgVal)
.withCountryAndValue('US', 1, lowVal)
.withDataRange(0, 100, 50)
.withThresholdValues([33,66])
.build();
worldMap.drawCircles();
Expand Down Expand Up @@ -387,4 +376,51 @@ describe('Worldmap', () => {
worldMap = new WorldMap(ctrl, document.getElementsByClassName('mapcontainer')[0]);
worldMap.createMap();
}

describe('when apply log is set', () => {
const LOW = 1;
const HIGH = 300000;
const MID = 100;

const minCircleSize = 1;
const maxCircleSize = 11;
const midCircleSize = 4.651553264913736;


beforeEach(() => {
ctrl.data = new DataBuilder()
.withCountryAndValue('SE', LOW)
.withCountryAndValue('IE', MID)
.withCountryAndValue('US', HIGH)
.withThresholdValues([2])
.build();
ctrl.panel.circleMinSize = minCircleSize;
ctrl.panel.circleMaxSize = maxCircleSize;
ctrl.panel.isLogScale = true;
worldMap.drawCircles();
});

it('should draw three circles on the map', () => {
expect(worldMap.circles.length).toBe(3);
});

it('should create a circle with min circle size for smallest value size', () => {
expect(worldMap.circles[0].options.radius).toBe(minCircleSize);
});

// log is used to highlight the smaller parts when there's a big deviant
it('should create a circle with intermediary circle size for mid value size', () => {
expect(worldMap.circles[1].options.radius).toBe(midCircleSize);
});

it('should create a circle with max circle size for largest value size', () => {
expect(worldMap.circles[2].options.radius).toBe(maxCircleSize);
});

it('should create circle popups with the second metrics there', () => {
expect(worldMap.circles[0]._popup._content).toBe(`Sweden: ${LOW}`);
expect(worldMap.circles[1]._popup._content).toBe(`Ireland: ${MID}`);
expect(worldMap.circles[2]._popup._content).toBe(`United States: ${HIGH}`);
});
});
});
Loading

0 comments on commit dbd65f8

Please sign in to comment.