hearald 0.0.1 → 0.0.3

package/src/index.js

@@ -0,0 +1,25 @@
+import log from "./server/logger.js";
+import { eventEndpointMiddleware, shutDown } from "./server/server.js";
+import { createAnalyticsRouter } from "./server/analytics.js";
+
+export default function hearald({
+  logLevel,
+  eventEndpoint: { url = "/e", parseBody } = {},
+  analytics: { enabled: analyticsEnabled = true, statDefinitions } = {},
+} = {}) {
+  if (logLevel) {
+    log.setLogLevel(logLevel);
+  }
+
+  const eventMiddleware = eventEndpointMiddleware({ url, parseBody });
+
+  const analyticsMiddleware = analyticsEnabled
+    ? createAnalyticsRouter({ statDefinitions })
+    : null;
+
+  return {
+    eventMiddleware,
+    analyticsMiddleware,
+    shutDown,
+  };
+}

package/src/public/css/analytics.css

@@ -0,0 +1,381 @@
+:root {
+  --global-max-width: 480px;
+
+  --border-radius: 4px;
+
+  /* Fonts */
+  --font-sans-serif: Raleway, sans-serif;
+
+  /* Colors: start point https://color.adobe.com/Architecture-color-theme-20477657 */
+  --color-black: hsla(214, 94%, 7%, 1);
+  --color-dark: hsla(209, 37%, 18%, 1);
+  --color-mid: hsla(196, 34%, 48%, 1);
+  --color-light: hsla(191, 20%, 68%, 1);
+  --color-accent: hsla(38, 85%, 64%, 1);
+  --color-white: hsla(38, 38%, 90%, 1);
+
+  --color-text: var(--color-white);
+  --color-label: var(--color-light);
+
+  --color-link: var(--color-accent);
+  --color-link-hover: var(--color-light);
+  --color-title: var(--color-accent);
+
+  --color-bg: var(--color-black);
+  --color-menu: var(--color-dark);
+
+  --color-input-bg: var(--color-white);
+  --color-input-text: var(--color-dark);
+
+  --color-button-bg: var(--color-mid);
+  --color-button-bg-hover: var(--color-light);
+  --color-button-text: var(--color-black);
+
+  --color-logo-sign: var(--color-success);
+
+  --color-success: #127d44;
+  --color-error: #ad2e41;
+
+  --animation-plop: plop 300ms ease-out forwards;
+
+  --hero-box-shadow: 0 0 0.75em rgba(0, 0, 0, 0.75);
+
+  --carousel-hover-transition: 80ms ease-out transform;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-text: var(--color-dark);
+    --color-label: hsla(196, 34%, 38%, 1);
+
+    --color-link: var(--color-mid);
+    --color-link-hover: var(--color-light);
+    --color-title: var(--color-dark);
+
+    --color-bg: #fff;
+    --color-menu: #fff;
+
+    --color-input-bg: var(--color-white);
+    --color-input-text: var(--color-dark);
+
+    --color-button-bg: var(--color-mid);
+    --color-button-bg-hover: var(--color-light);
+    --color-button-text: var(--color-black);
+
+    --color-logo-sign: var(--color-success);
+  }
+}
+
+html {
+  height: 100%;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-sans-serif);
+  line-height: 1.6;
+  font-size: 14px;
+  background: var(--color-bg);
+  margin: 0;
+  height: 100%;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+  color: var(--color-text);
+}
+
+/* need this to override the user style sheet in chrome, which has higher
+   specificity than inheriting the font style tag from the body */
+input {
+  font-family: var(--font-sans-serif);
+}
+
+body.lock-zoom {
+  touch-action: none;
+  overscroll-behavior-y: none;
+}
+
+h1 {
+  font-family: var(--font-sans-serif);
+  font-size: 2.5em;
+  margin: 0;
+}
+
+h2 {
+  font-family: var(--font-sans-serif);
+  font-size: 1.5em;
+  margin: 0;
+}
+
+td,
+th {
+  padding: 0 0.5em;
+}
+
+th {
+  text-align: left;
+  font-size: 0.8em;
+}
+
+@media screen and (max-width: 640px) {
+  body {
+    font-size: 12px;
+    font-feature-settings: 'lnum';
+  }
+}
+
+.hidden {
+  display: none !important;
+}
+
+.header__logo,
+.header__button {
+  width: 2rem;
+  height: 2rem;
+  font-size: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  text-decoration: none;
+}
+
+.header__button:hover {
+  text-decoration: none;
+}
+
+.header__button--has-menu {
+  cursor: pointer;
+}
+
+/* ---- */
+
+.analytics__header {
+  grid-area: header;
+  padding: 2em;
+  background-color: var(--color-dark);
+  display: flex;
+  gap: 2em;
+  align-items: center;
+  grid-template-columns: auto auto auto auto 1fr;
+}
+
+.analytics {
+  --analytics-grid-columns: 4;
+
+  display: grid;
+  grid-template-columns: repeat(var(--analytics-grid-columns), 1fr);
+  grid-gap: 0.5em;
+  padding: 1em;
+}
+
+.analytics__title {
+  grid-column: span var(--analytics-grid-columns);
+}
+
+.analytics__tile {
+  display: flex;
+  /* flex: 1fr 5fr; */
+  flex: 1 1 auto;
+  flex-direction: column;
+  border: 1px solid var(--color-accent);
+}
+
+.analytics__tile--end-row {
+  border: 0;
+  grid-column: span var(--analytics-grid-columns);
+}
+
+.analytics__tile__header {
+  padding: 0.2em 0.5em;
+  border-bottom: 1px solid var(--color-accent);
+}
+.analytics__tile__value {
+  padding: 0.2em 0.5em;
+  margin: 0 auto;
+  font-size: 2.5em;
+  font-weight: 600;
+}
+
+.analytics__menu {
+  grid-column: 1 /1;
+  display: flex;
+  gap: 1em;
+  align-items: center;
+}
+
+.analytics__menu > label {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+}
+
+.analytics__menu > button {
+  font-size: 9px;
+  line-height: 9px;
+  height: 18px;
+}
+
+.bar-chart {
+  grid-column: 1/-1;
+  height: 200px;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  grid-template-columns: 1fr;
+  gap: 2px;
+  position: relative;
+  align-items: end;
+  margin-top: 1em;
+  padding: 0 1.5em 0 0;
+  border-bottom: 1px solid var(--color-light);
+}
+.bar-chart__bar {
+  background: var(--color-mid);
+  height: calc(var(--bar-height) * 100%);
+  position: relative;
+}
+.bar-chart__bar__label {
+  display: none;
+  position: absolute;
+  bottom: calc(100% + 0.75em);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  background: var(--color-label);
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+  text-align: center;
+  white-space: nowrap;
+  word-break: keep-all;
+}
+.bar-chart__bar__label:after {
+  content: '';
+  width: 12px;
+  height: 12px;
+  background: var(--color-label);
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transform: translateY(50%) rotate(45deg);
+  z-index: 1;
+}
+.bar-chart__bar:hover {
+  background: var(--color-light);
+}
+.bar-chart__bar:hover > .bar-chart__bar__label {
+  display: block;
+}
+.bar-chart__empty {
+  place-self: center;
+}
+.bar-chart__scale {
+  align-self: start;
+  border-top: 1px solid var(--color-light);
+  border-right: 1px solid var(--color-light);
+  height: 100%;
+  padding-right: 0.2em;
+  text-align: right;
+}
+
+.analytics__tile__histogram {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1em;
+  grid-column: 1/-1;
+  min-height: 10em;
+  max-height: 20em;
+  overflow: auto;
+  align-items: start;
+  grid-auto-rows: max-content;
+  padding: 0.5em 0.5em;
+}
+.analytics__tile__histogram__value {
+  text-align: right;
+}
+.analytics__tile__histogram__row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1/-1;
+  align-self: start;
+}
+.analytics__tile__histogram__label {
+  position: relative;
+  background-image: linear-gradient(
+    to right,
+    var(--color-mid) calc(var(--bar-width) * 100%),
+    transparent calc(var(--bar-width) * 100%)
+  );
+  background-size: 100%;
+  padding: 0 0.5em;
+  min-width: 0;
+  min-height: 0;
+}
+
+.analytics__tile--span-2 {
+  grid-column: span 2;
+}
+
+@media screen and (max-width: 640px) {
+  .analytics {
+    --analytics-grid-columns: 2;
+  }
+
+  .analytics__tile--end-row {
+    display: none !important;
+  }
+
+  .analytics__tile--span-2 {
+    grid-column: span 1;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .analytics {
+    --analytics-grid-columns: 1;
+  }
+
+  .analytics__header__input {
+    width: 35%;
+  }
+
+  .analytics__menu > label {
+    display: grid;
+  }
+
+  .bar-chart {
+    grid-auto-flow: row;
+    height: auto;
+    border-bottom: 0;
+    border-left: 1px solid var(--color-light);
+    padding: 0;
+  }
+  .bar-chart__scale {
+    height: auto;
+    width: 100%;
+    border-top: 0;
+    border-bottom: 1px solid var(--color-light);
+    border-right: 1px solid var(--color-light);
+  }
+  .bar-chart__bar {
+    height: 0.5em;
+    width: calc(var(--bar-height) * 100%);
+  }
+  .bar-chart__bar__label {
+    left: 0.5em;
+    transform: translateX(0);
+  }
+  .bar-chart__bar__label:after {
+    left: 3px;
+    right: auto;
+    bottom: 0;
+    transform: translateY(50%) rotate(45deg);
+  }
+}

package/{public → src/public}/js/.eslintrc

@@ -2,8 +2,5 @@
   "env": {
     "browser": true,
     "es2020": true
-  },
-  "globals": {
-    "INJECTED__DATE": "readonly"
   }
 }

package/{public → src/public}/js/App.js

@@ -8,7 +8,7 @@ import {
   fetchChartData,
   fetchData,
 } from "./util.js";
-import Tile from "./Tile";
+import Tile from "./Tile.js";
 
 const DATE = new Date().toISOString().split("T")[0];
 

package/{public → src/public}/js/index.js

@@ -1,7 +1,5 @@
 import "../css/analytics.css";
 
-console.log("index.js loaded");
-
 import { render, html } from "htm/preact";
 
 import App from "./App";

package/{public → src/public}/js/util.js

@@ -14,7 +14,6 @@ export async function getData({ n, d, q, endpointBuilder, fetchStats }) {
   const endpoint = endpointBuilder
     ? endpointBuilder(n, d, q)
     : `/data/${n}/${d}${q ? "?" + q : ""}`;
-  console.log("endpoint", endpoint);
 
   const data = await fetchStats(endpoint);
   dataCache[key] = data;

package/{server → src/server}/analytics.js

@@ -4,6 +4,7 @@ import path from "path";
 import { fileURLToPath } from "url";
 import { readFile, writeFile } from "fs/promises";
 import express from "express";
+import log from "./logger.js";
 import {
   omitProperties,
   iso,
@@ -234,13 +235,13 @@ export async function handleAnalyticsDataRequest({
   }
   const dataFromFile = await readMetricsFromCache(endDateIso, timeWindow);
   if (dataFromFile) {
-    console.log(
+    log.info(
       `Analytics for ${timeWindow} days ending on ${endDateIso} returned from cache`
     );
     response.status(200).type("application/json").send(dataFromFile);
     return;
   }
-  console.log(
+  log.info(
     `Analytics for ${timeWindow} days ending on ${endDateIso} computing from events`
   );
   try {
@@ -256,7 +257,7 @@ export async function handleAnalyticsDataRequest({
     );
     response.status(200).type("application/json").send(JSON.stringify(stats));
   } catch (e) {
-    console.error("failed to compute analytics", e);
+    log.error("failed to compute analytics", e);
     response
       .status(500)
       .type("application/json")
@@ -267,22 +268,15 @@ export async function handleAnalyticsDataRequest({
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-console.log("filename is", __filename);
-console.log("dirname is", __dirname);
+log.info("filename is", __filename);
+log.info("dirname is", __dirname);
 
-export function createAnalyticsRouter({
-  statDefinitions,
-  loadEventsOverWindow,
-  templateReplaceMany,
-  analyticsHtmlPath,
-  enableLiveReload,
-  environment,
-}) {
-  console.log("statManifest", statDefinitions);
+export function createAnalyticsRouter({ statDefinitions }) {
+  log.info("statManifest", statDefinitions);
   const router = express.Router();
 
   router.get(`/data/:last/:date?`, async (request, response) => {
-    console.log(chalk.cyan("[API] GET /analytics/data/:last/:date?"));
+    log.info(chalk.cyan("[API] GET /analytics/data/:last/:date?"));
     await handleAnalyticsDataRequest({
       request,
       response,
@@ -297,23 +291,10 @@ export function createAnalyticsRouter({
   });
 
   router.get(`/`, async (request, response) => {
-    console.log(chalk.cyan("[Render] views/analytics.html loading"));
-    console.log(path.join(__dirname, "..", "dist", "analytics.html"));
     const fileContents = await readFile(
-      path.join(__dirname, "..", "dist", "analytics.html")
+      path.join(__dirname, "..", "..", "dist", "analytics.html")
     );
-    const analyticsHtmlRaw = fileContents.toString("utf-8");
-    console.log("analyticsHtmlRaw", analyticsHtmlRaw);
-    const yesterday = nowAsPstDate();
-    yesterday.setDate(yesterday.getDate() - 1);
-    const analyticsHtml = templateReplaceMany(analyticsHtmlRaw, {
-      date: yesterday.toISOString().split("T")[0],
-      devHeadExtras:
-        environment === "development" && enableLiveReload
-          ? '<script src="/liveReloading.js"></script>'
-          : "",
-    });
-    console.log("analyticsHtml", analyticsHtml);
+    const analyticsHtml = fileContents.toString("utf-8");
     response.send(analyticsHtml);
   });
 

package/src/server/logger.js

@@ -0,0 +1,33 @@
+class Logger {
+  constructor(level) {
+    this.level = level || "info";
+  }
+
+  setLogLevel(level) {
+    this.level = level;
+  }
+
+  debug(...args) {
+    if (this.level === "debug") {
+      console.log("[DEBUG]", ...args);
+    }
+  }
+
+  info(...args) {
+    if (this.level === "debug" || this.level === "info") {
+      console.log("[INFO]", ...args);
+    }
+  }
+
+  warn(...args) {
+    if (this.level !== "error") {
+      console.warn("[WARN]", ...args);
+    }
+  }
+
+  error(...args) {
+    console.error("[ERROR]", ...args);
+  }
+}
+
+export default new Logger("error");

package/{server → src/server}/server.js

@@ -1,5 +1,6 @@
 // Express middleware for hearald event tracking
 import express from "express";
+import log from "./logger.js";
 import { nowAsPstDate } from "../shared/utils.js";
 import { writeEvent, closeEventFiles } from "./serverEvents.js";
 import { createAnalyticsRouter } from "./analytics.js";
@@ -19,7 +20,7 @@ export async function shutDown() {
  * @param {function} [options.parseBody] - Custom request body parser (req => {e, u, p}).
  * @returns {function} Express middleware
  */
-export function createHearaldMiddleware({ url = "/e", parseBody } = {}) {
+export function eventEndpointMiddleware({ url = "/e", parseBody } = {}) {
   const router = express.Router();
   router.post(url, async (req, res) => {
     try {
@@ -35,14 +36,9 @@ export function createHearaldMiddleware({ url = "/e", parseBody } = {}) {
       await logEvent(nowAsPstDate(), { e, u, p });
     } catch (err) {
       // eslint-disable-next-line no-console
-      console.error("error writing event to event log", err);
+      log.error("error writing event to event log", err);
     }
     res.status(204).send();
   });
   return router;
 }
-
-export function createHearaldAnalyticsRouter(options = {}) {
-  // Pass statManifest to the analytics router so /analytics/layout.json is available
-  return createAnalyticsRouter({ ...options });
-}

package/{server → src/server}/serverEvents.js

@@ -1,5 +1,6 @@
 import { readFile, open as openFile, mkdir } from "fs/promises";
 
+import log from "./logger.js";
 import { iso } from "../shared/utils.js";
 
 const eventFilePromises = new Map();
@@ -81,10 +82,10 @@ export const readEventsFromFile = async (fileName) => {
   } catch (e) {
     if (e.message && e.message.indexOf("ENOENT") !== -1) {
       // eslint-disable-next-line no-console
-      console.warn(`file not found: events/${fileName}.log`);
+      log.warn(`file not found: events/${fileName}.log`);
     } else {
       // eslint-disable-next-line no-console
-      console.error(e);
+      log.error(e);
     }
     return [];
   }

package/shared/events.js

@@ -1,44 +0,0 @@
-// Usage:
-// 1. Register custom events with a schema
-// 2. Emit custom events by name
-
-import { EventBus } from "bussin-js";
-
-// Shared event bus for all tracking events
-export const eventBus = new EventBus([]);
-
-const registeredEvents = {};
-
-/**
- * Registers a custom event type and its schema.
- * @param {string} eventName - The name of the event.
- * @param {object} schema - The schema definition for the event payload.
- */
-export function registerEvent(eventName, schema) {
-  // Prevent duplicate registration
-  if (registeredEvents[eventName]) return;
-  registeredEvents[eventName] = schema;
-  // Add the event type to the tracking event bus if not already present
-  if (!eventBus.hasType(eventName)) {
-    eventBus.addType(eventName);
-  }
-}
-
-/**
- * Emits a custom event if registered and payload matches schema.
- * @param {string} eventName - The name of the event to emit.
- * @param {object} payload - The event payload.
- * @returns {boolean} - True if emitted, false if not registered or invalid payload.
- */
-export function emitEvent(eventName, payload) {
-  const schema = registeredEvents[eventName];
-  if (!schema) return false;
-  // Simple schema validation: check required keys and types
-  for (const key in schema) {
-    if (!(key in payload)) return false;
-    if (typeof payload[key] !== schema[key]) return false;
-  }
-  // Emit on the shared tracking event bus
-  eventBus.emit(eventName, payload);
-  return true;
-}