feat: add different chart types

Author: ukorvl

examples/src/samples/ChartTypes/ChartTypes.tsx

@@ -1,52 +1,108 @@
 import {
-  type ChartOptions as ChartNativeOptions,
+  type ChartOptions as TimeChartNativeOptions,
+  type YieldCurveChartOptions as YieldCurveChartNativeOptions,
+  type PriceChartOptions as PriceChartNativeOptions,
   type DeepPartial,
   type IChartApi,
   type MouseEventHandler,
   type Time,
+  type IYieldCurveChartApi,
+  // createOptionsChart,
+  // createYieldCurveChart
 } from "lightweight-charts";
+import type { IChartApiBase } from "lightweight-charts";
 import type { JSX, ReactNode } from "react";
 
 /**
- * Chart component props.
+ * Chart component properties that can be used to create a chart.
  */
-export type ChartProps = {
-  children?: ReactNode;
-  containerProps?: JSX.IntrinsicElements["div"];
-  onClick?: MouseEventHandler<Time>;
-  onCrosshairMove?: MouseEventHandler<Time>;
-  options?: DeepPartial<ChartNativeOptions>;
-  onDblClick?: MouseEventHandler<Time>;
-};
+export type ChartApiType = IYieldCurveChartApi | IChartApiBase<number> | IChartApi;
 
 /**
  * Chart API reference type that can be used to access the chart plugin API.
  */
-export type ChartApiRef = {
-  _chart: IChartApi | null;
-  api: () => IChartApi | null;
-  init: () => IChartApi | null;
+export type ChartApiRef<T extends ChartApiType> = {
+  _chart: T | null;
+  api: () => T | null;
+  init: () => T | null;
   clear: () => void;
 };
 
 /**
  * Chart context that provides access to the chart API and readiness state.
  */
-export interface IChartContext {
-  chartApiRef: ChartApiRef | null;
+export interface IChartContext<T extends ChartApiType> {
+  chartApiRef: ChartApiRef<T> | null;
   isReady: boolean;
 }
 
+type ChartCommonProps = {
+  children?: ReactNode;
+  containerProps?: JSX.IntrinsicElements["div"];
+};
+
+type TimeChartOwnProps = {
+  onClick?: MouseEventHandler<Time>;
+  onCrosshairMove?: MouseEventHandler<Time>;
+  onDblClick?: MouseEventHandler<Time>;
+  options?: DeepPartial<TimeChartNativeOptions>;
+};
+
+type YieldCurveChartProps = {
+  onClick?: MouseEventHandler<number>;
+  onCrosshairMove?: MouseEventHandler<number>;
+  onDblClick?: MouseEventHandler<number>;
+  options?: DeepPartial<YieldCurveChartNativeOptions>;
+};
+
+type OptionsChartOwnProps = {
+  onClick?: MouseEventHandler<number>;
+  onCrosshairMove?: MouseEventHandler<number>;
+  onDblClick?: MouseEventHandler<number>;
+  options?: DeepPartial<PriceChartNativeOptions>;
+};
+
 /**
  * Chart component properties that can be used to create a chart.
  */
+export type ChartOwnProps =
+  | TimeChartOwnProps
+  | YieldCurveChartProps
+  | OptionsChartOwnProps;
+
+/**
+ * Chart component props.
+ */
+export type ChartProps = ChartCommonProps & TimeChartOwnProps;
+
+/**
+ * Yield chart component properties.
+ */
+export type YieldCurveChartOwnProps = ChartCommonProps & YieldCurveChartProps;
+
+/**
+ * Options chart component properties.
+ */
+export type OptionsChartProps = ChartCommonProps & OptionsChartOwnProps;
+
+/**
+ * Chart component properties.
+ */
 export type ChartComponentProps = {
   container: HTMLElement;
 } & Omit<ChartProps, "containerProps">;
 
 /**
  * Options for the useChart hook.
  */
-export type UseChartOptions = {
+export type UseChartOptions<T extends ChartOwnProps> = {
   container: HTMLElement;
-} & Omit<ChartProps, "children" | "containerProps">;
+  createChartHandler: (
+    container: string | HTMLElement,
+    options?: DeepPartial<T["options"]>
+  ) => IChartApi;
+} & T;
+
+// so the chart api for different charts is also diferent - different type
+// can i handle it in 1 hook?
+// need to explore here more

examples/src/samples/ChartTypes/chartTypesStore.ts

@@ -1,15 +1,17 @@
-import { createChart } from "lightweight-charts";
+/* eslint-disable */
 import { useLayoutEffect, useRef, useState } from "react";
+import type { ChartApiRef, ChartOwnProps, UseChartOptions } from "./types";
 import { defaultChartOptions } from "./defaultChartOptions";
-import type { ChartApiRef, UseChartOptions } from "./types";
+import { createChart } from "lightweight-charts";
 
-export const useChart = ({
+export const useChart = <T extends ChartOwnProps>({
   container,
   onClick,
   onCrosshairMove,
   options = {},
   onDblClick,
-}: UseChartOptions) => {
+  createChartHandler,
+}: UseChartOptions<T>) => {
   const [isReady, setIsReady] = useState(false);
 
   const chartApiRef = useRef<ChartApiRef>({
@@ -24,6 +26,7 @@ export const useChart = ({
           ...options,
         });
         this._chart = chart;
+        this._chart = createChartHandler(container, options);
       }
 
       if (!isReady) {
@@ -53,12 +56,12 @@ export const useChart = ({
     if (!container) return;
 
     if (onClick) {
-      chartApiRef.current.api()?.subscribeClick(onClick);
+      chartApiRef.current.api()?.subscribeClick(onClick as any);
     }
 
     return () => {
       if (onClick) {
-        chartApiRef.current.api()?.unsubscribeClick(onClick);
+        chartApiRef.current.api()?.unsubscribeClick(onClick as any);
       }
     };
   }, [onClick]);
@@ -67,12 +70,12 @@ export const useChart = ({
     if (!container) return;
 
     if (onCrosshairMove) {
-      chartApiRef.current.api()?.subscribeCrosshairMove(onCrosshairMove);
+      chartApiRef.current.api()?.subscribeCrosshairMove(onCrosshairMove as any);
     }
 
     return () => {
       if (onCrosshairMove) {
-        chartApiRef.current.api()?.unsubscribeCrosshairMove(onCrosshairMove);
+        chartApiRef.current.api()?.unsubscribeCrosshairMove(onCrosshairMove as any);
       }
     };
   }, [onCrosshairMove]);
@@ -81,12 +84,12 @@ export const useChart = ({
     if (!container) return;
 
     if (onDblClick) {
-      chartApiRef.current.api()?.subscribeDblClick(onDblClick);
+      chartApiRef.current.api()?.subscribeDblClick(onDblClick as any);
     }
 
     return () => {
       if (onDblClick) {
-        chartApiRef.current.api()?.unsubscribeDblClick(onDblClick);
+        chartApiRef.current.api()?.unsubscribeDblClick(onDblClick as any);
       }
     };
   }, [onDblClick]);