8: added series markers property

Author: trash-and-fire

packages/demo/src/terminal/controlled-chart.tsx

@@ -1,6 +1,6 @@
-import {ReactNode} from 'react';
+import {ReactNode, useMemo} from 'react';
 import {useControls} from 'leva';
-import {Chart} from 'lightweight-charts-react-wrapper';
+import {Chart, ChartProps} from 'lightweight-charts-react-wrapper';
 import {
     ColorType,
     CrosshairMode,
@@ -192,10 +192,20 @@ export function ControlledChart(props: ControlledChartProps): JSX.Element {
     const kineticScroll = useKineticScrollControls('Kinetic scroll');
     const trackingMode = useTrackingModeControls('Tracking mode');
 
+    const container = useMemo(
+        (): ChartProps['container'] => size.autoSize ? {
+            style: { aspectRatio: '3 / 2', width: size.width, contain: 'size' },
+        } : {
+            ref: (r: HTMLDivElement | null) => console.log(r),
+        },
+        [size.autoSize, size.width]
+    );
+
     return (
         <Chart
             {...props}
             {...size}
+            container={container}
             watermark={watermark}
             layout={layout}
             trackingMode={trackingMode}
@@ -211,8 +221,19 @@ export function ControlledChart(props: ControlledChartProps): JSX.Element {
 
 function useSizeControls(name: string) {
     return useControls(name, {
-        width: 600,
-        height: 300,
+        autoSize: {
+            value: true,
+            label: 'Autosize',
+        },
+        width: {
+            value: 600,
+            label: 'Width',
+        },
+        height: {
+            value: 300,
+            label: 'Height',
+            render: (get) => !get(`${name}.autoSize`),
+        },
     });
 }
 
@@ -235,7 +256,8 @@ function useWatermarkControls(name: string) {
             render: (get) => get(`${name}.visible`),
         },
         fontSize: {
-            value: 48, label: '-- font size',
+            value: 48,
+            label: '-- font size',
             optional: true,
             disabled: true,
             render: (get) => get(`${name}.visible`),

packages/lib/src/components/chart.tsx

@@ -1,4 +1,5 @@
 import {
+    HTMLAttributes,
     ForwardedRef,
     forwardRef,
     memo,
@@ -18,22 +19,38 @@ import {chart, ChartActionResult} from '../internal/chart.js';
 
 export interface ChartProps extends DeepPartial<ChartOptions> {
     children?: ReactNode;
+    container?: HTMLAttributes<HTMLDivElement> & { ref?: ForwardedRef<HTMLDivElement> };
     onClick?: MouseEventHandler;
     onCrosshairMove?: MouseEventHandler;
 }
 
 export const Chart = memo(forwardRef(function Chart(props: ChartProps, ref: ForwardedRef<IChartApi>) {
+    const {container = {}, ...rest} = props;
+    const {ref: containerRef, ...restContainer} = container;
+
     const [element, setElement] = useState<HTMLElement | null>(null);
-    const handleContainerRef = useCallback((ref: HTMLElement | null) => setElement(ref), []);
+    const handleContainerRef = useCallback(
+        (ref: HTMLDivElement | null) => {
+            setElement(ref);
+            if (containerRef) {
+                if (typeof containerRef === 'function') {
+                    containerRef(ref);
+                } else {
+                    containerRef.current = ref;
+                }
+            }
+        },
+        [containerRef]
+    );
 
     return (
-        <div ref={handleContainerRef}>
-            {element !== null ? <ChartComponent {...props} ref={ref} container={element}/> : null}
+        <div ref={handleContainerRef} {...restContainer}>
+            {element !== null ? <ChartComponent {...rest} ref={ref} container={element}/> : null}
         </div>
     )
 }));
 
-const ChartComponent = memo(forwardRef(function ChartComponent(props: ChartProps & { container: HTMLElement }, ref: ForwardedRef<IChartApi>) {
+const ChartComponent = memo(forwardRef(function ChartComponent(props: Omit<ChartProps, 'container'> & { container: HTMLElement }, ref: ForwardedRef<IChartApi>) {
     const {children} = props;
 
     const context = useChartAction(props, ref);
@@ -45,7 +62,7 @@ const ChartComponent = memo(forwardRef(function ChartComponent(props: ChartProps
     );
 }));
 
-function useChartAction(props: ChartProps & { container: HTMLElement }, ref: ForwardedRef<IChartApi>): MutableRefObject<LazyValue<ChartActionResult>> {
+function useChartAction(props: Omit<ChartProps, 'container'> & { container: HTMLElement }, ref: ForwardedRef<IChartApi>): MutableRefObject<LazyValue<ChartActionResult>> {
     const {children, container, ...rest} = props;
 
     const context = useRef(createLazyValue(

packages/lib/src/internal/chart.ts

@@ -74,7 +74,9 @@ export function chart(
                 ) {
                     width = nextOptions.width ?? width;
                     height = nextOptions.height ?? height;
-                    chart.resize(width, height, true);
+                    if (!nextOptions.autoSize) {
+                        chart.resize(width, height, true);
+                    }
                 }
 
                 options = nextOptions;