kibo: fix charts data fetch

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");
 

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<string, Signal<T[] | null>>} */ ({}),
         /**
          * 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;

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;

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%;