diff --git a/website/index.html b/website/index.html index 98e367145..3fa0717df 100644 --- a/website/index.html +++ b/website/index.html @@ -658,6 +658,7 @@ &:focus-visible { border: 0; + outline: none; } } diff --git a/website/scripts/chart.js b/website/scripts/chart.js index b905451a7..14f26da1d 100644 --- a/website/scripts/chart.js +++ b/website/scripts/chart.js @@ -809,7 +809,7 @@ export function init({ const chart = addChart({ chartIndex, scale, - unit: option.unit || "US Dollars", + unit: chartIndex ? option.unit : "US Dollars", whitespace: true, }); diff --git a/website/scripts/main.js b/website/scripts/main.js index b648f2023..27b8540fe 100644 --- a/website/scripts/main.js +++ b/website/scripts/main.js @@ -662,10 +662,10 @@ function initPackages() { const id = `chart-${chartId}-${chartIndex}-mode`; - const chartModes = /** @type {const} */ (["Linear", "Log"]); + const chartModes = /** @type {const} */ (["Lin", "Log"]); const chartMode = signals.createSignal( /** @type {Lowercase} */ ( - localStorage.getItem(id) || "linear" + localStorage.getItem(id) || "lin" ), ); @@ -687,7 +687,7 @@ function initPackages() { signals.createEffect(chartMode, (chartMode) => _chart.priceScale("right").applyOptions({ - mode: chartMode === "linear" ? 0 : 1, + mode: chartMode === "lin" ? 0 : 1, }), ); } diff --git a/website/scripts/options.js b/website/scripts/options.js index b6227b37a..010bbcbd5 100644 --- a/website/scripts/options.js +++ b/website/scripts/options.js @@ -5367,27 +5367,25 @@ export function initOptions({ }); } } + } - function createCheckEffect() { - signals.createEffect(selected, (selected) => { - if (selected?.id === option.id) { - input.checked = true; - localStorage.setItem(ids.selectedId, option.id); - } else if (input.checked) { - input.checked = false; - } - }); - } + function createCheckEffect() { + signals.createEffect(selected, (selected) => { + if (selected?.id === option.id) { + input.checked = true; + localStorage.setItem(ids.selectedId, option.id); + } else if (input.checked) { + input.checked = false; + } + }); + } - if (owner !== undefined) { - signals.runWithOwner(owner, () => { - createCheckEffect(); - }); - } else { + if (owner !== undefined) { + signals.runWithOwner(owner, () => { createCheckEffect(); - } + }); } else { - console.log("else", option); + createCheckEffect(); } return label; diff --git a/website/scripts/simulation.js b/website/scripts/simulation.js index 96c76eda2..bd24776e2 100644 --- a/website/scripts/simulation.js +++ b/website/scripts/simulation.js @@ -1,6 +1,6 @@ /** * @import { Options } from './options'; - * @import { ColorName } from './types/self'; + * @import { ColorName, Frequencies, Frequency } from './types/self'; */ /** @@ -44,7 +44,7 @@ export function init({ }), }, topUp: { - amount: signals.createSignal(/** @type {number | null} */ (10), { + amount: signals.createSignal(/** @type {number | null} */ (150), { save: { ...utils.serde.number, id: `${storagePrefix}-top-up-amount`, @@ -52,7 +52,7 @@ export function init({ }, }), frenquency: signals.createSignal( - /** @type {Frequency} */ (frequencies.list[0]), + /** @type {Frequency} */ (frequencies.list[3].list[0]), { save: { ...frequencies.serde, @@ -72,7 +72,7 @@ export function init({ param: "initial-swap", }, }), - recurrent: signals.createSignal(/** @type {number | null} */ (10), { + recurrent: signals.createSignal(/** @type {number | null} */ (5), { save: { ...utils.serde.number, id: `${storagePrefix}-recurrent-swap`, @@ -154,7 +154,8 @@ export function init({ type: "Dollars", text: "Initial Amount", }), - description: "The amount of dollars you have ready to swap on day one.", + description: + "The amount of dollars you have ready on the exchange on day one.", input: createInputDollar({ id: "simulation-dollars-initial", title: "Initial Dollar Amount", @@ -168,14 +169,14 @@ export function init({ title: createColoredTypeHTML({ color: "green", type: "Dollars", - text: "Top Up Amount", + text: "Top Up Frequency", }), description: - "The recurrent amount of dollars you'll be putting aside to swap.", - input: createInputDollar({ - id: "simulation-dollars-later", - title: "Top Up Dollar Amount", - signal: settings.dollars.topUp.amount, + "The frequency at which you'll top up your account at the exchange.", + input: utils.dom.createSelect({ + id: "top-up-frequency", + list: frequencies.list, + signal: settings.dollars.topUp.frenquency, }), }), ); @@ -185,14 +186,14 @@ export function init({ title: createColoredTypeHTML({ color: "green", type: "Dollars", - text: "Top Up Frequency", + text: "Top Up Amount", }), description: - "The frequency at which you'll be putting aside the preceding amount of dollars.", - input: utils.dom.createSelect({ - id: "top-up-frequency", - list: frequencies.list, - signal: settings.dollars.topUp.frenquency, + "The recurrent amount of dollars you'll be transfering to said exchange.", + input: createInputDollar({ + id: "simulation-dollars-later", + title: "Top Up Dollar Amount", + signal: settings.dollars.topUp.amount, }), }), ); @@ -205,7 +206,7 @@ export function init({ text: "Initial Amount", }), description: - "The maximum initial amount of dollars you'll exchange on day one.", + "The amount, if available, of dollars that will be used to buy Bitcoin on day one.", input: createInputDollar({ id: "simulation-dollars-later", title: "Initial Swap Amount", @@ -219,14 +220,13 @@ export function init({ title: createColoredTypeHTML({ color: "orange", type: "Swap", - text: "Recurrent Amount", + text: "Frequency", }), - description: - "The maximum recurrent amount of dollars you'll be exchanging.", - input: createInputDollar({ - id: "simulation-dollars-later", - title: "Recurrent Swap Amount", - signal: settings.swap.amount.recurrent, + description: "The frequency at which you'll be buying Bitcoin.", + input: utils.dom.createSelect({ + id: "top-up-frequency", + list: frequencies.list, + signal: settings.swap.frequency, }), }), ); @@ -236,14 +236,14 @@ export function init({ title: createColoredTypeHTML({ color: "orange", type: "Swap", - text: "Frequency", + text: "Recurrent Amount", }), description: - "The frequency at which you'll be exchanging the preceding amount.", - input: utils.dom.createSelect({ - id: "top-up-frequency", - list: frequencies.list, - signal: settings.swap.frequency, + "The recurrent amount, if available, of dollars that will be used to buy Bitcoin.", + input: createInputDollar({ + id: "simulation-dollars-later", + title: "Recurrent Swap Amount", + signal: settings.swap.amount.recurrent, }), }), ); @@ -634,28 +634,6 @@ export function init({ ], }); - // lightweightCharts.createChart({ - // parent: resultsElement, - // signals, - // colors, - // id: `simulation-0`, - // kind: "static", - // config: [ - // { - // unit: "US Dollars", - // scale: "date", - // config: [ - // { - // kind: "line", - // color: colors.yellow, - // owner, - // data: investmentData, - // }, - // ], - // }, - // ], - // }); - lightweightCharts.createChart({ parent: resultsElement, signals, @@ -678,28 +656,6 @@ export function init({ ], }); - // lightweightCharts.createChart({ - // parent: resultsElement, - // signals, - // colors, - // id: `simulation-1`, - // kind: "static", - // config: [ - // { - // unit: "US Dollars", - // scale: "date", - // config: [ - // { - // kind: "line", - // color: colors.lightBitcoin, - // owner, - // data: bitcoinAddedData, - // }, - // ], - // }, - // ], - // }); - lightweightCharts.createChart({ parent: resultsElement, signals, @@ -940,7 +896,7 @@ function computeFrequencies() { ]; const maxDays = 28; - /** @satisfies {((Frequency | {name: string; list: Frequency[]})[])} */ + /** @satisfies {([Frequency, Frequencies, Frequencies, Frequencies])} */ const list = [ { name: "Every day", diff --git a/website/scripts/types/self.d.ts b/website/scripts/types/self.d.ts index 199d92a0d..f6ef87808 100644 --- a/website/scripts/types/self.d.ts +++ b/website/scripts/types/self.d.ts @@ -13,7 +13,6 @@ import { SingleValueData, CandlestickData, SeriesType, - IChartApi, ISeriesApi, BaselineData, } from "../../packages/lightweight-charts/v4.2.0/types"; @@ -387,6 +386,7 @@ interface Frequency { value: string; isTriggerDay: (date: Date) => boolean; } +type Frequencies = { name: string; list: Frequency[] }; interface CreatePaneParameters { unit: Unit;