Hugging Face's logo

Spaces:
mauryaR8
/
realtime-api-data-visualization
Running

App Files Community
mauryaR8 commited on
Commit
ff68610
·
verified ·
1 Parent(s): 971bd52

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +525 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Realtime Api Data Visualization
3
- emoji: 🏃
4
- colorFrom: green
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: realtime-api-data-visualization
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,525 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Real-Time API Data Visualization</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%);
13
+ }
14
+ .chart-container {
15
+ position: relative;
16
+ height: 300px;
17
+ width: 100%;
18
+ }
19
+ .api-card:hover {
20
+ transform: translateY(-5px);
21
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
22
+ }
23
+ .pulse {
24
+ animation: pulse 2s infinite;
25
+ }
26
+ @keyframes pulse {
27
+ 0% { opacity: 1; }
28
+ 50% { opacity: 0.5; }
29
+ 100% { opacity: 1; }
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-100 min-h-screen">
34
+ <div class="gradient-bg text-white py-6 shadow-lg">
35
+ <div class="container mx-auto px-4">
36
+ <div class="flex justify-between items-center">
37
+ <h1 class="text-3xl font-bold">Real-Time API Data Visualization</h1>
38
+ <div class="flex items-center space-x-2">
39
+ <span id="connection-status" class="flex items-center">
40
+ <span class="h-3 w-3 rounded-full bg-green-500 mr-2"></span>
41
+ <span>Connected</span>
42
+ </span>
43
+ </div>
44
+ </div>
45
+ <p class="mt-2 opacity-90">Visualize data from multiple APIs in real-time with interactive charts</p>
46
+ </div>
47
+ </div>
48
+
49
+ <div class="container mx-auto px-4 py-8">
50
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
51
+ <!-- API Configuration Panel -->
52
+ <div class="bg-white rounded-xl shadow-md p-6 lg:col-span-1">
53
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">API Configuration</h2>
54
+
55
+ <div class="mb-6">
56
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="api-select">
57
+ Select API Source
58
+ </label>
59
+ <select id="api-select" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
60
+ <option value="crypto">Crypto Prices (CoinGecko)</option>
61
+ <option value="weather">Weather Data (OpenWeather)</option>
62
+ <option value="stocks">Stock Prices (Alpha Vantage)</option>
63
+ <option value="custom">Custom API</option>
64
+ </select>
65
+ </div>
66
+
67
+ <div id="api-config-section">
68
+ <!-- Crypto API Config -->
69
+ <div id="crypto-config" class="api-config">
70
+ <div class="mb-4">
71
+ <label class="block text-gray-700 text-sm font-medium mb-2">
72
+ Cryptocurrency
73
+ </label>
74
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
75
+ <option value="bitcoin">Bitcoin (BTC)</option>
76
+ <option value="ethereum">Ethereum (ETH)</option>
77
+ <option value="ripple">Ripple (XRP)</option>
78
+ <option value="cardano">Cardano (ADA)</option>
79
+ </select>
80
+ </div>
81
+ <div class="mb-4">
82
+ <label class="block text-gray-700 text-sm font-medium mb-2">
83
+ Currency
84
+ </label>
85
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
86
+ <option value="usd">US Dollar (USD)</option>
87
+ <option value="eur">Euro (EUR)</option>
88
+ <option value="gbp">British Pound (GBP)</option>
89
+ <option value="jpy">Japanese Yen (JPY)</option>
90
+ </select>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- Custom API Config -->
95
+ <div id="custom-config" class="api-config hidden">
96
+ <div class="mb-4">
97
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="custom-url">
98
+ API Endpoint URL
99
+ </label>
100
+ <input type="text" id="custom-url" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="https://api.example.com/data">
101
+ </div>
102
+ <div class="mb-4">
103
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="custom-key">
104
+ API Key (if required)
105
+ </label>
106
+ <input type="text" id="custom-key" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Your API key">
107
+ </div>
108
+ <div class="mb-4">
109
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="data-path">
110
+ Data Path (JSON path to numeric values)
111
+ </label>
112
+ <input type="text" id="data-path" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="$.data.values">
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <div class="mb-6">
118
+ <label class="block text-gray-700 text-sm font-medium mb-2">
119
+ Refresh Interval (seconds)
120
+ </label>
121
+ <div class="flex items-center">
122
+ <input type="range" id="refresh-interval" min="1" max="60" value="5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
123
+ <span id="interval-value" class="ml-4 text-gray-700 w-12 text-center">5s</span>
124
+ </div>
125
+ </div>
126
+
127
+ <div class="flex space-x-3">
128
+ <button id="start-btn" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md font-medium transition duration-150 ease-in-out">
129
+ <i class="fas fa-play mr-2"></i> Start
130
+ </button>
131
+ <button id="stop-btn" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-md font-medium transition duration-150 ease-in-out">
132
+ <i class="fas fa-stop mr-2"></i> Stop
133
+ </button>
134
+ <button id="add-chart-btn" class="flex-1 bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-md font-medium transition duration-150 ease-in-out">
135
+ <i class="fas fa-plus mr-2"></i> Add Chart
136
+ </button>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Charts Display Area -->
141
+ <div class="bg-white rounded-xl shadow-md p-6 lg:col-span-2">
142
+ <div class="flex justify-between items-center mb-4">
143
+ <h2 class="text-xl font-semibold text-gray-800">Data Visualization</h2>
144
+ <div class="flex space-x-2">
145
+ <button id="export-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded-md text-sm font-medium">
146
+ <i class="fas fa-download mr-1"></i> Export
147
+ </button>
148
+ <button id="clear-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded-md text-sm font-medium">
149
+ <i class="fas fa-trash-alt mr-1"></i> Clear All
150
+ </button>
151
+ </div>
152
+ </div>
153
+
154
+ <div id="charts-container">
155
+ <!-- Placeholder when no charts are added -->
156
+ <div id="empty-state" class="flex flex-col items-center justify-center py-12 text-center">
157
+ <i class="fas fa-chart-line text-4xl text-gray-300 mb-4"></i>
158
+ <h3 class="text-lg font-medium text-gray-500">No charts added yet</h3>
159
+ <p class="text-gray-400 mt-1">Configure an API and click "Add Chart" to visualize data</p>
160
+ </div>
161
+
162
+ <!-- Chart templates will be added here dynamically -->
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- API Status Cards -->
168
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
169
+ <div class="api-card bg-white rounded-xl shadow-md p-4 transition duration-300 ease-in-out">
170
+ <div class="flex items-center">
171
+ <div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4">
172
+ <i class="fas fa-coins text-xl"></i>
173
+ </div>
174
+ <div>
175
+ <h3 class="font-medium text-gray-800">Crypto API</h3>
176
+ <p class="text-sm text-gray-500">CoinGecko</p>
177
+ </div>
178
+ </div>
179
+ <div class="mt-4 flex justify-between items-center">
180
+ <span class="text-sm text-gray-500">Status</span>
181
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span>
182
+ </div>
183
+ </div>
184
+ <div class="api-card bg-white rounded-xl shadow-md p-4 transition duration-300 ease-in-out">
185
+ <div class="flex items-center">
186
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
187
+ <i class="fas fa-cloud-sun text-xl"></i>
188
+ </div>
189
+ <div>
190
+ <h3 class="font-medium text-gray-800">Weather API</h3>
191
+ <p class="text-sm text-gray-500">OpenWeather</p>
192
+ </div>
193
+ </div>
194
+ <div class="mt-4 flex justify-between items-center">
195
+ <span class="text-sm text-gray-500">Status</span>
196
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span>
197
+ </div>
198
+ </div>
199
+ <div class="api-card bg-white rounded-xl shadow-md p-4 transition duration-300 ease-in-out">
200
+ <div class="flex items-center">
201
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
202
+ <i class="fas fa-chart-line text-xl"></i>
203
+ </div>
204
+ <div>
205
+ <h3 class="font-medium text-gray-800">Stocks API</h3>
206
+ <p class="text-sm text-gray-500">Alpha Vantage</p>
207
+ </div>
208
+ </div>
209
+ <div class="mt-4 flex justify-between items-center">
210
+ <span class="text-sm text-gray-500">Status</span>
211
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <script>
218
+ // DOM Elements
219
+ const apiSelect = document.getElementById('api-select');
220
+ const apiConfigSections = document.querySelectorAll('.api-config');
221
+ const refreshInterval = document.getElementById('refresh-interval');
222
+ const intervalValue = document.getElementById('interval-value');
223
+ const startBtn = document.getElementById('start-btn');
224
+ const stopBtn = document.getElementById('stop-btn');
225
+ const addChartBtn = document.getElementById('add-chart-btn');
226
+ const clearBtn = document.getElementById('clear-btn');
227
+ const exportBtn = document.getElementById('export-btn');
228
+ const chartsContainer = document.getElementById('charts-container');
229
+ const emptyState = document.getElementById('empty-state');
230
+
231
+ // Chart counter and data storage
232
+ let chartCounter = 0;
233
+ let charts = [];
234
+ let fetchInterval = null;
235
+ let isRunning = false;
236
+
237
+ // Event Listeners
238
+ apiSelect.addEventListener('change', handleApiSelectChange);
239
+ refreshInterval.addEventListener('input', updateIntervalValue);
240
+ startBtn.addEventListener('click', startFetching);
241
+ stopBtn.addEventListener('click', stopFetching);
242
+ addChartBtn.addEventListener('click', addNewChart);
243
+ clearBtn.addEventListener('click', clearAllCharts);
244
+ exportBtn.addEventListener('click', exportData);
245
+
246
+ // Functions
247
+ function handleApiSelectChange() {
248
+ const selectedApi = apiSelect.value;
249
+
250
+ // Hide all config sections
251
+ apiConfigSections.forEach(section => {
252
+ section.classList.add('hidden');
253
+ });
254
+
255
+ // Show selected config section
256
+ document.getElementById(`${selectedApi}-config`).classList.remove('hidden');
257
+ }
258
+
259
+ function updateIntervalValue() {
260
+ intervalValue.textContent = `${refreshInterval.value}s`;
261
+ }
262
+
263
+ function startFetching() {
264
+ if (charts.length === 0) {
265
+ alert('Please add at least one chart before starting.');
266
+ return;
267
+ }
268
+
269
+ if (isRunning) return;
270
+
271
+ isRunning = true;
272
+ startBtn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
273
+ startBtn.classList.add('bg-indigo-400', 'cursor-not-allowed');
274
+ stopBtn.classList.remove('bg-gray-200', 'hover:bg-gray-300');
275
+ stopBtn.classList.add('bg-gray-100', 'cursor-not-allowed');
276
+
277
+ // Initial fetch
278
+ fetchDataForAllCharts();
279
+
280
+ // Set up interval
281
+ const interval = parseInt(refreshInterval.value) * 1000;
282
+ fetchInterval = setInterval(fetchDataForAllCharts, interval);
283
+
284
+ // Update connection status
285
+ document.querySelector('#connection-status span').classList.remove('bg-green-500');
286
+ document.querySelector('#connection-status span').classList.add('bg-yellow-500', 'pulse');
287
+ document.querySelector('#connection-status span + span').textContent = 'Fetching data...';
288
+ }
289
+
290
+ function stopFetching() {
291
+ if (!isRunning) return;
292
+
293
+ isRunning = false;
294
+ clearInterval(fetchInterval);
295
+
296
+ startBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
297
+ startBtn.classList.remove('bg-indigo-400', 'cursor-not-allowed');
298
+ stopBtn.classList.add('bg-gray-200', 'hover:bg-gray-300');
299
+ stopBtn.classList.remove('bg-gray-100', 'cursor-not-allowed');
300
+
301
+ // Update connection status
302
+ document.querySelector('#connection-status span').classList.remove('bg-yellow-500', 'pulse');
303
+ document.querySelector('#connection-status span').classList.add('bg-green-500');
304
+ document.querySelector('#connection-status span + span').textContent = 'Connected';
305
+ }
306
+
307
+ function addNewChart() {
308
+ // Hide empty state if it's the first chart
309
+ if (charts.length === 0) {
310
+ emptyState.classList.add('hidden');
311
+ }
312
+
313
+ chartCounter++;
314
+ const chartId = `chart-${chartCounter}`;
315
+
316
+ // Create chart container
317
+ const chartDiv = document.createElement('div');
318
+ chartDiv.className = 'mb-8';
319
+ chartDiv.id = `container-${chartId}`;
320
+
321
+ // Chart header with title and controls
322
+ const chartHeader = document.createElement('div');
323
+ chartHeader.className = 'flex justify-between items-center mb-2';
324
+
325
+ const chartTitle = document.createElement('h3');
326
+ chartTitle.className = 'font-medium text-gray-800';
327
+ chartTitle.textContent = `Chart ${chartCounter} - ${apiSelect.options[apiSelect.selectedIndex].text}`;
328
+
329
+ const chartControls = document.createElement('div');
330
+ chartControls.className = 'flex space-x-2';
331
+
332
+ const removeBtn = document.createElement('button');
333
+ removeBtn.className = 'text-red-500 hover:text-red-700 text-sm';
334
+ removeBtn.innerHTML = '<i class="fas fa-times"></i>';
335
+ removeBtn.onclick = () => removeChart(chartId);
336
+
337
+ chartControls.appendChild(removeBtn);
338
+ chartHeader.appendChild(chartTitle);
339
+ chartHeader.appendChild(chartControls);
340
+
341
+ // Chart canvas
342
+ const chartCanvas = document.createElement('canvas');
343
+ chartCanvas.id = chartId;
344
+
345
+ // Assemble the chart container
346
+ chartDiv.appendChild(chartHeader);
347
+ chartDiv.appendChild(document.createElement('div').appendChild(chartCanvas).parentNode);
348
+
349
+ // Add to DOM
350
+ chartsContainer.appendChild(chartDiv);
351
+
352
+ // Create Chart.js instance
353
+ const ctx = document.getElementById(chartId).getContext('2d');
354
+ const newChart = new Chart(ctx, {
355
+ type: 'line',
356
+ data: {
357
+ labels: [],
358
+ datasets: [{
359
+ label: 'Value',
360
+ data: [],
361
+ borderColor: getRandomColor(),
362
+ backgroundColor: 'rgba(0, 0, 0, 0.1)',
363
+ borderWidth: 2,
364
+ tension: 0.1,
365
+ fill: true
366
+ }]
367
+ },
368
+ options: {
369
+ responsive: true,
370
+ maintainAspectRatio: false,
371
+ scales: {
372
+ y: {
373
+ beginAtZero: false
374
+ }
375
+ },
376
+ plugins: {
377
+ legend: {
378
+ display: false
379
+ },
380
+ tooltip: {
381
+ mode: 'index',
382
+ intersect: false
383
+ }
384
+ },
385
+ hover: {
386
+ mode: 'nearest',
387
+ intersect: true
388
+ }
389
+ }
390
+ });
391
+
392
+ // Store chart reference
393
+ charts.push({
394
+ id: chartId,
395
+ instance: newChart,
396
+ apiType: apiSelect.value,
397
+ config: getCurrentConfig()
398
+ });
399
+ }
400
+
401
+ function removeChart(chartId) {
402
+ // Find and destroy chart
403
+ const chartIndex = charts.findIndex(chart => chart.id === chartId);
404
+ if (chartIndex !== -1) {
405
+ charts[chartIndex].instance.destroy();
406
+ charts.splice(chartIndex, 1);
407
+
408
+ // Remove from DOM
409
+ document.getElementById(`container-${chartId}`).remove();
410
+
411
+ // Show empty state if no charts left
412
+ if (charts.length === 0) {
413
+ emptyState.classList.remove('hidden');
414
+ }
415
+ }
416
+ }
417
+
418
+ function clearAllCharts() {
419
+ // Stop any running fetches
420
+ stopFetching();
421
+
422
+ // Destroy all charts
423
+ charts.forEach(chart => {
424
+ chart.instance.destroy();
425
+ });
426
+
427
+ // Clear the array
428
+ charts = [];
429
+ chartCounter = 0;
430
+
431
+ // Clear the container
432
+ chartsContainer.innerHTML = '';
433
+ emptyState.classList.remove('hidden');
434
+ }
435
+
436
+ function fetchDataForAllCharts() {
437
+ if (charts.length === 0) return;
438
+
439
+ // For demo purposes, we'll simulate API calls with random data
440
+ charts.forEach(chart => {
441
+ // In a real app, you would make actual API calls here
442
+ // For now, we'll simulate with random data
443
+ simulateApiCall(chart);
444
+ });
445
+ }
446
+
447
+ function simulateApiCall(chart) {
448
+ // Simulate API delay
449
+ setTimeout(() => {
450
+ const now = new Date();
451
+ const timeLabel = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
452
+
453
+ // Generate random data based on API type
454
+ let newValue;
455
+ switch(chart.apiType) {
456
+ case 'crypto':
457
+ newValue = Math.random() * 10000 + 20000; // BTC-like prices
458
+ break;
459
+ case 'weather':
460
+ newValue = Math.random() * 30 + 10; // Temperature-like values
461
+ break;
462
+ case 'stocks':
463
+ newValue = Math.random() * 100 + 150; // Stock-like prices
464
+ break;
465
+ default:
466
+ newValue = Math.random() * 100;
467
+ }
468
+
469
+ // Update chart
470
+ const chartInstance = chart.instance;
471
+ const labels = chartInstance.data.labels;
472
+ const data = chartInstance.data.datasets[0].data;
473
+
474
+ // Keep only last 20 data points for performance
475
+ if (labels.length >= 20) {
476
+ labels.shift();
477
+ data.shift();
478
+ }
479
+
480
+ labels.push(timeLabel);
481
+ data.push(newValue);
482
+
483
+ chartInstance.update();
484
+ }, 500); // Simulate network delay
485
+ }
486
+
487
+ function getCurrentConfig() {
488
+ // In a real app, this would return the current configuration
489
+ // from the form inputs for the selected API
490
+ return {
491
+ api: apiSelect.value,
492
+ // Add other config properties here
493
+ };
494
+ }
495
+
496
+ function getRandomColor() {
497
+ const colors = [
498
+ '#3B82F6', // blue-500
499
+ '#EF4444', // red-500
500
+ '#10B981', // emerald-500
501
+ '#F59E0B', // amber-500
502
+ '#8B5CF6', // violet-500
503
+ '#EC4899', // pink-500
504
+ '#14B8A6', // teal-500
505
+ '#F97316' // orange-500
506
+ ];
507
+ return colors[Math.floor(Math.random() * colors.length)];
508
+ }
509
+
510
+ function exportData() {
511
+ if (charts.length === 0) {
512
+ alert('No data to export. Add charts and fetch data first.');
513
+ return;
514
+ }
515
+
516
+ // In a real app, this would export the chart data
517
+ alert('Export functionality would save chart data here.\nIn a real implementation, this would download a CSV or image.');
518
+ }
519
+
520
+ // Initialize
521
+ handleApiSelectChange();
522
+ updateIntervalValue();
523
+ </script>
524
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mauryaR8/realtime-api-data-visualization" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
525
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ write a code draw interactive graphs in real time based on the one or multiple API inputs.