/* Overview "Market read": a plain-English, rules-based summary of what BTC is doing, with a trend
* gauge and the charts behind it. Data comes from /api/market-read (src/market_read.js). */
const { useState: useStateMR, useEffect: useEffectMR, useRef: useRefMR } = React;
const MR_TFS = [{ id: '1h', label: '1h' }, { id: '4h', label: '4h' }, { id: '1d', label: 'Daily' }];
const MR_REFRESH_MS = 5 * 60 * 1000;
const MR_REGIME = {
range: { label: 'Range-bound', kind: 'gold' },
transition: { label: 'Between trends', kind: 'neutral' },
uptrend: { label: 'Trending up', kind: 'bull' },
downtrend: { label: 'Trending down', kind: 'bear' },
};
const mrUSD = (n) => '$' + (Math.abs(n) >= 1000 ? Math.round(n).toLocaleString('en-US') : Number(n).toFixed(2));
const mrTime = (t, tf) => {
const d = new Date(t);
return tf === '1d'
? d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
: d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
};
// Width of a container in px, so SVG text is never stretched.
function useWidthMR(def = 560) {
const ref = useRefMR(null);
const [w, setW] = useStateMR(def);
useEffectMR(() => {
const el = ref.current;
if (!el) return undefined;
const set = () => setW(Math.max(200, Math.floor(el.getBoundingClientRect().width)));
set();
if (typeof ResizeObserver === 'undefined') return undefined;
const ro = new ResizeObserver(set);
ro.observe(el);
return () => ro.disconnect();
}, []);
return [ref, w];
}
function mrPath(vals, x, y) {
let d = '', pen = false;
vals.forEach((v, i) => {
if (v == null || !Number.isFinite(v)) { pen = false; return; }
d += (pen ? 'L' : 'M') + x(i).toFixed(1) + ' ' + y(v).toFixed(1) + ' ';
pen = true;
});
return d.trim();
}
// === Trend gauge: distribution (0) ... accumulation (100) =================
function MR_Gauge({ value, label, kind }) {
const w = 260, h = 150, cx = w / 2, cy = 126, r = 100;
const ang = (v) => Math.PI + (Math.PI * v) / 100; // 0 -> left, 100 -> right
const pt = (v, rad = r) => [cx + rad * Math.cos(ang(v)), cy + rad * Math.sin(ang(v))];
const arc = (a, b, rad = r) => {
const [x1, y1] = pt(a, rad), [x2, y2] = pt(b, rad);
return `M ${x1.toFixed(1)} ${y1.toFixed(1)} A ${rad} ${rad} 0 0 1 ${x2.toFixed(1)} ${y2.toFixed(1)}`;
};
const [nx, ny] = pt(value, r - 14);
const colour = kind === 'bull' ? 'var(--bull)' : kind === 'bear' ? 'var(--bear)' : 'var(--gold)';
const segs = [
{ a: 0, b: 20, c: 'var(--bear)' }, { a: 20, b: 40, c: 'var(--bear-dim)' },
{ a: 40, b: 60, c: 'var(--gold-dim)' },
{ a: 60, b: 80, c: 'var(--bull-dim)' }, { a: 80, b: 100, c: 'var(--bull)' },
];
return (
);
}
// === Price + range zones + EMAs + Bollinger band ==========================
function MR_PriceChart({ d }) {
const [ref, W] = useWidthMR();
const H = 240, padL = 8, padR = 62, padT = 10, padB = 22;
const s = d.series, n = s.c.length;
const zones = [d.range.support, d.range.resistance, d.range.strongSupport, d.range.strongResistance].filter(Boolean);
const all = [...s.c, ...s.bbUpper, ...s.bbLower, ...zones.flatMap((z) => [z.lo, z.hi])].filter((v) => v != null);
const lo = Math.min(...all), hi = Math.max(...all), pad = (hi - lo) * 0.04;
const x = (i) => padL + (i / (n - 1)) * (W - padL - padR);
const y = (v) => padT + (1 - (v - (lo - pad)) / (hi - lo + 2 * pad)) * (H - padT - padB);
const line = mrPath(s.c, x, y);
const band = (() => {
const up = [], dn = [];
for (let i = 0; i < n; i++) if (s.bbUpper[i] != null) { up.push(`${x(i).toFixed(1)} ${y(s.bbUpper[i]).toFixed(1)}`); dn.unshift(`${x(i).toFixed(1)} ${y(s.bbLower[i]).toFixed(1)}`); }
return up.length ? 'M' + up.join(' L') + ' L' + dn.join(' L') + ' Z' : '';
})();
const zoneRect = (z, fill, stroke) => z && (
);
const strong = (z, c) => z && ;
const tick = [0, 0.33, 0.66, 1].map((f) => Math.round(f * (n - 1)));
const price = d.price, lastX = x(n - 1);
return (
price EMA 20 EMA 50 Bollinger Bands support zone resistance zone
);
}
// === Small panels =========================================================
function MR_Mini({ title, note, value, children }) {
return (
{title}{value}
{children}
{note}
);
}
function MR_RSI({ d }) {
const [ref, W] = useWidthMR(220);
const H = 84, s = d.series.rsi, n = s.length;
const x = (i) => (i / (n - 1)) * (W - 4) + 2, y = (v) => 4 + (1 - v / 100) * (H - 8);
return (
);
}
function MR_Volume({ d }) {
const [ref, W] = useWidthMR(220);
const H = 84, s = d.series, n = s.vol.length;
const max = Math.max(...s.vol, ...s.volAvg.filter((v) => v != null)) || 1;
const bw = Math.max(1, (W - 4) / n - 1);
const x = (i) => 2 + (i / n) * (W - 4), y = (v) => H - 3 - (v / max) * (H - 8);
const ratio = d.metrics.volRatio;
return (
);
}
function MR_Line({ title, note, value, vals, colour = 'var(--info)', fill = true }) {
const [ref, W] = useWidthMR(220);
const H = 84, ok = vals.filter((v) => v != null), lo = Math.min(...ok), hi = Math.max(...ok), n = vals.length;
const x = (i) => (i / (n - 1)) * (W - 4) + 2, y = (v) => 6 + (1 - (v - lo) / ((hi - lo) || 1)) * (H - 12);
const p = mrPath(vals, x, y);
return (
Rules-based read of Binance spot candles; it is not a prediction and not financial advice. The gauge blends structure (30%), moving averages (20%), RSI (20%), volume flow (20%) and Bollinger Bands (10%). ADX only labels the regime.