@gh-top-languages/lib 1.0.3 → 1.0.4

package/src/constants/styles.ts

@@ -1,23 +1,40 @@
-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;
+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,
+  TEXT_GAP:         5,
+  COLUMN_GAP:       15,
+} 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;
+
+export const ARIAL_CHAR_WIDTHS: Record<string, number> = {
+  " ": 278, "!": 278, "#": 556, "%": 889, "+": 584, ".": 278, "-": 333,
+  "0": 556, "1": 556, "2": 556, "3": 556, "4": 556,
+  "5": 556, "6": 556, "7": 556, "8": 556, "9": 556,
+  A: 667, B: 667, C: 722, D: 722, E: 667, F: 611,
+  G: 778, H: 722, I: 278, J: 500, K: 667, L: 556,
+  M: 833, N: 722, O: 778, P: 667, Q: 778, R: 722,
+  S: 667, T: 611, U: 722, V: 667, W: 944, X: 667,
+  Y: 667, Z: 611,
+  a: 556, b: 556, c: 500, d: 556, e: 556, f: 278,
+  g: 556, h: 556, i: 222, j: 222, k: 500, l: 222,
+  m: 833, n: 556, o: 556, p: 556, q: 556, r: 333,
+  s: 500, t: 278, u: 556, v: 500, w: 722, x: 500,
+  y: 500, z: 500
+} as const;
+export const DEFAULT_CHAR_WIDTH = 556;

package/src/constants/themes.ts

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

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

package/src/render/chart.ts

@@ -1,24 +1,22 @@
-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);
-}
+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,
+  stroke: boolean
+) => ChartResult> = {
+  donut: generateDonutChart,
+  pie:   generatePieChart,
+}
+
+export function generateChartData(
+  data:      Language[],
+  theme:     Theme,
+  chartType: ChartType,
+  stroke:    boolean
+): ChartResult {
+  const generator = CHART_GENERATORS[chartType] || CHART_GENERATORS.donut;
+  return generator(data, theme, stroke);
+}

package/src/render/error.ts

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

@@ -1,31 +1,30 @@
-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();
-}
+import { TITLE_STYLES } from "../constants/styles.js"
+import type { ChartResult } from "../types.js";
+
+export function renderSvg(
+  width: number, height: number, background: string,
+  chart: ChartResult, title: string | null, textColour: string
+): string {
+  const titleElement = title ? `
+    <text
+      x="${chart.contentWidth / 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"/>
+      <svg width="${width}" height="${height}"
+           viewBox="0 0 ${chart.contentWidth} ${chart.contentHeight}"
+           preserveAspectRatio="xMidYMid meet">
+        ${titleElement}
+        ${chart.segments}
+        ${chart.legend}
+      </svg>
+    </svg>`.trim();
+}

package/src/types.ts

@@ -1,28 +1,30 @@
-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;
-};
+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;
+  contentWidth:  number;
+  contentHeight: number;
+};
+
+export type Theme = {
+  readonly colours: readonly string[];
+  readonly text:    string;
+  readonly bg:      string;
+};

package/src/utils/params.ts

@@ -1,47 +1,47 @@
-import type { ChartType } from "../types.js";
-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";
-
-export type QueryParams = Record<string, string | undefined>;
-
-const parseIntSafe = (
-  val:      string | undefined,
-  fallback: number
-): number => {
-  const parsed = Number.parseInt(val ?? '', 10);
-  return Number.isNaN(parsed) ? fallback : parsed;
-}
-
-const normalizeHex = (val: string) => `#${val.replace(/^#/, '')}`;
-
-export function parseQueryParams(query: QueryParams) {
-  const baseTheme = THEMES[query["theme"] as keyof typeof THEMES] ?? THEMES.default;
-  const count     = parseIntSafe(query["count"], DEFAULT_CONFIG.COUNT);
-
-  const customColours: string[] = [...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"] as ChartType | undefined;
-  const chartType: 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"] as keyof typeof THEMES]?.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"] ?? '')
-  }
-}
+import type { ChartType } from "../types.js";
+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";
+
+export type QueryParams = Record<string, string | undefined>;
+
+const parseIntSafe = (
+  val:      string | undefined,
+  fallback: number
+): number => {
+  const parsed = Number.parseInt(val ?? '', 10);
+  return Number.isNaN(parsed) ? fallback : parsed;
+}
+
+const normalizeHex = (val: string) => `#${val.replace(/^#/, '')}`;
+
+export function parseQueryParams(query: QueryParams) {
+  const baseTheme = THEMES[query["theme"] as keyof typeof THEMES] ?? THEMES.default;
+  const count     = parseIntSafe(query["count"], DEFAULT_CONFIG.COUNT);
+
+  const customColours: string[] = [...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"] as ChartType | undefined;
+  const chartType: 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"] as keyof typeof THEMES]?.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"] ?? '')
+  }
+}

package/src/utils/sanitize.ts

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