Merge pull request #354 from grafana/validate-color

Author: nmarrs

CHANGELOG.md

@@ -1,6 +1,11 @@
 # Changelog
 ## Entries
 
+## v1.0.4
+
+- Validate legend colors
+
+
 ## v1.0.3
 
 - Release for Grafana 6+ support

package.json

@@ -31,6 +31,8 @@
     "@types/jest": "27.0.2",
     "@types/lodash": "^4.14.194",
     "@types/moment": "^2.13.0",
+    "@types/tinycolor2": "1.4.3",
+    "tinycolor2": "1.6.0",
     "jest": "26.6.3",
     "jest-canvas-mock": "2.3.0",
     "jest-config": "^27.5.1",

src/worldmap.test.ts

@@ -1,7 +1,7 @@
 /**
  * @jest-environment jsdom
  */
-import WorldMap from './worldmap';
+import WorldMap, { DEFAULT_COLOR } from './worldmap';
 import DataBuilder from './test/data_builder';
 import * as _ from 'lodash';
 
@@ -308,7 +308,7 @@ describe('Worldmap', () => {
         '<div class="info legend leaflet-control"><div class="legend-item">' +
           '<i style="background:red"></i> &lt; 2</div><div class="legend-item"><i style="background:blue"></i> 2–4</div>' +
           '<div class="legend-item"><i style="background:green"></i> 4–6</div>' +
-          '<div class="legend-item"><i style="background:undefined"></i> 6+</div></div>'
+          `<div class="legend-item"><i style="background:${DEFAULT_COLOR}"></i> 6+</div></div>`
       );
     });
   });

src/worldmap.ts

@@ -1,6 +1,7 @@
 import * as _ from 'lodash';
 import * as L from './libs/leaflet';
 import WorldmapCtrl from './worldmap_ctrl';
+import tinycolor from 'tinycolor2';
 
 const tileServers = {
   'CartoDB Positron': {
@@ -69,15 +70,15 @@ export default class WorldMap {
       let legendHtml = '';
       legendHtml +=
         '<div class="legend-item"><i style="background:' +
-        this.ctrl.panel.colors[0] +
+        getColor(this.ctrl.panel.colors[0]) +
         '"></i> ' +
         '&lt; ' +
         thresholds[0] +
         '</div>';
       for (let index = 0; index < thresholds.length; index += 1) {
         legendHtml +=
           '<div class="legend-item"><i style="background:' +
-          this.ctrl.panel.colors[index + 1] +
+          getColor(this.ctrl.panel.colors[index + 1]) +
           '"></i> ' +
           thresholds[index] +
           (thresholds[index + 1] ? '&ndash;' + thresholds[index + 1] + '</div>' : '+');
@@ -264,3 +265,11 @@ export default class WorldMap {
     this.map.remove();
   }
 }
+
+export const DEFAULT_COLOR = '#CCC';
+function getColor(c: string): string {
+  if (tinycolor(c).isValid()) {
+    return c;
+  }
+  return DEFAULT_COLOR;
+}