viainti-chart 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +25 -0
  2. package/dist/index.cjs +193 -144
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.ts +2 -0
  5. package/dist/index.mjs +193 -144
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -20,6 +20,8 @@ interface TradingViewChartProps {
20
20
  data: OHLCData[];
21
21
  symbol?: string;
22
22
  onTimeframeChange?: (timeframe: string) => void;
23
+ showStats?: boolean;
24
+ showHeaderStats?: boolean;
23
25
  }
24
26
  declare const _default: React.NamedExoticComponent<TradingViewChartProps>;
25
27
 
package/dist/index.mjs CHANGED
@@ -2154,7 +2154,7 @@ const computeVisibleWindow = (dataset, chartWidth, timeframe, zoomLevel, panOffs
2154
2154
  }
2155
2155
  };
2156
2156
  };
2157
- const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange }) => {
2157
+ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showStats = true, showHeaderStats = true }) => {
2158
2158
  const chartRef = useRef(null);
2159
2159
  const volumeRef = useRef(null);
2160
2160
  const gridRef = useRef(null);
@@ -2436,12 +2436,13 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange }) => {
2436
2436
  const iconBaseColor = '#f8fafc';
2437
2437
  const leftRailBaseBg = themePreset === 'light' ? '#0f172a' : activeTheme.panelBg;
2438
2438
  const strings = useMemo(() => UI_TEXT[language] ?? UI_TEXT.en, [language]);
2439
+ const compactHeader = !showHeaderStats;
2439
2440
  const [isFullscreen, setIsFullscreen] = useState(false);
2440
2441
  const [selectedCandleIndex, setSelectedCandleIndex] = useState(null);
2441
2442
  const [seriesType, setSeriesType] = useState('candles');
2442
2443
  const [showSeriesMenu, setShowSeriesMenu] = useState(false);
2443
2444
  const [isSeriesLoading, setIsSeriesLoading] = useState(false);
2444
- const [showQuickTips, setShowQuickTips] = useState(true);
2445
+ const [showQuickTips, setShowQuickTips] = useState(showHeaderStats);
2445
2446
  const [toastMessage, setToastMessage] = useState(null);
2446
2447
  const [showNoteModal, setShowNoteModal] = useState(false);
2447
2448
  const [pendingNotePoint, setPendingNotePoint] = useState(null);
@@ -3222,6 +3223,87 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange }) => {
3222
3223
  { value: 'columns', label: 'Columnas', icon: seriesIconMap.columns },
3223
3224
  { value: 'high-low', label: 'High/Low', icon: seriesIconMap['high-low'] }
3224
3225
  ];
3226
+ const headerButtons = (React.createElement(React.Fragment, null,
3227
+ React.createElement("button", { onClick: () => setShowSeriesMenu(!showSeriesMenu), style: {
3228
+ width: '38px',
3229
+ height: '38px',
3230
+ borderRadius: '999px',
3231
+ border: `1px solid ${showSeriesMenu ? activeTheme.accent : iconBaseBg}`,
3232
+ background: showSeriesMenu ? activeTheme.accent : iconBaseBg,
3233
+ color: iconBaseColor,
3234
+ display: 'flex',
3235
+ alignItems: 'center',
3236
+ justifyContent: 'center',
3237
+ cursor: 'pointer',
3238
+ transition: 'all 0.2s'
3239
+ }, title: strings.buttons.series, "aria-label": strings.buttons.series }, seriesIconMap[seriesType] ?? React.createElement(BsGraphUp, null)),
3240
+ React.createElement("button", { onClick: toggleIndicatorsPanel, style: {
3241
+ background: showIndicatorsPanel ? '#2563eb' : 'rgba(15,23,42,0.6)',
3242
+ color: '#e2e8f0',
3243
+ border: '1px solid #1f2937',
3244
+ borderRadius: '999px',
3245
+ padding: '8px 14px',
3246
+ fontSize: '12px',
3247
+ fontWeight: 600,
3248
+ cursor: 'pointer',
3249
+ transition: 'all 0.2s'
3250
+ } }, strings.buttons.indicators),
3251
+ React.createElement("button", { onClick: () => setShowConfigPanel(!showConfigPanel), style: {
3252
+ width: '38px',
3253
+ height: '38px',
3254
+ borderRadius: '999px',
3255
+ border: `1px solid ${showConfigPanel ? activeTheme.accent : iconBaseBg}`,
3256
+ background: showConfigPanel ? activeTheme.accent : iconBaseBg,
3257
+ color: iconBaseColor,
3258
+ display: 'flex',
3259
+ alignItems: 'center',
3260
+ justifyContent: 'center',
3261
+ cursor: 'pointer',
3262
+ transition: 'all 0.2s'
3263
+ }, title: strings.buttons.config, "aria-label": strings.buttons.config },
3264
+ React.createElement(BsGear, null)),
3265
+ React.createElement("button", { onClick: () => setIsFullscreen(prev => !prev), style: {
3266
+ width: '38px',
3267
+ height: '38px',
3268
+ borderRadius: '999px',
3269
+ border: `1px solid ${isFullscreen ? activeTheme.accent : iconBaseBg}`,
3270
+ background: isFullscreen ? activeTheme.accent : iconBaseBg,
3271
+ color: iconBaseColor,
3272
+ display: 'flex',
3273
+ alignItems: 'center',
3274
+ justifyContent: 'center',
3275
+ cursor: 'pointer',
3276
+ transition: 'all 0.2s'
3277
+ }, title: isFullscreen ? strings.buttons.fullscreenExit : strings.buttons.fullscreenEnter, "aria-label": isFullscreen ? strings.buttons.fullscreenExit : strings.buttons.fullscreenEnter },
3278
+ React.createElement(BsArrowsFullscreen, null)),
3279
+ React.createElement("button", { onClick: takeScreenshot, style: {
3280
+ width: '38px',
3281
+ height: '38px',
3282
+ borderRadius: '999px',
3283
+ border: `1px solid ${iconBaseBg}`,
3284
+ background: iconBaseBg,
3285
+ color: iconBaseColor,
3286
+ display: 'flex',
3287
+ alignItems: 'center',
3288
+ justifyContent: 'center',
3289
+ cursor: 'pointer',
3290
+ transition: 'all 0.2s'
3291
+ }, title: strings.buttons.screenshot, "aria-label": strings.buttons.screenshot },
3292
+ React.createElement(BsCamera, null)),
3293
+ showHeaderStats && (React.createElement("button", { onClick: () => setShowQuickTips(prev => !prev), style: {
3294
+ width: '38px',
3295
+ height: '38px',
3296
+ borderRadius: '999px',
3297
+ border: `1px solid ${showQuickTips ? activeTheme.accent : iconBaseBg}`,
3298
+ background: showQuickTips ? activeTheme.accent : iconBaseBg,
3299
+ color: iconBaseColor,
3300
+ display: 'flex',
3301
+ alignItems: 'center',
3302
+ justifyContent: 'center',
3303
+ cursor: 'pointer',
3304
+ transition: 'all 0.2s'
3305
+ }, title: strings.buttons.help, "aria-label": strings.buttons.help },
3306
+ React.createElement(BsQuestionCircle, null)))));
3225
3307
  const cursorCss = isDraggingRef.current
3226
3308
  ? 'grabbing'
3227
3309
  : cursorType === 'cross'
@@ -3250,13 +3332,12 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange }) => {
3250
3332
  background: `linear-gradient(120deg, ${activeTheme.heroFrom} 0%, ${activeTheme.heroTo} 100%)`,
3251
3333
  borderBottom: `1px solid ${activeTheme.panelBorder}`,
3252
3334
  display: 'flex',
3253
- flexWrap: 'wrap',
3335
+ flexDirection: 'column',
3254
3336
  gap: isMobile ? '12px' : '16px',
3255
- alignItems: 'center',
3256
3337
  padding: isMobile ? '12px 16px' : '16px 20px',
3257
3338
  boxShadow: elevatedShadow
3258
3339
  }, initial: { opacity: 0, y: -15 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 } },
3259
- React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', minWidth: 0 } },
3340
+ showHeaderStats && (React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', minWidth: 0 } },
3260
3341
  React.createElement("div", { style: { background: activeTheme.cardBg, border: `1px solid ${activeTheme.cardBorder}`, borderRadius: '14px', padding: '10px 16px', minWidth: '160px', color: activeTheme.textPrimary } },
3261
3342
  React.createElement("div", { style: { fontSize: '11px', textTransform: 'uppercase', letterSpacing: '0.08em', color: activeTheme.textSecondary, marginBottom: '4px' } }, strings.symbolLabel),
3262
3343
  React.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: activeTheme.textPrimary, fontWeight: 600, gap: '10px' } },
@@ -3288,150 +3369,118 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange }) => {
3288
3369
  { label: 'V', value: referenceCandle.volume ?? 0 }
3289
3370
  ].map(item => (React.createElement("div", { key: item.label, style: { display: 'flex', flexDirection: 'column', minWidth: '50px' } },
3290
3371
  React.createElement("span", { style: { fontSize: '10px', letterSpacing: '0.08em', textTransform: 'uppercase' } }, item.label),
3291
- React.createElement("span", { style: { color: '#e2e8f0', fontWeight: 600 } }, item.value.toFixed(2)))))))),
3292
- React.createElement("div", { style: {
3372
+ React.createElement("span", { style: { color: '#e2e8f0', fontWeight: 600 } }, item.value.toFixed(2))))))))),
3373
+ compactHeader ? (React.createElement("div", { style: {
3374
+ width: '100%',
3293
3375
  display: 'flex',
3376
+ flexWrap: isMobile ? 'wrap' : 'nowrap',
3294
3377
  alignItems: 'center',
3295
- gap: '12px',
3296
- padding: '10px 14px',
3297
- background: activeTheme.panelBg,
3298
- borderRadius: '16px',
3299
- border: `1px solid ${activeTheme.panelBorder}`,
3300
- overflowX: 'auto'
3378
+ gap: isMobile ? '12px' : '16px'
3301
3379
  } },
3302
- React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap' } },
3303
- React.createElement("span", { style: { fontSize: '10px', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#94a3b8' } }, strings.timeframeTitle),
3304
- 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)),
3305
- 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: {
3306
- background: timeframe === tf ? activeTheme.accent : activeTheme.panelBg,
3307
- color: timeframe === tf ? '#f8fafc' : activeTheme.textSecondary,
3308
- border: `1px solid ${timeframe === tf ? activeTheme.accent : activeTheme.panelBorder}`,
3309
- borderRadius: '10px',
3310
- padding: '6px 12px',
3311
- fontSize: '12px',
3312
- fontWeight: 600,
3313
- cursor: 'pointer',
3314
- transition: 'all 0.2s',
3315
- flex: '0 0 auto',
3316
- whiteSpace: 'nowrap'
3317
- } }, tf)))),
3318
- React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '6px', fontSize: '12px', color: '#cbd5f5', whiteSpace: 'nowrap', flexShrink: 0 } },
3319
- React.createElement(BsClockHistory, null),
3320
- React.createElement("span", null,
3321
- strings.axis.time,
3322
- ": ",
3323
- currentTimeLabel)),
3324
- React.createElement("select", { value: timeframe, onChange: (e) => handleTimeframeChange(e.target.value), style: {
3325
- background: 'rgba(15,23,42,0.8)',
3326
- color: '#e2e8f0',
3327
- border: '1px solid #1f2937',
3328
- padding: '10px 36px 10px 12px',
3329
- borderRadius: '12px',
3330
- cursor: 'pointer',
3331
- fontSize: '12px',
3332
- fontWeight: 600,
3333
- appearance: 'none',
3334
- 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")`,
3335
- backgroundPosition: 'right 10px center',
3336
- backgroundRepeat: 'no-repeat',
3337
- backgroundSize: '14px',
3338
- minWidth: '120px',
3339
- flexShrink: 0
3340
- } },
3341
- React.createElement("option", { value: "1m" }, "1m"),
3342
- React.createElement("option", { value: "3m" }, "3m"),
3343
- React.createElement("option", { value: "5m" }, "5m"),
3344
- React.createElement("option", { value: "15m" }, "15m"),
3345
- React.createElement("option", { value: "30m" }, "30m"),
3346
- React.createElement("option", { value: "1h" }, "1h"),
3347
- React.createElement("option", { value: "4h" }, "4h"),
3348
- React.createElement("option", { value: "12h" }, "12h"),
3349
- React.createElement("option", { value: "1D" }, "1D"),
3350
- React.createElement("option", { value: "3D" }, "3D"),
3351
- React.createElement("option", { value: "1W" }, "1W"),
3352
- React.createElement("option", { value: "1M" }, "1M"))),
3353
- React.createElement("div", { style: { marginLeft: 'auto', display: 'flex', flexWrap: 'wrap', gap: '8px', alignItems: 'center' } },
3354
- React.createElement("button", { onClick: () => setShowSeriesMenu(!showSeriesMenu), style: {
3355
- width: '38px',
3356
- height: '38px',
3357
- borderRadius: '999px',
3358
- border: `1px solid ${showSeriesMenu ? activeTheme.accent : iconBaseBg}`,
3359
- background: showSeriesMenu ? activeTheme.accent : iconBaseBg,
3360
- color: iconBaseColor,
3380
+ React.createElement("div", { style: {
3361
3381
  display: 'flex',
3362
3382
  alignItems: 'center',
3363
- justifyContent: 'center',
3364
- cursor: 'pointer',
3365
- transition: 'all 0.2s'
3366
- }, title: strings.buttons.series, "aria-label": strings.buttons.series }, seriesIconMap[seriesType] ?? React.createElement(BsGraphUp, null)),
3367
- React.createElement("button", { onClick: toggleIndicatorsPanel, style: {
3368
- background: showIndicatorsPanel ? '#2563eb' : 'rgba(15,23,42,0.6)',
3369
- color: '#e2e8f0',
3370
- border: '1px solid #1f2937',
3371
- borderRadius: '999px',
3383
+ gap: '10px',
3372
3384
  padding: '8px 14px',
3373
- fontSize: '12px',
3374
- fontWeight: 600,
3375
- cursor: 'pointer',
3376
- transition: 'all 0.2s'
3377
- } }, strings.buttons.indicators),
3378
- React.createElement("button", { onClick: () => setShowConfigPanel(!showConfigPanel), style: {
3379
- width: '38px',
3380
- height: '38px',
3381
- borderRadius: '999px',
3382
- border: `1px solid ${showConfigPanel ? activeTheme.accent : iconBaseBg}`,
3383
- background: showConfigPanel ? activeTheme.accent : iconBaseBg,
3384
- color: iconBaseColor,
3385
- display: 'flex',
3386
- alignItems: 'center',
3387
- justifyContent: 'center',
3388
- cursor: 'pointer',
3389
- transition: 'all 0.2s'
3390
- }, title: strings.buttons.config, "aria-label": strings.buttons.config },
3391
- React.createElement(BsGear, null)),
3392
- React.createElement("button", { onClick: () => setIsFullscreen(prev => !prev), style: {
3393
- width: '38px',
3394
- height: '38px',
3395
- borderRadius: '999px',
3396
- border: `1px solid ${isFullscreen ? activeTheme.accent : iconBaseBg}`,
3397
- background: isFullscreen ? activeTheme.accent : iconBaseBg,
3398
- color: iconBaseColor,
3399
- display: 'flex',
3400
- alignItems: 'center',
3401
- justifyContent: 'center',
3402
- cursor: 'pointer',
3403
- transition: 'all 0.2s'
3404
- }, title: isFullscreen ? strings.buttons.fullscreenExit : strings.buttons.fullscreenEnter, "aria-label": isFullscreen ? strings.buttons.fullscreenExit : strings.buttons.fullscreenEnter },
3405
- React.createElement(BsArrowsFullscreen, null)),
3406
- React.createElement("button", { onClick: takeScreenshot, style: {
3407
- width: '38px',
3408
- height: '38px',
3409
- borderRadius: '999px',
3410
- border: `1px solid ${iconBaseBg}`,
3411
- background: iconBaseBg,
3412
- color: iconBaseColor,
3413
- display: 'flex',
3414
- alignItems: 'center',
3415
- justifyContent: 'center',
3416
- cursor: 'pointer',
3417
- transition: 'all 0.2s'
3418
- }, title: strings.buttons.screenshot, "aria-label": strings.buttons.screenshot },
3419
- React.createElement(BsCamera, null)),
3420
- React.createElement("button", { onClick: () => setShowQuickTips(prev => !prev), style: {
3421
- width: '38px',
3422
- height: '38px',
3423
- borderRadius: '999px',
3424
- border: `1px solid ${showQuickTips ? activeTheme.accent : iconBaseBg}`,
3425
- background: showQuickTips ? activeTheme.accent : iconBaseBg,
3426
- color: iconBaseColor,
3385
+ background: activeTheme.panelBg,
3386
+ borderRadius: '16px',
3387
+ border: `1px solid ${activeTheme.panelBorder}`,
3388
+ flex: 1,
3389
+ minWidth: isMobile ? '100%' : '320px'
3390
+ } },
3391
+ React.createElement("span", { style: { fontSize: '10px', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#94a3b8' } }, strings.timeframeTitle),
3392
+ React.createElement("select", { value: timeframe, onChange: (e) => handleTimeframeChange(e.target.value), style: {
3393
+ background: 'rgba(15,23,42,0.8)',
3394
+ color: '#e2e8f0',
3395
+ border: '1px solid #1f2937',
3396
+ padding: '8px 32px 8px 12px',
3397
+ borderRadius: '12px',
3398
+ cursor: 'pointer',
3399
+ fontSize: '12px',
3400
+ fontWeight: 600,
3401
+ appearance: 'none',
3402
+ 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")`,
3403
+ backgroundPosition: 'right 10px center',
3404
+ backgroundRepeat: 'no-repeat',
3405
+ backgroundSize: '14px',
3406
+ minWidth: '140px'
3407
+ } },
3408
+ React.createElement("option", { value: "1m" }, "1m"),
3409
+ React.createElement("option", { value: "3m" }, "3m"),
3410
+ React.createElement("option", { value: "5m" }, "5m"),
3411
+ React.createElement("option", { value: "15m" }, "15m"),
3412
+ React.createElement("option", { value: "30m" }, "30m"),
3413
+ React.createElement("option", { value: "1h" }, "1h"),
3414
+ React.createElement("option", { value: "4h" }, "4h"),
3415
+ React.createElement("option", { value: "12h" }, "12h"),
3416
+ React.createElement("option", { value: "1D" }, "1D"),
3417
+ React.createElement("option", { value: "3D" }, "3D"),
3418
+ React.createElement("option", { value: "1W" }, "1W"),
3419
+ React.createElement("option", { value: "1M" }, "1M"))),
3420
+ React.createElement("div", { style: { marginLeft: isMobile ? 0 : 'auto', display: 'flex', flexWrap: isMobile ? 'wrap' : 'nowrap', gap: '8px', alignItems: 'center' } }, headerButtons))) : (React.createElement(React.Fragment, null,
3421
+ React.createElement("div", { style: {
3427
3422
  display: 'flex',
3428
3423
  alignItems: 'center',
3429
- justifyContent: 'center',
3430
- cursor: 'pointer',
3431
- transition: 'all 0.2s'
3432
- }, title: strings.buttons.help, "aria-label": strings.buttons.help },
3433
- React.createElement(BsQuestionCircle, null)))),
3434
- derivedStats && (React.createElement("div", { style: { padding: '16px 20px 0', background: activeTheme.panelBg, borderBottom: `1px solid ${activeTheme.panelBorder}` } },
3424
+ gap: '12px',
3425
+ padding: '10px 14px',
3426
+ background: activeTheme.panelBg,
3427
+ borderRadius: '16px',
3428
+ border: `1px solid ${activeTheme.panelBorder}`,
3429
+ overflowX: 'auto'
3430
+ } },
3431
+ React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap' } },
3432
+ React.createElement("span", { style: { fontSize: '10px', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#94a3b8' } }, strings.timeframeTitle),
3433
+ 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)),
3434
+ 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: {
3435
+ background: timeframe === tf ? activeTheme.accent : activeTheme.panelBg,
3436
+ color: timeframe === tf ? '#f8fafc' : activeTheme.textSecondary,
3437
+ border: `1px solid ${timeframe === tf ? activeTheme.accent : activeTheme.panelBorder}`,
3438
+ borderRadius: '10px',
3439
+ padding: '6px 12px',
3440
+ fontSize: '12px',
3441
+ fontWeight: 600,
3442
+ cursor: 'pointer',
3443
+ transition: 'all 0.2s',
3444
+ flex: '0 0 auto',
3445
+ whiteSpace: 'nowrap'
3446
+ } }, tf)))),
3447
+ React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '6px', fontSize: '12px', color: '#cbd5f5', whiteSpace: 'nowrap', flexShrink: 0 } },
3448
+ React.createElement(BsClockHistory, null),
3449
+ React.createElement("span", null,
3450
+ strings.axis.time,
3451
+ ": ",
3452
+ currentTimeLabel)),
3453
+ React.createElement("select", { value: timeframe, onChange: (e) => handleTimeframeChange(e.target.value), style: {
3454
+ background: 'rgba(15,23,42,0.8)',
3455
+ color: '#e2e8f0',
3456
+ border: '1px solid #1f2937',
3457
+ padding: '10px 36px 10px 12px',
3458
+ borderRadius: '12px',
3459
+ cursor: 'pointer',
3460
+ fontSize: '12px',
3461
+ fontWeight: 600,
3462
+ appearance: 'none',
3463
+ 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")`,
3464
+ backgroundPosition: 'right 10px center',
3465
+ backgroundRepeat: 'no-repeat',
3466
+ backgroundSize: '14px',
3467
+ minWidth: '120px',
3468
+ flexShrink: 0
3469
+ } },
3470
+ React.createElement("option", { value: "1m" }, "1m"),
3471
+ React.createElement("option", { value: "3m" }, "3m"),
3472
+ React.createElement("option", { value: "5m" }, "5m"),
3473
+ React.createElement("option", { value: "15m" }, "15m"),
3474
+ React.createElement("option", { value: "30m" }, "30m"),
3475
+ React.createElement("option", { value: "1h" }, "1h"),
3476
+ React.createElement("option", { value: "4h" }, "4h"),
3477
+ React.createElement("option", { value: "12h" }, "12h"),
3478
+ React.createElement("option", { value: "1D" }, "1D"),
3479
+ React.createElement("option", { value: "3D" }, "3D"),
3480
+ React.createElement("option", { value: "1W" }, "1W"),
3481
+ React.createElement("option", { value: "1M" }, "1M"))),
3482
+ React.createElement("div", { style: { marginLeft: 'auto', display: 'flex', flexWrap: 'wrap', gap: '8px', alignItems: 'center' } }, headerButtons)))),
3483
+ showStats && derivedStats && (React.createElement("div", { style: { padding: '16px 20px 0', background: activeTheme.panelBg, borderBottom: `1px solid ${activeTheme.panelBorder}` } },
3435
3484
  React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '12px' } },
3436
3485
  React.createElement("div", { style: { ...metricCardStyle, background: activeTheme.cardBg, border: `1px solid ${activeTheme.cardBorder}` } },
3437
3486
  React.createElement("span", { style: { ...metricLabelStyle, color: activeTheme.textSecondary } }, "Trading range"),
@@ -3459,7 +3508,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange }) => {
3459
3508
  "Latency ~",
3460
3509
  latencyMs,
3461
3510
  "ms"))))),
3462
- React.createElement(AnimatePresence, null, showQuickTips && (React.createElement(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, style: {
3511
+ React.createElement(AnimatePresence, null, showHeaderStats && showQuickTips && (React.createElement(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, style: {
3463
3512
  position: (isFullscreen ? 'fixed' : 'absolute'),
3464
3513
  top: isFullscreen ? 80 : 140,
3465
3514
  left: isFullscreen ? 80 : 140,
@@ -3791,7 +3840,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange }) => {
3791
3840
  React.createElement("span", null, field.label),
3792
3841
  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' } })))))),
3793
3842
  React.createElement("div", { style: { fontSize: '12px', color: activeTheme.textSecondary } }, strings.config.soon))),
3794
- 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 } },
3843
+ 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 } },
3795
3844
  React.createElement("span", null,
3796
3845
  "Latency ",
3797
3846
  latencyMs,
@@ -3800,7 +3849,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange }) => {
3800
3849
  "Session ",
3801
3850
  derivedStats?.session ?? 'Global'),
3802
3851
  React.createElement("span", null, "Feed Binance Composite"),
3803
- React.createElement("span", null, "Security AES-256"))));
3852
+ React.createElement("span", null, "Security AES-256")))));
3804
3853
  };
3805
3854
  var TradingViewChart_default = memo(TradingViewChart);
3806
3855