// @ts-check /** * @import { Options } from './options'; * @import { ColorName, Frequencies, Frequency } from './types/self'; */ /** * @param {Object} args * @param {Colors} args.colors * @param {LightweightCharts} args.lightweightCharts * @param {Signals} args.signals * @param {Utilities} args.utils * @param {Datasets} args.datasets * @param {Elements} args.elements * @param {Signal} args.lastValues */ export function init({ colors, datasets, elements, lightweightCharts, signals, utils, lastValues, }) { const simulationElement = elements.simulation; const parametersElement = window.document.createElement("div"); simulationElement.append(parametersElement); const resultsElement = window.document.createElement("div"); simulationElement.append(resultsElement); const frequencies = computeFrequencies(); const keyPrefix = "save-in-bitcoin"; const settings = { dollars: { initial: { amount: signals.createSignal(/** @type {number | null} */ (1000), { save: { ...utils.serde.number, keyPrefix, key: "initial-amount", }, }), }, topUp: { amount: signals.createSignal(/** @type {number | null} */ (150), { save: { ...utils.serde.number, keyPrefix, key: "top-up-amount", }, }), frenquency: signals.createSignal( /** @type {Frequency} */ (frequencies.list[3].list[0]), { save: { ...frequencies.serde, keyPrefix, key: "top-up-freq", }, }, ), }, }, bitcoin: { investment: { initial: signals.createSignal(/** @type {number | null} */ (1000), { save: { ...utils.serde.number, keyPrefix, key: "initial-swap", }, }), recurrent: signals.createSignal(/** @type {number | null} */ (5), { save: { ...utils.serde.number, keyPrefix, key: "recurrent-swap", }, }), frequency: signals.createSignal( /** @type {Frequency} */ (frequencies.list[0]), { save: { ...frequencies.serde, keyPrefix, key: "swap-freq", }, }, ), }, }, interval: { start: signals.createSignal( /** @type {Date | null} */ (new Date("2021-04-15")), { save: { ...utils.serde.date, keyPrefix, key: "interval-start", }, }, ), end: signals.createSignal(/** @type {Date | null} */ (new Date()), { save: { ...utils.serde.date, keyPrefix, key: "interval-end", }, }), }, fees: { percentage: signals.createSignal(/** @type {number | null} */ (0.25), { save: { ...utils.serde.number, keyPrefix, key: "percentage", }, }), }, }; parametersElement.append( utils.dom.createHeader({ title: "Save in Bitcoin", description: "What if you bought Bitcoin in the past ?", }).headerElement, ); /** * @param {Object} param0 * @param {ColorName} param0.color * @param {string} param0.type * @param {string} param0.text */ function createColoredTypeHTML({ color, type, text }) { return `${createColoredSpan({ color, text: `${type}:` })} ${text}`; } /** * @param {Object} param0 * @param {ColorName} param0.color * @param {string} param0.text */ function createColoredSpan({ color, text }) { return `${text}`; } parametersElement.append( utils.dom.createFieldElement({ title: createColoredTypeHTML({ color: "green", type: "Dollars", text: "Initial Amount", }), description: "The amount of dollars you have ready on the exchange on day one.", input: utils.dom.createResetableInput( utils.dom.createInputDollar({ id: "simulation-dollars-initial", title: "Initial Dollar Amount", signal: settings.dollars.initial.amount, signals, }), ), }), ); parametersElement.append( utils.dom.createFieldElement({ title: createColoredTypeHTML({ color: "green", type: "Dollars", text: "Top Up Frequency", }), description: "The frequency at which you'll top up your account at the exchange.", input: utils.dom.createResetableInput( utils.dom.createSelect({ id: "top-up-frequency", list: frequencies.list, signal: settings.dollars.topUp.frenquency, }), ), }), ); parametersElement.append( utils.dom.createFieldElement({ title: createColoredTypeHTML({ color: "green", type: "Dollars", text: "Top Up Amount", }), description: "The recurrent amount of dollars you'll be transfering to said exchange.", input: utils.dom.createResetableInput( utils.dom.createInputDollar({ id: "simulation-dollars-top-up-amount", title: "Top Up Dollar Amount", signal: settings.dollars.topUp.amount, signals, }), ), }), ); parametersElement.append( utils.dom.createFieldElement({ title: createColoredTypeHTML({ color: "orange", type: "Bitcoin", text: "Initial Investment", }), description: "The amount, if available, of dollars that will be used to buy Bitcoin on day one.", input: utils.dom.createResetableInput( utils.dom.createInputDollar({ id: "simulation-bitcoin-initial-investment", title: "Initial Swap Amount", signal: settings.bitcoin.investment.initial, signals, }), ), }), ); parametersElement.append( utils.dom.createFieldElement({ title: createColoredTypeHTML({ color: "orange", type: "Bitcoin", text: "Investment Frequency", }), description: "The frequency at which you'll be buying Bitcoin.", input: utils.dom.createResetableInput( utils.dom.createSelect({ id: "investment-frequency", list: frequencies.list, signal: settings.bitcoin.investment.frequency, }), ), }), ); parametersElement.append( utils.dom.createFieldElement({ title: createColoredTypeHTML({ color: "orange", type: "Bitcoin", text: "Recurrent Investment", }), description: "The recurrent amount, if available, of dollars that will be used to buy Bitcoin.", input: utils.dom.createResetableInput( utils.dom.createInputDollar({ id: "simulation-bitcoin-recurrent-investment", title: "Bitcoin Recurrent Investment", signal: settings.bitcoin.investment.recurrent, signals, }), ), }), ); parametersElement.append( utils.dom.createFieldElement({ title: createColoredTypeHTML({ color: "sky", type: "Interval", text: "Start", }), description: "The first day of the simulation.", input: utils.dom.createResetableInput( utils.dom.createInputDate({ id: "simulation-inverval-start", title: "First Simulation Date", signal: settings.interval.start, signals, }), ), }), ); parametersElement.append( utils.dom.createFieldElement({ title: createColoredTypeHTML({ color: "sky", type: "Interval", text: "End", }), description: "The last day of the simulation.", input: utils.dom.createResetableInput( utils.dom.createInputDate({ id: "simulation-inverval-end", title: "Last Simulation Day", signal: settings.interval.end, signals, }), ), }), ); parametersElement.append( utils.dom.createFieldElement({ title: createColoredTypeHTML({ color: "red", type: "Fees", text: "Exchange", }), description: "The amount of trading fees (in %) at the exchange.", input: utils.dom.createResetableInput( utils.dom.createInputNumberElement({ id: "simulation-fees", title: "Exchange Fees", signal: settings.fees.percentage, min: 0, max: 50, step: 0.01, signals, placeholder: "Fees", }), ), }), ); const p1 = window.document.createElement("p"); resultsElement.append(p1); const p2 = window.document.createElement("p"); resultsElement.append(p2); const p3 = window.document.createElement("p"); resultsElement.append(p3); const p4 = window.document.createElement("p"); resultsElement.append(p4); const owner = signals.getOwner(); const totalInvestedAmountData = signals.createSignal( /** @type {LineData