feat: improve pie chart positioning

Author: rickstaa

src/cards/top-languages-card.js

@@ -104,6 +104,25 @@ const calculateNormalLayoutHeight = (totalLangs) => {
   return 45 + (totalLangs + 1) * 40;
 };
 
+/**
+ * Calculates height for the pie layout.
+ *
+ * @param {number} totalLangs Total number of languages.
+ * @returns {number} Card height.
+ */
+const calculatePieLayoutHeight = (totalLangs) => {
+  return 215 + Math.max(totalLangs - 5, 0) * 32;
+};
+
+/**
+ * Calculates the center translation needed to keep the doughnut chart centred.
+ * @param {number} totalLangs Total number of languages.
+ * @returns {number} Doughnut center translation.
+ */
+const doughnutCenterTranslation = (totalLangs) => {
+  return -45 + Math.max(totalLangs - 5, 0) * 16;
+};
+
 /**
  * Trim top languages to lang_count while also hiding certain languages.
  *
@@ -334,7 +353,6 @@ const createDoughnutPaths = (cx, cy, radius, percentages) => {
   const paths = [];
   let startAngle = 0;
   let endAngle = 0;
-  let doughnutPercent = 0;
 
   const totalPercent = percentages.reduce((acc, curr) => acc + curr, 0);
   for (let i = 0; i < percentages.length; i++) {
@@ -343,7 +361,6 @@ const createDoughnutPaths = (cx, cy, radius, percentages) => {
     let percent = parseFloat(
       ((percentages[i] / totalPercent) * 100).toFixed(2),
     );
-    doughnutPercent += percent;
 
     endAngle = 3.6 * percent + startAngle;
     const startPoint = polarToCartesian(cx, cy, radius, endAngle - 90); // rotate doughnut 90 degrees counter-clockwise.
@@ -386,9 +403,12 @@ const renderDoughnutLayout = (langs, width, totalLanguageSize) => {
     langsPercents,
   );
 
-  const doughnutPaths = langPaths
-    .map((section, i) => {
-      const output = `
+  const doughnutPaths =
+    langs.length === 1
+      ? `<circle cx="${centerX}" cy="${centerY}" r="${radius}" stroke="${colors[0]}" fill="none" stroke-width="${strokeWidth}" data-testid="lang-doughnut" size="100"/>`
+      : langPaths
+          .map((section, i) => {
+            const output = `
        <g>
         <path
           data-testid="lang-doughnut"
@@ -401,9 +421,9 @@ const renderDoughnutLayout = (langs, width, totalLanguageSize) => {
       </g>
       `;
 
-      return output;
-    })
-    .join("");
+            return output;
+          })
+          .join("");
 
   const donut = `<svg width="${width}" height="${width}">${doughnutPaths}</svg>`;
 
@@ -413,7 +433,7 @@ const renderDoughnutLayout = (langs, width, totalLanguageSize) => {
         ${createDoughnutLanguagesNode({ langs, totalSize: totalLanguageSize })}
       </g>
 
-      <g transform="translate(125, -45)">
+      <g transform="translate(125, ${doughnutCenterTranslation(langs.length)})">
         ${donut}
       </g>
     </g>
@@ -469,7 +489,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
     height = calculateCompactLayoutHeight(langs.length);
     finalLayout = renderCompactLayout(langs, width, totalLanguageSize);
   } else if (layout?.toLowerCase() === "pie") {
-    height = height - 60; // padding
+    height = calculatePieLayoutHeight(langs.length);
     width = width + 50; // padding
     finalLayout = renderDoughnutLayout(langs, width, totalLanguageSize);
   } else {
@@ -516,6 +536,8 @@ export {
   cartesianToPolar,
   calculateCompactLayoutHeight,
   calculateNormalLayoutHeight,
+  calculatePieLayoutHeight,
+  doughnutCenterTranslation,
   trimTopLanguages,
   renderTopLanguages,
   MIN_CARD_WIDTH,

tests/renderTopLanguages.test.js

@@ -1,18 +1,18 @@
 import { queryAllByTestId, queryByTestId } from "@testing-library/dom";
 import { cssToObject } from "@uppercod/css-to-object";
-import {
-  MIN_CARD_WIDTH,
-  radiansToDegrees,
-  renderTopLanguages,
-  calculateCompactLayoutHeight,
-  calculateNormalLayoutHeight,
-  trimTopLanguages,
-} from "../src/cards/top-languages-card.js";
 import {
   getLongestLang,
   degreesToRadians,
+  radiansToDegrees,
   polarToCartesian,
   cartesianToPolar,
+  calculateCompactLayoutHeight,
+  calculateNormalLayoutHeight,
+  calculatePieLayoutHeight,
+  doughnutCenterTranslation,
+  trimTopLanguages,
+  renderTopLanguages,
+  MIN_CARD_WIDTH,
 } from "../src/cards/top-languages-card.js";
 
 // adds special assertions like toHaveTextContent
@@ -179,6 +179,34 @@ describe("Test renderTopLanguages helper functions", () => {
     expect(calculateNormalLayoutHeight(10)).toBe(485);
   });
 
+  it("calculatePieLayoutHeight", () => {
+    expect(calculatePieLayoutHeight(0)).toBe(215);
+    expect(calculatePieLayoutHeight(1)).toBe(215);
+    expect(calculatePieLayoutHeight(2)).toBe(215);
+    expect(calculatePieLayoutHeight(3)).toBe(215);
+    expect(calculatePieLayoutHeight(4)).toBe(215);
+    expect(calculatePieLayoutHeight(5)).toBe(215);
+    expect(calculatePieLayoutHeight(6)).toBe(247);
+    expect(calculatePieLayoutHeight(7)).toBe(279);
+    expect(calculatePieLayoutHeight(8)).toBe(311);
+    expect(calculatePieLayoutHeight(9)).toBe(343);
+    expect(calculatePieLayoutHeight(10)).toBe(375);
+  });
+
+  it("doughnutCenterTranslation", () => {
+    expect(doughnutCenterTranslation(0)).toBe(-45);
+    expect(doughnutCenterTranslation(1)).toBe(-45);
+    expect(doughnutCenterTranslation(2)).toBe(-45);
+    expect(doughnutCenterTranslation(3)).toBe(-45);
+    expect(doughnutCenterTranslation(4)).toBe(-45);
+    expect(doughnutCenterTranslation(5)).toBe(-45);
+    expect(doughnutCenterTranslation(6)).toBe(-29);
+    expect(doughnutCenterTranslation(7)).toBe(-13);
+    expect(doughnutCenterTranslation(8)).toBe(3);
+    expect(doughnutCenterTranslation(9)).toBe(19);
+    expect(doughnutCenterTranslation(10)).toBe(35);
+  });
+
   it("trimTopLanguages", () => {
     expect(trimTopLanguages([])).toStrictEqual({
       langs: [],
@@ -474,6 +502,23 @@ describe("Test renderTopLanguages", () => {
     expect(cssLangPercent).toBeCloseTo(20);
 
     expect(HTMLLangPercent + javascriptLangPercent + cssLangPercent).toBe(100);
+
+    // Should render full doughnut (circle) if one language is 100%.
+    document.body.innerHTML = renderTopLanguages(
+      { HTML: langs.HTML },
+      { layout: "pie" },
+    );
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
+      "HTML 100.00%",
+    );
+    expect(queryAllByTestId(document.body, "lang-doughnut")[0]).toHaveAttribute(
+      "size",
+      "100",
+    );
+    expect(queryAllByTestId(document.body, "lang-doughnut")).toHaveLength(1);
+    expect(queryAllByTestId(document.body, "lang-doughnut")[0].tagName).toBe(
+      "circle",
+    );
   });
 
   it("should render a translated title", () => {