chris/chart
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use LWC LargeDashed for the live price line.

Browse source 
Custom overlay dash was the wrong place to spend. LWC already paints
that line with the last candle.
This commit is contained in:
Chris Amow 2026-08-26 03:30:50 -05:00
parent 8108f2dea3
commit 20d02fc3d2
2 changed files with 2 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
static/chart.js
View file

@ -206,7 +206,6 @@ class ConfluenceChart {
this.priceLines = new Map();
this.currentPriceLine = null;
this.currentPricePulse = null;
this.currentPriceRay = null;
this.projectionDiagnostic = null;
this.projectionDiagnosticFrame = null;
this.animateCurrentPrice = true;
@ -497,12 +496,6 @@ class ConfluenceChart {
this.currentPricePulse.className = 'current-price-pulse';
this.currentPricePulse.hidden = true;
el.appendChild(this.currentPricePulse);
const priceMark = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
priceMark.classList.add('current-price-mark');
priceMark.setAttribute('aria-hidden', 'true');
this.currentPriceRay = document.createElementNS('http://www.w3.org/2000/svg', 'line');
priceMark.appendChild(this.currentPriceRay);
this.overlayLayer.appendChild(priceMark);
this.projectionDiagnostic = document.createElement('pre');
this.projectionDiagnostic.className = 'projection-diagnostic';
this.projectionDiagnostic.hidden = true;
@ -933,9 +926,8 @@ class ConfluenceChart {
const options = {
price,
color: '#b7771d',
lineWidth: 1,
lineWidth: 2,
lineStyle: LightweightCharts.LineStyle.LargeDashed,
lineVisible: false,
axisLabelVisible: true,
title: '',
};
@ -958,18 +950,11 @@ class ConfluenceChart {
if (y == null || !canvas) return;
const chart = this.chartEl.getBoundingClientRect();
const plot = canvas.getBoundingClientRect();
const top = Math.round(y);
if (showFrame && this.currentPricePulse) {
this.currentPricePulse.style.left = `${Math.round(plot.right - chart.left)}px`;
this.currentPricePulse.style.top = `${Math.round(plot.top - chart.top + y - 10)}px`;
this.currentPricePulse.style.width = `${Math.max(40, Math.round(chart.right - plot.right))}px`;
}
if (this.currentPriceRay) {
this.currentPriceRay.setAttribute('x1', '0');
this.currentPriceRay.setAttribute('x2', String(this.overlayLayer?.clientWidth || plot.width));
this.currentPriceRay.setAttribute('y1', String(top));
this.currentPriceRay.setAttribute('y2', String(top));
}
}
setCommentHandlers({ onToggle, onMove, onSelect }) {

2
static/style.css
View file

@ -13,7 +13,7 @@ main { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:16px; }
button { border:1px solid var(--line); background:transparent; color:var(--muted); padding:6px 11px; font:inherit; cursor:pointer; }button.active { color:var(--bg); background:var(--accent); border-color:var(--accent); }
.chart-head-tools { display:flex; align-items:center; gap:8px; }.undo-btn { display:grid; place-items:center; width:32px; height:28px; padding:0; flex:none; }.undo-btn:disabled { opacity:.35; cursor:default; }.timeframes { display:flex; flex-wrap:wrap; justify-content:flex-end; }.timeframes button+button { border-left:0; }
.drawing-tools { min-height:38px; padding:5px 12px; display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; }.drawing-tools button,.drawing-tools select,.drawing-tools .line-name { padding:4px 8px; font-size:10px; }.drawing-tools select,.drawing-tools .line-name { background:var(--panel); color:var(--fg); border:1px solid var(--line); }.drawing-tools .line-name { width:130px; font:inherit; }.drawing-tools label { display:flex; gap:4px; align-items:center; }.drawing-tools input { accent-color:var(--accent); }
#chart { position:relative; height:calc(100vh - 190px); min-height:420px; touch-action:pan-y; }.chart-preview,.chart-line-bridges,.chart-handles,.current-price-mark { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; }.current-price-mark { z-index:4; }.current-price-mark line { stroke:var(--accent); stroke-width:2; stroke-dasharray:14 4 2 4; }.chart-preview,.chart-line-bridges { z-index:4; }.chart-line-bridges line { stroke-linecap:round; }.chart-handles { z-index:6; }.chart-preview line[hidden],.chart-anchor[hidden],.chart-line-hit[hidden],.chart-line-focus[hidden],.chart-fib-focus[hidden] { display:none; }.chart-line-focus { stroke-linecap:round; pointer-events:none; animation:line-focus .75s ease-out forwards; }.chart-line-hit { fill:none; stroke:transparent; stroke-width:16px; pointer-events:stroke; cursor:move; touch-action:none; }.chart-anchor { stroke:var(--panel); stroke-width:2px; cursor:grab; pointer-events:all; touch-action:none; }.chart-anchor:active { cursor:grabbing; }.chart-tooltip { position:absolute; z-index:5; padding:4px 7px; border:1px solid var(--line); background:var(--panel); color:var(--fg); font-size:10px; white-space:pre-line; pointer-events:none; }.chart-tooltip[hidden] { display:none; }
#chart { position:relative; height:calc(100vh - 190px); min-height:420px; touch-action:pan-y; }.chart-preview,.chart-line-bridges,.chart-handles { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; }.chart-preview,.chart-line-bridges { z-index:4; }.chart-line-bridges line { stroke-linecap:round; }.chart-handles { z-index:6; }.chart-preview line[hidden],.chart-anchor[hidden],.chart-line-hit[hidden],.chart-line-focus[hidden],.chart-fib-focus[hidden] { display:none; }.chart-line-focus { stroke-linecap:round; pointer-events:none; animation:line-focus .75s ease-out forwards; }.chart-line-hit { fill:none; stroke:transparent; stroke-width:16px; pointer-events:stroke; cursor:move; touch-action:none; }.chart-anchor { stroke:var(--panel); stroke-width:2px; cursor:grab; pointer-events:all; touch-action:none; }.chart-anchor:active { cursor:grabbing; }.chart-tooltip { position:absolute; z-index:5; padding:4px 7px; border:1px solid var(--line); background:var(--panel); color:var(--fg); font-size:10px; white-space:pre-line; pointer-events:none; }.chart-tooltip[hidden] { display:none; }
.current-price-pulse { position:absolute; z-index:8; height:20px; box-sizing:border-box; border:1px solid var(--accent); opacity:0; pointer-events:none; }.current-price-pulse.active { opacity:1; animation:current-price-frame 1.8s ease-in-out infinite; }@keyframes current-price-frame { 0%,100% { opacity:1; } 50% { opacity:.25; } }
.chart-ohlc { position:absolute; top:6px; left:8px; z-index:5; padding:2px 6px; border:1px solid var(--line); background:color-mix(in srgb,var(--panel) 90%,transparent); color:var(--fg); font-size:10px; font-variant-numeric:tabular-nums; pointer-events:none; white-space:nowrap; }.chart-ohlc.up { color:var(--green); }.chart-ohlc.down { color:var(--red); }.chart-ohlc[hidden] { display:none; }
.projection-diagnostic { position:absolute; top:8px; left:8px; z-index:9; margin:0; padding:5px 7px; border:1px solid var(--line); background:color-mix(in srgb,var(--panel) 92%,transparent); color:var(--fg); font:9px/1.35 "IBM Plex Mono", monospace; white-space:pre; }