nicegui initial
This commit is contained in:
157
nicegui_modules/static/script.js
Normal file
157
nicegui_modules/static/script.js
Normal file
@@ -0,0 +1,157 @@
|
||||
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) {
|
||||
if (create_chart_options.crosshair == 'NORMAL') {
|
||||
create_chart_options.crosshair = { mode: LightweightCharts.CrosshairMode.Normal }
|
||||
};
|
||||
window.chart = LightweightCharts.createChart(document.getElementById('tv'), 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();
|
||||
|
||||
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';
|
||||
// }
|
||||
// });
|
||||
|
||||
};
|
||||
Reference in New Issue
Block a user