diff --git a/index.html b/index.html index 1d5b19a..696b660 100644 --- a/index.html +++ b/index.html @@ -1241,8 +1241,9 @@ function getOldestTransactionDate() { } /* Build per-day cumulative BTC series from addressSnapshots. - Forward-fills each wallet's balance for gap days so multi-wallet - aggregation is continuous. */ + Forward-fills each wallet's balance for gap days and generates + a data point for every calendar day (like the sats chart) so the + y-axis uses daily steps. */ function buildCumulativeSeries(addresses) { const allDates = {}; addresses.forEach(addr => { @@ -1251,26 +1252,42 @@ function buildCumulativeSeries(addresses) { allDates[snap.block_timestamp.slice(0, 10)] = true; }); }); - const sortedDates = Object.keys(allDates).sort(); + const snapshotDates = Object.keys(allDates).sort(); + if (snapshotDates.length === 0) return []; - const dayMap = {}; + /* Build per-wallet forward-filled balance for every calendar day */ + const firstUTC = Date.UTC(new Date(snapshotDates[0]).getUTCFullYear(), new Date(snapshotDates[0]).getUTCMonth(), new Date(snapshotDates[0]).getUTCDate()); + const lastUTC = Date.UTC(new Date(snapshotDates[snapshotDates.length - 1]).getUTCFullYear(), new Date(snapshotDates[snapshotDates.length - 1]).getUTCMonth(), new Date(snapshotDates[snapshotDates.length - 1]).getUTCDate()); + const DAY_MS = 86400000; + + /* Pre-compute per-wallet dated arrays (oldest-first) */ + const walletDated = {}; addresses.forEach(addr => { const snaps = addressSnapshots[addr] || []; - const dated = snaps.map(s => ({ + walletDated[addr] = snaps.map(s => ({ dateStr: s.block_timestamp.slice(0, 10), btcAmt: getTokenAmount(s?.wallet?.cbBTC, 'cbBTC') + getTokenAmount(s?.collateral?.cbBTC, 'cbBTC') })).sort((a, b) => a.dateStr.localeCompare(b.dateStr)); - - let balance = 0; - for (const ds of sortedDates) { - const match = dated.find(d => d.dateStr === ds); - if (match) balance = match.btcAmt; - if (!dayMap[ds]) dayMap[ds] = 0; - dayMap[ds] += balance; - } }); - return sortedDates.map(dateStr => [new Date(dateStr).getTime(), dayMap[dateStr]]); + /* Walk every calendar day, forward-fill each wallet, aggregate */ + const result = []; + for (let t = firstUTC; t <= lastUTC; t += DAY_MS) { + const ds = new Date(t).toISOString().slice(0, 10); + let dayTotal = 0; + addresses.forEach(addr => { + const dated = walletDated[addr]; + let balance = 0; + for (const d of dated) { + if (d.dateStr <= ds) balance = d.btcAmt; + else break; + } + dayTotal += balance; + }); + result.push([t, dayTotal]); + } + + return result; } function calculateAggregatedSeries() { @@ -1543,7 +1560,7 @@ function getBaseChartOptions(chartId, dataset, color, isBTC) { fill: { type: 'gradient', gradient: { type: 'vertical', shadeIntensity: 0, colorStops: [{ offset: 0, color: color, opacity: 0.16 }, { offset: 100, color: color, opacity: 0 }] } }, grid: { show: false, padding: { left: 0, right: 0, top: 0, bottom: 0 } }, markers: { size: 0, hover: { size: 5 } }, - xaxis: { type: 'datetime', labels: { show: true, style: { colors: '#4B5563', fontSize: '10px', fontWeight: 600 }, datetimeFormatter: { year: 'yyyy', month: 'MMM yy', day: 'dd MMM' } }, axisBorder: { show: false }, axisTicks: { show: false } }, + xaxis: { type: 'datetime', labels: { show: true, style: { colors: '#4B5563', fontSize: '10px', fontWeight: 600 }, datetimeFormatter: { year: 'yyyy', month: 'MMM yy', day: 'dd MMM' } }, axisBorder: { show: false }, axisTicks: { show: false }, minTickInterval: 86400000 }, yaxis: { opposite: true, min: (min) => isBTC ? min * 0.98 : min * 0.95, max: (max) => isBTC ? max * 1.02 : max * 1.05, labels: { offsetX: -10, style: { colors: '#4B5563', fontSize: '10px', fontWeight: 600 }, formatter: function(val) { if (isBTC) return (val / 1000).toFixed(0) + 'k'; return val.toFixed(4); } }, axisBorder: { show: false }, axisTicks: { show: false } }, tooltip: { enabled: true, theme: 'dark', shared: false, intersect: false, custom: function({ series, seriesIndex, dataPointIndex, w }) { const rawData = w.config.series[seriesIndex].data[dataPointIndex]; if (!rawData) return ''; const date = new Date(rawData[0]); const dateString = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); const valFormatted = isBTC ? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(rawData[1]) : rawData[1].toFixed(6) + ' BTC'; return '
' + dateString + '
' + valFormatted + '
'; } }, crosshairs: { show: true, width: 1, position: 'back', stroke: { color: '#4B5563', width: 1, dashArray: 3 } } @@ -1670,7 +1687,7 @@ function setupSatsCard(cutoff) { fill: { type: 'gradient', gradient: { type: 'vertical', shadeIntensity: 0, colorStops: [{ offset: 0, color: orangeBrandColor, opacity: 0.16 }, { offset: 100, color: orangeBrandColor, opacity: 0 }] } }, grid: { show: false, padding: { left: 0, right: 0, top: 0, bottom: 0 } }, markers: { size: 0, hover: { size: 5 } }, - xaxis: { type: 'datetime', labels: { show: true, style: { colors: '#4B5563', fontSize: '10px', fontWeight: 600 }, datetimeFormatter: { year: 'yyyy', month: 'MMM yy', day: 'dd MMM' } }, axisBorder: { show: false }, axisTicks: { show: false }, minTickInterval: '1day' }, + xaxis: { type: 'datetime', labels: { show: true, style: { colors: '#4B5563', fontSize: '10px', fontWeight: 600 }, datetimeFormatter: { year: 'yyyy', month: 'MMM yy', day: 'dd MMM' } }, axisBorder: { show: false }, axisTicks: { show: false }, minTickInterval: 86400000 }, yaxis: { opposite: true, labels: { offsetX: -10, style: { colors: '#4B5563', fontSize: '10px', fontWeight: 600 }, formatter: (val) => { if (val >= 1e6) return (val / 1e6).toFixed(0) + 'M'; if (val >= 1e3) return (val / 1e3).toFixed(0) + 'k'; return val; } }, axisBorder: { show: false }, axisTicks: { show: false } }, tooltip: { enabled: true, theme: 'dark', shared: false, intersect: false, custom: function({ series, seriesIndex, dataPointIndex, w }) { const rawData = w.config.series[seriesIndex].data[dataPointIndex]; if (!rawData) return ''; const date = new Date(rawData[0]); const dateString = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); const sats = rawData[1]; const btcVal = (sats / 1e8).toFixed(6); const priceStr = todayBtcPrice ? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(todayBtcPrice) : '—'; const dollarDay = todayBtcPrice ? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format((sats / 1e8) * todayBtcPrice) : '—'; return '
' + dateString + '
₿ ' + btcVal + '/day
' + dollarDay + '
'; } }, crosshairs: { show: true, width: 1, position: 'back', stroke: { color: '#4B5563', width: 1, dashArray: 3 } } @@ -1688,34 +1705,55 @@ function setupBreakdownCard(cutoff) { const snaps = addressSnapshots[addr] || []; snaps.forEach(snap => { allDates[snap.block_timestamp.slice(0, 10)] = true; }); }); - const sortedDates = Object.keys(allDates).sort(); + const snapshotDates = Object.keys(allDates).sort(); + if (snapshotDates.length === 0) { + const opts = { + chart: { id: 'instance-breakdown', type: 'area', height: 200, background: 'transparent', toolbar: { show: false }, animations: { enabled: false } }, + series: [{ name: 'Total Holdings', data: [] }, { name: 'On Aave', data: [] }], + colors: [orangeBrandColor, blueBrandColor] + }; + const chart = new ApexCharts(document.querySelector("#chart-container-breakdown"), opts); + chart.render(); + window.breakdownChart = chart; + return; + } - const dayMap = {}; + const firstUTC = Date.UTC(new Date(snapshotDates[0]).getUTCFullYear(), new Date(snapshotDates[0]).getUTCMonth(), new Date(snapshotDates[0]).getUTCDate()); + const lastUTC = Date.UTC(new Date(snapshotDates[snapshotDates.length - 1]).getUTCFullYear(), new Date(snapshotDates[snapshotDates.length - 1]).getUTCMonth(), new Date(snapshotDates[snapshotDates.length - 1]).getUTCDate()); + const DAY_MS = 86400000; + + /* Pre-compute per-wallet dated arrays (oldest-first) */ + const walletDated = {}; selectedAddr.forEach(addr => { const snaps = addressSnapshots[addr] || []; - const dated = snaps.map(s => ({ + walletDated[addr] = snaps.map(s => ({ dateStr: s.block_timestamp.slice(0, 10), cold: getTokenAmount(s?.wallet?.cbBTC, 'cbBTC'), collateral: getTokenAmount(s?.collateral?.cbBTC, 'cbBTC') })).sort((a, b) => a.dateStr.localeCompare(b.dateStr)); - - let cold = 0, coll = 0; - for (const ds of sortedDates) { - const match = dated.find(d => d.dateStr === ds); - if (match) { cold = match.cold; coll = match.collateral; } - if (!dayMap[ds]) dayMap[ds] = { cold: 0, collateral: 0 }; - dayMap[ds].cold += cold; - dayMap[ds].collateral += coll; - } }); - const entries = sortedDates; - const totalSeries = entries.map(dateStr => { - return [new Date(dateStr).getTime(), dayMap[dateStr].cold + dayMap[dateStr].collateral]; - }).filter(d => d[0] >= cutoff); - const aaveSeries = entries.map(dateStr => { - return [new Date(dateStr).getTime(), dayMap[dateStr].collateral]; - }).filter(d => d[0] >= cutoff); + /* Walk every calendar day, forward-fill each wallet, aggregate */ + const totalSeries = []; + const aaveSeries = []; + for (let t = firstUTC; t <= lastUTC; t += DAY_MS) { + const ds = new Date(t).toISOString().slice(0, 10); + let dayCold = 0, dayColl = 0; + selectedAddr.forEach(addr => { + const dated = walletDated[addr]; + let c = 0, co = 0; + for (const d of dated) { + if (d.dateStr <= ds) { c = d.cold; co = d.collateral; } + else break; + } + dayCold += c; + dayColl += co; + }); + if (t >= cutoff) { + totalSeries.push([t, dayCold + dayColl]); + aaveSeries.push([t, dayColl]); + } + } const opts = { chart: { id: 'instance-breakdown', type: 'area', height: 200, background: 'transparent', toolbar: { show: false }, sparkline: { enabled: false }, zoom: { enabled: true, type: 'x', autoScaleYaxis: true }, animations: { enabled: false } }, @@ -1729,7 +1767,7 @@ function setupBreakdownCard(cutoff) { fill: { type: 'gradient', gradient: { type: 'vertical', shadeIntensity: 0, colorStops: [[{ offset: 0, color: orangeBrandColor, opacity: 0.16 }, { offset: 100, color: orangeBrandColor, opacity: 0 }], [{ offset: 0, color: blueBrandColor, opacity: 0.16 }, { offset: 100, color: blueBrandColor, opacity: 0 }]] } }, grid: { show: false, padding: { left: 0, right: 0, top: 0, bottom: 0 } }, markers: { size: 0, strokeColors: [orangeBrandColor, blueBrandColor], strokeWidth: 3, hover: { size: 5 } }, - xaxis: { type: 'datetime', labels: { show: true, style: { colors: '#4B5563', fontSize: '10px', fontWeight: 600 }, datetimeFormatter: { year: 'yyyy', month: 'MMM yy', day: 'dd MMM' } }, axisBorder: { show: false }, axisTicks: { show: false } }, + xaxis: { type: 'datetime', labels: { show: true, style: { colors: '#4B5563', fontSize: '10px', fontWeight: 600 }, datetimeFormatter: { year: 'yyyy', month: 'MMM yy', day: 'dd MMM' } }, axisBorder: { show: false }, axisTicks: { show: false }, minTickInterval: 86400000 }, yaxis: { opposite: true, labels: { offsetX: -10, style: { colors: '#4B5563', fontSize: '10px', fontWeight: 600 }, formatter: (val) => val.toFixed(4) }, axisBorder: { show: false }, axisTicks: { show: false } }, tooltip: { enabled: true, theme: 'dark', shared: true, intersect: false, custom: function({ series, seriesIndex, dataPointIndex, w }) { const item = totalSeries[dataPointIndex]; if (!item) return ''; const date = new Date(item[0]); const dateString = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); const total = item[1]; const aave = aaveSeries[dataPointIndex]?.[1] || 0; const delta = total - aave; return '
' + dateString + '
Total
' + total.toFixed(6) + '
On Aave
' + aave.toFixed(6) + '
Delta
' + delta.toFixed(6) + '
'; } }, legend: { position: 'top', horizontalAlign: 'left', fontSize: '10px', fontFamily: 'sans-serif', labels: { colors: '#4B5563' }, markers: { width: 8, height: 8, radius: 12, offsetX: -4 }, itemMargin: { horizontal: 8, vertical: 0 } },