@gh-top-languages/lib 1.0.3

package/dist/types.d.ts

@@ -0,0 +1,24 @@
+export type Point = {
+    x: number;
+    y: number;
+};
+export type Language = {
+    lang: string;
+    pct: number;
+};
+export type Geometry = {
+    CENTER_Y: number;
+    INNER_RADIUS: number;
+    OUTER_RADIUS: number;
+};
+export type ChartType = "donut" | "pie";
+export type ChartResult = {
+    segments: string;
+    legend: string;
+};
+export type Theme = {
+    readonly colours: readonly string[];
+    readonly text: string;
+    readonly bg: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAG,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAM,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;AAExC,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAI,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,QAAQ,CAAC,IAAI,EAAK,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,EAAO,MAAM,CAAC;CAC1B,CAAC"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/utils/params.d.ts

@@ -0,0 +1,18 @@
+import type { ChartType } from "../types.js";
+export type QueryParams = Record<string, string | undefined>;
+export declare function parseQueryParams(query: QueryParams): {
+    chartType: ChartType;
+    chartTitle: string;
+    width: number;
+    height: number;
+    count: number;
+    selectedTheme: {
+        bg: "#0d1117" | "#ffffff" | "#1a1a1a";
+        text: string;
+        colours: string[];
+    };
+    stroke: boolean;
+    useTestData: boolean;
+    errorTest: string;
+};
+//# sourceMappingURL=params.d.ts.map

package/dist/utils/params.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"params.d.ts","sourceRoot":"","sources":["../../src/utils/params.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAM7C,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAY7D,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,WAAW;;;;;;;;;;;;;;EA4BlD"}

package/dist/utils/params.js

@@ -0,0 +1,37 @@
+import { sanitize } from "./sanitize.js";
+import { VALID_TYPES } from "../constants/types.js";
+import { DEFAULT_CONFIG } from "../constants/config.js";
+import { THEMES } from "../constants/themes.js";
+const parseIntSafe = (val, fallback) => {
+    const parsed = Number.parseInt(val ?? '', 10);
+    return Number.isNaN(parsed) ? fallback : parsed;
+};
+const normalizeHex = (val) => `#${val.replace(/^#/, '')}`;
+export function parseQueryParams(query) {
+    const baseTheme = THEMES[query["theme"]] ?? THEMES.default;
+    const count = parseIntSafe(query["count"], DEFAULT_CONFIG.COUNT);
+    const customColours = [...baseTheme.colours];
+    for (let i = 1; i <= DEFAULT_CONFIG.MAX_COUNT; i++) {
+        const colourVal = query[`c${i}`];
+        if (colourVal)
+            customColours[i - 1] = normalizeHex(colourVal);
+    }
+    const typeParam = query["type"];
+    const chartType = VALID_TYPES.some(t => t === typeParam) ? typeParam : "donut";
+    return {
+        chartType,
+        chartTitle: query["hide_title"] === "true" ? '' : sanitize(query["title"] ?? DEFAULT_CONFIG.TITLE),
+        width: Math.max(parseIntSafe(query["width"], DEFAULT_CONFIG.WIDTH), DEFAULT_CONFIG.MIN_WIDTH),
+        height: Math.max(parseIntSafe(query["height"], DEFAULT_CONFIG.HEIGHT), DEFAULT_CONFIG.MIN_HEIGHT),
+        count: Math.min(Math.max(count, 1), DEFAULT_CONFIG.MAX_COUNT),
+        selectedTheme: {
+            bg: THEMES[query["bg"]]?.bg ?? (query["bg"] ? normalizeHex(query["bg"]) : baseTheme.bg),
+            text: query["text"] ? normalizeHex(query["text"]) : baseTheme.text,
+            colours: customColours
+        },
+        stroke: query["stroke"] === "true",
+        useTestData: query["test"] === "true",
+        errorTest: sanitize(query["error"] ?? '')
+    };
+}
+//# sourceMappingURL=params.js.map

package/dist/utils/params.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"params.js","sourceRoot":"","sources":["../../src/utils/params.ts"],"names":[],"mappings":"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"}

package/dist/utils/sanitize.d.ts

@@ -0,0 +1,2 @@
+export declare const sanitize: (str: unknown) => string;
+//# sourceMappingURL=sanitize.d.ts.map

package/dist/utils/sanitize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize.d.ts","sourceRoot":"","sources":["../../src/utils/sanitize.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,QAAQ,GAAI,KAAK,OAAO,KAAG,MAKvC,CAAC"}

package/dist/utils/sanitize.js

@@ -0,0 +1,13 @@
+const ESCAPE_MAP = {
+    '<': '&lt;',
+    '>': '&gt;',
+    '&': '&amp;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+export const sanitize = (str) => {
+    if (typeof str !== "string")
+        return '';
+    return str.replace(/[<>&"']/g, (m) => ESCAPE_MAP[m]);
+};
+//# sourceMappingURL=sanitize.js.map

package/dist/utils/sanitize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize.js","sourceRoot":"","sources":["../../src/utils/sanitize.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,GAAG;IACjB,GAAG,EAAE,MAAM;IACX,GAAG,EAAE,MAAM;IACX,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,QAAQ;IACb,GAAG,EAAE,OAAO;CACJ,CAAC;AAEX,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,GAAY,EAAU,EAAE;IAC/C,IAAI,OAAO,GAAG,KAAK,QAAQ;QAAE,OAAO,EAAE,CAAC;IACvC,OAAO,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAS,EAAU,EAAE,CACnD,UAAU,CAAC,CAA4B,CAAC,CACzC,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -0,0 +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"    }
+  }
+}

package/src/charts/donut.ts

@@ -0,0 +1,22 @@
+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 };
+}

package/src/charts/geometry.ts

@@ -0,0 +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('');
+}

package/src/charts/layout.ts

@@ -0,0 +1,19 @@
+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;
+}

package/src/charts/legend.ts

@@ -0,0 +1,53 @@
+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('');
+}

package/src/charts/pie.ts

@@ -0,0 +1,22 @@
+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 };
+}

package/src/constants/config.ts

@@ -0,0 +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;

package/src/constants/geometry.ts

@@ -0,0 +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;

package/src/constants/styles.ts

@@ -0,0 +1,23 @@
+export const TITLE_STYLES = {
+  TEXT_Y:    30,
+  FONT_SIZE: 24
+} as const;
+
+export const LEGEND_STYLES = {
+  START_Y:       80,
+  ROW_HEIGHT:    25,
+  SQUARE_SIZE:   12,
+  SQUARE_RADIUS: 2,
+  FONT_SIZE:     11,
+  WIDTH:         130,
+  COLUMN_WIDTH:  105
+} as const;
+
+export const ERROR_STYLES = {
+  TEXT_Y:    100,
+  FONT_SIZE: 18,
+  COLOUR:    "#ff6b6b"
+} as const;
+
+export const LEGEND_SHIFT_THRESHOLD = 8;
+export const CHART_MARGIN_RIGHT     = 20;

package/src/constants/themes.ts

@@ -0,0 +1,68 @@
+export const THEMES = {
+  default: {
+    bg:   "#0d1117",
+    text: "#ffffff",
+    colours: [
+      "#A8D5Ba",
+      "#FFD6A5",
+      "#FFAAA6",
+      "#D0CFCF",
+      "#CBAACB",
+      "#FFE156",
+      "#96D5E9",
+      "#F3B0C3",
+      "#B4A7D6",
+      "#FFB6B9",
+      "#A3E4D7",
+      "#F8B88B",
+      "#C9E4CA",
+      "#FAD7A0",
+      "#AED6F1",
+      "#D7BDE2"
+    ]
+  },
+  light: {
+    bg:   "#ffffff",
+    text: "#2f2f2f",
+    colours: [
+      "#2ecc71",
+      "#3498db",
+      "#e74c3c",
+      "#f39c12",
+      "#9b59b6",
+      "#1abc9c",
+      "#e67e22",
+      "#34495e",
+      "#16a085",
+      "#c0392b",
+      "#8e44ad",
+      "#27ae60",
+      "#d35400",
+      "#2980b9",
+      "#7f8c8d",
+      "#f1c40f"
+    ]
+  },
+  dark: {
+    bg:   "#1a1a1a",
+    text: "#ccd6f6",
+    colours: [
+      "#ff6b6b",
+      "#4ecdc3",
+      "#45b7d1",
+      "#ffa07a",
+      "#98d8c8",
+      "#f7dc6f",
+      "#bb8fce",
+      "#64ffda",
+      "#85c1e2",
+      "#ff8a80",
+      "#a7ffeb",
+      "#ffd54f",
+      "#ea80fc",
+      "#80d8ff",
+      "#ffab91",
+      "#b9f6ca"
+    ]
+  }
+} as const;

package/src/constants/types.ts

@@ -0,0 +1,4 @@
+export const VALID_TYPES = [
+  "donut",
+  "pie"
+] as const;

package/src/render/chart.ts

@@ -0,0 +1,24 @@
+import type { Language, Theme, ChartType, ChartResult } from "../types.js";
+import { generateDonutChart                           } from "../charts/donut.js";
+import { generatePieChart                             } from "../charts/pie.js";
+
+const CHART_GENERATORS: Record<ChartType, (
+  data:   Language[],
+  theme:  Theme,
+  width:  number,
+  stroke: boolean
+) => ChartResult> = {
+  donut: generateDonutChart,
+  pie:   generatePieChart,
+}
+
+export function generateChartData(
+  data:      Language[],
+  theme:     Theme,
+  chartType: ChartType,
+  width:     number,
+  stroke:    boolean
+): ChartResult {
+  const generator = CHART_GENERATORS[chartType] || CHART_GENERATORS.donut;
+  return generator(data, theme, width, stroke);
+}

package/src/render/error.ts

@@ -0,0 +1,25 @@
+import type { Theme   } from "../types.js";
+import { THEMES       } from "../constants/themes.js";
+import { ERROR_STYLES } from "../constants/styles.js"
+import { sanitize     } from "../utils/sanitize.js";
+
+export function renderError(
+  message:        string,
+  width:          number,
+  height:         number,
+  selectedTheme?: Theme
+): string {
+  const background = selectedTheme?.bg || THEMES.default.bg;
+  const maxLen = 40;
+  const truncated = message.length > maxLen
+    ? sanitize(message.slice(0, maxLen)) + "..."
+    : sanitize(message);
+  return `
+    <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+      <rect width="${width}" height="${height}" fill="${background}" rx="10"/>
+      <text x="${width/2}" y="${ERROR_STYLES.TEXT_Y}" text-anchor="middle" fill="${ERROR_STYLES.COLOUR}" font-family="Arial" font-size="${ERROR_STYLES.FONT_SIZE}">
+        Error: ${truncated}
+      </text>
+    </svg>
+  `.trim();
+}

package/src/render/svg.ts

@@ -0,0 +1,31 @@
+import { TITLE_STYLES } from "../constants/styles.js"
+
+export function renderSvg(
+  width:      number,
+  height:     number,
+  background: string,
+  segments:   string,
+  legend:     string,
+  title:      string | null,
+  textColour: string
+): string {
+  const titleElement = title ? `
+    <text
+      x="${width/2}"
+      y="${TITLE_STYLES.TEXT_Y}"
+      text-anchor="middle" fill="${textColour}"
+      font-family="Arial" font-size="${TITLE_STYLES.FONT_SIZE}"
+    >
+      ${title}
+    </text>
+  ` : '';
+
+  return `
+    <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+      <rect width="${width}" height="${height}" fill="${background}" rx="10"/>
+      ${titleElement}
+      ${segments}
+      ${legend}
+    </svg>
+  `.trim();
+}

package/src/types.ts

@@ -0,0 +1,28 @@
+export type Point = {
+  x: number;
+  y: number;
+};
+
+export type Language = {
+  lang: string;
+  pct:  number;
+};
+
+export type Geometry = {
+  CENTER_Y:     number;
+  INNER_RADIUS: number;
+  OUTER_RADIUS: number;
+};
+
+export type ChartType = "donut" | "pie";
+
+export type ChartResult = {
+  segments: string;
+  legend:   string;
+};
+
+export type Theme = {
+  readonly colours: readonly string[];
+  readonly text:    string;
+  readonly bg:      string;
+};