hearald 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.1.2] - 2026-10-26
+
+### Fixed
+
+- The dashboard crashed (`Cannot read properties of undefined (reading 'map')`) on a `ui` layout written
+  the way the README showed it, `{ title, fields }`. Sections now accept `title` or `menuName` and
+  `fields` or `stats`, and a section with neither renders empty.
+
+### Changed
+
+- The README now documents the `ui` layout (sections, tiles, `chartContexts`).
+
 ## [0.1.1] - 2026-10-09
 
 ### Fixed

package/README.md

@@ -113,6 +113,11 @@ const statDefinitions = {
 };
 ```
 
+`ui` sets the dashboard layout. Each section has a `title` (or `menuName`; `""` for no heading) and a
+list of tiles in `fields` (or `stats`); a tile is `{ key, label, type }` with `type` one of `number`,
+`percent` or `histogram`, and an optional `span`. `chartContexts` (`[{ id, menuName }]`) fills the chart's
+"Context" menu. Both are optional; a dashboard with no `ui` shows only the chart.
+
 Names with dots become nested objects in the result. `hidden: true` leaves a metric out of the output
 (useful for sets that only feed a computed metric). A computed metric that names a formula that does
 not exist is an error; one whose inputs are missing is simply left out.

package/dist/analytics.html

@@ -881,7 +881,7 @@ th {
                     !chartData.loading &&
                     m`
                       <div class="bar-chart__scale">${chartData.max}</div>
-                      ${chartData.data.map(
+                      ${(chartData.data || []).map(
                         (v) =>
                           m`
                             <div
@@ -900,15 +900,15 @@ th {
                   </div>
                 </section>
                 ${(UI.sections || []).map((statsSection) => {
+                  const sectionTitle =
+                    statsSection.menuName ?? statsSection.title ?? "";
                   return m`
                     <section class="analytics analytics--${statsSection.id}">
-                      ${statsSection.menuName !== "" &&
+                      ${sectionTitle !== "" &&
                       m`
-                        <h2 class="analytics__title">
-                          ${statsSection.menuName}
-                        </h2>
+                        <h2 class="analytics__title">${sectionTitle}</h2>
                       `}
-                      ${statsSection.stats.map((f) => {
+                      ${(statsSection.stats || statsSection.fields || []).map((f) => {
                         return m`
                           <${Tile}
                             title="${f.label}"

package/dist/index.js

@@ -483,7 +483,7 @@
                     !chartData.loading &&
                     m`
                       <div class="bar-chart__scale">${chartData.max}</div>
-                      ${chartData.data.map(
+                      ${(chartData.data || []).map(
                         (v) =>
                           m`
                             <div
@@ -502,15 +502,15 @@
                   </div>
                 </section>
                 ${(UI.sections || []).map((statsSection) => {
+                  const sectionTitle =
+                    statsSection.menuName ?? statsSection.title ?? "";
                   return m`
                     <section class="analytics analytics--${statsSection.id}">
-                      ${statsSection.menuName !== "" &&
+                      ${sectionTitle !== "" &&
                       m`
-                        <h2 class="analytics__title">
-                          ${statsSection.menuName}
-                        </h2>
+                        <h2 class="analytics__title">${sectionTitle}</h2>
                       `}
-                      ${statsSection.stats.map((f) => {
+                      ${(statsSection.stats || statsSection.fields || []).map((f) => {
                         return m`
                           <${Tile}
                             title="${f.label}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hearald",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A single server drop-in file system based metrics and analytics library.",
   "main": "src/index.js",
   "exports": {

package/src/public/js/App.js

@@ -269,7 +269,7 @@ class App extends Component {
                     !chartData.loading &&
                     html`
                       <div class="bar-chart__scale">${chartData.max}</div>
-                      ${chartData.data.map(
+                      ${(chartData.data || []).map(
                         (v) =>
                           html`
                             <div
@@ -288,15 +288,15 @@ class App extends Component {
                   </div>
                 </section>
                 ${(UI.sections || []).map((statsSection) => {
+                  const sectionTitle =
+                    statsSection.menuName ?? statsSection.title ?? "";
                   return html`
                     <section class="analytics analytics--${statsSection.id}">
-                      ${statsSection.menuName !== "" &&
+                      ${sectionTitle !== "" &&
                       html`
-                        <h2 class="analytics__title">
-                          ${statsSection.menuName}
-                        </h2>
+                        <h2 class="analytics__title">${sectionTitle}</h2>
                       `}
-                      ${statsSection.stats.map((f) => {
+                      ${(statsSection.stats || statsSection.fields || []).map((f) => {
                         return html`
                           <${Tile}
                             title="${f.label}"