From 8af1ddd10d328402bcdc48c56d453172dcfedf40 Mon Sep 17 00:00:00 2001
From: nym21 <expat-epochs0i@icloud.com>
Date: Wed, 4 Dec 2024 10:28:30 +0100
Subject: [PATCH] website: moved more code to lc wrapper

---
 website/index.html                            |   7 +-
 .../packages/lightweight-charts/types.d.ts    |   8 +-
 .../packages/lightweight-charts/wrapper.js    | 105 ++++++++++--
 website/scripts/chart.js                      | 157 ++++--------------
 website/scripts/main.js                       |  27 ++-
 website/scripts/simulation.js                 |  89 +++-------
 6 files changed, 178 insertions(+), 215 deletions(-)

diff --git a/website/index.html b/website/index.html
index 4c4878329..b649580b9 100644
--- a/website/index.html
+++ b/website/index.html
@@ -1547,7 +1547,12 @@
           <small style="display: block">
             <strong>Bitcoin</strong> is
             <b style="color: var(--color)">hope</b>
-            <span style="filter: var(--emoji-filter)">🕊️</span>
+            <button
+              style="filter: var(--emoji-filter)"
+              onclick="window.document.documentElement.style.colorScheme = window.document.documentElement.style.colorScheme === 'light' ? 'dark' : 'light'"
+            >
+              🕊️
+            </button>
           </small>
         </header>
       </nav>
diff --git a/website/packages/lightweight-charts/types.d.ts b/website/packages/lightweight-charts/types.d.ts
index 4da1bc23b..02c5ab127 100644
--- a/website/packages/lightweight-charts/types.d.ts
+++ b/website/packages/lightweight-charts/types.d.ts
@@ -12,7 +12,7 @@ import {
   ISeriesApi,
   BaselineData,
 } from "./v4.2.0/types";
-import { Color, ValuedCandlestickData } from "../../scripts/types/self";
+import { Color, Valued, ValuedCandlestickData } from "../../scripts/types/self";
 
 interface BaseSeriesBlueprint {
   title: string;
@@ -28,7 +28,7 @@ interface CandlestickSeriesBlueprint extends BaseSeriesBlueprint {
   type: "Candlestick";
   color?: Color;
   options?: DeepPartial<CandlestickStyleOptions & SeriesOptionsCommon>;
-  data?: Accessor<CandlestickData<Time>[]>;
+  data?: Accessor<(CandlestickData<Time> & Valued)[]>;
 }
 interface LineSeriesBlueprint extends BaseSeriesBlueprint {
   type?: "Line";
@@ -98,16 +98,16 @@ type ChartPane = IChartApi & {
   createSingleSeries: (a: CreateSingleSeriesParameters) => SingleSeries;
   createSplitSeries: <S extends TimeScale>(
     a: CreateSplitSeriesParameters<S>,
-  ) => SplitSeries;
+  ) => SplitSeries[];
   anySeries: AnySeries[];
   singleSeries: SingleSeries[];
   splitSeries: SplitSeries[];
+  remove: VoidFunction;
 };
 
 interface CreatePaneParameters {
   unit: Unit;
   paneIndex?: number;
-  whitespace?: true;
   options?: DeepPartial<ChartOptions>;
   config?: SingleSeriesBlueprint[];
 }
diff --git a/website/packages/lightweight-charts/wrapper.js b/website/packages/lightweight-charts/wrapper.js
index 9e55d6bcd..edecc4062 100644
--- a/website/packages/lightweight-charts/wrapper.js
+++ b/website/packages/lightweight-charts/wrapper.js
@@ -721,7 +721,7 @@ export default import("./v4.2.0/script.js").then((lightweightCharts) => {
     /**
      * @param {CreatePaneParameters} param
      */
-    function createPane({ paneIndex, whitespace, unit, options, config }) {
+    function createPane({ paneIndex, unit, options, config }) {
       const chartWrapper = window.document.createElement("div");
       chartWrapper.classList.add("pane");
       panesElement.append(chartWrapper);
@@ -797,10 +797,11 @@ export default import("./v4.2.0/script.js").then((lightweightCharts) => {
         return series;
       }
 
+      let hasCandleSeries = false;
       /**
        * @param {RemoveSeriesBlueprintFluff<CandlestickSeriesBlueprint>} args
        */
-      function createCandlestickSeries({ options, data }) {
+      function createCandlestickSeries({ color, options, data }) {
         function computeColors() {
           const upColor = colors.profit();
           const downColor = colors.loss();
@@ -825,6 +826,8 @@ export default import("./v4.2.0/script.js").then((lightweightCharts) => {
           ...computeColors(),
         });
 
+        hasCandleSeries = true;
+
         signals.runWithOwner(owner, () => {
           signals.createEffect(computeColors, (computeColors) => {
             series.applyOptions(computeColors);
@@ -839,6 +842,8 @@ export default import("./v4.2.0/script.js").then((lightweightCharts) => {
           });
         }
 
+        updateVisiblePriceSeriesType();
+
         return series;
       }
 
@@ -980,7 +985,12 @@ export default import("./v4.2.0/script.js").then((lightweightCharts) => {
 
         return series;
       };
-      pane.createSplitSeries = function ({
+      /**
+       * @template {TimeScale} T
+       * @param {CreateSplitSeriesParameters<T>} param0
+       * @returns
+       */
+      function createSplitSeries({
         id,
         index: seriesIndex,
         disabled,
@@ -1141,11 +1151,42 @@ export default import("./v4.2.0/script.js").then((lightweightCharts) => {
         createLegend({ series, extraName: blueprint.type });
 
         return series;
+      }
+      pane.createSplitSeries = function (a) {
+        if (a.blueprint.type === "Candlestick") {
+          const candleSeries = createSplitSeries({
+            disabled: signals.createMemo(
+              () => priceSeriesType() !== "Candlestick",
+            ),
+            ...a,
+          });
+          const lineSeries = createSplitSeries({
+            disabled: signals.createMemo(() => priceSeriesType() !== "Line"),
+            ...a,
+            blueprint: {
+              color: colors.default,
+              ...a.blueprint,
+              type: "Line",
+            },
+          });
+
+          signals.createEffect(candleSeries.active, (active) => {
+            lineSeries.active.set(active);
+          });
+
+          signals.createEffect(lineSeries.active, (active) => {
+            candleSeries.active.set(active);
+          });
+
+          return [candleSeries, lineSeries];
+        } else {
+          return [createSplitSeries(a)];
+        }
       };
-      pane.hidden = () => {
+      pane.hidden = function () {
         return chartWrapper.hidden;
       };
-      pane.setHidden = (b) => {
+      pane.setHidden = function (b) {
         chartWrapper.hidden = b;
       };
       pane.splitSeries = [];
@@ -1165,14 +1206,15 @@ export default import("./v4.2.0/script.js").then((lightweightCharts) => {
           }, 50);
         }
       };
+      const remove = _chart.remove;
       pane.remove = function () {
-        _chart.remove();
+        remove.call(this);
         pane.splitSeries.length = 0;
         pane.singleSeries.length = 0;
         pane.anySeries.length = 0;
       };
 
-      if (whitespace) {
+      if (kind === "moveable") {
         pane.whitespace = setWhitespace({ chart: _chart, scale, utils });
       }
 
@@ -1479,6 +1521,12 @@ export default import("./v4.2.0/script.js").then((lightweightCharts) => {
         setMinMaxMarkersWhenIdle,
       );
 
+      pane.timeScale().subscribeVisibleLogicalRangeChange((logicalRange) => {
+        if (!logicalRange || !hasCandleSeries) return;
+        // Must be the chart with the visible timeScale
+        debouncedUpdateVisiblePriceSeriesType(logicalRange);
+      });
+
       return pane;
     }
 
@@ -1503,11 +1551,9 @@ export default import("./v4.2.0/script.js").then((lightweightCharts) => {
     }
 
     /**
-     * @param {Object} args
-     * @param {LogicalRange} [args.visibleLogicalRange]
-     * @param {TimeRange} [args.visibleTimeRange]
+     * @param {LogicalRange} [visibleLogicalRange]
      */
-    function getTicksToWidthRatio({ visibleLogicalRange, visibleTimeRange }) {
+    function getTicksToWidthRatio(visibleLogicalRange) {
       try {
         const chartPane = panes.find((pane) => !pane.hidden());
         if (!chartPane) return;
@@ -1518,10 +1564,12 @@ export default import("./v4.2.0/script.js").then((lightweightCharts) => {
 
         if (visibleLogicalRange) {
           ratio = (visibleLogicalRange.to - visibleLogicalRange.from) / width;
-        } else if (visibleTimeRange) {
+        } else {
+          let range = visibleTimeRange();
+
           if (scale === "date") {
-            const to = /** @type {Time} */ (visibleTimeRange.to);
-            const from = /** @type {Time} */ (visibleTimeRange.from);
+            const to = /** @type {Time} */ (range.to);
+            const from = /** @type {Time} */ (range.from);
 
             ratio =
               utils.getNumberOfDaysBetweenTwoDates(
@@ -1529,19 +1577,39 @@ export default import("./v4.2.0/script.js").then((lightweightCharts) => {
                 utils.date.fromTime(to),
               ) / width;
           } else {
-            const to = /** @type {number} */ (visibleTimeRange.to);
-            const from = /** @type {number} */ (visibleTimeRange.from);
+            const to = /** @type {number} */ (range.to);
+            const from = /** @type {number} */ (range.from);
 
             ratio = (to - from) / width;
           }
-        } else {
-          throw Error();
         }
 
         return ratio;
       } catch {}
     }
 
+    const priceSeriesType = signals.createSignal(
+      /** @type {PriceSeriesType} */ ("Candlestick"),
+    );
+
+    /**
+     * @param {Parameters<typeof getTicksToWidthRatio>[0]} [args]
+     */
+    function updateVisiblePriceSeriesType(args) {
+      const ratio = getTicksToWidthRatio(args);
+      if (ratio) {
+        if (ratio <= 0.5) {
+          priceSeriesType.set("Candlestick");
+        } else {
+          priceSeriesType.set("Line");
+        }
+      }
+    }
+    const debouncedUpdateVisiblePriceSeriesType = utils.debounce(
+      updateVisiblePriceSeriesType,
+      50,
+    );
+
     return {
       createPane,
       reset,
@@ -1549,6 +1617,7 @@ export default import("./v4.2.0/script.js").then((lightweightCharts) => {
       visibleDatasetIds,
       getInitialVisibleTimeRange,
       getTicksToWidthRatio,
+      priceSeriesType,
     };
   }
 
diff --git a/website/scripts/chart.js b/website/scripts/chart.js
index 26edef8f6..a777c694e 100644
--- a/website/scripts/chart.js
+++ b/website/scripts/chart.js
@@ -1,9 +1,5 @@
 // @ts-check
 
-/**
- * @import { PriceSeriesType } from '../packages/lightweight-charts/types';
- */
-
 /**
  * @param {Object} args
  * @param {Colors} args.colors
@@ -14,11 +10,9 @@
  * @param {Datasets} args.datasets
  * @param {WebSockets} args.webSockets
  * @param {Elements} args.elements
- * @param {Accessor<boolean>} args.dark
  */
 export function init({
   colors,
-  dark,
   datasets,
   elements,
   lightweightCharts,
@@ -59,10 +53,6 @@ export function init({
     },
   );
 
-  const priceSeriesType = signals.createSignal(
-    /** @type {PriceSeriesType} */ ("Candlestick"),
-  );
-
   function createFetchChunksOfVisibleDatasetsEffect() {
     signals.createEffect(
       () => ({
@@ -85,90 +75,6 @@ export function init({
   }
   createFetchChunksOfVisibleDatasetsEffect();
 
-  /**
-   * @param {Parameters<Chart['getTicksToWidthRatio']>[0]} args
-   */
-  function updateVisiblePriceSeriesType(args) {
-    const ratio = chart.getTicksToWidthRatio(args);
-    if (ratio) {
-      if (ratio <= 0.5) {
-        priceSeriesType.set("Candlestick");
-      } else {
-        priceSeriesType.set("Line");
-      }
-    }
-  }
-  const debouncedUpdateVisiblePriceSeriesType = utils.debounce(
-    updateVisiblePriceSeriesType,
-    50,
-  );
-
-  /**
-   * @param {Object} args
-   * @param {PriceSeriesType} args.type
-   * @param {Option} args.option
-   * @param {ChartPane} args.chartPane
-   */
-  function createPriceSeries({ type, option, chartPane }) {
-    const s = scale();
-
-    /** @type {AnyDatasetPath} */
-    const datasetPath = `${s}-to-price`;
-
-    const dataset = datasets.getOrCreate(s, datasetPath);
-
-    // Don't trigger reactivity by design
-    activeDatasets().add(dataset);
-
-    const title = "BTC Price";
-
-    /** @type {SplitSeriesBlueprint} */
-    let blueprint;
-
-    if (type === "Candlestick") {
-      blueprint = {
-        datasetPath,
-        title,
-        type: "Candlestick",
-      };
-    } else {
-      blueprint = {
-        datasetPath,
-        title,
-        color: colors.default,
-      };
-    }
-
-    const disabled = signals.createMemo(() => priceSeriesType() !== type);
-
-    const priceSeries = chartPane.createSplitSeries({
-      blueprint,
-      dataset,
-      id: option.id,
-      index: -1,
-      disabled,
-    });
-
-    function createLiveCandleUpdateEffect() {
-      signals.createEffect(webSockets.kraken1dCandle.latest, (latest) => {
-        if (!latest) return;
-
-        const index = utils.chunkIdToIndex(s, latest.year);
-
-        const series = priceSeries.chunks.at(index);
-
-        if (series) {
-          signals.createEffect(series, (series) => {
-            series?.update(latest);
-          });
-        }
-      });
-    }
-    createLiveCandleUpdateEffect();
-
-    return priceSeries;
-  }
-
   /**
    * @param {ChartOption} option
    */
@@ -189,47 +95,42 @@ export function init({
       const chartPane = chart.createPane({
         paneIndex,
         unit: paneIndex ? option.unit : "US Dollars",
-        whitespace: true,
       });
 
       if (!paneIndex) {
-        updateVisiblePriceSeriesType({
-          visibleTimeRange: chart.visibleTimeRange(),
+        /** @type {AnyDatasetPath} */
+        const datasetPath = `${scale}-to-price`;
+
+        const dataset = datasets.getOrCreate(scale, datasetPath);
+
+        // Don't trigger reactivity by design
+        activeDatasets().add(dataset);
+
+        const priceSeries = chartPane.createSplitSeries({
+          blueprint: {
+            datasetPath,
+            title: "BTC Price",
+            type: "Candlestick",
+          },
+          dataset,
+          id: option.id,
+          index: -1,
         });
 
-        chartPane
-          .timeScale()
-          .subscribeVisibleLogicalRangeChange((logicalRange) => {
-            if (!logicalRange) return;
+        signals.createEffect(webSockets.kraken1dCandle.latest, (latest) => {
+          if (!latest) return;
 
-            // Must be the chart with the visible timeScale
-            debouncedUpdateVisiblePriceSeriesType({
-              visibleLogicalRange: logicalRange,
-            });
+          const index = utils.chunkIdToIndex(scale, latest.year);
+
+          priceSeries.forEach((splitSeries) => {
+            const series = splitSeries.chunks.at(index);
+            if (series) {
+              signals.createEffect(series, (series) => {
+                series?.update(latest);
+              });
+            }
           });
-
-        /** @param {PriceSeriesType} type */
-        function _createPriceSeries(type) {
-          return createPriceSeries({
-            chartPane,
-            option,
-            type,
-          });
-        }
-
-        const priceCandlestickSeries = _createPriceSeries("Candlestick");
-        const priceLineSeries = _createPriceSeries("Line");
-
-        function createLinkPriceSeriesEffect() {
-          signals.createEffect(priceLineSeries.active, (active) => {
-            priceCandlestickSeries.active.set(active);
-          });
-
-          signals.createEffect(priceCandlestickSeries.active, (active) => {
-            priceLineSeries.active.set(active);
-          });
-        }
-        createLinkPriceSeriesEffect();
+        });
       }
 
       [...seriesBlueprints].reverse().forEach((blueprint, index) => {
diff --git a/website/scripts/main.js b/website/scripts/main.js
index 6a6bcf0d4..13388732f 100644
--- a/website/scripts/main.js
+++ b/website/scripts/main.js
@@ -3,7 +3,7 @@
 /**
  * @import { Option, ResourceDataset, TimeScale, TimeRange, Unit, Weighted, DatasetPath, OHLC, FetchedJSON, DatasetValue, FetchedResult, AnyDatasetPath, Color, DatasetCandlestickData, PartialChartOption, ChartOption, AnyPartialOption, ProcessedOptionAddons, OptionsTree, AnyPath, SimulationOption, Frequency, LastValues } from "./types/self"
  * @import {createChart as CreateClassicChart, createChartEx as CreateCustomChart, LineStyleOptions } from "../packages/lightweight-charts/v4.2.0/types";
- * @import { Marker,  CreatePaneParameters,  HoveredLegend, ChartPane, SplitSeries, SingleSeries, CreateSplitSeriesParameters, LineSeriesBlueprint, CandlestickSeriesBlueprint, BaselineSeriesBlueprint, CreateBaseSeriesParameters, BaseSeries, RemoveSeriesBlueprintFluff, SplitSeriesBlueprint, AnySeries } from "../packages/lightweight-charts/types";
+ * @import { Marker,  CreatePaneParameters,  HoveredLegend, ChartPane, SplitSeries, SingleSeries, CreateSplitSeriesParameters, LineSeriesBlueprint, CandlestickSeriesBlueprint, BaselineSeriesBlueprint, CreateBaseSeriesParameters, BaseSeries, RemoveSeriesBlueprintFluff, SplitSeriesBlueprint, AnySeries, PriceSeriesType } from "../packages/lightweight-charts/types";
  * @import * as _ from "../packages/ufuzzy/v1.0.14/types"
  * @import { DeepPartial, ChartOptions, IChartApi, IHorzScaleBehavior, WhitespaceData, SingleValueData, ISeriesApi, Time, LineData, LogicalRange, SeriesMarker, CandlestickData, SeriesType, BaselineStyleOptions, SeriesOptionsCommon } from "../packages/lightweight-charts/v4.2.0/types"
  * @import { DatePath, HeightPath, LastPath } from "./types/paths";
@@ -598,6 +598,30 @@ const utils = {
 
       return { select, signal };
     },
+    /**
+     * @param {Object} param0
+     * @param {Signal<any>} param0.signal
+     * @param {HTMLInputElement} [param0.input]
+     * @param {HTMLSelectElement} [param0.select]
+     */
+    createResetableInput({ input, select, signal }) {
+      const div = window.document.createElement("div");
+
+      const element = input || select;
+      if (!element) throw "createResetableField element missing";
+      div.append(element);
+
+      const button = this.createButtonElement({
+        onClick: signal.reset,
+        text: "Reset",
+        title: "Reset field",
+      });
+      button.type = "reset";
+
+      div.append(button);
+
+      return div;
+    },
     /**
      * @param {'left' | 'bottom' | 'top' | 'right'} position
      */
@@ -2154,7 +2178,6 @@ packages.signals().then((signals) =>
                         signals.runWithOwner(owner, () =>
                           initChartsElement({
                             colors,
-                            dark,
                             datasets,
                             elements,
                             lightweightCharts,
diff --git a/website/scripts/simulation.js b/website/scripts/simulation.js
index 189820a39..8b5a2e1ae 100644
--- a/website/scripts/simulation.js
+++ b/website/scripts/simulation.js
@@ -158,15 +158,14 @@ export function init({
       }),
       description:
         "The amount of dollars you have ready on the exchange on day one.",
-      input: createResetableInput({
-        ...utils.dom.createInputDollar({
+      input: utils.dom.createResetableInput(
+        utils.dom.createInputDollar({
           id: "simulation-dollars-initial",
           title: "Initial Dollar Amount",
           signal: settings.dollars.initial.amount,
           signals,
         }),
-        utils,
-      }),
+      ),
     }),
   );
 
@@ -179,14 +178,13 @@ export function init({
       }),
       description:
         "The frequency at which you'll top up your account at the exchange.",
-      input: createResetableInput({
-        ...utils.dom.createSelect({
+      input: utils.dom.createResetableInput(
+        utils.dom.createSelect({
           id: "top-up-frequency",
           list: frequencies.list,
           signal: settings.dollars.topUp.frenquency,
         }),
-        utils,
-      }),
+      ),
     }),
   );
 
@@ -199,15 +197,14 @@ export function init({
       }),
       description:
         "The recurrent amount of dollars you'll be transfering to said exchange.",
-      input: createResetableInput({
-        ...utils.dom.createInputDollar({
+      input: utils.dom.createResetableInput(
+        utils.dom.createInputDollar({
           id: "simulation-dollars-top-up-amount",
           title: "Top Up Dollar Amount",
           signal: settings.dollars.topUp.amount,
           signals,
         }),
-        utils,
-      }),
+      ),
     }),
   );
 
@@ -220,15 +217,14 @@ export function init({
       }),
       description:
         "The amount, if available, of dollars that will be used to buy Bitcoin on day one.",
-      input: createResetableInput({
-        ...utils.dom.createInputDollar({
+      input: utils.dom.createResetableInput(
+        utils.dom.createInputDollar({
           id: "simulation-bitcoin-initial-investment",
           title: "Initial Swap Amount",
           signal: settings.bitcoin.investment.initial,
           signals,
         }),
-        utils,
-      }),
+      ),
     }),
   );
 
@@ -240,14 +236,13 @@ export function init({
         text: "Investment Frequency",
       }),
       description: "The frequency at which you'll be buying Bitcoin.",
-      input: createResetableInput({
-        ...utils.dom.createSelect({
+      input: utils.dom.createResetableInput(
+        utils.dom.createSelect({
           id: "investment-frequency",
           list: frequencies.list,
           signal: settings.bitcoin.investment.frequency,
         }),
-        utils,
-      }),
+      ),
     }),
   );
 
@@ -260,15 +255,14 @@ export function init({
       }),
       description:
         "The recurrent amount, if available, of dollars that will be used to buy Bitcoin.",
-      input: createResetableInput({
-        ...utils.dom.createInputDollar({
+      input: utils.dom.createResetableInput(
+        utils.dom.createInputDollar({
           id: "simulation-bitcoin-recurrent-investment",
           title: "Bitcoin Recurrent Investment",
           signal: settings.bitcoin.investment.recurrent,
           signals,
         }),
-        utils,
-      }),
+      ),
     }),
   );
 
@@ -280,15 +274,14 @@ export function init({
         text: "Start",
       }),
       description: "The first day of the simulation.",
-      input: createResetableInput({
-        ...utils.dom.createInputDate({
+      input: utils.dom.createResetableInput(
+        utils.dom.createInputDate({
           id: "simulation-inverval-start",
           title: "First Simulation Date",
           signal: settings.interval.start,
           signals,
         }),
-        utils,
-      }),
+      ),
     }),
   );
 
@@ -300,15 +293,14 @@ export function init({
         text: "End",
       }),
       description: "The last day of the simulation.",
-      input: createResetableInput({
-        ...utils.dom.createInputDate({
+      input: utils.dom.createResetableInput(
+        utils.dom.createInputDate({
           id: "simulation-inverval-end",
           title: "Last Simulation Day",
           signal: settings.interval.end,
           signals,
         }),
-        utils,
-      }),
+      ),
     }),
   );
 
@@ -320,8 +312,8 @@ export function init({
         text: "Exchange",
       }),
       description: "The amount of trading fees (in %) at the exchange.",
-      input: createResetableInput({
-        ...utils.dom.createInputNumberElement({
+      input: utils.dom.createResetableInput(
+        utils.dom.createInputNumberElement({
           id: "simulation-fees",
           title: "Exchange Fees",
           signal: settings.fees.percentage,
@@ -331,8 +323,7 @@ export function init({
           signals,
           placeholder: "Fees",
         }),
-        utils,
-      }),
+      ),
     }),
   );
 
@@ -851,32 +842,6 @@ function createFieldElement({ title, description, input }) {
   return div;
 }
 
-/**
- * @param {Object} param0
- * @param {Signal<any>} param0.signal
- * @param {HTMLInputElement} [param0.input]
- * @param {HTMLSelectElement} [param0.select]
- * @param {Utilities} param0.utils
- */
-function createResetableInput({ input, select, signal, utils }) {
-  const div = window.document.createElement("div");
-
-  const element = input || select;
-  if (!element) throw "createResetableField element missing";
-  div.append(element);
-
-  const button = utils.dom.createButtonElement({
-    onClick: signal.reset,
-    text: "Reset",
-    title: "Reset field",
-  });
-  button.type = "reset";
-
-  div.append(button);
-
-  return div;
-}
-
 /** @param {number} day  */
 function getOrdinalDay(day) {
   const rest = (day % 30) % 20;