Merge pull request #110 from nzzdev/release-2.6.2

release-2.6.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "q-choropleth",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "",
   "main": "index.js",
   "scripts": {

views/Geographic/Bubble.svelte

@@ -2,15 +2,18 @@
   export let centroid = [0, 0];
   export let color;
   export let config;
-  export let cssModifier;
+  export let defaultRadius = 0;
   export let hasAnnotation = false;
+  export let hasValue = false;
   export let population = 0;
   export let strokeWidth = 0.8;
 
   const fillOpacity = config ? 0.8 : 1; // if we have a bubble map, we render the bubble a bit more transparent (aesthetic reasons)
-  const radius = config?.radiusFor(population) ?? (cssModifier === "narrow" ? 4.5 : 6);
+  const radius = config?.radiusFor(population) ?? defaultRadius;
 
   function getFillColor() {
+    if (!hasValue)
+      return "#f5f5f5";
     if (color.customColor && color.customColor.length > 0)
       return color.customColor;
     return "currentColor";

views/Geographic/GeographicMap.svelte

@@ -32,6 +32,7 @@
 
   let annotationLines;
   let bounds;
+  let defaultBubbleRadius = cssModifier === "narrow" ? 4.5 : 6;
   let featuresWithAnnotation = [];
   let featuresWithoutAnnotation = [];
   let featuresShownAsBubble = [];
@@ -48,6 +49,7 @@
     featuresWithoutAnnotation = getFeaturesWithoutAnnotation(geoParameters?.features.features, annotations, entityType);
     featuresWithAnnotation = getFeaturesWithAnnotation(geoParameters?.features.features, annotations, entityType);
     featuresShownAsBubble = getFeaturesShownAsBubble(geoParameters?.features.features);
+    fixSvgHeight(featuresShownAsBubble)
     annotationLines = getAnnotationsForGeoMap(
       annotations,
       geoParameters,
@@ -94,10 +96,20 @@
       return feature.properties.showAsBubble === "true";
     });
   }
+
+  // Fixes an issue with out of bound bubbles
+  // TODO: find a better way to do this
+  function fixSvgHeight(features) {
+    for (const feature of features) {
+      if (feature.properties.centroidPlanar[1] + 6 >= svgSize.viewBox[3]) {
+        svgSize.viewBox[3] = round(feature.properties.centroidPlanar[1]) + defaultBubbleRadius + 1;
+      }
+    }
+  }
 </script>
 
 <ResponsiveSvg aspectRatio={svgSize.aspectRatio}>
-  <svg viewbox={svgSize.viewBox}>
+  <svg viewbox={svgSize.viewBox.join(" ")}>
     {#if geoParameters}
       <g>
         {#if bubbleMapConfig}
@@ -117,6 +129,7 @@
                   legendData
                 )}
                 config={bubbleMapConfig}
+                hasValue={true}
                 population={feature.properties.population}
               />
             {/if}
@@ -196,6 +209,7 @@
                   )}
                   config={bubbleMapConfig}
                   hasAnnotation={true}
+                  hasValue={true}
                   population={feature.properties.population}
                 />
               {/if}
@@ -230,8 +244,9 @@
               dataMapping.get(feature.properties[entityType]),
               legendData
             )}
-            {cssModifier}
+            defaultRadius={defaultBubbleRadius}
             hasAnnotation={regionHasAnnotation(annotations, feature.properties[entityType])}
+            hasValue={dataMapping.get(feature.properties[entityType]) ? true : false}
           />
         {/each}
       </g>

views/helpers/svg.js

@@ -28,8 +28,7 @@ export function getAspectRatioViewBox(
   }
 
   const viewBox = [xMin, yMin, width, height]
-    .map((value) => round(value))
-    .join(" ");
+    .map((value) => round(value));
   const aspectRatio = contentWidth / height;
 
   return { aspectRatio, viewBox };