mirror of
https://github.com/bitcoinresearchkit/brk.git
synced 2026-04-24 14:49:58 -07:00
global: wip
This commit is contained in:
nym21
342
websites/default/scripts/chart.js
Normal file
342
websites/default/scripts/chart.js
Normal file
@@ -0,0 +1,342 @@
|
||||
// @ts-check
|
||||
|
||||
/**
|
||||
* @param {Object} args
|
||||
* @param {Colors} args.colors
|
||||
* @param {LightweightCharts} args.lightweightCharts
|
||||
* @param {Accessor<ChartOption>} args.selected
|
||||
* @param {Signals} args.signals
|
||||
* @param {Utilities} args.utils
|
||||
* @param {WebSockets} args.webSockets
|
||||
* @param {Elements} args.elements
|
||||
* @param {VecsResources} args.vecsResources
|
||||
* @param {VecIdToIndexes} args.vecIdToIndexes
|
||||
*/
|
||||
export function init({
|
||||
colors,
|
||||
elements,
|
||||
lightweightCharts,
|
||||
selected,
|
||||
signals,
|
||||
utils,
|
||||
webSockets,
|
||||
vecsResources,
|
||||
vecIdToIndexes,
|
||||
}) {
|
||||
elements.charts.append(utils.dom.createShadow("left"));
|
||||
elements.charts.append(utils.dom.createShadow("right"));
|
||||
|
||||
const { headerElement, headingElement } = utils.dom.createHeader({});
|
||||
elements.charts.append(headerElement);
|
||||
|
||||
const chart = lightweightCharts.createChartElement({
|
||||
parent: elements.charts,
|
||||
signals,
|
||||
colors,
|
||||
id: "charts",
|
||||
utils,
|
||||
vecsResources,
|
||||
elements,
|
||||
});
|
||||
|
||||
const index = createIndexSelector({ elements, signals, utils });
|
||||
|
||||
let firstRun = true;
|
||||
|
||||
signals.createEffect(selected, (option) => {
|
||||
headingElement.innerHTML = option.title;
|
||||
signals.createEffect(index, (index) => {
|
||||
const { field: topUnitField, selected: topUnit } =
|
||||
utils.dom.createHorizontalChoiceField({
|
||||
defaultValue: "USD",
|
||||
keyPrefix: "charts",
|
||||
key: "unit-0",
|
||||
choices: /** @type {const} */ ([
|
||||
/** @satisfies {Unit} */ ("USD"),
|
||||
/** @satisfies {Unit} */ ("Sats"),
|
||||
]),
|
||||
signals,
|
||||
sorted: true,
|
||||
});
|
||||
|
||||
signals.createEffect(topUnit, (topUnit) => {
|
||||
const { field: seriesTypeField, selected: topSeriesType } =
|
||||
utils.dom.createHorizontalChoiceField({
|
||||
defaultValue: "Line",
|
||||
keyPrefix: "charts",
|
||||
key: "seriestype-0",
|
||||
choices: /** @type {const} */ (["Candles", "Line"]),
|
||||
signals,
|
||||
});
|
||||
|
||||
signals.createEffect(topSeriesType, (topSeriesType) => {
|
||||
const bottomUnits = /** @type {readonly Unit[]} */ (
|
||||
Object.keys(option.bottom)
|
||||
);
|
||||
const { field: bottomUnitField, selected: bottomUnit } =
|
||||
utils.dom.createHorizontalChoiceField({
|
||||
defaultValue: bottomUnits.at(0) || "",
|
||||
keyPrefix: "charts",
|
||||
key: "unit-1",
|
||||
choices: bottomUnits,
|
||||
signals,
|
||||
sorted: true,
|
||||
});
|
||||
|
||||
signals.createEffect(bottomUnit, (bottomUnit) => {
|
||||
chart.reset({ owner: signals.getOwner() });
|
||||
|
||||
chart.addFieldsetIfNeeded({
|
||||
id: "charts-unit-0",
|
||||
paneIndex: 0,
|
||||
position: "nw",
|
||||
createChild() {
|
||||
return topUnitField;
|
||||
},
|
||||
});
|
||||
|
||||
if (bottomUnits.length) {
|
||||
chart.addFieldsetIfNeeded({
|
||||
id: "charts-unit-1",
|
||||
paneIndex: 1,
|
||||
position: "nw",
|
||||
createChild() {
|
||||
return bottomUnitField;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
chart.addFieldsetIfNeeded({
|
||||
id: "charts-seriestype-0",
|
||||
paneIndex: 0,
|
||||
position: "ne",
|
||||
createChild() {
|
||||
return seriesTypeField;
|
||||
},
|
||||
});
|
||||
|
||||
const TIMERANGE_LS_KEY = `chart-timerange-${index}`;
|
||||
|
||||
const from = signals.createSignal(
|
||||
/** @type {number | null} */ (null),
|
||||
{
|
||||
save: {
|
||||
...utils.serde.optNumber,
|
||||
keyPrefix: TIMERANGE_LS_KEY,
|
||||
key: "from",
|
||||
serializeParam: firstRun,
|
||||
},
|
||||
},
|
||||
);
|
||||
const to = signals.createSignal(
|
||||
/** @type {number | null} */ (null),
|
||||
{
|
||||
save: {
|
||||
...utils.serde.optNumber,
|
||||
keyPrefix: TIMERANGE_LS_KEY,
|
||||
key: "to",
|
||||
serializeParam: firstRun,
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
chart.create({
|
||||
index,
|
||||
timeScaleSetCallback: (unknownTimeScaleCallback) => {
|
||||
const from_ = from();
|
||||
const to_ = to();
|
||||
if (from_ !== null && to_ !== null) {
|
||||
chart.inner()?.timeScale().setVisibleLogicalRange({
|
||||
from: from_,
|
||||
to: to_,
|
||||
});
|
||||
} else {
|
||||
unknownTimeScaleCallback();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
switch (topUnit) {
|
||||
case "USD": {
|
||||
switch (topSeriesType) {
|
||||
case "Candles": {
|
||||
const candles = chart.addCandlestickSeries({
|
||||
vecId: "ohlc",
|
||||
name: "Price",
|
||||
unit: topUnit,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "Line": {
|
||||
const line = chart.addLineSeries({
|
||||
vecId: "close",
|
||||
name: "Price",
|
||||
unit: topUnit,
|
||||
color: colors.default,
|
||||
options: {
|
||||
priceLineVisible: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
// signals.createEffect(webSockets.kraken1dCandle.latest, (latest) => {
|
||||
// if (!latest) return;
|
||||
// const last = /** @type { CandlestickData | undefined} */ (
|
||||
// candles.data().at(-1)
|
||||
// );
|
||||
// if (!last) return;
|
||||
// candles?.update({ ...last, close: latest.close });
|
||||
// });
|
||||
break;
|
||||
}
|
||||
case "Sats": {
|
||||
switch (topSeriesType) {
|
||||
case "Candles": {
|
||||
const candles = chart.addCandlestickSeries({
|
||||
vecId: "ohlc-in-sats",
|
||||
name: "Price",
|
||||
unit: topUnit,
|
||||
inverse: true,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "Line": {
|
||||
const line = chart.addLineSeries({
|
||||
vecId: "close-in-sats",
|
||||
name: "Price",
|
||||
unit: topUnit,
|
||||
color: colors.default,
|
||||
options: {
|
||||
priceLineVisible: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
[
|
||||
{ blueprints: option.top, paneIndex: 0 },
|
||||
{ blueprints: option.bottom, paneIndex: 1 },
|
||||
].forEach(({ blueprints, paneIndex }) => {
|
||||
const unit = paneIndex ? bottomUnit : topUnit;
|
||||
|
||||
blueprints[unit]?.forEach((blueprint) => {
|
||||
const indexes = /** @type {readonly number[]} */ (
|
||||
vecIdToIndexes[blueprint.key]
|
||||
);
|
||||
if (indexes.includes(index)) {
|
||||
switch (blueprint.type) {
|
||||
case "Baseline": {
|
||||
chart.addBaselineSeries({
|
||||
vecId: blueprint.key,
|
||||
// color: blueprint.color,
|
||||
name: blueprint.title,
|
||||
unit,
|
||||
defaultActive: blueprint.defaultActive,
|
||||
paneIndex,
|
||||
options: {
|
||||
...blueprint.options,
|
||||
topLineColor:
|
||||
blueprint.color?.() ?? blueprint.colors?.[0](),
|
||||
bottomLineColor:
|
||||
blueprint.color?.() ?? blueprint.colors?.[1](),
|
||||
},
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "Candlestick": {
|
||||
throw Error("TODO");
|
||||
break;
|
||||
}
|
||||
default:
|
||||
chart.addLineSeries({
|
||||
vecId: blueprint.key,
|
||||
color: blueprint.color,
|
||||
name: blueprint.title,
|
||||
unit,
|
||||
defaultActive: blueprint.defaultActive,
|
||||
paneIndex,
|
||||
options: blueprint.options,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
chart
|
||||
.inner()
|
||||
?.timeScale()
|
||||
.subscribeVisibleLogicalRangeChange(
|
||||
utils.debounce((t) => {
|
||||
if (t) {
|
||||
from.set(t.from);
|
||||
to.set(t.to);
|
||||
}
|
||||
}),
|
||||
);
|
||||
|
||||
firstRun = false;
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Object} args
|
||||
* @param {Elements} args.elements
|
||||
* @param {Signals} args.signals
|
||||
* @param {Utilities} args.utils
|
||||
*/
|
||||
function createIndexSelector({ elements, signals, utils }) {
|
||||
const { field, selected } = utils.dom.createHorizontalChoiceField({
|
||||
// title: "Index",
|
||||
defaultValue: "date",
|
||||
keyPrefix: "charts",
|
||||
key: "index",
|
||||
choices: /**@type {const} */ ([
|
||||
"timestamp",
|
||||
"date",
|
||||
"week",
|
||||
// "difficulty epoch",
|
||||
"month",
|
||||
"quarter",
|
||||
"year",
|
||||
// "halving epoch",
|
||||
"decade",
|
||||
]),
|
||||
id: "index",
|
||||
signals,
|
||||
});
|
||||
|
||||
const fieldset = window.document.createElement("fieldset");
|
||||
fieldset.append(field);
|
||||
fieldset.dataset.size = "sm";
|
||||
elements.charts.append(fieldset);
|
||||
|
||||
const index = signals.createMemo(
|
||||
/** @returns {ChartableIndex} */ () => {
|
||||
switch (selected()) {
|
||||
case "timestamp":
|
||||
return /** @satisfies {Height} */ (5);
|
||||
case "date":
|
||||
return /** @satisfies {DateIndex} */ (0);
|
||||
case "week":
|
||||
return /** @satisfies {WeekIndex} */ (22);
|
||||
case "month":
|
||||
return /** @satisfies {MonthIndex} */ (7);
|
||||
case "quarter":
|
||||
return /** @satisfies {QuarterIndex} */ (19);
|
||||
case "year":
|
||||
return /** @satisfies {YearIndex} */ (23);
|
||||
case "decade":
|
||||
return /** @satisfies {DecadeIndex} */ (1);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
return index;
|
||||
}
|
||||
2752
websites/default/scripts/main.js
Normal file
2752
websites/default/scripts/main.js
Normal file
File diff suppressed because it is too large
Load Diff
3312
websites/default/scripts/options.js
Normal file
3312
websites/default/scripts/options.js
Normal file
File diff suppressed because it is too large
Load Diff
76
websites/default/scripts/service-worker.js
Normal file
76
websites/default/scripts/service-worker.js
Normal file
@@ -0,0 +1,76 @@
|
||||
const version = "v1";
|
||||
|
||||
/** @type {ServiceWorkerGlobalScope} */
|
||||
const sw = /** @type {any} */ (self);
|
||||
|
||||
sw.addEventListener("install", (_event) => {
|
||||
console.log("sw: install");
|
||||
sw.skipWaiting();
|
||||
});
|
||||
|
||||
sw.addEventListener("activate", (event) => {
|
||||
console.log("sw: active");
|
||||
event.waitUntil(sw.clients.claim());
|
||||
});
|
||||
|
||||
sw.addEventListener("fetch", (event) => {
|
||||
let request = event.request;
|
||||
const method = request.method;
|
||||
let url = request.url;
|
||||
|
||||
const { pathname, origin } = new URL(url);
|
||||
|
||||
const slashMatches = url.match(/\//g);
|
||||
const dotMatches = pathname.split("/").at(-1)?.match(/./g);
|
||||
const endsWithDotHtml = pathname.endsWith(".html");
|
||||
const slashApiSlashMatches = url.match(/\/api\//g);
|
||||
|
||||
if (
|
||||
slashMatches &&
|
||||
slashMatches.length <= 3 &&
|
||||
!slashApiSlashMatches &&
|
||||
(!dotMatches || endsWithDotHtml)
|
||||
) {
|
||||
url = `${origin}/`;
|
||||
}
|
||||
request = new Request(url, request.mode !== "navigate" ? request : undefined);
|
||||
|
||||
console.log(request);
|
||||
|
||||
console.log(`service-worker: fetch ${url}`);
|
||||
|
||||
event.respondWith(
|
||||
caches.match(request).then(async (cachedResponse) => {
|
||||
return fetch(request)
|
||||
.then((response) => {
|
||||
const { status, type } = response;
|
||||
|
||||
if (method !== "GET" || slashApiSlashMatches) {
|
||||
// API calls are cached in script.js
|
||||
return response;
|
||||
} else if ((status === 200 || status === 304) && type === "basic") {
|
||||
if (status === 200) {
|
||||
const clonedResponse = response.clone();
|
||||
caches.open(version).then((cache) => {
|
||||
cache.put(request, clonedResponse);
|
||||
});
|
||||
}
|
||||
return response;
|
||||
} else {
|
||||
return cachedResponse || response;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log("service-worker: offline");
|
||||
|
||||
return (
|
||||
cachedResponse ||
|
||||
new Response("Offline", {
|
||||
status: 503,
|
||||
statusText: "Service Unavailable",
|
||||
})
|
||||
);
|
||||
});
|
||||
}),
|
||||
);
|
||||
});
|
||||
1162
websites/default/scripts/simulation.js
Normal file
1162
websites/default/scripts/simulation.js
Normal file
File diff suppressed because it is too large
Load Diff
531
websites/default/scripts/table.js
Normal file
531
websites/default/scripts/table.js
Normal file
@@ -0,0 +1,531 @@
|
||||
// @ts-check
|
||||
|
||||
/**
|
||||
* @param {Object} args
|
||||
* @param {VecIdToIndexes} args.vecIdToIndexes
|
||||
* @param {Option} args.option
|
||||
* @param {Utilities} args.utils
|
||||
* @param {Signals} args.signals
|
||||
* @param {VecsResources} args.vecsResources
|
||||
*/
|
||||
function createTable({
|
||||
utils,
|
||||
vecIdToIndexes,
|
||||
signals,
|
||||
option,
|
||||
vecsResources,
|
||||
}) {
|
||||
const indexToVecIds = createIndexToVecIds(vecIdToIndexes);
|
||||
|
||||
const serializedIndexes = createSerializedIndexes();
|
||||
/** @type {SerializedIndex} */
|
||||
const defaultSerializedIndex = "height";
|
||||
const serializedIndex = /** @type {Signal<SerializedIndex>} */ (
|
||||
signals.createSignal(
|
||||
/** @type {SerializedIndex} */ (defaultSerializedIndex),
|
||||
{
|
||||
save: {
|
||||
...utils.serde.string,
|
||||
keyPrefix: "table",
|
||||
key: "index",
|
||||
},
|
||||
},
|
||||
)
|
||||
);
|
||||
const index = signals.createMemo(() =>
|
||||
serializedIndexToIndex(serializedIndex()),
|
||||
);
|
||||
|
||||
const table = window.document.createElement("table");
|
||||
const obj = {
|
||||
element: table,
|
||||
/** @type {VoidFunction | undefined} */
|
||||
addRandomCol: undefined,
|
||||
};
|
||||
|
||||
signals.createEffect(index, (index, prevIndex) => {
|
||||
if (prevIndex !== undefined) {
|
||||
utils.url.resetParams(option);
|
||||
}
|
||||
|
||||
const possibleVecIds = indexToVecIds[index];
|
||||
|
||||
const columns = signals.createSignal(/** @type {VecId[]} */ ([]), {
|
||||
equals: false,
|
||||
save: {
|
||||
...utils.serde.vecIds,
|
||||
keyPrefix: `table-${serializedIndex()}`,
|
||||
key: `columns`,
|
||||
},
|
||||
});
|
||||
columns.set((l) => l.filter((id) => possibleVecIds.includes(id)));
|
||||
|
||||
signals.createEffect(columns, (columns) => {
|
||||
console.log(columns);
|
||||
});
|
||||
|
||||
table.innerHTML = "";
|
||||
const thead = window.document.createElement("thead");
|
||||
table.append(thead);
|
||||
const trHead = window.document.createElement("tr");
|
||||
thead.append(trHead);
|
||||
const tbody = window.document.createElement("tbody");
|
||||
table.append(tbody);
|
||||
|
||||
const rowElements = signals.createSignal(
|
||||
/** @type {HTMLTableRowElement[]} */ ([]),
|
||||
);
|
||||
|
||||
/**
|
||||
* @param {Object} args
|
||||
* @param {HTMLSelectElement} args.select
|
||||
* @param {Unit} [args.unit]
|
||||
* @param {(event: MouseEvent) => void} [args.onLeft]
|
||||
* @param {(event: MouseEvent) => void} [args.onRight]
|
||||
* @param {(event: MouseEvent) => void} [args.onRemove]
|
||||
*/
|
||||
function addThCol({ select, onLeft, onRight, onRemove, unit: _unit }) {
|
||||
const th = window.document.createElement("th");
|
||||
th.scope = "col";
|
||||
trHead.append(th);
|
||||
const div = window.document.createElement("div");
|
||||
div.append(select);
|
||||
// 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;
|
||||
}
|
||||
const moveLeft = utils.dom.createButtonElement({
|
||||
inside: "←",
|
||||
title: "Move column to the left",
|
||||
onClick: onLeft || (() => {}),
|
||||
});
|
||||
const moveRight = utils.dom.createButtonElement({
|
||||
inside: "→",
|
||||
title: "Move column to the right",
|
||||
onClick: onRight || (() => {}),
|
||||
});
|
||||
const remove = utils.dom.createButtonElement({
|
||||
inside: "×",
|
||||
title: "Remove column",
|
||||
onClick: onRemove || (() => {}),
|
||||
});
|
||||
bottom.append(unit);
|
||||
bottom.append(moveLeft);
|
||||
bottom.append(moveRight);
|
||||
bottom.append(remove);
|
||||
div.append(bottom);
|
||||
th.append(div);
|
||||
return {
|
||||
element: th,
|
||||
/**
|
||||
* @param {Unit} _unit
|
||||
*/
|
||||
setUnit(_unit) {
|
||||
unit.innerHTML = _unit;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
addThCol({
|
||||
...utils.dom.createSelect({
|
||||
list: serializedIndexes,
|
||||
signal: serializedIndex,
|
||||
}),
|
||||
unit: "Index",
|
||||
});
|
||||
|
||||
let from = 0;
|
||||
let to = 0;
|
||||
|
||||
vecsResources
|
||||
.getOrCreate(index, serializedIndex())
|
||||
.fetch()
|
||||
.then((vec) => {
|
||||
if (!vec) return;
|
||||
from = /** @type {number} */ (vec[0]);
|
||||
to = /** @type {number} */ (vec.at(-1)) + 1;
|
||||
const trs = /** @type {HTMLTableRowElement[]} */ ([]);
|
||||
for (let i = vec.length - 1; i >= 0; i--) {
|
||||
const value = vec[i];
|
||||
const tr = window.document.createElement("tr");
|
||||
trs.push(tr);
|
||||
tbody.append(tr);
|
||||
const th = window.document.createElement("th");
|
||||
th.innerHTML = serializeValue({
|
||||
value,
|
||||
unit: "Index",
|
||||
});
|
||||
th.scope = "row";
|
||||
tr.append(th);
|
||||
}
|
||||
rowElements.set(() => trs);
|
||||
});
|
||||
|
||||
const owner = signals.getOwner();
|
||||
|
||||
/**
|
||||
* @param {VecId} vecId
|
||||
* @param {number} [_colIndex]
|
||||
*/
|
||||
function addCol(vecId, _colIndex = columns().length) {
|
||||
signals.runWithOwner(owner, () => {
|
||||
/** @type {VoidFunction | undefined} */
|
||||
let dispose;
|
||||
signals.createRoot((_dispose) => {
|
||||
dispose = _dispose;
|
||||
|
||||
const vecIdOption = signals.createSignal({
|
||||
name: vecId,
|
||||
value: vecId,
|
||||
});
|
||||
const { select } = utils.dom.createSelect({
|
||||
list: possibleVecIds.map((vecId) => ({
|
||||
name: vecId,
|
||||
value: vecId,
|
||||
})),
|
||||
signal: vecIdOption,
|
||||
});
|
||||
|
||||
if (_colIndex === columns().length) {
|
||||
columns.set((l) => {
|
||||
l.push(vecId);
|
||||
return l;
|
||||
});
|
||||
}
|
||||
|
||||
const colIndex = signals.createSignal(_colIndex);
|
||||
|
||||
/**
|
||||
* @param {boolean} right
|
||||
* @returns {(event: MouseEvent) => void}
|
||||
*/
|
||||
function createMoveColumnFunction(right) {
|
||||
return () => {
|
||||
const oldColIndex = colIndex();
|
||||
const newColIndex = oldColIndex + (right ? 1 : -1);
|
||||
|
||||
const currentTh = /** @type {HTMLTableCellElement} */ (
|
||||
trHead.childNodes[oldColIndex + 1]
|
||||
);
|
||||
const oterTh = /** @type {HTMLTableCellElement} */ (
|
||||
trHead.childNodes[newColIndex + 1]
|
||||
);
|
||||
|
||||
if (right) {
|
||||
oterTh.after(currentTh);
|
||||
} else {
|
||||
oterTh.before(currentTh);
|
||||
}
|
||||
|
||||
columns.set((l) => {
|
||||
[l[oldColIndex], l[newColIndex]] = [
|
||||
l[newColIndex],
|
||||
l[oldColIndex],
|
||||
];
|
||||
return l;
|
||||
});
|
||||
|
||||
const rows = rowElements();
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
const element = rows[i].childNodes[oldColIndex + 1];
|
||||
const sibling = rows[i].childNodes[newColIndex + 1];
|
||||
const temp = element.textContent;
|
||||
element.textContent = sibling.textContent;
|
||||
sibling.textContent = temp;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const th = addThCol({
|
||||
select,
|
||||
unit: utils.vecidToUnit(vecId),
|
||||
onLeft: createMoveColumnFunction(false),
|
||||
onRight: createMoveColumnFunction(true),
|
||||
onRemove: () => {
|
||||
const ci = colIndex();
|
||||
trHead.childNodes[ci + 1].remove();
|
||||
columns.set((l) => {
|
||||
l.splice(ci, 1);
|
||||
return l;
|
||||
});
|
||||
const rows = rowElements();
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
rows[i].childNodes[ci + 1].remove();
|
||||
}
|
||||
dispose?.();
|
||||
},
|
||||
});
|
||||
|
||||
signals.createEffect(columns, () => {
|
||||
colIndex.set(Array.from(trHead.children).indexOf(th.element) - 1);
|
||||
});
|
||||
|
||||
console.log(colIndex());
|
||||
|
||||
signals.createEffect(rowElements, (rowElements) => {
|
||||
if (!rowElements.length) return;
|
||||
for (let i = 0; i < rowElements.length; i++) {
|
||||
const td = window.document.createElement("td");
|
||||
rowElements[i].append(td);
|
||||
}
|
||||
|
||||
signals.createEffect(
|
||||
() => vecIdOption().name,
|
||||
(vecId, prevVecId) => {
|
||||
const unit = utils.vecidToUnit(vecId);
|
||||
th.setUnit(unit);
|
||||
|
||||
const vec = vecsResources.getOrCreate(index, vecId);
|
||||
|
||||
vec.fetch({ from, to });
|
||||
|
||||
const fetchedKey = vecsResources.genFetchedKey({ from, to });
|
||||
|
||||
columns.set((l) => {
|
||||
const i = l.indexOf(prevVecId ?? vecId);
|
||||
if (i === -1) {
|
||||
l.push(vecId);
|
||||
} else {
|
||||
l[i] = vecId;
|
||||
}
|
||||
return l;
|
||||
});
|
||||
|
||||
signals.createEffect(vec.fetched[fetchedKey].vec, (vec) => {
|
||||
if (!vec) return;
|
||||
|
||||
const thIndex = colIndex() + 1;
|
||||
|
||||
for (let i = 0; i < rowElements.length; i++) {
|
||||
const iRev = vec.length - 1 - i;
|
||||
const value = vec[iRev];
|
||||
// @ts-ignore
|
||||
rowElements[i].childNodes[thIndex].innerHTML =
|
||||
serializeValue({
|
||||
value,
|
||||
unit,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return () => vecId;
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
signals.onCleanup(() => {
|
||||
dispose?.();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
columns().forEach((vecId, colIndex) => addCol(vecId, colIndex));
|
||||
|
||||
obj.addRandomCol = function () {
|
||||
const vecId =
|
||||
possibleVecIds[Math.floor(Math.random() * possibleVecIds.length)];
|
||||
addCol(vecId);
|
||||
};
|
||||
|
||||
return () => index;
|
||||
});
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Object} args
|
||||
* @param {Colors} args.colors
|
||||
* @param {Signals} args.signals
|
||||
* @param {Utilities} args.utils
|
||||
* @param {Option} args.option
|
||||
* @param {Elements} args.elements
|
||||
* @param {VecsResources} args.vecsResources
|
||||
* @param {VecIdToIndexes} args.vecIdToIndexes
|
||||
*/
|
||||
export function init({
|
||||
colors,
|
||||
elements,
|
||||
signals,
|
||||
option,
|
||||
utils,
|
||||
vecsResources,
|
||||
vecIdToIndexes,
|
||||
}) {
|
||||
const parent = elements.table;
|
||||
const { headerElement } = utils.dom.createHeader({
|
||||
title: "Table",
|
||||
});
|
||||
parent.append(headerElement);
|
||||
|
||||
const div = window.document.createElement("div");
|
||||
parent.append(div);
|
||||
|
||||
const table = createTable({
|
||||
signals,
|
||||
utils,
|
||||
vecIdToIndexes,
|
||||
vecsResources,
|
||||
option,
|
||||
});
|
||||
div.append(table.element);
|
||||
|
||||
const span = window.document.createElement("span");
|
||||
span.innerHTML = "Add column";
|
||||
div.append(
|
||||
utils.dom.createButtonElement({
|
||||
onClick: () => {
|
||||
table.addRandomCol?.();
|
||||
},
|
||||
inside: span,
|
||||
title: "Click or tap to add a column to the table",
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
function createSerializedIndexes() {
|
||||
return /** @type {const} */ ([
|
||||
/** @satisfies {VecId} */ ("dateindex"),
|
||||
/** @satisfies {VecId} */ ("decadeindex"),
|
||||
/** @satisfies {VecId} */ ("difficultyepoch"),
|
||||
/** @satisfies {VecId} */ ("emptyoutputindex"),
|
||||
/** @satisfies {VecId} */ ("halvingepoch"),
|
||||
/** @satisfies {VecId} */ ("height"),
|
||||
/** @satisfies {VecId} */ ("inputindex"),
|
||||
/** @satisfies {VecId} */ ("monthindex"),
|
||||
/** @satisfies {VecId} */ ("opreturnindex"),
|
||||
/** @satisfies {VecId} */ ("outputindex"),
|
||||
/** @satisfies {VecId} */ ("p2aindex"),
|
||||
/** @satisfies {VecId} */ ("p2msindex"),
|
||||
/** @satisfies {VecId} */ ("p2pk33index"),
|
||||
/** @satisfies {VecId} */ ("p2pk65index"),
|
||||
/** @satisfies {VecId} */ ("p2pkhindex"),
|
||||
/** @satisfies {VecId} */ ("p2shindex"),
|
||||
/** @satisfies {VecId} */ ("p2trindex"),
|
||||
/** @satisfies {VecId} */ ("p2wpkhindex"),
|
||||
/** @satisfies {VecId} */ ("p2wshindex"),
|
||||
/** @satisfies {VecId} */ ("quarterindex"),
|
||||
/** @satisfies {VecId} */ ("txindex"),
|
||||
/** @satisfies {VecId} */ ("unknownoutputindex"),
|
||||
/** @satisfies {VecId} */ ("weekindex"),
|
||||
/** @satisfies {VecId} */ ("yearindex"),
|
||||
]);
|
||||
}
|
||||
/** @typedef {ReturnType<typeof createSerializedIndexes>} SerializedIndexes */
|
||||
/** @typedef {SerializedIndexes[number]} SerializedIndex */
|
||||
|
||||
/**
|
||||
* @param {SerializedIndex} serializedIndex
|
||||
* @returns {Index}
|
||||
*/
|
||||
function serializedIndexToIndex(serializedIndex) {
|
||||
switch (serializedIndex) {
|
||||
case "height":
|
||||
return /** @satisfies {Height} */ (5);
|
||||
case "dateindex":
|
||||
return /** @satisfies {DateIndex} */ (0);
|
||||
case "weekindex":
|
||||
return /** @satisfies {WeekIndex} */ (22);
|
||||
case "difficultyepoch":
|
||||
return /** @satisfies {DifficultyEpoch} */ (2);
|
||||
case "monthindex":
|
||||
return /** @satisfies {MonthIndex} */ (7);
|
||||
case "quarterindex":
|
||||
return /** @satisfies {QuarterIndex} */ (19);
|
||||
case "yearindex":
|
||||
return /** @satisfies {YearIndex} */ (23);
|
||||
case "decadeindex":
|
||||
return /** @satisfies {DecadeIndex} */ (1);
|
||||
case "halvingepoch":
|
||||
return /** @satisfies {HalvingEpoch} */ (4);
|
||||
case "txindex":
|
||||
return /** @satisfies {TxIndex} */ (20);
|
||||
case "inputindex":
|
||||
return /** @satisfies {InputIndex} */ (6);
|
||||
case "outputindex":
|
||||
return /** @satisfies {OutputIndex} */ (9);
|
||||
case "p2pk33index":
|
||||
return /** @satisfies {P2PK33Index} */ (12);
|
||||
case "p2pk65index":
|
||||
return /** @satisfies {P2PK65Index} */ (13);
|
||||
case "p2pkhindex":
|
||||
return /** @satisfies {P2PKHIndex} */ (14);
|
||||
case "p2shindex":
|
||||
return /** @satisfies {P2SHIndex} */ (15);
|
||||
case "p2trindex":
|
||||
return /** @satisfies {P2TRIndex} */ (16);
|
||||
case "p2wpkhindex":
|
||||
return /** @satisfies {P2WPKHIndex} */ (17);
|
||||
case "p2wshindex":
|
||||
return /** @satisfies {P2WSHIndex} */ (18);
|
||||
case "p2aindex":
|
||||
return /** @satisfies {P2AIndex} */ (10);
|
||||
case "p2msindex":
|
||||
return /** @satisfies {P2MSIndex} */ (11);
|
||||
case "opreturnindex":
|
||||
return /** @satisfies {OpReturnIndex} */ (8);
|
||||
case "emptyoutputindex":
|
||||
return /** @satisfies {EmptyOutputIndex} */ (3);
|
||||
case "unknownoutputindex":
|
||||
return /** @satisfies {UnknownOutputIndex} */ (21);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {VecIdToIndexes} vecIdToIndexes
|
||||
*/
|
||||
function createIndexToVecIds(vecIdToIndexes) {
|
||||
const indexToVecIds = Object.entries(vecIdToIndexes).reduce(
|
||||
(arr, [_id, indexes]) => {
|
||||
const id = /** @type {VecId} */ (_id);
|
||||
indexes.forEach((i) => {
|
||||
arr[i] ??= [];
|
||||
arr[i].push(id);
|
||||
});
|
||||
return arr;
|
||||
},
|
||||
/** @type {VecId[][]} */ (new Array(24)),
|
||||
);
|
||||
indexToVecIds.forEach((arr) => {
|
||||
arr.sort();
|
||||
});
|
||||
return indexToVecIds;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Object} args
|
||||
* @param {number | OHLCTuple} args.value
|
||||
* @param {Unit} args.unit
|
||||
*/
|
||||
function serializeValue({ value, unit }) {
|
||||
if (typeof value !== "number") {
|
||||
return String(value);
|
||||
} else if (value !== 18446744073709552000) {
|
||||
if (unit === "USD" || unit === "Difficulty" || unit === "sat/vB") {
|
||||
return value.toLocaleString("en-us", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
} else if (unit === "BTC") {
|
||||
return value.toLocaleString("en-us", {
|
||||
minimumFractionDigits: 8,
|
||||
maximumFractionDigits: 8,
|
||||
});
|
||||
} else {
|
||||
return value.toLocaleString("en-us");
|
||||
}
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
9041
websites/default/scripts/vecid-to-indexes.js
Normal file
9041
websites/default/scripts/vecid-to-indexes.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user