Merge pull request #55 from bprusinowski/fix/properly-skip-empty-groups

fix: Properly skip empty groups in Bubble, Pie and Treemap charts
bprusinowski · Apr 21, 2024 · b8b4577 · b8b4577
2 parents b54847c + 4a7098c
commit b8b4577
Show file tree

Hide file tree

Showing 19 changed files with 549 additions and 593 deletions.
diff --git a/src/charts/BarChart.ts b/src/charts/BarChart.ts
@@ -94,15 +94,17 @@ const getMaxValue = (step: BarInputStep): ExtremeValue => {
 
   switch (step.chartSubtype) {
     case "stacked":
-      step.groups.forEach((d) => {
-        const groupSum = sum(d.data.map((d) => d.value));
+      step.groups.forEach((group) => {
+        const groupSum = sum(group.data.map((d) => d.value));
         if (groupSum > valueMax) {
           valueMax = groupSum;
         }
       });
       break;
     default:
-      const values = step.groups.flatMap((d) => d.data.map((d) => d.value));
+      const values = step.groups.flatMap((group) =>
+        group.data.map((d) => d.value)
+      );
       valueMax = max(values) ?? 0;
       break;
   }
@@ -184,8 +186,6 @@ export const getters = (
   const groupLabelStroke = svgBackgroundColor;
   const datumStroke = svgBackgroundColor;
 
-  const groupsGetters: Chart.Getter[] = [];
-
   if (isVertical) {
     const { x0Scale, x0bw, x1Scale, x1bw, yScale } = getVerticalScales({
       isGrouped,
@@ -196,7 +196,7 @@ export const getters = (
       height,
     });
 
-    for (const group of groups) {
+    return groups.map((group) => {
       const { key } = group;
       const groupX0 = x0Scale(key) as number;
       const groupX = margin.left + groupX0 + x0bw * 0.5;
@@ -357,10 +357,8 @@ export const getters = (
         groupGetters.data.push(datumGetters);
       }
 
-      groupsGetters.push(groupGetters);
-    }
-
-    return groupsGetters;
+      return groupGetters;
+    });
   } else {
     const { xScale, y0Scale, y0bw, y1Scale, y1bw } = getHorizontalScales({
       isGrouped,
@@ -374,7 +372,7 @@ export const getters = (
         : 0,
     });
 
-    for (const group of groups) {
+    return groups.map((group) => {
       const { key } = group;
       const groupX = margin.left;
       const groupY0 = y0Scale(key) as number;
@@ -480,8 +478,8 @@ export const getters = (
                 ? labelX + (labelWidth + valueWidth + BASE_MARGIN) * 0.5
                 : s(0, (dWidth + valueWidth + BASE_MARGIN) * 0.5)
               : showDatumLabels
-              ? labelX + labelWidth + valueWidth * 0.5 + BASE_MARGIN * 0.25
-              : 0;
+                ? labelX + labelWidth + valueWidth * 0.5 + BASE_MARGIN * 0.25
+                : 0;
             const valueY = s(valueHeight * 0.5, -valueYShift * 0.5);
             const valueFontSize = showValues ? s(0, FONT_SIZE.datumValue) : 0;
             const valueFill = isGrouped ? groupLabelFill : labelFill;
@@ -515,10 +513,8 @@ export const getters = (
         groupGetters.data.push(datumGetters);
       }
 
-      groupsGetters.push(groupGetters);
-    }
-
-    return groupsGetters;
+      return groupGetters;
+    });
   }
 };
 

diff --git a/src/charts/BeeswarmChart.ts b/src/charts/BeeswarmChart.ts
@@ -48,8 +48,8 @@ export const info = (
     positionScale,
   } = inputStep;
   const type: ChartType = "beeswarm";
-  const positions = inputStep.groups.flatMap((g) => {
-    return g.data.map((d) => d.position);
+  const positions = inputStep.groups.flatMap((group) => {
+    return group.data.map((d) => d.position);
   });
   const [minValue, maxValue] = [
     positionScale?.minValue ?? min(positions) ?? 0,
@@ -80,8 +80,8 @@ export const xExtent = (inputStep: BeeswarmInputStep): Chart.Extent => {
     return;
   }
 
-  const positions = inputStep.groups.flatMap((g) => {
-    return g.data.map((d) => d.position);
+  const positions = inputStep.groups.flatMap((group) => {
+    return group.data.map((d) => d.position);
   });
 
   return [
@@ -97,8 +97,8 @@ export const yExtent = (inputStep: BeeswarmInputStep): Chart.Extent => {
     return;
   }
 
-  const positions = inputStep.groups.flatMap((g) => {
-    return g.data.map((d) => d.position);
+  const positions = inputStep.groups.flatMap((group) => {
+    return group.data.map((d) => d.position);
   });
 
   return [
@@ -139,8 +139,6 @@ export const getters = (
   const groupLabelStroke = svgBackgroundColor;
   const datumStroke = svgBackgroundColor;
 
-  const groupsGetters: Chart.Getter[] = [];
-
   if (layout === "horizontal") {
     const { xScale, yScale, ybw } = getHorizontalScales({
       groupsKeys,
@@ -150,7 +148,7 @@ export const getters = (
       height,
     });
 
-    for (const group of groups) {
+    return groups.map((group) => {
       const { key } = group;
       const positions = group.data.map((d) => d.position);
       const [minGroupX, maxGroupX] = [
@@ -266,8 +264,8 @@ export const getters = (
         groupGetters.data.push(datumGetters);
       }
 
-      groupsGetters.push(groupGetters);
-    }
+      return groupGetters;
+    });
   } else {
     const { xScale, xBw, yScale } = getVerticalScales({
       groupsKeys,
@@ -277,7 +275,7 @@ export const getters = (
       height,
     });
 
-    for (const group of groups) {
+    return groups.map((group) => {
       const { key } = group;
       const positions = group.data.map((d) => d.position);
       const [minGroupY, maxGroupY] = [
@@ -397,11 +395,9 @@ export const getters = (
         groupGetters.data.push(datumGetters);
       }
 
-      groupsGetters.push(groupGetters);
-    }
+      return groupGetters;
+    });
   }
-
-  return groupsGetters;
 };
 
 const getVerticalScales = ({