lightweight-charts-react-components 2.5.0 → 2.6.1

package/README.md

@@ -31,6 +31,10 @@
     </picture>
   </a>
 
+  <a href="https://dashboard.stryker-mutator.io/reports/github.com/ukorvl/lightweight-charts-react-components/main">
+    <img src="https://img.shields.io/endpoint?style=flat&url=https%3A%2F%2Fbadge-api.stryker-mutator.io%2Fgithub.com%2Fukorvl%2Flightweight-charts-react-components%2Fmain" alt="Mutation testing badge">
+  </a>
+
   <a href="https://pkg.pr.new/~/ukorvl/lightweight-charts-react-components">
     <img src="https://pkg.pr.new/badge/ukorvl/lightweight-charts-react-components" alt="pkg.pr.new">
   </a>
@@ -42,10 +46,10 @@
     </picture>
   </a>
 
-  <a href="https://bundlephobia.com/package/lightweight-charts-react-components">
+  <a href="https://bundlephobia.com/package/lightweight-charts-react-components@2.6.1">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/bundlephobia/minzip/lightweight-charts-react-components?colorA=1e2029&colorB=1e2029&style=flat">
-      <img src="https://img.shields.io/bundlephobia/minzip/lightweight-charts-react-components?colorA=ffcc00&colorB=ffcc00&style=flat" alt="Minified size">
+      <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/bundlephobia/minzip/lightweight-charts-react-components/2.6.1?cacheSeconds=31536000&colorA=1e2029&colorB=1e2029&style=flat">
+      <img src="https://img.shields.io/bundlephobia/minzip/lightweight-charts-react-components/2.6.1?cacheSeconds=31536000&colorA=ffcc00&colorB=ffcc00&style=flat" alt="Minified size">
     </picture>
   </a>
 
@@ -70,15 +74,28 @@
     </picture>
   </a>
 
-  <a href="https://coveralls.io/github/ukorvl/lightweight-charts-react-components">
+  <a href="https://coveralls.io/github/ukorvl/lightweight-charts-react-components?branch=main">
+    <picture>
+      <source
+        media="(prefers-color-scheme: dark)"
+        srcset="https://coveralls.io/repos/github/ukorvl/lightweight-charts-react-components/badge.svg?branch=main"
+      >
+      <img
+        src="https://coveralls.io/repos/github/ukorvl/lightweight-charts-react-components/badge.svg?branch=main"
+        alt="Coverage Status"
+      >
+    </picture>
+  </a>
+
+  <a href="https://snyk.io/test/github/ukorvl/lightweight-charts-react-components">
     <picture>
       <source
         media="(prefers-color-scheme: dark)"
-        srcset="https://img.shields.io/coveralls/github/ukorvl/lightweight-charts-react-components?colorA=1e2029&colorB=1e2029&style=flat"
+        srcset="https://snyk.io/test/github/ukorvl/lightweight-charts-react-components/badge.svg"
       >
       <img
-        src="https://img.shields.io/coveralls/github/ukorvl/lightweight-charts-react-components?colorA=ffcc00&colorB=ffcc00&style=flat"
-        alt="Coverage"
+        src="https://snyk.io/test/github/ukorvl/lightweight-charts-react-components/badge.svg"
+        alt="Snyk Security"
       >
     </picture>
   </a>
@@ -106,6 +123,7 @@ Check out the [Demo](https://ukorvl.github.io/lightweight-charts-react-component
   - [Standalone browser build](#standalone-browser-build)
 - [Usage](#usage)
   - [Chart Container Sizing](#chart-container-sizing)
+- [Agent skill](#agent-skill)
 - [Examples](#examples)
 - [Contributing](#contributing)
   - [How to Contribute](#how-to-contribute)
@@ -256,11 +274,18 @@ Pane-wide overlays that belong to a whole pane rather than a single series can b
 
 ### Chart Container Sizing
 
-The `Chart` component requires explicit width and height to render correctly. You can set these dimensions directly via the `options` prop or make the chart container scale to its parent size using the `containerProps` prop.
-Note that the chart will automatically resize to fit its container.
+The `Chart` component needs a nonzero container size. Set fixed dimensions through
+`options`, or enable `options={{ autoSize: true }}` and size the container through
+`containerProps`. Automatic resizing requires `autoSize: true`.
 
 There may be cases where the chart's parent HTML element has no size defined (for example, when the parent is a flex container with no defined height). In such cases, you need to ensure that the parent element has a defined size (width and height) for the chart to render properly.
 
+## Agent skill
+
+The project comes with an [agent skill](https://github.com/ukorvl/lightweight-charts-react-components/blob/main/skills/lightweight-charts-react-components) that provides recipes for common charting scenarios and guides on how to integrate the library into React applications. The skill is designed to help coding agents understand the library's design choices and common edge cases, making it produce higher-quality code when using the library.
+
+For more information on how to use the skill, please refer to the [skill readme](https://github.com/ukorvl/lightweight-charts-react-components/blob/main/skills/lightweight-charts-react-components/README.md).
+
 ## Examples
 
 The [examples](https://github.com/ukorvl/lightweight-charts-react-components/blob/main/examples/) app itself is a [Demo](https://ukorvl.github.io/lightweight-charts-react-components/) web application, but it contains a lot of examples of how to use the library. You can find the source code in the [samples folder](https://github.com/ukorvl/lightweight-charts-react-components/blob/main/examples/src/samples).
@@ -283,7 +308,6 @@ Thank you for helping improve this project!
 ## Related Projects
 
 - [lightweight-charts](https://github.com/tradingview/lightweight-charts) - The original Lightweight Charts library by TradingView.
-- [lightweight-charts-vue](https://github.com/ukorvl/lightweight-charts-vue) - Vue.js wrapper for Lightweight Charts.
 
 ## License
 

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 
 /**!
-* lightweight-charts-react-components v2.5.0
+* lightweight-charts-react-components v2.6.1
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.md file in the root directory of this source tree.
@@ -39,6 +39,7 @@ import type { PriceLineOptions } from 'lightweight-charts';
 import type { PriceScaleOptions as PriceScaleOptions_2 } from 'lightweight-charts';
 import type { ReactElement } from 'react';
 import type { ReactNode } from 'react';
+import type { Ref } from 'react';
 import type { RefAttributes } from 'react';
 import type { SeriesDataItemTypeMap } from 'lightweight-charts';
 import type { SeriesMarker } from 'lightweight-charts';
@@ -141,6 +142,7 @@ export declare const CandlestickSeries: SeriesForwardRefComponent<"Candlestick">
  *
  * @param props - The properties for the chart.
  * @param ref - The ref to access the chart API.
+ * Use `containerRef` to access the wrapper div element.
  * @returns A React component that renders the chart.
  * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/chart | Chart documentation}
  * @see {@link https://tradingview.github.io/lightweight-charts/docs/chart-types | TradingView documentation for charts}
@@ -153,7 +155,7 @@ export declare const CandlestickSeries: SeriesForwardRefComponent<"Candlestick">
  * </Chart>
  * ```
  */
-export declare const Chart: ForwardRefExoticComponent<ChartProps & RefAttributes<HTMLDivElement>>;
+export declare const Chart: ForwardRefExoticComponent<ChartProps & RefAttributes<ChartApiRef<Time, IChartApi>>>;
 
 /**
  * Common chart API surface used by the React wrapper.
@@ -161,13 +163,17 @@ export declare const Chart: ForwardRefExoticComponent<ChartProps & RefAttributes
 declare type ChartApiInstance<HorzScaleItem = Time> = Pick<IChartApiBase<HorzScaleItem>, "applyOptions" | "remove" | "subscribeClick" | "unsubscribeClick" | "subscribeCrosshairMove" | "unsubscribeCrosshairMove" | "subscribeDblClick" | "unsubscribeDblClick">;
 
 /**
- * Chart API reference type that can be used to access the chart plugin API.
+ * Chart API reference type that can be used to access the chart API.
  */
 export declare type ChartApiRef<HorzScaleItem = Time, TChartApi extends ChartApiInstance<HorzScaleItem> = ChartApiInstance<HorzScaleItem>> = {
     /**
      * Internal reference to the chart API instance.
      */
     _chart: TChartApi | null;
+    /**
+     * Internal flag set while the chart is being removed along with its children.
+     */
+    _isDisposing: boolean;
     /**
      * Function to get the chart API instance.
      */
@@ -185,13 +191,14 @@ export declare type ChartApiRef<HorzScaleItem = Time, TChartApi extends ChartApi
 /**
  * Chart component props.
  */
-export declare type ChartProps = GenericChartProps<Time, IChartApi, ChartOptions>;
+export declare type ChartProps = GenericChartProps<Time, ChartOptions>;
 
 /**
  * CustomChart component that can be used to create a chart with a custom horizontal scale behavior.
  *
  * @param props - The properties for the custom chart.
- * @param ref - The ref to access the chart container.
+ * @param ref - The ref to access the chart API.
+ * Use `containerRef` to access the wrapper div element.
  * @returns A React component that renders the custom chart.
  * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/chart | Chart documentation}
  * @see {@link https://tradingview.github.io/lightweight-charts/docs/chart-types#custom-horizontal-scale-chart | TradingView documentation for custom horizontal scale charts}
@@ -204,14 +211,14 @@ export declare type ChartProps = GenericChartProps<Time, IChartApi, ChartOptions
  */
 export declare const CustomChart: CustomChartForwardRefComponent;
 
-declare type CustomChartForwardRefComponent = (<HorzScaleItem, THorzScaleBehavior extends IHorzScaleBehavior<HorzScaleItem>>(props: CustomChartProps<HorzScaleItem, THorzScaleBehavior> & RefAttributes<HTMLDivElement>) => JSX.Element) & {
+declare type CustomChartForwardRefComponent = (<HorzScaleItem, THorzScaleBehavior extends IHorzScaleBehavior<HorzScaleItem>>(props: CustomChartProps<HorzScaleItem, THorzScaleBehavior> & RefAttributes<ChartApiRef<HorzScaleItem, IChartApiBase<HorzScaleItem>>>) => JSX.Element) & {
     displayName: string;
 };
 
 /**
  * CustomChart component props.
  */
-export declare type CustomChartProps<HorzScaleItem = Time, THorzScaleBehavior extends IHorzScaleBehavior<HorzScaleItem> = IHorzScaleBehavior<HorzScaleItem>> = GenericChartProps<HorzScaleItem, IChartApiBase<HorzScaleItem>, ReturnType<THorzScaleBehavior["options"]>> & {
+export declare type CustomChartProps<HorzScaleItem = Time, THorzScaleBehavior extends IHorzScaleBehavior<HorzScaleItem> = IHorzScaleBehavior<HorzScaleItem>> = GenericChartProps<HorzScaleItem, ReturnType<THorzScaleBehavior["options"]>> & {
     /**
      * Horizontal scale behavior instance passed to `createChartEx`.
      */
@@ -253,7 +260,7 @@ declare type CustomSeriesUniqueProps<HorzScaleItem = Time> = {
 /**
  * Generic chart component props.
  */
-export declare type GenericChartProps<HorzScaleItem = Time, TChartApi extends ChartApiInstance<HorzScaleItem> = ChartApiInstance<HorzScaleItem>, TOptions extends ChartOptionsImpl<HorzScaleItem> = ChartOptionsImpl<HorzScaleItem>> = {
+export declare type GenericChartProps<HorzScaleItem = Time, TOptions extends ChartOptionsImpl<HorzScaleItem> = ChartOptionsImpl<HorzScaleItem>> = {
     /**
      * Children of the chart component.
      */
@@ -265,6 +272,10 @@ export declare type GenericChartProps<HorzScaleItem = Time, TChartApi extends Ch
      * accessible labelling strategy.
      */
     containerProps?: JSX.IntrinsicElements["div"];
+    /**
+     * Ref for the container element rendered by the chart wrapper component.
+     */
+    containerRef?: Ref<HTMLDivElement>;
     /**
      * Callback function that is called when the chart is clicked.
      */
@@ -273,10 +284,6 @@ export declare type GenericChartProps<HorzScaleItem = Time, TChartApi extends Ch
      * Callback function that is called when the crosshair moves.
      */
     onCrosshairMove?: MouseEventHandler<HorzScaleItem>;
-    /**
-     * Callback function that is called when the chart is initialized.
-     */
-    onInit?: (chart: TChartApi) => void;
     /**
      * Options for the chart.
      */
@@ -444,7 +451,8 @@ export declare type MarkersProps<HorzScaleItem = Time> = {
  * OptionsChart component that can be used to create a price-based horizontal scale chart.
  *
  * @param props - The properties for the options chart.
- * @param ref - The ref to access the chart container.
+ * @param ref - The ref to access the chart API.
+ * Use `containerRef` to access the wrapper div element.
  * @returns A React component that renders the options chart.
  * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/chart | Chart documentation}
  * @see {@link https://tradingview.github.io/lightweight-charts/docs/chart-types#options-chart-price-based | TradingView documentation for options charts}
@@ -455,12 +463,12 @@ export declare type MarkersProps<HorzScaleItem = Time> = {
  * </OptionsChart>
  * ```
  */
-export declare const OptionsChart: ForwardRefExoticComponent<OptionsChartProps & RefAttributes<HTMLDivElement>>;
+export declare const OptionsChart: ForwardRefExoticComponent<OptionsChartProps & RefAttributes<ChartApiRef<number, IChartApiBase<number>>>>;
 
 /**
  * OptionsChart component props.
  */
-export declare type OptionsChartProps = GenericChartProps<number, IChartApiBase<number>, PriceChartOptions>;
+export declare type OptionsChartProps = GenericChartProps<number, PriceChartOptions>;
 
 /**
  * Pane component that can be used to create a pane in a chart.
@@ -733,14 +741,45 @@ declare type SeriesForwardRefComponent<T extends SeriesType> = (<HorzScaleItem =
 export declare type SeriesOptions<T extends SeriesType> = SeriesPartialOptionsMap[T];
 
 declare type SeriesParameters<T extends SeriesType, HorzScaleItem = Time> = {
+    /**
+     * Full data for this series.
+     *
+     * When `reactive` is `true` (the default), treat this prop as the source of truth for the
+     * whole series. In other words, pass the complete array you want to see on the chart, not just
+     * the last point.
+     *
+     * For performance, the wrapper will use `series.update()` only in the two safe cases below:
+     * - you append exactly one new last item and every earlier item is the same object as before
+     * - the array length stays the same, only the last item changes, and that last item has the same
+     * `time` as before.
+     *
+     * In every other case, the wrapper calls `series.setData(data)` so the chart matches the new
+     * array exactly. Which is slower but does not leave the stale data on the chart.
+     *
+     * Practical rule of thumb:
+     * - if you want the fastest realtime updates, keep earlier items by reference and only replace or
+     * append the last item
+     * - if you replace history, refetch data, or build a fresh array from scratch, that is fine too;
+     * the wrapper will fall back to `setData()` for correctness.
+     *
+     * If you want to skip the optimization and always replace the full dataset, use
+     * `alwaysReplaceData`.
+     */
     data: SeriesDataItemTypeMap<HorzScaleItem>[T][];
+    /**
+     * Whether the series should react to `data` prop changes.
+     *
+     * Defaults to `true`. Set this to `false` if you want to manage data updates imperatively
+     * through the series API ref instead of syncing from React props.
+     */
     reactive?: boolean;
     options?: SeriesOptions<T>;
     seriesOrder?: ReturnType<ISeriesApi<T>["seriesOrder"]>;
     /**
-     * If true, the series will replace its data on every update.
-     * If false, it will try to apply incremental updates to the existing series when possible,
-     * which can be useful for performance.
+     * If true, the series will replace its data on every reactive update by calling `setData(data)`.
+     *
+     * If false, the wrapper follows the incremental update rules documented on `data` and uses
+     * `update()` only for a safe last-bar replace or a pure append.
      *
      * @see {@link https://tradingview.github.io/lightweight-charts/docs#updating-the-data-in-a-series | TradingView documentation for updating series data}
      */
@@ -961,7 +1000,8 @@ export declare type WatermarkType = "text" | "image";
  * YieldCurveChart component that can be used to create a yield curve chart.
  *
  * @param props - The properties for the yield curve chart.
- * @param ref - The ref to access the chart container.
+ * @param ref - The ref to access the chart API.
+ * Use `containerRef` to access the wrapper div element.
  * @returns A React component that renders the yield curve chart.
  * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/chart | Chart documentation}
  * @see {@link https://tradingview.github.io/lightweight-charts/docs/chart-types#yield-curve-chart | TradingView documentation for yield curve charts}
@@ -972,11 +1012,11 @@ export declare type WatermarkType = "text" | "image";
  * </YieldCurveChart>
  * ```
  */
-export declare const YieldCurveChart: ForwardRefExoticComponent<YieldCurveChartProps & RefAttributes<HTMLDivElement>>;
+export declare const YieldCurveChart: ForwardRefExoticComponent<YieldCurveChartProps & RefAttributes<ChartApiRef<number, IYieldCurveChartApi>>>;
 
 /**
  * YieldCurveChart component props.
  */
-export declare type YieldCurveChartProps = GenericChartProps<number, IYieldCurveChartApi, YieldCurveChartOptions>;
+export declare type YieldCurveChartProps = GenericChartProps<number, YieldCurveChartOptions>;
 
 export { }

package/dist/lightweight-charts-react-components.mjs

@@ -1,6 +1,6 @@
 
 /**!
-* lightweight-charts-react-components v2.5.0
+* lightweight-charts-react-components v2.6.1
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.md file in the root directory of this source tree.
@@ -8,9 +8,9 @@
 * @license MIT
 */
 
-import*as e from"lightweight-charts";import*as t from"react";let r=(0,t.createContext)(null);r.displayName="ChartContext";let i={addDefaultPane:!1},a=({container:r,onClick:a,onCrosshairMove:n,onInit:l,options:u={},onDblClick:s,createChartApi:c=e.createChart})=>{let[f,p]=(0,t.useState)(!1),o=(0,t.useRef)({_chart:null,api(){return this._chart},init(){if(null===this._chart){let e=c(r,{...i,...u});this._chart=e,l&&l(this._chart)}return f||p(!0),this._chart},clear(){null!==this._chart&&(p(!1),this._chart.remove(),this._chart=null)}});return(0,t.useLayoutEffect)(()=>(o.current.init(),()=>{o.current.clear()}),[]),(0,t.useLayoutEffect)(()=>{if(r){if(a){var e;null==(e=o.current.api())||e.subscribeClick(a)}return()=>{if(a){var e;null==(e=o.current.api())||e.unsubscribeClick(a)}}}},[a]),(0,t.useLayoutEffect)(()=>{if(r){if(n){var e;null==(e=o.current.api())||e.subscribeCrosshairMove(n)}return()=>{if(n){var e;null==(e=o.current.api())||e.unsubscribeCrosshairMove(n)}}}},[n]),(0,t.useLayoutEffect)(()=>{if(r){if(s){var e;null==(e=o.current.api())||e.subscribeDblClick(s)}return()=>{if(s){var e;null==(e=o.current.api())||e.unsubscribeDblClick(s)}}}},[s]),(0,t.useLayoutEffect)(()=>{var e;r&&(null==(e=o.current.api())||e.applyOptions({...i,...u}))},[u]),{chartApiRef:o,isReady:f}},n=({children:e,container:i,onClick:n,onCrosshairMove:l,onInit:u,options:s,onDblClick:c,chartKind:f="time",createChartApi:p})=>{let{chartApiRef:{current:o},isReady:d}=a({container:i,onClick:n,onCrosshairMove:l,onInit:u,options:s,onDblClick:c,createChartApi:p});return t.default.createElement(r.Provider,{value:{chartApiRef:o,isReady:d,chartKind:f}},e)},l=(0,t.forwardRef)(({children:r,containerProps:i,...a},l)=>{let[u,s]=(0,t.useState)(),c=(0,t.useCallback)(e=>{s(e??void 0),l&&("function"==typeof l?l(e):l.current=e)},[l]);return t.default.createElement("div",{ref:c,"aria-hidden":(null==i?void 0:i["aria-hidden"])??!0,...i},!!u&&t.default.createElement(n,{container:u,createChartApi:e.createChart,chartKind:"time",...a},r))});l.displayName="ChartWrapper";let u=(0,t.forwardRef)(({children:r,containerProps:i,...a},l)=>{let[u,s]=(0,t.useState)(),c=(0,t.useCallback)(e=>{s(e??void 0),l&&("function"==typeof l?l(e):l.current=e)},[l]);return t.default.createElement("div",{ref:c,"aria-hidden":(null==i?void 0:i["aria-hidden"])??!0,...i},!!u&&t.default.createElement(n,{container:u,createChartApi:e.createOptionsChart,chartKind:"options",...a},r))});u.displayName="OptionsChart";let s=(0,t.forwardRef)(({children:r,containerProps:i,...a},l)=>{let[u,s]=(0,t.useState)(),c=(0,t.useCallback)(e=>{s(e??void 0),l&&("function"==typeof l?l(e):l.current=e)},[l]);return t.default.createElement("div",{ref:c,"aria-hidden":(null==i?void 0:i["aria-hidden"])??!0,...i},!!u&&t.default.createElement(n,{container:u,createChartApi:e.createYieldCurveChart,chartKind:"yield-curve",...a},r))});s.displayName="YieldCurveChart";let c=(0,t.forwardRef)(({children:r,containerProps:i,horzScaleBehavior:a,...l},u)=>{let[s,c]=(0,t.useState)(),f=(0,t.useCallback)(e=>{c(e??void 0),u&&("function"==typeof u?u(e):u.current=e)},[u]),p=(0,t.useCallback)((t,r)=>(0,e.createChartEx)(t,a,r),[a]);return t.default.createElement("div",{ref:f,"aria-hidden":(null==i?void 0:i["aria-hidden"])??!0,...i},!!s&&t.default.createElement(n,{container:s,createChartApi:p,chartKind:"custom",...l},r))});c.displayName="CustomChart";let f=(0,t.createContext)(null);f.displayName="TimeScaleContext";let p="2.5.0";function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}class d extends Error{constructor(e,{isOperational:t=!0,cause:r,docsPath:i}={}){super(e),o(this,"isOperational",void 0),o(this,"cause",void 0),this.name=this.constructor.name??"InternalError",this.isOperational=t,this.cause=r,this.message=`${e??"An error occurred"}`,i&&(this.message=`${this.message}
+import*as e from"lightweight-charts";import*as t from"react";let r=(e,t)=>{if(e){if("function"==typeof e)return void e(t);e.current=t}},i=(0,t.createContext)(null);i.displayName="ChartContext";let a={addDefaultPane:!1},n=({container:r,onClick:i,onCrosshairMove:n,options:l={},onDblClick:u,createChartApi:s=e.createChart})=>{let[c,f]=(0,t.useState)(!1),p=(0,t.useRef)({_chart:null,_isDisposing:!1,api(){return this._chart},init(){if(null===this._chart){let e=s(r,{...a,...l});this._chart=e}return c||f(!0),this._chart},clear(){this._isDisposing=!1,null!==this._chart&&(f(!1),this._chart.remove(),this._chart=null)}});return(0,t.useLayoutEffect)(()=>(p.current.init(),()=>{p.current._isDisposing=!0}),[]),(0,t.useEffect)(()=>()=>{p.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(r){if(i){var e;null==(e=p.current.api())||e.subscribeClick(i)}return()=>{if(i){var e;null==(e=p.current.api())||e.unsubscribeClick(i)}}}},[i]),(0,t.useLayoutEffect)(()=>{if(r){if(n){var e;null==(e=p.current.api())||e.subscribeCrosshairMove(n)}return()=>{if(n){var e;null==(e=p.current.api())||e.unsubscribeCrosshairMove(n)}}}},[n]),(0,t.useLayoutEffect)(()=>{if(r){if(u){var e;null==(e=p.current.api())||e.subscribeDblClick(u)}return()=>{if(u){var e;null==(e=p.current.api())||e.unsubscribeDblClick(u)}}}},[u]),(0,t.useLayoutEffect)(()=>{var e;r&&(null==(e=p.current.api())||e.applyOptions({...a,...l}))},[l]),{chartApiRef:p,isReady:c}},l=(0,t.forwardRef)(({children:e,container:r,onClick:a,onCrosshairMove:l,options:u,onDblClick:s,chartKind:c="time",createChartApi:f},p)=>{let{chartApiRef:{current:o},isReady:d}=n({container:r,onClick:a,onCrosshairMove:l,options:u,onDblClick:s,createChartApi:f});return(0,t.useImperativeHandle)(p,()=>o,[o]),t.default.createElement(i.Provider,{value:{chartApiRef:o,isReady:d,chartKind:c}},e)});l.displayName="ChartComponent";let u=(0,t.forwardRef)(({children:i,containerProps:a,containerRef:n,...u},s)=>{let[c,f]=(0,t.useState)(),p=(0,t.useCallback)(e=>{f(e??void 0),r(n,e)},[n]);return t.default.createElement("div",{ref:p,"aria-hidden":(null==a?void 0:a["aria-hidden"])??!0,...a},!!c&&t.default.createElement(l,{ref:s,container:c,createChartApi:e.createChart,chartKind:"time",...u},i))});u.displayName="ChartWrapper";let s=(0,t.forwardRef)(({children:i,containerProps:a,containerRef:n,...u},s)=>{let[c,f]=(0,t.useState)(),p=(0,t.useCallback)(e=>{f(e??void 0),r(n,e)},[n]);return t.default.createElement("div",{ref:p,"aria-hidden":(null==a?void 0:a["aria-hidden"])??!0,...a},!!c&&t.default.createElement(l,{ref:s,container:c,createChartApi:e.createOptionsChart,chartKind:"options",...u},i))});s.displayName="OptionsChart";let c=(0,t.forwardRef)(({children:i,containerProps:a,containerRef:n,...u},s)=>{let[c,f]=(0,t.useState)(),p=(0,t.useCallback)(e=>{f(e??void 0),r(n,e)},[n]);return t.default.createElement("div",{ref:p,"aria-hidden":(null==a?void 0:a["aria-hidden"])??!0,...a},!!c&&t.default.createElement(l,{ref:s,container:c,createChartApi:e.createYieldCurveChart,chartKind:"yield-curve",...u},i))});c.displayName="YieldCurveChart";let f=(0,t.forwardRef)(({children:i,containerProps:a,containerRef:n,horzScaleBehavior:u,...s},c)=>{let[f,p]=(0,t.useState)(),o=(0,t.useCallback)(e=>{p(e??void 0),r(n,e)},[n]),d=(0,t.useCallback)((t,r)=>(0,e.createChartEx)(t,u,r),[u]);return t.default.createElement("div",{ref:o,"aria-hidden":(null==a?void 0:a["aria-hidden"])??!0,...a},!!f&&t.default.createElement(l,{ref:c,container:f,createChartApi:d,chartKind:"custom",...s},i))});f.displayName="CustomChart";let p=(0,t.createContext)(null);p.displayName="TimeScaleContext";let o="2.6.1";function d(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}class h extends Error{constructor(e,{isOperational:t=!0,cause:r,docsPath:i}={}){super(e),d(this,"isOperational",void 0),d(this,"cause",void 0),this.name=this.constructor.name??"InternalError",this.isOperational=t,this.cause=r,this.message=`${e??"An error occurred"}`,i&&(this.message=`${this.message}
 
-Docs: see ${"https://ukorvl.github.io/lightweight-charts-react-components/docs/"+i}`),p&&(this.message=`${this.message}
+Docs: see ${"https://ukorvl.github.io/lightweight-charts-react-components/docs/"+i}`),o&&(this.message=`${this.message}
 
-Version: lightweight-charts-react-components@${p}`),Object.setPrototypeOf(this,d.prototype)}}let h=(e,r)=>{let i=(0,t.useContext)(e);if(!i){let t=e.name??e.displayName??"Context";throw new d(r??`${t} not found.`,{isOperational:!0})}return i},m=(0,t.createContext)(null);m.displayName="PaneContext";let v=()=>{let e=(0,t.useContext)(m),r=!!e;return{isInsidePane:r,isPaneReady:!!(null==e?void 0:e.isReady),paneApiRef:null==e?void 0:e.paneApiRef}},y=({onVisibleTimeRangeChange:e,onVisibleLogicalRangeChange:i,onSizeChange:a,visibleRange:n,visibleLogicalRange:l,options:u={}})=>{let{isReady:s,chartApiRef:c}=h(r),{isPaneReady:f,isInsidePane:p}=v(),[o,d]=(0,t.useState)(!1),m=(0,t.useRef)({_timeScale:null,api(){return this._timeScale},init(){if(this._timeScale)return this._timeScale;let e=null==c?void 0:c.api();return e?(this._timeScale=e.timeScale(),this._timeScale.applyOptions(u),n&&this._timeScale.setVisibleRange(n),l&&this._timeScale.setVisibleLogicalRange(l),d(!0),this._timeScale):null},clear(){this._timeScale=null,d(!1)}});return(0,t.useLayoutEffect)(()=>{s&&(!p||f)&&m.current.init()},[s,p,f]),(0,t.useLayoutEffect)(()=>()=>{m.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(c&&u){var e,t;null==(t=m.current)||null==(e=t.api())||e.applyOptions(u)}},[u]),(0,t.useLayoutEffect)(()=>{if(!c||!o)return;let e=m.current.api();return a&&e&&e.subscribeSizeChange(a),()=>{a&&e&&e.unsubscribeSizeChange(a)}},[c,o,a]),(0,t.useLayoutEffect)(()=>{if(!c||!o)return;let e=m.current.api();return i&&e&&e.subscribeVisibleLogicalRangeChange(i),()=>{i&&e&&e.unsubscribeVisibleLogicalRangeChange(i)}},[c,o,i]),(0,t.useLayoutEffect)(()=>{if(!c||!o)return;let t=m.current.api();return e&&t&&t.subscribeVisibleTimeRangeChange(e),()=>{e&&t&&t.unsubscribeVisibleTimeRangeChange(e)}},[c,o,e]),(0,t.useLayoutEffect)(()=>{if(c&&n){var e,t;null==(t=m.current)||null==(e=t.api())||e.setVisibleRange(n)}},[n]),(0,t.useLayoutEffect)(()=>{if(c&&l){var e,t;null==(t=m.current)||null==(e=t.api())||e.setVisibleLogicalRange(l)}},[l]),{timeScaleApiRef:m,isReady:o}},R=(0,t.forwardRef)(({children:e,...r},i)=>{let{timeScaleApiRef:{current:a},isReady:n}=y(r);return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(f.Provider,{value:{timeScaleApiRef:a,isReady:n}},e)});R.displayName="TimeScale";let _=({options:e={},id:i})=>{let{isReady:a,chartApiRef:n}=h(r),{isInsidePane:l,isPaneReady:u}=v(),s=(0,t.useRef)({_priceScale:null,api(){return this._priceScale},init(){if(!this._priceScale){let t=null==n?void 0:n.api();if(!t)return null;this._priceScale=t.priceScale(i),this._priceScale.applyOptions(e)}return this._priceScale},setId(t){null!==this._priceScale&&null!==n&&(this._priceScale=n.api().priceScale(t),this._priceScale.applyOptions(e))},clear(){this._priceScale=null}});return(0,t.useLayoutEffect)(()=>{if(a){if(!l)throw new d("PriceScale must be used inside a pane. Please ensure that the component is wrapped in a pane component.",{isOperational:!0,docsPath:""});u&&s.current.init()}},[a,l,u]),(0,t.useLayoutEffect)(()=>()=>{s.current.clear()},[]),(0,t.useLayoutEffect)(()=>{var e;n&&(null==(e=s.current)||e.setId(i))},[i]),(0,t.useLayoutEffect)(()=>{if(n&&e){var t,r;null==(r=s.current)||null==(t=r.api())||t.applyOptions(e)}},[e]),s},S=(0,t.forwardRef)((e,r)=>{let i=_(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});S.displayName="PriceScale";let C=({deps:e})=>{let{timeScaleApiRef:r,isReady:i}=h(f);(0,t.useLayoutEffect)(()=>{if(!i||!r)return;let e=r.api();queueMicrotask(()=>{e&&e.fitContent()})},[...e,i])},E=({deps:e})=>(C({deps:e}),null),L=(0,t.createContext)({seriesApiRef:null,isReady:!1});L.displayName="SeriesContext";let g=({type:e,data:i,options:a={},reactive:n=!0,seriesOrder:l,alwaysReplaceData:u=!1,...s})=>{let{isReady:c,chartApiRef:f,chartKind:p}=h(r),{isPaneReady:o,isInsidePane:m,paneApiRef:y}=v(),[R,_]=(0,t.useState)(!1),S=(0,t.useRef)({_series:null,api(){return this._series},init(){if(!this._series){var t,r,n;let u=null==f?void 0:f.api();if(!u)return null;let c=m?null==y||null==(t=y.api())?void 0:t.paneIndex():void 0;if("Custom"===e){let e=s.plugin;if(!e)throw new d("Custom series requires a plugin to be defined");this._series=u.addCustomSeries(e,a,c)}else{if("yield-curve"===p&&"Area"!==e&&"Line"!==e)throw new d("YieldCurveChart only supports LineSeries and AreaSeries.",{isOperational:!0});this._series=u.addSeries(b[e],a,c)}null==(r=this._series)||r.setData(i),void 0!==l&&(null==(n=this._series)||n.setSeriesOrder(l)),_(!0)}return this._series},clear(){if(null!==this._series){var e;null==f||null==(e=f.api())||e.removeSeries(this._series),this._series=null,_(!1)}}});return(0,t.useLayoutEffect)(()=>{c&&(!m||o)&&S.current.init()},[c,m,o]),(0,t.useLayoutEffect)(()=>()=>{S.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(f&&i&&n){let e=S.current.api();if(!e)return;let t=e.data(),r=i.length-t.length;if(u||0===t.length||0===i.length||r<0||r>1)return void e.setData(i);let a=i[i.length-1];e.update(a)}},[i,n,u]),(0,t.useLayoutEffect)(()=>{if(f&&a){var e;null==(e=S.current.api())||e.applyOptions(a)}},[a]),(0,t.useLayoutEffect)(()=>{if(f&&void 0!==l){var e;null==(e=S.current.api())||e.setSeriesOrder(l)}},[l]),{isReady:R,seriesApiRef:S}},b={Line:e.LineSeries,Candlestick:e.CandlestickSeries,Histogram:e.HistogramSeries,Area:e.AreaSeries,Baseline:e.BaselineSeries,Bar:e.BarSeries},w=(0,t.forwardRef)(({children:e,...r},i)=>{let{seriesApiRef:{current:a},isReady:n}=g(r);return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(L.Provider,{value:{seriesApiRef:a,isReady:n}},e)});w.displayName="SeriesTemplate";let k=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Line",ref:i,...r},e));k.displayName="LineSeries";let P=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Histogram",ref:i,...r},e));P.displayName="HistogramSeries";let A=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Candlestick",ref:i,...r},e));A.displayName="CandlestickSeries";let N=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Area",ref:i,...r},e));N.displayName="AreaSeries";let O=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Baseline",ref:i,...r},e));O.displayName="BaselineSeries";let x=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Bar",ref:i,...r},e));x.displayName="BarSeries";let I=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Custom",ref:i,...r},e));I.displayName="CustomSeries";let H=({options:e,price:r})=>{let{isReady:i,seriesApiRef:a}=h(L),n=(0,t.useRef)({_priceLine:null,api(){return this._priceLine},init(){if(!this._priceLine){let t=null==a?void 0:a.api();if(!t)return null;this._priceLine=t.createPriceLine({price:r,...e})}return this._priceLine},clear(){if(null!==this._priceLine){var e;null==a||null==(e=a.api())||e.removePriceLine(this._priceLine),this._priceLine=null}}});return(0,t.useLayoutEffect)(()=>{i&&n.current.init()},[i]),(0,t.useLayoutEffect)(()=>()=>{n.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(a&&e){var t;null==(t=n.current.api())||t.applyOptions(e)}},[e]),(0,t.useLayoutEffect)(()=>{var e;a&&(null==(e=n.current.api())||e.applyOptions({price:r}))},[r]),n},T=(0,t.forwardRef)((e,r)=>{let i=H(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});T.displayName="PriceLine";let B=({reactive:r=!0,markers:i,options:a})=>{let{isReady:n,seriesApiRef:l}=h(L),u=(0,t.useRef)({_markers:null,api(){return this._markers},init(){if(null===this._markers){let t=null==l?void 0:l.api();if(!t)return null;this._markers=(0,e.createSeriesMarkers)(t,i,a)}return this._markers},clear(){null!==this._markers&&(this._markers.detach(),this._markers=null)}});return(0,t.useLayoutEffect)(()=>{n&&u.current.init()},[n]),(0,t.useLayoutEffect)(()=>()=>{u.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(l&&i&&r){var e;null==(e=u.current.api())||e.setMarkers(i)}},[i,r]),u},V=(0,t.forwardRef)(({...e},r)=>{let i=B(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});V.displayName="Markers";let W=e=>{let r=(0,t.useRef)(e);return r.current=e,r},M=i=>{let{isReady:a,chartApiRef:n}=h(r),{isPaneReady:l,isInsidePane:u,paneApiRef:s}=v(),c=W(i),f=W(n),p=W(s),o=$(i),m=(0,t.useRef)({_watermark:null,api(){return this._watermark},init(){if(null===this._watermark){var t,r;let i=null==(t=f.current)?void 0:t.api(),a=null==(r=p.current)?void 0:r.api(),n=c.current;if(!i||!a)return null;if(K(n)){let{type:t,...r}=n;this._watermark=(0,e.createTextWatermark)(a,r)}else{let{type:t,src:r,...i}=n;this._watermark=(0,e.createImageWatermark)(a,r,i)}}return this._watermark},clear(){null!==this._watermark&&(this._watermark.detach(),this._watermark=null)}});return(0,t.useLayoutEffect)(()=>{if(a){if(!u)throw new d("Watermark must be used inside a pane. Please ensure that the component is wrapped in a pane component.",{isOperational:!0,docsPath:""});l&&(m.current.clear(),m.current.init())}},[a,l,u,o]),(0,t.useLayoutEffect)(()=>()=>{m.current.clear()},[]),(0,t.useLayoutEffect)(()=>{var e;n&&i&&(null==(e=m.current.api())||e.applyOptions(D(i)))},[i]),m},D=e=>{if(K(e)){let{type:t,...r}=e;return r}let{type:t,src:r,...i}=e;return i},$=e=>{if(!K(e))return e.src},K=e=>"text"===e.type,Y=(e,r)=>{let i=M(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null},F=(0,t.forwardRef)((e,t)=>Y({...e,type:"text"},t)),j=(0,t.forwardRef)((e,t)=>Y({...e,type:"image"},t));F.displayName="WatermarkText",j.displayName="WatermarkImage";let q=({isReady:e,props:r,primitiveIdentity:i,mountPrimitive:a})=>{let n=(0,t.useRef)(r),l=(0,t.useRef)(i),u=(0,t.useRef)(a),s=(0,t.useRef)(null);n.current=r,u.current=a;let c=(0,t.useRef)({_primitive:null,api(){return this._primitive},init(){if(!this._primitive){let e=u.current(n.current);if(!e)return null;s.current=e.detach,this._primitive=e.primitive}return this._primitive},clear(){if(null!==this._primitive){var e;null==(e=s.current)||e.call(s),s.current=null,this._primitive=null}}});return(0,t.useLayoutEffect)(()=>{e&&(l.current!==i&&(c.current.clear(),l.current=i),c.current.init())},[e,i]),(0,t.useLayoutEffect)(()=>()=>{c.current.clear()},[]),c},z=e=>{let{isReady:i,chartApiRef:a}=h(r),{isInsidePane:n,isPaneReady:l,paneApiRef:u}=v(),s=(0,t.useRef)(a),c=(0,t.useRef)(u);s.current=a,c.current=u;let f=q({isReady:i&&n&&l,props:e,primitiveIdentity:e.plugin??e.render,mountPrimitive(e){var t,r;let i=null==(t=s.current)?void 0:t.api(),a=null==(r=c.current)?void 0:r.api();if(!i||!a)return null;let n=void 0!==e.plugin?e.plugin:e.render({chart:i,pane:a});return a.attachPrimitive(n),{primitive:n,detach:()=>a.detachPrimitive(n)}}});return(0,t.useLayoutEffect)(()=>{if(i&&!n)throw new d("PanePrimitive must be used inside a pane. Please ensure that the component is wrapped in a pane component.",{isOperational:!0,docsPath:"pane-primitives"})},[i,n]),f},G=(0,t.forwardRef)((e,r)=>{let i=z(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});G.displayName="PanePrimitive";let J=e=>{let{isReady:i,chartApiRef:a}=h(r),{isReady:n,seriesApiRef:l}=h(L),u=(0,t.useRef)(a),s=(0,t.useRef)(l);return u.current=a,s.current=l,q({isReady:i&&n,props:e,primitiveIdentity:e.plugin??e.render,mountPrimitive(e){var t,r;let i=null==(t=s.current)?void 0:t.api(),a=null==(r=u.current)?void 0:r.api();if(!a||!i)return null;let n=void 0!==e.plugin?e.plugin:e.render({chart:a,series:i});return i.attachPrimitive(n),{primitive:n,detach:()=>i.detachPrimitive(n)}}})},Q=(0,t.forwardRef)((e,r)=>{let i=J(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});Q.displayName="SeriesPrimitive";let U=({stretchFactor:e}={})=>{let{chartApiRef:i,isReady:a}=h(r),[n,l]=(0,t.useState)(!1),u=(0,t.useRef)({_pane:null,api(){return this._pane},init(){let t=null==i?void 0:i.api();if(!t)return null;let r=t.addPane(!0);return this._pane=r,l(!0),void 0!==e&&this._pane.setStretchFactor(e),this._pane},clear(){if(null!==this._pane){var e;null==i||null==(e=i.api())||e.removePane(this._pane.paneIndex()),l(!1),this._pane=null}}});return(0,t.useLayoutEffect)(()=>{a&&u.current.init()},[a]),(0,t.useEffect)(()=>()=>{u.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(void 0===e)return;let t=u.current.api();t&&t.setStretchFactor(e)},[e]),{paneApiRef:u,isReady:n}},X=(0,t.forwardRef)(({children:e,stretchFactor:r},i)=>{let{paneApiRef:{current:a},isReady:n}=U({stretchFactor:r});return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(m.Provider,{value:{paneApiRef:a,isReady:n}},e)});X.displayName="Pane";export{N as AreaSeries,x as BarSeries,O as BaselineSeries,A as CandlestickSeries,l as Chart,c as CustomChart,I as CustomSeries,P as HistogramSeries,k as LineSeries,V as Markers,u as OptionsChart,X as Pane,G as PanePrimitive,T as PriceLine,S as PriceScale,Q as SeriesPrimitive,R as TimeScale,E as TimeScaleFitContentTrigger,j as WatermarkImage,F as WatermarkText,s as YieldCurveChart};
+Version: lightweight-charts-react-components@${o}`),Object.setPrototypeOf(this,h.prototype)}}let m=(e,r)=>{let i=(0,t.useContext)(e);if(!i){let t=e.name??e.displayName??"Context";throw new h(r??`${t} not found.`,{isOperational:!0})}return i},v=(0,t.createContext)(null);v.displayName="PaneContext";let y=()=>{let e=(0,t.useContext)(v),r=!!e;return{isInsidePane:r,isPaneReady:!!(null==e?void 0:e.isReady),paneApiRef:null==e?void 0:e.paneApiRef}},R=({onVisibleTimeRangeChange:e,onVisibleLogicalRangeChange:r,onSizeChange:a,visibleRange:n,visibleLogicalRange:l,options:u={}})=>{let{isReady:s,chartApiRef:c}=m(i),{isPaneReady:f,isInsidePane:p}=y(),[o,d]=(0,t.useState)(!1),h=(0,t.useRef)({_timeScale:null,api(){return this._timeScale},init(){if(this._timeScale)return this._timeScale;let e=null==c?void 0:c.api();return e?(this._timeScale=e.timeScale(),this._timeScale.applyOptions(u),n&&this._timeScale.setVisibleRange(n),l&&this._timeScale.setVisibleLogicalRange(l),d(!0),this._timeScale):null},clear(){this._timeScale=null,d(!1)}});return(0,t.useLayoutEffect)(()=>{s&&(!p||f)&&h.current.init()},[s,p,f]),(0,t.useLayoutEffect)(()=>()=>{h.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(c&&u){var e,t;null==(t=h.current)||null==(e=t.api())||e.applyOptions(u)}},[u]),(0,t.useLayoutEffect)(()=>{if(!c||!o)return;let e=h.current.api();return a&&e&&e.subscribeSizeChange(a),()=>{a&&e&&e.unsubscribeSizeChange(a)}},[c,o,a]),(0,t.useLayoutEffect)(()=>{if(!c||!o)return;let e=h.current.api();return r&&e&&e.subscribeVisibleLogicalRangeChange(r),()=>{r&&e&&e.unsubscribeVisibleLogicalRangeChange(r)}},[c,o,r]),(0,t.useLayoutEffect)(()=>{if(!c||!o)return;let t=h.current.api();return e&&t&&t.subscribeVisibleTimeRangeChange(e),()=>{e&&t&&t.unsubscribeVisibleTimeRangeChange(e)}},[c,o,e]),(0,t.useLayoutEffect)(()=>{if(c&&n){var e,t;null==(t=h.current)||null==(e=t.api())||e.setVisibleRange(n)}},[n]),(0,t.useLayoutEffect)(()=>{if(c&&l){var e,t;null==(t=h.current)||null==(e=t.api())||e.setVisibleLogicalRange(l)}},[l]),{timeScaleApiRef:h,isReady:o}},_=(0,t.forwardRef)(({children:e,...r},i)=>{let{timeScaleApiRef:{current:a},isReady:n}=R(r);return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(p.Provider,{value:{timeScaleApiRef:a,isReady:n}},e)});_.displayName="TimeScale";let S=({options:e={},id:r})=>{let{isReady:a,chartApiRef:n}=m(i),{isInsidePane:l,isPaneReady:u}=y(),s=(0,t.useRef)({_priceScale:null,api(){return this._priceScale},init(){if(!this._priceScale){let t=null==n?void 0:n.api();if(!t)return null;this._priceScale=t.priceScale(r),this._priceScale.applyOptions(e)}return this._priceScale},setId(t){null!==this._priceScale&&null!==n&&(this._priceScale=n.api().priceScale(t),this._priceScale.applyOptions(e))},clear(){this._priceScale=null}});return(0,t.useLayoutEffect)(()=>{if(a){if(!l)throw new h("PriceScale must be used inside a pane. Please ensure that the component is wrapped in a pane component.",{isOperational:!0,docsPath:""});u&&s.current.init()}},[a,l,u]),(0,t.useLayoutEffect)(()=>()=>{s.current.clear()},[]),(0,t.useLayoutEffect)(()=>{var e;n&&(null==(e=s.current)||e.setId(r))},[r]),(0,t.useLayoutEffect)(()=>{if(n&&e){var t,r;null==(r=s.current)||null==(t=r.api())||t.applyOptions(e)}},[e]),s},C=(0,t.forwardRef)((e,r)=>{let i=S(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});C.displayName="PriceScale";let g=({deps:e})=>{let{timeScaleApiRef:r,isReady:i}=m(p);(0,t.useLayoutEffect)(()=>{if(!i||!r)return;let e=r.api();queueMicrotask(()=>{e&&e.fitContent()})},[...e,i])},E=({deps:e})=>(g({deps:e}),null),L=(0,t.createContext)({seriesApiRef:null,isReady:!1});L.displayName="SeriesContext";let w=({type:e,data:r,options:a={},reactive:n=!0,seriesOrder:l,alwaysReplaceData:u=!1,...s})=>{let{isReady:c,chartApiRef:f,chartKind:p}=m(i),{isPaneReady:o,isInsidePane:d,paneApiRef:v}=y(),[R,_]=(0,t.useState)(!1),S=(0,t.useRef)({_series:null,api(){return this._series},init(){if(!this._series){var t,i,n;let u=null==f?void 0:f.api();if(!u)return null;let c=d?null==v||null==(t=v.api())?void 0:t.paneIndex():void 0;if("Custom"===e){let e=s.plugin;if(!e)throw new h("Custom series requires a plugin to be defined");this._series=u.addCustomSeries(e,a,c)}else{if("yield-curve"===p&&"Area"!==e&&"Line"!==e)throw new h("YieldCurveChart only supports LineSeries and AreaSeries.",{isOperational:!0});this._series=u.addSeries(b[e],a,c)}null==(i=this._series)||i.setData(r),void 0!==l&&(null==(n=this._series)||n.setSeriesOrder(l)),_(!0)}return this._series},clear(){if(null!==this._series){if(!(null==f?void 0:f._isDisposing)){var e;null==f||null==(e=f.api())||e.removeSeries(this._series)}this._series=null,_(!1)}}});return(0,t.useLayoutEffect)(()=>{c&&(!d||o)&&S.current.init()},[c,d,o]),(0,t.useLayoutEffect)(()=>()=>{S.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(f&&r&&n){let e=S.current.api();if(!e)return;let t=e.data();if(u||!k(t,r))return void e.setData(r);let i=r[r.length-1];e.update(i)}},[r,n,u]),(0,t.useLayoutEffect)(()=>{if(f&&a){var e;null==(e=S.current.api())||e.applyOptions(a)}},[a]),(0,t.useLayoutEffect)(()=>{if(f&&void 0!==l){var e;null==(e=S.current.api())||e.setSeriesOrder(l)}},[l]),{isReady:R,seriesApiRef:S}},b={Line:e.LineSeries,Candlestick:e.CandlestickSeries,Histogram:e.HistogramSeries,Area:e.AreaSeries,Baseline:e.BaselineSeries,Bar:e.BarSeries},k=(e,t)=>{let r=t.length-e.length;return 0!==e.length&&0!==t.length&&!(r<0)&&!(r>1)&&(0===r?P(e,t,e.length-1)&&A(e[e.length-1],t[t.length-1]):P(e,t,e.length)&&!A(e[e.length-1],t[t.length-1]))},P=(e,t,r)=>{for(let i=0;i<r;i+=1)if(e[i]!==t[i])return!1;return!0},A=(e,t)=>{let r=e.time,i=t.time;return r===i||N(r)&&N(i)&&O(r,i)},N=t=>(0,e.isBusinessDay)(t),O=(e,t)=>e.year===t.year&&e.month===t.month&&e.day===t.day,x=(0,t.forwardRef)(({children:e,...r},i)=>{let{seriesApiRef:{current:a},isReady:n}=w(r);return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(L.Provider,{value:{seriesApiRef:a,isReady:n}},e)});x.displayName="SeriesTemplate";let I=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(x,{type:"Line",ref:i,...r},e));I.displayName="LineSeries";let H=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(x,{type:"Histogram",ref:i,...r},e));H.displayName="HistogramSeries";let B=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(x,{type:"Candlestick",ref:i,...r},e));B.displayName="CandlestickSeries";let D=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(x,{type:"Area",ref:i,...r},e));D.displayName="AreaSeries";let T=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(x,{type:"Baseline",ref:i,...r},e));T.displayName="BaselineSeries";let V=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(x,{type:"Bar",ref:i,...r},e));V.displayName="BarSeries";let W=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(x,{type:"Custom",ref:i,...r},e));W.displayName="CustomSeries";let M=({options:e,price:r})=>{let{isReady:i,seriesApiRef:a}=m(L),n=(0,t.useRef)({_priceLine:null,api(){return this._priceLine},init(){if(!this._priceLine){let t=null==a?void 0:a.api();if(!t)return null;this._priceLine=t.createPriceLine({price:r,...e})}return this._priceLine},clear(){if(null!==this._priceLine){var e;null==a||null==(e=a.api())||e.removePriceLine(this._priceLine),this._priceLine=null}}});return(0,t.useLayoutEffect)(()=>{i&&n.current.init()},[i]),(0,t.useLayoutEffect)(()=>()=>{n.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(a&&e){var t;null==(t=n.current.api())||t.applyOptions(e)}},[e]),(0,t.useLayoutEffect)(()=>{var e;a&&(null==(e=n.current.api())||e.applyOptions({price:r}))},[r]),n},$=(0,t.forwardRef)((e,r)=>{let i=M(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});$.displayName="PriceLine";let K=({reactive:r=!0,markers:i,options:a})=>{let{isReady:n,seriesApiRef:l}=m(L),u=(0,t.useRef)({_markers:null,api(){return this._markers},init(){if(null===this._markers){let t=null==l?void 0:l.api();if(!t)return null;this._markers=(0,e.createSeriesMarkers)(t,i,a)}return this._markers},clear(){null!==this._markers&&(this._markers.detach(),this._markers=null)}});return(0,t.useLayoutEffect)(()=>{n&&u.current.init()},[n]),(0,t.useLayoutEffect)(()=>()=>{u.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(l&&i&&r){var e;null==(e=u.current.api())||e.setMarkers(i)}},[i,r]),u},Y=(0,t.forwardRef)(({...e},r)=>{let i=K(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});Y.displayName="Markers";let F=e=>{let r=(0,t.useRef)(e);return r.current=e,r},j=r=>{let{isReady:a,chartApiRef:n}=m(i),{isPaneReady:l,isInsidePane:u,paneApiRef:s}=y(),c=F(r),f=F(n),p=F(s),o=z(r),d=(0,t.useRef)({_watermark:null,api(){return this._watermark},init(){if(null===this._watermark){var t,r;let i=null==(t=f.current)?void 0:t.api(),a=null==(r=p.current)?void 0:r.api(),n=c.current;if(!i||!a)return null;if(G(n)){let{type:t,...r}=n;this._watermark=(0,e.createTextWatermark)(a,r)}else{let{type:t,src:r,...i}=n;this._watermark=(0,e.createImageWatermark)(a,r,i)}}return this._watermark},clear(){null!==this._watermark&&(this._watermark.detach(),this._watermark=null)}});return(0,t.useLayoutEffect)(()=>{if(a){if(!u)throw new h("Watermark must be used inside a pane. Please ensure that the component is wrapped in a pane component.",{isOperational:!0,docsPath:""});l&&(d.current.clear(),d.current.init())}},[a,l,u,o]),(0,t.useLayoutEffect)(()=>()=>{d.current.clear()},[]),(0,t.useLayoutEffect)(()=>{var e;n&&r&&(null==(e=d.current.api())||e.applyOptions(q(r)))},[r]),d},q=e=>{if(G(e)){let{type:t,...r}=e;return r}let{type:t,src:r,...i}=e;return i},z=e=>{if(!G(e))return e.src},G=e=>"text"===e.type,J=(e,r)=>{let i=j(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null},Q=(0,t.forwardRef)((e,t)=>J({...e,type:"text"},t)),U=(0,t.forwardRef)((e,t)=>J({...e,type:"image"},t));Q.displayName="WatermarkText",U.displayName="WatermarkImage";let X=({isReady:e,props:r,primitiveIdentity:i,mountPrimitive:a})=>{let n=(0,t.useRef)(r),l=(0,t.useRef)(i),u=(0,t.useRef)(a),s=(0,t.useRef)(null);n.current=r,u.current=a;let c=(0,t.useRef)({_primitive:null,api(){return this._primitive},init(){if(!this._primitive){let e=u.current(n.current);if(!e)return null;s.current=e.detach,this._primitive=e.primitive}return this._primitive},clear(){if(null!==this._primitive){var e;null==(e=s.current)||e.call(s),s.current=null,this._primitive=null}}});return(0,t.useLayoutEffect)(()=>{e&&(l.current!==i&&(c.current.clear(),l.current=i),c.current.init())},[e,i]),(0,t.useLayoutEffect)(()=>()=>{c.current.clear()},[]),c},Z=e=>{let{isReady:r,chartApiRef:a}=m(i),{isInsidePane:n,isPaneReady:l,paneApiRef:u}=y(),s=(0,t.useRef)(a),c=(0,t.useRef)(u);s.current=a,c.current=u;let f=X({isReady:r&&n&&l,props:e,primitiveIdentity:e.plugin??e.render,mountPrimitive(e){var t,r;let i=null==(t=s.current)?void 0:t.api(),a=null==(r=c.current)?void 0:r.api();if(!i||!a)return null;let n=void 0!==e.plugin?e.plugin:e.render({chart:i,pane:a});return a.attachPrimitive(n),{primitive:n,detach:()=>a.detachPrimitive(n)}}});return(0,t.useLayoutEffect)(()=>{if(r&&!n)throw new h("PanePrimitive must be used inside a pane. Please ensure that the component is wrapped in a pane component.",{isOperational:!0,docsPath:"pane-primitives"})},[r,n]),f},ee=(0,t.forwardRef)((e,r)=>{let i=Z(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});ee.displayName="PanePrimitive";let et=e=>{let{isReady:r,chartApiRef:a}=m(i),{isReady:n,seriesApiRef:l}=m(L),u=(0,t.useRef)(a),s=(0,t.useRef)(l);return u.current=a,s.current=l,X({isReady:r&&n,props:e,primitiveIdentity:e.plugin??e.render,mountPrimitive(e){var t,r;let i=null==(t=s.current)?void 0:t.api(),a=null==(r=u.current)?void 0:r.api();if(!a||!i)return null;let n=void 0!==e.plugin?e.plugin:e.render({chart:a,series:i});return i.attachPrimitive(n),{primitive:n,detach:()=>i.detachPrimitive(n)}}})},er=(0,t.forwardRef)((e,r)=>{let i=et(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});er.displayName="SeriesPrimitive";let ei=({stretchFactor:e}={})=>{let{chartApiRef:r,isReady:a}=m(i),[n,l]=(0,t.useState)(!1),u=(0,t.useRef)({_pane:null,api(){return this._pane},init(){let t=null==r?void 0:r.api();if(!t)return null;let i=t.addPane(!0);return this._pane=i,l(!0),void 0!==e&&this._pane.setStretchFactor(e),this._pane},clear(){if(null!==this._pane){var e;null==r||null==(e=r.api())||e.removePane(this._pane.paneIndex()),l(!1),this._pane=null}}});return(0,t.useLayoutEffect)(()=>{a&&u.current.init()},[a]),(0,t.useEffect)(()=>()=>{u.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(void 0===e)return;let t=u.current.api();t&&t.setStretchFactor(e)},[e]),{paneApiRef:u,isReady:n}},ea=(0,t.forwardRef)(({children:e,stretchFactor:r},i)=>{let{paneApiRef:{current:a},isReady:n}=ei({stretchFactor:r});return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(v.Provider,{value:{paneApiRef:a,isReady:n}},e)});ea.displayName="Pane";export{D as AreaSeries,V as BarSeries,T as BaselineSeries,B as CandlestickSeries,u as Chart,f as CustomChart,W as CustomSeries,H as HistogramSeries,I as LineSeries,Y as Markers,s as OptionsChart,ea as Pane,ee as PanePrimitive,$ as PriceLine,C as PriceScale,er as SeriesPrimitive,_ as TimeScale,E as TimeScaleFitContentTrigger,U as WatermarkImage,Q as WatermarkText,c as YieldCurveChart};
 //# sourceMappingURL=lightweight-charts-react-components.mjs.map