mirror of
https://github.com/bendtherules/mispair-demo.git
synced 2026-08-18 13:22:17 +00:00
Extract raw value in data.js, use fixed 200°C max for bar height, add hover tooltip
This commit is contained in:
+6
-11
@@ -7,12 +7,10 @@ export function createChartForZone(zoneId) {
|
|||||||
return d.toLocaleTimeString('en-US', { hour12: false });
|
return d.toLocaleTimeString('en-US', { hour12: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
function maxValue() {
|
const MAX_TEMP = 200;
|
||||||
let m = 0;
|
|
||||||
for (const h of history) {
|
function barHeight(value) {
|
||||||
if (h.value > m) m = h.value;
|
return Math.max(4, (value / MAX_TEMP) * 100);
|
||||||
}
|
|
||||||
return m || 100;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function render() {
|
function render() {
|
||||||
@@ -29,11 +27,9 @@ export function createChartForZone(zoneId) {
|
|||||||
</span>
|
</span>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const max = maxValue();
|
|
||||||
let html = '';
|
let html = '';
|
||||||
for (const h of history) {
|
for (const h of history) {
|
||||||
const pct = Math.max(4, (h.value / max) * 100);
|
html += `<div class="bar-wrapper"><div class="bar" style="height:${barHeight(h.value)}%" title="${h.value}°C"></div><span class="bar-label">${formatTime(h.time)}</span></div>`;
|
||||||
html += `<div class="bar-wrapper"><div class="bar" style="height:${pct}%"></div><span class="bar-label">${formatTime(h.time)}</span></div>`;
|
|
||||||
}
|
}
|
||||||
chartEl.innerHTML = html;
|
chartEl.innerHTML = html;
|
||||||
}
|
}
|
||||||
@@ -56,8 +52,7 @@ export function createChartForZone(zoneId) {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
element: card,
|
element: card,
|
||||||
update(val) {
|
update(value) {
|
||||||
const value = typeof val === 'object' && val !== null ? val.value : val;
|
|
||||||
history.push({ value, time: new Date() });
|
history.push({ value, time: new Date() });
|
||||||
if (history.length > MAX_HISTORY) history.shift();
|
if (history.length > MAX_HISTORY) history.shift();
|
||||||
render();
|
render();
|
||||||
|
|||||||
+2
-3
@@ -5,7 +5,6 @@ async function fetchTemperature(zoneId) {
|
|||||||
|
|
||||||
// Don't change this function signature
|
// Don't change this function signature
|
||||||
export async function attachChart(chartInstance, zoneId) {
|
export async function attachChart(chartInstance, zoneId) {
|
||||||
await fetchTemperature(zoneId).then(temp => {
|
const temp = await fetchTemperature(zoneId);
|
||||||
chartInstance.update(temp);
|
chartInstance.update(temp.value);
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user