Add circleOptions.strokeEnabled and circleOptions.strokeWeight

Author: amotl

CHANGELOG.md

@@ -41,6 +41,7 @@
 - Add options `ignoreEmptyGeohashValues` and `ignoreInvalidGeohashValues`.
 - Add `ignoreEscapeKey` option.
 - Add `hideTimepickerNavigation` option.
+- Add `circleOptions.strokeEnabled` and `circleOptions.strokeWeight`.
 
 ## v0.2.0
 

src/partials/editor.html

@@ -362,15 +362,24 @@ <h5>Global options</h5>
       <h5>Circle parameters</h5>
       <div class="gf-form">
         <label class="gf-form-label width-10">Minimum size</label>
-        <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.circleMinSize" ng-change="ctrl.refresh()"
+        <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.circleMinSize" ng-change="ctrl.render()"
           placeholder="1" ng-model-onblur />
       </div>
       <div class="gf-form">
         <label class="gf-form-label width-10">Maximum size</label>
-        <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.circleMaxSize" ng-change="ctrl.refresh()"
+        <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.circleMaxSize" ng-change="ctrl.render()"
           placeholder="10" ng-model-onblur />
       </div>
-
+      <div class="gf-form">
+        <label class="gf-form-label width-10">Enable strokes</label>
+        <gf-form-switch checked="ctrl.panel.circleOptions.strokeEnabled" on-change="ctrl.redrawCircles()">
+        </gf-form-switch>
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label width-10">Stroke width</label>
+        <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.circleOptions.strokeWeight" ng-change="ctrl.redrawCircles()"
+          placeholder="3" ng-model-onblur />
+      </div>
     </div>
 
     <div class="gf-form-group" style="overflow-x: visible">
@@ -396,7 +405,7 @@ <h5>Map thresholds to colors</h5>
 
     <div class="gf-form-group">
       <h5>Popup labels</h5>
-      <gf-form-switch class="gf-form" label="Sticky" label-class="width-10" checked="ctrl.panel.stickyLabels" on-change="ctrl.toggleStickyLabels()">
+      <gf-form-switch class="gf-form" label="Sticky" label-class="width-10" checked="ctrl.panel.stickyLabels" on-change="ctrl.redrawCircles()">
       </gf-form-switch>
       <gf-form-switch class="gf-form" label="Auto-pan" label-class="width-10" checked="ctrl.panel.autoPanLabels" on-change="ctrl.render()">
       </gf-form-switch>

src/worldmap.ts

@@ -230,6 +230,8 @@ export default class WorldMap {
       fillColor: this.getColor(dataPoint.value),
       fillOpacity: 0.5,
       location: dataPoint.key,
+      stroke: Boolean(this.ctrl.settings.circleOptions.strokeEnabled),
+      weight: parseInt(this.ctrl.settings.circleOptions.strokeWeight) || 3,
     });
 
     this.createClickthrough(circle, dataPoint);

src/worldmap_ctrl.ts

@@ -22,6 +22,10 @@ const panelDefaults = {
   valueName: "total",
   circleMinSize: 2,
   circleMaxSize: 30,
+  circleOptions: {
+    strokeEnabled: true,
+    strokeWeight: 3,
+  },
   locationData: null,
   thresholds: "0,10",
   colors: [
@@ -503,7 +507,7 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
     this.render();
   }
 
-  toggleStickyLabels() {
+  redrawCircles() {
     this.map.clearCircles();
     this.render();
   }