Funding_Rate/nicegui_modules/static/script.js

async function waitForVariable(variableName, timeout = 5000) {
  const startTime = Date.now();
  while (typeof window[variableName] === 'undefined') {
    if (Date.now() - startTime > timeout) {
      throw new Error(`Variable '${variableName}' not defined within ${timeout}ms`);
    }
    await new Promise(resolve => setTimeout(resolve, 100));
  }
  console.log(`Variable '${variableName}' is now defined.`);
}

async function update_tv(data_list, lookback_max_points) {
    data_list.forEach(function (item, index) {
        // console.log(item, index);
        window.charts_arr[index].data.push({ time: item.timestamp, value: item.value });
        window.charts_arr[index].series.update({ time: item.timestamp, value: item.value });

        if (window.charts_arr[index].series.data().length > lookback_max_points) {
            window.charts_arr[index].series.setData(window.charts_arr[index].series.data().slice(-lookback_max_points));
        };
    });

    // midPriceLine.applyOptions({
    //     price: data_dict.mid_px,
    //     color: '#c78228',
    //     lineWidth: 3,
    //     lineStyle: LightweightCharts.LineStyle.Dashed,
    //     axisLabelVisible: true,
    // });

    window.chart.timeScale().scrollToRealTime();
    window.chart.timeScale().fitContent();
    const currentRange = window.chart.timeScale().getVisibleLogicalRange();   
    window.chart.timeScale().setVisibleLogicalRange(currentRange);
};


async function create_tv(charts_list, create_chart_options) {
    const container = document.getElementById('tv');
    
    if (create_chart_options.crosshair == 'NORMAL') {
        create_chart_options.crosshair = { mode: LightweightCharts.CrosshairMode.Normal }
    };
    window.chart = LightweightCharts.createChart(container, create_chart_options);
    window.charts_arr = [];
    
    charts_list.forEach(function (item, index) {
        // console.log(item, index);
        charts_dict = {};
        if ((Array.isArray(item.autoscaleInfoProvider) && item.autoscaleInfoProvider.length !== 0)) {
            item.options.autoscaleInfoProvider = () => ({
                priceRange: {
                minValue: item.autoscaleInfoProvider[0],
                maxValue: item.autoscaleInfoProvider[1]
                }
            })
        };
        if (item.type == "AREA" ) {
            charts_dict.series = chart.addSeries(LightweightCharts.AreaSeries, item.options);
        } else {
            charts_dict.series = chart.addSeries(LightweightCharts.LineSeries, item.options);
        };
        charts_dict.data = [];
        charts_dict.series.setData(charts_dict.data);
        window.charts_arr.push(charts_dict);
    });

    window.chart.timeScale().fitContent();

    // Handle responsiveness: Resize chart when container size changes
    const resizeObserver = new ResizeObserver(entries => {{
        for (let entry of entries) {{
            window.chart.applyOptions({ 
                width: entry.contentRect.width, 
                height: entry.contentRect.height 
            });
        }}
    }});
    resizeObserver.observe(container);

    console.log("TV Created!")

    // window.midPriceLine_Config = {
    //     price: 0,
    //     color: '#c78228',
    //     lineWidth: 3,
    //     lineStyle: LightweightCharts.LineStyle.Dashed,
    //     axisLabelVisible: false,
    // };
    // window.midPriceLine = window.lineSeries.createPriceLine(midPriceLine_Config);

    
    // Create and style the tooltip html element
    // const container = document.getElementById('tv');

    // window.toolTipWidth = 200;

    // const toolTip = document.createElement('div');
    // toolTip.style = `width: ${window.toolTipWidth}px; height: 100%; position: absolute; display: none; padding: 8px; box-sizing: border-box; font-size: 12px; text-align: left; z-index: 1000; top: 12px; left: 12px; pointer-events: none; border-radius: 4px 4px 0px 0px; border-bottom: none; box-shadow: 0 2px 5px 0 rgba(117, 134, 150, 0.45);font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;`;
    // toolTip.style.background = `rgba(${'0, 0, 0'}, 0.25)`;
    // toolTip.style.color = 'white';
    // toolTip.style.borderColor = 'rgba( 239, 83, 80, 1)';
    // container.appendChild(toolTip);

    // // update tooltip
    // window.chart.subscribeCrosshairMove(async param => {
        
    //     if (
    //         param.point === undefined ||
    //         !param.time ||
    //         param.point.x < 0 ||
    //         param.point.x > container.clientWidth ||
    //         param.point.y < 0 ||
    //         param.point.y > container.clientHeight
    //     ) {
    //         toolTip.style.display = 'none';
    //     } else {
            
    //         // toolTip.style.height = '100%';
    //         toolTip.style.alignContent = 'center';

    //         const dateStr = new Date(param.time*1000).toISOString();
            
    //         let data = await param.seriesData.get(window.lineSeries);
    //         if (data === undefined) {
    //             data = {}
    //             data.value = 0
    //             console.log('data is UNDEFINED, SETTING TO 0')
    //         };
            
    //         let data_b = await param.seriesData.get(window.lineSeries_b);
    //         if (data_b === undefined) {
    //             data_b = {}
    //             data_b.value = 0
    //             console.log('data is UNDEFINED, SETTING TO 0')
    //         };

    //         const value_px = data.value
    //         const value_px_b = window.data_b.value
    //         const value_px_c = window.data_c.value
    //         // const value_px_tgt = window.data_tgt.value
            
    //         toolTip.style.display = 'block';
    //         // <div style="color: ${'rgba( 239, 83, 80, 1)'}">
    //         //     Atwater Trading
    //         // </div>
    //         toolTip.innerHTML = `
    //         <div style="font-size: 24px; margin: 4px 0px; color: ${'white'}">
    //             Chainlink: ${Math.round(100 * value_px) / 100}
    //             Binance: ${Math.round(100 * value_px_b) / 100}
    //             </div>
    //             <div style="color: ${'white'}">
    //                 ${dateStr}
    //             </div>
    //         `;

    //         let left = param.point.x; // relative to timeScale
    //         const timeScaleWidth = chart.timeScale().width();
    //         const priceScaleWidth = chart.priceScale('left').width();
    //         const halfTooltipWidth = toolTipWidth / 2;
    //         left += priceScaleWidth - halfTooltipWidth;
    //         left = Math.min(left, priceScaleWidth + timeScaleWidth - toolTipWidth);
    //         left = Math.max(left, priceScaleWidth);

    //         toolTip.style.left = left + 'px';
    //         toolTip.style.top = 0 + 'px';
    //     }
    // });

};