Push master to prod (#54)

* Satisfy minimum requirements for full typescript project (#37)

* Feature: satisfy minimum for full typescript

* Feature: change report structure from array to object

* Chore: jsdoc

* Refactor: PR review suggestions

* Refactor: type out simple reports

* Refactor: rename variables

* Refactor: more types for now some logic errors

* Chore: docs

* Fix: type -> interface

* Chore: comments

* Type refactor

* Improve report to discord message

* Make it optional

* Improve discord message creation

* renames

* Record to index

* Refactor: Add additional type safety, refactor structure and naming, jsdocs (#38)

* Feature: satisfy minimum for full typescript

* Feature: change report structure from array to object

* Chore: jsdoc

* Feature: add additional types, jsdocs

* Remove unnecessary error typing

* Feature: type some more

* Chore: typo fix

* Chore: rename chart func, jsdocs improvements

* Feature: add docs, fix types

* Feature: remove all implicit any types

* Refactor: types to interfaces as default

* Refactor: PR review suggestions

* Refactor: type out simple reports

* Refactor: rename variables

* Refactor: more types for now some logic errors

* Chore: docs

* Fix: type -> interface

* Chore: remove unnecessary async

* Chore: remove unnecessary jsdoc

* Chore: comments

* Feature: table improvements

* Refactor: naming

* Type refactor

* Improve report to discord message

* Make it optional

* Improve discord message creation

* Some typing

* jsdocs type

* strict tsconfig + miho improvements

* Move default value to inisde of function

* Remove comments

* missing types + comments

* improve `loadCachedEvents` logic

* remove rendundant satisfies

* remove Array for []

* renames + types

* makes quotes consistent

* fix filter error

* remove custom intersection impl

* head has extra "" not needing extra "right" because of it

* typo

* move constants

* Chore: Update easy to update packages (#47)

* update easy to update packages

* return axios whoops

* Setup dotenv to work on wasp-bot (#48)

* vault

* vault 2

* spaces

* Refactor: Improve Ignore files, rename example file (#50)

* add comments

* docker ignore update

* update

* test

* typo

* example docker ignroe changes

* comments

* update

* update comments

* Refactor discord bot logic into multiple files (#45)

* split single file

* awaits and types

* unnecessary memeber

* comments -> functions

* name, structyure

* functions

* de-modularaize a bit

* comment

* login last

* analytics

* quote

* type external quote

* imports

* handlers, remove role id from channel ids

* refactors

* server ids

* refacotr

* refactor 2

* update help

* revert

* Update src/discord/bot/analytics/daily-report.ts

Co-authored-by: Martin Šošić <Martinsos@users.noreply.github.com>

* naming

* commands

* fix regex dep

* extract prefix instead

* improve naming

---------

Co-authored-by: Martin Šošić <Martinsos@users.noreply.github.com>

* Cohort retention charts + POC of rendering charts on node and send them as attachment (#49)

* chart work

* better colors and visualization

* logic cleanup

* imports

* new colors

* updates

* remove jsdocs extras

* comments

* refactor

* docs

* make return type work correctly

* remove old discord bot file

* Fix font issues, cross platfrom Dockerfile, no events cache crash, add buffer charts CLI display (#53)

* make Dockerfile cross-platform, handle no file error

* and cli charts, fix cohort retention, add types

* fonts

* console to logger

* console -> logger

* fonts fixes

* cover fonts

* fix

* fix fonts

* yupe

* pr review

* comments

* loadsh

* fonts update

* Delete pnpm-lock.yaml

* remove logs

* jsdocs

* naming

* naming

* tone down jsdocs, naming fix

* easier read

* make font file name parsing easier

* Update Dockerfile

Co-authored-by: Martin Šošić <Martinsos@users.noreply.github.com>

* extra comment line

* Update Dockerfile

Co-authored-by: Martin Šošić <Martinsos@users.noreply.github.com>

---------

Co-authored-by: Martin Šošić <Martinsos@users.noreply.github.com>

* remove old code (#55)

---------

Co-authored-by: Martin Šošić <Martinsos@users.noreply.github.com>

Author: FranjoMindek

Dockerfile

@@ -2,6 +2,12 @@ FROM node:22-slim AS builder
 
 WORKDIR /app
 
+RUN apt-get update -qq && \
+  # Install dependencies for building native node modules (added by fly.io by default).
+  apt-get install --no-install-recommends -y build-essential node-gyp pkg-config python-is-python3 \
+  # Install dependencies for node-canvas (used by chartjs-node-canvas).
+  libcairo2-dev libpango1.0-dev
+
 # Copy package files
 COPY package*.json ./
 

fonts/IBMPlexSans/IBMPlexSans-Bold.ttf

@@ -1,8 +1,11 @@
+import fs from "fs";
+import os from "os";
 import logger from "../utils/logger";
 import { getAnalyticsErrorMessage } from "./errors";
 import * as reports from "./reports";
 import {
   AllTimePeriodReport,
+  ChartReport,
   ImageChartsReport,
   TextReport,
 } from "./reports/reports";
@@ -28,6 +31,43 @@ async function cliReport(): Promise<void> {
   );
 }
 
+function printReportTitle(text: string): void {
+  console.log(`\x1b[33m \n\n${text} \x1b[0m`);
+}
+
+function printReportInCLI(compositeReport: {
+  [reportName: string]: Partial<TextReport & ImageChartsReport & ChartReport>;
+}): void {
+  for (const [name, simpleReport] of Object.entries(compositeReport)) {
+    console.log();
+    if (simpleReport.text) {
+      for (const textLine of simpleReport.text) {
+        console.log(textLine);
+      }
+    }
+    if (simpleReport.imageChartsChart) {
+      console.log(
+        "- ImagesCharts Chart: ",
+        simpleReport.imageChartsChart.toURL(),
+      );
+    }
+    if (simpleReport.bufferChart) {
+      const filePath = createTmpImageFile(name, simpleReport.bufferChart);
+      console.log("- Buffer Chart: ", filePath);
+    }
+  }
+}
+
+function createTmpImageFile(name: string, buffer: Buffer): string {
+  const tempDir = os.tmpdir();
+  const fileName = `${name}-${Date.now()}.png`;
+  const filePath = `${tempDir}/${fileName}`;
+
+  fs.writeFileSync(filePath, buffer);
+
+  return filePath;
+}
+
 /**
  * Outputs CSV of total metrics since the start of tracking them,
  * while skipping cohort analytis because that would be too complex.
@@ -50,26 +90,6 @@ function printAllTimeMonthlyReportCsvInCLI(
   }
 }
 
-function printReportInCLI(
-  compositeReport: Record<string, Partial<TextReport & ImageChartsReport>>,
-): void {
-  for (const simpleReport of Object.values(compositeReport)) {
-    console.log();
-    if (simpleReport.text) {
-      for (const textLine of simpleReport.text) {
-        console.log(textLine);
-      }
-    }
-    if (simpleReport.imageChartsChart) {
-      console.log("- Chart: ", simpleReport.imageChartsChart.toURL());
-    }
-  }
-}
-
-function printReportTitle(text: string): void {
-  console.log(`\x1b[33m \n\n${text} \x1b[0m`);
-}
-
 cliReport().catch((e) => {
   const message = getAnalyticsErrorMessage(e);
   logger.error(message);

fonts/IBMPlexSans/IBMPlexSans-BoldItalic.ttf

@@ -2,6 +2,7 @@ import retry from "async-retry";
 import axios from "axios";
 import { config as dotenvConfig } from "dotenv";
 import { promises as fs } from "fs";
+import logger from "../utils/logger";
 import moment from "./moment";
 
 dotenvConfig();
@@ -43,7 +44,7 @@ export async function tryToFetchAllCliEvents(): Promise<PosthogEvent[]> {
       minTimeout: 5 * 1000,
       maxTimeout: 120 * 1000,
       onRetry: (e: Error) => {
-        console.error(
+        logger.error(
           "Error happened while fetching events for report generator, trying again:",
           e.message ?? e,
         );
@@ -53,18 +54,18 @@ export async function tryToFetchAllCliEvents(): Promise<PosthogEvent[]> {
 }
 
 async function fetchAllCliEvents(): Promise<PosthogEvent[]> {
-  console.log("Fetching all CLI events...");
+  logger.info("Fetching all CLI events...");
 
   const cachedEvents = await loadCachedEvents();
-  console.log("Number of already locally cached events: ", cachedEvents.length);
+  logger.info("Number of already locally cached events: ", cachedEvents.length);
 
   let events = cachedEvents;
 
   // We fetch any events older than the currently oldest event we already have.
   // If we have no events already, we just start from the newest ones.
   // They are fetched starting with the newest ones and going backwards.
   // We keep fetching them and adding them to the cache as we go, until there are none left.
-  console.log("Fetching events older than the cache...");
+  logger.info("Fetching events older than the cache...");
   let allOldEventsFetched = false;
   while (!allOldEventsFetched) {
     const { isThereMore, events: fetchedEvents } = await fetchEvents({
@@ -79,7 +80,7 @@ async function fetchAllCliEvents(): Promise<PosthogEvent[]> {
   // We fetch any events newer than the currently newest event we already have.
   // They are fetched starting with the newest ones and going backwards.
   // Only once we fetch all of them, we add them to the cache. This is done to guarantee continuity of cached events.
-  console.log("Fetching events newer than the cache...");
+  logger.info("Fetching events newer than the cache...");
   let newEvents: PosthogEvent[] = [];
   let allNewEventsFetched = false;
   while (!allNewEventsFetched) {
@@ -109,7 +110,7 @@ async function fetchAllCliEvents(): Promise<PosthogEvent[]> {
     );
   }
 
-  console.log("All events fetched!");
+  logger.info("All events fetched!");
   return events;
 }
 
@@ -149,7 +150,7 @@ async function fetchEvents({
     params,
   ).toString()}`;
 
-  console.log(`Fetching: ${url}`);
+  logger.info(`Fetching: ${url}`);
   const response = await axios.get(url, {
     headers: {
       Authorization: `Bearer ${POSTHOG_KEY}`,
@@ -173,10 +174,11 @@ async function fetchEvents({
  *   - There might be missing events before or after the cached range
  */
 async function loadCachedEvents(): Promise<PosthogEvent[]> {
-  const cacheFileContent = await fs.readFile(CACHE_FILE_PATH, "utf-8");
-  if (cacheFileContent !== "") {
+  try {
+    const cacheFileContent = await fs.readFile(CACHE_FILE_PATH, "utf-8");
     return JSON.parse(cacheFileContent);
-  } else {
+  } catch (e: unknown) {
+    logger.warning(`Failed to read cache file: ${e}`);
     return [];
   }
 }

fonts/IBMPlexSans/IBMPlexSans-ExtraLight.ttf

@@ -1,5 +1,6 @@
 import _ from "lodash";
 
+import logger from "../../utils/logger";
 import { addEventContextValueIfMissing } from "../eventContext";
 import { type PosthogEvent, tryToFetchAllCliEvents } from "../events";
 import { executionEnvs } from "../executionEnvs";
@@ -12,7 +13,7 @@ import moment from "../moment";
 export async function fetchEventsForReportGenerator(): Promise<PosthogEvent[]> {
   const allEvents = await tryToFetchAllCliEvents();
 
-  console.log("\nNumber of CLI events fetched:", allEvents.length);
+  logger.info("\nNumber of CLI events fetched:", allEvents.length);
 
   const waspTeamFilters = [isNotWaspTeamEvent, isNotMihoPrivateCIServerEvent];
   const nonWaspTeamEvents = waspTeamFilters.reduce(

fonts/IBMPlexSans/IBMPlexSans-ExtraLightItalic.ttf

@@ -208,6 +208,8 @@ async function createCohortRetentionHeatMap(
     },
     borderColor: "rgba(0, 0, 0, 0.1)",
     borderWidth: 1,
+    anchorY: "top",
+    anchorX: "left",
   };
 
   const chartConfiguration: ChartConfiguration<
@@ -224,38 +226,38 @@ async function createCohortRetentionHeatMap(
         x: {
           type: "linear",
           min: 0,
-          max: periods.length - 1,
+          max: periods.length,
           ticks: {
             stepSize: 1,
             callback: (value) => `+${value}`,
-            font: { size: 12 },
+            font: { size: 12, weight: 500 },
           },
-          offset: true,
+          offset: false,
           title: {
             display: true,
             text: `Cohort Progression (per ${periodName})`,
             font: {
               size: 14,
-              weight: "bold",
+              weight: 700,
             },
           },
         },
         y: {
           type: "linear",
           min: 0,
-          max: cohorts.length - 1,
+          max: cohorts.length,
           ticks: {
             stepSize: 1,
             callback: (value) => `#${value}`,
-            font: { size: 12 },
+            font: { size: 12, weight: 500 },
           },
-          offset: true,
+          offset: false,
           title: {
             display: true,
             text: "Cohort Start",
             font: {
               size: 14,
-              weight: "bold",
+              weight: 700,
             },
           },
         },
@@ -270,7 +272,7 @@ async function createCohortRetentionHeatMap(
           align: "center",
           font: {
             size: 20,
-            weight: "bold",
+            weight: 700,
           },
           padding: {
             top: 10,
@@ -325,7 +327,7 @@ const cohortRetentionChartCellLabels: Plugin<"matrix"> = {
         canvasContext.save();
         canvasContext.fillStyle =
           getFontColorForBackgroundColor(backgroundColor);
-        canvasContext.font = "12px sans-serif";
+        canvasContext.font = "12px";
         canvasContext.textAlign = "center";
         canvasContext.textBaseline = "middle";
         canvasContext.fillText(label, x + width / 2, y + height / 2);

fonts/IBMPlexSans/IBMPlexSans-Italic.ttf

@@ -0,0 +1,115 @@
+import { registerFont } from "canvas";
+import * as fs from "fs";
+import * as path from "path";
+
+export const defaultFont = "IBMPlexSans";
+const fontFileExtensions = [".ttf", ".otf", ".woff", ".woff2"];
+
+/**
+ * Registers embedded fonts for use with `node-canvas`.
+ *
+ * Embedded fonts are fonts that we bundle together with the application.
+ * They can be found in the [`/fonts` directory](../../../fonts).
+ *
+ * These fonts are available in addition to the system fonts.
+ * We use embedded fonts instead of system fonts to ensure consistent, predictable rendering
+ * across all environments (e.g., Docker, CI, Linux, macOS, Windows).
+ */
+export function registerEmbeddedFonts(): void {
+  const fontsDir = path.resolve(__dirname, "../../../fonts");
+  registerFontsFromDir(fontsDir);
+}
+
+/**
+ * Registers all supported font files from a given absolute directory path
+ * for use with `node-canvas`.
+ *
+ * Only static fonts are supported. Variable fonts (e.g., `.ttf` files with multiple weight/width axes)
+ * are not usable with `node-canvas` and will be ignored or may cause unexpected behavior.
+ */
+function registerFontsFromDir(absDirPath: string): void {
+  for (const absFontPath of collectAbsFontPathsRecursively(absDirPath)) {
+    const fileName = path.basename(absFontPath);
+    const fontFace = parseFontFileName(fileName);
+
+    registerFont(absFontPath, fontFace);
+  }
+}
+
+/**
+ * Recursively collects absolute path of all font files from a directory.
+ */
+function collectAbsFontPathsRecursively(absDirPath: string): string[] {
+  return fs
+    .readdirSync(absDirPath, {
+      recursive: true,
+      encoding: "utf8",
+    })
+    .map((fileName) => path.join(absDirPath, fileName))
+    .filter((fileName) =>
+      fontFileExtensions.some((ext) => fileName.endsWith(ext)),
+    );
+}
+
+interface FontFace {
+  family: string;
+  weight: string;
+  style: string;
+}
+
+/**
+ * Parses a font file name to extract the font face information.
+ *
+ * The expected format is: `FontFamily-FontStyle.ext`
+ * For example: `IBMPlexSans-Regular.ttf` or `IBMPlexSans-BoldItalic.otf`.
+ *
+ * This format is known as the "Weight-Stretch-Slope" (WWS) naming model.
+ * It is also known as "Weight-Width-Slope" format.
+ * However, the format is not universal, but widely accepted standard.
+ *
+ * Currently as `node-canvas` doesn't support stretch,
+ * so we also don't include it in the parsing.
+ *
+ * @throws {Error} If the font style is not recognized.
+ */
+function parseFontFileName(fileName: string): FontFace {
+  const stem = fileName.split(".")[0];
+  const [family, style] = stem.split("-");
+
+  const fontAttributes = fontStyleToFontAttributes[style];
+  if (!fontAttributes) {
+    throw new Error(
+      `Font style "${style}" is not recognized. Supported font styles are: ${Object.keys(
+        fontStyleToFontAttributes,
+      ).join(", ")}`,
+    );
+  }
+
+  return {
+    family,
+    ...fontAttributes,
+  };
+}
+
+const fontStyleToFontAttributes: {
+  [fontStyle: string]: Omit<FontFace, "family">;
+} = {
+  Thin: { weight: "100", style: "normal" },
+  ThinItalic: { weight: "100", style: "italic" },
+  ExtraLight: { weight: "200", style: "normal" },
+  ExtraLightItalic: { weight: "200", style: "italic" },
+  Light: { weight: "300", style: "normal" },
+  LightItalic: { weight: "300", style: "italic" },
+  Regular: { weight: "normal", style: "normal" },
+  Italic: { weight: "normal", style: "italic" },
+  Medium: { weight: "500", style: "normal" },
+  MediumItalic: { weight: "500", style: "italic" },
+  SemiBold: { weight: "600", style: "normal" },
+  SemiBoldItalic: { weight: "600", style: "italic" },
+  Bold: { weight: "bold", style: "normal" },
+  BoldItalic: { weight: "bold", style: "italic" },
+  ExtraBold: { weight: "800", style: "normal" },
+  ExtraBoldItalic: { weight: "800", style: "italic" },
+  Black: { weight: "900", style: "normal" },
+  BlackItalic: { weight: "900", style: "italic" },
+};