candleview 1.0.4 → 1.0.6

package/dist/index.d.ts

@@ -0,0 +1,758 @@
+import { default as default_2 } from 'react';
+import { JSX } from 'react/jsx-runtime';
+
+declare class CandleView extends default_2.Component<CandleViewProps, CandleViewState> {
+    candleViewContainerRef: default_2.RefObject<HTMLDivElement | null>;
+    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(): JSX.Element;
+}
+export { CandleView }
+export default CandleView;
+
+declare 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;
+}
+
+declare 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;
+}
+
+declare interface I18n {
+    Indicators: string;
+    mainChartIndicators: string;
+    subChartIndicators: string;
+    chartMaps: string;
+    searchIndicators: string;
+    searchChartTypes: string;
+    close: string;
+    theme: string;
+    light: string;
+    dark: string;
+    timeframe: string;
+    chartType: string;
+    toolBar: {
+        color: string;
+        lineSize: string;
+        lineStyle: string;
+        delete: string;
+        close: string;
+        fontSize: string;
+        bold: string;
+        italic: string;
+        selectColor: string;
+        colorPicker: string;
+        solid: string;
+        dashed: string;
+        dotted: string;
+        currentColor: string;
+    };
+    timeframeSections: {
+        second: string;
+        minute: string;
+        hour: string;
+        day: string;
+        week: string;
+        month: string;
+    };
+    chartTypes: {
+        candle: string;
+        line: string;
+        area: string;
+        baseline: string;
+        hollowCandle: string;
+        heikinAshi: string;
+        column: string;
+        lineWithMarkers: string;
+        stepLine: string;
+        bar: string;
+        histogram: string;
+        pointandfigure: string;
+        kagi: string;
+        linebreak: string;
+        mountain: string;
+        baselinearea: string;
+        highlow: string;
+        equivolume: string;
+        threelinebreak: string;
+        hlcarea: string;
+    };
+    toolbarButtons: {
+        hint: string;
+        replay: string;
+        fullScreen: string;
+        screenshot: string;
+        contrast: string;
+    };
+    indicators: {
+        ma: string;
+        ema: string;
+        bollinger: string;
+        ichimoku: string;
+        donchian: string;
+        envelope: string;
+        vwap: string;
+        rsi: string;
+        macd: string;
+        volume: string;
+        sar: string;
+        kdj: string;
+        atr: string;
+        stochastic: string;
+        cci: string;
+        bbwidth: string;
+        adx: string;
+        obv: string;
+    };
+    modal: {
+        parameterSettings: string;
+        parameterName: string;
+        parameterValue: string;
+        lineWidth: string;
+        lineColor: string;
+        addParameter: string;
+        deleteParameter: string;
+        keepAtLeastOne: string;
+        maximumParameters: string;
+        dragToMove: string;
+    };
+    tooltips: {
+        ctrlEnterToConfirm: string;
+        escToCancel: string;
+        clickToSelectColor: string;
+    };
+    emoji: {
+        categories: {
+            smileys: string;
+            people: string;
+            animals: string;
+            food: string;
+            activities: string;
+            travel: string;
+            objects: string;
+            symbols: string;
+            flags: string;
+        };
+        searchPlaceholder: string;
+        selectedEmoji: string;
+        clickToPlace: string;
+    };
+    leftPanel: {
+        cursorCrosshair: string;
+        cursorCrosshairDesc: string;
+        cursorCircle: string;
+        cursorCircleDesc: string;
+        cursorDot: string;
+        cursorDotDesc: string;
+        cursorArrow: string;
+        cursorArrowDesc: string;
+        cursorSparkle: string;
+        cursorSparkleDesc: string;
+        cursorEmoji: string;
+        cursorEmojiDesc: string;
+        pencil: string;
+        pencilDesc: string;
+        pen: string;
+        penDesc: string;
+        brush: string;
+        brushDesc: string;
+        markerPen: string;
+        markerPenDesc: string;
+        eraser: string;
+        eraserDesc: string;
+        lineTools: string;
+        arrowTools: string;
+        channelTools: string;
+        pitchforkTools: string;
+        penTools: string;
+        gannTools: string;
+        fibonacciTools: string;
+        technicalPatterns: string;
+        elliottWave: string;
+        regularShapes: string;
+        rangeTools: string;
+        positionTools: string;
+        simulationTools: string;
+        textTools: string;
+        contentTools: string;
+        lineSegment: string;
+        lineSegmentDesc: string;
+        horizontalLine: string;
+        horizontalLineDesc: string;
+        verticalLine: string;
+        verticalLineDesc: string;
+        arrowLine: string;
+        arrowLineDesc: string;
+        thickArrowLine: string;
+        thickArrowLineDesc: string;
+        parallelChannel: string;
+        parallelChannelDesc: string;
+        linearRegressionChannel: string;
+        linearRegressionChannelDesc: string;
+        equidistantChannel: string;
+        equidistantChannelDesc: string;
+        disjointChannel: string;
+        disjointChannelDesc: string;
+        andrewPitchfork: string;
+        andrewPitchforkDesc: string;
+        enhancedAndrewPitchfork: string;
+        enhancedAndrewPitchforkDesc: string;
+        schiffPitchfork: string;
+        schiffPitchforkDesc: string;
+        internalPitchfork: string;
+        internalPitchforkDesc: string;
+        wavePitchfork: string;
+        wavePitchforkDesc: string;
+        gannFan: string;
+        gannFanDesc: string;
+        gannBox: string;
+        gannBoxDesc: string;
+        gannRectangle: string;
+        gannRectangleDesc: string;
+        fibonacciTimeZones: string;
+        fibonacciTimeZonesDesc: string;
+        fibonacciRetracement: string;
+        fibonacciRetracementDesc: string;
+        fibonacciArc: string;
+        fibonacciArcDesc: string;
+        fibonacciCircle: string;
+        fibonacciCircleDesc: string;
+        fibonacciSpiral: string;
+        fibonacciSpiralDesc: string;
+        fibonacciWedge: string;
+        fibonacciWedgeDesc: string;
+        fibonacciFan: string;
+        fibonacciFanDesc: string;
+        fibonacciChannel: string;
+        fibonacciChannelDesc: string;
+        fibonacciExtensionPrice: string;
+        fibonacciExtensionPriceDesc: string;
+        fibonacciExtensionTime: string;
+        fibonacciExtensionTimeDesc: string;
+        xabcdPattern: string;
+        xabcdPatternDesc: string;
+        headAndShoulders: string;
+        headAndShouldersDesc: string;
+        abcdPattern: string;
+        abcdPatternDesc: string;
+        triangleAbcd: string;
+        triangleAbcdDesc: string;
+        elliottImpulse: string;
+        elliottImpulseDesc: string;
+        elliottCorrective: string;
+        elliottCorrectiveDesc: string;
+        elliottTriangle: string;
+        elliottTriangleDesc: string;
+        elliottDoubleCombo: string;
+        elliottDoubleComboDesc: string;
+        elliottTripleCombo: string;
+        elliottTripleComboDesc: string;
+        rectangle: string;
+        rectangleDesc: string;
+        circle: string;
+        circleDesc: string;
+        ellipse: string;
+        ellipseDesc: string;
+        triangle: string;
+        triangleDesc: string;
+        sector: string;
+        sectorDesc: string;
+        curve: string;
+        curveDesc: string;
+        doubleCurve: string;
+        doubleCurveDesc: string;
+        timeRange: string;
+        timeRangeDesc: string;
+        priceRange: string;
+        priceRangeDesc: string;
+        timePriceRange: string;
+        timePriceRangeDesc: string;
+        heatMap: string;
+        longPosition: string;
+        longPositionDesc: string;
+        shortPosition: string;
+        shortPositionDesc: string;
+        mockKline: string;
+        mockKlineDesc: string;
+        text: string;
+        textDesc: string;
+        priceNote: string;
+        priceNoteDesc: string;
+        bubbleBox: string;
+        bubbleBoxDesc: string;
+        pin: string;
+        pinDesc: string;
+        signpost: string;
+        signpostDesc: string;
+        priceLabel: string;
+        priceLabelDesc: string;
+        flagMark: string;
+        flagMarkDesc: string;
+        image: string;
+        imageDesc: string;
+        video: string;
+        videoDesc: string;
+        audio: string;
+        audioDesc: string;
+        idea: string;
+        ideaDesc: string;
+        mouseCursor: string;
+        drawingTools: string;
+        fibonacciToolsTitle: string;
+        projectInfoTools: string;
+        shapeTools: string;
+        brushTitle: string;
+        textMark: string;
+        emojiMark: string;
+        deleteTool: string;
+        setting: string;
+        selectedTool: string;
+        clickToStartDrawing: string;
+        selectEmoji: string;
+        selectedEmoji: string;
+        clickToPlaceEmoji: string;
+    };
+    systemSettings: {
+        title: string;
+        general: string;
+        appearance: string;
+        chart: string;
+        performance: string;
+        shortcuts: string;
+        saveSettings: string;
+        cancel: string;
+        confirm: string;
+        language: string;
+        timezone: string;
+        autoSave: string;
+        themeMode: string;
+        fontSize: string;
+        animations: string;
+        defaultTimeframe: string;
+        pricePrecision: string;
+        showGrid: string;
+        hardwareAcceleration: string;
+        dataPointLimit: string;
+        realtimeUpdates: string;
+        shortcutsTitle: string;
+        zoomIn: string;
+        zoomOut: string;
+        resetZoom: string;
+        saveChart: string;
+        undo: string;
+        redo: string;
+        setting: string;
+    };
+    settingsDescriptions: {
+        language: string;
+        timezone: string;
+        autoSave: string;
+        themeMode: string;
+        fontSize: string;
+        animations: string;
+        defaultTimeframe: string;
+        pricePrecision: string;
+        showGrid: string;
+        hardwareAcceleration: string;
+        dataPointLimit: string;
+        realtimeUpdates: string;
+    };
+    options: {
+        light: string;
+        dark: string;
+        auto: string;
+        small: string;
+        medium: string;
+        large: string;
+        zhCN: string;
+        enUS: string;
+        jaJP: string;
+        beijing: string;
+        newYork: string;
+        london: string;
+        chicago: string;
+        denver: string;
+        losAngeles: string;
+        toronto: string;
+        paris: string;
+        frankfurt: string;
+        zurich: string;
+        moscow: string;
+        dubai: string;
+        karachi: string;
+        kolkata: string;
+        shanghai: string;
+        hongKong: string;
+        singapore: string;
+        tokyo: string;
+        seoul: string;
+        sydney: string;
+        auckland: string;
+        utc: string;
+    };
+    timeframes: {
+        '1s': string;
+        '5s': string;
+        '15s': string;
+        '30s': string;
+        '1m': string;
+        '3m': string;
+        '5m': string;
+        '15m': string;
+        '30m': string;
+        '45m': string;
+        '1H': string;
+        '2H': string;
+        '3H': string;
+        '4H': string;
+        '6H': string;
+        '8H': string;
+        '12H': string;
+        '1D': string;
+        '3D': string;
+        '1W': string;
+        '2W': string;
+        '1M': string;
+        '3M': string;
+        '6M': string;
+    };
+    timezone: string;
+    timeFormat: string;
+    closeTime: string;
+    tradingDay: string;
+    searchTimezones: string;
+    timeFormatOptions: {
+        twentyFourHour: string;
+        twelveHour: string;
+    };
+    closeTimeOptions: {
+        custom: string;
+    };
+    tradingDayOptions: {
+        tradingSession: string;
+        calendarDay: string;
+        exchangeHours: string;
+    };
+}
+
+export declare interface ICandleViewDataPoint {
+    time: number;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+    volume: number;
+    isVirtual?: boolean;
+}
+
+declare interface IStaticMarkData {
+    time: number;
+    type: string;
+    data: {
+        direction: string;
+        text: string;
+        fontSize?: number;
+        textColor?: string;
+        backgroundColor?: string;
+        isCircular?: boolean;
+        padding?: number;
+    }[];
+}
+
+declare interface MainChartIndicatorInfo {
+    id: string;
+    type: MainChartIndicatorType | null;
+    params: MainChartIndicatorParam[] | null;
+    nonce: number | null;
+}
+
+declare interface MainChartIndicatorParam {
+    lineColor: string;
+    lineWidth: number;
+    paramName: string;
+    paramValue: number;
+}
+
+declare enum MainChartIndicatorType {
+    MA = "MA",
+    EMA = "EMA",
+    BOLLINGER = "BOLLINGER",
+    ICHIMOKU = "ICHIMOKU",
+    DONCHIAN = "DONCHIAN",
+    ENVELOPE = "ENVELOPE",
+    VWAP = "VWAP",
+    HEATMAP = "HEATMAP",
+    MARKETPROFILE = "MARKETPROFILE"
+}
+
+declare enum MainChartType {
+    Candle = "Candle",
+    HollowCandle = "HollowCandle",
+    Bar = "Bar",
+    BaseLine = "BaseLine",
+    Line = "Line",
+    Area = "Area",
+    StepLine = "StepLine",
+    Histogram = "Histogram",
+    HeikinAshi = "HeikinAshi",
+    LineBreak = "LineBreak",
+    Mountain = "Mountain",
+    BaselineArea = "BaselineArea",
+    HighLow = "HighLow",
+    HLCArea = "HLCArea"
+}
+
+declare enum SubChartIndicatorType {
+    RSI = "RSI",
+    MACD = "MACD",
+    VOLUME = "VOLUME",
+    SAR = "SAR",
+    KDJ = "KDJ",
+    ATR = "ATR",
+    STOCHASTIC = "STOCHASTIC",
+    CCI = "CCI",
+    BBWIDTH = "BBWIDTH",
+    ADX = "ADX",
+    OBV = "OBV"
+}
+
+declare interface ThemeConfig {
+    panel: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    modal: {
+        textColor: string;
+    };
+    layout: {
+        background: {
+            color: string;
+        };
+        textColor: string;
+        attributionLogo: boolean;
+    };
+    grid: {
+        vertLines: {
+            visible: boolean;
+            color?: string;
+        };
+        horzLines: {
+            visible: boolean;
+            color?: string;
+        };
+    };
+    chart: {
+        candleUpColor: string;
+        candleDownColor: string;
+        lineColor: string;
+        topColor: string;
+        bottomColor: string;
+        lineWidth: number;
+        upColor: string;
+        downColor: string;
+        background: string;
+        baseLineColor: string;
+        histogramColor: string;
+        stepLineColor: string;
+        areaTopColor: string;
+        areaBottomColor: string;
+        areaLineColor: string;
+        volumeColor: string;
+    };
+    toolbar: {
+        background: string;
+        border: string;
+        button: {
+            backgroundColor: string;
+            background: string;
+            hover: string;
+            active: string;
+            color: string;
+            activeTextColor: string;
+            boxShadow: string;
+        };
+    };
+}
+
+declare enum TimeframeEnum {
+    ONE_SECOND = "1s",
+    FIVE_SECONDS = "5s",
+    FIFTEEN_SECONDS = "15s",
+    THIRTY_SECONDS = "30s",
+    ONE_MINUTE = "1m",
+    THREE_MINUTES = "3m",
+    FIVE_MINUTES = "5m",
+    FIFTEEN_MINUTES = "15m",
+    THIRTY_MINUTES = "30m",
+    FORTY_FIVE_MINUTES = "45m",
+    ONE_HOUR = "1H",
+    TWO_HOURS = "2H",
+    THREE_HOURS = "3H",
+    FOUR_HOURS = "4H",
+    SIX_HOURS = "6H",
+    EIGHT_HOURS = "8H",
+    TWELVE_HOURS = "12H",
+    ONE_DAY = "1D",
+    THREE_DAYS = "3D",
+    ONE_WEEK = "1W",
+    TWO_WEEKS = "2W",
+    ONE_MONTH = "1M",
+    THREE_MONTHS = "3M",
+    SIX_MONTHS = "6M"
+}
+
+declare enum TimezoneEnum {
+    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/Frankfurt",
+    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 = "UTC"
+}
+
+export { }

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "candleview",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Chart engine in the financial field.",
   "keywords": [
     "Finance",
     "Financial Analysis",
     "Financial Charts",
-    "Finance Trading"
+    "Finance Trading",
+    "Trading"
   ],
   "author": "happyboy",
   "license": "AGPL-3.0",