hearald 0.0.1

package/public/js/App.js

@@ -0,0 +1,321 @@
+import { html, Component } from "htm/preact";
+
+import {
+  getJson,
+  deepGet,
+  numFormatter,
+  getData,
+  fetchChartData,
+  fetchData,
+} from "./util.js";
+import Tile from "./Tile";
+
+const DATE = new Date().toISOString().split("T")[0];
+
+const Logo = () => html`
+  <svg
+    width="256"
+    height="256"
+    viewBox="0 0 256 256"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-labelledby="title desc"
+  >
+    <title id="title">Hearald</title>
+    <desc id="desc">
+      Circular seal with a centered Gothic-style H monogram.
+    </desc>
+
+    <style>
+      .stroke {
+        stroke: white;
+        stroke-width: 8;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        fill: none;
+      }
+      .fill {
+        fill: #127d44;
+      }
+    </style>
+
+    <!-- Outer seal circle -->
+    <circle class="stroke" cx="128" cy="128" r="112" />
+
+    <!-- Inner decorative circle -->
+    <circle class="stroke" cx="128" cy="128" r="96" stroke-dasharray="14 10" />
+
+    <!-- Gothic-style H (stylized manually) -->
+    <g transform="translate(78,72)">
+      <!-- Left vertical stroke with spiked top/bottom -->
+      <path class="fill" d="M8 0 L20 0 L20 112 L8 112 L0 100 L0 12 Z" />
+      <!-- Right vertical stroke with spiked top/bottom -->
+      <path class="fill" d="M80 0 L92 0 L100 12 L100 100 L92 112 L80 112 Z" />
+      <!-- Crossbar with gothic curve -->
+      <path class="fill" d="M20 48 H80 V64 H20 Z" />
+      <!-- Decorative inward serifs -->
+      <path class="fill" d="M20 0 q10 8 0 16 Z" />
+      <path class="fill" d="M80 0 q-10 8 0 16 Z" />
+      <path class="fill" d="M20 96 q10 8 0 16 Z" />
+      <path class="fill" d="M80 96 q-10 8 0 16 Z" />
+    </g>
+  </svg>
+`;
+
+const getDataFn = ({ n, d, q }) =>
+  getData({
+    n,
+    d,
+    q,
+    endpointBuilder: (n, d, q) => {
+      return `${window.location.pathname.replace(/\/$/, "")}/data/${n}/${d}${
+        q ? "?" + q : ""
+      }`;
+    },
+    fetchStats: getJson,
+  });
+
+let UI = [];
+
+async function fetchUI() {
+  try {
+    const res = await fetch(window.location.href + "/layout");
+    UI = await res.json();
+  } catch (e) {
+    UI = [];
+  }
+}
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      numDays: 30,
+      date: DATE,
+      chartField: "users",
+      chartContext: "all",
+      uiSectionsLoaded: false,
+    };
+  }
+
+  async componentDidMount() {
+    await fetchUI();
+    this.setState({ uiSectionsLoaded: true });
+    fetchData({
+      numDays: this.state.numDays,
+      date: this.state.date,
+      getDataFn,
+      onLoadComplete: (stats) => this.setState({ stats }),
+    });
+    fetchChartData({
+      numDays: this.state.numDays,
+      date: this.state.date,
+      chartContext: this.state.chartContext,
+      chartField: this.state.chartField,
+      getDataFn,
+      onLoadProgress: (i, n) => {
+        this.setState({ chartData: { loading: { max: n, value: i } } });
+      },
+      onLoadComplete: (data, max) => {
+        this.setState({ chartData: { loading: false, data, max } });
+      },
+    });
+  }
+
+  async fetchChartData({ numDays, date, chartContext, chartField }) {
+    await fetchChartData({
+      numDays: numDays || this.state.numDays,
+      date: date || this.state.date,
+      chartContext: chartContext || this.state.chartContext,
+      chartField: chartField || this.state.chartField,
+      getDataFn,
+      onLoadProgress: (i, n) =>
+        this.setState({ chartData: { loading: { max: n, value: i } } }),
+      onLoadComplete: (data, max) =>
+        this.setState({ chartData: { loading: false, data, max } }),
+    });
+  }
+
+  async fetchData({ numDays, date }) {
+    await fetchData({
+      numDays: numDays || this.state.numDays,
+      date: date || this.state.date,
+      getDataFn,
+      onLoadComplete: (stats) => this.setState({ stats }),
+    });
+  }
+
+  changeNumDays(e) {
+    const numDays = e.target.value;
+    this.setState({ numDays });
+    this.fetchData({ numDays });
+    this.fetchChartData({ numDays });
+  }
+
+  changeDate(e) {
+    const date = e.target.value;
+    this.setState({ date });
+    this.fetchData({ date });
+    this.fetchChartData({ date });
+  }
+
+  changeChartField(e) {
+    const chartField = e.target.value;
+    this.setState({ chartField });
+    this.fetchChartData({ chartField });
+  }
+
+  changeChartContext(e) {
+    const chartContext = e.target.value;
+    this.setState({ chartContext });
+    this.fetchChartData({ chartContext });
+  }
+
+  render(
+    _props,
+    {
+      chartField,
+      chartContext,
+      numDays,
+      date,
+      stats = null,
+      chartData = null,
+      uiSectionsLoaded,
+    }
+  ) {
+    return html`
+      <div id="analytics">
+        <div class="analytics__header">
+          <div class="header__logo">
+            <${Logo} />
+          </div>
+          <span>Hearald</span>
+          <input
+            type="text"
+            class="analytics__header__input"
+            onchange=${(e) => this.changeNumDays(e)}
+            value=${numDays}
+          />
+          <input
+            type="text"
+            class="analytics__header__input"
+            onchange=${(e) => this.changeDate(e)}
+            value=${date}
+          />
+        </div>
+        ${!uiSectionsLoaded || !stats || !stats.metrics
+          ? html` <div><section class="analytics">Loading...</section></div> `
+          : html`
+              <div>
+                <section class="analytics analytics--chart">
+                  <form
+                    class="analytics__menu"
+                    onsubmit=${(e) => e.preventDefault()}
+                  >
+                    <label>
+                      Context
+                      <select
+                        name="context"
+                        onchange=${(e) => this.changeChartContext(e)}
+                      >
+                        ${UI.chartContexts.map(
+                          ({ id, menuName }) =>
+                            html`
+                              <option
+                                value="${id}"
+                                selected=${chartContext === id}
+                              >
+                                ${menuName}
+                              </option>
+                            `
+                        )}
+                      </select>
+                    </label>
+                    <label>
+                      Field
+                      <select
+                        name="field"
+                        onchange=${(e) => this.changeChartField(e)}
+                      >
+                        ${stats?.metrics?.all
+                          ? Object.keys(stats.metrics.all).map(
+                              (f) =>
+                                html`
+                                  <option
+                                    value="${f}"
+                                    selected=${chartField === f}
+                                  >
+                                    ${f}
+                                  </option>
+                                `
+                            )
+                          : ""}
+                      </select>
+                    </label>
+                  </form>
+                  <div class="bar-chart">
+                    ${!chartData &&
+                    html` <span class="bar-chart__empty">no data</span> `}
+                    ${chartData &&
+                    chartData.loading &&
+                    html`
+                      <progress
+                        class="bar-chart__empty"
+                        max=${chartData.loading.max}
+                        value=${chartData.loading.value}
+                      ></progress>
+                    `}
+                    ${chartData &&
+                    !chartData.loading &&
+                    html`
+                      <div class="bar-chart__scale">${chartData.max}</div>
+                      ${chartData.data.map(
+                        (v) =>
+                          html`
+                            <div
+                              class="bar-chart__bar"
+                              style="--bar-height:${v.value / chartData.max}"
+                            >
+                              <div class="bar-chart__bar__label">
+                                ${v.date}
+                                <br />
+                                <b>${numFormatter(v.value)}</b>
+                              </div>
+                            </div>
+                          `
+                      )}
+                    `}
+                  </div>
+                </section>
+                ${UI.sections.map((statsSection) => {
+                  return html`
+                    <section class="analytics analytics--${statsSection.id}">
+                      ${statsSection.menuName !== "" &&
+                      html`
+                        <h2 class="analytics__title">
+                          ${statsSection.menuName}
+                        </h2>
+                      `}
+                      ${statsSection.stats.map((f) => {
+                        return html`
+                          <${Tile}
+                            title="${f.label}"
+                            type="${f.type}"
+                            value=${deepGet(stats.metrics, f.key)}
+                            span=${f.span || null}
+                            ${f.type === "percent" ? "percent" : ""}
+                            ${f.type === "histogram" ? "histogram" : ""}
+                          />
+                        `;
+                      })}
+                    </section>
+                  `;
+                })}
+              </div>
+            `}
+      </div>
+    `;
+  }
+}
+
+export default App;

package/public/js/Tile.js

@@ -0,0 +1,112 @@
+import { html, Component } from "htm/preact";
+
+const prettyNumericFormatter = (val) => {
+  const digits = Math.log10(val);
+  let truncDigits = 0;
+  let decimalPlaces = 0;
+  let suffix = "";
+  if (digits > 8) {
+    truncDigits = 9;
+    suffix = "b";
+    decimalPlaces = 2;
+  } else if (digits > 5) {
+    truncDigits = 6;
+    suffix = "m";
+    decimalPlaces = 2;
+  } else if (digits > 3) {
+    truncDigits = 3;
+    suffix = "k";
+    decimalPlaces = 2;
+  }
+
+  const numeric = Math.floor(val / 10 ** truncDigits);
+  if (decimalPlaces) {
+    const fractional =
+      (val % 10 ** decimalPlaces) % 10 ** (truncDigits - decimalPlaces);
+    return `${numeric}.${fractional}${suffix}`;
+  } else {
+    return `${numeric}${suffix}`;
+  }
+};
+
+const percentFormatter = (val) =>
+  `${(Math.round(val * 100) / 100).toFixed(2)}%`;
+
+const plainFormatter = (val) => val;
+
+const getFormattedValue = (value, percent = false, plain = false) => {
+  let formattedValue;
+  let formatter = prettyNumericFormatter;
+  if (percent) {
+    if (plain) {
+      console.error("Multiple formatters specified, using percent formatter");
+    }
+
+    formatter = percentFormatter;
+  } else if (plain) {
+    formatter = plainFormatter;
+  }
+
+  if (isNaN(value)) {
+    formattedValue = "(no data)";
+  } else {
+    formattedValue = formatter(value);
+  }
+
+  return formattedValue;
+};
+
+class Tile extends Component {
+  render({
+    title,
+    value,
+    type,
+    percent = false,
+    plain = false,
+    endRow = false,
+    span = null,
+  }) {
+    return html`
+      <div
+        class="analytics__tile ${span ? `analytics__tile--span-${span}` : ""}"
+      >
+        <div class="analytics__tile__header">${title}</div>
+        ${type === "histogram"
+          ? html`
+              <!-- div class="analytics__tile__value" -->
+              <ul class="analytics__tile__histogram">
+                ${value && value.length
+                  ? value.map(
+                      ([label, count]) => html`
+                        <li class="analytics__tile__histogram__row">
+                          <div class="analytics__tile__histogram__value">
+                            ${count}
+                          </div>
+                          <div
+                            class="analytics__tile__histogram__label"
+                            style="--bar-width:${count / (value[0]?.[1] || 1)}"
+                          >
+                            ${label}
+                          </div>
+                        </li>
+                      `
+                    )
+                  : html`
+                      <li class="analytics__tile__histogram__row">No data</li>
+                    `}
+              </ul>
+              <!-- /div -->
+            `
+          : html`
+              <div class="analytics__tile__value" data-value=${value}>
+                ${getFormattedValue(value, percent, plain)}
+              </div>
+            `}
+      </div>
+      ${endRow &&
+      html` <div class="analytics__tile analytics__tile--end-row" /> `}
+    `;
+  }
+}
+
+export default Tile;

package/public/js/index.js

@@ -0,0 +1,9 @@
+import "../css/analytics.css";
+
+console.log("index.js loaded");
+
+import { render, html } from "htm/preact";
+
+import App from "./App";
+
+render(html` <${App} /> `, document.getElementById("analytics-root"));

package/public/js/util.js

@@ -0,0 +1,111 @@
+import { iso } from "../../shared/utils.js";
+
+/* START methods for fetching data from the server */
+
+export const dataCache = {};
+
+// Fetches data from the server with caching
+export async function getData({ n, d, q, endpointBuilder, fetchStats }) {
+  const key = [n, d, q].join("_");
+  if (dataCache[key]) {
+    return dataCache[key];
+  }
+
+  const endpoint = endpointBuilder
+    ? endpointBuilder(n, d, q)
+    : `/data/${n}/${d}${q ? "?" + q : ""}`;
+  console.log("endpoint", endpoint);
+
+  const data = await fetchStats(endpoint);
+  dataCache[key] = data;
+  return data;
+}
+
+// Fetches and builds chart data for a given field/context over a time window
+export async function fetchChartData({
+  numDays,
+  date,
+  chartContext,
+  chartField,
+  getDataFn,
+
+  onLoadProgress, // (i, n) => void
+  onLoadComplete, // (data, max) => void
+}) {
+  const n = numDays;
+  const d = date;
+  const field = chartField;
+  const context = chartContext;
+
+  const [yyyy, mm, dd] = d.split("-");
+  const startDate = new Date(yyyy, mm - 1, dd);
+
+  let data = [];
+  let max = 1;
+
+  for (let i = 0; i < n; i++) {
+    let day = new Date(startDate);
+    day.setDate(startDate.getDate() - i);
+    onLoadProgress(i, n);
+
+    const json = await getDataFn({ n: 1, d: iso(day) });
+    const v = json.metrics[context][field] || 0;
+
+    data.unshift({ date: iso(day), value: v });
+    max = Math.max(max, v);
+  }
+
+  onLoadComplete(data, max);
+}
+
+// Fetches and sets the main stats data for a given date/range
+export async function fetchData({
+  numDays,
+  date,
+  getDataFn,
+  onLoadComplete, // (stats) => void
+}) {
+  const n = numDays;
+  const d = date;
+  const stats = await getDataFn({ n, d });
+  onLoadComplete(stats);
+}
+
+/* END methods for fetching data from the server */
+
+/* START helper methods */
+
+export const getJson = async (url) => {
+  const response = await fetch(url, {
+    headers: { Accept: "application/json", "Content-Type": "application/json" },
+  });
+  return response.json();
+};
+
+export const postJson = async (url, body) => {
+  const response = await fetch(url, {
+    method: "post",
+    body: JSON.stringify(body),
+    headers: { Accept: "application/json", "Content-Type": "application/json" },
+  });
+  return response.json();
+};
+
+export const deepGet = (obj, path) => {
+  const parts = path.split(".");
+  let current = obj;
+  for (let i = 0; i < parts.length; i += 1) {
+    if (current == null) return undefined;
+    current = current[parts[i]];
+  }
+  return current;
+};
+
+export function numFormatter(n) {
+  if (typeof Intl !== "undefined" && Intl.NumberFormat) {
+    return new Intl.NumberFormat().format(n);
+  }
+  return n;
+}
+
+/* END helper methods */

package/rollup.config.js

@@ -0,0 +1,59 @@
+import fs from "fs";
+import path from "path";
+import resolve from "@rollup/plugin-node-resolve";
+import postcss from "rollup-plugin-postcss";
+
+// Custom plugin to inline JS and CSS into HTML
+function inlineAssetsPlugin({ htmlFile, outputFile }) {
+  return {
+    name: "inline-assets",
+    async writeBundle(options, bundle) {
+      const htmlPath = path.resolve(htmlFile);
+      let html = fs.readFileSync(htmlPath, "utf8");
+
+      // Find JS and CSS output from bundle
+      const jsBundle = Object.values(bundle).find(
+        (file) => file.type === "chunk" && file.isEntry
+      );
+      const cssBundle = Object.values(bundle).find(
+        (file) => file.type === "asset" && file.fileName.endsWith(".css")
+      );
+
+      const js = jsBundle ? jsBundle.code : "";
+      const css = cssBundle ? cssBundle.source : "";
+
+      // Replace <script src=...> and <link rel="stylesheet" ...> with inline tags
+      html = html.replace(
+        /<script\s+src="[^"]*"[^>]*><\/script>/,
+        `<script>${js}</script>`
+      );
+      // Replace any <link rel="stylesheet" ...> (with any attributes)
+      html = html.replace(
+        /<link\s+rel=["']stylesheet["'][^>]*>/gi,
+        `<style>${css}</style>`
+      );
+
+      // Write the inlined HTML
+      fs.writeFileSync(path.resolve(options.dir, outputFile), html);
+    },
+  };
+}
+
+export default {
+  input: "public/js/index.js", // Use JS entry point
+  output: {
+    dir: "dist",
+    format: "iife",
+  },
+  plugins: [
+    resolve(),
+    postcss({
+      inject: false,
+      extract: true,
+    }),
+    inlineAssetsPlugin({
+      htmlFile: "public/analytics.html",
+      outputFile: "analytics.html",
+    }),
+  ],
+};