diff --git a/src/data_formatter.ts b/src/data_formatter.ts
index 13121f0..158e173 100644
--- a/src/data_formatter.ts
+++ b/src/data_formatter.ts
@@ -192,16 +192,17 @@ export default class DataFormatter {
valueFormatted: datapoint[this.ctrl.panel.tableQueryOptions.metricField],
valueRounded: 0,
};
+ if (this.ctrl.panel.legendMode === 'thresholds') {
+ if (dataValue.value > highestValue) {
+ highestValue = dataValue.value;
+ }
- if (dataValue.value > highestValue) {
- highestValue = dataValue.value;
- }
+ if (dataValue.value < lowestValue) {
+ lowestValue = dataValue.value;
+ }
- if (dataValue.value < lowestValue) {
- lowestValue = dataValue.value;
+ dataValue.valueRounded = kbn.roundValue(dataValue.value, this.ctrl.panel.decimals || 0);
}
-
- dataValue.valueRounded = kbn.roundValue(dataValue.value, this.ctrl.panel.decimals || 0);
data.push(dataValue);
});
diff --git a/src/partials/editor.html b/src/partials/editor.html
index 63c474e..27c1e26 100644
--- a/src/partials/editor.html
+++ b/src/partials/editor.html
@@ -189,14 +189,26 @@
- Threshold Options
+ Legend Options
+
+ Thresholds
+
+
+
+ Legends
+
- Colors
+ Colors
diff --git a/src/worldmap.ts b/src/worldmap.ts
index 341f9a6..96711c3 100644
--- a/src/worldmap.ts
+++ b/src/worldmap.ts
@@ -65,22 +65,35 @@ export default class WorldMap {
};
this.legend.update = () => {
- const thresholds = this.ctrl.data.thresholds;
let legendHtml = '';
- legendHtml +=
- ' ' +
- '< ' +
- thresholds[0] +
- '
';
- for (let index = 0; index < thresholds.length; index += 1) {
+
+ if (this.ctrl.data.legends) {
+ const legends = this.ctrl.data.legends
+ for (let i = 0; i < legends.length; i++) {
+ legendHtml +=
+ ' ' +
+ legends[i] +
+ '
';
+ }
+ } else {
+ const thresholds = this.ctrl.data.c;
legendHtml +=
' ' +
- thresholds[index] +
- (thresholds[index + 1] ? '–' + thresholds[index + 1] + '
' : '+');
+ '< ' +
+ thresholds[0] +
+ '';
+ for (let index = 0; index < thresholds.length; index += 1) {
+ legendHtml +=
+ ' ' +
+ thresholds[index] +
+ (thresholds[index + 1] ? '–' + thresholds[index + 1] + '
' : '+');
+ }
}
this.legend._div.innerHTML = legendHtml;
};
@@ -175,6 +188,11 @@ export default class WorldMap {
}
calcCircleSize(dataPointValue) {
+ let value = dataPointValue;
+ // force values string to 1
+ if(this.ctrl.data.legends)
+ value = 1;
+
const circleMinSize = parseInt(this.ctrl.panel.circleMinSize, 10) || 2;
const circleMaxSize = parseInt(this.ctrl.panel.circleMaxSize, 10) || 30;
@@ -182,7 +200,7 @@ export default class WorldMap {
return circleMaxSize;
}
- const dataFactor = (dataPointValue - this.ctrl.data.lowestValue) / this.ctrl.data.valueRange;
+ const dataFactor = (value - this.ctrl.data.lowestValue) / this.ctrl.data.valueRange;
const circleSizeRange = circleMaxSize - circleMinSize;
return circleSizeRange * dataFactor + circleMinSize;
@@ -211,12 +229,19 @@ export default class WorldMap {
}
getColor(value) {
- for (let index = this.ctrl.data.thresholds.length; index > 0; index -= 1) {
- if (value >= this.ctrl.data.thresholds[index - 1]) {
- return this.ctrl.panel.colors[index];
+ if(this.ctrl.data.legends) {
+ let idx = this.ctrl.data.legends.indexOf(value);
+ if(idx >= 0)
+ return this.ctrl.panel.colors[idx];
+ return 'rgb(71, 71, 71)';
+ } else {
+ for (let index = this.ctrl.data.thresholds.length; index > 0; index -= 1) {
+ if (value >= this.ctrl.data.thresholds[index - 1]) {
+ return this.ctrl.panel.colors[index];
+ }
}
+ return _.first(this.ctrl.panel.colors);
}
- return _.first(this.ctrl.panel.colors);
}
resize() {
diff --git a/src/worldmap_ctrl.ts b/src/worldmap_ctrl.ts
index 4aa746c..a3ffddb 100644
--- a/src/worldmap_ctrl.ts
+++ b/src/worldmap_ctrl.ts
@@ -19,6 +19,8 @@ const panelDefaults = {
circleMinSize: 2,
circleMaxSize: 30,
locationData: "countries",
+ legendMode: "thresholds",
+ legends: [],
thresholds: "0,10",
colors: [
"rgba(245, 54, 54, 0.9)",
@@ -277,17 +279,33 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
}
updateThresholdData() {
- this.data.thresholds = this.panel.thresholds.split(",").map(strValue => {
- return Number(strValue.trim());
- });
- while (_.size(this.panel.colors) > _.size(this.data.thresholds) + 1) {
- // too many colors. remove the last one.
- this.panel.colors.pop();
- }
- while (_.size(this.panel.colors) < _.size(this.data.thresholds) + 1) {
- // not enough colors. add one.
- const newColor = "rgba(50, 172, 45, 0.97)";
- this.panel.colors.push(newColor);
+ if(this.panel.legendMode === 'thresholds')
+ this.data.thresholds = this.panel.thresholds.split(",").map(strValue => {
+ return Number(strValue.trim());
+ });
+ else
+ this.data.legends = this.panel.legends.split(",");
+
+ if(this.panel.legendMode === 'thresholds') {
+ while (_.size(this.panel.colors) > _.size(this.data.thresholds) + 1) {
+ // too many colors. remove the last one.
+ this.panel.colors.pop();
+ }
+ while (_.size(this.panel.colors) < _.size(this.data.thresholds) + 1) {
+ // not enough colors. add one.
+ const newColor = "rgba(50, 172, 45, 0.97)";
+ this.panel.colors.push(newColor);
+ }
+ } else {
+ while (_.size(this.panel.colors) > _.size(this.data.legends)) {
+ // too many colors. remove the last one.
+ this.panel.colors.pop();
+ }
+ while (_.size(this.panel.colors) < _.size(this.data.legends)) {
+ // not enough colors. add one.
+ const newColor = "rgba(50, 172, 45, 0.97)";
+ this.panel.colors.push(newColor);
+ }
}
}