react-klinecharts-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1390 @@
+import { registerExtensions } from './chunk-PUULIBFN.js';
+export { abcd_default as abcd, anyWaves_default as anyWaves, arrow_default as arrow, circle_default as circle, eightWaves_default as eightWaves, fibonacciCircle_default as fibonacciCircle, fibonacciExtension_default as fibonacciExtension, fibonacciSegment_default as fibonacciSegment, fibonacciSpeedResistanceFan_default as fibonacciSpeedResistanceFan, fibonacciSpiral_default as fibonacciSpiral, fiveWaves_default as fiveWaves, gannBox_default as gannBox, orderLine_default as orderLine, overlays, parallelogram_default as parallelogram, rect_default as rect, registerExtensions, threeWaves_default as threeWaves, triangle_default as triangle, xabcd_default as xabcd } from './chunk-PUULIBFN.js';
+import { createContext, useContext, useReducer, useRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { registerOverlay } from 'react-klinecharts';
+import { jsx } from 'react/jsx-runtime';
+
+var KlinechartsUIStateContext = createContext(null);
+var KlinechartsUIDispatchContext = createContext(null);
+function useKlinechartsUIDispatch() {
+  const ctx = useContext(KlinechartsUIDispatchContext);
+  if (!ctx) {
+    throw new Error(
+      "useKlinechartsUI must be used within a <KlinechartsUIProvider>"
+    );
+  }
+  return ctx;
+}
+function useKlinechartsUI() {
+  const state = useContext(KlinechartsUIStateContext);
+  const dispatch = useContext(KlinechartsUIDispatchContext);
+  if (!state || !dispatch) {
+    throw new Error(
+      "useKlinechartsUI must be used within a <KlinechartsUIProvider>"
+    );
+  }
+  return { state, ...dispatch };
+}
+
+// src/data/periods.ts
+var DEFAULT_PERIODS = [
+  { span: 1, type: "minute", label: "1m" },
+  { span: 5, type: "minute", label: "5m" },
+  { span: 15, type: "minute", label: "15m" },
+  { span: 1, type: "hour", label: "1H" },
+  { span: 2, type: "hour", label: "2H" },
+  { span: 4, type: "hour", label: "4H" },
+  { span: 1, type: "day", label: "D" },
+  { span: 1, type: "week", label: "W" },
+  { span: 1, type: "month", label: "M" },
+  { span: 1, type: "year", label: "Y" }
+];
+function reducer(state, action) {
+  switch (action.type) {
+    case "SET_CHART":
+      return { ...state, chart: action.chart };
+    case "SET_SYMBOL":
+      return { ...state, symbol: action.symbol };
+    case "SET_PERIOD":
+      return { ...state, period: action.period };
+    case "SET_THEME":
+      return { ...state, theme: action.theme };
+    case "SET_TIMEZONE":
+      return { ...state, timezone: action.timezone };
+    case "SET_LOADING":
+      return { ...state, isLoading: action.isLoading };
+    case "SET_MAIN_INDICATORS":
+      return { ...state, mainIndicators: action.indicators };
+    case "SET_SUB_INDICATORS":
+      return { ...state, subIndicators: action.indicators };
+    case "SET_STYLES":
+      return { ...state, styles: action.styles };
+    case "SET_LOCALE":
+      return { ...state, locale: action.locale };
+    case "SET_SCREENSHOT_URL":
+      return { ...state, screenshotUrl: action.url };
+    default:
+      return state;
+  }
+}
+function KlinechartsUIProvider({
+  datafeed,
+  defaultSymbol,
+  defaultPeriod,
+  defaultTheme = "light",
+  defaultTimezone = "Asia/Shanghai",
+  defaultMainIndicators = ["MA"],
+  defaultSubIndicators = ["VOL"],
+  defaultLocale = "en-US",
+  periods,
+  styles,
+  registerExtensions: shouldRegister = true,
+  overlays: extraOverlays,
+  children,
+  onStateChange,
+  onSymbolChange,
+  onPeriodChange,
+  onThemeChange,
+  onTimezoneChange,
+  onMainIndicatorsChange,
+  onSubIndicatorsChange,
+  onSettingsChange
+}) {
+  const [state, dispatch] = useReducer(
+    reducer,
+    {
+      datafeed,
+      defaultSymbol,
+      defaultPeriod,
+      defaultTheme,
+      defaultTimezone,
+      defaultMainIndicators,
+      defaultSubIndicators,
+      defaultLocale,
+      periods,
+      styles
+    },
+    (opts) => ({
+      chart: null,
+      datafeed: opts.datafeed,
+      symbol: opts.defaultSymbol ?? null,
+      period: opts.defaultPeriod ?? (opts.periods ?? DEFAULT_PERIODS)[0],
+      theme: opts.defaultTheme ?? "light",
+      timezone: opts.defaultTimezone ?? "Asia/Shanghai",
+      isLoading: false,
+      locale: opts.defaultLocale ?? "en-US",
+      periods: opts.periods ?? DEFAULT_PERIODS,
+      mainIndicators: opts.defaultMainIndicators ?? ["MA"],
+      subIndicators: (opts.defaultSubIndicators ?? ["VOL"]).reduce(
+        (acc, name) => ({ ...acc, [name]: "" }),
+        {}
+      ),
+      styles: opts.styles,
+      screenshotUrl: null
+    })
+  );
+  const fullscreenContainerRef = useRef(null);
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const callbacksRef = useRef({
+    onStateChange,
+    onSymbolChange,
+    onPeriodChange,
+    onThemeChange,
+    onTimezoneChange,
+    onMainIndicatorsChange,
+    onSubIndicatorsChange
+  });
+  callbacksRef.current = {
+    onStateChange,
+    onSymbolChange,
+    onPeriodChange,
+    onThemeChange,
+    onTimezoneChange,
+    onMainIndicatorsChange,
+    onSubIndicatorsChange
+  };
+  const enhancedDispatch = useCallback((action) => {
+    const prevState = stateRef.current;
+    const newState = reducer(prevState, action);
+    stateRef.current = newState;
+    dispatch(action);
+    const cbs = callbacksRef.current;
+    cbs.onStateChange?.(action, newState, prevState);
+    switch (action.type) {
+      case "SET_SYMBOL":
+        cbs.onSymbolChange?.(action.symbol);
+        break;
+      case "SET_PERIOD":
+        cbs.onPeriodChange?.(action.period);
+        break;
+      case "SET_THEME":
+        cbs.onThemeChange?.(action.theme);
+        break;
+      case "SET_TIMEZONE":
+        cbs.onTimezoneChange?.(action.timezone);
+        break;
+      case "SET_MAIN_INDICATORS":
+        cbs.onMainIndicatorsChange?.(action.indicators);
+        break;
+      case "SET_SUB_INDICATORS":
+        cbs.onSubIndicatorsChange?.(action.indicators);
+        break;
+    }
+  }, []);
+  const extraOverlaysRef = useRef(extraOverlays);
+  useEffect(() => {
+    if (shouldRegister) {
+      registerExtensions();
+    }
+    extraOverlaysRef.current?.forEach((overlay) => registerOverlay(overlay));
+  }, [shouldRegister]);
+  useEffect(() => {
+    if (state.chart && state.styles) {
+      state.chart.setStyles(state.styles);
+    }
+  }, [state.chart, state.styles]);
+  const dispatchValue = useMemo(
+    () => ({
+      dispatch: enhancedDispatch,
+      datafeed,
+      onSettingsChange,
+      fullscreenContainerRef
+    }),
+    [enhancedDispatch, datafeed, onSettingsChange]
+  );
+  return /* @__PURE__ */ jsx(KlinechartsUIStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(KlinechartsUIDispatchContext.Provider, { value: dispatchValue, children }) });
+}
+function useKlinechartsUITheme() {
+  const { state, dispatch } = useKlinechartsUI();
+  const setTheme = useCallback(
+    (theme) => {
+      state.chart?.setStyles(theme);
+      dispatch({ type: "SET_THEME", theme });
+    },
+    [state.chart, dispatch]
+  );
+  const toggleTheme = useCallback(() => {
+    const newTheme = state.theme === "light" ? "dark" : "light";
+    setTheme(newTheme);
+  }, [state.theme, setTheme]);
+  return {
+    theme: state.theme,
+    setTheme,
+    toggleTheme
+  };
+}
+
+// src/hooks/useKlinechartsUILoading.ts
+function useKlinechartsUILoading() {
+  const { state } = useKlinechartsUI();
+  return { isLoading: state.isLoading };
+}
+function usePeriods() {
+  const { state, dispatch } = useKlinechartsUI();
+  const setPeriod = useCallback(
+    (period) => {
+      dispatch({ type: "SET_PERIOD", period });
+    },
+    [dispatch]
+  );
+  return {
+    periods: state.periods,
+    activePeriod: state.period,
+    setPeriod
+  };
+}
+
+// src/data/timezones.ts
+var TIMEZONES = [
+  { key: "Etc/UTC", localeKey: "utc" },
+  { key: "Pacific/Honolulu", localeKey: "honolulu" },
+  { key: "America/Juneau", localeKey: "juneau" },
+  { key: "America/Los_Angeles", localeKey: "los_angeles" },
+  { key: "America/Chicago", localeKey: "chicago" },
+  { key: "America/Toronto", localeKey: "toronto" },
+  { key: "America/Sao_Paulo", localeKey: "sao_paulo" },
+  { key: "Europe/London", localeKey: "london" },
+  { key: "Europe/Berlin", localeKey: "berlin" },
+  { key: "Asia/Bahrain", localeKey: "bahrain" },
+  { key: "Asia/Dubai", localeKey: "dubai" },
+  { key: "Asia/Ashkhabad", localeKey: "ashkhabad" },
+  { key: "Asia/Almaty", localeKey: "almaty" },
+  { key: "Asia/Bangkok", localeKey: "bangkok" },
+  { key: "Asia/Shanghai", localeKey: "shanghai" },
+  { key: "Asia/Tokyo", localeKey: "tokyo" },
+  { key: "Australia/Sydney", localeKey: "sydney" },
+  { key: "Pacific/Norfolk", localeKey: "norfolk" }
+];
+
+// src/hooks/useTimezone.ts
+function useTimezone() {
+  const { state, dispatch } = useKlinechartsUI();
+  const timezones = useMemo(
+    () => TIMEZONES.map((tz) => ({
+      key: tz.key,
+      localeKey: tz.localeKey
+    })),
+    []
+  );
+  const setTimezone = useCallback(
+    (timezone) => {
+      state.chart?.setTimezone(timezone);
+      dispatch({ type: "SET_TIMEZONE", timezone });
+    },
+    [state.chart, dispatch]
+  );
+  return {
+    timezones,
+    activeTimezone: state.timezone,
+    setTimezone
+  };
+}
+function useSymbolSearch(debounceMs = 300) {
+  const { state, dispatch, datafeed } = useKlinechartsUI();
+  const [query, setQueryState] = useState("");
+  const [results, setResults] = useState([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const timerRef = useRef(null);
+  const abortRef = useRef(null);
+  const setQuery = useCallback(
+    (q) => {
+      setQueryState(q);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      abortRef.current?.abort();
+      abortRef.current = null;
+      if (!q.trim()) {
+        setResults([]);
+        setIsSearching(false);
+        return;
+      }
+      setIsSearching(true);
+      timerRef.current = setTimeout(async () => {
+        const controller = new AbortController();
+        abortRef.current = controller;
+        try {
+          const data = await datafeed.searchSymbols(q, controller.signal);
+          if (!controller.signal.aborted) {
+            setResults(data);
+          }
+        } catch {
+          if (!controller.signal.aborted) {
+            setResults([]);
+          }
+        } finally {
+          if (!controller.signal.aborted) {
+            setIsSearching(false);
+          }
+        }
+      }, debounceMs);
+    },
+    [datafeed, debounceMs]
+  );
+  const selectSymbol = useCallback(
+    (symbol) => {
+      dispatch({ type: "SET_SYMBOL", symbol });
+      setQueryState("");
+      setResults([]);
+    },
+    [dispatch]
+  );
+  const clearResults = useCallback(() => {
+    setQueryState("");
+    setResults([]);
+    setIsSearching(false);
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      abortRef.current?.abort();
+    };
+  }, []);
+  return {
+    query,
+    results,
+    isSearching,
+    activeSymbol: state.symbol,
+    setQuery,
+    selectSymbol,
+    clearResults
+  };
+}
+
+// src/data/indicators.ts
+var MAIN_INDICATORS = [
+  "MA",
+  "EMA",
+  "SMA",
+  "BOLL",
+  "SAR",
+  "BBI"
+];
+var SUB_INDICATORS = [
+  "MA",
+  "EMA",
+  "VOL",
+  "MACD",
+  "BOLL",
+  "KDJ",
+  "RSI",
+  "BIAS",
+  "BRAR",
+  "CCI",
+  "DMI",
+  "CR",
+  "PSY",
+  "DMA",
+  "TRIX",
+  "OBV",
+  "VR",
+  "WR",
+  "MTM",
+  "EMV",
+  "SAR",
+  "SMA",
+  "ROC",
+  "PVT",
+  "BBI",
+  "AO"
+];
+var INDICATOR_PARAMS = {
+  SMA: {
+    name: "SMA",
+    localeKey: "sma",
+    params: [
+      { label: "params_1", defaultValue: 12 },
+      { label: "params_2", defaultValue: 2 }
+    ]
+  },
+  BOLL: {
+    name: "BOLL",
+    localeKey: "boll",
+    params: [
+      { label: "period", defaultValue: 20 },
+      { label: "standard_deviation", defaultValue: 2 }
+    ]
+  },
+  SAR: {
+    name: "SAR",
+    localeKey: "sar",
+    params: [
+      { label: "params_1", defaultValue: 2 },
+      { label: "params_2", defaultValue: 2 },
+      { label: "params_3", defaultValue: 20 }
+    ]
+  },
+  BBI: {
+    name: "BBI",
+    localeKey: "bbi",
+    params: [
+      { label: "params_1", defaultValue: 3 },
+      { label: "params_2", defaultValue: 6 },
+      { label: "params_3", defaultValue: 12 },
+      { label: "params_4", defaultValue: 24 }
+    ]
+  },
+  MACD: {
+    name: "MACD",
+    localeKey: "macd",
+    params: [
+      { label: "params_1", defaultValue: 12 },
+      { label: "params_2", defaultValue: 26 },
+      { label: "params_3", defaultValue: 9 }
+    ]
+  },
+  KDJ: {
+    name: "KDJ",
+    localeKey: "kdj",
+    params: [
+      { label: "params_1", defaultValue: 9 },
+      { label: "params_2", defaultValue: 3 },
+      { label: "params_3", defaultValue: 3 }
+    ]
+  },
+  BRAR: {
+    name: "BRAR",
+    localeKey: "brar",
+    params: [{ label: "params_1", defaultValue: 26 }]
+  },
+  CCI: {
+    name: "CCI",
+    localeKey: "cci",
+    params: [{ label: "params_1", defaultValue: 20 }]
+  },
+  DMI: {
+    name: "DMI",
+    localeKey: "dmi",
+    params: [
+      { label: "params_1", defaultValue: 14 },
+      { label: "params_2", defaultValue: 6 }
+    ]
+  },
+  CR: {
+    name: "CR",
+    localeKey: "cr",
+    params: [
+      { label: "params_1", defaultValue: 26 },
+      { label: "params_2", defaultValue: 10 },
+      { label: "params_3", defaultValue: 20 },
+      { label: "params_4", defaultValue: 40 },
+      { label: "params_5", defaultValue: 60 }
+    ]
+  },
+  PSY: {
+    name: "PSY",
+    localeKey: "psy",
+    params: [
+      { label: "params_1", defaultValue: 12 },
+      { label: "params_2", defaultValue: 6 }
+    ]
+  },
+  DMA: {
+    name: "DMA",
+    localeKey: "dma",
+    params: [
+      { label: "params_1", defaultValue: 10 },
+      { label: "params_2", defaultValue: 50 },
+      { label: "params_3", defaultValue: 10 }
+    ]
+  },
+  TRIX: {
+    name: "TRIX",
+    localeKey: "trix",
+    params: [
+      { label: "params_1", defaultValue: 12 },
+      { label: "params_2", defaultValue: 9 }
+    ]
+  },
+  OBV: {
+    name: "OBV",
+    localeKey: "obv",
+    params: [{ label: "params_1", defaultValue: 30 }]
+  },
+  VR: {
+    name: "VR",
+    localeKey: "vr",
+    params: [
+      { label: "params_1", defaultValue: 26 },
+      { label: "params_2", defaultValue: 6 }
+    ]
+  },
+  MTM: {
+    name: "MTM",
+    localeKey: "mtm",
+    params: [
+      { label: "params_1", defaultValue: 12 },
+      { label: "params_2", defaultValue: 6 }
+    ]
+  },
+  EMV: {
+    name: "EMV",
+    localeKey: "emv",
+    params: [
+      { label: "params_1", defaultValue: 14 },
+      { label: "params_2", defaultValue: 9 }
+    ]
+  },
+  ROC: {
+    name: "ROC",
+    localeKey: "roc",
+    params: [
+      { label: "params_1", defaultValue: 12 },
+      { label: "params_2", defaultValue: 6 }
+    ]
+  },
+  PVT: {
+    name: "PVT",
+    localeKey: "pvt",
+    params: []
+  },
+  AO: {
+    name: "AO",
+    localeKey: "ao",
+    params: [
+      { label: "params_1", defaultValue: 5 },
+      { label: "params_2", defaultValue: 34 }
+    ]
+  }
+};
+
+// src/hooks/useIndicators.ts
+function useIndicators() {
+  const { state, dispatch } = useKlinechartsUI();
+  const mainIndicators = useMemo(() => {
+    const activeNames = state.mainIndicators;
+    const inactive = MAIN_INDICATORS.filter((n) => !activeNames.includes(n));
+    return [
+      ...activeNames.map((name) => ({ name, isActive: true })),
+      ...inactive.map((name) => ({ name, isActive: false }))
+    ];
+  }, [state.mainIndicators]);
+  const subIndicators = useMemo(() => {
+    const activeNames = Object.keys(state.subIndicators);
+    const inactive = SUB_INDICATORS.filter((n) => !activeNames.includes(n));
+    return [
+      ...activeNames.map((name) => ({ name, isActive: true })),
+      ...inactive.map((name) => ({ name, isActive: false }))
+    ];
+  }, [state.subIndicators]);
+  const addMainIndicator = useCallback(
+    (name) => {
+      if (state.mainIndicators.includes(name)) return;
+      state.chart?.createIndicator(
+        { name, id: `main_${name}`, paneId: "candle_pane" },
+        true,
+        { id: "candle_pane" }
+      );
+      const newIndicators = [...state.mainIndicators, name];
+      dispatch({ type: "SET_MAIN_INDICATORS", indicators: newIndicators });
+    },
+    [state.chart, state.mainIndicators, dispatch]
+  );
+  const removeMainIndicator = useCallback(
+    (name) => {
+      state.chart?.removeIndicator({ id: `main_${name}` });
+      const newIndicators = state.mainIndicators.filter((n) => n !== name);
+      dispatch({ type: "SET_MAIN_INDICATORS", indicators: newIndicators });
+    },
+    [state.chart, state.mainIndicators, dispatch]
+  );
+  const addSubIndicator = useCallback(
+    (name) => {
+      if (name in state.subIndicators) return;
+      const id = `sub_${name}`;
+      state.chart?.createIndicator({ name, id });
+      const paneId = state.chart?.getIndicators({ id })?.[0]?.paneId ?? "";
+      const newIndicators = { ...state.subIndicators, [name]: paneId };
+      dispatch({ type: "SET_SUB_INDICATORS", indicators: newIndicators });
+    },
+    [state.chart, state.subIndicators, dispatch]
+  );
+  const removeSubIndicator = useCallback(
+    (name) => {
+      state.chart?.removeIndicator({ id: `sub_${name}` });
+      const newIndicators = { ...state.subIndicators };
+      delete newIndicators[name];
+      dispatch({ type: "SET_SUB_INDICATORS", indicators: newIndicators });
+    },
+    [state.chart, state.subIndicators, dispatch]
+  );
+  const toggleMainIndicator = useCallback(
+    (name) => {
+      if (state.mainIndicators.includes(name)) {
+        removeMainIndicator(name);
+      } else {
+        addMainIndicator(name);
+      }
+    },
+    [state.mainIndicators, addMainIndicator, removeMainIndicator]
+  );
+  const toggleSubIndicator = useCallback(
+    (name) => {
+      if (name in state.subIndicators) {
+        removeSubIndicator(name);
+      } else {
+        addSubIndicator(name);
+      }
+    },
+    [state.subIndicators, addSubIndicator, removeSubIndicator]
+  );
+  const setIndicatorVisible = useCallback(
+    (name, isMain, visible) => {
+      const id = isMain ? `main_${name}` : `sub_${name}`;
+      state.chart?.overrideIndicator({ name, id, visible });
+    },
+    [state.chart]
+  );
+  const updateIndicatorParams = useCallback(
+    (name, paneId, params) => {
+      state.chart?.overrideIndicator({ name, paneId, calcParams: params });
+    },
+    [state.chart]
+  );
+  const getIndicatorParams = useCallback((name) => {
+    const config = INDICATOR_PARAMS[name];
+    if (!config) return [];
+    return config.params.map((p) => ({
+      label: p.label,
+      defaultValue: p.defaultValue
+    }));
+  }, []);
+  const moveToMain = useCallback(
+    (name) => {
+      if (!state.chart) return;
+      state.chart.removeIndicator({ id: `sub_${name}` });
+      state.chart.createIndicator(
+        { name, id: `main_${name}`, paneId: "candle_pane" },
+        true,
+        { id: "candle_pane" }
+      );
+      const newSub = { ...state.subIndicators };
+      delete newSub[name];
+      dispatch({ type: "SET_SUB_INDICATORS", indicators: newSub });
+      dispatch({
+        type: "SET_MAIN_INDICATORS",
+        indicators: [...state.mainIndicators, name]
+      });
+    },
+    [state.chart, state.mainIndicators, state.subIndicators, dispatch]
+  );
+  const moveToSub = useCallback(
+    (name) => {
+      if (!state.chart) return;
+      state.chart.removeIndicator({ id: `main_${name}` });
+      const subId = `sub_${name}`;
+      state.chart.createIndicator({ name, id: subId });
+      const paneId = state.chart.getIndicators({ id: subId })?.[0]?.paneId ?? "";
+      const newMain = state.mainIndicators.filter((n) => n !== name);
+      dispatch({ type: "SET_MAIN_INDICATORS", indicators: newMain });
+      dispatch({
+        type: "SET_SUB_INDICATORS",
+        indicators: { ...state.subIndicators, [name]: paneId }
+      });
+    },
+    [state.chart, state.mainIndicators, state.subIndicators, dispatch]
+  );
+  const isMainIndicatorActive = useCallback(
+    (name) => state.mainIndicators.includes(name),
+    [state.mainIndicators]
+  );
+  const isSubIndicatorActive = useCallback(
+    (name) => name in state.subIndicators,
+    [state.subIndicators]
+  );
+  return {
+    mainIndicators,
+    subIndicators,
+    activeMainIndicators: state.mainIndicators,
+    activeSubIndicators: state.subIndicators,
+    availableMainIndicators: MAIN_INDICATORS,
+    availableSubIndicators: SUB_INDICATORS,
+    addMainIndicator,
+    removeMainIndicator,
+    addSubIndicator,
+    removeSubIndicator,
+    toggleMainIndicator,
+    toggleSubIndicator,
+    moveToMain,
+    moveToSub,
+    setIndicatorVisible,
+    updateIndicatorParams,
+    getIndicatorParams,
+    isMainIndicatorActive,
+    isSubIndicatorActive
+  };
+}
+
+// src/data/drawings.ts
+var DRAWING_CATEGORIES = [
+  {
+    key: "singleLine",
+    tools: [
+      { name: "horizontalStraightLine", localeKey: "horizontal_straight_line" },
+      { name: "horizontalRayLine", localeKey: "horizontal_ray_line" },
+      { name: "horizontalSegment", localeKey: "horizontal_segment" },
+      { name: "verticalStraightLine", localeKey: "vertical_straight_line" },
+      { name: "verticalRayLine", localeKey: "vertical_ray_line" },
+      { name: "verticalSegment", localeKey: "vertical_segment" },
+      { name: "straightLine", localeKey: "straight_line" },
+      { name: "rayLine", localeKey: "ray_line" },
+      { name: "segment", localeKey: "segment" },
+      { name: "arrow", localeKey: "arrow" },
+      { name: "priceLine", localeKey: "price_line" }
+    ]
+  },
+  {
+    key: "moreLine",
+    tools: [
+      { name: "priceChannelLine", localeKey: "price_channel_line" },
+      { name: "parallelStraightLine", localeKey: "parallel_straight_line" }
+    ]
+  },
+  {
+    key: "polygon",
+    tools: [
+      { name: "circle", localeKey: "circle" },
+      { name: "rect", localeKey: "rect" },
+      { name: "parallelogram", localeKey: "parallelogram" },
+      { name: "triangle", localeKey: "triangle" }
+    ]
+  },
+  {
+    key: "fibonacci",
+    tools: [
+      { name: "fibonacciLine", localeKey: "fibonacci_line" },
+      { name: "fibonacciSegment", localeKey: "fibonacci_segment" },
+      { name: "fibonacciCircle", localeKey: "fibonacci_circle" },
+      { name: "fibonacciSpiral", localeKey: "fibonacci_spiral" },
+      {
+        name: "fibonacciSpeedResistanceFan",
+        localeKey: "fibonacci_speed_resistance_fan"
+      },
+      { name: "fibonacciExtension", localeKey: "fibonacci_extension" },
+      { name: "gannBox", localeKey: "gann_box" }
+    ]
+  },
+  {
+    key: "wave",
+    tools: [
+      { name: "xabcd", localeKey: "xabcd" },
+      { name: "abcd", localeKey: "abcd" },
+      { name: "threeWaves", localeKey: "three_waves" },
+      { name: "fiveWaves", localeKey: "five_waves" },
+      { name: "eightWaves", localeKey: "eight_waves" },
+      { name: "anyWaves", localeKey: "any_waves" }
+    ]
+  }
+];
+
+// src/hooks/useDrawingTools.ts
+var DRAWING_GROUP_ID = "drawing_tools";
+function useDrawingTools() {
+  const { state } = useKlinechartsUI();
+  const [activeTool, setActiveTool] = useState(null);
+  const [magnetMode, setMagnetModeState] = useState("normal");
+  const [isLocked, setIsLocked] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
+  const categories = useMemo(
+    () => DRAWING_CATEGORIES.map((cat) => ({
+      key: cat.key,
+      tools: cat.tools.map((tool) => ({
+        name: tool.name,
+        localeKey: tool.localeKey
+      }))
+    })),
+    []
+  );
+  const selectTool = useCallback(
+    (name) => {
+      setActiveTool(name);
+      state.chart?.createOverlay({
+        name,
+        groupId: DRAWING_GROUP_ID,
+        lock: isLocked,
+        visible: isVisible,
+        mode: magnetMode === "strong" ? "strong_magnet" : magnetMode === "weak" ? "weak_magnet" : "normal"
+      });
+    },
+    [state.chart, isLocked, isVisible, magnetMode]
+  );
+  const clearActiveTool = useCallback(() => {
+    setActiveTool(null);
+  }, []);
+  const setMagnetMode = useCallback(
+    (mode) => {
+      setMagnetModeState(mode);
+      const overlays2 = state.chart?.getOverlays({ groupId: DRAWING_GROUP_ID });
+      if (overlays2) {
+        const overlayMode = mode === "strong" ? "strong_magnet" : mode === "weak" ? "weak_magnet" : "normal";
+        overlays2.forEach((overlay) => {
+          state.chart?.overrideOverlay({
+            id: overlay.id,
+            mode: overlayMode
+          });
+        });
+      }
+    },
+    [state.chart]
+  );
+  const toggleLock = useCallback(() => {
+    const newLocked = !isLocked;
+    setIsLocked(newLocked);
+    const overlays2 = state.chart?.getOverlays({ groupId: DRAWING_GROUP_ID });
+    if (overlays2) {
+      overlays2.forEach((overlay) => {
+        state.chart?.overrideOverlay({
+          id: overlay.id,
+          lock: newLocked
+        });
+      });
+    }
+  }, [state.chart, isLocked]);
+  const toggleVisibility = useCallback(() => {
+    const newVisible = !isVisible;
+    setIsVisible(newVisible);
+    const overlays2 = state.chart?.getOverlays({ groupId: DRAWING_GROUP_ID });
+    if (overlays2) {
+      overlays2.forEach((overlay) => {
+        state.chart?.overrideOverlay({
+          id: overlay.id,
+          visible: newVisible
+        });
+      });
+    }
+  }, [state.chart, isVisible]);
+  const removeAllDrawings = useCallback(() => {
+    state.chart?.removeOverlay({ groupId: DRAWING_GROUP_ID });
+    setActiveTool(null);
+  }, [state.chart]);
+  return {
+    categories,
+    activeTool,
+    magnetMode,
+    isLocked,
+    isVisible,
+    selectTool,
+    clearActiveTool,
+    setMagnetMode,
+    toggleLock,
+    toggleVisibility,
+    removeAllDrawings
+  };
+}
+
+// src/data/candle-types.ts
+var CANDLE_TYPES = [
+  { key: "candle_solid", localeKey: "candle_solid" },
+  { key: "candle_stroke", localeKey: "candle_stroke" },
+  { key: "candle_up_stroke", localeKey: "candle_up_stroke" },
+  { key: "candle_down_stroke", localeKey: "candle_down_stroke" },
+  { key: "ohlc", localeKey: "ohlc" },
+  { key: "area", localeKey: "area" }
+];
+var PRICE_AXIS_TYPES = ["normal", "percentage", "logarithm"];
+var YAXIS_POSITIONS = ["left", "right"];
+var COMPARE_RULES = ["current_open", "prev_close"];
+var TOOLTIP_SHOW_RULES = ["always", "follow_cross", "none"];
+
+// src/hooks/useKlinechartsUISettings.ts
+var defaultSettings = {
+  candleType: "candle_solid",
+  candleUpColor: "#2DC08E",
+  candleDownColor: "#F92855",
+  compareRule: "current_open",
+  showLastPrice: true,
+  showLastPriceLine: true,
+  showHighPrice: true,
+  showLowPrice: true,
+  showIndicatorLastValue: true,
+  priceAxisType: "normal",
+  yAxisPosition: "right",
+  yAxisInside: false,
+  reverseCoordinate: false,
+  showTimeAxis: true,
+  showGrid: true,
+  showCrosshair: true,
+  showCandleTooltip: true,
+  showIndicatorTooltip: true,
+  tooltipShowRule: "always"
+};
+function useKlinechartsUISettings() {
+  const { state, onSettingsChange } = useKlinechartsUI();
+  const [settings, setSettings] = useState(defaultSettings);
+  const isInitialMount = useRef(true);
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    onSettingsChange?.({ ...settings });
+  }, [settings, onSettingsChange]);
+  const candleTypes = useMemo(
+    () => CANDLE_TYPES.map((ct) => ({
+      key: ct.key,
+      localeKey: ct.localeKey
+    })),
+    []
+  );
+  const priceAxisTypes = useMemo(
+    () => PRICE_AXIS_TYPES.map((pat) => ({ key: pat, localeKey: pat })),
+    []
+  );
+  const yAxisPositions = useMemo(
+    () => YAXIS_POSITIONS.map((p) => ({ key: p, localeKey: p })),
+    []
+  );
+  const compareRules = useMemo(
+    () => COMPARE_RULES.map((r) => ({ key: r, localeKey: r })),
+    []
+  );
+  const tooltipShowRules = useMemo(
+    () => TOOLTIP_SHOW_RULES.map((r) => ({ key: r, localeKey: r })),
+    []
+  );
+  const hasAppliedInitial = useRef(false);
+  useEffect(() => {
+    if (!state.chart || hasAppliedInitial.current) return;
+    hasAppliedInitial.current = true;
+    const needsPaneOptions = settings.reverseCoordinate || settings.priceAxisType !== "normal" || settings.yAxisPosition !== "right" || settings.yAxisInside;
+    if (needsPaneOptions) {
+      state.chart.setPaneOptions({
+        id: "candle_pane",
+        axis: {
+          ...settings.priceAxisType !== "normal" && { name: settings.priceAxisType },
+          ...settings.reverseCoordinate && { reverse: true },
+          ...settings.yAxisPosition !== "right" && { position: settings.yAxisPosition },
+          ...settings.yAxisInside && { inside: true }
+        }
+      });
+    }
+    if (settings.showIndicatorLastValue) {
+      state.chart.setStyles({
+        indicator: { lastValueMark: { show: true } }
+      });
+    }
+  }, [state.chart]);
+  const applyStyle = useCallback(
+    (path, value) => {
+      const parts = path.split(".");
+      const styleObj = {};
+      let current = styleObj;
+      for (let i = 0; i < parts.length - 1; i++) {
+        current[parts[i]] = {};
+        current = current[parts[i]];
+      }
+      current[parts[parts.length - 1]] = value;
+      state.chart?.setStyles(styleObj);
+    },
+    [state.chart]
+  );
+  const applyPaneAxis = useCallback(
+    (axis) => {
+      state.chart?.setPaneOptions({ id: "candle_pane", axis });
+    },
+    [state.chart]
+  );
+  const setCandleType = useCallback(
+    (type) => {
+      applyStyle("candle.type", type);
+      setSettings((s) => ({ ...s, candleType: type }));
+    },
+    [applyStyle]
+  );
+  const setCandleUpColor = useCallback(
+    (color) => {
+      state.chart?.setStyles({
+        candle: {
+          bar: { upColor: color, upBorderColor: color, upWickColor: color }
+        }
+      });
+      setSettings((s) => ({ ...s, candleUpColor: color }));
+    },
+    [state.chart]
+  );
+  const setCandleDownColor = useCallback(
+    (color) => {
+      state.chart?.setStyles({
+        candle: {
+          bar: { downColor: color, downBorderColor: color, downWickColor: color }
+        }
+      });
+      setSettings((s) => ({ ...s, candleDownColor: color }));
+    },
+    [state.chart]
+  );
+  const setCompareRule = useCallback(
+    (rule) => {
+      applyStyle("candle.bar.compareRule", rule);
+      setSettings((s) => ({ ...s, compareRule: rule }));
+    },
+    [applyStyle]
+  );
+  const setShowLastPrice = useCallback(
+    (show) => {
+      applyStyle("candle.priceMark.last.show", show);
+      setSettings((s) => ({ ...s, showLastPrice: show }));
+    },
+    [applyStyle]
+  );
+  const setShowLastPriceLine = useCallback(
+    (show) => {
+      applyStyle("candle.priceMark.last.line.show", show);
+      setSettings((s) => ({ ...s, showLastPriceLine: show }));
+    },
+    [applyStyle]
+  );
+  const setShowHighPrice = useCallback(
+    (show) => {
+      applyStyle("candle.priceMark.high.show", show);
+      setSettings((s) => ({ ...s, showHighPrice: show }));
+    },
+    [applyStyle]
+  );
+  const setShowLowPrice = useCallback(
+    (show) => {
+      applyStyle("candle.priceMark.low.show", show);
+      setSettings((s) => ({ ...s, showLowPrice: show }));
+    },
+    [applyStyle]
+  );
+  const setShowIndicatorLastValue = useCallback(
+    (show) => {
+      applyStyle("indicator.lastValueMark.show", show);
+      setSettings((s) => ({ ...s, showIndicatorLastValue: show }));
+    },
+    [applyStyle]
+  );
+  const setPriceAxisType = useCallback(
+    (type) => {
+      applyPaneAxis({ name: type });
+      setSettings((s) => ({ ...s, priceAxisType: type }));
+    },
+    [applyPaneAxis]
+  );
+  const setYAxisPosition = useCallback(
+    (position) => {
+      applyPaneAxis({ position });
+      setSettings((s) => ({ ...s, yAxisPosition: position }));
+    },
+    [applyPaneAxis]
+  );
+  const setYAxisInside = useCallback(
+    (inside) => {
+      applyPaneAxis({ inside });
+      setSettings((s) => ({ ...s, yAxisInside: inside }));
+    },
+    [applyPaneAxis]
+  );
+  const setReverseCoordinate = useCallback(
+    (reverse) => {
+      applyPaneAxis({ reverse });
+      setSettings((s) => ({ ...s, reverseCoordinate: reverse }));
+    },
+    [applyPaneAxis]
+  );
+  const setShowGrid = useCallback(
+    (show) => {
+      applyStyle("grid.show", show);
+      setSettings((s) => ({ ...s, showGrid: show }));
+    },
+    [applyStyle]
+  );
+  const setShowTimeAxis = useCallback(
+    (show) => {
+      applyStyle("xAxis.show", show);
+      setSettings((s) => ({ ...s, showTimeAxis: show }));
+    },
+    [applyStyle]
+  );
+  const setShowCrosshair = useCallback(
+    (show) => {
+      applyStyle("crosshair.show", show);
+      setSettings((s) => ({ ...s, showCrosshair: show }));
+    },
+    [applyStyle]
+  );
+  const setShowCandleTooltip = useCallback(
+    (show) => {
+      applyStyle("candle.tooltip.show", show);
+      setSettings((s) => ({ ...s, showCandleTooltip: show }));
+    },
+    [applyStyle]
+  );
+  const setShowIndicatorTooltip = useCallback(
+    (show) => {
+      applyStyle("indicator.tooltip.show", show);
+      setSettings((s) => ({ ...s, showIndicatorTooltip: show }));
+    },
+    [applyStyle]
+  );
+  const setTooltipShowRule = useCallback(
+    (rule) => {
+      state.chart?.setStyles({
+        candle: { tooltip: { showRule: rule } },
+        indicator: { tooltip: { showRule: rule } }
+      });
+      setSettings((s) => ({ ...s, tooltipShowRule: rule }));
+    },
+    [state.chart]
+  );
+  const resetToDefaults = useCallback(() => {
+    setSettings(defaultSettings);
+    state.chart?.setStyles(state.theme);
+    state.chart?.setPaneOptions({
+      id: "candle_pane",
+      axis: { name: "normal", reverse: false, position: "right", inside: false }
+    });
+  }, [state.chart, state.theme]);
+  return {
+    ...settings,
+    candleTypes,
+    priceAxisTypes,
+    yAxisPositions,
+    compareRules,
+    tooltipShowRules,
+    setCandleType,
+    setCandleUpColor,
+    setCandleDownColor,
+    setCompareRule,
+    setShowLastPrice,
+    setShowLastPriceLine,
+    setShowHighPrice,
+    setShowLowPrice,
+    setShowIndicatorLastValue,
+    setPriceAxisType,
+    setYAxisPosition,
+    setYAxisInside,
+    setReverseCoordinate,
+    setShowTimeAxis,
+    setShowGrid,
+    setShowCrosshair,
+    setShowCandleTooltip,
+    setShowIndicatorTooltip,
+    setTooltipShowRule,
+    resetToDefaults
+  };
+}
+function useScreenshot() {
+  const { state, dispatch } = useKlinechartsUI();
+  const capture = useCallback(() => {
+    if (!state.chart) return;
+    const url = state.chart.getConvertPictureUrl(true, "jpeg", state.theme === "dark" ? "#151517" : "#ffffff");
+    dispatch({ type: "SET_SCREENSHOT_URL", url });
+  }, [state.chart, state.theme, dispatch]);
+  const download = useCallback(
+    (filename = "chart-screenshot.jpg") => {
+      if (!state.screenshotUrl) return;
+      const link = document.createElement("a");
+      link.href = state.screenshotUrl;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
+    [state.screenshotUrl]
+  );
+  const clear = useCallback(() => {
+    dispatch({ type: "SET_SCREENSHOT_URL", url: null });
+  }, [dispatch]);
+  return {
+    screenshotUrl: state.screenshotUrl,
+    capture,
+    download,
+    clear
+  };
+}
+function useFullscreen() {
+  const { fullscreenContainerRef } = useKlinechartsUIDispatch();
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const enter = useCallback(() => {
+    const el = fullscreenContainerRef.current;
+    if (!el) return;
+    if (el.requestFullscreen) {
+      el.requestFullscreen();
+    } else if ("webkitRequestFullscreen" in el) {
+      el.webkitRequestFullscreen();
+    } else if ("msRequestFullscreen" in el) {
+      el.msRequestFullscreen();
+    }
+  }, [fullscreenContainerRef]);
+  const exit = useCallback(() => {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if ("webkitExitFullscreen" in document) {
+      document.webkitExitFullscreen();
+    } else if ("msExitFullscreen" in document) {
+      document.msExitFullscreen();
+    }
+  }, []);
+  const toggle = useCallback(() => {
+    if (isFullscreen) {
+      exit();
+    } else {
+      enter();
+    }
+  }, [isFullscreen, enter, exit]);
+  useEffect(() => {
+    const handler = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener("fullscreenchange", handler);
+    document.addEventListener("webkitfullscreenchange", handler);
+    return () => {
+      document.removeEventListener("fullscreenchange", handler);
+      document.removeEventListener("webkitfullscreenchange", handler);
+    };
+  }, []);
+  return {
+    isFullscreen,
+    toggle,
+    enter,
+    exit,
+    containerRef: fullscreenContainerRef
+  };
+}
+function useOrderLines() {
+  const { state } = useKlinechartsUI();
+  const callbacksRef = useRef(/* @__PURE__ */ new Map());
+  const createOrderLine = useCallback(
+    (options) => {
+      if (!state.chart) return null;
+      const {
+        id: optId,
+        price,
+        draggable = false,
+        onPriceChange,
+        ...extendData
+      } = options;
+      const id = optId ?? `order_line_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
+      if (onPriceChange) {
+        callbacksRef.current.set(id, onPriceChange);
+      }
+      const dataCount = state.chart.getDataList().length;
+      const anchorIndex = dataCount > 0 ? dataCount - 1 : 0;
+      state.chart.createOverlay({
+        name: "orderLine",
+        id,
+        points: [{ dataIndex: anchorIndex, value: price }],
+        extendData,
+        lock: !draggable,
+        mode: "normal",
+        onPressedMoveEnd: (event) => {
+          const newPrice = event.overlay.points[0]?.value;
+          if (newPrice != null) {
+            callbacksRef.current.get(id)?.(newPrice);
+          }
+        }
+      });
+      return id;
+    },
+    [state.chart]
+  );
+  const updateOrderLine = useCallback(
+    (id, options) => {
+      if (!state.chart) return;
+      const { price, draggable, onPriceChange, ...extendData } = options;
+      const existing = state.chart.getOverlays({ id })?.[0];
+      if (!existing) return;
+      if (onPriceChange !== void 0) {
+        callbacksRef.current.set(id, onPriceChange);
+      }
+      const dataCount = state.chart.getDataList().length;
+      const anchorIndex = dataCount > 0 ? dataCount - 1 : 0;
+      state.chart.overrideOverlay({
+        id,
+        ...price != null ? { points: [{ dataIndex: anchorIndex, value: price }] } : {},
+        ...draggable != null ? { lock: !draggable } : {},
+        extendData: {
+          ...existing.extendData,
+          ...extendData
+        }
+      });
+    },
+    [state.chart]
+  );
+  const removeOrderLine = useCallback(
+    (id) => {
+      state.chart?.removeOverlay({ id });
+      callbacksRef.current.delete(id);
+    },
+    [state.chart]
+  );
+  const removeAllOrderLines = useCallback(() => {
+    state.chart?.removeOverlay({ name: "orderLine" });
+    callbacksRef.current.clear();
+  }, [state.chart]);
+  return {
+    createOrderLine,
+    updateOrderLine,
+    removeOrderLine,
+    removeAllOrderLines
+  };
+}
+
+// src/utils/createDataLoader.ts
+function createDataLoader(datafeed, dispatch) {
+  let oldestTimestamp = null;
+  let currentGen = 0;
+  return {
+    getBars: async (params) => {
+      try {
+        dispatch({ type: "SET_LOADING", isLoading: true });
+        if (params.type === "init") {
+          oldestTimestamp = null;
+          const gen = ++currentGen;
+          const data = await datafeed.getHistoryKLineData(
+            params.symbol,
+            { ...params.period, label: "" },
+            0,
+            Date.now()
+          );
+          if (gen !== currentGen) return;
+          if (data.length > 0) {
+            oldestTimestamp = data[0].timestamp;
+          }
+          params.callback(data, {
+            forward: data.length > 0,
+            backward: false
+          });
+        } else if (params.type === "forward" && oldestTimestamp !== null) {
+          const gen = currentGen;
+          const data = await datafeed.getHistoryKLineData(
+            params.symbol,
+            { ...params.period, label: "" },
+            0,
+            oldestTimestamp - 1
+          );
+          if (gen !== currentGen) return;
+          if (data.length > 0) {
+            oldestTimestamp = data[0].timestamp;
+          }
+          params.callback(data, {
+            forward: data.length > 0,
+            backward: false
+          });
+        } else if (params.type === "backward") {
+          params.callback([], { forward: false, backward: false });
+        }
+      } catch (error) {
+        console.error("Failed to load chart data:", error);
+        params.callback([], { forward: false, backward: false });
+      } finally {
+        dispatch({ type: "SET_LOADING", isLoading: false });
+      }
+    },
+    subscribeBar: (params) => {
+      datafeed.subscribe(
+        params.symbol,
+        { ...params.period, label: "" },
+        (klineData) => params.callback(klineData)
+      );
+    },
+    unsubscribeBar: (params) => {
+      datafeed.unsubscribe(params.symbol, { ...params.period, label: "" });
+    }
+  };
+}
+
+export { CANDLE_TYPES, COMPARE_RULES, DEFAULT_PERIODS, DRAWING_CATEGORIES, INDICATOR_PARAMS, KlinechartsUIDispatchContext, KlinechartsUIProvider, KlinechartsUIStateContext, MAIN_INDICATORS, PRICE_AXIS_TYPES, SUB_INDICATORS, TIMEZONES, TOOLTIP_SHOW_RULES, YAXIS_POSITIONS, createDataLoader, useDrawingTools, useFullscreen, useIndicators, useKlinechartsUI, useKlinechartsUILoading, useKlinechartsUISettings, useKlinechartsUITheme, useOrderLines, usePeriods, useScreenshot, useSymbolSearch, useTimezone };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map