lightweight-charts-react-components 1.0.1 → 1.1.1

package/README.md

@@ -151,7 +151,7 @@ const data = [
   { time: "2023-01-03", value: 102 },
 ];
 
-const Example = () => {
+const App = () => {
   return (
     <Chart>
       <LineSeries data={data} />
@@ -159,7 +159,7 @@ const Example = () => {
   );
 };
 
-export { Example };
+export { App };
 ```
 
 The following is an advanced example that demonstrates how to use custom scales, panes and multiple series in a single chart:
@@ -169,7 +169,7 @@ import React from "react";
 import {
   Chart,
   LineSeries,
-  BarSeries,
+  HistogramSeries,
   PriceScale,
   TimeScale,
   TimeScaleFitContentTrigger,
@@ -182,9 +182,9 @@ const data = [
   { time: "2023-01-03", value: 102 },
 ];
 const volumeData = [
-  { time: "2023-01-01", value: 1000 },
-  { time: "2023-01-02", value: 1100 },
-  { time: "2023-01-03", value: 1200 },
+  { time: "2023-01-01", value: 1000, color: "rgba(0, 150, 136, 0.5)" },
+  { time: "2023-01-02", value: 1100, color: "rgba(0, 150, 136, 0.5)" },
+  { time: "2023-01-03", value: 1200, color: "rgba(0, 150, 136, 0.5)" },
 ];
 
 const chartOptions = {
@@ -195,7 +195,7 @@ const priceScaleOptions = {
   // Price scale options can be customized here
 };
 
-const AdvancedExample = () => {
+const App = () => {
   return (
     <Chart options={chartOptions}>
       <Pane stretchFactor={2}>
@@ -203,7 +203,7 @@ const AdvancedExample = () => {
         <PriceScale id="left" options={priceScaleOptions} />
       </Pane>
       <Pane>
-        <BarSeries data={volumeData} />
+        <HistogramSeries data={volumeData} />
       </Pane>
       <TimeScale>
         <TimeScaleFitContentTrigger deps={[]} />
@@ -212,7 +212,7 @@ const AdvancedExample = () => {
   );
 };
 
-export { AdvancedExample };
+export { App };
 ```
 
 ## Examples

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 
 /**!
-* lightweight-charts-react-components v1.0.1
+* lightweight-charts-react-components v1.1.1
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.md file in the root directory of this source tree.
@@ -43,16 +43,112 @@ import { Time } from 'lightweight-charts';
 import type { TimeRangeChangeEventHandler } from 'lightweight-charts';
 import type { TimeScaleOptions as TimeScaleOptions_2 } from 'lightweight-charts';
 
+/**
+ * AreaSeries component that can be used to create an area series in a chart.
+ *
+ * @param props - The properties for the area series.
+ * @param ref - The ref to access the area series API.
+ * @returns A React component that renders the area series.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/series | Series documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/docs/series-types#area | TradingView documentation for area series}
+ * @example
+ * ```tsx
+ * <AreaSeries
+ *  data={[
+ *    { time: '2021-01-01', value: 100 },
+ *    { time: '2021-01-02', value: 200 }
+ *  ]}
+ *  options={{}}
+ * />
+ * ```
+ */
 export declare const AreaSeries: ForwardRefExoticComponent<SeriesProps<"Area"> & RefAttributes<SeriesApiRef<"Area">>>;
 
+/**
+ * BarSeries component that can be used to create a bar series in a chart.
+ *
+ * @param props - The properties for the bar series.
+ * @param ref - The ref to access the bar series API.
+ * @returns A React component that renders the bar series.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/series | Series documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/docs/series-types#bar | TradingView documentation for bar series}
+ * @example
+ * ```tsx
+ * <BarSeries
+ *  data={[
+ *    { time: '2021-01-01', open: 100, high: 110, low: 90, close: 105 },
+ *    { time: '2021-01-02', open: 105, high: 115, low: 95, close: 110 }
+ *  ]}
+ *  options={{}}
+ * />
+ * ```
+ */
 export declare const BarSeries: ForwardRefExoticComponent<SeriesProps<"Bar"> & RefAttributes<SeriesApiRef<"Bar">>>;
 
+/**
+ * BaselineSeries component that can be used to create a baseline series in a chart.
+ *
+ * @param props - The properties for the baseline series.
+ * @param ref - The ref to access the baseline series API.
+ * @returns A React component that renders the baseline series.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/series | Series documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/docs/series-types#baseline | TradingView documentation for baseline series}
+ * @example
+ * ```tsx
+ * <BaselineSeries
+ *  data={[
+ *    { time: '2021-01-01', value: 100 },
+ *    { time: '2021-01-02', value: 200 }
+ *  ]}
+ *  options={{}}
+ * />
+ * ```
+ */
 export declare const BaselineSeries: ForwardRefExoticComponent<SeriesProps<"Baseline"> & RefAttributes<SeriesApiRef<"Baseline">>>;
 
+/**
+ * CandlestickSeries component that can be used to create a candlestick series in a chart.
+ *
+ * @param props - The properties for the candlestick series.
+ * @param ref - The ref to access the candlestick series API.
+ * @returns A React component that renders the candlestick series.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/series | Series documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/docs/series-types#candlestick | TradingView documentation for candlestick series}
+ * @example
+ * ```tsx
+ * <CandlestickSeries
+ *  data={[
+ *    { time: '2021-01-01', open: 100, high: 110, low: 90, close: 105 },
+ *    { time: '2021-01-02', open: 105, high: 115, low: 95, close: 110 }
+ *  ]}
+ *  options={{}}
+ * />
+ * ```
+ */
 export declare const CandlestickSeries: ForwardRefExoticComponent<SeriesProps<"Candlestick"> & RefAttributes<SeriesApiRef<"Candlestick">>>;
 
+/**
+ * Chart component that can be used to create a chart.
+ *
+ * @param props - The properties for the chart.
+ * @param ref - The ref to access the chart API.
+ * @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}
+ * @example
+ * ```tsx
+ * <Chart>
+ *   <Pane stretchFactor={2}>
+ *     ...
+ *   </Pane>
+ * </Chart>
+ * ```
+ */
 export declare const Chart: ForwardRefExoticComponent<ChartProps & RefAttributes<HTMLDivElement>>;
 
+/**
+ * Chart API reference type that can be used to access the chart plugin API.
+ */
 export declare type ChartApiRef = {
     _chart: IChartApi | null;
     api: () => IChartApi | null;
@@ -60,6 +156,9 @@ export declare type ChartApiRef = {
     clear: () => void;
 };
 
+/**
+ * Chart component props.
+ */
 export declare type ChartProps = {
     children?: ReactNode;
     containerProps?: JSX.IntrinsicElements["div"];
@@ -70,8 +169,31 @@ export declare type ChartProps = {
     onDblClick?: MouseEventHandler<Time>;
 };
 
+/**
+ * CustomSeries component that can be used to create a custom series in a chart.
+ *
+ * @param props - The properties for the custom series.
+ * @param ref - The ref to access the custom series API.
+ * @returns A React component that renders the custom series.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/series | Series documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/docs/series-types#custom-series-plugins | TradingView documentation for custom series}
+ * @example
+ * ```tsx
+ * <CustomSeries
+ *  data={[
+ *    { time: '2021-01-01', value: 100 },
+ *    { time: '2021-01-02', value: 200 }
+ *  ]}
+ *  options={{}}
+ *  plugin={{}}
+ * />
+ * ```
+ */
 export declare const CustomSeries: ForwardRefExoticComponent<SeriesProps<"Custom"> & RefAttributes<SeriesApiRef<"Custom">>>;
 
+/**
+ * Unique properties for the custom series component.
+ */
 declare type CustomSeriesUniqueProps = {
     plugin?: ICustomSeriesPaneView;
 };
@@ -82,21 +204,86 @@ declare type GenericSeriesPrimitiveComponent = (<T extends SeriesType>(props: Se
     displayName: string;
 };
 
+/**
+ * HistogramSeries component that can be used to create a histogram series in a chart.
+ *
+ * @param props - The properties for the histogram series.
+ * @param ref - The ref to access the histogram series API.
+ * @returns A React component that renders the histogram series.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/series | Series documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/docs/series-types#histogram | TradingView documentation for histogram series}
+ * @example
+ * ```tsx
+ * <HistogramSeries
+ *  data={[
+ *    { time: '2021-01-01', value: 100 },
+ *    { time: '2021-01-02', value: 200 }
+ *  ]}
+ *  options={{}}
+ * />
+ * ```
+ */
 export declare const HistogramSeries: ForwardRefExoticComponent<SeriesProps<"Histogram"> & RefAttributes<SeriesApiRef<"Histogram">>>;
 
+/**
+ * Unique properties for the image watermark component.
+ */
 export declare type ImageWatermarkProps = {
     src: string;
 } & DeepPartial<ImageWatermarkOptions>;
 
+/**
+ * Pane context that provides access to the pane API and readiness state.
+ */
 export declare interface IPaneContext {
     paneApiRef?: PaneApiRef;
     isReady: boolean;
 }
 
+/**
+ * LineSeries component that can be used to create a line series in a chart.
+ *
+ * @param props - The properties for the line series.
+ * @param ref - The ref to access the line series API.
+ * @returns A React component that renders the line series.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/series | Series documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/docs/series-types#line | TradingView documentation for line series}
+ * @example
+ * ```tsx
+ * <LineSeries
+ *  data={[
+ *    { time: '2021-01-01', value: 100 },
+ *    { time: '2021-01-02', value: 200 }
+ *  ]}
+ *  options={{}}
+ * />
+ * ```
+ */
 export declare const LineSeries: ForwardRefExoticComponent<SeriesProps<"Line"> & RefAttributes<SeriesApiRef<"Line">>>;
 
+/**
+ * Markers component that can be used to add markers to a chart pane.
+ *
+ * @param props - The properties for the markers.
+ * @param ref - The ref to access the markers API.
+ * @returns A React component that renders the markers.
+ * @see {@link https://tradingview.github.io/lightweight-charts/tutorials/how_to/series-markers | Markers documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/docs/markers | TradingView documentation for markers}
+ * @example
+ * ```tsx
+ * <Markers
+ *  markers={[
+ *    { time: 1622548800, position: "aboveBar", color: "red", shape: "arrowUp" },
+ *    { time: 1622548800, position: "belowBar", color: "green", shape: "arrowDown" },
+ *  ]}
+ * />
+ * ```
+ */
 export declare const Markers: ForwardRefExoticComponent<MarkersProps & RefAttributes<MarkersApiRef>>;
 
+/**
+ * Markers API reference type that can be used to access the series markers plugin API.
+ */
 export declare type MarkersApiRef = {
     _markers: ISeriesMarkersPluginApi<Time> | null;
     api: () => ISeriesMarkersPluginApi<Time> | null;
@@ -104,13 +291,34 @@ export declare type MarkersApiRef = {
     clear: () => void;
 };
 
+/**
+ * Markers component properties that can be used to create a series markers component.
+ */
 export declare type MarkersProps = {
     markers: SeriesMarker<Time>[];
     reactive?: boolean;
 };
 
+/**
+ * Pane component that can be used to create a pane in a chart.
+ *
+ * @param props - The properties for the pane.
+ * @param ref - The ref to access the pane API.
+ * @returns A React component that renders the pane.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/panes | Panes documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/docs/panes | TradingView documentation for panes}
+ * @example
+ * ```tsx
+ * <Pane stretchFactor={2}>
+ * ...
+ * </Pane>
+ * ```
+ */
 export declare const Pane: ForwardRefExoticComponent<PaneProps & RefAttributes<PaneApiRef>>;
 
+/**
+ * Pane API reference type that can be used to access the pane plugin API.
+ */
 export declare type PaneApiRef = {
     _pane: IPaneApi<Time> | null;
     api: () => IPaneApi<Time> | null;
@@ -118,13 +326,32 @@ export declare type PaneApiRef = {
     clear: () => void;
 };
 
+/**
+ * Pane component props.
+ */
 export declare type PaneProps = {
     children?: ReactNode;
     stretchFactor?: number;
 };
 
+/**
+ * PriceLine component that can be used to add a price line to a chart pane.
+ *
+ * @param props - The properties for the price line.
+ * @param ref - The ref to access the price line API.
+ * @returns A React component that renders the price line.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/price-lines | Price Lines documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/tutorials/how_to/price-line | TradingView documentation for price lines}
+ * @example
+ * ```tsx
+ * <PriceLine price={100} options={{}} />
+ * ```
+ */
 export declare const PriceLine: ForwardRefExoticComponent<PriceLineProps & RefAttributes<PriceLineApiRef>>;
 
+/**
+ * PriceLine API reference type that can be used to access the price line plugin API.
+ */
 export declare type PriceLineApiRef = {
     _priceLine: IPriceLine | null;
     api: () => IPriceLine | null;
@@ -132,13 +359,32 @@ export declare type PriceLineApiRef = {
     clear: () => void;
 };
 
+/**
+ * PriceLine component props.
+ */
 export declare type PriceLineProps = {
     price: number;
     options?: Omit<Partial<PriceLineOptions>, "price">;
 };
 
+/**
+ * PriceScale component that can be used to create/customize price scale in a chart.
+ *
+ * @param props - The properties for the price scale.
+ * @param ref - The ref to access the price scale API.
+ * @returns A React component that renders the price scale.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/price-scale | Price Scale documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/docs/price-scale | TradingView documentation for price scale}
+ * @example
+ * ```tsx
+ * <PriceScale id="right" options={{}} />
+ * ```
+ */
 export declare const PriceScale: ForwardRefExoticComponent<PriceScaleProps & RefAttributes<PriceScaleApiRef>>;
 
+/**
+ * Price scale API reference type that can be used to access the price scale plugin API.
+ */
 export declare type PriceScaleApiRef = {
     _priceScale: IPriceScaleApi | null;
     api: () => IPriceScaleApi | null;
@@ -149,16 +395,25 @@ export declare type PriceScaleApiRef = {
 
 declare type PriceScaleOptions = DeepPartial<PriceScaleOptions_2>;
 
+/**
+ * PriceScale component props.
+ */
 export declare type PriceScaleProps = {
     options?: PriceScaleOptions;
     id: string;
 };
 
+/**
+ * Render function type for series primitives.
+ */
 export declare type RenderPrimitive<T extends SeriesType = SeriesType> = ({ chart, series, }: {
     chart: IChartApi;
     series: ISeriesApi<T>;
 }) => ISeriesPrimitive;
 
+/**
+ * Series API reference type that can be used to access the series plugin API.
+ */
 export declare type SeriesApiRef<T extends SeriesType> = {
     _series: ISeriesApi<T> | null;
     api: () => ISeriesApi<T> | null;
@@ -166,6 +421,9 @@ export declare type SeriesApiRef<T extends SeriesType> = {
     clear: () => void;
 };
 
+/**
+ * Series options that can be used to customize the appearance and behavior of a series.
+ */
 export declare type SeriesOptions<T extends SeriesType> = SeriesPartialOptionsMap[T];
 
 declare type SeriesParameters<T extends SeriesType> = {
@@ -174,8 +432,25 @@ declare type SeriesParameters<T extends SeriesType> = {
     options?: SeriesOptions<T>;
 } & (T extends "Custom" ? CustomSeriesUniqueProps : {});
 
+/**
+ * SeriesPrimitive component that can be used to create a primitive on series.
+ *
+ * @param props - The properties for the series primitive.
+ * @param ref - The ref to access the series primitive API.
+ * @returns A React component that renders the series primitive.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/series-primitives | Series primitives documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/docs/plugins/series-primitives | TradingView documentation for series primitive}
+ * @example
+ * ```tsx
+ * <SeriesPrimitive render={{}} />
+ * <SeriesPrimitive plugin={{}} />
+ * ```
+ */
 export declare const SeriesPrimitive: GenericSeriesPrimitiveComponent;
 
+/**
+ * Series primitive API reference type that can be used to access the series primitive plugin API.
+ */
 export declare type SeriesPrimitiveApiRef = {
     _primitive: ISeriesPrimitive | null;
     api(): ISeriesPrimitive | null;
@@ -183,6 +458,9 @@ export declare type SeriesPrimitiveApiRef = {
     clear(): void;
 };
 
+/**
+ * Series primitive properties that can be used to create a series primitive.
+ */
 export declare type SeriesPrimitiveProps<T extends SeriesType = SeriesType> = SeriesPrimitivePropsWithRender<T> | SeriesPrimitivePropsWithPlugin;
 
 declare type SeriesPrimitivePropsWithPlugin = {
@@ -197,17 +475,42 @@ declare type SeriesPrimitivePropsWithRender<T extends SeriesType> = {
 
 declare const SeriesPrimitiveRenderFunction: <T extends SeriesType>(props: SeriesPrimitiveProps<T>, ref: ForwardedRef<SeriesPrimitiveApiRef>) => JSX.Element | null;
 
+/**
+ * Series component properties that can be used to create a series of a specific type.
+ */
 export declare type SeriesProps<T extends SeriesType> = Omit<SeriesTemplateProps<T>, "type">;
 
+/**
+ * Properties of a series template component that can be used to create a series of a specific type.
+ */
 declare type SeriesTemplateProps<T extends SeriesType> = {
     type: T;
     children?: ReactNode;
 } & SeriesParameters<T>;
 
+/**
+ * Unique properties for the text watermark component.
+ */
 export declare type TextWatermarkProps = DeepPartial<TextWatermarkOptions>;
 
+/**
+ * TimeScale component that can be used to create/customize time scale in a chart.
+ *
+ * @param props - The properties for the time scale.
+ * @param ref - The ref to access the time scale API.
+ * @returns A React component that renders the time scale.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/time-scale | Time Scale documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/docs/time-scale | TradingView documentation for time scale}
+ * @example
+ * ```tsx
+ * <TimeScale visibleRange={{ from: 0, to: 100 }} onVisibleRangeChanged={() => {}} />
+ * ```
+ */
 export declare const TimeScale: ForwardRefExoticComponent<TimeScaleProps & RefAttributes<TimeScaleApiRef>>;
 
+/**
+ * Time scale API reference type that can be used to access the time scale plugin API.
+ */
 export declare type TimeScaleApiRef = {
     _timeScale: ITimeScaleApi<Time> | null;
     api: () => ITimeScaleApi<Time> | null;
@@ -215,14 +518,31 @@ export declare type TimeScaleApiRef = {
     clear: () => void;
 };
 
+/**
+ * TimeScaleFitContentTrigger component that triggers a fit content operation on the time scale.
+ *
+ * @param props - The properties for the time scale fit content trigger.
+ * @returns A React component that triggers a fit content operation on the time scale.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/time-scale-fit-content-trigger | Time Scale Fit Content Trigger documentation}
+ * @example
+ * ```tsx
+ * <TimeScaleFitContentTrigger deps={[...]} />
+ * ```
+ */
 export declare const TimeScaleFitContentTrigger: ({ deps, }: TimeScaleFitContentTriggerProps) => JSX.Element | null;
 
+/**
+ * TimeScaleFitContentTriggerProps component props.
+ */
 export declare type TimeScaleFitContentTriggerProps = {
     deps: DependencyList;
 };
 
 declare type TimeScaleOptions = DeepPartial<TimeScaleOptions_2>;
 
+/**
+ * TimeScale component props.
+ */
 export declare type TimeScaleProps = {
     onVisibleTimeRangeChange?: TimeRangeChangeEventHandler<Time>;
     onVisibleLogicalRangeChange?: LogicalRangeChangeEventHandler;
@@ -233,8 +553,28 @@ export declare type TimeScaleProps = {
     children?: ReactNode;
 };
 
+/**
+ * Watermark API reference type that can be used to access the watermark plugin API.
+ */
 export declare type WatermarkApiRef<T extends WatermarkType> = T extends "text" ? WatermarkTextApiRefBase : WatermarkImageApiRefBase;
 
+/**
+ * Watermark component that can be used to add an image watermark to a chart pane.
+ *
+ * @param props - The properties for the image watermark.
+ * @param ref - The ref to access the watermark API.
+ * @returns A React component that renders the image watermark.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/watermarks | Watermarks documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/tutorials/how_to/watermark | TradingView documentation for watermarks}
+ * @example
+ * ```tsx
+ * <WatermarkImage
+ *  src="data:image/svg+xml;base64,..."
+ *  alpha={0.5}
+ *  padding={20}
+ * />
+ * ```
+ */
 export declare const WatermarkImage: ForwardRefExoticComponent<ImageWatermarkProps & RefAttributes<WatermarkApiRef<"image">>>;
 
 declare type WatermarkImageApiRefBase = {
@@ -244,6 +584,25 @@ declare type WatermarkImageApiRefBase = {
     clear: () => void;
 };
 
+/**
+ * Watermark component that can be used to add a text or image watermark to a chart pane.
+ *
+ * @param props - The properties for the watermark.
+ * @param ref - The ref to access the watermark API.
+ * @returns A React component that renders the watermark.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/watermarks | Watermarks documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/tutorials/how_to/watermark | TradingView documentation for watermarks}
+ * @example
+ * ```tsx
+ * <WatermarkText
+ *  lines={[
+ *    { text: "Your chart name", color: "blue", fontSize: 24 },
+ *    { text: "Some other text", color: "pink", fontSize: 16 },
+ *  ]}
+ *  horzAlign="center"
+ * />
+ * ```
+ */
 export declare const WatermarkText: ForwardRefExoticComponent<TextWatermarkProps & RefAttributes<WatermarkApiRef<"text">>>;
 
 declare type WatermarkTextApiRefBase = {
@@ -253,6 +612,11 @@ declare type WatermarkTextApiRefBase = {
     clear: () => void;
 };
 
+/**
+ * Watermark types supported by the library.
+ * - `text`: A text watermark.
+ * - `image`: An image watermark.
+ */
 export declare type WatermarkType = "text" | "image";
 
 export { }

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

@@ -1,6 +1,6 @@
 
 /**!
-* lightweight-charts-react-components v1.0.1
+* lightweight-charts-react-components v1.1.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,7 +8,7 @@
 * @license MIT
 */
 
-import*as e from"react";import*as t from"lightweight-charts";let i=(0,e.createContext)(null);i.displayName="ChartContext";let r={addDefaultPane:!1},a=({container:i,onClick:a,onCrosshairMove:l,onInit:n,options:s={},onDblClick:u})=>{let[c,f]=(0,e.useState)(!1),o=(0,e.useRef)({_chart:null,api(){return this._chart},init(){if(null===this._chart){let e=(0,t.createChart)(i,{...r,...s});this._chart=e,n&&n(this._chart)}return c||f(!0),this._chart},clear(){null!==this._chart&&(f(!1),this._chart.remove(),this._chart=null)}});return(0,e.useLayoutEffect)(()=>(o.current.init(),()=>{o.current.clear()}),[]),(0,e.useLayoutEffect)(()=>{if(i){if(a){var e;null===(e=o.current.api())||void 0===e||e.subscribeClick(a)}return()=>{if(a){var e;null===(e=o.current.api())||void 0===e||e.unsubscribeClick(a)}}}},[a]),(0,e.useLayoutEffect)(()=>{if(i){if(l){var e;null===(e=o.current.api())||void 0===e||e.subscribeCrosshairMove(l)}return()=>{if(l){var e;null===(e=o.current.api())||void 0===e||e.unsubscribeCrosshairMove(l)}}}},[l]),(0,e.useLayoutEffect)(()=>{if(i){if(u){var e;null===(e=o.current.api())||void 0===e||e.subscribeDblClick(u)}return()=>{if(u){var e;null===(e=o.current.api())||void 0===e||e.unsubscribeDblClick(u)}}}},[u]),(0,e.useLayoutEffect)(()=>{var e;i&&(null===(e=o.current.api())||void 0===e||e.applyOptions({...r,...s}))},[s]),{chartApiRef:o,isReady:c}},l=({children:t,container:r,onClick:l,onCrosshairMove:n,onInit:s,options:u})=>{let{chartApiRef:{current:c},isReady:f}=a({container:r,onClick:l,onCrosshairMove:n,onInit:s,options:u});return e.default.createElement(i.Provider,{value:{chartApiRef:c,isReady:f}},t)},n=(0,e.forwardRef)(({children:t,containerProps:i,...r},a)=>{let[n,s]=(0,e.useState)(),u=(0,e.useCallback)(e=>{s(e),a&&("function"==typeof a?u(e):a.current=e)},[a]);return e.default.createElement("div",{ref:u,...i},!!n&&e.default.createElement(l,{container:n,...r},t))});n.displayName="ChartWrapper";let s=(0,e.createContext)(null);s.displayName="TimeScaleContext";let u="1.0.1";function c(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}class f extends Error{constructor(e,{isOperational:t=!0,cause:i,docsPath:r}={}){super(e),c(this,"isOperational",void 0),c(this,"cause",void 0),this.name=this.constructor.name??"InternalError",this.isOperational=t,this.cause=i,this.message=`${e??"An error occurred"}`,r&&(this.message=`${this.message}
+import*as e from"react";import*as t from"lightweight-charts";let i=(0,e.createContext)(null);i.displayName="ChartContext";let r={addDefaultPane:!1},a=({container:i,onClick:a,onCrosshairMove:l,onInit:n,options:s={},onDblClick:u})=>{let[c,f]=(0,e.useState)(!1),o=(0,e.useRef)({_chart:null,api(){return this._chart},init(){if(null===this._chart){let e=(0,t.createChart)(i,{...r,...s});this._chart=e,n&&n(this._chart)}return c||f(!0),this._chart},clear(){null!==this._chart&&(f(!1),this._chart.remove(),this._chart=null)}});return(0,e.useLayoutEffect)(()=>(o.current.init(),()=>{o.current.clear()}),[]),(0,e.useLayoutEffect)(()=>{if(i){if(a){var e;null===(e=o.current.api())||void 0===e||e.subscribeClick(a)}return()=>{if(a){var e;null===(e=o.current.api())||void 0===e||e.unsubscribeClick(a)}}}},[a]),(0,e.useLayoutEffect)(()=>{if(i){if(l){var e;null===(e=o.current.api())||void 0===e||e.subscribeCrosshairMove(l)}return()=>{if(l){var e;null===(e=o.current.api())||void 0===e||e.unsubscribeCrosshairMove(l)}}}},[l]),(0,e.useLayoutEffect)(()=>{if(i){if(u){var e;null===(e=o.current.api())||void 0===e||e.subscribeDblClick(u)}return()=>{if(u){var e;null===(e=o.current.api())||void 0===e||e.unsubscribeDblClick(u)}}}},[u]),(0,e.useLayoutEffect)(()=>{var e;i&&(null===(e=o.current.api())||void 0===e||e.applyOptions({...r,...s}))},[s]),{chartApiRef:o,isReady:c}},l=({children:t,container:r,onClick:l,onCrosshairMove:n,onInit:s,options:u})=>{let{chartApiRef:{current:c},isReady:f}=a({container:r,onClick:l,onCrosshairMove:n,onInit:s,options:u});return e.default.createElement(i.Provider,{value:{chartApiRef:c,isReady:f}},t)},n=(0,e.forwardRef)(({children:t,containerProps:i,...r},a)=>{let[n,s]=(0,e.useState)(),u=(0,e.useCallback)(e=>{s(e),a&&("function"==typeof a?u(e):a.current=e)},[a]);return e.default.createElement("div",{ref:u,...i},!!n&&e.default.createElement(l,{container:n,...r},t))});n.displayName="ChartWrapper";let s=(0,e.createContext)(null);s.displayName="TimeScaleContext";let u="1.1.1";function c(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}class f extends Error{constructor(e,{isOperational:t=!0,cause:i,docsPath:r}={}){super(e),c(this,"isOperational",void 0),c(this,"cause",void 0),this.name=this.constructor.name??"InternalError",this.isOperational=t,this.cause=i,this.message=`${e??"An error occurred"}`,r&&(this.message=`${this.message}
 
 Docs: see ${"https://ukorvl.github.io/lightweight-charts-react-components/docs/"+r}`),u&&(this.message=`${this.message}