Skip to content

Improve orderbook depth profile contrast #271

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackhai9 merged 1 commit into from
Sep 5, 2026
+25 −12
Merged

Improve orderbook depth profile contrast #271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions scripts/binance-orderbook-trade.user.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
// @namespace binance.orderbook.trade
// @icon data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f0b90b%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2242%22%20font-weight%3D%22800%22%20fill%3D%22%23111827%22%3EJ%3C%2Ftext%3E%3C%2Fsvg%3E
// @icon64 data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f0b90b%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2242%22%20font-weight%3D%22800%22%20fill%3D%22%23111827%22%3EJ%3C%2Ftext%3E%3C%2Fsvg%3E
// @version 2.7.199
// @version 2.7.200
// @author jackhai9
// @description 单击订单簿价格，按当前开仓/平仓 tab 自动填数量并执行下单，内置数量倍率面板
// @match https://www.binance.com/*/futures/*
Expand Down Expand Up @@ -4045,8 +4045,7 @@
display: block;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-BasicBg, #fff) 72%, transparent));
opacity: .9;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-BasicBg, #fff) 24%, transparent));
pointer-events: none;
}
#${DEPTH_PROFILE_ID}[data-expanded="false"] .jh-depth-profile-canvas {
Expand Down Expand Up @@ -4205,8 +4204,8 @@
const bids = bucketVisibleLevels(profile.bids, geometry);
const maxVisibleCumulative = getMaxVisibleCumulative(asks, bids);
if (maxVisibleCumulative > 0) {
drawSide(context, asks, maxVisibleCumulative, rect.width, "rgba(246, 70, 93, .30)");
drawSide(context, bids, maxVisibleCumulative, rect.width, "rgba(14, 203, 129, .30)");
drawSide(context, asks, maxVisibleCumulative, rect.width, "rgba(246, 70, 93, .62)");
drawSide(context, bids, maxVisibleCumulative, rect.width, "rgba(14, 203, 129, .62)");
}
const currentPriceY = geometry.priceToCoordinate(currentPrice);
if (!Number.isFinite(currentPriceY)) return true;
Expand Down
7 changes: 3 additions & 4 deletions src/binance-orderbook-trade/dom/depth-profile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,8 +153,7 @@ function installStyle(document) {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-BasicBg, #fff) 72%, transparent));
opacity: .9;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-BasicBg, #fff) 24%, transparent));
pointer-events: none;
}
#${DEPTH_PROFILE_ID}[data-expanded="false"] .jh-depth-profile-canvas {
Expand Down Expand Up @@ -328,8 +327,8 @@ export function renderDepthProfile(root, profile, geometry, currentPrice) {
const bids = bucketVisibleLevels(profile.bids, geometry);
const maxVisibleCumulative = getMaxVisibleCumulative(asks, bids);
if (maxVisibleCumulative > 0) {
drawSide(context, asks, maxVisibleCumulative, rect.width, 'rgba(246, 70, 93, .30)');
drawSide(context, bids, maxVisibleCumulative, rect.width, 'rgba(14, 203, 129, .30)');
drawSide(context, asks, maxVisibleCumulative, rect.width, 'rgba(246, 70, 93, .62)');
drawSide(context, bids, maxVisibleCumulative, rect.width, 'rgba(14, 203, 129, .62)');
}

const currentPriceY = geometry.priceToCoordinate(currentPrice);
Expand Down
2 changes: 1 addition & 1 deletion src/binance-orderbook-trade/index.user.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
// @namespace binance.orderbook.trade
// @icon data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f0b90b%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2242%22%20font-weight%3D%22800%22%20fill%3D%22%23111827%22%3EJ%3C%2Ftext%3E%3C%2Fsvg%3E
// @icon64 data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f0b90b%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2242%22%20font-weight%3D%22800%22%20fill%3D%22%23111827%22%3EJ%3C%2Ftext%3E%3C%2Fsvg%3E
// @version 2.7.199
// @version 2.7.200
// @author jackhai9
// @description 单击订单簿价格，按当前开仓/平仓 tab 自动填数量并执行下单，内置数量倍率面板
// @match https://www.binance.com/*/futures/*
Expand Down
19 changes: 17 additions & 2 deletions test/dom/binance-orderbook-trade/depth-profile.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,8 +277,17 @@ test('creates a non-interactive canvas with an independently clickable toggle',

assert.equal(root.id, DEPTH_PROFILE_ID);
assert.equal(root.parentElement, host);
assert.match(document.getElementById('jh-binance-depth-profile-style').textContent, /pointer-events: none/);
assert.match(document.getElementById('jh-binance-depth-profile-style').textContent, /pointer-events: auto/);
const styleText = document.getElementById('jh-binance-depth-profile-style').textContent;
assert.match(styleText, /pointer-events: none/);
assert.match(styleText, /pointer-events: auto/);
assert.match(
styleText,
/background: linear-gradient\(90deg, transparent, color-mix\(in srgb, var\(--color-BasicBg, #fff\) 24%, transparent\)\)/,
);
assert.doesNotMatch(
styleText,
/\.jh-depth-profile-canvas\s*\{[^}]*opacity:/,
);
root.querySelector('[data-depth-profile-toggle]').click();
assert.equal(toggles, 1);
});
Expand Down Expand Up @@ -333,6 +342,7 @@ test('draws bid and ask bars plus the latest-trade divider', () => {
const { host } = findDepthProfileHost(document);
const root = ensureDepthProfileView(document, host, { onToggle: () => {} });
const calls = [];
const fillStyles = [];
root.querySelector('canvas').getContext = () => ({
beginPath: () => calls.push('beginPath'),
clearRect: () => calls.push('clearRect'),
Expand All @@ -344,6 +354,7 @@ test('draws bid and ask bars plus the latest-trade divider', () => {
setLineDash: () => calls.push('setLineDash'),
setTransform: () => calls.push('setTransform'),
stroke: () => calls.push('stroke'),
set fillStyle(value) { fillStyles.push(value); },
});

const geometry = {
Expand All @@ -361,6 +372,10 @@ test('draws bid and ask bars plus the latest-trade divider', () => {
}, geometry, 100.5), true);
assert.equal(root.style.height, '240px');
assert.equal(calls.filter((call) => Array.isArray(call) && call[0] === 'fillRect').length, 2);
assert.deepEqual(fillStyles, [
'rgba(246, 70, 93, .62)',
'rgba(14, 203, 129, .62)',
]);
assert.deepEqual(
calls.filter((call) => Array.isArray(call) && call[0] === 'fillRect').map((call) => call[2]),
[80, 180],
Expand Down
Loading