p1otek/winterfail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add chart type selector with candlestick, line, and bar charts

Browse Source 
- Add chart type selector with 3 chart types: candlestick (default), line, and bar

- Fix data format conversion when switching between OHLC and simple {time,value} formats

- Fix line chart refresh to use update() instead of setData() to preserve chart data

- Remove area chart type and AI Insight/refresh buttons

- Improve data handling in loadData, loadNewData, loadHistoricalData, and switchChartType methods
This commit is contained in:
DiTus
2026-03-23 09:47:07 +01:00
parent eccfcc4b79
commit bde7945a1b
2 changed files with 501 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@ -34,13 +34,24 @@
}
/* Hide scrollbar for clean UI */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Chart type button active state */
.chart-type-btn.active {
background-color: #2d3a4f;
color: #3b82f6;
}
/* Chart type button hover effect */
.chart-type-btn:hover {
background-color: #2d3a4f;
}
</style>
</head>
<body class="flex flex-col h-screen overflow-hidden bg-[#0d1421] text-white font-['Inter']">
@ -73,8 +84,37 @@
<span class="text-xs text-[#8fa2b3]" id="statusText">Live</span>
</div>
<div class="flex space-x-1 items-center overflow-x-auto no-scrollbar" id="timeframeContainer">
<!-- Timeframes injected by JS -->
<!-- Mobile Chart Type Selector -->
<div class="md:hidden flex items-center gap-2">
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="candlestick" title="Candlestick">
<span class="material-symbols-outlined text-sm">show_chart</span>
</button>
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="line" title="Line">
<span class="material-symbols-outlined text-sm">insert_chart</span>
</button>
</div>
<div class="flex items-center gap-2 overflow-x-auto no-scrollbar">
<!-- Chart Type Buttons -->
<div class="flex space-x-1">
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="candlestick" title="Candlestick">
<span class="material-symbols-outlined text-sm">show_chart</span>
</button>
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="line" title="Line">
<span class="material-symbols-outlined text-sm">insert_chart</span>
</button>
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="bar" title="Bar">
<span class="material-symbols-outlined text-sm">scatter_plot</span>
</button>
</div>
<!-- Timeframe Separator -->
<div class="w-px h-8 bg-[#2d3a4f] mx-0.5"></div>
<!-- Timeframes -->
<div class="flex space-x-1 items-center overflow-x-auto no-scrollbar" id="timeframeContainer">
<!-- Timeframes injected by JS -->
</div>
</div>
</header>
@ -336,15 +376,9 @@
Technical Analysis
<span id="taInterval" class="text-[10px] bg-blue-600/20 text-blue-400 px-2 py-0.5 rounded ml-2 border border-blue-600/30">1D</span>
</h2>
<div class="flex items-center gap-2">
<span id="taLastUpdate" class="text-xs text-gray-600 mr-2 hidden sm:inline-block">--</span>
<button class="bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-3 py-1.5 rounded text-xs font-bold hover:shadow-lg transition-all flex items-center gap-1" id="aiBtn" onclick="window.openAIAnalysis()">
<span class="material-symbols-outlined text-sm">smart_toy</span> AI Insight
</button>
<button class="bg-[#1e222d] border border-[#2d3a4f] text-gray-400 px-3 py-1.5 rounded text-xs hover:text-white hover:border-gray-500 transition-colors" onclick="window.refreshTA()">
<span class="material-symbols-outlined text-sm align-bottom">refresh</span>
</button>
</div>
<div class="flex items-center gap-2">
<span id="taLastUpdate" class="text-xs text-gray-600 mr-2 hidden sm:inline-block">--</span>
</div>
</div>
<div id="taContent" class="grid grid-cols-2 md:grid-cols-4 gap-4">