website: make panes the same size + remove saving their height

TODO.md

@@ -84,7 +84,9 @@
       - add api page with interactivity
     - global
       - **fix navigation/history**
-      - **udpate lightweight-charts to v5.0.8**
       - move share button to footer ?
+      - Use `ichart.createPane()` in wrapper
       - improve behavior when local storage is unavailable
         - by having a global state
+- __global__
+  - check `TODO`s in codebase

websites/default/packages/lightweight-charts/wrapper.js

@@ -1,6 +1,6 @@
 // @ts-check
 
-/** @import { IChartApi, ISeriesApi as _ISeriesApi, SeriesDefinition, SingleValueData as _SingleValueData, CandlestickData as _CandlestickData, BaselineData as _BaselineData, SeriesType, IPaneApi, LineSeriesPartialOptions, BaselineSeriesPartialOptions, CandlestickSeriesPartialOptions, WhitespaceData, DeepPartial, ChartOptions, Time, LineData as _LineData } from './v5.0.7/types' */
+/** @import { IChartApi, ISeriesApi as _ISeriesApi, SeriesDefinition, SingleValueData as _SingleValueData, CandlestickData as _CandlestickData, BaselineData as _BaselineData, SeriesType, IPaneApi, LineSeriesPartialOptions, BaselineSeriesPartialOptions, CandlestickSeriesPartialOptions, WhitespaceData, DeepPartial, ChartOptions, Time, LineData as _LineData } from './v5.0.8/types' */
 
 /**
  * @typedef {[number, number, number, number]} OHLCTuple
@@ -49,7 +49,7 @@ import {
   CandlestickSeries,
   LineSeries,
   BaselineSeries,
-} from "./v5.0.7/script.js";
+} from "./v5.0.8/script.js";
 
 const oklchToRGBA = createOklchToRGBA();
 
@@ -148,6 +148,8 @@ function createChartElement({
     minimumWidth: 80,
   });
 
+  ichart.panes().at(0)?.setStretchFactor(1);
+
   signals.createEffect(
     () => ({
       defaultColor: colors.default(),
@@ -234,7 +236,7 @@ function createChartElement({
             ?.panes()
             .at(paneIndex)
             ?.getHTMLElement()
-            .children?.item(1)?.firstChild;
+            ?.children?.item(1)?.firstChild;
 
           if (!parent) throw Error("Parent should exist");
 
@@ -247,7 +249,7 @@ function createChartElement({
           if (children.length === 1) {
             children[0].remove();
           } else if (children.length > 1) {
-            throw Error("Unreacable");
+            throw Error("Untraceable");
           }
 
           const fieldset = window.document.createElement("fieldset");
@@ -258,7 +260,7 @@ function createChartElement({
           if (!pane) throw Error("Expect pane");
           pane
             .getHTMLElement()
-            .children?.item(1)
+            ?.children?.item(1)
             ?.firstChild?.appendChild(fieldset);
 
           fieldset.append(createChild(pane));
@@ -528,13 +530,6 @@ function createChartElement({
         order,
       });
 
-      createPaneHeightObserver({
-        ichart,
-        paneIndex,
-        signals,
-        utils,
-      });
-
       addPriceScaleSelectorIfNeeded({
         paneIndex,
         seriesType,
@@ -929,63 +924,6 @@ function createLegend({ signals, utils }) {
   };
 }
 
-/**
- * @param {Object} args
- * @param {IChartApi} args.ichart
- * @param {number} args.paneIndex
- * @param {Signals} args.signals
- * @param {Utilities} args.utils
- */
-function createPaneHeightObserver({ ichart, paneIndex, signals, utils }) {
-  if (!paneIndex) return;
-
-  const owner = signals.getOwner();
-
-  const one = "1";
-
-  const callback = () =>
-    setTimeout(() => {
-      try {
-        const _element = ichart.panes().at(paneIndex)?.getHTMLElement();
-        if (!_element) return callback();
-        const element = _element;
-
-        if (element.dataset.observed === one) return;
-        element.dataset.observed = one;
-
-        signals.runWithOwner(owner, () => {
-          const height = signals.createSignal(null, {
-            save: {
-              keyPrefix: "charts",
-              key: `height-${paneIndex}`,
-              ...utils.serde.optNumber,
-            },
-          });
-
-          const savedHeight = height();
-          if (savedHeight !== null) {
-            ichart.panes().at(paneIndex)?.setHeight(savedHeight);
-          }
-
-          let firstRun = true;
-          new ResizeObserver(() => {
-            if (firstRun && savedHeight !== null) {
-              firstRun = false;
-            } else {
-              const h = ichart.panes().at(paneIndex)?.getHeight();
-              if (h === undefined) return;
-              height.set(h);
-            }
-          }).observe(element);
-        });
-      } catch {
-        callback();
-      }
-    }, 5);
-
-  callback();
-}
-
 /**
  * @param {ISeries} series
  * @param {DeepPartial<CreatePriceLine>} options

websites/default/scripts/chart.js

@@ -384,14 +384,7 @@ export function init({
           legend: chart.legendBottom,
         },
       ].forEach(
-        ({
+        ({ blueprints, paneIndex, unit, seriesList, orderStart, legend }) => {
-          blueprints,
-          paneIndex,
-          unit,
-          seriesList: seriesList,
-          orderStart,
-          legend,
-        }) => {
           signals.createEffect(unit, (unit) => {
             legend.removeFrom(orderStart);