Skip to content

structure.md

Latest commit

 

History

History
47 lines (41 loc) · 3.01 KB

structure.md

File metadata and controls

47 lines (41 loc) · 3.01 KB

Project Structure

Forms Optel Dashboard (Operational Telemetry) is a browser-based analytics dashboard for Optel data for web forms, per AEM Live documentation. It reads data from the Adobe RUM bundler API and presents four views: Error Analysis, Performance, Engagement, and Resources. There is no build step — the app uses native ES modules and importmaps to load dependencies directly in the browser.

Runtime stack: Vanilla JavaScript (ES2022 ESM) + Web Components + Chart.js + @adobe/rum-distiller. No framework. No bundler.

Directory layout

index.html              # Entry point: importmap + top-level <script type="module">
app.js                  # Top-level orchestration: URL state, data loading, tab routing, event wiring
loader.js               # DataLoader class: fetches RUM bundles from AEM bundler API by hour/day/month
datachunks.js           # Sole location for all DataChunks configuration — facets, series, helper functions
charts/
  day-night-plugin.js   # Chart.js plugin: shades background by local day/night hours
  error-rate-chart.js   # Hourly error-count bar chart Web Component with click-to-drill-down
  load-time-chart.js    # Hourly form-block load-time line chart Web Component
  load-time-histogram.js # Load-time distribution histogram Web Component (5 dynamic buckets)
  source-time-series-chart.js # Per-source hourly visibility time (p50/p75) line chart Web Component
  click-count-chart.js  # Hourly click-event count line chart Web Component
  fill-count-chart.js   # Hourly fill-event count line chart Web Component
  resource-time-table.js # Resource-load statistics table Web Component (mean, median, max)
  user-agent-pie-chart.js # Device-type/OS distribution pie chart Web Component
dashboards/
  error-dashboard.js    # Error Analysis tab: orchestrates error charts and drill-down panels
  performance-dashboard.js # Performance tab: load-time charts with device/source filter controls
  engagement-dashboard.js # Engagement tab: fill and click count charts
  resource-dashboard.js # Resources tab: missing-resource frequency analysis
components/
  date-range-picker.js  # Date range picker Web Component (validates ≤ 7-day window)
  url-autocomplete.js   # URL autocomplete input Web Component with text-search
utils/
  date-utils.js         # Date helpers: local YYYY-MM-DD strings ↔ UTC ISO conversions
forms/
  form.json             # Form field configuration for the dashboard UI
  journey-mapping.json  # Maps RUM checkpoint sequences to named user journey stages
  source-aliases.json   # Canonical-to-alias mapping for traffic source normalisation
style.css               # Global styles
guides/                 # User and developer documentation
.claude/commands/       # Speckit + GitHub slash-command skill files
.specify/               # Speckit templates, scripts, and memory
specs/                  # Feature specs, plans, tasks (per feature branch)

URL state (reference)

See code.md for the full parameter table and rules.