fix: support unknown category color in cluster #121

teritorio · Jul 3, 2023 · 9933137 · 9933137
1 parent 69bf6db
commit 9933137
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 19 deletions.
diff --git a/lib/clusters.ts b/lib/clusters.ts
@@ -45,36 +45,43 @@ const getMarkerDonutSegment = (
 }
 
 export const createMarkerDonutChart = (
-  countPerColor: Record<string, number>
+  countPerColor: Record<string, number>,
+  totalCount: number
 ): HTMLElement => {
-  const offsets = []
-
-  const counts: number[] = Object.values(countPerColor)
-  const colors = Object.keys(countPerColor)
-  let total = 0
-  for (let i = 0; i < counts.length; i++) {
-    offsets.push(total)
-    total += counts[i]
-  }
-
-  const r = total >= 1000 ? 40 : total >= 100 ? 32 : total >= 10 ? 24 : 16
+  const r =
+    totalCount >= 1000
+      ? 40
+      : totalCount >= 100
+      ? 32
+      : totalCount >= 10
+      ? 24
+      : 16
   const r0 = r - 5
   const w = r * 2
 
   let html = `<svg width="${w}" height="${w}" viewbox="0 0 ${w} ${w}" text-anchor="middle" class="cluster-donut">`
 
-  for (let i = 0; i < counts.length; i++) {
+  let total = 0
+  let offsets = 0
+  Object.entries(countPerColor).forEach(([color, count]) => {
+    total += count
     html += getMarkerDonutSegment(
-      offsets[i] / total,
-      (offsets[i] + counts[i]) / total,
+      offsets / totalCount,
+      total / totalCount,
       r,
       r0,
-      colors[i]
+      color
     )
+    offsets = total
+  })
+
+  if (total != totalCount) {
+    html += getMarkerDonutSegment(total / totalCount, 1, r, r0, '#ccc')
   }
+
   html += `<circle cx="${r}" cy="${r}" r="${r0}" fill="white" />
       <text dominant-baseline="central" transform="translate(${r}, ${r})">
-        ${total.toLocaleString()}
+        ${totalCount.toLocaleString()}
       </text>
     </svg>`
 

diff --git a/lib/markerLayerFactory.ts b/lib/markerLayerFactory.ts
@@ -133,12 +133,12 @@ export function updateMarkers(
           const {
             cluster: _a,
             cluster_id: _b,
-            point_count: _point_count,
+            point_count: point_count,
             _c: _d,
             point_count_abbreviated: _e,
             ...countPercolor
           } = props
-          const el = createMarkerDonutChart(countPercolor)
+          const el = createMarkerDonutChart(countPercolor, point_count)
           el.classList.add('cluster-item')
           markers[id] = new Marker({
             element: el,