From caa8ff23edaf79bf9f816e0c0762d7246c048a39 Mon Sep 17 00:00:00 2001 From: nym21 Date: Wed, 23 Apr 2025 00:04:09 +0200 Subject: [PATCH] kibo: fix charts data fetch --- .../packages/lightweight-charts/wrapper.js | 6 ++- websites/kibo.money/scripts/main.js | 38 +++++++++++++++---- websites/kibo.money/scripts/table.js | 25 ++++++++---- websites/kibo.money/styles/table.css | 14 ++++++- 4 files changed, 67 insertions(+), 16 deletions(-) diff --git a/websites/kibo.money/packages/lightweight-charts/wrapper.js b/websites/kibo.money/packages/lightweight-charts/wrapper.js index 3266e6c89..b7aabf846 100644 --- a/websites/kibo.money/packages/lightweight-charts/wrapper.js +++ b/websites/kibo.money/packages/lightweight-charts/wrapper.js @@ -195,9 +195,13 @@ export default import("./v5.0.5-treeshaked/script.js").then((lc) => { * @param {VecResource} valuesResource */ function createSetFetchedDataEffect(series, valuesResource) { + const fetchedKey = vecsResources.defaultFetchedKey; signals.runWithOwner(owner, () => signals.createEffect( - () => [timeResource?.fetched(), valuesResource.fetched()], + () => [ + timeResource?.fetched[fetchedKey](), + valuesResource.fetched[fetchedKey](), + ], ([indexes, _ohlcs]) => { if (!ichart) throw Error("IChart should be initialized"); diff --git a/websites/kibo.money/scripts/main.js b/websites/kibo.money/scripts/main.js index 0b72d49df..d9e380110 100644 --- a/websites/kibo.money/scripts/main.js +++ b/websites/kibo.money/scripts/main.js @@ -1287,6 +1287,24 @@ function createUtils() { function createVecsResources(signals, utils) { const owner = signals.getOwner(); + const defaultFrom = -10_000; + const defaultTo = undefined; + + /** + * Defaults + * - from: -10_000 + * - to: undefined + * + * @param {Object} [args] + * @param {number} [args.from] + * @param {number} [args.to] + */ + function genFetchedKey(args) { + return `${args?.from}-${args?.to}`; + } + + const defaultFetchedKey = genFetchedKey({ from: defaultFrom, to: defaultTo }); + /** * @template {number | OHLCTuple} [T=number] * @param {Index} index @@ -1296,15 +1314,12 @@ function createVecsResources(signals, utils) { return signals.runWithOwner(owner, () => { /** @typedef {T extends number ? SingleValueData : CandlestickData} Value */ - const fetched = signals.createSignal(/** @type {T[] | null} */ (null)); let loading = false; let at = /** @type {Date | null} */ (null); - const from = -10_000; - return { - url: utils.api.genUrl(index, id, from), - fetched, + url: utils.api.genUrl(index, id, defaultFrom), + fetched: /** @type {Record>} */ ({}), /** * Defaults * - from: -10_000 @@ -1315,6 +1330,13 @@ function createVecsResources(signals, utils) { * @param {number} [args.to] */ async fetch(args) { + const from = args?.from ?? defaultFrom; + const to = args?.to ?? defaultTo; + const fetchedKey = genFetchedKey({ from, to }); + this.fetched[fetchedKey] ??= signals.createSignal( + /** @type {T[] | null} */ (null), + ); + const fetched = this.fetched[fetchedKey]; if (loading) return fetched(); if (at) { const diff = new Date().getTime() - at.getTime(); @@ -1329,8 +1351,8 @@ function createVecsResources(signals, utils) { }, index, id, - args?.from ?? from, - args?.to, + from, + to, ) ); at = new Date(); @@ -1362,6 +1384,8 @@ function createVecsResources(signals, utils) { map.set(key, /** @type {any} */ (vec)); return vec; }, + genFetchedKey, + defaultFetchedKey, }; return vecs; diff --git a/websites/kibo.money/scripts/table.js b/websites/kibo.money/scripts/table.js index 7c6795c84..f2f762f35 100644 --- a/websites/kibo.money/scripts/table.js +++ b/websites/kibo.money/scripts/table.js @@ -90,7 +90,16 @@ function createTable({ trHead.append(th); const div = window.document.createElement("div"); div.append(select); - const strip = window.document.createElement("div"); + // const top = window.document.createElement("div"); + // div.append(top); + // top.append(select); + // top.append( + // utils.dom.createAnchorElement({ + // href: "", + // blank: true, + // }), + // ); + const bottom = window.document.createElement("div"); const unit = window.document.createElement("span"); if (_unit) { unit.innerHTML = _unit; @@ -110,11 +119,11 @@ function createTable({ title: "Remove column", onClick: onRemove || (() => {}), }); - strip.append(unit); - strip.append(moveLeft); - strip.append(moveRight); - strip.append(remove); - div.append(strip); + bottom.append(unit); + bottom.append(moveLeft); + bottom.append(moveRight); + bottom.append(remove); + div.append(bottom); th.append(div); return { element: th, @@ -280,6 +289,8 @@ function createTable({ vec.fetch({ from, to }); + const fetchedKey = vecsResources.genFetchedKey({ from, to }); + columns.set((l) => { const i = l.indexOf(prevVecId ?? vecId); if (i === -1) { @@ -290,7 +301,7 @@ function createTable({ return l; }); - signals.createEffect(vec.fetched, (vec) => { + signals.createEffect(vec.fetched[fetchedKey], (vec) => { if (!vec) return; const thIndex = colIndex() + 1; diff --git a/websites/kibo.money/styles/table.css b/websites/kibo.money/styles/table.css index fde7553c7..a92ec0ed7 100644 --- a/websites/kibo.money/styles/table.css +++ b/websites/kibo.money/styles/table.css @@ -43,6 +43,11 @@ text-transform: lowercase; } + a { + margin: -0.2rem 0; + font-size: 1.2rem; + } + th:first-child { padding-left: var(--main-padding); } @@ -63,7 +68,14 @@ text-transform: lowercase; color: var(--off-color); text-align: left; - gap: 1rem; + + &:first-child { + gap: 0.5rem; + } + + &:last-child { + gap: 1rem; + } > span { width: 100%;