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
- - Mode +
+ +
+
+
+ + +
+
+ +
- +
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); + } } }