Mirror/brk
1
0
Fork 0
mirror of https://github.com/bitcoinresearchkit/brk.git synced 2026-05-31 02:03:38 -07:00
Code Issues Packages Projects Releases Wiki Activity

bitview: reorg part 2

Browse Source
This commit is contained in:
nym21
2025-09-23 19:58:34 +02:00
parent 5b6ce5d8ee
commit d45686128e
21 changed files with 1803 additions and 1810 deletions
Download Patch File Download Diff File Expand all files Collapse all files
websites/bitview/scripts/panes/chart.js
+17 -13
View File
@@ -1,4 +1,9 @@
// @ts-check
import {
createShadow,
createHorizontalChoiceField,
createHeader,
} from "../core/dom";
import { throttle } from "../core/scheduling";
const keyPrefix = "chart";
const ONE_BTC_IN_SATS = 100_000_000;
@@ -7,7 +12,7 @@ const LINE = "line";
const CANDLE = "candle";
/**
* @typedef {"timestamp" | "date" | "week" | "d.epoch" | "month" | "quarter" | "semester" | "year" | "decade" } SerializedChartableIndex
* @typedef {"timestamp" | "date" | "week" | "epoch" | "month" | "quarter" | "semester" | "year" | "decade" } SerializedChartableIndex
*/
/**
@@ -37,10 +42,10 @@ export function init({
vecIdToIndexes,
packages,
}) {
elements.charts.append(utils.dom.createShadow("left"));
elements.charts.append(utils.dom.createShadow("right"));
elements.charts.append(createShadow("left"));
elements.charts.append(createShadow("right"));
const { headerElement, headingElement } = utils.dom.createHeader();
const { headerElement, headingElement } = createHeader();
elements.charts.append(headerElement);
const { index, fieldset } = createIndexSelector({
@@ -99,7 +104,6 @@ export function init({
},
});
console.log(env.ios, "canShare" in navigator);
if (!(env.ios && !("canShare" in navigator))) {
const chartBottomRightCanvas = Array.from(
chart.inner.chartElement().getElementsByTagName("tr"),
@@ -136,7 +140,7 @@ export function init({
}
chart.inner.timeScale().subscribeVisibleLogicalRangeChange(
utils.throttle((t) => {
throttle((t) => {
if (!t) return;
from.set(t.from);
to.set(t.to);
@@ -146,7 +150,7 @@ export function init({
elements.charts.append(fieldset);
const { field: seriesTypeField, selected: topSeriesType_ } =
utils.dom.createHorizontalChoiceField({
createHorizontalChoiceField({
defaultValue: CANDLE,
keyPrefix,
key: "seriestype-0",
@@ -172,7 +176,7 @@ export function init({
});
const { field: topUnitField, selected: topUnit } =
utils.dom.createHorizontalChoiceField({
createHorizontalChoiceField({
defaultValue: "usd",
keyPrefix,
key: "unit-0",
@@ -289,7 +293,7 @@ export function init({
Object.keys(option.bottom)
);
const { field: bottomUnitField, selected: bottomUnit } =
utils.dom.createHorizontalChoiceField({
createHorizontalChoiceField({
defaultValue: bottomUnits.at(0) || "",
keyPrefix,
key: "unit-1",
@@ -523,12 +527,12 @@ function createIndexSelector({ option, vecIdToIndexes, signals, utils }) {
"timestamp",
"date",
"week",
"d.epoch",
"epoch",
"month",
"quarter",
"semester",
"year",
// "halving epoch",
// "h.epoch",
"decade",
]);
@@ -557,7 +561,7 @@ function createIndexSelector({ option, vecIdToIndexes, signals, utils }) {
);
});
const { field, selected } = utils.dom.createHorizontalChoiceField({
const { field, selected } = createHorizontalChoiceField({
defaultValue: "date",
keyPrefix,
key: "index",
websites/bitview/scripts/panes/explorer.js
-1
View File
@@ -1,4 +1,3 @@
// @ts-check
/**
* @param {Object} args
websites/bitview/scripts/panes/simulation.js
+41 -40
View File
@@ -1,4 +1,3 @@
// @ts-check
/**
* @param {Object} args
@@ -6,6 +5,8 @@
* @param {CreateChartElement} args.createChartElement
* @param {Signals} args.signals
* @param {Utilities} args.utils
* @param {Serde} args.serde
* @param {Dom} args.dom
* @param {Elements} args.elements
* @param {VecsResources} args.vecsResources
*/
@@ -14,6 +15,8 @@ export function init({
elements,
createChartElement,
signals,
serde,
dom,
utils,
vecsResources,
}) {
@@ -30,7 +33,7 @@ export function init({
const simulationElement = elements.simulation;
const dom = {
const domExtended = {
/**
* @param {Object} args
* @param {string} args.id
@@ -166,7 +169,7 @@ export function init({
if (!element) throw "createResetableField element missing";
div.append(element);
const button = utils.dom.createButtonElement({
const button = dom.createButtonElement({
onClick: signal.reset,
inside: "Reset",
title: "Reset field",
@@ -306,7 +309,7 @@ export function init({
initial: {
amount: signals.createSignal(/** @type {number | null} */ (1000), {
save: {
...utils.serde.optNumber,
...serde.optNumber,
keyPrefix,
key: "initial-amount",
},
@@ -315,7 +318,7 @@ export function init({
topUp: {
amount: signals.createSignal(/** @type {number | null} */ (150), {
save: {
...utils.serde.optNumber,
...serde.optNumber,
keyPrefix,
key: "top-up-amount",
},
@@ -336,14 +339,14 @@ export function init({
investment: {
initial: signals.createSignal(/** @type {number | null} */ (1000), {
save: {
...utils.serde.optNumber,
...serde.optNumber,
keyPrefix,
key: "initial-swap",
},
}),
recurrent: signals.createSignal(/** @type {number | null} */ (5), {
save: {
...utils.serde.optNumber,
...serde.optNumber,
keyPrefix,
key: "recurrent-swap",
},
@@ -365,7 +368,7 @@ export function init({
/** @type {Date | null} */ (new Date("2021-04-15")),
{
save: {
...utils.serde.optDate,
...serde.optDate,
keyPrefix,
key: "interval-start",
},
@@ -373,7 +376,7 @@ export function init({
),
end: signals.createSignal(/** @type {Date | null} */ (new Date()), {
save: {
...utils.serde.optDate,
...serde.optDate,
keyPrefix,
key: "interval-end",
},
@@ -382,7 +385,7 @@ export function init({
fees: {
percentage: signals.createSignal(/** @type {number | null} */ (0.25), {
save: {
...utils.serde.optNumber,
...serde.optNumber,
keyPrefix,
key: "percentage",
},
@@ -390,9 +393,7 @@ export function init({
},
};
parametersElement.append(
utils.dom.createHeader("Save in Bitcoin").headerElement,
);
parametersElement.append(dom.createHeader("Save in Bitcoin").headerElement);
/**
* @param {Object} param0
@@ -417,7 +418,7 @@ export function init({
}
parametersElement.append(
utils.dom.createFieldElement({
dom.createFieldElement({
title: createColoredTypeHTML({
color: "green",
type: "Dollars",
@@ -425,8 +426,8 @@ export function init({
}),
description:
"The amount of dollars you have ready on the exchange on day one.",
input: dom.createResetableInput(
dom.createInputDollar({
input: domExtended.createResetableInput(
domExtended.createInputDollar({
id: "simulation-dollars-initial",
title: "Initial Dollar Amount",
signal: settings.dollars.initial.amount,
@@ -437,7 +438,7 @@ export function init({
);
parametersElement.append(
utils.dom.createFieldElement({
dom.createFieldElement({
title: createColoredTypeHTML({
color: "green",
type: "Dollars",
@@ -445,8 +446,8 @@ export function init({
}),
description:
"The frequency at which you'll top up your account at the exchange.",
input: dom.createResetableInput(
utils.dom.createSelect({
input: domExtended.createResetableInput(
dom.createSelect({
id: "top-up-frequency",
list: frequencies.list,
signal: settings.dollars.topUp.frenquency,
@@ -457,7 +458,7 @@ export function init({
);
parametersElement.append(
utils.dom.createFieldElement({
dom.createFieldElement({
title: createColoredTypeHTML({
color: "green",
type: "Dollars",
@@ -465,8 +466,8 @@ export function init({
}),
description:
"The recurrent amount of dollars you'll be transfering to said exchange.",
input: dom.createResetableInput(
dom.createInputDollar({
input: domExtended.createResetableInput(
domExtended.createInputDollar({
id: "simulation-dollars-top-up-amount",
title: "Top Up Dollar Amount",
signal: settings.dollars.topUp.amount,
@@ -477,7 +478,7 @@ export function init({
);
parametersElement.append(
utils.dom.createFieldElement({
dom.createFieldElement({
title: createColoredTypeHTML({
color: "orange",
type: "Bitcoin",
@@ -485,8 +486,8 @@ export function init({
}),
description:
"The amount, if available, of dollars that will be used to buy Bitcoin on day one.",
input: dom.createResetableInput(
dom.createInputDollar({
input: domExtended.createResetableInput(
domExtended.createInputDollar({
id: "simulation-bitcoin-initial-investment",
title: "Initial Swap Amount",
signal: settings.bitcoin.investment.initial,
@@ -497,15 +498,15 @@ export function init({
);
parametersElement.append(
utils.dom.createFieldElement({
dom.createFieldElement({
title: createColoredTypeHTML({
color: "orange",
type: "Bitcoin",
text: "Investment Frequency",
}),
description: "The frequency at which you'll be buying Bitcoin.",
input: dom.createResetableInput(
utils.dom.createSelect({
input: domExtended.createResetableInput(
dom.createSelect({
id: "investment-frequency",
list: frequencies.list,
signal: settings.bitcoin.investment.frequency,
@@ -516,7 +517,7 @@ export function init({
);
parametersElement.append(
utils.dom.createFieldElement({
dom.createFieldElement({
title: createColoredTypeHTML({
color: "orange",
type: "Bitcoin",
@@ -524,8 +525,8 @@ export function init({
}),
description:
"The recurrent amount, if available, of dollars that will be used to buy Bitcoin.",
input: dom.createResetableInput(
dom.createInputDollar({
input: domExtended.createResetableInput(
domExtended.createInputDollar({
id: "simulation-bitcoin-recurrent-investment",
title: "Bitcoin Recurrent Investment",
signal: settings.bitcoin.investment.recurrent,
@@ -536,15 +537,15 @@ export function init({
);
parametersElement.append(
utils.dom.createFieldElement({
dom.createFieldElement({
title: createColoredTypeHTML({
color: "sky",
type: "Interval",
text: "Start",
}),
description: "The first day of the simulation.",
input: dom.createResetableInput(
dom.createInputDate({
input: domExtended.createResetableInput(
domExtended.createInputDate({
id: "simulation-inverval-start",
title: "First Simulation Date",
signal: settings.interval.start,
@@ -555,15 +556,15 @@ export function init({
);
parametersElement.append(
utils.dom.createFieldElement({
dom.createFieldElement({
title: createColoredTypeHTML({
color: "sky",
type: "Interval",
text: "End",
}),
description: "The last day of the simulation.",
input: dom.createResetableInput(
dom.createInputDate({
input: domExtended.createResetableInput(
domExtended.createInputDate({
id: "simulation-inverval-end",
title: "Last Simulation Day",
signal: settings.interval.end,
@@ -574,15 +575,15 @@ export function init({
);
parametersElement.append(
utils.dom.createFieldElement({
dom.createFieldElement({
title: createColoredTypeHTML({
color: "red",
type: "Fees",
text: "Exchange",
}),
description: "The amount of trading fees (in %) at the exchange.",
input: dom.createResetableInput(
dom.createInputNumberElement({
input: domExtended.createResetableInput(
domExtended.createInputNumberElement({
id: "simulation-fees",
title: "Exchange Fees",
signal: settings.fees.percentage,
websites/bitview/scripts/panes/table.js
+9 -9
View File
@@ -1,4 +1,4 @@
// @ts-check
import { createButtonElement, createSelect } from "../core/dom";
/**
* @param {Object} args
@@ -94,7 +94,7 @@ function createTable({
// div.append(top);
// top.append(select);
// top.append(
// utils.dom.createAnchorElement({
// createAnchorElement({
// href: "",
// blank: true,
// }),
@@ -104,17 +104,17 @@ function createTable({
if (_unit) {
unit.innerHTML = _unit;
}
const moveLeft = utils.dom.createButtonElement({
const moveLeft = createButtonElement({
inside: "←",
title: "Move column to the left",
onClick: onLeft || (() => {}),
});
const moveRight = utils.dom.createButtonElement({
const moveRight = createButtonElement({
inside: "→",
title: "Move column to the right",
onClick: onRight || (() => {}),
});
const remove = utils.dom.createButtonElement({
const remove = createButtonElement({
inside: "×",
title: "Remove column",
onClick: onRemove || (() => {}),
@@ -137,7 +137,7 @@ function createTable({
}
addThCol({
...utils.dom.createSelect({
...createSelect({
list: serializedIndexes,
signal: serializedIndex,
}),
@@ -188,7 +188,7 @@ function createTable({
name: vecId,
value: vecId,
});
const { select } = utils.dom.createSelect({
const { select } = createSelect({
list: possibleVecIds.map((vecId) => ({
name: vecId,
value: vecId,
@@ -367,7 +367,7 @@ export function init({
vecIdToIndexes,
}) {
const parent = elements.table;
const { headerElement } = utils.dom.createHeader("Table");
const { headerElement } = createHeader("Table");
parent.append(headerElement);
const div = window.document.createElement("div");
@@ -385,7 +385,7 @@ export function init({
const span = window.document.createElement("span");
span.innerHTML = "Add column";
div.append(
utils.dom.createButtonElement({
createButtonElement({
onClick: () => {
table.addRandomCol?.();
},