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/dashboard.html

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

Rendered Source

code140 linesFree

templates/dashboard.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>Dashboard</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  <!-- KPI Cards (optional, not included in chart export) -->
24  <div class="kpi-row">
25    <div class="kpi-card">
26      <div class="label">Total Revenue</div>
27      <div class="value">$1.24M</div>
28      <div class="change up">↑ 12.5% vs last month</div>
29    </div>
30    <div class="kpi-card">
31      <div class="label">Active Users</div>
32      <div class="value">8,432</div>
33      <div class="change up">↑ 5.2%</div>
34    </div>
35    <div class="kpi-card">
36      <div class="label">Conversion Rate</div>
37      <div class="value">3.8%</div>
38      <div class="change down">↓ 0.3%</div>
39    </div>
40    <div class="kpi-card">
41      <div class="label">Avg Order Value</div>
42      <div class="value">$147</div>
43      <div class="change up">↑ 8.1%</div>
44    </div>
45  </div>
46 
47  <div id="chart-area">
48    <div class="grid-2">
49      <div class="chart-box">
50        <div class="chart-title">Revenue Trend</div>
51        <div id="chart-line" style="width:100%;height:300px;"></div>
52      </div>
53      <div class="chart-box">
54        <div class="chart-title">Category Sales</div>
55        <div id="chart-bar" style="width:100%;height:300px;"></div>
56      </div>
57      <div class="chart-box">
58        <div class="chart-title">Traffic Sources</div>
59        <div id="chart-pie" style="width:100%;height:300px;"></div>
60      </div>
61      <div class="chart-box">
62        <div class="chart-title">Price vs Volume</div>
63        <div id="chart-scatter" style="width:100%;height:300px;"></div>
64      </div>
65    </div>
66  </div>
67 
68  <script>{{BASE_EXPORT_JS}}</script>
69  <script>
70    // ── Register all chart instances (REQUIRED for export) ──
71    window.CHART_INSTANCES = [];
72    window.CHART_LAYOUT = 'grid'; // 'vertical' | 'grid'
73 
74    const darkOpt = { backgroundColor: 'transparent' };
75 
76    // Line
77    const c1 = echarts.init(document.getElementById('chart-line'), 'dark');
78    c1.setOption({
79      ...darkOpt,
80      tooltip: { trigger: 'axis' },
81      grid: { top: 20, right: 20, bottom: 30, left: 50 },
82      xAxis: { type: 'category', data: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] },
83      yAxis: { type: 'value' },
84      series: [{ type: 'line', data: [82,93,90,93,129,133,132,140,150,160,170,180], smooth: true, areaStyle: { opacity: 0.1 } }],
85    });
86    CHART_INSTANCES.push(c1);
87 
88    // Bar
89    const c2 = echarts.init(document.getElementById('chart-bar'), 'dark');
90    c2.setOption({
91      ...darkOpt,
92      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
93      grid: { top: 20, right: 20, bottom: 30, left: 50 },
94      xAxis: { type: 'value' },
95      yAxis: { type: 'category', data: ['Electronics','Clothing','Food','Books','Sports'] },
96      series: [{ type: 'bar', data: [320,280,210,190,150], itemStyle: { borderRadius: [0,4,4,0] } }],
97    });
98    CHART_INSTANCES.push(c2);
99 
100    // Pie
101    const c3 = echarts.init(document.getElementById('chart-pie'), 'dark');
102    c3.setOption({
103      ...darkOpt,
104      tooltip: { trigger: 'item' },
105      series: [{
106        type: 'pie', radius: ['35%','65%'], center: ['50%','55%'],
107        data: [
108          { name: 'Organic', value: 40 }, { name: 'Paid', value: 25 },
109          { name: 'Social', value: 20 }, { name: 'Direct', value: 15 },
110        ],
111        itemStyle: { borderRadius: 5, borderColor: '#12141c', borderWidth: 2 },
112        label: { color: '#c8cdd6' },
113      }],
114    });
115    CHART_INSTANCES.push(c3);
116 
117    // Scatter
118    const c4 = echarts.init(document.getElementById('chart-scatter'), 'dark');
119    const scatterData = Array.from({length: 50}, () => [
120      Math.round(Math.random() * 200 + 20),
121      Math.round(Math.random() * 1000),
122      Math.round(Math.random() * 50 + 5),
123    ]);
124    c4.setOption({
125      ...darkOpt,
126      tooltip: { formatter: p => `Price: $${p.data[0]}<br>Volume: ${p.data[1]}<br>Size: ${p.data[2]}` },
127      grid: { top: 20, right: 20, bottom: 30, left: 50 },
128      xAxis: { type: 'value', name: 'Price' },
129      yAxis: { type: 'value', name: 'Volume' },
130      series: [{
131        type: 'scatter', data: scatterData,
132        symbolSize: d => d[2] / 3,
133        itemStyle: { opacity: 0.7 },
134      }],
135    });
136    CHART_INSTANCES.push(c4);
137    </script>
138</body>
139</html>
140

Marketplace

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/dashboard.html

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

Rendered Source

code140 linesFree

templates/dashboard.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>Dashboard</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  <!-- KPI Cards (optional, not included in chart export) -->
24  <div class="kpi-row">
25    <div class="kpi-card">
26      <div class="label">Total Revenue</div>
27      <div class="value">$1.24M</div>
28      <div class="change up">↑ 12.5% vs last month</div>
29    </div>
30    <div class="kpi-card">
31      <div class="label">Active Users</div>
32      <div class="value">8,432</div>
33      <div class="change up">↑ 5.2%</div>
34    </div>
35    <div class="kpi-card">
36      <div class="label">Conversion Rate</div>
37      <div class="value">3.8%</div>
38      <div class="change down">↓ 0.3%</div>
39    </div>
40    <div class="kpi-card">
41      <div class="label">Avg Order Value</div>
42      <div class="value">$147</div>
43      <div class="change up">↑ 8.1%</div>
44    </div>
45  </div>
46 
47  <div id="chart-area">
48    <div class="grid-2">
49      <div class="chart-box">
50        <div class="chart-title">Revenue Trend</div>
51        <div id="chart-line" style="width:100%;height:300px;"></div>
52      </div>
53      <div class="chart-box">
54        <div class="chart-title">Category Sales</div>
55        <div id="chart-bar" style="width:100%;height:300px;"></div>
56      </div>
57      <div class="chart-box">
58        <div class="chart-title">Traffic Sources</div>
59        <div id="chart-pie" style="width:100%;height:300px;"></div>
60      </div>
61      <div class="chart-box">
62        <div class="chart-title">Price vs Volume</div>
63        <div id="chart-scatter" style="width:100%;height:300px;"></div>
64      </div>
65    </div>
66  </div>
67 
68  <script>{{BASE_EXPORT_JS}}</script>
69  <script>
70    // ── Register all chart instances (REQUIRED for export) ──
71    window.CHART_INSTANCES = [];
72    window.CHART_LAYOUT = 'grid'; // 'vertical' | 'grid'
73 
74    const darkOpt = { backgroundColor: 'transparent' };
75 
76    // Line
77    const c1 = echarts.init(document.getElementById('chart-line'), 'dark');
78    c1.setOption({
79      ...darkOpt,
80      tooltip: { trigger: 'axis' },
81      grid: { top: 20, right: 20, bottom: 30, left: 50 },
82      xAxis: { type: 'category', data: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] },
83      yAxis: { type: 'value' },
84      series: [{ type: 'line', data: [82,93,90,93,129,133,132,140,150,160,170,180], smooth: true, areaStyle: { opacity: 0.1 } }],
85    });
86    CHART_INSTANCES.push(c1);
87 
88    // Bar
89    const c2 = echarts.init(document.getElementById('chart-bar'), 'dark');
90    c2.setOption({
91      ...darkOpt,
92      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
93      grid: { top: 20, right: 20, bottom: 30, left: 50 },
94      xAxis: { type: 'value' },
95      yAxis: { type: 'category', data: ['Electronics','Clothing','Food','Books','Sports'] },
96      series: [{ type: 'bar', data: [320,280,210,190,150], itemStyle: { borderRadius: [0,4,4,0] } }],
97    });
98    CHART_INSTANCES.push(c2);
99 
100    // Pie
101    const c3 = echarts.init(document.getElementById('chart-pie'), 'dark');
102    c3.setOption({
103      ...darkOpt,
104      tooltip: { trigger: 'item' },
105      series: [{
106        type: 'pie', radius: ['35%','65%'], center: ['50%','55%'],
107        data: [
108          { name: 'Organic', value: 40 }, { name: 'Paid', value: 25 },
109          { name: 'Social', value: 20 }, { name: 'Direct', value: 15 },
110        ],
111        itemStyle: { borderRadius: 5, borderColor: '#12141c', borderWidth: 2 },
112        label: { color: '#c8cdd6' },
113      }],
114    });
115    CHART_INSTANCES.push(c3);
116 
117    // Scatter
118    const c4 = echarts.init(document.getElementById('chart-scatter'), 'dark');
119    const scatterData = Array.from({length: 50}, () => [
120      Math.round(Math.random() * 200 + 20),
121      Math.round(Math.random() * 1000),
122      Math.round(Math.random() * 50 + 5),
123    ]);
124    c4.setOption({
125      ...darkOpt,
126      tooltip: { formatter: p => `Price: $${p.data[0]}<br>Volume: ${p.data[1]}<br>Size: ${p.data[2]}` },
127      grid: { top: 20, right: 20, bottom: 30, left: 50 },
128      xAxis: { type: 'value', name: 'Price' },
129      yAxis: { type: 'value', name: 'Volume' },
130      series: [{
131        type: 'scatter', data: scatterData,
132        symbolSize: d => d[2] / 3,
133        itemStyle: { opacity: 0.7 },
134      }],
135    });
136    CHART_INSTANCES.push(c4);
137    </script>
138</body>
139</html>
140

Charting

templates/dashboard.html

Preparing the source view

Charting

templates/dashboard.html