fix: donut styling

dhis2 · Jan 8, 2020 · 46506e6 · 46506e6
1 parent cd9d503
commit 46506e6
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 55 deletions.
diff --git a/src/layers/Cluster.js b/src/layers/Cluster.js
@@ -68,6 +68,11 @@ class Cluster extends Layer {
             const id = this.getId()
 
             mapgl.setPaintProperty(`${id}-points`, 'circle-opacity', opacity)
+            mapgl.setPaintProperty(
+                `${id}-points`,
+                'circle-stroke-opacity',
+                opacity
+            )
             mapgl.setPaintProperty(`${id}-polygons`, 'fill-opacity', opacity)
 
             if (this.spider) {
@@ -138,10 +143,15 @@ class Cluster extends Layer {
             const source = mapgl.getSource(this.getId())
 
             source.getClusterLeaves(clusterId, null, null, (error, features) =>
-                error ? reject(error) : resolve(features)
+                error
+                    ? reject(error)
+                    : resolve(this.sortClusterFeatures(features))
             )
         })
 
+    // Overrided in DonutCluster
+    sortClusterFeatures = features => features
+
     onSpiderClose = clusterId => {
         this.setClusterOpacity(clusterId)
     }

diff --git a/src/layers/DonutCluster.js b/src/layers/DonutCluster.js
@@ -20,59 +20,6 @@ class DonutCluster extends Cluster {
         })
     }
 
-    updateClusters = throttle(() => {
-        const { groups, opacity } = this.options
-        const mapgl = this.getMapGL()
-        const newClusters = {}
-        const features = this.getSourceFeatures()
-
-        // For every cluster on the screen, create an donut marker
-        for (let i = 0; i < features.length; i++) {
-            const { geometry, properties } = features[i]
-            const { coordinates } = geometry
-            const { cluster: isCluster, cluster_id } = properties
-
-            if (!isCluster) {
-                continue
-            }
-
-            let cluster = this.clusters[cluster_id]
-
-            if (!cluster) {
-                const segments = groups.map(group => ({
-                    ...group,
-                    count: properties[group.color],
-                }))
-
-                cluster = new DonutMarker(segments, {
-                    opacity,
-                })
-
-                cluster.setLngLat(coordinates)
-                cluster.on('click', () => {
-                    this.zoomToCluster(cluster_id, coordinates)
-                })
-
-                this.clusters[cluster_id] = cluster
-            }
-
-            newClusters[cluster_id] = cluster
-
-            // Add it to the map if it's not there already
-            if (!this.clustersOnScreen[cluster_id]) {
-                cluster.addTo(this.getMapGL())
-            }
-        }
-
-        // For every cluster we've added previously, remove those that are no longer visible
-        for (const id in this.clustersOnScreen) {
-            if (!newClusters[id]) {
-                this.clustersOnScreen[id].remove()
-            }
-        }
-        this.clustersOnScreen = newClusters
-    }, 100)
-
     onAdd() {
         super.onAdd()
 
@@ -160,6 +107,70 @@ class DonutCluster extends Cluster {
     getSourceFeatures() {
         return this.getMapGL().querySourceFeatures(this.getId())
     }
+
+    // Sort cluster features after legend colors before spiderfy
+    sortClusterFeatures = features => {
+        const colors = this.options.groups.map(g => g.color)
+        return features.sort((f1, f2) => {
+            const a = colors.indexOf(f1.properties.color)
+            const b = colors.indexOf(f2.properties.color)
+
+            return (a > b) - (a < b)
+        })
+    }
+
+    // TODO: Is throttle needed?
+    updateClusters = throttle(() => {
+        const { groups, opacity } = this.options
+        const newClusters = {}
+        const features = this.getSourceFeatures()
+
+        // For every cluster on the screen, create an donut marker
+        for (let i = 0; i < features.length; i++) {
+            const { geometry, properties } = features[i]
+            const { coordinates } = geometry
+            const { cluster: isCluster, cluster_id } = properties
+
+            if (!isCluster) {
+                continue
+            }
+
+            let cluster = this.clusters[cluster_id]
+
+            if (!cluster) {
+                const segments = groups.map(group => ({
+                    ...group,
+                    count: properties[group.color],
+                }))
+
+                cluster = new DonutMarker(segments, {
+                    opacity,
+                })
+
+                cluster.setLngLat(coordinates)
+                cluster.on('click', () => {
+                    this.zoomToCluster(cluster_id, coordinates)
+                })
+
+                this.clusters[cluster_id] = cluster
+            }
+
+            newClusters[cluster_id] = cluster
+
+            // Add it to the map if it's not there already
+            if (!this.clustersOnScreen[cluster_id]) {
+                cluster.addTo(this.getMapGL())
+            }
+        }
+
+        // For every cluster we've added previously, remove those that are no longer visible
+        for (const id in this.clustersOnScreen) {
+            if (!newClusters[id]) {
+                this.clustersOnScreen[id].remove()
+            }
+        }
+        this.clustersOnScreen = newClusters
+    }, 100)
 }
 
 export default DonutCluster
diff --git a/src/layers/DonutMarker.js b/src/layers/DonutMarker.js
@@ -33,7 +33,7 @@ export const donutChart = segments => {
     const w = r * 2
     let offset = 0
 
-    let html = `<svg width="${w}" height="${w}" viewbox="0 0 ${w} ${w}" text-anchor="middle" style="font:${fontSize}px sans-serif;cursor:pointer;">`
+    let html = `<svg width="${w}" height="${w}" viewbox="0 0 ${w} ${w}" text-anchor="middle" style="font:${fontSize}px sans-serif;cursor:pointer;filter:drop-shadow(0 0 2px #777);">`
 
     segments.forEach(segment => {
         html += donutSegment(