Skip to content

feat(dashboard): add 6 new widget types (Phase B) #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HanSur94 merged 12 commits into from
Mar 18, 2026
Merged

feat(dashboard): add 6 new widget types (Phase B) #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
467bb8a
docs: add ExternalSensorRegistry design spec
HanSur94 Mar 18, 2026
14bec2f
docs: fix spec issues from review
HanSur94 Mar 18, 2026
54817f6
docs: fix remaining spec review issues
HanSur94 Mar 18, 2026
96c860f
docs: add ExternalSensorRegistry implementation plan
HanSur94 Mar 18, 2026
683b64e
docs: add Phase B (new widgets) implementation plan
HanSur94 Mar 18, 2026
8e73aef
feat(dashboard): add BarChartWidget for categorical bar charts
HanSur94 Mar 18, 2026
8259ec8
feat(dashboard): add HeatmapWidget for 2D color grid visualization
HanSur94 Mar 18, 2026
fbc0b40
feat(dashboard): add ImageWidget for static image display
HanSur94 Mar 18, 2026
78c96a1
feat(dashboard): add MultiStatusWidget for multi-sensor status grid
HanSur94 Mar 18, 2026
f228f49
feat(dashboard): register all 6 new widget types in engine, serialize…
HanSur94 Mar 18, 2026
f48679a
docs(dashboard): add example scripts for all new widget types
HanSur94 Mar 18, 2026
02be3c6
fix(dashboard): reduce MultiStatusWidget nesting depth for lint
HanSur94 Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 91 additions & 0 deletions bridge/web/js/widgets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,12 @@ var Widgets = (function () {
case "timeline": return renderTimeline(config, bodyEl);
case "rawaxes": return renderRawAxes(config, bodyEl);
case "group": return renderGroup(config, bodyEl);
case "heatmap": return renderHeatmap(config, bodyEl);
case "barchart": return renderBarChart(config, bodyEl);
case "histogram":return renderHistogram(config, bodyEl);
case "scatter": return renderScatter(config, bodyEl);
case "image": return renderImage(config, bodyEl);
case "multistatus": return renderMultiStatus(config, bodyEl);
default:
bodyEl.textContent = "Unknown widget type: " + type;
}
Expand Down Expand Up @@ -322,6 +328,91 @@ var Widgets = (function () {
});
container.appendChild(content);
}

/* --- Heatmap ------------------------------------------- */
function renderHeatmap(cfg, el) {
el.innerHTML = '<div class="placeholder-widget">' +
'<div class="icon">&#x1F7E5;</div>' +
'<div class="label">Heatmap: ' + (cfg.title || '') + '</div>' +
'</div>';
}

/* --- Bar Chart ----------------------------------------- */
function renderBarChart(cfg, el) {
el.innerHTML = '<div class="placeholder-widget">' +
'<div class="icon">&#x1F4CA;</div>' +
'<div class="label">Bar Chart: ' + (cfg.title || '') + '</div>' +
'</div>';
}

/* --- Histogram ----------------------------------------- */
function renderHistogram(cfg, el) {
el.innerHTML = '<div class="placeholder-widget">' +
'<div class="icon">&#x1F4C8;</div>' +
'<div class="label">Histogram: ' + (cfg.title || '') + '</div>' +
'</div>';
}

/* --- Scatter ------------------------------------------- */
function renderScatter(cfg, el) {
el.innerHTML = '<div class="placeholder-widget">' +
'<div class="icon">&#x2022;</div>' +
'<div class="label">Scatter: ' + (cfg.title || '') + '</div>' +
'</div>';
}

/* --- Image --------------------------------------------- */
function renderImage(cfg, el) {
if (cfg.file) {
var img = document.createElement("img");
img.src = cfg.file;
img.alt = cfg.title || "Image";
img.style.maxWidth = "100%";
img.style.maxHeight = "100%";
img.style.objectFit = "contain";
el.appendChild(img);
} else {
el.innerHTML = '<div class="placeholder-widget">' +
'<div class="icon">&#x1F5BC;</div>' +
'<div class="label">Image: ' + (cfg.title || '') + '</div>' +
'</div>';
}
}

/* --- Multi-Status -------------------------------------- */
function renderMultiStatus(cfg, el) {
var items = cfg.items || [];
if (items.length === 0) {
el.innerHTML = '<div class="placeholder-widget">' +
'<div class="label">Multi-Status: ' + (cfg.title || '') + '</div>' +
'</div>';
return;
}
var grid = document.createElement("div");
grid.style.display = "grid";
grid.style.gridTemplateColumns = "repeat(auto-fill, minmax(80px, 1fr))";
grid.style.gap = "6px";
grid.style.padding = "8px";
for (var i = 0; i < items.length; i++) {
var item = items[i];
var cell = document.createElement("div");
cell.style.display = "flex";
cell.style.alignItems = "center";
cell.style.gap = "4px";
var dot = document.createElement("span");
dot.style.width = "10px";
dot.style.height = "10px";
dot.style.borderRadius = "50%";
dot.style.display = "inline-block";
dot.style.backgroundColor = item.color || "#888";
cell.appendChild(dot);
var lbl = document.createElement("span");
lbl.style.fontSize = "0.8em";
lbl.textContent = item.label || "";
cell.appendChild(lbl);
grid.appendChild(cell);
}
el.appendChild(grid);
}

/* --- helpers ------------------------------------------- */
Expand Down
Loading
Loading