Source from repo

Charting

Generate TradingView-style dark-theme candlestick charts with RSI, MACD, Bollinger Bands, and EMA/SMA using mplfinance.

starchild-ai-agentGitHub starchild-ai-agentSource repo Original GitHub link Publisher page

Files

Skill

n/a

Size

68.8 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

templates/heatmap.html

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

code68 linesFree

templates/heatmap.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>Heatmap</title>
7  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
8  <style>{{BASE_STYLES}}</style>
9</head>
10<body>
11  <div class="toolbar">
12    <div>
13      <h1>{{TITLE}}</h1>
14      <div class="subtitle">{{SUBTITLE}}</div>
15    </div>
16    <div class="actions">
17      <button onclick="downloadPNG(this)">📥 Download PNG</button>
18      <button onclick="copyToClipboard(this)">📋 Copy Image</button>
19      <button onclick="saveToProject(this)">💾 Save Image</button>
20    </div>
21  </div>
22 
23  <div id="chart-area">
24    <div id="main-chart" style="width:100%;height:450px;"></div>
25  </div>
26 
27  <script>{{BASE_EXPORT_JS}}</script>
28  <script>
29    const hours = ['12a','1a','2a','3a','4a','5a','6a','7a','8a','9a','10a','11a',
30                   '12p','1p','2p','3p','4p','5p','6p','7p','8p','9p','10p','11p'];
31    const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
32 
33    // [dayIndex, hourIndex, value]
34    const data = [];
35    for (let d = 0; d < 7; d++) {
36      for (let h = 0; h < 24; h++) {
37        data.push([h, d, Math.round(Math.random() * 100)]);
38      }
39    }
40 
41    window.CHART_INSTANCES = [];
42    const chart = echarts.init(document.getElementById('main-chart'), 'dark');
43    chart.setOption({
44      backgroundColor: 'transparent',
45      tooltip: {
46        position: 'top',
47        formatter: p => `${days[p.data[1]]} ${hours[p.data[0]]}: ${p.data[2]}`,
48      },
49      grid: { top: 20, right: 60, bottom: 40, left: 60 },
50      xAxis: { type: 'category', data: hours, splitArea: { show: true } },
51      yAxis: { type: 'category', data: days, splitArea: { show: true } },
52      visualMap: {
53        min: 0, max: 100, calculable: true, orient: 'vertical', right: 10, top: 'center',
54        inRange: { color: ['#0f1117', '#1a3a5c', '#2c7be5', '#5d8fff', '#a5c8ff'] },
55        textStyle: { color: '#9ca3af' },
56      },
57      series: [{
58        type: 'heatmap', data: data,
59        label: { show: false },
60        emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.5)' } },
61      }],
62    });
63  
64    CHART_INSTANCES.push(chart);
65    </script>
66</body>
67</html>
68

Preparing the source view

Charting

templates/heatmap.html