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

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

Rendered Source

code151 linesFree

templates/waterfall.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>Waterfall Chart</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:460px;"></div>
25  </div>
26 
27  <script>{{BASE_EXPORT_JS}}</script>
28  <script>
29    // === DATA ===
30    // type: 'start' | 'end' | 'increase' | 'decrease'
31    const items = [
32      { name: 'Starting Balance', value: 1000, type: 'start' },
33      { name: 'Trading Profit',   value: 320,  type: 'increase' },
34      { name: 'Funding Income',   value: 85,   type: 'increase' },
35      { name: 'Withdrawal',       value: -200, type: 'decrease' },
36      { name: 'Gas Fees',         value: -45,  type: 'decrease' },
37      { name: 'Slippage Loss',    value: -30,  type: 'decrease' },
38      { name: 'Airdrop',          value: 120,  type: 'increase' },
39      { name: 'Ending Balance',   value: null, type: 'end' },   // auto-calculated
40    ];
41 
42    // === BUILD WATERFALL DATA ===
43    const COLOR_START    = '#5470c6';
44    const COLOR_INCREASE = '#26a69a';
45    const COLOR_DECREASE = '#ef5350';
46    const COLOR_END      = '#fac858';
47 
48    let runningTotal = 0;
49    const categories = [];
50    const baseData   = [];   // invisible base bar (offset)
51    const barData    = [];   // actual bar value
52 
53    items.forEach(item => {
54      categories.push(item.name);
55      if (item.type === 'start') {
56        runningTotal = item.value;
57        baseData.push(0);
58        barData.push({ value: item.value, itemStyle: { color: COLOR_START } });
59      } else if (item.type === 'end') {
60        const endVal = runningTotal;
61        baseData.push(0);
62        barData.push({ value: endVal, itemStyle: { color: COLOR_END } });
63      } else {
64        const change = item.value;
65        if (change > 0) {
66          baseData.push(runningTotal);
67          barData.push({ value: change, itemStyle: { color: COLOR_INCREASE } });
68          runningTotal += change;
69        } else {
70          runningTotal += change;  // decrease first
71          baseData.push(runningTotal);
72          barData.push({ value: -change, itemStyle: { color: COLOR_DECREASE } });
73        }
74      }
75    });
76 
77    // === CHART ===
78    window.CHART_INSTANCES = [];
79    const chart = echarts.init(document.getElementById('main-chart'), 'dark');
80    chart.setOption({
81      backgroundColor: 'transparent',
82      tooltip: {
83        trigger: 'axis',
84        axisPointer: { type: 'shadow' },
85        formatter: params => {
86          // Show only the actual bar (series index 1)
87          const bar = params.find(p => p.seriesIndex === 1);
88          if (!bar) return '';
89          const item = items[bar.dataIndex];
90          const isDecrease = item.type === 'decrease';
91          const sign = isDecrease ? '-' : (item.type === 'start' || item.type === 'end') ? '' : '+';
92          const val = isDecrease ? -item.value : (item.type === 'end' ? bar.value : item.value);
93          return `<b>${bar.name}</b><br/>${sign}${val.toLocaleString()}`;
94        },
95      },
96      legend: {
97        top: 8,
98        data: [
99          { name: 'Start/End',  icon: 'rect', itemStyle: { color: COLOR_START } },
100          { name: 'Increase',   icon: 'rect', itemStyle: { color: COLOR_INCREASE } },
101          { name: 'Decrease',   icon: 'rect', itemStyle: { color: COLOR_DECREASE } },
102        ],
103      },
104      grid: { top: 50, right: 30, bottom: 40, left: 80 },
105      xAxis: {
106        type: 'category',
107        data: categories,
108        axisLabel: { rotate: 20, color: '#c8cdd6', fontSize: 11 },
109      },
110      yAxis: {
111        type: 'value',
112        splitLine: { lineStyle: { color: '#2a2d3a' } },
113      },
114      series: [
115        // Invisible base (offset)
116        {
117          name: '_base',
118          type: 'bar',
119          stack: 'waterfall',
120          silent: true,
121          itemStyle: { color: 'transparent', borderColor: 'transparent' },
122          data: baseData,
123        },
124        // Actual bar
125        {
126          name: 'Change',
127          type: 'bar',
128          stack: 'waterfall',
129          data: barData,
130          barMaxWidth: 50,
131          itemStyle: { borderRadius: [4, 4, 0, 0] },
132          label: {
133            show: true,
134            position: 'top',
135            color: '#c8cdd6',
136            fontSize: 11,
137            formatter: p => {
138              const item = items[p.dataIndex];
139              if (item.type === 'start' || item.type === 'end') return p.value.toLocaleString();
140              return (item.value > 0 ? '+' : '') + item.value.toLocaleString();
141            },
142          },
143        },
144      ],
145    });
146 
147    CHART_INSTANCES.push(chart);
148  </script>
149</body>
150</html>
151

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

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

Rendered Source

code151 linesFree

templates/waterfall.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>Waterfall Chart</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:460px;"></div>
25  </div>
26 
27  <script>{{BASE_EXPORT_JS}}</script>
28  <script>
29    // === DATA ===
30    // type: 'start' | 'end' | 'increase' | 'decrease'
31    const items = [
32      { name: 'Starting Balance', value: 1000, type: 'start' },
33      { name: 'Trading Profit',   value: 320,  type: 'increase' },
34      { name: 'Funding Income',   value: 85,   type: 'increase' },
35      { name: 'Withdrawal',       value: -200, type: 'decrease' },
36      { name: 'Gas Fees',         value: -45,  type: 'decrease' },
37      { name: 'Slippage Loss',    value: -30,  type: 'decrease' },
38      { name: 'Airdrop',          value: 120,  type: 'increase' },
39      { name: 'Ending Balance',   value: null, type: 'end' },   // auto-calculated
40    ];
41 
42    // === BUILD WATERFALL DATA ===
43    const COLOR_START    = '#5470c6';
44    const COLOR_INCREASE = '#26a69a';
45    const COLOR_DECREASE = '#ef5350';
46    const COLOR_END      = '#fac858';
47 
48    let runningTotal = 0;
49    const categories = [];
50    const baseData   = [];   // invisible base bar (offset)
51    const barData    = [];   // actual bar value
52 
53    items.forEach(item => {
54      categories.push(item.name);
55      if (item.type === 'start') {
56        runningTotal = item.value;
57        baseData.push(0);
58        barData.push({ value: item.value, itemStyle: { color: COLOR_START } });
59      } else if (item.type === 'end') {
60        const endVal = runningTotal;
61        baseData.push(0);
62        barData.push({ value: endVal, itemStyle: { color: COLOR_END } });
63      } else {
64        const change = item.value;
65        if (change > 0) {
66          baseData.push(runningTotal);
67          barData.push({ value: change, itemStyle: { color: COLOR_INCREASE } });
68          runningTotal += change;
69        } else {
70          runningTotal += change;  // decrease first
71          baseData.push(runningTotal);
72          barData.push({ value: -change, itemStyle: { color: COLOR_DECREASE } });
73        }
74      }
75    });
76 
77    // === CHART ===
78    window.CHART_INSTANCES = [];
79    const chart = echarts.init(document.getElementById('main-chart'), 'dark');
80    chart.setOption({
81      backgroundColor: 'transparent',
82      tooltip: {
83        trigger: 'axis',
84        axisPointer: { type: 'shadow' },
85        formatter: params => {
86          // Show only the actual bar (series index 1)
87          const bar = params.find(p => p.seriesIndex === 1);
88          if (!bar) return '';
89          const item = items[bar.dataIndex];
90          const isDecrease = item.type === 'decrease';
91          const sign = isDecrease ? '-' : (item.type === 'start' || item.type === 'end') ? '' : '+';
92          const val = isDecrease ? -item.value : (item.type === 'end' ? bar.value : item.value);
93          return `<b>${bar.name}</b><br/>${sign}${val.toLocaleString()}`;
94        },
95      },
96      legend: {
97        top: 8,
98        data: [
99          { name: 'Start/End',  icon: 'rect', itemStyle: { color: COLOR_START } },
100          { name: 'Increase',   icon: 'rect', itemStyle: { color: COLOR_INCREASE } },
101          { name: 'Decrease',   icon: 'rect', itemStyle: { color: COLOR_DECREASE } },
102        ],
103      },
104      grid: { top: 50, right: 30, bottom: 40, left: 80 },
105      xAxis: {
106        type: 'category',
107        data: categories,
108        axisLabel: { rotate: 20, color: '#c8cdd6', fontSize: 11 },
109      },
110      yAxis: {
111        type: 'value',
112        splitLine: { lineStyle: { color: '#2a2d3a' } },
113      },
114      series: [
115        // Invisible base (offset)
116        {
117          name: '_base',
118          type: 'bar',
119          stack: 'waterfall',
120          silent: true,
121          itemStyle: { color: 'transparent', borderColor: 'transparent' },
122          data: baseData,
123        },
124        // Actual bar
125        {
126          name: 'Change',
127          type: 'bar',
128          stack: 'waterfall',
129          data: barData,
130          barMaxWidth: 50,
131          itemStyle: { borderRadius: [4, 4, 0, 0] },
132          label: {
133            show: true,
134            position: 'top',
135            color: '#c8cdd6',
136            fontSize: 11,
137            formatter: p => {
138              const item = items[p.dataIndex];
139              if (item.type === 'start' || item.type === 'end') return p.value.toLocaleString();
140              return (item.value > 0 ? '+' : '') + item.value.toLocaleString();
141            },
142          },
143        },
144      ],
145    });
146 
147    CHART_INSTANCES.push(chart);
148  </script>
149</body>
150</html>
151

Charting

templates/waterfall.html

Preparing the source view

Charting

templates/waterfall.html