31:T9f9,stats = { function ac(data, i) { const total = data.length; let tonUp = 0, tonDown = 0, tonNo = 0; let usdUp = 0, usdDown = 0, usdNo = 0; data.forEach((item) => { const tonChange = item.priceChange[i].ton; const usdChange = item.priceChange[i].usd; if (tonChange === 0) tonNo++; else if (tonChange > 0) tonUp++; else tonDown++; if (usdChange === 0) usdNo++; else if (usdChange > 0) usdUp++; else usdDown++; }); return { ton: { no: ((tonNo / total) * 100).toFixed(1), up: ((tonUp / total) * 100).toFixed(1), down: ((tonDown / total) * 100).toFixed(1) }, usd: { no: ((usdNo / total) * 100).toFixed(1), up: ((usdUp / total) * 100).toFixed(1), down: ((usdDown / total) * 100).toFixed(1) } }; } const r0 = ac(gifts, "daily"); const r1 = ac(gifts, "weekly"); return html`

Heatmap stats
Asset	24h			1w
TON	↑${r0.ton.up}%	↓${r0.ton.down}%	~${r0.ton.no}%	↑${r1.ton.up}%	↓${r1.ton.down}%	~${r1.ton.no}%
USD	↑${r0.usd.up}%	↓${r0.usd.down}%	~${r0.usd.no}%	↑${r1.usd.up}%	↓${r1.usd.down}%	~${r1.usd.no}%

`; }32:T19c0,heatmap = { const timeframe = options.timeframe.toLowerCase(); const currency = options.currency.toLowerCase(); const width = 1024 * 0.8; const height = 512; const margin = { top: 8, right: 8, bottom: 8, left: 8 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); const measureText = (t, s, f) => { ctx.font = `${s}px ${f}`; return ctx.measureText(t).width; }; const round = (n) => { const d = fixDecimal(n); return ((n * d + 0.5) | 0) / d; }; const g = gifts.filter((i) => isFinite(i.priceChange[timeframe][currency])); const maxAbsPercent = Math.max( ...g.map((d) => Math.abs(d.priceChange[timeframe][currency] * 100)) ) || 1; const treemap = g.map((d) => { let x; if (options.metric === "Price Change") { x = d.priceChange[timeframe][currency]; } else { x = d.price.ton * d.upgradedSupply; } return { ...d, x }; }); const root = d3 .hierarchy({ children: treemap }) .sum((d) => Math.abs(d.x)) .sort((a, b) => b.value - a.value); const leaves = d3 .treemap() .size([innerWidth, innerHeight]) .paddingInner(1) .round(true)(root) .leaves(); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("font-family", "Inter"); const group = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const defs = svg.append("defs"); const cells = group .selectAll("g") .data(leaves) .enter() .append("g") .attr("transform", (d) => `translate(${d.x0},${d.y0})`); cells.each(function (d) { const g = d3.select(this); const w = d.x1 - d.x0; const h = d.y1 - d.y0; const a = Math.min(w, h); const r = a * 0.05; g.append("rect") .attr("width", w) .attr("height", h) .attr("fill", "#222") .attr("rx", r) .attr("ry", r); const changePercent = Math.round(d.data.priceChange[timeframe][currency] * 100 * 100) / 100; const intensity = 1 - 0.75 * (1.0 - Math.abs(changePercent) / maxAbsPercent); const color = changePercent === 0 ? "#888" : changePercent > 0 ? "#16C784" : "#EA3943"; const gradId = `grad-${d.data.name.replace(/\W/g, "")}`; const gradient = defs .append("linearGradient") .attr("id", gradId) .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%"); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", color) .attr("stop-opacity", 0.125 * intensity); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", color) .attr("stop-opacity", 0.5 * intensity); g.append("rect") .attr("width", w) .attr("height", h) .attr("fill", `url(#${gradId})`) .attr("rx", r) .attr("ry", r); const s = a * 0.5; const x = w * 0.5 - s * 0.5; const y = h * 0.5 - s * 0.5; g.append("svg:image") .attr( "href", "https://api.changes.tg/original/" + d.data.name + ".png?size=128" ) .attr("x", x) .attr("y", y) .attr("width", s) .attr("height", s); //.style("filter", `drop-shadow(0 ${s * 0.5}px ${s * 0.5}px ${color})`); let name = d.data.name; if (measureText(name, a * 0.08, "Inter") > w * 0.5 - a * 0.1) name = name.split(/[ -]/g); else name = [name]; const text = g .append("text") .attr("x", a * 0.1) .attr("y", a * 0.14) .attr("font-size", a * 0.08) .attr("fill", "#eee") .attr("stroke", "#222") .attr("stroke-width", Math.max(1, a * 0.02)) .attr("stroke-linejoin", "round") .attr("paint-order", "stroke fill") .style("dominant-baseline", "middle"); name.forEach((line, i) => { text .append("tspan") .text(line) .attr("x", a * 0.1) .attr("dy", i === 0 ? 0 : a * 0.1); }); const arrow = changePercent === 0 ? "~" : changePercent > 0 ? "↑" : "↓"; const absPercent = Math.abs(changePercent); g.append("text") .attr("x", w - a * 0.1) .attr("y", a * 0.14) .text(`${arrow} ${absPercent}%`) .attr("font-size", a * 0.08) .attr("fill", color) .attr("stroke", "#222") .attr("stroke-width", Math.max(1, a * 0.02)) .attr("stroke-linejoin", "round") .attr("paint-order", "stroke fill") .attr("text-anchor", "end") .style("dominant-baseline", "middle"); g.append("text") .attr("x", w - a * 0.1) .attr("y", h - a * 0.1) .text(fixSupply(d.data.upgradedSupply)) .attr("font-size", a * 0.08) .attr("fill", "#eee") .attr("stroke", "#222") .attr("stroke-width", Math.max(1, a * 0.02)) .attr("stroke-linejoin", "round") .attr("paint-order", "stroke fill") .attr("text-anchor", "end") .style("dominant-baseline", "baseline"); g.append("text") .attr("x", a * 0.1) .attr("y", h - a * 0.1) .text(`${round(d.data.price.ton)} TON`) .attr("font-size", a * 0.08) .attr("fill", "#eee") .attr("stroke", "#222") .attr("stroke-width", Math.max(1, a * 0.02)) .attr("stroke-linejoin", "round") .attr("paint-order", "stroke fill") .style("dominant-baseline", "baseline"); g.append("text") .attr("x", a * 0.1) .attr("y", h - a * 0.2) .text(`$${round(d.data.price.usd)}`) .attr("font-size", a * 0.07) .attr("fill", "#ccc") .attr("stroke", "#222") .attr("stroke-width", Math.max(1, a * 0.02)) .attr("stroke-linejoin", "round") .attr("paint-order", "stroke fill") .style("dominant-baseline", "baseline"); }); const z = d3 .zoom() .scaleExtent([0.5, 8]) .on("zoom", (event) => { group.attr("transform", event.transform); }); svg.style("cursor", "grab"); z.on("start", (event) => { if ( event.sourceEvent && (event.sourceEvent.type === "mousedown" || event.sourceEvent.type === "touchstart") ) { svg.style("cursor", "grabbing"); } }); z.on("end", (event) => { svg.style("cursor", "grab"); }); svg.call(z); const s = svg.node(); //s.style.maxWidth = "600px"; //s.style.marginLeft = "calc(50% - min(50%,300px)"; s.style.border = "1px solid #8884"; s.style.borderRadius = "8px"; //s.style.height = "fit-content"; return s; }33:[] 2f:{"title":"Telegram Gifts Heatmap","cells":[{"id":0,"value":"# Telegram Gifts Heatmap","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"donations = {\n const a = \"UQBEsTMky8JjYU2lF0uyWPrg_XtyPNUzix888KF424wHv-Nx\";\n const r = await (await fetch(\"https://tonapi.io/v2/accounts/\" + a)).json();\n const b = Math.floor((r.balance / 1e9) * 10) / 10;\n return html`\n

Donate to support

${a}

${b} TON Donated

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof options = Inputs.form({\n metric: Inputs.select([\"Price Change\", \"Market Cap\"], {\n label: \"Metric\",\n value: \"Price Change\"\n }),\n timeframe: Inputs.select([\"Daily\", \"Weekly\", \"Monthly\"], {\n label: \"Timeframe\",\n value: \"Daily\"\n }),\n currency: Inputs.select([\"TON\", \"USD\"], {\n label: \"Currency\",\n value: \"TON\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"import { gifts, fixSupply, fixDecimal } from \"@nxrix/telegram-gifts\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}