candleview 1.0.0

package/README.md

@@ -0,0 +1,397 @@
+<h1 align="center">
+   📊 CandleView
+</h1>
+<h4 align="center">
+Chart engine in the financial field.
+</h4>
+<p align="center">
+  <a href="https://https://github.com/0xhappyboy/candleview/LICENSE"><img src="https://img.shields.io/badge/License-AGPL3.0-d1d1f6.svg?style=flat&labelColor=1C2C2E&color=BEC5C9&logo=googledocs&label=license&logoColor=BEC5C9" alt="License"></a>
+</p>
+<p align="center">
+<a href="./README_zh-CN.md">简体中文</a> | <a href="./README.md">English</a>
+</p>
+
+# 🚀 Quick Start
+
+```typescript
+import { CandleView } from "./CandleView";
+
+const App = () => {
+  return (
+    <CandleView
+      title="BTC/USDT"
+      height={600}
+      theme="dark"
+      i18n="en"
+      showToolbar={true}
+      showLeftPanel={true}
+      showTopPanel={true}
+      timeframe="1d"
+      timezone="America/New_York"
+      data={klineData}
+    />
+  );
+};
+```
+
+# Preview
+
+## Theme
+
+<table>
+  <tr>
+    <td align="left">
+    <h4>Dark</h4>
+    </td>
+    <td align="left">
+    <h4>Light</h4>
+    </td>
+  </tr>
+  <tr>
+    <td align="center"><img src="./assets/preview_theme_dark.png" width="400"></td>
+    <td align="center"><img src="./assets/preview_theme_light.png" width="400"></td>
+  </tr>
+</table>
+
+## I18n
+
+<table>
+  <tr>
+    <td align="left">
+    <h4>En</h4>
+    </td>
+    <td align="left">
+    <h4>zh-CN</h4>
+    </td>
+  </tr>
+  <tr>
+    <td align="center"><img src="./assets/preview_i18n_en.png" width="400"></td>
+    <td align="center"><img src="./assets/preview_i18n_zh-CN.png" width="400"></td>
+  </tr>
+</table>
+
+# 🔧 Configuration Options
+
+## Props
+
+| Parameter                 | Type                                                                                                     | Default           | Description                              | Required |
+| ------------------------- | -------------------------------------------------------------------------------------------------------- | ----------------- | ---------------------------------------- | -------- |
+| `theme`                   | `'dark' \| 'light'`                                                                                      | `'dark'`          | Theme mode                               | No       |
+| `i18n`                    | `'en' \| 'zh-cn'`                                                                                        | `'zh-cn'`         | Language setting                         | No       |
+| `height`                  | `number \| string`                                                                                       | `500`             | Chart height (px or percentage)          | No       |
+| `title`                   | `string`                                                                                                 | `''`              | Chart title displayed on the chart       | Yes      |
+| `showToolbar`             | `boolean`                                                                                                | `true`            | Show top toolbar                         | No       |
+| `showLeftPanel`           | `boolean`                                                                                                | `true`            | Show left drawing tools panel            | No       |
+| `showTopPanel`            | `boolean`                                                                                                | `true`            | Show top settings panel                  | No       |
+| `showIndicators`          | `boolean`                                                                                                | `true`            | Show indicators panel                    | No       |
+| `timeframe`               | `string`                                                                                                 | `'1d'`            | Chart timeframe (e.g., '1m', '1h', '1d') | No       |
+| `timezone`                | `string`                                                                                                 | `'Asia/Shanghai'` | Timezone for data display                | No       |
+| `data`                    | `ICandleViewDataPoint[]`                                                                                 | `[]`              | K-line data array                        | No       |
+| `jsonFilePath`            | `string`                                                                                                 | `''`              | Path to JSON data file                   | No       |
+| `url`                     | `string`                                                                                                 | `''`              | URL to fetch data from                   | No       |
+| `markData`                | `IStaticMarkData[]`                                                                                      | `[]`              | Pre-drawn marks data                     | No       |
+| `handleScreenshotCapture` | `(imageData: { dataUrl: string; blob: Blob; width: number; height: number; timestamp: number }) => void` | `undefined`       | Callback for screenshot capture          | No       |
+
+## ⏰ Supported Timeframes
+
+### Second-based Timeframes
+
+| Value   | Display Name       | Description |
+| ------- | ------------------ | ----------- |
+| `'1S'`  | 1 秒 / 1 Second    | 1 second    |
+| `'5S'`  | 5 秒 / 5 Seconds   | 5 seconds   |
+| `'15S'` | 15 秒 / 15 Seconds | 15 seconds  |
+| `'30S'` | 30 秒 / 30 Seconds | 30 seconds  |
+
+### Minute-based Timeframes
+
+| Value   | Display Name       | Description |
+| ------- | ------------------ | ----------- |
+| `'1M'`  | 1 分 / 1 Minute    | 1 minute    |
+| `'3M'`  | 3 分 / 3 Minutes   | 3 minutes   |
+| `'5M'`  | 5 分 / 5 Minutes   | 5 minutes   |
+| `'15M'` | 15 分 / 15 Minutes | 15 minutes  |
+| `'30M'` | 30 分 / 30 Minutes | 30 minutes  |
+| `'45M'` | 45 分 / 45 Minutes | 45 minutes  |
+
+### Hour-based Timeframes
+
+| Value   | Display Name       | Description |
+| ------- | ------------------ | ----------- |
+| `'1H'`  | 1 小时 / 1 Hour    | 1 hour      |
+| `'2H'`  | 2 小时 / 2 Hours   | 2 hours     |
+| `'3H'`  | 3 小时 / 3 Hours   | 3 hours     |
+| `'4H'`  | 4 小时 / 4 Hours   | 4 hours     |
+| `'6H'`  | 6 小时 / 6 Hours   | 6 hours     |
+| `'8H'`  | 8 小时 / 8 Hours   | 8 hours     |
+| `'12H'` | 12 小时 / 12 Hours | 12 hours    |
+
+### Day-based Timeframes
+
+| Value  | Display Name  | Description |
+| ------ | ------------- | ----------- |
+| `'1D'` | 1 日 / 1 Day  | 1 day       |
+| `'3D'` | 3 日 / 3 Days | 3 days      |
+
+### Week-based Timeframes
+
+| Value  | Display Name   | Description |
+| ------ | -------------- | ----------- |
+| `'1W'` | 1 周 / 1 Week  | 1 week      |
+| `'2W'` | 2 周 / 2 Weeks | 2 weeks     |
+
+### Month-based Timeframes
+
+| Value    | Display Name    | Description |
+| -------- | --------------- | ----------- |
+| `'1MON'` | 1 月 / 1 Month  | 1 month     |
+| `'3MON'` | 3 月 / 3 Months | 3 months    |
+| `'6MON'` | 6 月 / 6 Months | 6 months    |
+
+## 🌍 Supported Timezones
+
+### Americas
+
+| Timezone ID             | Display Name         | UTC Offset  | Major Cities               |
+| ----------------------- | -------------------- | ----------- | -------------------------- |
+| `'America/New_York'`    | 纽约 / New York      | UTC-5/UTC-4 | New York, Washington DC    |
+| `'America/Chicago'`     | 芝加哥 / Chicago     | UTC-6/UTC-5 | Chicago, Dallas            |
+| `'America/Denver'`      | 丹佛 / Denver        | UTC-7/UTC-6 | Denver, Phoenix            |
+| `'America/Los_Angeles'` | 洛杉矶 / Los Angeles | UTC-8/UTC-7 | Los Angeles, San Francisco |
+| `'America/Toronto'`     | 多伦多 / Toronto     | UTC-5/UTC-4 | Toronto, Montreal          |
+
+### Europe
+
+| Timezone ID       | Display Name         | UTC Offset  | Major Cities         |
+| ----------------- | -------------------- | ----------- | -------------------- |
+| `'Europe/London'` | 伦敦 / London        | UTC+0/UTC+1 | London, Dublin       |
+| `'Europe/Paris'`  | 巴黎 / Paris         | UTC+1/UTC+2 | Paris, Berlin        |
+| `'Europe/Berlin'` | 法兰克福 / Frankfurt | UTC+1/UTC+2 | Frankfurt, Amsterdam |
+| `'Europe/Zurich'` | 苏黎世 / Zurich      | UTC+1/UTC+2 | Zurich, Vienna       |
+| `'Europe/Moscow'` | 莫斯科 / Moscow      | UTC+3       | Moscow, Istanbul     |
+
+### Asia
+
+| Timezone ID        | Display Name       | UTC Offset | Major Cities            |
+| ------------------ | ------------------ | ---------- | ----------------------- |
+| `'Asia/Dubai'`     | 迪拜 / Dubai       | UTC+4      | Dubai, Abu Dhabi        |
+| `'Asia/Karachi'`   | 卡拉奇 / Karachi   | UTC+5      | Karachi, Lahore         |
+| `'Asia/Kolkata'`   | 加尔各答 / Kolkata | UTC+5:30   | Kolkata, Mumbai         |
+| `'Asia/Shanghai'`  | 上海 / Shanghai    | UTC+8      | Shanghai, Beijing       |
+| `'Asia/Hong_Kong'` | 香港 / Hong Kong   | UTC+8      | Hong Kong, Macau        |
+| `'Asia/Singapore'` | 新加坡 / Singapore | UTC+8      | Singapore, Kuala Lumpur |
+| `'Asia/Tokyo'`     | 东京 / Tokyo       | UTC+9      | Tokyo, Seoul            |
+| `'Asia/Seoul'`     | 首尔 / Seoul       | UTC+9      | Seoul, Pyongyang        |
+
+### Pacific
+
+| Timezone ID          | Display Name      | UTC Offset    | Major Cities         |
+| -------------------- | ----------------- | ------------- | -------------------- |
+| `'Australia/Sydney'` | 悉尼 / Sydney     | UTC+10/UTC+11 | Sydney, Melbourne    |
+| `'Pacific/Auckland'` | 奥克兰 / Auckland | UTC+12/UTC+13 | Auckland, Wellington |
+
+### Global
+
+| Timezone ID | Display Name | UTC Offset | Description                |
+| ----------- | ------------ | ---------- | -------------------------- |
+| `'UTC'`     | UTC / UTC    | UTC+0      | Coordinated Universal Time |
+
+## 📄 Data structure
+
+```typescript
+interface ICandleViewDataPoint {
+  time: number; // timestamp in seconds
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+  volume?: number;
+}
+
+export interface IStaticMarkData {
+  time: number;
+  type: string;
+  data: {
+    direction: string;
+    text: string;
+    fontSize?: number;
+    textColor?: string;
+    backgroundColor?: string;
+    isCircular?: boolean;
+    padding?: number;
+  }[];
+}
+```
+
+# 🌟 Core Features
+
+## 📈 Supported Technical Indicators
+
+### Main Chart Indicators
+
+- Moving Average (MA)
+- Exponential Moving Average (EMA)
+- Bollinger Bands
+- Ichimoku Cloud
+- Donchian Channel
+- Envelope
+- Volume Weighted Average Price (VWAP)
+- Heat Map
+- Market Profile
+
+### Sub Chart Indicators
+
+- Relative Strength Index (RSI)
+- Moving Average Convergence Divergence (MACD)
+- Volume
+- Parabolic SAR
+- KDJ Indicator
+- Average True Range (ATR)
+- Stochastic Oscillator
+- Commodity Channel Index (CCI)
+- Bollinger Bands Width
+- Average Directional Index (ADX)
+- On Balance Volume (OBV)
+
+## 🎨 Supported Drawing Tools
+
+### Basic Tools
+
+- Pencil, Pen, Brush, Marker Pen, Eraser
+- Line Segment, Horizontal Line, Vertical Line
+- Arrow Line, Thick Arrow Line
+
+### Channel Tools
+
+- Parallel Channel
+- Linear Regression Channel
+- Equidistant Channel
+- Disjoint Channel
+
+### Fibonacci Tools
+
+- Fibonacci Retracement
+- Fibonacci Time Zones
+- Fibonacci Arc
+- Fibonacci Circle
+- Fibonacci Spiral
+- Fibonacci Fan
+- Fibonacci Channel
+- Fibonacci Price Extension
+- Fibonacci Time Extension
+
+### Gann Tools
+
+- Gann Fan
+- Gann Box
+- Gann Rectangle
+
+### Pattern Tools
+
+- Andrew Pitchfork
+- Enhanced Andrew Pitchfork
+- Schiff Pitchfork
+- XABCD Pattern
+- Head and Shoulders
+- ABCD Pattern
+- Triangle ABCD Pattern
+
+### Elliott Wave
+
+- Elliott Impulse Wave
+- Elliott Corrective Wave
+- Elliott Triangle
+- Elliott Double Combination
+- Elliott Triple Combination
+
+### Geometric Shapes
+
+- Rectangle, Circle, Ellipse, Triangle
+- Sector, Curve, Double Curve
+
+### Annotation Tools
+
+- Text Annotation, Price Note
+- Bubble Box, Pin, Signpost
+- Price Label, Flag Mark
+- Image Insertion
+
+### Range Tools
+
+- Time Range, Price Range
+- Time-Price Range
+- Heat Map
+
+### Trading Tools
+
+- Long Position, Short Position
+- Mock K-line
+
+## ⏰ Supported Timeframes
+
+### Second-based
+
+- 1s, 5s, 15s, 30s
+
+### Minute-based
+
+- 1m, 3m, 5m, 15m
+- 30m, 45m
+
+### Hour-based
+
+- 1h, 2h, 3h, 4h
+- 6h, 8h, 12h
+
+### Day-based
+
+- 1d, 3d
+
+### Week-based
+
+- 1w, 2w
+
+### Month-based
+
+- 1M, 3M, 6M
+
+## 🌍 Supported Timezones
+
+- New York (America/New_York)
+- Chicago (America/Chicago)
+- Denver (America/Denver)
+- Los Angeles (America/Los_Angeles)
+- Toronto (America/Toronto)
+- London (Europe/London)
+- Paris (Europe/Paris)
+- Frankfurt (Europe/Berlin)
+- Zurich (Europe/Zurich)
+- Moscow (Europe/Moscow)
+- Dubai (Asia/Dubai)
+- Karachi (Asia/Karachi)
+- Kolkata (Asia/Kolkata)
+- Shanghai (Asia/Shanghai)
+- Hong Kong (Asia/Hong_Kong)
+- Singapore (Asia/Singapore)
+- Tokyo (Asia/Tokyo)
+- Seoul (Asia/Seoul)
+- Sydney (Australia/Sydney)
+- Auckland (Pacific/Auckland)
+- UTC
+
+## 🎯 Supported Chart Types
+
+- Candlestick Chart
+- Hollow Candlestick Chart
+- Bar Chart (OHLC)
+- BaseLine Chart
+- Line Chart
+- Area Chart
+- Step Line Chart
+- Heikin Ashi Chart
+- Histogram Chart
+- Line Break Chart
+- Mountain Chart
+- Baseline Area Chart
+- High Low Chart
+- HLCArea Chart

package/dist/components/CandleView/Camera.d.ts

@@ -0,0 +1,16 @@
+import { CandleView } from "./CandleView";
+export interface CaptureResult {
+    success: boolean;
+    dataUrl?: string;
+    blob?: Blob;
+    error?: string;
+    width: number;
+    height: number;
+    timestamp: number;
+}
+export declare type CaptureCallback = (result: CaptureResult) => void;
+export declare function captureWithCanvas(candleView: CandleView, callback?: CaptureCallback): Promise<CaptureResult>;
+export declare function drawHTMLElementsToCanvas(candleView: CandleView, container: HTMLElement, ctx: CanvasRenderingContext2D, width: number, height: number): void;
+export declare function drawElementToCanvas(candleView: CandleView, element: HTMLElement, ctx: CanvasRenderingContext2D, container: HTMLElement): void;
+export declare function drawElementContent(candleView: CandleView, element: HTMLElement, ctx: CanvasRenderingContext2D, width: number, height: number): void;
+export declare function wrapText(candleView: CandleView, ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string[];

package/dist/components/CandleView/CandleView.d.ts

@@ -0,0 +1,149 @@
+import React from 'react';
+import { MainChartIndicatorInfo } from './Indicators/MainChart/MainChartIndicatorInfo';
+import { I18n } from './I18n';
+import { ICandleViewDataPoint, MainChartType, SubChartIndicatorType, TimeframeEnum, TimezoneEnum } from './types';
+import { IStaticMarkData } from './MarkManager/StaticMarkManager';
+import { ThemeConfig } from './Theme';
+export interface CandleViewProps {
+    theme?: 'dark' | 'light';
+    i18n?: 'en' | 'zh-cn';
+    showToolbar?: boolean;
+    showIndicators?: boolean;
+    height?: number | string;
+    title: string;
+    showTopPanel?: boolean;
+    showLeftPanel?: boolean;
+    markData?: IStaticMarkData[];
+    timeframe?: string;
+    timezone?: string;
+    data?: ICandleViewDataPoint[];
+    jsonFilePath?: string;
+    url?: string;
+    handleScreenshotCapture?: (imageData: {
+        dataUrl: string;
+        blob: Blob;
+        width: number;
+        height: number;
+        timestamp: number;
+    }) => void;
+}
+interface CandleViewState {
+    isIndicatorModalOpen: boolean;
+    isTimeframeModalOpen: boolean;
+    isTradeModalOpen: boolean;
+    isChartTypeModalOpen: boolean;
+    isSubChartModalOpen: boolean;
+    isMobileMenuOpen: boolean;
+    activeTool: string | null;
+    currentTheme: ThemeConfig;
+    currentI18N: I18n;
+    chartInitialized: boolean;
+    isDarkTheme: boolean;
+    selectedEmoji: string;
+    subChartPanelHeight: number;
+    isResizing: boolean;
+    showInfoLayer: boolean;
+    isTimezoneModalOpen: boolean;
+    currentTimezone: string;
+    isTimeFormatModalOpen: boolean;
+    isCloseTimeModalOpen: boolean;
+    isTradingDayModalOpen: boolean;
+    currentCloseTime: string;
+    currentTradingDayType: string;
+    activeTimeframe: TimeframeEnum;
+    timeframe?: TimeframeEnum;
+    timezone?: TimezoneEnum;
+    savedVisibleRange: {
+        from: number;
+        to: number;
+    } | null;
+    currentMainChartType: MainChartType;
+    selectedSubChartIndicators: SubChartIndicatorType[];
+    selectedMainChartIndicator: MainChartIndicatorInfo | null;
+    virtualDataBeforeCount: number;
+    virtualDataAfterCount: number;
+    displayData: ICandleViewDataPoint[];
+    isDataLoading: boolean;
+    dataLoadProgress: number;
+    loadError: string | null;
+}
+export declare class CandleView extends React.Component<CandleViewProps, CandleViewState> {
+    candleViewContainerRef: React.RefObject<HTMLDivElement>;
+    private chartRef;
+    private chartContainerRef;
+    private drawingLayerRef;
+    private chart;
+    private resizeObserver;
+    private realTimeInterval;
+    private currentSeries;
+    private chartManager;
+    private updateTimeout;
+    private viewportManager;
+    private chartEventManager;
+    private preparedData;
+    private originalData;
+    constructor(props: CandleViewProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: CandleViewProps, prevState: CandleViewState): void;
+    componentWillUnmount(): void;
+    private loadDataAsync;
+    private loadExternalData;
+    private loadInternalData;
+    initializeChart(): void;
+    handleTimeFormatClick: () => void;
+    handleCloseTimeClick: () => void;
+    handleTradingDayClick: () => void;
+    handleTimezoneClick: () => void;
+    handleCloseModals: () => void;
+    handleTimezoneSelect: (timezone: string) => void;
+    handleTimeframeSelect: (timeframe: string) => void;
+    private loadInternalDataAsync;
+    private initChart;
+    private refreshChart;
+    private refreshExternalData;
+    private refreshInternalData;
+    handleSelectedSubChartIndicator: (indicators: SubChartIndicatorType[]) => void;
+    handleRemoveSubChartIndicator: (indicatorId: string) => void;
+    handleCameraClick: () => void;
+    private fallbackToDownload;
+    serializeDrawings: () => string;
+    handleSubChartClick: () => void;
+    deserializeDrawings: (data: string) => void;
+    clearAllDrawings: () => void;
+    private viewportDataBufferSize;
+    private handleVisibleTimeRangeChange;
+    setupResizeObserver(): void;
+    updateChartTheme(): void;
+    getThemeConfig(theme: 'dark' | 'light'): ThemeConfig;
+    getI18nConfig(i18n: 'en' | 'zh-cn'): I18n;
+    handleEmojiSelect: (emoji: string) => void;
+    handleThemeToggle: () => void;
+    handleMobileMenuToggle: () => void;
+    handleClickOutside: (event: MouseEvent) => void;
+    handleToolSelect: (tool: string) => void;
+    handleChartTypeSelect: (mainChartType: MainChartType) => void;
+    handleCloseChartTypeModal: () => void;
+    handleCloseDrawing: () => void;
+    handleTimeframeClick: () => void;
+    handleChartTypeClick: () => void;
+    handleIndicatorClick: () => void;
+    handleTradeClick: () => void;
+    handleSelectedMainChartIndicator: (selectedMainChartIndicator: MainChartIndicatorInfo) => void;
+    handleMainChartIndicatorChange: (indicator: MainChartIndicatorInfo | null) => void;
+    handleCloseIndicatorModal: () => void;
+    handleCloseTimeframeModal: () => void;
+    handleCloseTradeModal: () => void;
+    handleTradeAction: (action: string) => void;
+    handleFullscreen: () => void;
+    handleCompareClick: () => void;
+    handleReplayClick: () => void;
+    stopRealTimeDataSimulation: () => void;
+    private handleContextMenu;
+    handleLeftArrowClick: () => void;
+    handleRightArrowClick: () => void;
+    handleRefreshClick: () => void;
+    handleZoomIn: () => void;
+    handleZoomOut: () => void;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/components/CandleView/ChartLayer/ChartEventManager.d.ts

@@ -0,0 +1,47 @@
+import { MouseEventParams } from "lightweight-charts";
+import { ChartLayer } from ".";
+export declare class ChartEventManager {
+    constructor();
+    registerClickEvent(chart: any, callback: (event: MouseEventParams) => void): void;
+    registerDblClickEvent(chart: any, callback: (event: MouseEventParams) => void): void;
+    registerCrosshairMoveEvent(chartLayer: ChartLayer): void;
+    private updateCurrentOHLCByCrosshair;
+    registerVisibleTimeRangeChangeEvent(chart: any, callback: (event: {
+        from: number;
+        to: number;
+    } | null) => void): void;
+    registerVisibleLogicalRangeChangeEvent(chart: any, callback: (event: {
+        from: number;
+        to: number;
+    } | null) => void): void;
+    handleKeyDown: (chartLayer: ChartLayer, event: KeyboardEvent) => void;
+    mouseUp(chartLayer: ChartLayer, event: MouseEvent): void;
+    mouseMove(chartLayer: ChartLayer, event: MouseEvent): void;
+    mouseDown(chartLayer: ChartLayer, event: MouseEvent): void;
+    documentMouseDown(chartLayer: ChartLayer, event: MouseEvent): void;
+    documentMouseMove(chartLayer: ChartLayer, event: MouseEvent): void;
+    documentMouseUp(chartLayer: ChartLayer, event: MouseEvent): void;
+    documentMouseWheel(chartLayer: ChartLayer, event: MouseEvent): void;
+    private getMousePosition;
+    private setMouseStyle;
+    private removeCircleCursor;
+    private removeDotCursor;
+    private handleLineMarkMouseDown;
+    private updateMAValues;
+    private updateEMAValues;
+    private updateBollingerBandsValues;
+    private updateIchimokuValues;
+    private updateDonchianChannelValues;
+    private updateEnvelopeValues;
+    private updateVWAPValues;
+    private coordinateToPrice;
+    private getChartPriceRange;
+    private isChartArea;
+    private isPriceArea;
+    private isTimeArea;
+    private handleDocumentMainChartPriceAreaMouseWheel;
+    private handleDocumentMainChartTimeAreaMouseWheel;
+    private handleDocumentMainChartAreaMouseWheel;
+    private handleDocumentMainChartMouseDownMove;
+    private handleGraphStyle;
+}

package/dist/components/CandleView/ChartLayer/ChartInfo.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import { MainChartIndicatorType, Point } from '../types';
+import { ThemeConfig } from '../Theme';
+import { MainChartIndicatorInfo, MainChartIndicatorParam } from '../Indicators/MainChart/MainChartIndicatorInfo';
+import { I18n } from '../I18n';
+export interface ChartInfoProps {
+    currentTheme: ThemeConfig;
+    title?: string;
+    currentOHLC: any;
+    mousePosition: Point | null;
+    showOHLC: boolean;
+    onToggleOHLC: () => void;
+    onOpenIndicatorsModal?: () => void;
+    indicators?: MainChartIndicatorInfo[];
+    onRemoveIndicator?: (type: MainChartIndicatorType) => void;
+    onToggleIndicator?: (type: MainChartIndicatorType) => void;
+    onEditIndicatorParams?: (id: string, newParams: MainChartIndicatorParam[]) => void;
+    visibleIndicatorTypes?: MainChartIndicatorType[];
+    onOpenIndicatorSettings?: (indicator: MainChartIndicatorInfo) => void;
+    maIndicatorValues?: {
+        [key: string]: number;
+    };
+    emaIndicatorValues?: {
+        [key: string]: number;
+    };
+    bollingerBandsValues?: {
+        [key: string]: number;
+    };
+    ichimokuValues?: {
+        [key: string]: number;
+    };
+    donchianChannelValues?: {
+        [key: string]: number;
+    };
+    envelopeValues?: {
+        [key: string]: number;
+    };
+    vwapValue?: number | null;
+    i18n: I18n;
+}
+interface ChartInfoState {
+    currentOHLC: any;
+    mousePosition: Point | null;
+    showOHLC: boolean;
+    visibleIndicatorsMap: Map<MainChartIndicatorType, boolean>;
+}
+export declare class ChartInfo extends React.Component<ChartInfoProps, ChartInfoState> {
+    constructor(props: ChartInfoProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: ChartInfoProps): void;
+    private handleRemoveIndicator;
+    private handleToggleIndicator;
+    private handleEditParams;
+    renderEyeIcon: (isVisible: boolean) => React.JSX.Element;
+    renderIndicatorWithValues: (item: MainChartIndicatorInfo) => React.JSX.Element | null;
+    private getActualIndicatorValue;
+    getFilteredIndicators: () => MainChartIndicatorInfo[];
+    renderNormalIndicatorParams: (item: MainChartIndicatorInfo) => React.JSX.Element | null;
+    render(): React.JSX.Element;
+}
+export {};