@gh-top-languages/lib 1.0.3 → 1.0.4

package/package.json

@@ -1,48 +1,48 @@
-{
-  "name": "@gh-top-languages/lib",
-  "description": "Library for github-top-languages — chart generation, SVG output, and parameter parsing",
-  "author": "Mason L'Etoile",
-  "version": "1.0.3",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/gh-top-languages/lib.git"
-  },
-  "homepage": "https://github.com/gh-top-languages/lib#readme",
-  "bugs": {
-    "url": "https://github.com/gh-top-languages/lib/issues"
-  },
-  "keywords": ["svg", "charts", "github-profile", "github-top-languages"],
-  "type": "module",
-  "scripts": {
-    "test": "vitest",
-    "test:coverage": "vitest --coverage",
-    "typecheck": "tsc --noEmit",
-    "build": "tsc -p tsconfig.build.json",
-    "prepare": "tsc -p tsconfig.build.json"
-  },
-  "devDependencies": {
-    "typescript": "~6.0.2",
-    "vitest": "^4.0.17",
-    "@vitest/coverage-v8": "^4.0.17"
-  },
-  "files": ["dist", "src"],
-  "exports": {
-    "./types.js":              { "types": "./dist/types.d.ts",              "import": "./dist/types.js"              },
-    "./charts/donut.js":       { "types": "./dist/charts/donut.d.ts",       "import": "./dist/charts/donut.js"       },
-    "./charts/pie.js":         { "types": "./dist/charts/pie.d.ts",         "import": "./dist/charts/pie.js"         },
-    "./charts/geometry.js":    { "types": "./dist/charts/geometry.d.ts",    "import": "./dist/charts/geometry.js"    },
-    "./charts/legend.js":      { "types": "./dist/charts/legend.d.ts",      "import": "./dist/charts/legend.js"      },
-    "./charts/layout.js":      { "types": "./dist/charts/layout.d.ts",      "import": "./dist/charts/layout.js"      },
-    "./render/chart.js":       { "types": "./dist/render/chart.d.ts",       "import": "./dist/render/chart.js"       },
-    "./render/svg.js":         { "types": "./dist/render/svg.d.ts",         "import": "./dist/render/svg.js"         },
-    "./render/error.js":       { "types": "./dist/render/error.d.ts",       "import": "./dist/render/error.js"       },
-    "./utils/params.js":       { "types": "./dist/utils/params.d.ts",       "import": "./dist/utils/params.js"       },
-    "./utils/sanitize.js":     { "types": "./dist/utils/sanitize.d.ts",     "import": "./dist/utils/sanitize.js"     },
-    "./constants/config.js":   { "types": "./dist/constants/config.d.ts",   "import": "./dist/constants/config.js"   },
-    "./constants/geometry.js": { "types": "./dist/constants/geometry.d.ts", "import": "./dist/constants/geometry.js" },
-    "./constants/styles.js":   { "types": "./dist/constants/styles.d.ts",   "import": "./dist/constants/styles.js"   },
-    "./constants/themes.js":   { "types": "./dist/constants/themes.d.ts",   "import": "./dist/constants/themes.js"   },
-    "./constants/types.js":    { "types": "./dist/constants/types.d.ts",    "import": "./dist/constants/types.js"    }
-  }
-}
+{
+  "name": "@gh-top-languages/lib",
+  "description": "Library for github-top-languages — chart generation, SVG output, and parameter parsing",
+  "author": "Mason L'Etoile",
+  "version": "1.0.4",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gh-top-languages/lib.git"
+  },
+  "homepage": "https://github.com/gh-top-languages/lib#readme",
+  "bugs": {
+    "url": "https://github.com/gh-top-languages/lib/issues"
+  },
+  "keywords": ["svg", "charts", "github-profile", "github-top-languages"],
+  "type": "module",
+  "scripts": {
+    "test": "vitest",
+    "test:coverage": "vitest --coverage",
+    "typecheck": "tsc --noEmit -p tsconfig.test.json",
+    "build": "tsc -p tsconfig.build.json",
+    "prepare": "tsc -p tsconfig.build.json"
+  },
+  "devDependencies": {
+    "typescript": "~6.0.2",
+    "vitest": "^4.0.17",
+    "@vitest/coverage-v8": "^4.0.17"
+  },
+  "files": ["dist", "src"],
+  "exports": {
+    "./types.js":              { "types": "./dist/types.d.ts",              "import": "./dist/types.js"              },
+    "./charts/donut.js":       { "types": "./dist/charts/donut.d.ts",       "import": "./dist/charts/donut.js"       },
+    "./charts/pie.js":         { "types": "./dist/charts/pie.d.ts",         "import": "./dist/charts/pie.js"         },
+    "./charts/geometry.js":    { "types": "./dist/charts/geometry.d.ts",    "import": "./dist/charts/geometry.js"    },
+    "./charts/legend.js":      { "types": "./dist/charts/legend.d.ts",      "import": "./dist/charts/legend.js"      },
+    "./charts/layout.js":      { "types": "./dist/charts/layout.d.ts",      "import": "./dist/charts/layout.js"      },
+    "./render/chart.js":       { "types": "./dist/render/chart.d.ts",       "import": "./dist/render/chart.js"       },
+    "./render/svg.js":         { "types": "./dist/render/svg.d.ts",         "import": "./dist/render/svg.js"         },
+    "./render/error.js":       { "types": "./dist/render/error.d.ts",       "import": "./dist/render/error.js"       },
+    "./utils/params.js":       { "types": "./dist/utils/params.d.ts",       "import": "./dist/utils/params.js"       },
+    "./utils/sanitize.js":     { "types": "./dist/utils/sanitize.d.ts",     "import": "./dist/utils/sanitize.js"     },
+    "./constants/config.js":   { "types": "./dist/constants/config.d.ts",   "import": "./dist/constants/config.js"   },
+    "./constants/geometry.js": { "types": "./dist/constants/geometry.d.ts", "import": "./dist/constants/geometry.js" },
+    "./constants/styles.js":   { "types": "./dist/constants/styles.d.ts",   "import": "./dist/constants/styles.js"   },
+    "./constants/themes.js":   { "types": "./dist/constants/themes.d.ts",   "import": "./dist/constants/themes.js"   },
+    "./constants/types.js":    { "types": "./dist/constants/types.d.ts",    "import": "./dist/constants/types.js"    }
+  }
+}

package/src/charts/donut.ts

@@ -1,22 +1,38 @@
-import type { Language, Theme, ChartResult                          } from "../types.js";
-import { resolveLayout, calculateChartCenter, calculateLegendStartX } from "./layout.js";
-import { DONUT_GEOMETRY                                             } from "../constants/geometry.js";
-import { createDonutSegments                                        } from "./geometry.js";
-import { createLegend                                               } from "./legend.js";
-
-export function generateDonutChart(
-  normalizedLanguages: Language[],
-  selectedTheme:       Theme,
-  width:               number,
-  stroke:              boolean
-): ChartResult {
-  const { isShifted, useStroke } = resolveLayout(normalizedLanguages.length, stroke);
-
-  const chartX                   = calculateChartCenter(width, isShifted);
-  const legendStartX             = calculateLegendStartX(chartX, DONUT_GEOMETRY.OUTER_RADIUS);
-
-  const segments = createDonutSegments(normalizedLanguages, chartX, DONUT_GEOMETRY, [...selectedTheme.colours], useStroke);
-  const legend   = createLegend(normalizedLanguages, isShifted, selectedTheme, legendStartX, useStroke);
-
-  return { segments, legend };
-}
+import type { Language, Theme, ChartResult } from "../types.js";
+import { DONUT_GEOMETRY                    } from "../constants/geometry.js";
+import { createDonutSegments               } from "./geometry.js";
+import { createLegend                      } from "./legend.js";
+import { resolveLayout, computeLayout      } from "./layout.js";
+
+export function generateDonutChart(
+  normalizedLanguages: Language[],
+  selectedTheme:       Theme,
+  stroke:              boolean
+): ChartResult {
+  const { isShifted, useStroke } = resolveLayout(normalizedLanguages.length, stroke);
+  const {
+    chartX,
+    legendStartX,
+    columnWidth,
+    contentWidth,
+    contentHeight
+  } = computeLayout(normalizedLanguages, isShifted, DONUT_GEOMETRY);
+
+  const segments = createDonutSegments(
+    normalizedLanguages,
+    chartX,
+    DONUT_GEOMETRY,
+    [...selectedTheme.colours],
+    useStroke
+  );
+  const legend = createLegend(
+    normalizedLanguages,
+    isShifted,
+    selectedTheme,
+    legendStartX,
+    useStroke,
+    columnWidth
+  );
+
+  return { segments, legend, contentWidth, contentHeight };
+}

package/src/charts/geometry.ts

@@ -1,88 +1,88 @@
-import type { Point, Language, Geometry } from "../types.js"
-import { FULL_CIRCLE_ANGLE              } from "../constants/geometry.js";
-
-export const polarToCartesian = (
-  cx:       number,
-  cy:       number,
-  r:        number,
-  angleDeg: number
-): Point => {
-  const angleRad = (angleDeg - 90) * Math.PI / 180;
-  return {
-    x: cx + (r * Math.cos(angleRad)),
-    y: cy + (r * Math.sin(angleRad))
-  };
-};
-
-export const describeSegment = (
-  cx:         number,
-  cy:         number,
-  innerR:     number,
-  outerR:     number,
-  startAngle: number,
-  endAngle:   number
-): string => {
-  const angleDiff = endAngle - startAngle
-
-  if (angleDiff >= 360 || angleDiff <= -360) {
-    const midAngle = startAngle + 180;
-    const firstHalf = describeSegment(cx, cy, innerR, outerR, startAngle, midAngle);
-    const secondHalf = describeSegment(cx, cy, innerR, outerR, midAngle, endAngle);
-    return firstHalf + ' ' + secondHalf;
-  }
-
-  const startOuter = polarToCartesian(cx, cy, outerR, endAngle);
-  const endOuter   = polarToCartesian(cx, cy, outerR, startAngle);
-  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-
-  if (innerR === 0) {
-    return `
-      M ${cx} ${cy}
-      L ${startOuter.x} ${startOuter.y}
-      A ${outerR} ${outerR} 0 ${largeArcFlag} 0 ${endOuter.x} ${endOuter.y}
-      Z
-    `.trim();
-  }
-
-  const startInner = polarToCartesian(cx, cy, innerR, startAngle);
-  const endInner   = polarToCartesian(cx, cy, innerR, endAngle);
-
-  return `
-    M ${startOuter.x} ${startOuter.y}
-    A ${outerR} ${outerR} 0 ${largeArcFlag} 0 ${endOuter.x} ${endOuter.y}
-    L ${startInner.x} ${startInner.y}
-    A ${innerR} ${innerR} 0 ${largeArcFlag} 1 ${endInner.x} ${endInner.y}
-    Z
-  `.trim();
-};
-
-export const createDonutSegments = (
-  languages: Language[],
-  cx:        number,
-  geometry:  Geometry,
-  colours:   string[],
-  stroke:    boolean
-): string => {
-  let currentAngle = -0.1;
-
-  return languages.map((lang, i) => {
-    let angle = (lang.pct / 100) * 360;
-
-    const segmentAngle =  Math.min(currentAngle + angle + 0.1, FULL_CIRCLE_ANGLE);
-    const path = describeSegment(
-      cx,
-      geometry.CENTER_Y,
-      geometry.INNER_RADIUS,
-      geometry.OUTER_RADIUS,
-      currentAngle,
-      segmentAngle
-    );
-
-    currentAngle += angle;
-    const fillColour = colours[i % colours.length];
-    const strokeAttr = stroke
-      ? ` stroke="#000" stroke-width="0.5" stroke-linejoin="round"`
-      : ` stroke="${fillColour}" stroke-width="0.2"`;
-    return `<path d="${path}" fill="${fillColour}"${strokeAttr} shape-rendering="geometricPrecision"/>`;
-  }).join('');
-}
+import type { Point, Language, Geometry } from "../types.js"
+import { FULL_CIRCLE_ANGLE              } from "../constants/geometry.js";
+
+export const polarToCartesian = (
+  cx:       number,
+  cy:       number,
+  r:        number,
+  angleDeg: number
+): Point => {
+  const angleRad = (angleDeg - 90) * Math.PI / 180;
+  return {
+    x: cx + (r * Math.cos(angleRad)),
+    y: cy + (r * Math.sin(angleRad))
+  };
+};
+
+export const describeSegment = (
+  cx:         number,
+  cy:         number,
+  innerR:     number,
+  outerR:     number,
+  startAngle: number,
+  endAngle:   number
+): string => {
+  const angleDiff = endAngle - startAngle
+
+  if (angleDiff >= 360 || angleDiff <= -360) {
+    const midAngle = startAngle + 180;
+    const firstHalf = describeSegment(cx, cy, innerR, outerR, startAngle, midAngle);
+    const secondHalf = describeSegment(cx, cy, innerR, outerR, midAngle, endAngle);
+    return firstHalf + ' ' + secondHalf;
+  }
+
+  const startOuter = polarToCartesian(cx, cy, outerR, endAngle);
+  const endOuter   = polarToCartesian(cx, cy, outerR, startAngle);
+  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+
+  if (innerR === 0) {
+    return `
+      M ${cx} ${cy}
+      L ${startOuter.x} ${startOuter.y}
+      A ${outerR} ${outerR} 0 ${largeArcFlag} 0 ${endOuter.x} ${endOuter.y}
+      Z
+    `.trim();
+  }
+
+  const startInner = polarToCartesian(cx, cy, innerR, startAngle);
+  const endInner   = polarToCartesian(cx, cy, innerR, endAngle);
+
+  return `
+    M ${startOuter.x} ${startOuter.y}
+    A ${outerR} ${outerR} 0 ${largeArcFlag} 0 ${endOuter.x} ${endOuter.y}
+    L ${startInner.x} ${startInner.y}
+    A ${innerR} ${innerR} 0 ${largeArcFlag} 1 ${endInner.x} ${endInner.y}
+    Z
+  `.trim();
+};
+
+export const createDonutSegments = (
+  languages: Language[],
+  cx:        number,
+  geometry:  Geometry,
+  colours:   string[],
+  stroke:    boolean
+): string => {
+  let currentAngle = -0.1;
+
+  return languages.map((lang, i) => {
+    let angle = (lang.pct / 100) * 360;
+
+    const segmentAngle =  Math.min(currentAngle + angle + 0.1, FULL_CIRCLE_ANGLE);
+    const path = describeSegment(
+      cx,
+      geometry.CENTER_Y,
+      geometry.INNER_RADIUS,
+      geometry.OUTER_RADIUS,
+      currentAngle,
+      segmentAngle
+    );
+
+    currentAngle += angle;
+    const fillColour = colours[i % colours.length];
+    const strokeAttr = stroke
+      ? ` stroke="#000" stroke-width="0.5" stroke-linejoin="round"`
+      : ` stroke="${fillColour}" stroke-width="0.2"`;
+    return `<path d="${path}" fill="${fillColour}"${strokeAttr} shape-rendering="geometricPrecision"/>`;
+  }).join('');
+}

package/src/charts/layout.ts

@@ -1,19 +1,50 @@
-import { LEGEND_SHIFT_THRESHOLD, LEGEND_STYLES, CHART_MARGIN_RIGHT } from "../constants/styles.js";
-
-export function resolveLayout(count: number, stroke: boolean) {
-  return {
-    isShifted: count > LEGEND_SHIFT_THRESHOLD,
-    useStroke: count > 1 ? stroke : false
-  };
-}
-
-export function calculateChartCenter(width: number, isShifted: boolean): number {
-  const legendWidth = isShifted
-    ? LEGEND_STYLES.COLUMN_WIDTH * 2
-    : LEGEND_STYLES.WIDTH;
-  return (width - legendWidth - CHART_MARGIN_RIGHT) / 2;
-}
-
-export function calculateLegendStartX(chartCenterX: number, radius: number): number {
-  return chartCenterX + radius + CHART_MARGIN_RIGHT;
-}
+import { LEGEND_SHIFT_THRESHOLD, LEGEND_STYLES, CHART_MARGIN_RIGHT, ARIAL_CHAR_WIDTHS, DEFAULT_CHAR_WIDTH } from "../constants/styles.js";
+import type { Geometry, Language } from "../types.js";
+
+export function resolveLayout(count: number, stroke: boolean) {
+  return {
+    isShifted: count > LEGEND_SHIFT_THRESHOLD,
+    useStroke: count > 1 ? stroke : false
+  };
+}
+
+const measureText = (text: string, fontSize: number): number => [...text]
+  .reduce((sum, ch) => sum + (ARIAL_CHAR_WIDTHS[ch] ?? DEFAULT_CHAR_WIDTH), 0) * fontSize / 1000;
+
+const estimateEntryWidth = (label: string): number =>
+  LEGEND_STYLES.SQUARE_SIZE + LEGEND_STYLES.TEXT_GAP + measureText(label, LEGEND_STYLES.FONT_SIZE);
+
+export function measureLegend(languages: Language[], isShifted: boolean) {
+  const entryWidth = (lang: Language) => estimateEntryWidth(`${lang.lang} ${lang.pct.toFixed(1)}%`);
+
+  if (!isShifted) {
+    const width = languages.reduce((max, l) => Math.max(max, entryWidth(l)), 0);
+    return { columnWidth: width, legendWidth: width };
+  }
+
+  const half = Math.ceil(languages.length / 2);
+  const col0Width = languages.slice(0, half).reduce((max, l) => Math.max(max, entryWidth(l)), 0);
+  const col1Width = languages.slice(half).reduce((max, l) => Math.max(max, entryWidth(l)), 0);
+
+  const columnWidth = col0Width + LEGEND_STYLES.COLUMN_GAP;
+  const legendWidth = columnWidth + col1Width;
+
+  return { columnWidth, legendWidth };
+}
+
+export const CONTENT_PAD = 20;
+
+export function computeLayout(languages: Language[], isShifted: boolean, geometry: Geometry) {
+  const { columnWidth, legendWidth } = measureLegend(languages, isShifted);
+
+  const chartX       = CONTENT_PAD + geometry.OUTER_RADIUS;
+  const legendStartX = chartX + geometry.OUTER_RADIUS + CHART_MARGIN_RIGHT;
+  const contentWidth = legendStartX + legendWidth + CONTENT_PAD;
+
+  const rows          = isShifted ? Math.ceil(languages.length / 2) : languages.length;
+  const legendBottom  = LEGEND_STYLES.START_Y + (rows - 1) * LEGEND_STYLES.ROW_HEIGHT + LEGEND_STYLES.SQUARE_SIZE;
+  const chartBottom   = geometry.CENTER_Y + geometry.OUTER_RADIUS;
+  const contentHeight = Math.max(chartBottom, legendBottom) + CONTENT_PAD;
+
+  return { chartX, legendStartX, columnWidth, contentWidth, contentHeight };
+}

package/src/charts/legend.ts

@@ -1,53 +1,54 @@
-import { LEGEND_STYLES        } from "../constants/styles.js";
-import type { Language, Theme } from "../types.js";
-
-export function createLegend(
-  languages:     Language[],
-  isShifted:     boolean,
-  selectedTheme: Theme,
-  legendStartX:  number,
-  stroke:        boolean
-): string {
-  const numLangs = languages.length;
-
-  return languages.map((lang, i) => {
-    let x: number, y: number;
-
-    if (!isShifted) {
-      x = legendStartX;
-      y = LEGEND_STYLES.START_Y + i * LEGEND_STYLES.ROW_HEIGHT;
-    } else {
-      const half = Math.ceil(numLangs / 2);
-      const col  = Math.floor(i / half);
-      const row  = i % half;
-
-      x = legendStartX + col * LEGEND_STYLES.COLUMN_WIDTH;
-      y = LEGEND_STYLES.START_Y + row * LEGEND_STYLES.ROW_HEIGHT;
-    }
-
-    const fill = selectedTheme.colours[i];
-    const strokeAttr = stroke
-      ? ` stroke="#000" stroke-width="0.5" stroke-linejoin="round"`
-      : ``;
-
-    return `
-      <rect
-        x="${x}"
-        y="${y - LEGEND_STYLES.SQUARE_SIZE + 3}"
-        width="${LEGEND_STYLES.SQUARE_SIZE}"
-        height="${LEGEND_STYLES.SQUARE_SIZE}"
-        fill="${fill}"
-        rx="${LEGEND_STYLES.SQUARE_RADIUS}"${strokeAttr}
-      />
-      <text
-        x="${x + LEGEND_STYLES.SQUARE_SIZE + 5}"
-        y="${y}"
-        fill="${selectedTheme.text}"
-        font-size="${LEGEND_STYLES.FONT_SIZE}"
-        font-family="Arial"
-      >
-      ${lang.lang} ${lang.pct.toFixed(1)}%
-    </text>
-    `;
-  }).join('');
-}
+import { LEGEND_STYLES        } from "../constants/styles.js";
+import type { Language, Theme } from "../types.js";
+
+export function createLegend(
+  languages:     Language[],
+  isShifted:     boolean,
+  selectedTheme: Theme,
+  legendStartX:  number,
+  stroke:        boolean,
+  columnWidth:   number
+): string {
+  const numLangs = languages.length;
+
+  return languages.map((lang, i) => {
+    let x: number, y: number;
+
+    if (!isShifted) {
+      x = legendStartX;
+      y = LEGEND_STYLES.START_Y + i * LEGEND_STYLES.ROW_HEIGHT;
+    } else {
+      const half = Math.ceil(numLangs / 2);
+      const col  = Math.floor(i / half);
+      const row  = i % half;
+
+      x = legendStartX + col * columnWidth;
+      y = LEGEND_STYLES.START_Y + row * LEGEND_STYLES.ROW_HEIGHT;
+    }
+
+    const fill = selectedTheme.colours[i];
+    const strokeAttr = stroke
+      ? ` stroke="#000" stroke-width="0.5" stroke-linejoin="round"`
+      : ``;
+
+    return `
+      <rect
+        x="${x}"
+        y="${y - LEGEND_STYLES.SQUARE_SIZE + 3}"
+        width="${LEGEND_STYLES.SQUARE_SIZE}"
+        height="${LEGEND_STYLES.SQUARE_SIZE}"
+        fill="${fill}"
+        rx="${LEGEND_STYLES.SQUARE_RADIUS}"${strokeAttr}
+      />
+      <text
+        x="${x + LEGEND_STYLES.SQUARE_SIZE + LEGEND_STYLES.TEXT_GAP}"
+        y="${y}"
+        fill="${selectedTheme.text}"
+        font-size="${LEGEND_STYLES.FONT_SIZE}"
+        font-family="Arial"
+      >
+      ${lang.lang} ${lang.pct.toFixed(1)}%
+    </text>
+    `;
+  }).join('');
+}

package/src/charts/pie.ts

@@ -1,22 +1,41 @@
-import type { Language, Theme, ChartResult                          } from "../types.js";
-import { resolveLayout, calculateChartCenter, calculateLegendStartX } from "./layout.js";
-import { PIE_GEOMETRY                                               } from "../constants/geometry.js";
-import { createDonutSegments                                        } from "./geometry.js";
-import { createLegend                                               } from "./legend.js";
-
-export function generatePieChart(
-  normalizedLanguages: Language[],
-  selectedTheme:       Theme,
-  width:               number,
-  stroke:              boolean
-): ChartResult {
-  const { isShifted, useStroke } = resolveLayout(normalizedLanguages.length, stroke);
-
-  const chartX                   = calculateChartCenter(width, isShifted);
-  const legendStartX             = calculateLegendStartX(chartX, PIE_GEOMETRY.OUTER_RADIUS);
-
-  const segments = createDonutSegments(normalizedLanguages, chartX, PIE_GEOMETRY, [...selectedTheme.colours], useStroke);
-  const legend = createLegend(normalizedLanguages, isShifted, selectedTheme, legendStartX, useStroke);
-
-  return { segments, legend };
-}
+import type { Language, Theme, ChartResult } from "../types.js";
+import { PIE_GEOMETRY                      } from "../constants/geometry.js";
+import { createDonutSegments               } from "./geometry.js";
+import { createLegend                      } from "./legend.js";
+import {
+  resolveLayout,
+  computeLayout
+} from "./layout.js";
+
+export function generatePieChart(
+  normalizedLanguages: Language[],
+  selectedTheme:       Theme,
+  stroke:              boolean
+): ChartResult {
+  const { isShifted, useStroke } = resolveLayout(normalizedLanguages.length, stroke);
+  const {
+   chartX,
+   legendStartX,
+   columnWidth,
+   contentWidth,
+   contentHeight
+  } = computeLayout(normalizedLanguages, isShifted, PIE_GEOMETRY);
+
+  const segments = createDonutSegments(
+    normalizedLanguages,
+    chartX,
+    PIE_GEOMETRY,
+    [...selectedTheme.colours],
+    useStroke
+  );
+  const legend = createLegend(
+    normalizedLanguages,
+    isShifted,
+    selectedTheme,
+    legendStartX,
+    useStroke,
+    columnWidth
+  );
+
+  return { segments, legend, contentWidth, contentHeight };
+}

package/src/constants/config.ts

@@ -1,11 +1,11 @@
-export const DEFAULT_CONFIG = {
-  TITLE:      "Top Languages",
-  WIDTH:      400,
-  MIN_WIDTH:  400,
-  HEIGHT:     300,
-  MIN_HEIGHT: 265,
-  COUNT:      8,
-  MAX_COUNT:  16
-} as const;
-
-export const REFRESH_INTERVAL = 1000 * 60 * 60;
+export const DEFAULT_CONFIG = {
+  TITLE:      "Top Languages",
+  WIDTH:      400,
+  MIN_WIDTH:  400,
+  HEIGHT:     300,
+  MIN_HEIGHT: 265,
+  COUNT:      8,
+  MAX_COUNT:  16
+} as const;
+
+export const REFRESH_INTERVAL = 1000 * 60 * 60;

package/src/constants/geometry.ts

@@ -1,9 +1,9 @@
-export const FULL_CIRCLE_ANGLE = 359.9999;
-
-const BASE_GEOMETRY = {
-  CENTER_Y:     170,
-  OUTER_RADIUS: 80,
-} as const;
-
-export const DONUT_GEOMETRY = { ...BASE_GEOMETRY, INNER_RADIUS: 50 } as const;
-export const PIE_GEOMETRY   = { ...BASE_GEOMETRY, INNER_RADIUS: 0  } as const;
+export const FULL_CIRCLE_ANGLE = 359.9999;
+
+const BASE_GEOMETRY = {
+  CENTER_Y:     170,
+  OUTER_RADIUS: 80,
+} as const;
+
+export const DONUT_GEOMETRY = { ...BASE_GEOMETRY, INNER_RADIUS: 50 } as const;
+export const PIE_GEOMETRY   = { ...BASE_GEOMETRY, INNER_RADIUS: 0  } as const;