Internal lib - Fix edge cases for arc generation

Author: graphieros

src/lib.js

@@ -14,16 +14,19 @@ export function makeDonut(item, cx, cy, rx, ry, piProportion = 1.99999, piMult =
             center: {},
         };
     const sum = [...series]
-        .map((serie) => serie.value)
+        .map((serie) => {
+            return serie.value
+        })
         .reduce((a, b) => a + b, 0);
 
     const ratios = [];
     let acc = 0;
     for (let i = 0; i < series.length; i += 1) {
-        let proportion = series[i].value / sum;
+        const val = Math.min(series[i].value - 0.0001, sum);
+        let proportion = val / sum;
         const ratio = proportion * (Math.PI * piProportion); // (Math.PI * 2) fails to display a donut with only one value > 0 as it goes full circle again
         // midProportion & midRatio are used to find the midpoint of the arc to display markers
-        const midProportion = series[i].value / 2 / sum;
+        const midProportion = val / 2 / sum;
         const midRatio = midProportion * (Math.PI * piMult);
         const { startX, startY, endX, endY, path } = createArc(
             [cx, cy],

tests/lib.test.js

@@ -462,65 +462,65 @@ describe("makeDonut", () => {
         expect(donut).toStrictEqual([
             {
                 arcSlice:
-                    "M100.06646055814842 90.00022085272826 A 10 10 6030.380793751915 0 1 108.69326717473096 95.05762144016212 L 108.69326717473096 95.05762144016212 M108.69326717473096 95.05762144016212 A 10 10 6030.380793751915 0 0 100.06646055814842 90.00022085272826 L 100.06646055814842 90.00022085272826",
+                    "M100.06646055814842 90.00022085272826 A 10 10 6030.380793751915 0 1 108.69274956498154 95.0567111150052 L 108.69274956498154 95.0567111150052 M108.69274956498154 95.0567111150052 A 10 10 6030.380793751915 0 0 100.06646055814842 90.00022085272826 L 100.06646055814842 90.00022085272826",
                 cx: 100,
                 cy: 100,
                 value: 1,
-                proportion: 0.16666666666666666,
-                ratio: 1.0471923152088416,
-                path: "M100.06646055814842 90.00022085272826 A 10 10 6030.380793751915 0 1 108.69326717473096 95.05762144016212",
+                proportion: 0.16665,
+                ratio: 1.0470875959773207,
+                path: "M100.06646055814842 90.00022085272826 A 10 10 6030.380793751915 0 1 108.69274956498154 95.0567111150052",
                 startX: 100.06646055814842,
                 startY: 90.00022085272826,
-                endX: 108.69326717473096,
-                endY: 95.05762144016212,
+                endX: 108.69274956498154,
+                endY: 95.0567111150052,
                 center: {
                     startX: 100.09636780931521,
                     startY: 85.50032023645599,
-                    endX: 107.33329685274603,
-                    endY: 87.49109288268934,
-                    path: "M100.09636780931521 85.50032023645599 A 14.5 14.5 6030.380793751915 0 1 107.33329685274603 87.49109288268934",
+                    endX: 107.33264187784894,
+                    endY: 87.49070892931114,
+                    path: "M100.09636780931521 85.50032023645599 A 14.5 14.5 6030.380793751915 0 1 107.33264187784894 87.49070892931114",
                 },
             },
             {
                 arcSlice:
-                    "M108.69326717473096 95.05762144016212 A 10 10 6030.380793751915 0 1 99.93369651802331 109.99978018999806 L 99.93369651802331 109.99978018999806 M99.93369651802331 109.99978018999806 A 10 10 6030.380793751915 0 0 108.69326717473096 95.05762144016212 L 108.69326717473096 95.05762144016212",
+                    "M108.69274956498154 95.0567111150052 A 10 10 6030.380793751915 0 1 99.93579085805592 109.9997938571798 L 99.93579085805592 109.9997938571798 M99.93579085805592 109.9997938571798 A 10 10 6030.380793751915 0 0 108.69274956498154 95.0567111150052 L 108.69274956498154 95.0567111150052",
                 cx: 100,
                 cy: 100,
                 value: 2,
-                proportion: 0.3333333333333333,
-                ratio: 2.094384630417683,
-                path: "M108.69326717473096 95.05762144016212 A 10 10 6030.380793751915 0 1 99.93369651802331 109.99978018999806",
-                startX: 108.69326717473096,
-                startY: 95.05762144016212,
-                endX: 99.93369651802331,
-                endY: 109.99978018999806,
+                proportion: 0.33331666666666665,
+                ratio: 2.0942799111861623,
+                path: "M108.69274956498154 95.0567111150052 A 10 10 6030.380793751915 0 1 99.93579085805592 109.9997938571798",
+                startX: 108.69274956498154,
+                startY: 95.0567111150052,
+                endX: 99.93579085805592,
+                endY: 109.9997938571798,
                 center: {
-                    startX: 112.6052374033599,
-                    startY: 92.83355108823508,
-                    endX: 112.50894551419171,
-                    endY: 107.33323135616101,
-                    path: "M112.6052374033599 92.83355108823508 A 14.5 14.5 6030.380793751915 0 1 112.50894551419171 107.33323135616101",
+                    startX: 112.60448686922324,
+                    startY: 92.83223111675754,
+                    endX: 112.51009725731319,
+                    endY: 107.33126637168266,
+                    path: "M112.60448686922324 92.83223111675754 A 14.5 14.5 6030.380793751915 0 1 112.51009725731319 107.33126637168266",
                 },
             },
             {
                 arcSlice:
-                    "M99.93369651802331 109.99978018999806 A 10 10 6030.380793751915 0 1 100.06614640578861 90.00021876974294 L 100.06614640578861 90.00021876974294 M100.06614640578861 90.00021876974294 A 10 10 6030.380793751915 0 0 99.93369651802331 109.99978018999806 L 99.93369651802331 109.99978018999806",
+                    "M99.93579085805592 109.9997938571798 A 10 10 6030.380793751915 0 1 100.06300489435868 90.00019848280543 L 100.06300489435868 90.00019848280543 M100.06300489435868 90.00019848280543 A 10 10 6030.380793751915 0 0 99.93579085805592 109.9997938571798 L 99.93579085805592 109.9997938571798",
                 cx: 100,
                 cy: 100,
                 value: 3,
-                proportion: 0.5,
-                ratio: 3.1415769456265252,
-                path: "M99.93369651802331 109.99978018999806 A 10 10 6030.380793751915 0 1 100.06614640578861 90.00021876974294",
-                startX: 99.93369651802331,
-                startY: 109.99978018999806,
-                endX: 100.06614640578861,
-                endY: 90.00021876974294,
+                proportion: 0.4999833333333333,
+                ratio: 3.141472226395004,
+                path: "M99.93579085805592 109.9997938571798 A 10 10 6030.380793751915 0 1 100.06300489435868 90.00019848280543",
+                startX: 99.93579085805592,
+                startY: 109.9997938571798,
+                endX: 100.06300489435868,
+                endY: 90.00019848280543,
                 center: {
-                    startX: 99.9038599511338,
-                    startY: 114.4996812754972,
-                    endX: 85.5003187245028,
-                    endY: 99.9038599511338,
-                    path: "M99.9038599511338 114.4996812754972 A 14.5 14.5 6030.380793751915 0 1 85.5003187245028 99.9038599511338",
+                    startX: 99.9068967441811,
+                    startY: 114.4997010929107,
+                    endX: 85.5002940520901,
+                    endY: 99.90765594688226,
+                    path: "M99.9068967441811 114.4997010929107 A 14.5 14.5 6030.380793751915 0 1 85.5002940520901 99.90765594688226",
                 },
             },
         ]);