snice 4.8.0 → 4.9.0

package/dist/components/candlestick/snice-candlestick.js

@@ -0,0 +1,650 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, dispatch, ready, dispose, watch, render, styles, html, css } from 'snice';
+
+var cssContent = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint;width:100%;--candlestick-bg:var(--snice-color-background, rgb(255 255 255));--candlestick-text:var(--snice-color-text, rgb(23 23 23));--candlestick-text-secondary:var(--snice-color-text-secondary, rgb(82 82 82));--candlestick-border:var(--snice-color-border, rgb(226 226 226));--candlestick-grid:var(--snice-color-border, rgb(226 226 226));--candlestick-bullish:var(--snice-candlestick-bullish, rgb(22 163 74));--candlestick-bearish:var(--snice-candlestick-bearish, rgb(220 38 38))}.candlestick{position:relative;background:var(--candlestick-bg);overflow:hidden;user-select:none}.candlestick__svg{display:block;width:100%;height:100%}.candlestick__grid-line{stroke:var(--candlestick-grid);stroke-width:1px;stroke-dasharray:2 4;opacity:.5}.candlestick__axis-label{fill:var(--candlestick-text-secondary);font-size:.6875rem;font-family:inherit}.candlestick__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.candlestick__axis-label--y{text-anchor:end;dominant-baseline:central}.candlestick__body{cursor:pointer;transition:opacity var(--snice-transition-fast, 150ms) ease}.candlestick__body:hover{opacity:.8}.candlestick__wick{stroke-width:1px;pointer-events:none}.candlestick__volume{opacity:.3}.candlestick__crosshair-h,.candlestick__crosshair-v{stroke:var(--candlestick-text-secondary);stroke-width:1px;stroke-dasharray:4 3;pointer-events:none;opacity:.6}.candlestick__crosshair-label{fill:var(--candlestick-text);font-size:.625rem;font-family:inherit;pointer-events:none}.candlestick__crosshair-label-bg{fill:var(--candlestick-bg);stroke:var(--candlestick-border);stroke-width:1px;pointer-events:none}.candlestick__tooltip{position:absolute;background:var(--candlestick-bg);border:1px solid var(--candlestick-border);border-radius:4px;padding:var(--snice-spacing-xs,.5rem);font-size:.75rem;color:var(--candlestick-text);pointer-events:none;z-index:10;box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1));white-space:nowrap;opacity:0;transition:opacity var(--snice-transition-fast, 150ms) ease}.candlestick__tooltip--visible{opacity:1}.candlestick__tooltip-row{display:flex;justify-content:space-between;gap:var(--snice-spacing-sm,.75rem);line-height:var(--snice-line-height-normal, 1.5)}.candlestick__tooltip-label{color:var(--candlestick-text-secondary)}.candlestick__tooltip-value{font-weight:var(--snice-font-weight-semibold,600)}.candlestick__tooltip-value--bullish{color:var(--candlestick-bullish)}.candlestick__tooltip-value--bearish{color:var(--candlestick-bearish)}.candlestick__body--animated,.candlestick__wick--animated{animation:.4s ease-out both candlestick-appear}.candlestick__volume--animated{animation:.4s ease-out both volume-appear}@keyframes candlestick-appear{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes volume-appear{from{opacity:0}to{opacity:.3}}";
+
+const PADDING = { top: 16, right: 64, bottom: 32, left: 8 };
+const VOLUME_HEIGHT_RATIO = 0.2;
+const MIN_CANDLE_WIDTH = 3;
+const MAX_CANDLE_WIDTH = 24;
+let SniceCandlestick = (() => {
+    let _classDecorators = [element('snice-candlestick')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _data_decorators;
+    let _data_initializers = [];
+    let _data_extraInitializers = [];
+    let _showVolume_decorators;
+    let _showVolume_initializers = [];
+    let _showVolume_extraInitializers = [];
+    let _showGrid_decorators;
+    let _showGrid_initializers = [];
+    let _showGrid_extraInitializers = [];
+    let _showCrosshair_decorators;
+    let _showCrosshair_initializers = [];
+    let _showCrosshair_extraInitializers = [];
+    let _bullishColor_decorators;
+    let _bullishColor_initializers = [];
+    let _bullishColor_extraInitializers = [];
+    let _bearishColor_decorators;
+    let _bearishColor_initializers = [];
+    let _bearishColor_extraInitializers = [];
+    let _timeFormat_decorators;
+    let _timeFormat_initializers = [];
+    let _timeFormat_extraInitializers = [];
+    let _yAxisFormat_decorators;
+    let _yAxisFormat_initializers = [];
+    let _yAxisFormat_extraInitializers = [];
+    let _zoomEnabled_decorators;
+    let _zoomEnabled_initializers = [];
+    let _zoomEnabled_extraInitializers = [];
+    let _animation_decorators;
+    let _animation_initializers = [];
+    let _animation_extraInitializers = [];
+    let _containerEl_decorators;
+    let _containerEl_initializers = [];
+    let _containerEl_extraInitializers = [];
+    let _svgEl_decorators;
+    let _svgEl_initializers = [];
+    let _svgEl_extraInitializers = [];
+    let _chartContentEl_decorators;
+    let _chartContentEl_initializers = [];
+    let _chartContentEl_extraInitializers = [];
+    let _crosshairGroupEl_decorators;
+    let _crosshairGroupEl_initializers = [];
+    let _crosshairGroupEl_extraInitializers = [];
+    let _tooltipEl_decorators;
+    let _tooltipEl_initializers = [];
+    let _tooltipEl_extraInitializers = [];
+    let _emitCandleClick_decorators;
+    let _emitCandleHover_decorators;
+    let _emitCrosshairMove_decorators;
+    let _init_decorators;
+    let _cleanup_decorators;
+    let _onDataChange_decorators;
+    let _onDisplayChange_decorators;
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.data = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _data_initializers, []));
+            this.showVolume = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _showVolume_initializers, false));
+            this.showGrid = (__runInitializers(this, _showVolume_extraInitializers), __runInitializers(this, _showGrid_initializers, true));
+            this.showCrosshair = (__runInitializers(this, _showGrid_extraInitializers), __runInitializers(this, _showCrosshair_initializers, true));
+            this.bullishColor = (__runInitializers(this, _showCrosshair_extraInitializers), __runInitializers(this, _bullishColor_initializers, ''));
+            this.bearishColor = (__runInitializers(this, _bullishColor_extraInitializers), __runInitializers(this, _bearishColor_initializers, ''));
+            this.timeFormat = (__runInitializers(this, _bearishColor_extraInitializers), __runInitializers(this, _timeFormat_initializers, 'auto'));
+            this.yAxisFormat = (__runInitializers(this, _timeFormat_extraInitializers), __runInitializers(this, _yAxisFormat_initializers, 'number'));
+            this.zoomEnabled = (__runInitializers(this, _yAxisFormat_extraInitializers), __runInitializers(this, _zoomEnabled_initializers, true));
+            this.animation = (__runInitializers(this, _zoomEnabled_extraInitializers), __runInitializers(this, _animation_initializers, true));
+            this.containerEl = (__runInitializers(this, _animation_extraInitializers), __runInitializers(this, _containerEl_initializers, void 0));
+            this.svgEl = (__runInitializers(this, _containerEl_extraInitializers), __runInitializers(this, _svgEl_initializers, void 0));
+            this.chartContentEl = (__runInitializers(this, _svgEl_extraInitializers), __runInitializers(this, _chartContentEl_initializers, void 0));
+            this.crosshairGroupEl = (__runInitializers(this, _chartContentEl_extraInitializers), __runInitializers(this, _crosshairGroupEl_initializers, void 0));
+            this.tooltipEl = (__runInitializers(this, _crosshairGroupEl_extraInitializers), __runInitializers(this, _tooltipEl_initializers, void 0));
+            // Internal state — plain fields, no @property
+            this.viewStart = (__runInitializers(this, _tooltipEl_extraInitializers), 0);
+            this.viewEnd = 0;
+            this.mouseX = -1;
+            this.mouseY = -1;
+            this.isDragging = false;
+            this.dragStartX = 0;
+            this.dragStartViewStart = 0;
+            this.dragStartViewEnd = 0;
+            this.resizeObserver = null;
+            this.svgWidth = 600;
+            this.svgHeight = 400;
+            this.lastDataLength = 0;
+            this.cachedData = [];
+            this.rafId = 0;
+            this.animateNext = true;
+            this.handleMouseMove = (e) => {
+                const svg = this.svgEl;
+                if (!svg)
+                    return;
+                const ctm = svg.getScreenCTM();
+                if (ctm) {
+                    const pt = new DOMPoint(e.clientX, e.clientY).matrixTransform(ctm.inverse());
+                    this.mouseX = pt.x;
+                    this.mouseY = pt.y;
+                }
+                if (this.isDragging && this.zoomEnabled) {
+                    const dx = e.clientX - this.dragStartX;
+                    const area = this.chartArea;
+                    const viewSize = this.dragStartViewEnd - this.dragStartViewStart;
+                    const candlesPerPx = viewSize / area.width;
+                    const shift = Math.round(-dx * candlesPerPx);
+                    let newStart = this.dragStartViewStart + shift;
+                    let newEnd = this.dragStartViewEnd + shift;
+                    if (newStart < 0) {
+                        newStart = 0;
+                        newEnd = viewSize;
+                    }
+                    if (newEnd > this.cachedData.length) {
+                        newEnd = this.cachedData.length;
+                        newStart = this.cachedData.length - viewSize;
+                    }
+                    const vs = Math.max(0, newStart);
+                    const ve = Math.min(this.cachedData.length, newEnd);
+                    if (vs !== this.viewStart || ve !== this.viewEnd) {
+                        this.viewStart = vs;
+                        this.viewEnd = ve;
+                        this.rebuildChart();
+                        return;
+                    }
+                }
+                if (this.showCrosshair) {
+                    const idx = this.xToIndex(this.mouseX);
+                    const candle = this.visibleData[idx];
+                    if (candle) {
+                        const price = this.yToPrice(this.mouseY);
+                        this.emitCrosshairMove(price, this.formatDate(candle.date), this.mouseX, this.mouseY);
+                    }
+                }
+                // Only update crosshair + tooltip via direct DOM manipulation — no re-render
+                if (this.rafId)
+                    cancelAnimationFrame(this.rafId);
+                this.rafId = requestAnimationFrame(() => {
+                    this.updateCrosshairDOM();
+                    this.updateTooltipDOM();
+                });
+            };
+            this.handleMouseLeave = () => {
+                this.mouseX = -1;
+                this.mouseY = -1;
+                this.isDragging = false;
+                this.updateCrosshairDOM();
+                this.updateTooltipDOM();
+            };
+            this.handleMouseDown = (e) => {
+                if (!this.zoomEnabled)
+                    return;
+                this.isDragging = true;
+                this.dragStartX = e.clientX;
+                this.dragStartViewStart = this.viewStart;
+                this.dragStartViewEnd = this.viewEnd;
+            };
+            this.handleMouseUp = () => {
+                this.isDragging = false;
+            };
+            this.handleWheel = (e) => {
+                if (!this.zoomEnabled)
+                    return;
+                e.preventDefault();
+                const viewSize = this.viewEnd - this.viewStart;
+                const zoomFactor = e.deltaY > 0 ? 1.1 : 0.9;
+                let newSize = Math.round(viewSize * zoomFactor);
+                newSize = Math.max(10, Math.min(this.cachedData.length, newSize));
+                const area = this.chartArea;
+                const mouseRatio = (this.mouseX - area.x) / area.width;
+                const center = this.viewStart + viewSize * mouseRatio;
+                let newStart = Math.round(center - newSize * mouseRatio);
+                let newEnd = newStart + newSize;
+                if (newStart < 0) {
+                    newStart = 0;
+                    newEnd = newSize;
+                }
+                if (newEnd > this.cachedData.length) {
+                    newEnd = this.cachedData.length;
+                    newStart = this.cachedData.length - newSize;
+                }
+                this.viewStart = Math.max(0, newStart);
+                this.viewEnd = Math.min(this.cachedData.length, newEnd);
+                this.rebuildChart();
+            };
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _data_decorators = [property({ type: Array, attribute: false })];
+            _showVolume_decorators = [property({ type: Boolean })];
+            _showGrid_decorators = [property({ type: Boolean })];
+            _showCrosshair_decorators = [property({ type: Boolean })];
+            _bullishColor_decorators = [property()];
+            _bearishColor_decorators = [property()];
+            _timeFormat_decorators = [property()];
+            _yAxisFormat_decorators = [property()];
+            _zoomEnabled_decorators = [property({ type: Boolean })];
+            _animation_decorators = [property({ type: Boolean })];
+            _containerEl_decorators = [query('.candlestick')];
+            _svgEl_decorators = [query('.candlestick__svg')];
+            _chartContentEl_decorators = [query('.candlestick__chart-content')];
+            _crosshairGroupEl_decorators = [query('.candlestick__crosshair-group')];
+            _tooltipEl_decorators = [query('.candlestick__tooltip')];
+            _emitCandleClick_decorators = [dispatch('candle-click', { bubbles: true, composed: true })];
+            _emitCandleHover_decorators = [dispatch('candle-hover', { bubbles: true, composed: true })];
+            _emitCrosshairMove_decorators = [dispatch('crosshair-move', { bubbles: true, composed: true })];
+            _init_decorators = [ready()];
+            _cleanup_decorators = [dispose()];
+            _onDataChange_decorators = [watch('data')];
+            _onDisplayChange_decorators = [watch('showVolume', 'showGrid', 'bullishColor', 'bearishColor', 'timeFormat', 'yAxisFormat', 'animation')];
+            _renderContent_decorators = [render({ once: true })];
+            _componentStyles_decorators = [styles()];
+            __esDecorate(this, null, _emitCandleClick_decorators, { kind: "method", name: "emitCandleClick", static: false, private: false, access: { has: obj => "emitCandleClick" in obj, get: obj => obj.emitCandleClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitCandleHover_decorators, { kind: "method", name: "emitCandleHover", static: false, private: false, access: { has: obj => "emitCandleHover" in obj, get: obj => obj.emitCandleHover }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitCrosshairMove_decorators, { kind: "method", name: "emitCrosshairMove", static: false, private: false, access: { has: obj => "emitCrosshairMove" in obj, get: obj => obj.emitCrosshairMove }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _cleanup_decorators, { kind: "method", name: "cleanup", static: false, private: false, access: { has: obj => "cleanup" in obj, get: obj => obj.cleanup }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onDataChange_decorators, { kind: "method", name: "onDataChange", static: false, private: false, access: { has: obj => "onDataChange" in obj, get: obj => obj.onDataChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onDisplayChange_decorators, { kind: "method", name: "onDisplayChange", static: false, private: false, access: { has: obj => "onDisplayChange" in obj, get: obj => obj.onDisplayChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _data_decorators, { kind: "field", name: "data", static: false, private: false, access: { has: obj => "data" in obj, get: obj => obj.data, set: (obj, value) => { obj.data = value; } }, metadata: _metadata }, _data_initializers, _data_extraInitializers);
+            __esDecorate(null, null, _showVolume_decorators, { kind: "field", name: "showVolume", static: false, private: false, access: { has: obj => "showVolume" in obj, get: obj => obj.showVolume, set: (obj, value) => { obj.showVolume = value; } }, metadata: _metadata }, _showVolume_initializers, _showVolume_extraInitializers);
+            __esDecorate(null, null, _showGrid_decorators, { kind: "field", name: "showGrid", static: false, private: false, access: { has: obj => "showGrid" in obj, get: obj => obj.showGrid, set: (obj, value) => { obj.showGrid = value; } }, metadata: _metadata }, _showGrid_initializers, _showGrid_extraInitializers);
+            __esDecorate(null, null, _showCrosshair_decorators, { kind: "field", name: "showCrosshair", static: false, private: false, access: { has: obj => "showCrosshair" in obj, get: obj => obj.showCrosshair, set: (obj, value) => { obj.showCrosshair = value; } }, metadata: _metadata }, _showCrosshair_initializers, _showCrosshair_extraInitializers);
+            __esDecorate(null, null, _bullishColor_decorators, { kind: "field", name: "bullishColor", static: false, private: false, access: { has: obj => "bullishColor" in obj, get: obj => obj.bullishColor, set: (obj, value) => { obj.bullishColor = value; } }, metadata: _metadata }, _bullishColor_initializers, _bullishColor_extraInitializers);
+            __esDecorate(null, null, _bearishColor_decorators, { kind: "field", name: "bearishColor", static: false, private: false, access: { has: obj => "bearishColor" in obj, get: obj => obj.bearishColor, set: (obj, value) => { obj.bearishColor = value; } }, metadata: _metadata }, _bearishColor_initializers, _bearishColor_extraInitializers);
+            __esDecorate(null, null, _timeFormat_decorators, { kind: "field", name: "timeFormat", static: false, private: false, access: { has: obj => "timeFormat" in obj, get: obj => obj.timeFormat, set: (obj, value) => { obj.timeFormat = value; } }, metadata: _metadata }, _timeFormat_initializers, _timeFormat_extraInitializers);
+            __esDecorate(null, null, _yAxisFormat_decorators, { kind: "field", name: "yAxisFormat", static: false, private: false, access: { has: obj => "yAxisFormat" in obj, get: obj => obj.yAxisFormat, set: (obj, value) => { obj.yAxisFormat = value; } }, metadata: _metadata }, _yAxisFormat_initializers, _yAxisFormat_extraInitializers);
+            __esDecorate(null, null, _zoomEnabled_decorators, { kind: "field", name: "zoomEnabled", static: false, private: false, access: { has: obj => "zoomEnabled" in obj, get: obj => obj.zoomEnabled, set: (obj, value) => { obj.zoomEnabled = value; } }, metadata: _metadata }, _zoomEnabled_initializers, _zoomEnabled_extraInitializers);
+            __esDecorate(null, null, _animation_decorators, { kind: "field", name: "animation", static: false, private: false, access: { has: obj => "animation" in obj, get: obj => obj.animation, set: (obj, value) => { obj.animation = value; } }, metadata: _metadata }, _animation_initializers, _animation_extraInitializers);
+            __esDecorate(null, null, _containerEl_decorators, { kind: "field", name: "containerEl", static: false, private: false, access: { has: obj => "containerEl" in obj, get: obj => obj.containerEl, set: (obj, value) => { obj.containerEl = value; } }, metadata: _metadata }, _containerEl_initializers, _containerEl_extraInitializers);
+            __esDecorate(null, null, _svgEl_decorators, { kind: "field", name: "svgEl", static: false, private: false, access: { has: obj => "svgEl" in obj, get: obj => obj.svgEl, set: (obj, value) => { obj.svgEl = value; } }, metadata: _metadata }, _svgEl_initializers, _svgEl_extraInitializers);
+            __esDecorate(null, null, _chartContentEl_decorators, { kind: "field", name: "chartContentEl", static: false, private: false, access: { has: obj => "chartContentEl" in obj, get: obj => obj.chartContentEl, set: (obj, value) => { obj.chartContentEl = value; } }, metadata: _metadata }, _chartContentEl_initializers, _chartContentEl_extraInitializers);
+            __esDecorate(null, null, _crosshairGroupEl_decorators, { kind: "field", name: "crosshairGroupEl", static: false, private: false, access: { has: obj => "crosshairGroupEl" in obj, get: obj => obj.crosshairGroupEl, set: (obj, value) => { obj.crosshairGroupEl = value; } }, metadata: _metadata }, _crosshairGroupEl_initializers, _crosshairGroupEl_extraInitializers);
+            __esDecorate(null, null, _tooltipEl_decorators, { kind: "field", name: "tooltipEl", static: false, private: false, access: { has: obj => "tooltipEl" in obj, get: obj => obj.tooltipEl, set: (obj, value) => { obj.tooltipEl = value; } }, metadata: _metadata }, _tooltipEl_initializers, _tooltipEl_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        emitCandleClick(candle, index) {
+            return { candle, index };
+        }
+        emitCandleHover(candle, index) {
+            return { candle, index };
+        }
+        emitCrosshairMove(price, date, x, y) {
+            return { price, date, x, y };
+        }
+        init() {
+            this.cachedData = this.data;
+            this.viewEnd = this.data.length;
+            this.viewStart = Math.max(0, this.viewEnd - 80);
+            this.resizeObserver = new ResizeObserver(() => {
+                this.measureSize();
+                this.rebuildChart();
+            });
+            if (this.containerEl) {
+                this.resizeObserver.observe(this.containerEl);
+            }
+            this.measureSize();
+            this.rebuildChart();
+        }
+        cleanup() {
+            this.resizeObserver?.disconnect();
+            if (this.rafId)
+                cancelAnimationFrame(this.rafId);
+        }
+        onDataChange() {
+            this.cachedData = this.data;
+            const dataLen = this.cachedData.length;
+            if (dataLen > 0 && dataLen !== this.lastDataLength) {
+                this.lastDataLength = dataLen;
+                this.viewEnd = dataLen;
+                this.viewStart = Math.max(0, dataLen - 80);
+            }
+            this.animateNext = true;
+            this.rebuildChart();
+        }
+        onDisplayChange() {
+            this.rebuildChart();
+        }
+        measureSize() {
+            if (!this.containerEl)
+                return;
+            const rect = this.containerEl.getBoundingClientRect();
+            if (rect.width > 0)
+                this.svgWidth = rect.width;
+            if (rect.height > 0)
+                this.svgHeight = rect.height;
+        }
+        get visibleData() {
+            return this.cachedData.slice(this.viewStart, this.viewEnd);
+        }
+        get chartArea() {
+            const volumeSpace = this.showVolume ? this.svgHeight * VOLUME_HEIGHT_RATIO : 0;
+            return {
+                x: PADDING.left,
+                y: PADDING.top,
+                width: this.svgWidth - PADDING.left - PADDING.right,
+                height: this.svgHeight - PADDING.top - PADDING.bottom - volumeSpace,
+                volumeY: this.svgHeight - PADDING.bottom - volumeSpace,
+                volumeHeight: volumeSpace
+            };
+        }
+        get priceRange() {
+            const visible = this.visibleData;
+            if (visible.length === 0)
+                return { min: 0, max: 100 };
+            let min = Infinity;
+            let max = -Infinity;
+            for (const d of visible) {
+                if (d.low < min)
+                    min = d.low;
+                if (d.high > max)
+                    max = d.high;
+            }
+            const padding = (max - min) * 0.05 || 1;
+            return { min: min - padding, max: max + padding };
+        }
+        get volumeMax() {
+            const visible = this.visibleData;
+            if (visible.length === 0)
+                return 1;
+            return Math.max(...visible.map(d => d.volume || 0)) || 1;
+        }
+        get candleWidth() {
+            const area = this.chartArea;
+            const count = this.visibleData.length || 1;
+            const totalWidth = area.width / count;
+            const bodyWidth = totalWidth * 0.7;
+            return Math.max(MIN_CANDLE_WIDTH, Math.min(MAX_CANDLE_WIDTH, bodyWidth));
+        }
+        priceToY(price) {
+            const { min, max } = this.priceRange;
+            const area = this.chartArea;
+            const ratio = (price - min) / (max - min);
+            return area.y + area.height * (1 - ratio);
+        }
+        yToPrice(y) {
+            const { min, max } = this.priceRange;
+            const area = this.chartArea;
+            const ratio = 1 - (y - area.y) / area.height;
+            return min + ratio * (max - min);
+        }
+        indexToX(index) {
+            const area = this.chartArea;
+            const count = this.visibleData.length || 1;
+            const step = area.width / count;
+            return area.x + step * index + step / 2;
+        }
+        xToIndex(x) {
+            const area = this.chartArea;
+            const count = this.visibleData.length || 1;
+            const step = area.width / count;
+            const idx = Math.floor((x - area.x) / step);
+            return Math.max(0, Math.min(count - 1, idx));
+        }
+        formatPrice(price) {
+            switch (this.yAxisFormat) {
+                case 'currency':
+                    return price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+                case 'percent':
+                    return price.toFixed(2) + '%';
+                default:
+                    return price >= 1000 ? price.toLocaleString(undefined, { maximumFractionDigits: 2 }) : price.toFixed(2);
+            }
+        }
+        formatDate(dateVal) {
+            const d = dateVal instanceof Date ? dateVal : new Date(dateVal);
+            if (isNaN(d.getTime()))
+                return String(dateVal);
+            const fmt = this.timeFormat;
+            if (fmt === 'date')
+                return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+            if (fmt === 'time')
+                return d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+            if (fmt === 'datetime')
+                return d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+            if (fmt === 'month')
+                return d.toLocaleDateString(undefined, { month: 'short', year: '2-digit' });
+            if (fmt === 'year')
+                return d.getFullYear().toString();
+            // auto
+            return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+        }
+        /** Rebuild the static chart SVG (candles, grid, axes, volume). Does NOT include crosshair. */
+        rebuildChart() {
+            if (!this.chartContentEl || !this.svgEl) {
+                requestAnimationFrame(() => this.rebuildChart());
+                return;
+            }
+            const visible = this.visibleData;
+            let svg = '';
+            if (visible.length > 0) {
+                svg += this.buildGridLines();
+                svg += this.buildYAxis();
+                svg += this.buildXAxis();
+                svg += this.buildVolumeBars();
+                svg += this.buildCandles();
+            }
+            this.chartContentEl.innerHTML = svg;
+            // Update SVG viewBox
+            this.svgEl.setAttribute('viewBox', `0 0 ${this.svgWidth} ${this.svgHeight}`);
+            this.svgEl.setAttribute('aria-label', `Candlestick chart with ${this.cachedData.length} data points`);
+            // Update container height
+            if (this.containerEl) {
+                this.containerEl.style.height = `${this.svgHeight}px`;
+            }
+            // Consume animation flag after building candles
+            this.animateNext = false;
+            // Update crosshair after chart rebuild
+            this.updateCrosshairDOM();
+            this.updateTooltipDOM();
+        }
+        resetZoom() {
+            this.viewStart = 0;
+            this.viewEnd = this.cachedData.length;
+            this.rebuildChart();
+        }
+        zoomTo(startIndex, endIndex) {
+            this.viewStart = Math.max(0, startIndex);
+            this.viewEnd = Math.min(this.cachedData.length, endIndex);
+            this.rebuildChart();
+        }
+        /** Update crosshair overlay via direct DOM manipulation — no re-render needed */
+        updateCrosshairDOM() {
+            const group = this.crosshairGroupEl;
+            if (!group)
+                return;
+            if (!this.showCrosshair || this.mouseX < 0 || this.mouseY < 0) {
+                group.innerHTML = '';
+                return;
+            }
+            const area = this.chartArea;
+            const totalChartBottom = area.y + area.height + area.volumeHeight;
+            const isInChart = this.mouseX >= area.x && this.mouseX <= area.x + area.width
+                && this.mouseY >= area.y && this.mouseY <= totalChartBottom;
+            if (!isInChart) {
+                group.innerHTML = '';
+                return;
+            }
+            const price = this.yToPrice(this.mouseY);
+            const idx = this.xToIndex(this.mouseX);
+            const candle = this.visibleData[idx];
+            const snapX = this.indexToX(idx);
+            let parts = '';
+            // Horizontal line
+            parts += `<line class="candlestick__crosshair-h" x1="${area.x}" y1="${this.mouseY}" x2="${area.x + area.width}" y2="${this.mouseY}" />`;
+            // Vertical line
+            parts += `<line class="candlestick__crosshair-v" x1="${snapX}" y1="${area.y}" x2="${snapX}" y2="${totalChartBottom}" />`;
+            // Price label
+            const priceLabel = this.formatPrice(price);
+            const labelX = this.svgWidth - PADDING.right + 4;
+            parts += `<rect class="candlestick__crosshair-label-bg" x="${labelX}" y="${this.mouseY - 9}" width="${PADDING.right - 8}" height="18" rx="2" />`;
+            parts += `<text class="candlestick__crosshair-label" x="${labelX + 4}" y="${this.mouseY + 4}">${priceLabel}</text>`;
+            // Date label
+            if (candle) {
+                const dateLabel = this.formatDate(candle.date);
+                const dateLabelY = totalChartBottom + 4;
+                parts += `<rect class="candlestick__crosshair-label-bg" x="${snapX - 36}" y="${dateLabelY}" width="72" height="18" rx="2" />`;
+                parts += `<text class="candlestick__crosshair-label" x="${snapX}" y="${dateLabelY + 13}" text-anchor="middle">${dateLabel}</text>`;
+            }
+            group.innerHTML = parts;
+        }
+        /** Update tooltip via direct DOM manipulation — no re-render needed */
+        updateTooltipDOM() {
+            const tooltip = this.tooltipEl;
+            if (!tooltip)
+                return;
+            const tooltipCandle = this.getTooltipCandle();
+            const hasTooltip = tooltipCandle !== null;
+            if (!hasTooltip) {
+                tooltip.classList.remove('candlestick__tooltip--visible');
+                return;
+            }
+            const isBullish = tooltipCandle.close >= tooltipCandle.open;
+            const showVolumeInTooltip = this.showVolume && tooltipCandle.volume !== undefined;
+            const tooltipIdx = this.xToIndex(this.mouseX);
+            const tooltipX = this.indexToX(tooltipIdx);
+            const tooltipLeft = tooltipX + this.candleWidth + 12;
+            const tooltipFlip = tooltipLeft + 160 > this.svgWidth;
+            const tooltipFinalLeft = tooltipFlip ? tooltipX - this.candleWidth - 170 : tooltipLeft;
+            tooltip.style.left = `${Math.max(0, tooltipFinalLeft)}px`;
+            tooltip.style.top = `${PADDING.top}px`;
+            tooltip.classList.add('candlestick__tooltip--visible');
+            let rows = '';
+            rows += `<div class="candlestick__tooltip-row"><span class="candlestick__tooltip-label">Date</span><span class="candlestick__tooltip-value">${this.formatDate(tooltipCandle.date)}</span></div>`;
+            rows += `<div class="candlestick__tooltip-row"><span class="candlestick__tooltip-label">Open</span><span class="candlestick__tooltip-value">${this.formatPrice(tooltipCandle.open)}</span></div>`;
+            rows += `<div class="candlestick__tooltip-row"><span class="candlestick__tooltip-label">High</span><span class="candlestick__tooltip-value">${this.formatPrice(tooltipCandle.high)}</span></div>`;
+            rows += `<div class="candlestick__tooltip-row"><span class="candlestick__tooltip-label">Low</span><span class="candlestick__tooltip-value">${this.formatPrice(tooltipCandle.low)}</span></div>`;
+            const closeClass = isBullish ? 'candlestick__tooltip-value--bullish' : 'candlestick__tooltip-value--bearish';
+            rows += `<div class="candlestick__tooltip-row"><span class="candlestick__tooltip-label">Close</span><span class="candlestick__tooltip-value ${closeClass}">${this.formatPrice(tooltipCandle.close)}</span></div>`;
+            if (showVolumeInTooltip) {
+                rows += `<div class="candlestick__tooltip-row"><span class="candlestick__tooltip-label">Volume</span><span class="candlestick__tooltip-value">${tooltipCandle.volume?.toLocaleString() || '0'}</span></div>`;
+            }
+            tooltip.innerHTML = rows;
+        }
+        buildGridLines() {
+            if (!this.showGrid)
+                return '';
+            const area = this.chartArea;
+            const { min, max } = this.priceRange;
+            const ticks = 6;
+            const step = (max - min) / ticks;
+            let lines = '';
+            for (let i = 0; i <= ticks; i++) {
+                const price = min + step * i;
+                const y = this.priceToY(price);
+                lines += `<line class="candlestick__grid-line" x1="${area.x}" y1="${y}" x2="${area.x + area.width}" y2="${y}" />`;
+            }
+            return lines;
+        }
+        buildYAxis() {
+            const { min, max } = this.priceRange;
+            const ticks = 6;
+            const step = (max - min) / ticks;
+            let labels = '';
+            const labelX = this.svgWidth - PADDING.right + 8;
+            for (let i = 0; i <= ticks; i++) {
+                const price = min + step * i;
+                const y = this.priceToY(price);
+                labels += `<text class="candlestick__axis-label candlestick__axis-label--y" x="${labelX}" y="${y}">${this.formatPrice(price)}</text>`;
+            }
+            return labels;
+        }
+        buildXAxis() {
+            const visible = this.visibleData;
+            if (visible.length === 0)
+                return '';
+            const area = this.chartArea;
+            const labelY = area.y + area.height + area.volumeHeight + 16;
+            const maxLabels = Math.floor(area.width / 80);
+            const step = Math.max(1, Math.ceil(visible.length / maxLabels));
+            let labels = '';
+            for (let i = 0; i < visible.length; i += step) {
+                const x = this.indexToX(i);
+                labels += `<text class="candlestick__axis-label candlestick__axis-label--x" x="${x}" y="${labelY}">${this.formatDate(visible[i].date)}</text>`;
+            }
+            return labels;
+        }
+        buildCandles() {
+            const visible = this.visibleData;
+            if (visible.length === 0)
+                return '';
+            const cw = this.candleWidth;
+            const halfCw = cw / 2;
+            let parts = '';
+            for (let i = 0; i < visible.length; i++) {
+                const candle = visible[i];
+                const isBullish = candle.close >= candle.open;
+                const color = isBullish
+                    ? (this.bullishColor || 'var(--candlestick-bullish)')
+                    : (this.bearishColor || 'var(--candlestick-bearish)');
+                const x = this.indexToX(i);
+                const highY = this.priceToY(candle.high);
+                const lowY = this.priceToY(candle.low);
+                const openY = this.priceToY(candle.open);
+                const closeY = this.priceToY(candle.close);
+                const bodyTop = Math.min(openY, closeY);
+                const bodyHeight = Math.max(1, Math.abs(closeY - openY));
+                const shouldAnimate = this.animation && this.animateNext;
+                const animDelay = shouldAnimate ? `animation-delay: ${i * 8}ms;` : '';
+                const wickAnimClass = shouldAnimate ? ' candlestick__wick--animated' : '';
+                const bodyAnimClass = shouldAnimate ? ' candlestick__body--animated' : '';
+                // Wick (high to low)
+                parts += `<line class="candlestick__wick${wickAnimClass}" x1="${x}" y1="${highY}" x2="${x}" y2="${lowY}" stroke="${color}" style="${animDelay}" />`;
+                // Body (open to close)
+                parts += `<rect class="candlestick__body${bodyAnimClass}" x="${x - halfCw}" y="${bodyTop}" width="${cw}" height="${bodyHeight}" fill="${color}" stroke="${color}" stroke-width="1" rx="1" style="${animDelay}" data-candle-index="${i}" />`;
+            }
+            return parts;
+        }
+        buildVolumeBars() {
+            if (!this.showVolume)
+                return '';
+            const visible = this.visibleData;
+            if (visible.length === 0)
+                return '';
+            const area = this.chartArea;
+            const volMax = this.volumeMax;
+            const cw = this.candleWidth;
+            const halfCw = cw / 2;
+            let parts = '';
+            for (let i = 0; i < visible.length; i++) {
+                const candle = visible[i];
+                const vol = candle.volume || 0;
+                const isBullish = candle.close >= candle.open;
+                const color = isBullish
+                    ? (this.bullishColor || 'var(--candlestick-bullish)')
+                    : (this.bearishColor || 'var(--candlestick-bearish)');
+                const x = this.indexToX(i);
+                const barHeight = (vol / volMax) * area.volumeHeight;
+                const barY = area.volumeY + area.volumeHeight - barHeight;
+                const shouldAnimate = this.animation && this.animateNext;
+                const animDelay = shouldAnimate ? `animation-delay: ${i * 8}ms;` : '';
+                const animClass = shouldAnimate ? ' candlestick__volume--animated' : '';
+                parts += `<rect class="candlestick__volume${animClass}" x="${x - halfCw}" y="${barY}" width="${cw}" height="${barHeight}" fill="${color}" style="${animDelay}" />`;
+            }
+            return parts;
+        }
+        getTooltipCandle() {
+            if (this.mouseX < 0)
+                return null;
+            const area = this.chartArea;
+            if (this.mouseX < area.x || this.mouseX > area.x + area.width)
+                return null;
+            const idx = this.xToIndex(this.mouseX);
+            return this.visibleData[idx] || null;
+        }
+        renderContent() {
+            return html /*html*/ `
+      <div class="candlestick"
+           style="height: ${this.svgHeight}px;"
+           @mousemove=${this.handleMouseMove}
+           @mouseleave=${this.handleMouseLeave}
+           @mousedown=${this.handleMouseDown}
+           @mouseup=${this.handleMouseUp}
+           @wheel=${this.handleWheel}>
+        <svg class="candlestick__svg" viewBox="0 0 ${this.svgWidth} ${this.svgHeight}" preserveAspectRatio="none" role="img" aria-label="Candlestick chart with ${this.data.length} data points">
+          <g class="candlestick__chart-content"></g>
+          <g class="candlestick__crosshair-group"></g>
+        </svg>
+        <div class="candlestick__tooltip"></div>
+      </div>
+    `;
+        }
+        componentStyles() {
+            return css /*css*/ `${cssContent}`;
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceCandlestick };
+//# sourceMappingURL=snice-candlestick.js.map