viainti-chart 1.0.1 → 1.0.3

package/README.md

@@ -66,11 +66,34 @@ export function Spark() {
 }
 ```
 
+### Compact chart (sin métricas)
+
+```tsx
+import { TradingViewChart, OHLCData } from 'viainti-chart';
+
+const cached: OHLCData[] = [...];
+
+export function InlineCard() {
+  return (
+    <TradingViewChart
+      data={cached}
+      symbol="BTC/USDT"
+      showStats={false}
+      showHeaderStats={false}
+    />
+  );
+}
+```
+
+`showStats={false}` elimina las tarjetas de “Trading range / Avg volume / Volatility” y `showHeaderStats={false}` oculta la banda superior (símbolo + O/H/L/C/V) y el footer “Feed Binance Composite”. Para verlo en vivo ejecuta `npm run dev` y abre `http://localhost:5173?mode=simple`; cambia a `?mode=advanced` para volver al layout completo.
+
 ## API
 
 ### `<TradingViewChart />`
 - `data: OHLCData[]` – candles with `open`, `high`, `low`, `close`, optional `volume` & `timestamp`.
 - `symbol?: string` – label displayed in the header (default `VIA/USDT`).
+- `showStats?: boolean` – toggle the lower metric cards (defaults to `true`).
+- `showHeaderStats?: boolean` – hides the hero ribbon/footer for an ultra-compact mode when set to `false`.
 
 ### `<Chart />`
 - `data: OHLCData[]`
@@ -130,6 +153,8 @@ npm publish --access public
 ```
 
 > If `npm publish` returns `Access token expired or revoked`, run `npm logout`, then authenticate again with `npm login` (or `npm adduser`) before retrying. Use `npm whoami` to confirm the session is active and `npm config get registry` to ensure you're pushing to `https://registry.npmjs.org/`.
+>
+> Para etiquetar la build compacta, publica normalmente (tag `latest`) y luego añade un dist-tag separado, por ejemplo: `npm dist-tag add viainti-chart@1.0.3 simple`. Así podrás instalarla con `npm install viainti-chart@simple` en proyectos que necesiten el modo reducido por defecto.
 
 ## Credits
 

package/dist/index.cjs

@@ -2156,7 +2156,7 @@ const computeVisibleWindow = (dataset, chartWidth, timeframe, zoomLevel, panOffs
         }
     };
 };
-const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange }) => {
+const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showStats = true, showHeaderStats = true }) => {
     const chartRef = React.useRef(null);
     const volumeRef = React.useRef(null);
     const gridRef = React.useRef(null);
@@ -2438,12 +2438,13 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange }) => {
     const iconBaseColor = '#f8fafc';
     const leftRailBaseBg = themePreset === 'light' ? '#0f172a' : activeTheme.panelBg;
     const strings = React.useMemo(() => UI_TEXT[language] ?? UI_TEXT.en, [language]);
+    const compactHeader = !showHeaderStats;
     const [isFullscreen, setIsFullscreen] = React.useState(false);
     const [selectedCandleIndex, setSelectedCandleIndex] = React.useState(null);
     const [seriesType, setSeriesType] = React.useState('candles');
     const [showSeriesMenu, setShowSeriesMenu] = React.useState(false);
     const [isSeriesLoading, setIsSeriesLoading] = React.useState(false);
-    const [showQuickTips, setShowQuickTips] = React.useState(true);
+    const [showQuickTips, setShowQuickTips] = React.useState(showHeaderStats);
     const [toastMessage, setToastMessage] = React.useState(null);
     const [showNoteModal, setShowNoteModal] = React.useState(false);
     const [pendingNotePoint, setPendingNotePoint] = React.useState(null);
@@ -3224,6 +3225,87 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange }) => {
         { value: 'columns', label: 'Columnas', icon: seriesIconMap.columns },
         { value: 'high-low', label: 'High/Low', icon: seriesIconMap['high-low'] }
     ];
+    const headerButtons = (React.createElement(React.Fragment, null,
+        React.createElement("button", { onClick: () => setShowSeriesMenu(!showSeriesMenu), style: {
+                width: '38px',
+                height: '38px',
+                borderRadius: '999px',
+                border: `1px solid ${showSeriesMenu ? activeTheme.accent : iconBaseBg}`,
+                background: showSeriesMenu ? activeTheme.accent : iconBaseBg,
+                color: iconBaseColor,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                transition: 'all 0.2s'
+            }, title: strings.buttons.series, "aria-label": strings.buttons.series }, seriesIconMap[seriesType] ?? React.createElement(BsGraphUp, null)),
+        React.createElement("button", { onClick: toggleIndicatorsPanel, style: {
+                background: showIndicatorsPanel ? '#2563eb' : 'rgba(15,23,42,0.6)',
+                color: '#e2e8f0',
+                border: '1px solid #1f2937',
+                borderRadius: '999px',
+                padding: '8px 14px',
+                fontSize: '12px',
+                fontWeight: 600,
+                cursor: 'pointer',
+                transition: 'all 0.2s'
+            } }, strings.buttons.indicators),
+        React.createElement("button", { onClick: () => setShowConfigPanel(!showConfigPanel), style: {
+                width: '38px',
+                height: '38px',
+                borderRadius: '999px',
+                border: `1px solid ${showConfigPanel ? activeTheme.accent : iconBaseBg}`,
+                background: showConfigPanel ? activeTheme.accent : iconBaseBg,
+                color: iconBaseColor,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                transition: 'all 0.2s'
+            }, title: strings.buttons.config, "aria-label": strings.buttons.config },
+            React.createElement(BsGear, null)),
+        React.createElement("button", { onClick: () => setIsFullscreen(prev => !prev), style: {
+                width: '38px',
+                height: '38px',
+                borderRadius: '999px',
+                border: `1px solid ${isFullscreen ? activeTheme.accent : iconBaseBg}`,
+                background: isFullscreen ? activeTheme.accent : iconBaseBg,
+                color: iconBaseColor,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                transition: 'all 0.2s'
+            }, title: isFullscreen ? strings.buttons.fullscreenExit : strings.buttons.fullscreenEnter, "aria-label": isFullscreen ? strings.buttons.fullscreenExit : strings.buttons.fullscreenEnter },
+            React.createElement(BsArrowsFullscreen, null)),
+        React.createElement("button", { onClick: takeScreenshot, style: {
+                width: '38px',
+                height: '38px',
+                borderRadius: '999px',
+                border: `1px solid ${iconBaseBg}`,
+                background: iconBaseBg,
+                color: iconBaseColor,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                transition: 'all 0.2s'
+            }, title: strings.buttons.screenshot, "aria-label": strings.buttons.screenshot },
+            React.createElement(BsCamera, null)),
+        showHeaderStats && (React.createElement("button", { onClick: () => setShowQuickTips(prev => !prev), style: {
+                width: '38px',
+                height: '38px',
+                borderRadius: '999px',
+                border: `1px solid ${showQuickTips ? activeTheme.accent : iconBaseBg}`,
+                background: showQuickTips ? activeTheme.accent : iconBaseBg,
+                color: iconBaseColor,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                transition: 'all 0.2s'
+            }, title: strings.buttons.help, "aria-label": strings.buttons.help },
+            React.createElement(BsQuestionCircle, null)))));
     const cursorCss = isDraggingRef.current
         ? 'grabbing'
         : cursorType === 'cross'
@@ -3252,13 +3334,12 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange }) => {
                 background: `linear-gradient(120deg, ${activeTheme.heroFrom} 0%, ${activeTheme.heroTo} 100%)`,
                 borderBottom: `1px solid ${activeTheme.panelBorder}`,
                 display: 'flex',
-                flexWrap: 'wrap',
+                flexDirection: 'column',
                 gap: isMobile ? '12px' : '16px',
-                alignItems: 'center',
                 padding: isMobile ? '12px 16px' : '16px 20px',
                 boxShadow: elevatedShadow
             }, initial: { opacity: 0, y: -15 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 } },
-            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', minWidth: 0 } },
+            showHeaderStats && (React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', minWidth: 0 } },
                 React.createElement("div", { style: { background: activeTheme.cardBg, border: `1px solid ${activeTheme.cardBorder}`, borderRadius: '14px', padding: '10px 16px', minWidth: '160px', color: activeTheme.textPrimary } },
                     React.createElement("div", { style: { fontSize: '11px', textTransform: 'uppercase', letterSpacing: '0.08em', color: activeTheme.textSecondary, marginBottom: '4px' } }, strings.symbolLabel),
                     React.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: activeTheme.textPrimary, fontWeight: 600, gap: '10px' } },
@@ -3290,150 +3371,118 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange }) => {
                     { label: 'V', value: referenceCandle.volume ?? 0 }
                 ].map(item => (React.createElement("div", { key: item.label, style: { display: 'flex', flexDirection: 'column', minWidth: '50px' } },
                     React.createElement("span", { style: { fontSize: '10px', letterSpacing: '0.08em', textTransform: 'uppercase' } }, item.label),
-                    React.createElement("span", { style: { color: '#e2e8f0', fontWeight: 600 } }, item.value.toFixed(2)))))))),
-            React.createElement("div", { style: {
+                    React.createElement("span", { style: { color: '#e2e8f0', fontWeight: 600 } }, item.value.toFixed(2))))))))),
+            compactHeader ? (React.createElement("div", { style: {
+                    width: '100%',
                     display: 'flex',
+                    flexWrap: isMobile ? 'wrap' : 'nowrap',
                     alignItems: 'center',
-                    gap: '12px',
-                    padding: '10px 14px',
-                    background: activeTheme.panelBg,
-                    borderRadius: '16px',
-                    border: `1px solid ${activeTheme.panelBorder}`,
-                    overflowX: 'auto'
+                    gap: isMobile ? '12px' : '16px'
                 } },
-                React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap' } },
-                    React.createElement("span", { style: { fontSize: '10px', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#94a3b8' } }, strings.timeframeTitle),
-                    React.createElement("span", { style: { fontSize: '11px', color: '#f8fafc', fontWeight: 600, padding: '2px 8px', borderRadius: '999px', background: 'rgba(37,99,235,0.25)', border: '1px solid rgba(37,99,235,0.6)' } }, timeframe)),
-                React.createElement("div", { style: { display: 'flex', gap: '6px', flex: 1, minWidth: 0, overflowX: 'auto', paddingBottom: '4px' } }, ['1m', '3m', '5m', '15m', '30m', '1h', '4h'].map(tf => (React.createElement("button", { key: tf, onClick: () => handleTimeframeChange(tf), style: {
-                        background: timeframe === tf ? activeTheme.accent : activeTheme.panelBg,
-                        color: timeframe === tf ? '#f8fafc' : activeTheme.textSecondary,
-                        border: `1px solid ${timeframe === tf ? activeTheme.accent : activeTheme.panelBorder}`,
-                        borderRadius: '10px',
-                        padding: '6px 12px',
-                        fontSize: '12px',
-                        fontWeight: 600,
-                        cursor: 'pointer',
-                        transition: 'all 0.2s',
-                        flex: '0 0 auto',
-                        whiteSpace: 'nowrap'
-                    } }, tf)))),
-                React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '6px', fontSize: '12px', color: '#cbd5f5', whiteSpace: 'nowrap', flexShrink: 0 } },
-                    React.createElement(BsClockHistory, null),
-                    React.createElement("span", null,
-                        strings.axis.time,
-                        ": ",
-                        currentTimeLabel)),
-                React.createElement("select", { value: timeframe, onChange: (e) => handleTimeframeChange(e.target.value), style: {
-                        background: 'rgba(15,23,42,0.8)',
-                        color: '#e2e8f0',
-                        border: '1px solid #1f2937',
-                        padding: '10px 36px 10px 12px',
-                        borderRadius: '12px',
-                        cursor: 'pointer',
-                        fontSize: '12px',
-                        fontWeight: 600,
-                        appearance: 'none',
-                        backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
-                        backgroundPosition: 'right 10px center',
-                        backgroundRepeat: 'no-repeat',
-                        backgroundSize: '14px',
-                        minWidth: '120px',
-                        flexShrink: 0
-                    } },
-                    React.createElement("option", { value: "1m" }, "1m"),
-                    React.createElement("option", { value: "3m" }, "3m"),
-                    React.createElement("option", { value: "5m" }, "5m"),
-                    React.createElement("option", { value: "15m" }, "15m"),
-                    React.createElement("option", { value: "30m" }, "30m"),
-                    React.createElement("option", { value: "1h" }, "1h"),
-                    React.createElement("option", { value: "4h" }, "4h"),
-                    React.createElement("option", { value: "12h" }, "12h"),
-                    React.createElement("option", { value: "1D" }, "1D"),
-                    React.createElement("option", { value: "3D" }, "3D"),
-                    React.createElement("option", { value: "1W" }, "1W"),
-                    React.createElement("option", { value: "1M" }, "1M"))),
-            React.createElement("div", { style: { marginLeft: 'auto', display: 'flex', flexWrap: 'wrap', gap: '8px', alignItems: 'center' } },
-                React.createElement("button", { onClick: () => setShowSeriesMenu(!showSeriesMenu), style: {
-                        width: '38px',
-                        height: '38px',
-                        borderRadius: '999px',
-                        border: `1px solid ${showSeriesMenu ? activeTheme.accent : iconBaseBg}`,
-                        background: showSeriesMenu ? activeTheme.accent : iconBaseBg,
-                        color: iconBaseColor,
+                React.createElement("div", { style: {
                         display: 'flex',
                         alignItems: 'center',
-                        justifyContent: 'center',
-                        cursor: 'pointer',
-                        transition: 'all 0.2s'
-                    }, title: strings.buttons.series, "aria-label": strings.buttons.series }, seriesIconMap[seriesType] ?? React.createElement(BsGraphUp, null)),
-                React.createElement("button", { onClick: toggleIndicatorsPanel, style: {
-                        background: showIndicatorsPanel ? '#2563eb' : 'rgba(15,23,42,0.6)',
-                        color: '#e2e8f0',
-                        border: '1px solid #1f2937',
-                        borderRadius: '999px',
+                        gap: '10px',
                         padding: '8px 14px',
-                        fontSize: '12px',
-                        fontWeight: 600,
-                        cursor: 'pointer',
-                        transition: 'all 0.2s'
-                    } }, strings.buttons.indicators),
-                React.createElement("button", { onClick: () => setShowConfigPanel(!showConfigPanel), style: {
-                        width: '38px',
-                        height: '38px',
-                        borderRadius: '999px',
-                        border: `1px solid ${showConfigPanel ? activeTheme.accent : iconBaseBg}`,
-                        background: showConfigPanel ? activeTheme.accent : iconBaseBg,
-                        color: iconBaseColor,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        cursor: 'pointer',
-                        transition: 'all 0.2s'
-                    }, title: strings.buttons.config, "aria-label": strings.buttons.config },
-                    React.createElement(BsGear, null)),
-                React.createElement("button", { onClick: () => setIsFullscreen(prev => !prev), style: {
-                        width: '38px',
-                        height: '38px',
-                        borderRadius: '999px',
-                        border: `1px solid ${isFullscreen ? activeTheme.accent : iconBaseBg}`,
-                        background: isFullscreen ? activeTheme.accent : iconBaseBg,
-                        color: iconBaseColor,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        cursor: 'pointer',
-                        transition: 'all 0.2s'
-                    }, title: isFullscreen ? strings.buttons.fullscreenExit : strings.buttons.fullscreenEnter, "aria-label": isFullscreen ? strings.buttons.fullscreenExit : strings.buttons.fullscreenEnter },
-                    React.createElement(BsArrowsFullscreen, null)),
-                React.createElement("button", { onClick: takeScreenshot, style: {
-                        width: '38px',
-                        height: '38px',
-                        borderRadius: '999px',
-                        border: `1px solid ${iconBaseBg}`,
-                        background: iconBaseBg,
-                        color: iconBaseColor,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        cursor: 'pointer',
-                        transition: 'all 0.2s'
-                    }, title: strings.buttons.screenshot, "aria-label": strings.buttons.screenshot },
-                    React.createElement(BsCamera, null)),
-                React.createElement("button", { onClick: () => setShowQuickTips(prev => !prev), style: {
-                        width: '38px',
-                        height: '38px',
-                        borderRadius: '999px',
-                        border: `1px solid ${showQuickTips ? activeTheme.accent : iconBaseBg}`,
-                        background: showQuickTips ? activeTheme.accent : iconBaseBg,
-                        color: iconBaseColor,
+                        background: activeTheme.panelBg,
+                        borderRadius: '16px',
+                        border: `1px solid ${activeTheme.panelBorder}`,
+                        flex: 1,
+                        minWidth: isMobile ? '100%' : '320px'
+                    } },
+                    React.createElement("span", { style: { fontSize: '10px', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#94a3b8' } }, strings.timeframeTitle),
+                    React.createElement("select", { value: timeframe, onChange: (e) => handleTimeframeChange(e.target.value), style: {
+                            background: 'rgba(15,23,42,0.8)',
+                            color: '#e2e8f0',
+                            border: '1px solid #1f2937',
+                            padding: '8px 32px 8px 12px',
+                            borderRadius: '12px',
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                            fontWeight: 600,
+                            appearance: 'none',
+                            backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
+                            backgroundPosition: 'right 10px center',
+                            backgroundRepeat: 'no-repeat',
+                            backgroundSize: '14px',
+                            minWidth: '140px'
+                        } },
+                        React.createElement("option", { value: "1m" }, "1m"),
+                        React.createElement("option", { value: "3m" }, "3m"),
+                        React.createElement("option", { value: "5m" }, "5m"),
+                        React.createElement("option", { value: "15m" }, "15m"),
+                        React.createElement("option", { value: "30m" }, "30m"),
+                        React.createElement("option", { value: "1h" }, "1h"),
+                        React.createElement("option", { value: "4h" }, "4h"),
+                        React.createElement("option", { value: "12h" }, "12h"),
+                        React.createElement("option", { value: "1D" }, "1D"),
+                        React.createElement("option", { value: "3D" }, "3D"),
+                        React.createElement("option", { value: "1W" }, "1W"),
+                        React.createElement("option", { value: "1M" }, "1M"))),
+                React.createElement("div", { style: { marginLeft: isMobile ? 0 : 'auto', display: 'flex', flexWrap: isMobile ? 'wrap' : 'nowrap', gap: '8px', alignItems: 'center' } }, headerButtons))) : (React.createElement(React.Fragment, null,
+                React.createElement("div", { style: {
                         display: 'flex',
                         alignItems: 'center',
-                        justifyContent: 'center',
-                        cursor: 'pointer',
-                        transition: 'all 0.2s'
-                    }, title: strings.buttons.help, "aria-label": strings.buttons.help },
-                    React.createElement(BsQuestionCircle, null)))),
-        derivedStats && (React.createElement("div", { style: { padding: '16px 20px 0', background: activeTheme.panelBg, borderBottom: `1px solid ${activeTheme.panelBorder}` } },
+                        gap: '12px',
+                        padding: '10px 14px',
+                        background: activeTheme.panelBg,
+                        borderRadius: '16px',
+                        border: `1px solid ${activeTheme.panelBorder}`,
+                        overflowX: 'auto'
+                    } },
+                    React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap' } },
+                        React.createElement("span", { style: { fontSize: '10px', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#94a3b8' } }, strings.timeframeTitle),
+                        React.createElement("span", { style: { fontSize: '11px', color: '#f8fafc', fontWeight: 600, padding: '2px 8px', borderRadius: '999px', background: 'rgba(37,99,235,0.25)', border: '1px solid rgba(37,99,235,0.6)' } }, timeframe)),
+                    React.createElement("div", { style: { display: 'flex', gap: '6px', flex: 1, minWidth: 0, overflowX: 'auto', paddingBottom: '4px' } }, ['1m', '3m', '5m', '15m', '30m', '1h', '4h'].map(tf => (React.createElement("button", { key: tf, onClick: () => handleTimeframeChange(tf), style: {
+                            background: timeframe === tf ? activeTheme.accent : activeTheme.panelBg,
+                            color: timeframe === tf ? '#f8fafc' : activeTheme.textSecondary,
+                            border: `1px solid ${timeframe === tf ? activeTheme.accent : activeTheme.panelBorder}`,
+                            borderRadius: '10px',
+                            padding: '6px 12px',
+                            fontSize: '12px',
+                            fontWeight: 600,
+                            cursor: 'pointer',
+                            transition: 'all 0.2s',
+                            flex: '0 0 auto',
+                            whiteSpace: 'nowrap'
+                        } }, tf)))),
+                    React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '6px', fontSize: '12px', color: '#cbd5f5', whiteSpace: 'nowrap', flexShrink: 0 } },
+                        React.createElement(BsClockHistory, null),
+                        React.createElement("span", null,
+                            strings.axis.time,
+                            ": ",
+                            currentTimeLabel)),
+                    React.createElement("select", { value: timeframe, onChange: (e) => handleTimeframeChange(e.target.value), style: {
+                            background: 'rgba(15,23,42,0.8)',
+                            color: '#e2e8f0',
+                            border: '1px solid #1f2937',
+                            padding: '10px 36px 10px 12px',
+                            borderRadius: '12px',
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                            fontWeight: 600,
+                            appearance: 'none',
+                            backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
+                            backgroundPosition: 'right 10px center',
+                            backgroundRepeat: 'no-repeat',
+                            backgroundSize: '14px',
+                            minWidth: '120px',
+                            flexShrink: 0
+                        } },
+                        React.createElement("option", { value: "1m" }, "1m"),
+                        React.createElement("option", { value: "3m" }, "3m"),
+                        React.createElement("option", { value: "5m" }, "5m"),
+                        React.createElement("option", { value: "15m" }, "15m"),
+                        React.createElement("option", { value: "30m" }, "30m"),
+                        React.createElement("option", { value: "1h" }, "1h"),
+                        React.createElement("option", { value: "4h" }, "4h"),
+                        React.createElement("option", { value: "12h" }, "12h"),
+                        React.createElement("option", { value: "1D" }, "1D"),
+                        React.createElement("option", { value: "3D" }, "3D"),
+                        React.createElement("option", { value: "1W" }, "1W"),
+                        React.createElement("option", { value: "1M" }, "1M"))),
+                React.createElement("div", { style: { marginLeft: 'auto', display: 'flex', flexWrap: 'wrap', gap: '8px', alignItems: 'center' } }, headerButtons)))),
+        showStats && derivedStats && (React.createElement("div", { style: { padding: '16px 20px 0', background: activeTheme.panelBg, borderBottom: `1px solid ${activeTheme.panelBorder}` } },
             React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '12px' } },
                 React.createElement("div", { style: { ...metricCardStyle, background: activeTheme.cardBg, border: `1px solid ${activeTheme.cardBorder}` } },
                     React.createElement("span", { style: { ...metricLabelStyle, color: activeTheme.textSecondary } }, "Trading range"),
@@ -3461,7 +3510,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange }) => {
                         "Latency ~",
                         latencyMs,
                         "ms"))))),
-        React.createElement(framerMotion.AnimatePresence, null, showQuickTips && (React.createElement(framerMotion.motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, style: {
+        React.createElement(framerMotion.AnimatePresence, null, showHeaderStats && showQuickTips && (React.createElement(framerMotion.motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, style: {
                 position: (isFullscreen ? 'fixed' : 'absolute'),
                 top: isFullscreen ? 80 : 140,
                 left: isFullscreen ? 80 : 140,
@@ -3793,7 +3842,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange }) => {
                 React.createElement("span", null, field.label),
                 React.createElement("input", { type: "color", value: customTheme[field.key], onChange: (event) => handleCustomThemeChange(field.key, event.target.value), style: { width: '100%', height: '34px', border: 'none', cursor: 'pointer', borderRadius: '8px', background: 'transparent' } })))))),
             React.createElement("div", { style: { fontSize: '12px', color: activeTheme.textSecondary } }, strings.config.soon))),
-        React.createElement("div", { style: { padding: isMobile ? '8px 16px' : '10px 20px', background: activeTheme.panelBg, borderTop: `1px solid ${activeTheme.panelBorder}`, display: 'flex', flexWrap: 'wrap', gap: isMobile ? '12px' : '18px', fontSize: '10px', letterSpacing: '0.08em', textTransform: 'uppercase', color: activeTheme.textSecondary } },
+        showHeaderStats && (React.createElement("div", { style: { padding: isMobile ? '8px 16px' : '10px 20px', background: activeTheme.panelBg, borderTop: `1px solid ${activeTheme.panelBorder}`, display: 'flex', flexWrap: 'wrap', gap: isMobile ? '12px' : '18px', fontSize: '10px', letterSpacing: '0.08em', textTransform: 'uppercase', color: activeTheme.textSecondary } },
             React.createElement("span", null,
                 "Latency ",
                 latencyMs,
@@ -3802,7 +3851,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange }) => {
                 "Session ",
                 derivedStats?.session ?? 'Global'),
             React.createElement("span", null, "Feed Binance Composite"),
-            React.createElement("span", null, "Security AES-256"))));
+            React.createElement("span", null, "Security AES-256")))));
 };
 var TradingViewChart_default = React.memo(TradingViewChart);