mirror of
https://github.com/smittix/intercept.git
synced 2026-04-25 07:10:00 -07:00
feat: Add meter grouping by device ID with consumption trends
Transform flat scrolling meter list into grouped view showing one card per unique meter with: - Consumption history tracking and delta from previous reading - Trend sparkline visualization (color-coded for normal/elevated/spike) - Consumption rate calculation (units/hour over 30-min window) - Cards update in place instead of creating duplicates - Alert sound only plays for new meters Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
235
static/js/components/consumption-sparkline.js
Normal file
235
static/js/components/consumption-sparkline.js
Normal file
@@ -0,0 +1,235 @@
|
||||
/**
|
||||
* Consumption Sparkline Component
|
||||
* SVG-based visualization for meter consumption deltas
|
||||
* Adapted from RSSISparkline pattern
|
||||
*/
|
||||
|
||||
const ConsumptionSparkline = (function() {
|
||||
'use strict';
|
||||
|
||||
// Default configuration
|
||||
const DEFAULT_CONFIG = {
|
||||
width: 100,
|
||||
height: 28,
|
||||
maxSamples: 20,
|
||||
strokeWidth: 1.5,
|
||||
showGradient: true,
|
||||
barMode: true // Use bars instead of line for consumption
|
||||
};
|
||||
|
||||
// Color thresholds for consumption deltas
|
||||
// Green = normal/expected, Yellow = elevated, Red = spike
|
||||
const DELTA_COLORS = {
|
||||
normal: '#22c55e', // Green
|
||||
elevated: '#eab308', // Yellow
|
||||
spike: '#ef4444' // Red
|
||||
};
|
||||
|
||||
/**
|
||||
* Classify a delta value relative to the average
|
||||
* @param {number} delta - The delta value
|
||||
* @param {number} avgDelta - Average delta for comparison
|
||||
* @returns {string} - 'normal', 'elevated', or 'spike'
|
||||
*/
|
||||
function classifyDelta(delta, avgDelta) {
|
||||
if (avgDelta === 0 || isNaN(avgDelta)) {
|
||||
return delta === 0 ? 'normal' : 'elevated';
|
||||
}
|
||||
const ratio = Math.abs(delta) / Math.abs(avgDelta);
|
||||
if (ratio <= 1.5) return 'normal';
|
||||
if (ratio <= 3) return 'elevated';
|
||||
return 'spike';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get color for a delta value
|
||||
*/
|
||||
function getDeltaColor(delta, avgDelta) {
|
||||
const classification = classifyDelta(delta, avgDelta);
|
||||
return DELTA_COLORS[classification];
|
||||
}
|
||||
|
||||
/**
|
||||
* Create sparkline SVG for consumption deltas
|
||||
* @param {Array<{timestamp, delta}>} deltas - Array of delta objects
|
||||
* @param {Object} config - Configuration options
|
||||
* @returns {string} - SVG HTML string
|
||||
*/
|
||||
function createSparklineSvg(deltas, config = {}) {
|
||||
const cfg = { ...DEFAULT_CONFIG, ...config };
|
||||
const { width, height, strokeWidth, showGradient, barMode } = cfg;
|
||||
|
||||
if (!deltas || deltas.length < 1) {
|
||||
return createEmptySparkline(width, height);
|
||||
}
|
||||
|
||||
// Extract just the delta values
|
||||
const values = deltas.map(d => d.delta);
|
||||
|
||||
// Calculate statistics for color classification
|
||||
const avgDelta = values.reduce((a, b) => a + b, 0) / values.length;
|
||||
const maxDelta = Math.max(...values.map(Math.abs), 1);
|
||||
|
||||
if (barMode) {
|
||||
return createBarSparkline(values, avgDelta, maxDelta, cfg);
|
||||
}
|
||||
|
||||
return createLineSparkline(values, avgDelta, maxDelta, cfg);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create bar-style sparkline (better for discrete readings)
|
||||
*/
|
||||
function createBarSparkline(values, avgDelta, maxDelta, cfg) {
|
||||
const { width, height } = cfg;
|
||||
const barCount = Math.min(values.length, cfg.maxSamples);
|
||||
const displayValues = values.slice(-barCount);
|
||||
|
||||
const barWidth = Math.max(3, (width / barCount) - 1);
|
||||
const barGap = 1;
|
||||
|
||||
let bars = '';
|
||||
displayValues.forEach((val, i) => {
|
||||
const normalizedHeight = (Math.abs(val) / maxDelta) * (height - 4);
|
||||
const barHeight = Math.max(2, normalizedHeight);
|
||||
const x = i * (barWidth + barGap);
|
||||
const y = height - barHeight - 2;
|
||||
const color = getDeltaColor(val, avgDelta);
|
||||
|
||||
bars += `<rect x="${x.toFixed(1)}" y="${y.toFixed(1)}"
|
||||
width="${barWidth.toFixed(1)}" height="${barHeight.toFixed(1)}"
|
||||
fill="${color}" rx="1" opacity="0.85"/>`;
|
||||
});
|
||||
|
||||
return `
|
||||
<svg class="consumption-sparkline-svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
|
||||
<line x1="0" y1="${height - 2}" x2="${width}" y2="${height - 2}"
|
||||
stroke="#333" stroke-width="1" opacity="0.3"/>
|
||||
${bars}
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create line-style sparkline
|
||||
*/
|
||||
function createLineSparkline(values, avgDelta, maxDelta, cfg) {
|
||||
const { width, height, strokeWidth, showGradient } = cfg;
|
||||
const displayValues = values.slice(-cfg.maxSamples);
|
||||
|
||||
if (displayValues.length < 2) {
|
||||
return createEmptySparkline(width, height);
|
||||
}
|
||||
|
||||
// Normalize values to 0-1 range
|
||||
const normalized = displayValues.map(v => Math.abs(v) / maxDelta);
|
||||
|
||||
// Calculate path
|
||||
const stepX = width / (normalized.length - 1);
|
||||
let pathD = '';
|
||||
let areaD = '';
|
||||
const points = [];
|
||||
|
||||
normalized.forEach((val, i) => {
|
||||
const x = i * stepX;
|
||||
const y = height - (val * (height - 4)) - 2;
|
||||
points.push({ x, y, value: displayValues[i] });
|
||||
|
||||
if (i === 0) {
|
||||
pathD = `M${x.toFixed(1)},${y.toFixed(1)}`;
|
||||
areaD = `M${x.toFixed(1)},${height} L${x.toFixed(1)},${y.toFixed(1)}`;
|
||||
} else {
|
||||
pathD += ` L${x.toFixed(1)},${y.toFixed(1)}`;
|
||||
areaD += ` L${x.toFixed(1)},${y.toFixed(1)}`;
|
||||
}
|
||||
});
|
||||
|
||||
areaD += ` L${width},${height} Z`;
|
||||
|
||||
// Get color based on latest value
|
||||
const latestValue = displayValues[displayValues.length - 1];
|
||||
const strokeColor = getDeltaColor(latestValue, avgDelta);
|
||||
const gradientId = `consumption-gradient-${Math.random().toString(36).substr(2, 9)}`;
|
||||
|
||||
let gradientDef = '';
|
||||
if (showGradient) {
|
||||
gradientDef = `
|
||||
<defs>
|
||||
<linearGradient id="${gradientId}" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:${strokeColor};stop-opacity:0.3"/>
|
||||
<stop offset="100%" style="stop-color:${strokeColor};stop-opacity:0.05"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
`;
|
||||
}
|
||||
|
||||
return `
|
||||
<svg class="consumption-sparkline-svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
|
||||
${gradientDef}
|
||||
${showGradient ? `<path d="${areaD}" fill="url(#${gradientId})" />` : ''}
|
||||
<path d="${pathD}" fill="none" stroke="${strokeColor}" stroke-width="${strokeWidth}"
|
||||
stroke-linecap="round" stroke-linejoin="round" />
|
||||
<circle cx="${points[points.length - 1].x}" cy="${points[points.length - 1].y}"
|
||||
r="2.5" fill="${strokeColor}" class="sparkline-dot" />
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create empty sparkline placeholder
|
||||
*/
|
||||
function createEmptySparkline(width, height) {
|
||||
return `
|
||||
<svg class="consumption-sparkline-svg consumption-sparkline-empty" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
|
||||
<line x1="0" y1="${height / 2}" x2="${width}" y2="${height / 2}"
|
||||
stroke="#444" stroke-width="1" stroke-dasharray="3,3" />
|
||||
<text x="${width / 2}" y="${height / 2 + 4}" text-anchor="middle"
|
||||
fill="#555" font-size="9" font-family="monospace">Collecting...</text>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create sparkline with summary stats
|
||||
* @param {Array} deltas - Delta history
|
||||
* @param {Object} options - Display options
|
||||
* @returns {string} - HTML string
|
||||
*/
|
||||
function createSparklineWithStats(deltas, options = {}) {
|
||||
const svg = createSparklineSvg(deltas, options);
|
||||
|
||||
if (!deltas || deltas.length < 2) {
|
||||
return `<div class="consumption-sparkline-wrapper">${svg}</div>`;
|
||||
}
|
||||
|
||||
// Calculate trend
|
||||
const recentDeltas = deltas.slice(-5);
|
||||
const avgRecent = recentDeltas.reduce((a, d) => a + d.delta, 0) / recentDeltas.length;
|
||||
const trend = avgRecent > 0 ? 'up' : avgRecent < 0 ? 'down' : 'stable';
|
||||
const trendIcon = trend === 'up' ? '↑' : trend === 'down' ? '↓' : '↔';
|
||||
const trendColor = trend === 'up' ? '#22c55e' : trend === 'down' ? '#ef4444' : '#888';
|
||||
|
||||
return `
|
||||
<div class="consumption-sparkline-wrapper">
|
||||
${svg}
|
||||
<span class="consumption-trend" style="color: ${trendColor}" title="Recent trend">
|
||||
${trendIcon}
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Public API
|
||||
return {
|
||||
createSparklineSvg,
|
||||
createEmptySparkline,
|
||||
createSparklineWithStats,
|
||||
classifyDelta,
|
||||
getDeltaColor,
|
||||
DEFAULT_CONFIG,
|
||||
DELTA_COLORS
|
||||
};
|
||||
})();
|
||||
|
||||
// Make globally available
|
||||
window.ConsumptionSparkline = ConsumptionSparkline;
|
||||
278
static/js/components/meter-aggregator.js
Normal file
278
static/js/components/meter-aggregator.js
Normal file
@@ -0,0 +1,278 @@
|
||||
/**
|
||||
* Meter Aggregator Component
|
||||
* Client-side aggregation for rtlamr meter readings
|
||||
* Groups readings by meter ID and tracks consumption history
|
||||
*/
|
||||
|
||||
const MeterAggregator = (function() {
|
||||
'use strict';
|
||||
|
||||
// Configuration
|
||||
const CONFIG = {
|
||||
maxHistoryAge: 60 * 60 * 1000, // 60 minutes
|
||||
maxHistoryLength: 50, // Max readings to keep per meter
|
||||
rateWindowMs: 30 * 60 * 1000 // 30 minutes for rate calculation
|
||||
};
|
||||
|
||||
// Storage for aggregated meters
|
||||
// Map<meterId, MeterData>
|
||||
const meters = new Map();
|
||||
|
||||
/**
|
||||
* MeterData structure:
|
||||
* {
|
||||
* id: string,
|
||||
* type: string,
|
||||
* utility: string,
|
||||
* manufacturer: string,
|
||||
* firstSeen: number (timestamp),
|
||||
* lastSeen: number (timestamp),
|
||||
* readingCount: number,
|
||||
* latestReading: object (full reading data),
|
||||
* history: Array<{timestamp, consumption, raw}>,
|
||||
* delta: number | null (change from previous reading),
|
||||
* rate: number | null (units per hour)
|
||||
* }
|
||||
*/
|
||||
|
||||
/**
|
||||
* Ingest a new meter reading
|
||||
* @param {Object} data - The raw meter reading data
|
||||
* @returns {Object} - { meter: MeterData, isNew: boolean }
|
||||
*/
|
||||
function ingest(data) {
|
||||
const msgData = data.Message || {};
|
||||
const meterId = String(msgData.ID || data.id || 'Unknown');
|
||||
const timestamp = Date.now();
|
||||
const consumption = msgData.Consumption !== undefined ? msgData.Consumption : data.consumption;
|
||||
|
||||
// Get meter type info if available
|
||||
const meterInfo = typeof getMeterTypeInfo === 'function'
|
||||
? getMeterTypeInfo(msgData.EndpointType, data.Type)
|
||||
: { utility: 'Unknown', manufacturer: 'Unknown' };
|
||||
|
||||
const existing = meters.get(meterId);
|
||||
const isNew = !existing;
|
||||
|
||||
if (isNew) {
|
||||
// Create new meter entry
|
||||
const meter = {
|
||||
id: meterId,
|
||||
type: data.Type || 'Unknown',
|
||||
utility: meterInfo.utility,
|
||||
manufacturer: meterInfo.manufacturer,
|
||||
firstSeen: timestamp,
|
||||
lastSeen: timestamp,
|
||||
readingCount: 1,
|
||||
latestReading: data,
|
||||
history: [{
|
||||
timestamp: timestamp,
|
||||
consumption: consumption,
|
||||
raw: data
|
||||
}],
|
||||
delta: null,
|
||||
rate: null
|
||||
};
|
||||
meters.set(meterId, meter);
|
||||
return { meter, isNew: true };
|
||||
}
|
||||
|
||||
// Update existing meter
|
||||
const previousConsumption = existing.history.length > 0
|
||||
? existing.history[existing.history.length - 1].consumption
|
||||
: null;
|
||||
|
||||
// Add to history
|
||||
existing.history.push({
|
||||
timestamp: timestamp,
|
||||
consumption: consumption,
|
||||
raw: data
|
||||
});
|
||||
|
||||
// Prune old history
|
||||
pruneHistory(existing);
|
||||
|
||||
// Calculate delta (change from previous reading)
|
||||
if (previousConsumption !== null && consumption !== undefined && consumption !== null) {
|
||||
existing.delta = consumption - previousConsumption;
|
||||
} else {
|
||||
existing.delta = null;
|
||||
}
|
||||
|
||||
// Calculate rate (units per hour)
|
||||
existing.rate = calculateRate(existing);
|
||||
|
||||
// Update meter data
|
||||
existing.lastSeen = timestamp;
|
||||
existing.readingCount++;
|
||||
existing.latestReading = data;
|
||||
existing.type = data.Type || existing.type;
|
||||
if (meterInfo.utility !== 'Unknown') existing.utility = meterInfo.utility;
|
||||
if (meterInfo.manufacturer !== 'Unknown') existing.manufacturer = meterInfo.manufacturer;
|
||||
|
||||
return { meter: existing, isNew: false };
|
||||
}
|
||||
|
||||
/**
|
||||
* Prune history older than maxHistoryAge and beyond maxHistoryLength
|
||||
*/
|
||||
function pruneHistory(meter) {
|
||||
const cutoff = Date.now() - CONFIG.maxHistoryAge;
|
||||
|
||||
// Remove old entries
|
||||
meter.history = meter.history.filter(h => h.timestamp >= cutoff);
|
||||
|
||||
// Limit length
|
||||
if (meter.history.length > CONFIG.maxHistoryLength) {
|
||||
meter.history = meter.history.slice(-CONFIG.maxHistoryLength);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate consumption rate over the rate window
|
||||
* @returns {number|null} Units per hour, or null if insufficient data
|
||||
*/
|
||||
function calculateRate(meter) {
|
||||
if (meter.history.length < 2) return null;
|
||||
|
||||
const now = Date.now();
|
||||
const windowStart = now - CONFIG.rateWindowMs;
|
||||
|
||||
// Find readings within the rate window
|
||||
const recentHistory = meter.history.filter(h => h.timestamp >= windowStart);
|
||||
if (recentHistory.length < 2) return null;
|
||||
|
||||
const oldest = recentHistory[0];
|
||||
const newest = recentHistory[recentHistory.length - 1];
|
||||
|
||||
// Need both to have valid consumption values
|
||||
if (oldest.consumption === undefined || oldest.consumption === null ||
|
||||
newest.consumption === undefined || newest.consumption === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const consumptionDiff = newest.consumption - oldest.consumption;
|
||||
const timeDiffHours = (newest.timestamp - oldest.timestamp) / (1000 * 60 * 60);
|
||||
|
||||
if (timeDiffHours <= 0) return null;
|
||||
|
||||
return consumptionDiff / timeDiffHours;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get consumption deltas for sparkline display
|
||||
* @returns {Array<{timestamp, delta}>}
|
||||
*/
|
||||
function getConsumptionDeltas(meter) {
|
||||
const deltas = [];
|
||||
for (let i = 1; i < meter.history.length; i++) {
|
||||
const prev = meter.history[i - 1];
|
||||
const curr = meter.history[i];
|
||||
if (prev.consumption !== undefined && prev.consumption !== null &&
|
||||
curr.consumption !== undefined && curr.consumption !== null) {
|
||||
deltas.push({
|
||||
timestamp: curr.timestamp,
|
||||
delta: curr.consumption - prev.consumption
|
||||
});
|
||||
}
|
||||
}
|
||||
return deltas;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a meter by ID
|
||||
* @param {string} id
|
||||
* @returns {Object|null}
|
||||
*/
|
||||
function getMeter(id) {
|
||||
return meters.get(String(id)) || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all meters
|
||||
* @returns {Array<Object>}
|
||||
*/
|
||||
function getAllMeters() {
|
||||
return Array.from(meters.values());
|
||||
}
|
||||
|
||||
/**
|
||||
* Get meter count
|
||||
* @returns {number}
|
||||
*/
|
||||
function getCount() {
|
||||
return meters.size;
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all aggregated data
|
||||
*/
|
||||
function clear() {
|
||||
meters.clear();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get time since last reading for a meter
|
||||
* @param {Object} meter
|
||||
* @returns {string}
|
||||
*/
|
||||
function getTimeSinceLastReading(meter) {
|
||||
const diff = Date.now() - meter.lastSeen;
|
||||
const seconds = Math.floor(diff / 1000);
|
||||
if (seconds < 60) return 'Just now';
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes < 60) return `${minutes} minute${minutes !== 1 ? 's' : ''} ago`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
return `${hours} hour${hours !== 1 ? 's' : ''} ago`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format rate for display
|
||||
* @param {number|null} rate
|
||||
* @returns {string}
|
||||
*/
|
||||
function formatRate(rate) {
|
||||
if (rate === null || rate === undefined || isNaN(rate)) {
|
||||
return '--';
|
||||
}
|
||||
// Format based on magnitude
|
||||
const absRate = Math.abs(rate);
|
||||
if (absRate >= 100) {
|
||||
return rate.toFixed(0) + '/hr';
|
||||
} else if (absRate >= 1) {
|
||||
return rate.toFixed(1) + '/hr';
|
||||
} else {
|
||||
return rate.toFixed(2) + '/hr';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Format delta for display
|
||||
* @param {number|null} delta
|
||||
* @returns {string}
|
||||
*/
|
||||
function formatDelta(delta) {
|
||||
if (delta === null || delta === undefined || isNaN(delta)) {
|
||||
return '--';
|
||||
}
|
||||
const sign = delta >= 0 ? '+' : '';
|
||||
return sign + delta.toLocaleString();
|
||||
}
|
||||
|
||||
// Public API
|
||||
return {
|
||||
ingest,
|
||||
getMeter,
|
||||
getAllMeters,
|
||||
getCount,
|
||||
clear,
|
||||
getConsumptionDeltas,
|
||||
getTimeSinceLastReading,
|
||||
formatRate,
|
||||
formatDelta,
|
||||
CONFIG
|
||||
};
|
||||
})();
|
||||
|
||||
// Make globally available
|
||||
window.MeterAggregator = MeterAggregator;
|
||||
@@ -1155,6 +1155,303 @@ const SignalCards = (function() {
|
||||
return card;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an aggregated utility meter card (grouped by meter ID)
|
||||
* Shows consumption history, sparkline, delta, and rate
|
||||
* @param {Object} meter - Aggregated meter data from MeterAggregator
|
||||
* @param {Object} options - Optional configuration
|
||||
* @returns {HTMLElement}
|
||||
*/
|
||||
function createAggregatedMeterCard(meter, options = {}) {
|
||||
const status = meter.readingCount === 1 ? 'new' : 'baseline';
|
||||
const relativeTime = MeterAggregator.getTimeSinceLastReading(meter);
|
||||
|
||||
const card = document.createElement('article');
|
||||
card.className = 'signal-card meter-aggregated';
|
||||
card.dataset.status = status;
|
||||
card.dataset.type = 'meter';
|
||||
card.dataset.protocol = meter.type || 'unknown';
|
||||
card.dataset.meterId = meter.id;
|
||||
card.id = 'metercard_' + meter.id;
|
||||
|
||||
// Determine meter type color
|
||||
let meterTypeClass = 'electric';
|
||||
const utility = (meter.utility || '').toLowerCase();
|
||||
const meterType = (meter.type || '').toLowerCase();
|
||||
if (utility === 'gas' || meterType.includes('gas')) {
|
||||
meterTypeClass = 'gas';
|
||||
} else if (utility === 'water' || meterType.includes('water') || meterType.includes('r900')) {
|
||||
meterTypeClass = 'water';
|
||||
}
|
||||
|
||||
// Format utility display
|
||||
const utilityDisplay = meter.utility && meter.utility !== 'Unknown' ? meter.utility : null;
|
||||
const manufacturerDisplay = meter.manufacturer && meter.manufacturer !== 'Unknown' ? meter.manufacturer : null;
|
||||
|
||||
// Get consumption deltas for sparkline
|
||||
const deltas = typeof MeterAggregator !== 'undefined'
|
||||
? MeterAggregator.getConsumptionDeltas(meter)
|
||||
: [];
|
||||
|
||||
// Create sparkline
|
||||
const sparklineHtml = typeof ConsumptionSparkline !== 'undefined'
|
||||
? ConsumptionSparkline.createSparklineSvg(deltas, { width: 100, height: 28 })
|
||||
: '<span class="meter-sparkline-placeholder">--</span>';
|
||||
|
||||
// Format delta and rate
|
||||
const deltaFormatted = MeterAggregator.formatDelta(meter.delta);
|
||||
const rateFormatted = MeterAggregator.formatRate(meter.rate);
|
||||
const deltaClass = meter.delta === null ? '' : (meter.delta >= 0 ? 'positive' : 'negative');
|
||||
|
||||
// Get latest consumption
|
||||
const latestConsumption = meter.history.length > 0
|
||||
? meter.history[meter.history.length - 1].consumption
|
||||
: null;
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="signal-card-header">
|
||||
<div class="signal-card-badges">
|
||||
<span class="signal-proto-badge meter ${meterTypeClass}">${escapeHtml(utilityDisplay || meter.type || 'Meter')}</span>
|
||||
<span class="signal-freq-badge">ID: ${escapeHtml(meter.id || 'N/A')}</span>
|
||||
${meter.readingCount > 1 ? `<span class="signal-seen-count">×${meter.readingCount}</span>` : ''}
|
||||
</div>
|
||||
${status === 'new' ? `
|
||||
<span class="signal-status-pill" data-status="new">
|
||||
<span class="status-dot"></span>
|
||||
New
|
||||
</span>
|
||||
` : ''}
|
||||
</div>
|
||||
<div class="signal-card-body">
|
||||
<div class="signal-meta-row">
|
||||
${manufacturerDisplay ? `<span class="signal-msg-type">${escapeHtml(manufacturerDisplay)}</span>` : ''}
|
||||
${meter.type ? `<span class="signal-msg-type" style="opacity: 0.7">${escapeHtml(meter.type)}</span>` : ''}
|
||||
<span class="signal-timestamp meter-last-seen" data-timestamp="${meter.lastSeen}">${escapeHtml(relativeTime)}</span>
|
||||
</div>
|
||||
<div class="meter-aggregated-grid">
|
||||
<div class="meter-aggregated-col consumption-col">
|
||||
<span class="meter-aggregated-label">Consumption</span>
|
||||
<span class="meter-aggregated-value consumption-value">${latestConsumption !== null ? latestConsumption.toLocaleString() : '--'}</span>
|
||||
<span class="meter-delta ${deltaClass}" title="Change from previous reading">${deltaFormatted}</span>
|
||||
</div>
|
||||
<div class="meter-aggregated-col trend-col">
|
||||
<span class="meter-aggregated-label">Trend</span>
|
||||
<div class="meter-sparkline-container">
|
||||
${sparklineHtml}
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-aggregated-col rate-col">
|
||||
<span class="meter-aggregated-label">Rate</span>
|
||||
<span class="meter-rate-value">${rateFormatted}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="signal-card-footer">
|
||||
<button class="signal-advanced-toggle" onclick="SignalCards.toggleAdvanced(this)">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M6 9l6 6 6-6"/>
|
||||
</svg>
|
||||
Details
|
||||
</button>
|
||||
<div class="signal-card-actions">
|
||||
<button class="signal-action-btn" onclick="SignalCards.muteAddress('${escapeHtml(meter.id)}')">Mute</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="signal-advanced-panel">
|
||||
<div class="signal-advanced-inner">
|
||||
<div class="signal-advanced-content">
|
||||
<div class="signal-advanced-section">
|
||||
<div class="signal-advanced-title">Meter Details</div>
|
||||
<div class="signal-advanced-grid">
|
||||
${buildAggregatedMeterDetailsHtml(meter)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update an existing aggregated meter card in place
|
||||
* @param {HTMLElement} card - The card element to update
|
||||
* @param {Object} meter - Updated meter data from MeterAggregator
|
||||
*/
|
||||
function updateAggregatedMeterCard(card, meter) {
|
||||
if (!card || !meter) return;
|
||||
|
||||
// Update timestamp
|
||||
const relativeTime = MeterAggregator.getTimeSinceLastReading(meter);
|
||||
const timestampEl = card.querySelector('.meter-last-seen');
|
||||
if (timestampEl) {
|
||||
timestampEl.dataset.timestamp = meter.lastSeen;
|
||||
timestampEl.textContent = relativeTime;
|
||||
}
|
||||
|
||||
// Update seen count badge
|
||||
const seenCountEl = card.querySelector('.signal-seen-count');
|
||||
if (seenCountEl) {
|
||||
seenCountEl.innerHTML = `×${meter.readingCount}`;
|
||||
} else if (meter.readingCount > 1) {
|
||||
// Add seen count if it doesn't exist
|
||||
const badges = card.querySelector('.signal-card-badges');
|
||||
if (badges) {
|
||||
const countSpan = document.createElement('span');
|
||||
countSpan.className = 'signal-seen-count';
|
||||
countSpan.innerHTML = `×${meter.readingCount}`;
|
||||
badges.appendChild(countSpan);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove "new" status pill after first update
|
||||
if (meter.readingCount > 1) {
|
||||
card.dataset.status = 'baseline';
|
||||
const statusPill = card.querySelector('.signal-status-pill[data-status="new"]');
|
||||
if (statusPill) {
|
||||
statusPill.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Update consumption value
|
||||
const latestConsumption = meter.history.length > 0
|
||||
? meter.history[meter.history.length - 1].consumption
|
||||
: null;
|
||||
const consumptionEl = card.querySelector('.consumption-value');
|
||||
if (consumptionEl) {
|
||||
consumptionEl.textContent = latestConsumption !== null ? latestConsumption.toLocaleString() : '--';
|
||||
}
|
||||
|
||||
// Update delta
|
||||
const deltaEl = card.querySelector('.meter-delta');
|
||||
if (deltaEl) {
|
||||
const deltaFormatted = MeterAggregator.formatDelta(meter.delta);
|
||||
deltaEl.textContent = deltaFormatted;
|
||||
deltaEl.classList.remove('positive', 'negative');
|
||||
if (meter.delta !== null) {
|
||||
deltaEl.classList.add(meter.delta >= 0 ? 'positive' : 'negative');
|
||||
}
|
||||
}
|
||||
|
||||
// Update sparkline
|
||||
const sparklineContainer = card.querySelector('.meter-sparkline-container');
|
||||
if (sparklineContainer && typeof ConsumptionSparkline !== 'undefined') {
|
||||
const deltas = MeterAggregator.getConsumptionDeltas(meter);
|
||||
sparklineContainer.innerHTML = ConsumptionSparkline.createSparklineSvg(deltas, { width: 100, height: 28 });
|
||||
}
|
||||
|
||||
// Update rate
|
||||
const rateEl = card.querySelector('.meter-rate-value');
|
||||
if (rateEl) {
|
||||
rateEl.textContent = MeterAggregator.formatRate(meter.rate);
|
||||
}
|
||||
|
||||
// Update details panel
|
||||
const detailsGrid = card.querySelector('.signal-advanced-grid');
|
||||
if (detailsGrid) {
|
||||
detailsGrid.innerHTML = buildAggregatedMeterDetailsHtml(meter);
|
||||
}
|
||||
|
||||
// Add subtle update animation
|
||||
card.classList.add('meter-updated');
|
||||
setTimeout(() => card.classList.remove('meter-updated'), 300);
|
||||
}
|
||||
|
||||
/**
|
||||
* Build HTML for aggregated meter detail fields
|
||||
* @param {Object} meter - Aggregated meter data
|
||||
* @returns {string} - HTML string
|
||||
*/
|
||||
function buildAggregatedMeterDetailsHtml(meter) {
|
||||
let html = '';
|
||||
const latestReading = meter.latestReading || {};
|
||||
const rawMessage = latestReading.Message || {};
|
||||
|
||||
// Add device intelligence info at the top
|
||||
if (meter.utility && meter.utility !== 'Unknown') {
|
||||
html += `
|
||||
<div class="signal-advanced-item">
|
||||
<span class="signal-advanced-label">Utility Type</span>
|
||||
<span class="signal-advanced-value">${escapeHtml(meter.utility)}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
if (meter.manufacturer && meter.manufacturer !== 'Unknown') {
|
||||
html += `
|
||||
<div class="signal-advanced-item">
|
||||
<span class="signal-advanced-label">Manufacturer</span>
|
||||
<span class="signal-advanced-value">${escapeHtml(meter.manufacturer)}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Add aggregation stats
|
||||
html += `
|
||||
<div class="signal-advanced-item">
|
||||
<span class="signal-advanced-label">Total Readings</span>
|
||||
<span class="signal-advanced-value">${meter.readingCount}</span>
|
||||
</div>
|
||||
<div class="signal-advanced-item">
|
||||
<span class="signal-advanced-label">First Seen</span>
|
||||
<span class="signal-advanced-value">${new Date(meter.firstSeen).toLocaleTimeString()}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add rate info if available
|
||||
if (meter.rate !== null) {
|
||||
html += `
|
||||
<div class="signal-advanced-item">
|
||||
<span class="signal-advanced-label">Consumption Rate</span>
|
||||
<span class="signal-advanced-value">${MeterAggregator.formatRate(meter.rate)}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Display fields from the raw rtlamr message
|
||||
for (const [key, value] of Object.entries(rawMessage)) {
|
||||
if (value === null || value === undefined) continue;
|
||||
|
||||
// Format the label
|
||||
const label = key.replace(/([A-Z])/g, ' $1').replace(/^./, s => s.toUpperCase()).trim();
|
||||
|
||||
// Format the value
|
||||
let displayValue;
|
||||
if (Array.isArray(value)) {
|
||||
if (value.length > 10) {
|
||||
displayValue = `[${value.length} values] ${value.slice(0, 5).join(', ')}...`;
|
||||
} else {
|
||||
displayValue = value.join(', ');
|
||||
}
|
||||
} else if (typeof value === 'object') {
|
||||
displayValue = JSON.stringify(value);
|
||||
} else if (key === 'Consumption') {
|
||||
displayValue = `${value.toLocaleString()} units`;
|
||||
} else {
|
||||
displayValue = String(value);
|
||||
}
|
||||
|
||||
html += `
|
||||
<div class="signal-advanced-item">
|
||||
<span class="signal-advanced-label">${escapeHtml(label)}</span>
|
||||
<span class="signal-advanced-value">${escapeHtml(displayValue)}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Add message type if not in raw message
|
||||
if (!rawMessage.Type && meter.type) {
|
||||
html += `
|
||||
<div class="signal-advanced-item">
|
||||
<span class="signal-advanced-label">Message Type</span>
|
||||
<span class="signal-advanced-value">${escapeHtml(meter.type)}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle advanced panel on a card
|
||||
*/
|
||||
@@ -1946,6 +2243,8 @@ const SignalCards = (function() {
|
||||
createSensorCard,
|
||||
createAcarsCard,
|
||||
createMeterCard,
|
||||
createAggregatedMeterCard,
|
||||
updateAggregatedMeterCard,
|
||||
|
||||
// Signal classification
|
||||
SignalClassification,
|
||||
|
||||
Reference in New Issue
Block a user