railswatch 1.0.0

data/app/engine_assets/javascripts/charts.js

@@ -0,0 +1,279 @@
+import ApexCharts from "railswatch/apex_ext";
+import ms from "ms";
+
+class RailswatchChart extends HTMLElement {
+  connectedCallback() {
+    this.legend = this.getAttribute('legend');
+    this.units = this.getAttribute('units');
+    this.type = this.getAttribute('type');
+    this.dataText = this.textContent.trim();
+    this.handleThemeChange = () => this.rebuildChart();
+    this.chart = this.buildChart();
+    this.observeDataChanges();
+    window.addEventListener('railswatch:theme-change', this.handleThemeChange);
+  }
+
+  disconnectedCallback() {
+    this.mutationObserver?.disconnect();
+    window.removeEventListener('railswatch:theme-change', this.handleThemeChange);
+    this.chart?.destroy();
+  }
+
+  buildChart() {
+    this.chart?.destroy();
+
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+    }
+
+    const chartDiv = document.createElement('div');
+    this.shadowRoot.innerHTML = '';
+    this.shadowRoot.appendChild(chartDiv);
+
+    const data = this.safeParseJson(this.dataText);
+    const renderMethod = this[`render${this.type}Chart`];
+    return renderMethod.call(this, chartDiv, data);
+  }
+
+  rebuildChart() {
+    this.chart = this.buildChart();
+  }
+
+  safeParseJson(text, defaultValue = []) {
+    try {
+      return JSON.parse(text);
+    } catch (_error) {
+      return defaultValue;
+    }
+  }
+
+  observeDataChanges() {
+    this.mutationObserver = new MutationObserver(() => {
+      const currentText = this.textContent.trim();
+      if (currentText === this.dataText) return;
+      this.dataText = currentText;
+      const data = this.safeParseJson(currentText);
+      this.updateChart(data);
+    });
+    this.mutationObserver.observe(this, { childList: true, characterData: true, subtree: true });
+  }
+
+  updateChart(newData) {
+    let incoming = newData;
+    if (this.type === 'Usage') {
+      const { bytes } = calculateByteUnit(newData);
+      incoming = newData.map(([timestamp, value]) => [timestamp, typeof value === 'number' ? (value / bytes).toFixed(2) : null]);
+    }
+    this.chart.updateRollingWindow(incoming, { windowSizeMs: this.windowSizeMs });
+  }
+
+  get windowSizeMs() {
+    if (this.type === 'TIR' || this.type === 'RT') {
+      return window.railswatchDuration || ms("4h");
+    }
+
+    return ms("24h");
+  }
+
+  renderTIRChart(element, data) {
+    return renderChart(element, data, {
+      chartType: 'area',
+      yAxisTitle: 'RPM',
+      seriesName: this.legend,
+      units: this.units,
+      colorKey: 'accent2'
+    });
+  }
+
+  renderRTChart(element, data) {
+    return renderChart(element, data, {
+      chartType: 'area',
+      yAxisTitle: 'Time',
+      seriesName: 'Response Time',
+      units: 'ms',
+      colorKey: 'accent'
+    });
+  }
+
+  renderPercentageChart(element, data) {
+    return renderChart(element, data, {
+      chartType: 'line',
+      yAxisTitle: '%',
+      seriesName: this.legend,
+      units: '%',
+      colorKey: 'warning'
+    });
+  }
+
+  renderUsageChart(element, data) {
+    const { units, bytes } = calculateByteUnit(data);
+    return renderChart(element, data, {
+      chartType: 'line',
+      yAxisTitle: this.legend,
+      seriesName: this.legend,
+      units: units,
+      colorKey: 'accent',
+      dataTransform: (points) => {
+        return points.map(([timestamp, value]) => [timestamp, typeof value === 'number' ? (value / bytes).toFixed(2) : null]);
+      }
+    });
+  }
+}
+
+customElements.define('railswatch-chart', RailswatchChart);
+
+function calculateByteUnit(data) {
+  let max = data.reduce((accumulator, [_timestamp, value]) => (value > accumulator ? value : accumulator), -Infinity);
+  let power = 0;
+  while (max >= 1024 && power < 5) {
+    max /= 1024;
+    power += 1;
+  }
+
+  const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'][power];
+  const bytes = Math.pow(1024, power);
+
+  return { units, bytes };
+}
+
+function themePalette() {
+  const styles = getComputedStyle(document.documentElement);
+  const theme = document.documentElement.dataset.theme || 'light';
+
+  return {
+    theme,
+    fontFamily: styles.getPropertyValue('--rm-font-body').trim() || 'sans-serif',
+    text: styles.getPropertyValue('--rm-chart-text').trim() || '#64748b',
+    grid: styles.getPropertyValue('--rm-chart-grid').trim() || 'rgba(148, 163, 184, 0.16)',
+    surface: styles.getPropertyValue('--rm-chart-surface').trim() || '#ffffff',
+    accent: styles.getPropertyValue('--rm-accent').trim() || '#0f766e',
+    accent2: styles.getPropertyValue('--rm-accent-2').trim() || '#2563eb',
+    warning: styles.getPropertyValue('--rm-warning').trim() || '#d97706'
+  };
+}
+
+function renderChart(element, data, { chartType = 'area', yAxisTitle, seriesName, units, colorKey = 'accent', dataTransform = (points) => points } = {}) {
+  const palette = themePalette();
+  const color = palette[colorKey] || palette.accent;
+
+  const chart = new ApexCharts(element, {
+    chart: {
+      type: chartType,
+      height: 320,
+      width: '100%',
+      id: `chart-${Math.random().toFixed(10)}`,
+      group: 'chart',
+      fontFamily: palette.fontFamily,
+      toolbar: {
+        show: false
+      },
+      zoom: {
+        type: 'x'
+      },
+      animations: {
+        easing: 'easeinout',
+        speed: 450
+      },
+      background: 'transparent'
+    },
+    colors: [color],
+    stroke: {
+      width: chartType === 'area' ? 2.8 : 2.4,
+      curve: 'smooth'
+    },
+    fill: chartType === 'area' ? {
+      type: 'gradient',
+      gradient: {
+        opacityFrom: 0.28,
+        opacityTo: 0.02,
+        shadeIntensity: 0.8
+      }
+    } : {
+      opacity: 1
+    },
+    grid: {
+      borderColor: palette.grid,
+      strokeDashArray: 4,
+      padding: {
+        left: 4,
+        right: 8
+      }
+    },
+    markers: {
+      size: 0,
+      hover: {
+        size: 5
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    legend: {
+      show: false
+    },
+    xaxis: {
+      crosshairs: {
+        show: true,
+        stroke: {
+          color: palette.grid
+        }
+      },
+      type: 'datetime',
+      labels: {
+        datetimeUTC: false,
+        style: {
+          colors: [palette.text]
+        }
+      },
+      axisBorder: {
+        color: palette.grid
+      },
+      axisTicks: {
+        color: palette.grid
+      }
+    },
+    yaxis: {
+      min: 0,
+      title: {
+        text: yAxisTitle,
+        style: {
+          color: palette.text,
+          fontWeight: 600
+        }
+      },
+      labels: {
+        style: {
+          colors: [palette.text]
+        }
+      }
+    },
+    tooltip: {
+      theme: palette.theme,
+      style: {
+        fontSize: '13px',
+        fontFamily: palette.fontFamily
+      },
+      marker: {
+        show: false
+      },
+      x: {
+        show: true,
+        format: 'dd MMM yyyy HH:mm'
+      },
+      y: {
+        formatter: (value) => value ? `${value} ${units}`.trim() : undefined,
+        title: {
+          formatter: () => ''
+        }
+      }
+    },
+    series: [{
+      name: seriesName,
+      data: dataTransform(data)
+    }],
+    annotations: window?.annotationsData || {}
+  });
+
+  chart.render();
+  return chart;
+}

data/app/engine_assets/javascripts/navbar.js

@@ -0,0 +1,11 @@
+document.addEventListener('click', (event) => {
+  const toggle = event.target.closest('[data-nav-toggle]');
+  if (!toggle) return;
+
+  const topbar = toggle.closest('.rm-topbar');
+  const nav = topbar?.querySelector('#railswatch-nav');
+  if (!topbar || !nav) return;
+
+  const isOpen = topbar.classList.toggle('is-nav-open');
+  toggle.setAttribute('aria-expanded', String(isOpen));
+});

data/app/engine_assets/javascripts/panel.js

@@ -0,0 +1,43 @@
+import $ from 'jquery';
+
+function hidePanel() {
+  $('.cd-panel').removeClass('cd-panel--is-visible');
+  $('body').removeClass('panel-visible');
+  $(".panel-overlay").hide();
+}
+
+function showPanel() {
+  $(".cd-panel__container").scrollTop(0);
+  $(".panel-overlay").show();
+  $('.cd-panel').addClass('cd-panel--is-visible');
+  $('body').addClass('panel-visible');
+  $('.cd-panel__content table').stupidtable();
+}
+
+window.hidePanel = hidePanel;
+window.showPanel = showPanel;
+
+$(function() {
+  var panel = {};
+  window.panel = panel;
+  window.panel.header  = $(".panel-heading span");
+  window.panel.content = $(".cd-panel__content");
+  window.panel.close   = '<a class="panel-close" href="#" onclick="javascript: hidePanel(); return false;">&times;</a>'
+
+  $(document).ajaxStart(function(e) {
+    $('.loader-wrapper').addClass('is-active');
+  });
+
+  $(document).ajaxComplete(function(e) {
+    $('.loader-wrapper').removeClass('is-active');
+  });
+
+  $(".toggle-panel").on('click', function(e) {
+    showPanel();
+  });
+
+  $(document).on("click", ".panel-overlay", function() {
+    hidePanel();
+  });
+
+});

data/app/engine_assets/javascripts/table.js

@@ -0,0 +1,12 @@
+import $ from 'jquery';
+window.jQuery = $; // shim for stupid-table-plugin
+await import('stupid-table-plugin');
+
+function initializeTables() {
+  $('table').stupidtable();
+}
+
+window.initializeRailswatchTables = initializeTables;
+
+$(initializeTables);
+document.addEventListener('railswatch:content-updated', initializeTables);

data/app/engine_assets/javascripts/theme.js

@@ -0,0 +1,43 @@
+const STORAGE_KEY = 'railswatch:theme';
+
+function preferredTheme() {
+  try {
+    const savedTheme = localStorage.getItem(STORAGE_KEY);
+    if (savedTheme === 'light' || savedTheme === 'dark') return savedTheme;
+  } catch (_error) {
+    return 'light';
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function syncThemeButtons(theme) {
+  document.querySelectorAll('[data-theme-label]').forEach((label) => {
+    label.textContent = theme === 'dark' ? 'Dark' : 'Light';
+  });
+}
+
+function applyTheme(theme) {
+  document.documentElement.dataset.theme = theme;
+  try {
+    localStorage.setItem(STORAGE_KEY, theme);
+  } catch (_error) {
+    // no-op
+  }
+  syncThemeButtons(theme);
+  window.dispatchEvent(new CustomEvent('railswatch:theme-change', { detail: { theme } }));
+}
+
+function initializeThemeToggle() {
+  syncThemeButtons(preferredTheme());
+
+  document.addEventListener('click', (event) => {
+    const toggle = event.target.closest('[data-theme-toggle]');
+    if (!toggle) return;
+
+    const currentTheme = document.documentElement.dataset.theme || preferredTheme();
+    applyTheme(currentTheme === 'dark' ? 'light' : 'dark');
+  });
+}
+
+document.addEventListener('DOMContentLoaded', initializeThemeToggle);

data/app/engine_assets/stylesheets/panel.css

@@ -0,0 +1,111 @@
+.panel-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: none;
+  background: rgba(2, 6, 23, 0.42);
+  backdrop-filter: blur(8px);
+}
+
+.panel-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  margin-left: auto;
+  border-radius: 999px;
+  background: rgba(220, 38, 38, 0.1);
+  color: var(--rm-danger);
+  font-size: 1.35rem;
+  line-height: 1;
+  text-decoration: none;
+}
+
+.cd-panel {
+  position: relative;
+  visibility: hidden;
+  transition: visibility 0s 0.35s;
+}
+
+.cd-panel.cd-panel--is-visible {
+  visibility: visible;
+  transition-delay: 0s;
+}
+
+.cd-panel__container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 50;
+  width: min(1120px, 92vw);
+  height: 100%;
+  padding: 1rem;
+  transform: translate3d(100%, 0, 0);
+  transition: transform 0.35s ease;
+}
+
+.cd-panel--is-visible .cd-panel__container {
+  transform: translate3d(0, 0, 0);
+}
+
+.cd-panel__container .panel {
+  min-height: 100%;
+  border: 1px solid var(--rm-border);
+  border-radius: 1.6rem;
+  background: var(--rm-bg-elevated);
+  box-shadow: var(--rm-shadow);
+  overflow: hidden;
+  backdrop-filter: blur(18px);
+}
+
+html[data-theme="dark"] .cd-panel__container .panel {
+  background: var(--rm-surface-strong);
+  backdrop-filter: none;
+}
+
+.panel-heading {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem 1.1rem !important;
+  background: transparent !important;
+  border-bottom: 1px solid var(--rm-border) !important;
+}
+
+.panel-heading .panel-close {
+  margin-left: auto;
+  flex-shrink: 0;
+  align-self: center;
+}
+
+.panel-heading .field {
+  width: 100%;
+}
+
+.panel-block {
+  display: block !important;
+  padding: 0 !important;
+  border: 0 !important;
+}
+
+.cd-panel__content {
+  padding: 1rem;
+  max-height: calc(100vh - 7rem);
+  overflow: auto;
+}
+
+.cd-panel__content .rm-table-shell {
+  margin-top: 1rem;
+}
+
+@media screen and (max-width: 768px) {
+  .cd-panel__container {
+    width: 100vw;
+    padding: 0.5rem;
+  }
+
+  .cd-panel__content {
+    padding: 0.75rem;
+  }
+}

data/app/engine_assets/stylesheets/responsive.css

@@ -0,0 +1,102 @@
+@media screen and (max-width: 1200px) {
+  .rm-overview-grid,
+  .rm-kpi-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .row > .widget:nth-child(1):nth-last-child(3),
+  .row > .widget:nth-child(2):nth-last-child(2),
+  .row > .widget:nth-child(3):nth-last-child(1) {
+    grid-column: span 6;
+  }
+}
+
+@media screen and (max-width: 960px) {
+  .rm-shell {
+    padding: 1rem;
+  }
+
+  .rm-topbar {
+    grid-template-columns: 1fr;
+  }
+
+  .rm-topbar__controls {
+    justify-content: space-between;
+  }
+
+  .rm-mobile-nav-toggle {
+    display: inline-flex;
+  }
+
+  .rm-nav {
+    display: none;
+    padding-top: 0.25rem;
+    overflow-x: auto;
+    flex-wrap: nowrap;
+  }
+
+  .rm-topbar.is-nav-open .rm-nav {
+    display: flex;
+  }
+
+  .rm-page-header,
+  .rm-section-heading {
+    flex-direction: column;
+  }
+
+  .rm-resource-grid > * {
+    grid-column: span 12;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .rm-container {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .rm-overview-grid,
+  .rm-kpi-grid,
+  .row,
+  .rm-resource-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .row > .widget,
+  .row > .widget:nth-child(1):nth-last-child(2),
+  .row > .widget:nth-child(2):nth-last-child(1),
+  .row > .widget:nth-child(1):nth-last-child(3),
+  .row > .widget:nth-child(2):nth-last-child(2),
+  .row > .widget:nth-child(3):nth-last-child(1),
+  .rm-resource-grid > * {
+    grid-column: span 1;
+  }
+
+  .rm-brand__copy small,
+  .rm-theme-toggle__label {
+    display: none;
+  }
+
+  .rm-widget-card,
+  .rm-overview-panel,
+  .rm-page-header {
+    padding: 1rem;
+  }
+
+  .rm-ranking-item {
+    grid-template-columns: auto 1fr;
+  }
+
+  .rm-ranking-item__value {
+    grid-column: 2;
+  }
+
+  .rm-footer {
+    padding-inline: 1rem;
+  }
+
+  .rm-footer__inner {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}