vitaly-t · April 24, 2025 12:13
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <title>Trades Analysis</title>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="./data.js"></script>
 </head>
 <body>
 <div id="charts">
    <div id="main"></div>
    <div id="extra"></div>
 </div>
 <script>
    const annotationPoints = exportData.trades.map(a => ({
        x: a.x,
        y: a.y,
        marker: {
            size: 5,
            fillColor: a.trade === 'BUY' ? 'lightgreen' : (a.trade === 'SELL' ? '#EE4B2B' : 'black'),
            strokeColor: 'black',
            strokeWidth: 0.4
        },
        label: {
            borderColor: 'none',
            offsetY: 0,
            style: {
                color: 'black',
                background: 'transparent',
                fontSize: 12,
                fontFamily: 'Verdana'
            },
            text: a.y.toLocaleString(undefined, {maximumFractionDigits: exportData.precision})
        }
    }));

    const stopOrders = exportData.stopOrders.map(a => ({
        x: a.x,
        y: a.y,
        marker: {
            offsetX: 5,
            size: 3,
            fillColor: a.trade === 'BUY' ? 'green' : 'red',
            strokeColor: 'black',
            strokeWidth: 1,
            shape: 'cross'
        },
        label: {
            borderColor: a.trade === 'BUY' ? 'green' : 'red',
            offsetY: a.trade === 'BUY' ? -10 : 40,
            style: {
                background: 'transparent',
                fontSize: 10
            },
            text: a.y.toLocaleString(undefined, {maximumFractionDigits: exportData.precision})
        }
    }));

    const seriesData = exportData.candles.map(a => ({
        x: a.time,
        y: [a.open, a.high, a.low, a.close]
    }));

    const trendLines = exportData.lines.map(l => ({
        type: 'line',
        name: l.name,
        color: l.color,
        data: l.data
    }));

    window.Apex = {
        yaxis: {
            labels: {
                // minWidth: 70,
                //maxWidth: 80
            },
            tooltip: {
                enabled: true
            }
        },
        grid: {
            xaxis: {
                lines: {
                    show: true
                }
            }
        }
    }

    const mainOptions = {
        markers: {
            // size: 5 // creates points on trend lines
        },
        annotations: {
            points: [...annotationPoints, ...stopOrders]
        },
        dataLabels: {
            enabled: false, // in case I want data labels
            // enabledOnSeries: [3, 2]
        },
        stroke: {
            dashArray: [0, 3, 0], // for dashed lines
            width: [1, 2, 2] // separate width for each series
        },
        series: [{
            data: seriesData,
            name: exportData.coin.toUpperCase()
        }, ...trendLines],
        chart: {
            type: 'candlestick',
            group: 'team',
            height: exportData.extraLines.length ? 700 : 1000,
            animations: {
                enabled: true,
                speed: 200
            }
        },
        title: {
            text: `${exportData.coin.toUpperCase()} ${exportData.interval} x${exportData.candles.length}`,
            align: 'middle',
            style: {
                fontFamily: 'Verdana',
                fontSize: 24,
                color: 'steelblue'
            }
        },
        xaxis: {
            type: 'datetime'
        },
        yaxis: {
            labels: {
                formatter: (value) => '$' + value
            }
        }
    };
    const mainChart = new ApexCharts(document.querySelector("#main"), mainOptions);
    mainChart.render();

    const extraLines = exportData.extraLines.map(l => ({
        type: 'line',
        name: l.name,
        color: l.color,
        data: l.data
    }));

    const extraOptions = {
        chart: {
            type: 'line',
            group: 'team',
            height: 500,
            animations: {
                enabled: true,
                speed: 200
            }
        },
        stroke: {
            width: 1
        },
        series: extraLines,
        xaxis: {
            type: 'datetime'
        },
        yaxis: {
            labels: {
                formatter: (value) => value,
                minWidth: 40
            }
        }
    };

    if (extraLines.length) {
        const extraChart = new ApexCharts(document.querySelector("#extra"), extraOptions);
        extraChart.render();
    }
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Trades Analysis</title>
	<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
	<script src="./data.js"></script>
	</head>
	<body>
	<div id="charts">
	<div id="main"></div>
	<div id="extra"></div>
	</div>
	<script>
	const annotationPoints = exportData.trades.map(a => ({
	x: a.x,
	y: a.y,
	marker: {
	size: 5,
	fillColor: a.trade === 'BUY' ? 'lightgreen' : (a.trade === 'SELL' ? '#EE4B2B' : 'black'),
	strokeColor: 'black',
	strokeWidth: 0.4
	},
	label: {
	borderColor: 'none',
	offsetY: 0,
	style: {
	color: 'black',
	background: 'transparent',
	fontSize: 12,
	fontFamily: 'Verdana'
	},
	text: a.y.toLocaleString(undefined, {maximumFractionDigits: exportData.precision})
	}
	}));

	const stopOrders = exportData.stopOrders.map(a => ({
	x: a.x,
	y: a.y,
	marker: {
	offsetX: 5,
	size: 3,
	fillColor: a.trade === 'BUY' ? 'green' : 'red',
	strokeColor: 'black',
	strokeWidth: 1,
	shape: 'cross'
	},
	label: {
	borderColor: a.trade === 'BUY' ? 'green' : 'red',
	offsetY: a.trade === 'BUY' ? -10 : 40,
	style: {
	background: 'transparent',
	fontSize: 10
	},
	text: a.y.toLocaleString(undefined, {maximumFractionDigits: exportData.precision})
	}
	}));

	const seriesData = exportData.candles.map(a => ({
	x: a.time,
	y: [a.open, a.high, a.low, a.close]
	}));

	const trendLines = exportData.lines.map(l => ({
	type: 'line',
	name: l.name,
	color: l.color,
	data: l.data
	}));

	window.Apex = {
	yaxis: {
	labels: {
	// minWidth: 70,
	//maxWidth: 80
	},
	tooltip: {
	enabled: true
	}
	},
	grid: {
	xaxis: {
	lines: {
	show: true
	}
	}
	}
	}

	const mainOptions = {
	markers: {
	// size: 5 // creates points on trend lines
	},
	annotations: {
	points: [...annotationPoints, ...stopOrders]
	},
	dataLabels: {
	enabled: false, // in case I want data labels
	// enabledOnSeries: [3, 2]
	},
	stroke: {
	dashArray: [0, 3, 0], // for dashed lines
	width: [1, 2, 2] // separate width for each series
	},
	series: [{
	data: seriesData,
	name: exportData.coin.toUpperCase()
	}, ...trendLines],
	chart: {
	type: 'candlestick',
	group: 'team',
	height: exportData.extraLines.length ? 700 : 1000,
	animations: {
	enabled: true,
	speed: 200
	}
	},
	title: {
	text: `${exportData.coin.toUpperCase()} ${exportData.interval} x${exportData.candles.length}`,
	align: 'middle',
	style: {
	fontFamily: 'Verdana',
	fontSize: 24,
	color: 'steelblue'
	}
	},
	xaxis: {
	type: 'datetime'
	},
	yaxis: {
	labels: {
	formatter: (value) => '$' + value
	}
	}
	};
	const mainChart = new ApexCharts(document.querySelector("#main"), mainOptions);
	mainChart.render();

	const extraLines = exportData.extraLines.map(l => ({
	type: 'line',
	name: l.name,
	color: l.color,
	data: l.data
	}));

	const extraOptions = {
	chart: {
	type: 'line',
	group: 'team',
	height: 500,
	animations: {
	enabled: true,
	speed: 200
	}
	},
	stroke: {
	width: 1
	},
	series: extraLines,
	xaxis: {
	type: 'datetime'
	},
	yaxis: {
	labels: {
	formatter: (value) => value,
	minWidth: 40
	}
	}
	};

	if (extraLines.length) {
	const extraChart = new ApexCharts(document.querySelector("#extra"), extraOptions);
	extraChart.render();
	}
	</script>
	</body>
	</html>