Add absolute circle size (#65)

Add absolute circle size
- Add option for absolute circle size, rather than using a dynamic range (disabled by default and as fallback)
- Use prefactor for absolute values, defaulting to 1.0
- Absolute circles are still being clamped by min/max settings

Author: JonasProgrammer

src/partials/editor.html

@@ -408,6 +408,16 @@ <h5>Circle parameters</h5>
         <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">Absolute size</label>
+        <gf-form-switch checked="ctrl.panel.circleSizeAbsoluteEnabled" on-change="ctrl.render()">
+        </gf-form-switch>
+      </div>
+      <div class="gf-form" ng-show="ctrl.panel.circleSizeAbsoluteEnabled">
+        <label class="gf-form-label width-10">Size factor</label>
+        <input type="text" class="input-small gf-form-input width-10" ng-model="ctrl.panel.circleSizeAbsoluteFactor" ng-change="ctrl.render()"
+               placeholder="1.0" 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()">

src/worldmap.test.ts

@@ -61,6 +61,8 @@ describe('Worldmap', () => {
         .build();
       ctrl.panel.circleMinSize = '2';
       ctrl.panel.circleMaxSize = '10';
+      // Ensure factor is ignored
+      ctrl.panel.circleSizeAbsoluteFactor = '3';
       worldMap.drawCircles();
     });
 
@@ -82,6 +84,37 @@ describe('Worldmap', () => {
     });
   });
 
+  describe('when the data has three points and absolute mode is enabled', () => {
+    beforeEach(() => {
+      ctrl.data = new DataBuilder()
+          .withCountryAndValue('SE', 4)
+          .withCountryAndValue('IE', 1)
+          .withCountryAndValue('US', 8)
+          .withDataRange(0, 8, 8)
+          .build();
+      ctrl.panel.circleMinSize = '3';
+      ctrl.panel.circleMaxSize = '10';
+      ctrl.panel.circleSizeAbsoluteEnabled = true;
+      ctrl.panel.circleSizeAbsoluteFactor = '1.5';
+      worldMap.drawCircles();
+    });
+
+    it('should three four circles on the map', () => {
+      expect(worldMap.circles.length).toBe(3);
+    });
+
+    it('should create a circle with the specified size times the factor', () => {
+      expect(worldMap.circles[0].options.radius).toBe(6);
+    });
+
+    it('should create a a circle with the minimum size if the factored absolute is too small', () => {
+      expect(worldMap.circles[1].options.radius).toBe(3);
+    });
+    it('should create a a circle with the maximum size if the factored absolute is too small', () => {
+      expect(worldMap.circles[2].options.radius).toBe(10);
+    });
+  });
+
   describe('when units option is set', () => {
     beforeEach(() => {
       ctrl.data = new DataBuilder()

src/worldmap.ts

@@ -293,8 +293,13 @@ export default class WorldMap {
   }
 
   calcCircleSize(dataPointValue) {
-    const circleMinSize = parseInt(this.ctrl.settings.circleMinSize, 10) || 1;
-    const circleMaxSize = parseInt(this.ctrl.settings.circleMaxSize, 10) || 10;
+    const circleMinSize = parseFloat(this.ctrl.settings.circleMinSize) || 1;
+    const circleMaxSize = parseFloat(this.ctrl.settings.circleMaxSize) || 10;
+
+    if (this.ctrl.settings.circleSizeAbsoluteEnabled) {
+      const size = dataPointValue * (parseFloat(this.ctrl.settings.circleSizeAbsoluteFactor) || 1.0);
+      return Math.min(circleMaxSize, Math.max(circleMinSize, size));
+    }
 
     // If measurement value equals zero, use minimum circle size.
     if (dataPointValue === 0) {

src/worldmap_ctrl.ts

@@ -24,6 +24,8 @@ const panelDefaults = {
   valueName: 'total',
   circleMinSize: 2,
   circleMaxSize: 30,
+  circleSizeAbsoluteEnabled: false,
+  circleSizeAbsoluteFactor: 1.0,
   circleOptions: {
     strokeEnabled: true,
     strokeWeight: 3,